LaconicNetwork/vega-frontend-monorepo
3
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

feat(trading): games container search bar (#6077)

Browse Source
This commit is contained in:
m.ray 2024-03-22 15:34:40 +02:00 committed by GitHub
parent 0a70c0ea49
commit dc81334aec
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 110 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

126
apps/trading/components/competitions/games-container.tsx
View File

@ -4,6 +4,72 @@ import { useVegaWallet } from '@vegaprotocol/wallet-react';
import { useStakeAvailable } from '../../lib/hooks/use-stake-available';
import { useMyTeam } from '../../lib/hooks/use-my-team';
import { ActiveRewardCard } from '../rewards-container/reward-card';
import {
VegaIcon,
VegaIconNames,
TradingInput,
} from '@vegaprotocol/ui-toolkit';
import { useState } from 'react';
import { type AssetFieldsFragment } from '@vegaprotocol/assets';
import { type MarketFieldsFragment } from '@vegaprotocol/markets';
import {
type TransferNode,
DispatchMetricLabels,
EntityScopeLabelMapping,
AccountType,
} from '@vegaprotocol/types';
export type Filter = {
searchTerm: string;
};
export const applyFilter = (
node: TransferNode & {
asset?: AssetFieldsFragment | null;
markets?: (MarketFieldsFragment | null)[];
},
filter: Filter
) => {
const { transfer } = node;
// if the transfer is a staking reward then it should be displayed
if (transfer.toAccountType === AccountType.ACCOUNT_TYPE_GLOBAL_REWARD) {
return true;
}
if (transfer.kind.__typename !== 'RecurringTransfer') {
return false;
}
if (
(transfer.kind.dispatchStrategy?.dispatchMetric &&
DispatchMetricLabels[transfer.kind.dispatchStrategy.dispatchMetric]
.toLowerCase()
.includes(filter.searchTerm.toLowerCase())) ||
transfer.asset?.symbol
.toLowerCase()
.includes(filter.searchTerm.toLowerCase()) ||
(
(transfer.kind.dispatchStrategy &&
EntityScopeLabelMapping[transfer.kind.dispatchStrategy.entityScope]) ||
'Unspecified'
)
.toLowerCase()
.includes(filter.searchTerm.toLowerCase()) ||
node.asset?.name
.toLocaleLowerCase()
.includes(filter.searchTerm.toLowerCase()) ||
node.markets?.some((m) =>
m?.tradableInstrument?.instrument?.name
.toLocaleLowerCase()
.includes(filter.searchTerm.toLowerCase())
)
) {
return true;
}
return false;
};
export const GamesContainer = ({
data,
@ -27,6 +93,10 @@ export const GamesContainer = ({
}
: undefined;
const [filter, setFilter] = useState<Filter>({
searchTerm: '',
});
if (!data || data.length === 0) {
return (
<p className="text-sm">
@ -36,25 +106,43 @@ export const GamesContainer = ({
}
return (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{data.map((game, i) => {
// TODO: Remove `kind` prop from ActiveRewardCard
const { transfer } = game;
if (
transfer.kind.__typename !== 'RecurringTransfer' ||
!transfer.kind.dispatchStrategy?.dispatchMetric
) {
return null;
}
return (
<ActiveRewardCard
key={i}
transferNode={game}
currentEpoch={currentEpoch}
requirements={requirements}
/>
);
})}
<div>
{/** CARDS FILTER */}
{data.length > 1 && (
<TradingInput
onChange={(e) =>
setFilter((curr) => ({ ...curr, searchTerm: e.target.value }))
}
value={filter.searchTerm}
type="text"
placeholder={t(
'Search by reward dispatch metric, entity scope or asset name'
)}
data-testid="search-term"
className="mb-4 w-20 mr-2 max-w-xl"
prependElement={<VegaIcon name={VegaIconNames.SEARCH} />}
/>
)}
{/** CARDS */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{data
.filter((n) => applyFilter(n, filter))
.map((game, i) => {
// TODO: Remove `kind` prop from ActiveRewardCard
const { transfer } = game;
if (!transfer.kind.dispatchStrategy?.dispatchMetric) {
return null;
}
return (
<ActiveRewardCard
key={i}
transferNode={game}
currentEpoch={currentEpoch}
requirements={requirements}
/>
);
})}
</div>
</div>
);
};

2
apps/trading/components/rewards-container/active-rewards.tsx
View File

@ -114,7 +114,7 @@ export const ActiveRewards = ({ currentEpoch }: { currentEpoch: number }) => {
'Search by reward dispatch metric, entity scope or asset name'
)}
data-testid="search-term"
className="mb-4 w-20 mr-2"
className="mb-4 w-20 mr-2 max-w-xl"
prependElement={<VegaIcon name={VegaIconNames.SEARCH} />}
/>
)}

2
apps/trading/components/rewards-container/reward-card.tsx
View File

@ -634,7 +634,7 @@ const RewardRequirements = ({
description={
averagePosition
? t(
'Your average position is {{averagePosition}}, but the requirement is {{averagePositionRequirements}}',
'Your average position is {{averagePosition}}, and the requirement is {{averagePositionRequirements}}',
{
averagePosition: averagePositionFormatted,
averagePositionRequirements:

2
libs/i18n/src/locales/en/trading.json
View File

@ -451,7 +451,7 @@
"You need a <0>Vega wallet</0> to start trading in this market.": "You need a <0>Vega wallet</0> to start trading in this market.",
"You need at least {{requiredStake}} VEGA staked to generate a referral code and participate in the referral program.": "You need at least {{requiredStake}} VEGA staked to generate a referral code and participate in the referral program.",
"You will no longer be able to hold a position on this market when it closes in {{duration}}.": "You will no longer be able to hold a position on this market when it closes in {{duration}}.",
"Your average position is {{averagePosition}}, but the requirement is {{averagePositionRequirements}}": "Your average position is {{averagePosition}}, but the requirement is {{averagePositionRequirements}}",
"Your average position is {{averagePosition}}, and the requirement is {{averagePositionRequirements}}": "Your average position is {{averagePosition}}, and the requirement is {{averagePositionRequirements}}",
"Your code has been rejected": "Your code has been rejected",
"Your identity is always anonymous on Vega": "Your identity is always anonymous on Vega",
"Your key's private name, can be changed in your wallet": "Your key's private name, can be changed in your wallet",