nits

dydxfoundation · Jan 18, 2024 · 29fa4c1 · 29fa4c1
1 parent 28439c3
commit 29fa4c1
Show file tree

Hide file tree

Showing 6 changed files with 89 additions and 31 deletions.
diff --git a/src/components/Cards/InfoCtaCard.tsx b/src/components/Cards/InfoCtaCard.tsx
@@ -16,7 +16,7 @@ type CtaConfigs = {
 export type InfoCtaCardProps = {
   label: string;
   title?: string;
-  body?: string;
+  body?: React.ReactNode;
   ctaConfigs?: CtaConfigs;
 };
 

diff --git a/src/constants/localization/app.ts b/src/constants/localization/app.ts
@@ -69,7 +69,10 @@ export const APP_STRING_KEYS = {
   TRACK_BALANCES: 'GENERAL.TRACK_BALANCES',
   TRADE: 'GENERAL.TRADE',
   TRADING_REWARDS: 'GENERAL.TRADING_REWARDS',
-  TRADING_REWARDS_UPDATED_DESCRIPTION: 'GENERAL.TRADING_REWARDS_UPDATED_DESCRIPTION',
+  TRADING_REWARDS_UPDATED_DESCRIPTION_1: 'GENERAL.TRADING_REWARDS_UPDATED_DESCRIPTION_1',
+  TRADING_REWARDS_UPDATED_DESCRIPTION_2: 'GENERAL.TRADING_REWARDS_UPDATED_DESCRIPTION_2',
+  TRADING_REWARDS_UPDATED_DESCRIPTION_3: 'GENERAL.TRADING_REWARDS_UPDATED_DESCRIPTION_3',
+  TRADING_REWARDS_FORMULA: 'GENERAL.TRADING_REWARDS_FORMULA',
   TRANSFER_LOCK_COOLDOWN: 'GENERAL.TRANSFER_LOCK_COOLDOWN',
   TWITTER_DESCRIPTION: 'GENERAL.TWITTER_DESCRIPTION',
   TWITTER: 'GENERAL.TWITTER',

diff --git a/src/enums/links.ts b/src/enums/links.ts
@@ -11,6 +11,7 @@ export enum ExternalLink {
   Discord = 'https://discord.com/invite/yah42Rb',
   Documentation = 'https://docs.dydx.community',
   Forums = 'https://dydx.forum/',
+  Foundation = 'https://dydx.foundation',
   PrivacyPolicy = 'https://dydx.foundation/privacy',
   RevolvingCreditAgreement = 'https://dydx.foundation/revolving-credit-agreement',
   TermsOfUse = 'https://dydx.foundation/terms',

diff --git a/src/localization/en/app.json b/src/localization/en/app.json
@@ -70,7 +70,10 @@
     "TRACK_BALANCES": "Track balances",
     "TRADE": "Trade",
     "TRADING_REWARDS": "Trading Rewards",
-    "TRADING_REWARDS_UPDATED_DESCRIPTION": "In DIP 29, the dYdX Community voted to reduce Trading Rewards to 0 at the start of Epoch 32 (January 16, 2024). Previously, trading rewards were earned by traders on dYdX v3 based on the trading rewards formula and distributed to traders on dYdX every epoch (28 days). Trading rewards that were previously earned are claimable from smart contracts deployed by the dYdX Foundation. Trading rewards were based on data provided by the dYdX product.",
+    "TRADING_REWARDS_UPDATED_DESCRIPTION_1": "In {DIP_29_LINK}, the dYdX Community voted to reduce Trading Rewards to 0 at the start of Epoch 32 (January 16, 2024).",
+    "TRADING_REWARDS_UPDATED_DESCRIPTION_2": "Previously, trading rewards were earned by traders on dYdX v3 based on the {TRADING_REWARDS_FORMULA_LINK} and distributed to traders on dYdX every epoch (28 days).",
+    "TRADING_REWARDS_UPDATED_DESCRIPTION_3": "Trading rewards that were previously earned are claimable via {DYDX_COMMUNITY_LINK} from smart contracts deployed by the {DYDX_FOUNDATION_LINK}. Trading rewards were based on data provided by the dYdX product.",
+    "TRADING_REWARDS_FORMULA": "trading rewards formula",
     "TRANSFER_LOCK_COOLDOWN": "Transfer Lock Cooldown",
     "TWITTER": "Twitter",
     "TWITTER_DESCRIPTION": "Keep in touch with news",

diff --git a/src/pages/dashboard/Dashboard.tsx b/src/pages/dashboard/Dashboard.tsx
@@ -2,28 +2,20 @@ import React from 'react';
 import ReactDOMServer from 'react-dom/server';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import { DateTime } from 'luxon';
 import styled from 'styled-components';
 
 import { AppDispatch, RootState } from '@/store';
-import { AssetSymbol, DocumentationSublinks, ExternalLink, ModalType, StakingPool } from '@/enums';
+import { AppRoute, DocumentationSublinks, ExternalLink, StakingPool } from '@/enums';
 import { LocalizationProps } from '@/types';
 
 import { withLocalization } from '@/hoc';
-import { useGetCountdownDiff, usePollEpochData } from '@/hooks';
+import { usePollEpochData } from '@/hooks';
 
-import AssetIcon, { AssetIconSize } from '@/components/AssetIcon';
 import GeoBlockBanner from '@/components/GeoBlockBanner';
 import SectionHeader from '@/components/SectionHeader';
 import SectionWrapper from '@/components/SectionWrapper';
 
-import {
-  SingleStatCard,
-  InfoCtaCard,
-  CardContainer,
-  CardSize,
-  ValueWithIcon,
-} from '@/components/Cards';
+import { InfoCtaCard, CardContainer } from '@/components/Cards';
 
 import { openModal as openModalAction } from '@/actions/modals';
 
@@ -40,15 +32,15 @@ export type DashboardProps = {} & LocalizationProps;
 
 const Dashboard: React.FC<
   DashboardProps & ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps>
-> = ({ isUserGeoBlocked, openModal, stakingPoolsData, stringGetter }) => {
+> = ({ isUserGeoBlocked, stringGetter }) => {
   usePollEpochData({ stakingPool: StakingPool.Liquidity });
 
-  const { nextEpochDate } = stakingPoolsData.data[StakingPool.Liquidity];
-
-  const formattedDiffUntilEpoch = useGetCountdownDiff({
-    futureDateISO: nextEpochDate,
-    stringGetter,
-  });
+  const renderLink = (text: string, href: string) =>
+    ReactDOMServer.renderToString(
+      <a href={href} target="_blank" rel="noopener noreferrer">
+        {text}
+      </a>
+    );
 
   return (
     <>
@@ -62,10 +54,50 @@ const Dashboard: React.FC<
       <StakingPoolsRow />
       <SectionWrapper column>
         <SectionHeader title={stringGetter({ key: STRING_KEYS.TRADING_REWARDS })} />
-        <CardContainer>
+        <StyledCardContainer>
           <InfoCtaCard
             label={stringGetter({ key: STRING_KEYS.TRADING_REWARDS })}
-            body={stringGetter({ key: STRING_KEYS.TRADING_REWARDS_UPDATED_DESCRIPTION })}
+            body={
+              <StyledRewardsContent>
+                <p
+                  dangerouslySetInnerHTML={{
+                    __html: stringGetter({
+                      key: STRING_KEYS.TRADING_REWARDS_UPDATED_DESCRIPTION_1,
+                      params: {
+                        DIP_29_LINK: renderLink('DIP 29', `${AppRoute.ProposalDetail}/16`),
+                      },
+                    }),
+                  }}
+                />
+                <p
+                  dangerouslySetInnerHTML={{
+                    __html: stringGetter({
+                      key: STRING_KEYS.TRADING_REWARDS_UPDATED_DESCRIPTION_2,
+                      params: {
+                        TRADING_REWARDS_FORMULA_LINK: renderLink(
+                          stringGetter({ key: STRING_KEYS.TRADING_REWARDS_FORMULA }),
+                          `${ExternalLink.Documentation}${DocumentationSublinks.TradingRewards}`
+                        ),
+                      },
+                    }),
+                  }}
+                />
+                <p
+                  dangerouslySetInnerHTML={{
+                    __html: stringGetter({
+                      key: STRING_KEYS.TRADING_REWARDS_UPDATED_DESCRIPTION_3,
+                      params: {
+                        DYDX_COMMUNITY_LINK: 'dydx.community',
+                        DYDX_FOUNDATION_LINK: renderLink(
+                          'dYdX Foundation',
+                          ExternalLink.Foundation
+                        ),
+                      },
+                    }),
+                  }}
+                />
+              </StyledRewardsContent>
+            }
             ctaConfigs={{
               primary: {
                 label: stringGetter({ key: STRING_KEYS.LEARN_MORE }),
@@ -79,7 +111,7 @@ const Dashboard: React.FC<
               },
             }}
           />
-        </CardContainer>
+        </StyledCardContainer>
       </SectionWrapper>
       {!isUserGeoBlocked && <ProposalsSection />}
     </>
@@ -102,3 +134,27 @@ const mapDispatchToProps = (dispatch: AppDispatch) =>
 export default withLocalization<DashboardProps>(
   connect(mapStateToProps, mapDispatchToProps)(Dashboard)
 );
+
+const StyledCardContainer = styled(CardContainer)`
+  > div {
+    flex: 1;
+    width: 100%;
+  }
+`;
+
+const StyledRewardsContent = styled.div`
+  a {
+    color: ${({ theme }) => theme.colorpurple};
+    text-decoration: none;
+    cursor: pointer;
+
+    &:visited {
+      color: ${({ theme }) => theme.colorpurple};
+    }
+
+    &:hover {
+      color: ${({ theme }) => theme.colorpurple};
+      text-decoration: underline;
+    }
+  }
+`;
diff --git a/src/pages/dashboard/DashboardHeader/DashboardHeader.tsx b/src/pages/dashboard/DashboardHeader/DashboardHeader.tsx
@@ -9,16 +9,14 @@ import { AppDispatch, RootState } from '@/store';
 import { LocalizationProps } from '@/types';
 import { AssetSymbol, DecimalPlaces, ModalType } from '@/enums';
 
-import { useGetDistributionData, usePollGovernancePowersData, usePollWalletBalances } from '@/hooks';
+import { usePollGovernancePowersData, usePollWalletBalances } from '@/hooks';
 import { withLocalization } from '@/hoc';
-import { breakpoints, NotTabletOnly, TabletOnly } from '@/styles';
+import { breakpoints } from '@/styles';
 
 import AssetIcon, { AssetIconSize } from '@/components/AssetIcon';
-import LoadingBar from '@/components/LoadingBar';
 import SectionWrapper from '@/components/SectionWrapper';
 
 import {
-  ProgressBarCard,
   SingleStatCard,
   CardContainer,
   CardSize,
@@ -58,9 +56,6 @@ const DashboardHeader: React.FC<
   usePollWalletBalances({ assetSymbol: AssetSymbol.DYDX });
   usePollWalletBalances({ assetSymbol: AssetSymbol.stDYDX });
 
-  const { circulatingSupply, distributedToday } = useGetDistributionData();
-  const circulatingSupplyPercent = MustBigNumber(circulatingSupply).div('1000000000');
-
   const { hasDelegatees: proposingPowerHasDelegatees } = findProposingPowerDelegatee({
     forStakedTokenPowers: true,
     forTokenPowers: true,