{
abacusStateManager.setHistoricalTradingRewardPeriod(HistoricalTradingRewardsPeriod.DAILY);
}, [canViewAccount]);
- return isTablet ? (
-
- navigate(AppRoute.Profile)} />}
- />
- <$DetachedSection>
- {showGeoblockedPanel && }
- {showStakingRewardPanel && stakingRewardPanel}
- {isStakingEnabled ? : }
- {isStakingEnabled && }
- {isStakingEnabled && }
-
- {!isStakingEnabled && }
- {isStakingEnabled && }
- {isStakingEnabled && }
-
-
- {isStakingEnabled && legalDisclaimer}
-
-
- ) : (
- <$DetachedSection>
- {showMigratePanel && }
- <$DoubleColumnView>
- <$LeftColumn>
- {isStakingEnabled && }
-
- {!isStakingEnabled && }
-
-
- <$RightColumn>
- {showGeoblockedPanel && }
- {showStakingRewardPanel && stakingRewardPanel}
- {isStakingEnabled ? : }
- {isStakingEnabled && }
- {isStakingEnabled && }
- {isStakingEnabled && }
-
- {isStakingEnabled && legalDisclaimer}
-
-
-
+ return (
+ <$Page>
+ {isTablet ? (
+
+ navigate(AppRoute.Profile)} />}
+ />
+ <$DetachedSection>
+ {showGeoblockedPanel && }
+ {showStakingRewardPanel && stakingRewardPanel}
+
+
+
+
+
+
+
+
+ {legalDisclaimer}
+
+
+ ) : (
+ <$DetachedSection>
+ {showMigratePanel && }
+ <$DoubleColumnView>
+ <$LeftColumn>
+
+
+
+
+ <$RightColumn>
+ {showGeoblockedPanel && }
+ {showStakingRewardPanel && stakingRewardPanel}
+
+
+
+
+
+ {legalDisclaimer}
+
+
+
+ )}
+ ;
+
);
};
export default RewardsPage;
+const $Page = styled.div`
+ ${layoutMixins.contentContainerPage}
+`;
+
const $DetachedSection = styled(DetachedSection)`
display: flex;
flex-direction: column;
diff --git a/src/pages/token/rewards/StakingPanel.tsx b/src/pages/token/StakingPanel.tsx
similarity index 100%
rename from src/pages/token/rewards/StakingPanel.tsx
rename to src/pages/token/StakingPanel.tsx
diff --git a/src/pages/token/rewards/StakingRewardPanel.tsx b/src/pages/token/StakingRewardPanel.tsx
similarity index 100%
rename from src/pages/token/rewards/StakingRewardPanel.tsx
rename to src/pages/token/StakingRewardPanel.tsx
diff --git a/src/pages/token/Token.tsx b/src/pages/token/Token.tsx
deleted file mode 100644
index fc6269ede..000000000
--- a/src/pages/token/Token.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import { Suspense, lazy } from 'react';
-
-import { Navigate, Route, Routes } from 'react-router-dom';
-import styled from 'styled-components';
-
-import { STRING_KEYS } from '@/constants/localization';
-import { TokenRoute } from '@/constants/routes';
-
-import { useBreakpoints } from '@/hooks/useBreakpoints';
-import { useEnvFeatures } from '@/hooks/useEnvFeatures';
-import { useStringGetter } from '@/hooks/useStringGetter';
-
-import { layoutMixins } from '@/styles/layoutMixins';
-
-import { Icon, IconName } from '@/components/Icon';
-import { LoadingSpace } from '@/components/Loading/LoadingSpinner';
-import { NavigationMenu } from '@/components/NavigationMenu';
-import { WithSidebar } from '@/components/WithSidebar';
-
-const RewardsPage = lazy(() => import('./rewards/RewardsPage'));
-const StakingPage = lazy(() => import('./staking/StakingPage'));
-const GovernancePage = lazy(() => import('./Governance'));
-
-const Token = () => {
- const stringGetter = useStringGetter();
-
- const { isTablet } = useBreakpoints();
- const { isStakingEnabled } = useEnvFeatures();
-
- const routesComponent = (
- }>
-
- } />
- {!isStakingEnabled && } />}
- {!isStakingEnabled && } />}
- } />
-
-
- );
-
- return (
-
- <$NavigationMenu
- items={[
- {
- group: 'views',
- groupLabel: stringGetter({ key: STRING_KEYS.VIEWS }),
- items: [
- {
- value: TokenRoute.TradingRewards,
- slotBefore: (
- <$IconContainer>
-
-
- ),
- label: stringGetter({ key: STRING_KEYS.TRADING_REWARDS }),
- href: TokenRoute.TradingRewards,
- },
- {
- value: TokenRoute.StakingRewards,
- slotBefore: (
- <$IconContainer>
-
-
- ),
- label: stringGetter({ key: STRING_KEYS.STAKING_REWARDS }),
- href: TokenRoute.StakingRewards,
- tag: stringGetter({ key: STRING_KEYS.NEW }),
- },
- {
- value: TokenRoute.Governance,
- slotBefore: (
- <$IconContainer>
-
-
- ),
- label: stringGetter({ key: STRING_KEYS.GOVERNANCE }),
- href: TokenRoute.Governance,
- },
- ],
- },
- ]}
- />
-
- )
- }
- >
- {routesComponent}
-
- );
-};
-export default Token;
-
-const $SideBar = styled.div`
- ${layoutMixins.flexColumn}
- justify-content: space-between;
-
- height: 100%;
-`;
-
-const $NavigationMenu = styled(NavigationMenu)`
- padding: 0.5rem;
- padding-top: 0;
-`;
-
-const $IconContainer = styled.div`
- width: 1.5rem;
- height: 1.5rem;
- font-size: 0.75rem;
- display: flex;
- justify-content: center;
- align-items: center;
- background-color: var(--color-layer-4);
- border-radius: 50%;
- margin-left: -0.25rem;
-`;
diff --git a/src/pages/token/rewards/TradingRewardsChartPanel.tsx b/src/pages/token/TradingRewardsChartPanel.tsx
similarity index 100%
rename from src/pages/token/rewards/TradingRewardsChartPanel.tsx
rename to src/pages/token/TradingRewardsChartPanel.tsx
diff --git a/src/pages/token/rewards/TradingRewardsSummaryPanel.tsx b/src/pages/token/TradingRewardsSummaryPanel.tsx
similarity index 100%
rename from src/pages/token/rewards/TradingRewardsSummaryPanel.tsx
rename to src/pages/token/TradingRewardsSummaryPanel.tsx
diff --git a/src/pages/token/rewards/UnbondingPanels.tsx b/src/pages/token/UnbondingPanels.tsx
similarity index 100%
rename from src/pages/token/rewards/UnbondingPanels.tsx
rename to src/pages/token/UnbondingPanels.tsx
diff --git a/src/pages/token/rewards/DYDXBalancePanel.tsx b/src/pages/token/rewards/DYDXBalancePanel.tsx
deleted file mode 100644
index 458c12bfd..000000000
--- a/src/pages/token/rewards/DYDXBalancePanel.tsx
+++ /dev/null
@@ -1,206 +0,0 @@
-import type { ElementType } from 'react';
-
-import { shallowEqual } from 'react-redux';
-import styled from 'styled-components';
-
-import { ButtonAction, ButtonSize } from '@/constants/buttons';
-import { DialogTypes } from '@/constants/dialogs';
-import { STRING_KEYS } from '@/constants/localization';
-import { WalletType, wallets } from '@/constants/wallets';
-
-import { useAccountBalance } from '@/hooks/useAccountBalance';
-import { useAccounts } from '@/hooks/useAccounts';
-import { useStringGetter } from '@/hooks/useStringGetter';
-import { useTokenConfigs } from '@/hooks/useTokenConfigs';
-
-import { layoutMixins } from '@/styles/layoutMixins';
-
-import { AssetIcon } from '@/components/AssetIcon';
-import { Button } from '@/components/Button';
-import { Details } from '@/components/Details';
-import { Icon, IconName } from '@/components/Icon';
-import { Output, OutputType } from '@/components/Output';
-import { Panel } from '@/components/Panel';
-import { Toolbar } from '@/components/Toolbar';
-import { OnboardingTriggerButton } from '@/views/dialogs/OnboardingTriggerButton';
-
-import { calculateCanAccountTrade } from '@/state/accountCalculators';
-import { useAppDispatch, useAppSelector } from '@/state/appTypes';
-import { openDialog } from '@/state/dialogs';
-
-export const DYDXBalancePanel = ({ className }: { className?: string }) => {
- const dispatch = useAppDispatch();
- const stringGetter = useStringGetter();
-
- const { walletType } = useAccounts();
- const canAccountTrade = useAppSelector(calculateCanAccountTrade, shallowEqual);
- const { nativeTokenBalance, nativeStakingBalance } = useAccountBalance();
- const { chainTokenLabel } = useTokenConfigs();
-
- return (
-
- <$Title>
-
- {chainTokenLabel}
-
- <$ActionButtons>
- {!canAccountTrade ? (
-
- ) : (
- }
- size={ButtonSize.Small}
- action={ButtonAction.Primary}
- onClick={() => dispatch(openDialog(DialogTypes.Transfer({})))}
- >
- {stringGetter({ key: STRING_KEYS.TRANSFER })}
-
- )}
-
-
- }
- >
- <$Content>
- <$WalletAndStakedBalance
- layout="grid"
- items={[
- {
- key: 'wallet',
- label: (
- <$Label>
- {stringGetter({ key: STRING_KEYS.WALLET })}
- <$IconContainer>
-
-
-
- ),
-
- value: ,
- },
- {
- key: 'staked',
- label: (
- <$Label>
- {stringGetter({ key: STRING_KEYS.STAKED })}
- <$IconContainer>
-
-
-
- ),
-
- value: ,
- },
- ]}
- />
- <$TotalBalance
- items={[
- {
- key: 'totalBalance',
- label: stringGetter({ key: STRING_KEYS.TOTAL_BALANCE }),
- value: (
-
- ),
- },
- ]}
- />
-
-
- );
-};
-const $Header = styled.div`
- ${layoutMixins.spacedRow}
- gap: 1rem;
- padding: var(--panel-paddingY) var(--panel-paddingX) 0;
-`;
-
-const $Title = styled.h3`
- ${layoutMixins.inlineRow}
- font: var(--font-medium-book);
- color: var(--color-text-2);
-
- img {
- font-size: 1.5rem;
- }
-`;
-
-const $ActionButtons = styled(Toolbar)`
- ${layoutMixins.inlineRow}
- --stickyArea-topHeight: max-content;
- gap: 0.5rem;
- padding: 0;
-`;
-
-const $Content = styled.div`
- ${layoutMixins.flexColumn}
- gap: 0.75rem;
-`;
-
-const $IconContainer = styled.div`
- ${layoutMixins.stack}
-
- height: 1.5rem;
- width: 1.5rem;
-
- background-color: var(--color-layer-3);
- border-radius: 50%;
-
- > svg {
- place-self: center;
- height: 0.75rem;
- width: auto;
- color: var(--color-text-0);
- }
-`;
-
-const $WalletAndStakedBalance = styled(Details)`
- --details-item-backgroundColor: var(--color-layer-6);
-
- grid-template-columns: 1fr 1fr;
- gap: 1rem;
-
- > div {
- gap: 1rem;
-
- padding: 1rem;
-
- border-radius: 0.75em;
- background-color: var(--color-layer-5);
- }
-
- dt {
- width: 100%;
- }
-
- output {
- color: var(--color-text-2);
- font: var(--font-large-book);
- }
-`;
-
-const $Label = styled.div`
- ${layoutMixins.spacedRow}
-
- font: var(--font-base-book);
- color: var(--color-text-1);
-`;
-
-const $TotalBalance = styled(Details)`
- div {
- --scrollArea-height: auto;
- }
-
- output {
- color: var(--color-text-1);
- }
-`;
diff --git a/src/pages/token/staking/StakingPage.tsx b/src/pages/token/staking/StakingPage.tsx
deleted file mode 100644
index 6d58443e8..000000000
--- a/src/pages/token/staking/StakingPage.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import styled from 'styled-components';
-
-import { STRING_KEYS } from '@/constants/localization';
-
-import { useStringGetter } from '@/hooks/useStringGetter';
-
-import breakpoints from '@/styles/breakpoints';
-import { layoutMixins } from '@/styles/layoutMixins';
-
-import { DetachedSection } from '@/components/ContentSection';
-import { ContentSectionHeader } from '@/components/ContentSectionHeader';
-
-import { DYDXBalancePanel } from '../rewards/DYDXBalancePanel';
-import { StakingPanel } from './StakingPanel';
-import { StrideStakingPanel } from './StrideStakingPanel';
-
-const StakingPage = () => {
- const stringGetter = useStringGetter();
- return (
-
- <$HeaderSection>
-
-
-
- <$ContentWrapper>
- <$Row>
- <$InnerRow>
-
-
-
-
-
-
-
- );
-};
-export default StakingPage;
-
-const $HeaderSection = styled.section`
- ${layoutMixins.contentSectionDetached}
-
- @media ${breakpoints.tablet} {
- ${layoutMixins.flexColumn}
- gap: 1rem;
-
- margin-bottom: 0.5rem;
- }
-`;
-
-const $ContentWrapper = styled.div`
- ${layoutMixins.flexColumn}
- gap: 1.5rem;
- max-width: 80rem;
- padding: 0 1rem;
-`;
-
-const $Row = styled.div`
- gap: 1rem;
- display: grid;
- grid-template-columns: 2fr 1fr;
-`;
-
-const $InnerRow = styled.div`
- gap: 1rem;
- display: grid;
- grid-template-columns: 1fr 1fr;
- height: fit-content;
-`;
diff --git a/src/pages/token/staking/StakingPanel.tsx b/src/pages/token/staking/StakingPanel.tsx
deleted file mode 100644
index cd1ec3e0a..000000000
--- a/src/pages/token/staking/StakingPanel.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import styled from 'styled-components';
-
-import { DialogTypes } from '@/constants/dialogs';
-import { STRING_KEYS } from '@/constants/localization';
-
-import { useStringGetter } from '@/hooks/useStringGetter';
-import { useURLConfigs } from '@/hooks/useURLConfigs';
-
-import { Link } from '@/components/Link';
-import { Panel } from '@/components/Panel';
-
-import { useAppDispatch } from '@/state/appTypes';
-import { openDialog } from '@/state/dialogs';
-
-export const StakingPanel = ({ className }: { className?: string }) => {
- const stringGetter = useStringGetter();
- const dispatch = useAppDispatch();
- const { stakingLearnMore } = useURLConfigs();
-
- return (
- <$Panel
- className={className}
- slotHeaderContent={
- <$Header>
- <$Title>{stringGetter({ key: STRING_KEYS.STAKE_WITH_KEPLR })}
- <$Img src="/third-party/keplr.png" alt={stringGetter({ key: STRING_KEYS.KEPLR })} />
-
- }
- onClick={() => dispatch(openDialog(DialogTypes.ExternalNavKeplr()))}
- >
- <$Description>
- {stringGetter({ key: STRING_KEYS.STAKING_DESCRIPTION })}
- <$Link isInline href={stakingLearnMore} onClick={(e) => e.stopPropagation()}>
- {stringGetter({ key: STRING_KEYS.LEARN_MORE })} →
-
-
-
- );
-};
-const $Panel = styled(Panel)`
- align-items: start;
-
- header {
- justify-content: unset;
- padding-bottom: 0;
- }
-`;
-
-const $Header = styled.div`
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- align-items: center;
- width: 100%;
-`;
-
-const $Title = styled.h3`
- font: var(--font-medium-book);
- color: var(--color-text-1);
-`;
-
-const $Img = styled.img`
- width: 2rem;
- height: 2rem;
- margin-left: 0.5rem;
-`;
-
-const $Description = styled.div`
- color: var(--color-text-0);
-`;
-
-const $Link = styled(Link)`
- margin-left: 0.5ch;
-`;
diff --git a/src/pages/token/staking/StrideStakingPanel.tsx b/src/pages/token/staking/StrideStakingPanel.tsx
deleted file mode 100644
index 0fe66e195..000000000
--- a/src/pages/token/staking/StrideStakingPanel.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import styled from 'styled-components';
-
-import { DialogTypes } from '@/constants/dialogs';
-import { STRING_KEYS } from '@/constants/localization';
-
-import { useStringGetter } from '@/hooks/useStringGetter';
-import { useTokenConfigs } from '@/hooks/useTokenConfigs';
-import { useURLConfigs } from '@/hooks/useURLConfigs';
-
-import { Link } from '@/components/Link';
-import { Panel } from '@/components/Panel';
-import { Tag } from '@/components/Tag';
-
-import { useAppDispatch } from '@/state/appTypes';
-import { openDialog } from '@/state/dialogs';
-
-export const StrideStakingPanel = ({ className }: { className?: string }) => {
- const stringGetter = useStringGetter();
- const dispatch = useAppDispatch();
- const { stakingLearnMore } = useURLConfigs();
- const { chainTokenLabel } = useTokenConfigs();
-
- return (
- <$Panel
- className={className}
- slotHeaderContent={
- <$Header>
- <$Title>
- {stringGetter({ key: STRING_KEYS.LIQUID_STAKE_W_STRIDE })}
- {stringGetter({ key: STRING_KEYS.NEW })}
-
- <$Img src="/third-party/stride.png" alt="Stride" />
-
- }
- onClick={() => dispatch(openDialog(DialogTypes.ExternalNavStride()))}
- >
- <$Description>
- {stringGetter({
- key: STRING_KEYS.LIQUID_STAKE_STRIDE_DESCRIPTION,
- params: { TOKEN_DENOM: chainTokenLabel },
- })}
- <$Link isInline href={stakingLearnMore} onClick={(e) => e.stopPropagation()}>
- {stringGetter({ key: STRING_KEYS.LEARN_MORE })} →
-
-
-
- );
-};
-const $Panel = styled(Panel)`
- align-items: start;
-
- header {
- justify-content: unset;
- padding-bottom: 0;
- }
-`;
-
-const $Header = styled.div`
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- align-items: center;
- width: 100%;
-`;
-
-const $Title = styled.h3`
- font: var(--font-medium-book);
- color: var(--color-text-1);
-
- display: flex;
- align-items: center;
- gap: 0.5ch;
-`;
-
-const $Img = styled.img`
- width: 2rem;
- height: 2rem;
- margin-left: 0.5rem;
-`;
-
-const $Description = styled.div`
- color: var(--color-text-0);
-`;
-
-const $Link = styled(Link)`
- margin-left: 0.5ch;
-`;
diff --git a/src/views/ExchangeBillboards.tsx b/src/views/ExchangeBillboards.tsx
index 39e2930db..06d8b6da0 100644
--- a/src/views/ExchangeBillboards.tsx
+++ b/src/views/ExchangeBillboards.tsx
@@ -2,9 +2,7 @@ import styled from 'styled-components';
import { ButtonAction, ButtonSize, ButtonType } from '@/constants/buttons';
import { STRING_KEYS } from '@/constants/localization';
-import { TokenRoute } from '@/constants/routes';
-import { useEnvFeatures } from '@/hooks/useEnvFeatures';
import { usePerpetualMarketsStats } from '@/hooks/usePerpetualMarketsStats';
import { useStringGetter } from '@/hooks/useStringGetter';
import { useTokenConfigs } from '@/hooks/useTokenConfigs';
@@ -22,7 +20,6 @@ type ExchangeBillboardsProps = {
export const ExchangeBillboards: React.FC = () => {
const stringGetter = useStringGetter();
- const { isStakingEnabled } = useEnvFeatures();
const { chainTokenLabel } = useTokenConfigs();
const {
@@ -54,9 +51,7 @@ export const ExchangeBillboards: React.FC = () => {
value: feesEarned,
type: OutputType.Fiat,
linkLabelKey: STRING_KEYS.LEARN_MORE_ARROW,
- link: isStakingEnabled
- ? `${chainTokenLabel}`
- : `${chainTokenLabel}/${TokenRoute.StakingRewards}`,
+ link: `${chainTokenLabel}`,
},
].map(({ key, labelKey, tagKey, value, fractionDigits, type, link, linkLabelKey }) => (
<$BillboardContainer key={key}>