nits

dydxfoundation · Jan 18, 2024 · 6412cca · 6412cca
1 parent 28439c3
commit 6412cca
Show file tree

Hide file tree

Showing 7 changed files with 95 additions and 31 deletions.
diff --git a/.env b/.env
@@ -9,3 +9,10 @@ VITE_AVG_BLOCK_TIME=12100
 VITE_BLOCK_POLL_MS=60000
 VITE_COUNTDOWN_POLL_MS=60000
 VITE_DATA_POLL_MS=600000
+
+VITE_WALLETCONNECT2_PROJECT_ID=18ba391323d04a905185ab53dcba557f
+VITE_WALLETCONNECT1_BRIDGE_URI=wss://dydx.bridge.walletconnect.org
+VITE_GEO_URI=https://api.dydx.exchange/v3/geo
+VITE_ETHEREUM_NODE_URI=https://eth-mainnet.alchemyapi.io/v2/FaFOk2th8aSWzJKaKD2-xX_yAhcBSHLO
+VITE_GA_ID=G-D4SFGG03DS
+VITE_WALLET_CONNECT_BRIDGE_URI=wss://dydx.bridge.walletconnect.org
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 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,49 @@ 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_FOUNDATION_LINK: renderLink(
+                          'dYdX Foundation',
+                          ExternalLink.Foundation
+                        ),
+                      },
+                    }),
+                  }}
+                />
+              </StyledRewardsContent>
+            }
             ctaConfigs={{
               primary: {
                 label: stringGetter({ key: STRING_KEYS.LEARN_MORE }),
@@ -79,7 +110,7 @@ const Dashboard: React.FC<
               },
             }}
           />
-        </CardContainer>
+        </StyledCardContainer>
       </SectionWrapper>
       {!isUserGeoBlocked && <ProposalsSection />}
     </>
@@ -102,3 +133,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,