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

apps/trading/components/competitions/games-container.tsx

@@ -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">
+    <div>
-      {data.map((game, i) => {
+      {/** CARDS FILTER */}
-        // TODO: Remove `kind` prop from ActiveRewardCard
+      {data.length > 1 && (
-        const { transfer } = game;
+        <TradingInput
-        if (
+          onChange={(e) =>
-          transfer.kind.__typename !== 'RecurringTransfer' ||
+            setFilter((curr) => ({ ...curr, searchTerm: e.target.value }))
-          !transfer.kind.dispatchStrategy?.dispatchMetric
+          }
-        ) {
+          value={filter.searchTerm}
-          return null;
+          type="text"
-        }
+          placeholder={t(
-        return (
+            'Search by reward dispatch metric, entity scope or asset name'
-          <ActiveRewardCard
+          )}
-            key={i}
+          data-testid="search-term"
-            transferNode={game}
+          className="mb-4 w-20 mr-2 max-w-xl"
-            currentEpoch={currentEpoch}
+          prependElement={<VegaIcon name={VegaIconNames.SEARCH} />}
-            requirements={requirements}
+        />
-          />
+      )}
-        );
+      {/** 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>
   );
 };

apps/trading/components/rewards-container/active-rewards.tsx

@@ -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} />}
         />
       )}

apps/trading/components/rewards-container/reward-card.tsx

@@ -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:

libs/i18n/src/locales/en/trading.json

@@ -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",