diff --git a/apps/trading/components/competitions/games-container.tsx b/apps/trading/components/competitions/games-container.tsx index e59f9c576..9d6053942 100644 --- a/apps/trading/components/competitions/games-container.tsx +++ b/apps/trading/components/competitions/games-container.tsx @@ -1,6 +1,11 @@ import { type TransferNode } from '@vegaprotocol/types'; -import { ActiveRewardCard } from '../rewards-container/active-rewards'; +import { + ActiveRewardCard, + isActiveReward, +} from '../rewards-container/active-rewards'; import { useT } from '../../lib/use-t'; +import { useAssetsMapProvider } from '@vegaprotocol/assets'; +import { useMarketsMapProvider } from '@vegaprotocol/markets'; export const GamesContainer = ({ data, @@ -10,8 +15,35 @@ export const GamesContainer = ({ currentEpoch: number; }) => { const t = useT(); + // Re-load markets and assets in the games container to ensure that the + // the cards are updated (not grayed out) when the user navigates to the games page + const { data: assets } = useAssetsMapProvider(); + const { data: markets } = useMarketsMapProvider(); - if (!data || data.length === 0) { + const enrichedTransfers = data + .filter((node) => isActiveReward(node, currentEpoch)) + .map((node) => { + if (node.transfer.kind.__typename !== 'RecurringTransfer') { + return node; + } + + const asset = + assets && + assets[ + node.transfer.kind.dispatchStrategy?.dispatchMetricAssetId || '' + ]; + + const marketsInScope = + node.transfer.kind.dispatchStrategy?.marketIdsInScope?.map( + (id) => markets && markets[id] + ); + + return { ...node, asset, markets: marketsInScope }; + }); + + if (!enrichedTransfers || !enrichedTransfers.length) return null; + + if (!enrichedTransfers || enrichedTransfers.length === 0) { return (
{t('There are currently no games available.')} @@ -21,7 +53,7 @@ export const GamesContainer = ({ return (
+