diff --git a/src/constants/abacus.ts b/src/constants/abacus.ts index 6eacf05..ac44cf3 100644 --- a/src/constants/abacus.ts +++ b/src/constants/abacus.ts @@ -209,6 +209,9 @@ export const RestrictionType = Abacus.exchange.dydx.abacus.output.Restriction; const restrictionTypes = [...RestrictionType.values()] as const; export type RestrictionTypes = (typeof restrictionTypes)[number]; +// ------ Api data ------ // +export const ApiData = Abacus.exchange.dydx.abacus.state.manager.ApiData; + // ------ Enum Conversions ------ // type IfEquals = (() => T extends X ? 1 : 2) extends () => T extends Y ? 1 : 2 ? A diff --git a/src/lib/abacus/index.ts b/src/lib/abacus/index.ts index ba11005..c3be440 100644 --- a/src/lib/abacus/index.ts +++ b/src/lib/abacus/index.ts @@ -25,6 +25,7 @@ import { CoroutineTimer, TransferType, AbacusAppConfig, + ApiData, } from '@/constants/abacus'; import { DEFAULT_MARKETID } from '@/constants/markets'; @@ -233,6 +234,9 @@ class AbacusStateManager { this.stateManager.historicalTradingRewardPeriod = period; }; + refreshHistoricalTradingRewards = () => + this.stateManager.refresh(ApiData.HISTORICAL_TRADING_REWARDS); + switchNetwork = (network: DydxNetwork) => { this.stateManager.environmentId = network; diff --git a/src/pages/rewards/RewardsPage.tsx b/src/pages/rewards/RewardsPage.tsx index 91a951b..c68df83 100644 --- a/src/pages/rewards/RewardsPage.tsx +++ b/src/pages/rewards/RewardsPage.tsx @@ -36,7 +36,10 @@ const RewardsPage = () => { {stringGetter({ key: STRING_KEYS.TRADING_REWARDS })} )} - + {import.meta.env.VITE_V3_TOKEN_ADDRESS && isNotTablet && } {isTablet ? ( @@ -105,7 +108,7 @@ Styled.MobileHeader = styled.header` background-color: var(--color-layer-2); `; -Styled.GridLayout = styled.div<{ showTradingRewards?: boolean }>` +Styled.GridLayout = styled.div<{ showTradingRewards?: boolean; showMigratePanel?: boolean }>` --gap: 1.5rem; display: grid; grid-template-columns: 2fr 1fr; @@ -115,26 +118,40 @@ Styled.GridLayout = styled.div<{ showTradingRewards?: boolean }>` gap: var(--gap); } - grid-template-areas: - 'migrate migrate' - 'incentives balance' - 'other other'; - - ${({ showTradingRewards }) => - showTradingRewards && - css` - grid-template-areas: - 'migrate migrate' - 'incentives balance' - 'rewards other'; - `} + ${({ showTradingRewards, showMigratePanel }) => + showTradingRewards && showMigratePanel + ? css` + grid-template-areas: + 'migrate migrate' + 'incentives balance' + 'rewards other'; + ` + : showTradingRewards + ? css` + grid-template-areas: 'incentives balance' 'rewards other'; + ` + : showMigratePanel + ? css` + grid-template-areas: 'migrate migrate' 'incentives balance' 'other other'; + ` + : css` + grid-template-areas: 'incentives balance' 'other other'; + `}; @media ${breakpoints.tablet} { --gap: 1rem; grid-template-columns: 1fr; - grid-template-areas: - 'incentives' - 'rewards'; + + ${({ showTradingRewards }) => + showTradingRewards + ? css` + grid-template-areas: + 'incentives' + 'rewards'; + ` + : css` + grid-template-areas: 'incentives'; + `} } `; diff --git a/src/pages/rewards/TradingRewardsSummaryPanel.tsx b/src/pages/rewards/TradingRewardsSummaryPanel.tsx index a63582f..13871bf 100644 --- a/src/pages/rewards/TradingRewardsSummaryPanel.tsx +++ b/src/pages/rewards/TradingRewardsSummaryPanel.tsx @@ -1,3 +1,4 @@ +import { useEffect } from 'react'; import styled, { AnyStyledComponent } from 'styled-components'; import { shallowEqual, useSelector } from 'react-redux'; @@ -12,10 +13,16 @@ import { Panel } from '@/components/Panel'; import { getHistoricalTradingRewardsForCurrentWeek } from '@/state/accountSelectors'; +import abacusStateManager from '@/lib/abacus'; + export const TradingRewardsSummaryPanel = () => { const stringGetter = useStringGetter(); const { chainTokenLabel } = useTokenConfigs(); - const currentWeekTradingReward = useSelector(getHistoricalTradingRewardsForCurrentWeek); + const currentWeekTradingReward = useSelector(getHistoricalTradingRewardsForCurrentWeek, shallowEqual); + + useEffect(() => { + abacusStateManager.refreshHistoricalTradingRewards(); + }, []); return !currentWeekTradingReward ? null : (