diff --git a/.env b/.env index 4506e77..a88af74 100644 --- a/.env +++ b/.env @@ -8,4 +8,4 @@ VITE_AVG_BLOCK_TIME=12100 # Polling intervals VITE_BLOCK_POLL_MS=60000 VITE_COUNTDOWN_POLL_MS=60000 -VITE_DATA_POLL_MS=600000 +VITE_DATA_POLL_MS=600000 \ No newline at end of file diff --git a/src/components/Cards/InfoCtaCard.tsx b/src/components/Cards/InfoCtaCard.tsx index b483d2e..0489ca8 100644 --- 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 index 2d3c787..cbf0d2d 100644 --- 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 index 6d87851..799fc80 100644 --- 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 index b0176ca..1d61928 100644 --- 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 index 3afbbfa..f01669e 100644 --- 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 & ReturnType -> = ({ 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( + + {text} + + ); return ( <> @@ -62,10 +54,49 @@ const Dashboard: React.FC< - + +

+

+

+ + } ctaConfigs={{ primary: { label: stringGetter({ key: STRING_KEYS.LEARN_MORE }), @@ -79,7 +110,7 @@ const Dashboard: React.FC< }, }} /> - + {!isUserGeoBlocked && } @@ -102,3 +133,27 @@ const mapDispatchToProps = (dispatch: AppDispatch) => export default withLocalization( 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 index b6b0ced..99c4b31 100644 --- 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,