feat(trading): enable simple reward cards

Nebula-DEX · Nov 7, 2024 · fd9a111 · fd9a111
1 parent cb581f6
commit fd9a111
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 90 deletions.
diff --git a/apps/trading/client-pages/competitions/competitions-home.tsx b/apps/trading/client-pages/competitions/competitions-home.tsx
@@ -1,34 +1,24 @@
 import { useT } from '../../lib/use-t';
 import { ExternalLink, Loader } from '@vegaprotocol/ui-toolkit';
-import { useEpochInfoQuery } from '../../lib/hooks/__generated__/Epoch';
 import { Link } from 'react-router-dom';
 import { Links } from '../../lib/links';
 import { CompetitionsActions } from '../../components/competitions/competitions-cta';
-import { GamesContainer } from '../../components/competitions/games-container';
 import { CompetitionsLeaderboard } from '../../components/competitions/competitions-leaderboard';
 import { useTeams } from '../../lib/hooks/use-teams';
 import take from 'lodash/take';
 import { usePageTitle } from '../../lib/hooks/use-page-title';
 import { TeamCard } from '../../components/competitions/team-card';
 import { useMyTeam } from '../../lib/hooks/use-my-team';
-import { useRewards } from '../../lib/hooks/use-rewards';
 import { Trans } from 'react-i18next';
 import { DocsLinks } from '@vegaprotocol/environment';
 
 import { HeaderHero } from '../../components/header-hero';
 import { ErrorBoundary } from '../../components/error-boundary';
-// import { SimpleRewardCardsContainer } from '../../components/rewards-container/simple-reward-cards-container';
+import { SimpleRewardCardsContainer } from '../../components/rewards-container/simple-reward-cards-container';
 
 export const CompetitionsHome = () => {
   const t = useT();
   usePageTitle(t('Competitions'));
-  const { data: epochData } = useEpochInfoQuery();
-  const currentEpoch = Number(epochData?.epoch.id);
-
-  const { data: gamesData, loading: gamesLoading } = useRewards({
-    onlyActive: true,
-    scopeToTeams: true,
-  });
   const { data: teamsData, loading: teamsLoading } = useTeams();
 
   const {
@@ -97,36 +87,7 @@ export const CompetitionsHome = () => {
       )}
 
       {/** List of available games */}
-      <section className="mb-12">
-        <h2 className="text-2xl mb-1">{t('Games')}</h2>
-        <p className="mb-6 text-sm">
-          <Trans
-            i18nKey={
-              'See all the live games on the cards below. <0>Find out how to create one</0>.'
-            }
-            components={[
-              <ExternalLink
-                className="underline"
-                key="find-out"
-                href={DocsLinks?.ASSET_TRANSFER_PROPOSAL}
-              >
-                Find out how to create one
-              </ExternalLink>,
-            ]}
-          />
-          {/** Docs: https://docs.vega.xyz/mainnet/tutorials/proposals/asset-transfer-proposal */}
-        </p>
-
-        <div className="mb-12 flex">
-          {gamesLoading ? (
-            <Loader size="small" />
-          ) : (
-            <GamesContainer data={gamesData} currentEpoch={currentEpoch} />
-          )}
-        </div>
-        {/* TODO: replace GamesContainer when public/rewards-cards.json has good data */}
-        {/* <SimpleRewardCardsContainer /> */}
-      </section>
+      <SimpleRewardCardsContainer />
 
       {/** The teams ranking */}
       <section>

diff --git a/apps/trading/components/rewards-container/simple-reward-card.tsx b/apps/trading/components/rewards-container/simple-reward-card.tsx
@@ -22,7 +22,7 @@ export const SimpleRewardCard = ({
 }: RewardCard) => {
   const t = useT();
   return (
-    <div className="grid grid-rows-[subgrid] row-span-5 p-4 rounded-grid relative overflow-hidden">
+    <div className="grid grid-rows-[subgrid] row-span-5 p-4 rounded-grid relative overflow-hidden bg-gradient-to-b from-surface-1/80 to-surface-1/60">
       <ColourfulBorder />
       <RewardImage img={img} />
 
@@ -45,15 +45,15 @@ export const SimpleRewardCard = ({
 
       <h3 className="text-3xl leading-none">{title}</h3>
 
-      <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-4 text-surface-1-fg-muted">
         <ReactMarkdown
           components={{
             p: ({ children }) => {
               return <p>{children}</p>;
             },
             ul: ({ children }) => {
               return (
-                <ul className="flex flex-col gap-0 list-disc list-inside marker:text-intent-primary marker:mr-0">
+                <ul className="flex flex-col gap-0 list-disc list-inside marker:text-highlight marker:mr-0">
                   {children}
                 </ul>
               );

diff --git a/apps/trading/components/rewards-container/simple-reward-cards-container.tsx b/apps/trading/components/rewards-container/simple-reward-cards-container.tsx
@@ -1,23 +1,47 @@
 import { SimpleRewardCard } from './simple-reward-card';
-import { Loader } from '@vegaprotocol/ui-toolkit';
+import { ExternalLink, Loader } from '@vegaprotocol/ui-toolkit';
 import { useRewardCards } from '@vegaprotocol/rest';
+import { Trans } from 'react-i18next';
+import { DocsLinks } from '@vegaprotocol/environment';
+import { useT } from '../../lib/use-t';
 
 export const SimpleRewardCardsContainer = () => {
+  const t = useT();
   const { data, isLoading } = useRewardCards();
 
-  if (isLoading) {
-    return (
-      <div>
-        <Loader />
-      </div>
-    );
-  }
+  if (!data.length) return null;
 
   return (
-    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-      {data?.map((card) => {
-        return <SimpleRewardCard key={card.rewardId} {...card} />;
-      })}
-    </div>
+    <section className="mb-12">
+      <h2 className="text-2xl mb-1">{t('Games')}</h2>
+      <p className="mb-6 text-sm">
+        <Trans
+          i18nKey={
+            'See all the live games on the cards below. <0>Find out how to create one</0>.'
+          }
+          components={[
+            <ExternalLink
+              className="underline"
+              key="find-out"
+              href={DocsLinks?.ASSET_TRANSFER_PROPOSAL}
+            >
+              Find out how to create one
+            </ExternalLink>,
+          ]}
+        />
+        {/** Docs: https://docs.vega.xyz/mainnet/tutorials/proposals/asset-transfer-proposal */}
+      </p>
+      <div className="mb-12 flex flex-col">
+        {isLoading ? (
+          <Loader />
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+            {data?.map((card) => {
+              return <SimpleRewardCard key={card.rewardId} {...card} />;
+            })}
+          </div>
+        )}
+      </div>
+    </section>
   );
 };
diff --git a/apps/trading/public/reward-cards.json b/apps/trading/public/reward-cards.json
diff --git a/libs/rest/src/queries/reward-cards.ts b/libs/rest/src/queries/reward-cards.ts
@@ -1,5 +1,4 @@
 import { queryOptions } from '@tanstack/react-query';
-import axios from 'axios';
 import { z } from 'zod';
 import { Time } from '../utils';
 
@@ -19,13 +18,9 @@ const rewardCardSchema = z.object({
 const rewardCardsSchema = z.array(rewardCardSchema);
 
 export type RewardCard = z.infer<typeof rewardCardSchema>;
-type RewardCardsResponse = z.infer<typeof rewardCardsSchema>;
 
 export const retrieveRewardCards = async () => {
-  const endpoint = '/reward-cards.json';
-  const res = await axios.get<RewardCardsResponse>(endpoint);
-
-  return rewardCardsSchema.parse(res.data);
+  return rewardCardsSchema.parse(data);
 };
 
 export const queryKeys = {
@@ -38,5 +33,43 @@ export function rewardCardsOptions() {
     queryKey: queryKeys.all,
     queryFn: () => retrieveRewardCards(),
     staleTime: Time.HOUR,
+    initialData: data,
   });
 }
+
+// Add reward card data here
+const data: RewardCard[] = [
+  /*
+  {
+    rewardId:
+      '82456b68780b36dcdfcda3fb70dbfd81dc1a81f20175ff5d9de13e56f8478b51',
+    title: 'Reward A',
+    img: '',
+    description:
+      'AAA This is a description that returns onto a maximum number of lines to be defined. It may also be truncated at 3 or 4 lines.\n\n* **1,666.58 NEB**\n* Distribution strategy: Pro rata \n* Reward pool amount and asset\n* Another bullet point\n* Another bullet point',
+    tags: [
+      { text: 'best reward ever', variant: 'primary' },
+      { text: 'another', variant: 'secondary' },
+      { text: 'foo', variant: 'tertiary' },
+    ],
+  },
+  {
+    rewardId:
+      'a067c9f3f0d0e8e032050e84893c909fb6140e00fb7145d81fe6786d3efe7854',
+    title: 'Reward B',
+    img: '',
+    description:
+      'BBB This is a *description* that returns onto a maximum number of lines to be defined. It may also be truncated at 3 or 4 lines.\n\n* **1,666.58 NEB**\n* Distribution strategy: Pro rata \n* Reward pool amount and asset\n* Another bullet point\n* Another bullet point',
+    tags: [{ text: 'best reward ever', variant: 'primary' }],
+  },
+  {
+    rewardId:
+      '9584bc79fd8b6db70df612c957a495fa0ca30a49c9be2d09c045ae5a4653d892',
+    title: 'Reward C',
+    img: '',
+    description:
+      'CCC This is a description that returns onto a maximum number of lines to be defined. It may also be truncated at 3 or 4 lines.\n\n* **1,666.58 NEB**\n* Distribution strategy: Pro rata \n* Reward pool amount and asset',
+    tags: [{ text: 'best reward ever', variant: 'secondary' }],
+  },
+  */
+];