+
{isTablet && (
-
- navigate(AppRoute.Profile)} />
- {stringGetter({ key: STRING_KEYS.TRADING_REWARDS })}
-
+ navigate(AppRoute.Profile)} />}
+ />
)}
-
- {import.meta.env.VITE_V3_TOKEN_ADDRESS && isNotTablet && }
+
+
+ {import.meta.env.VITE_V3_TOKEN_ADDRESS && isNotTablet && }
- {isTablet ? (
-
- ) : (
- <>
+ {isTablet ? (
-
-
- )}
+ ) : (
+ <>
+
+
+
+ )}
- {testFlags.showTradingRewards && (
-
-
- {isTablet && }
-
-
- )}
+ {testFlags.showTradingRewards && (
+
+
+ {isTablet && }
+
+
+ )}
- {isNotTablet && (
-
-
-
-
-
-
- )}
-
-
+ {isNotTablet && (
+
+
+
+ )}
+
+
+
);
};
@@ -76,27 +74,6 @@ export default RewardsPage;
const Styled: Record = {};
-Styled.Page = styled.div`
- ${layoutMixins.contentContainerPage}
- padding: 2rem;
- align-items: center;
-
- > * {
- --content-max-width: 80rem;
- max-width: min(calc(100vw - 4rem), var(--content-max-width));
- }
-
- @media ${breakpoints.tablet} {
- --stickyArea-topHeight: var(--page-header-height-mobile);
- padding: 0 1rem 1rem;
-
- > * {
- max-width: calc(100vw - 2rem);
- width: 100%;
- }
- }
-`;
-
Styled.MobileHeader = styled.header`
${layoutMixins.contentSectionDetachedScrollable}
${layoutMixins.stickyHeader}
@@ -113,6 +90,7 @@ Styled.GridLayout = styled.div<{ showTradingRewards?: boolean; showMigratePanel?
display: grid;
grid-template-columns: 2fr 1fr;
gap: var(--gap);
+ max-width: 80rem;
> * {
gap: var(--gap);
@@ -123,24 +101,39 @@ Styled.GridLayout = styled.div<{ showTradingRewards?: boolean; showMigratePanel?
? css`
grid-template-areas:
'migrate migrate'
- 'incentives balance'
+ 'incentives incentives'
+ 'balance balance'
'rewards other';
`
: showTradingRewards
? css`
- grid-template-areas: 'incentives balance' 'rewards other';
+ grid-template-areas:
+ 'incentives balance'
+ 'rewards other';
`
: showMigratePanel
? css`
- grid-template-areas: 'migrate migrate' 'incentives balance' 'other other';
+ grid-template-areas:
+ 'migrate migrate'
+ 'incentives incentives'
+ 'balance balance'
+ 'other other';
`
: css`
- grid-template-areas: 'incentives balance' 'other other';
+ grid-template-areas:
+ 'incentives balance'
+ 'other other';
`};
+ @media ${breakpoints.notTablet} {
+ padding: 1rem;
+ }
+
@media ${breakpoints.tablet} {
--gap: 1rem;
grid-template-columns: 1fr;
+ width: calc(100vw - 2rem);
+ margin: 0 auto;
${({ showTradingRewards }) =>
showTradingRewards
@@ -187,13 +180,3 @@ Styled.OtherColumn = styled.div<{ showTradingRewards?: boolean }>`
}
`}
`;
-
-Styled.RewardHistoryHeader = styled.div`
- h3 {
- font: var(--font-medium-book);
- color: var(--color-text-2);
- }
-
- padding: 1rem 1.5rem 0;
- margin-bottom: -0.5rem;
-`;
diff --git a/src/pages/rewards/TradingRewardsSummaryPanel.tsx b/src/pages/token/rewards/TradingRewardsSummaryPanel.tsx
similarity index 96%
rename from src/pages/rewards/TradingRewardsSummaryPanel.tsx
rename to src/pages/token/rewards/TradingRewardsSummaryPanel.tsx
index 13871bf..c76940a 100644
--- a/src/pages/rewards/TradingRewardsSummaryPanel.tsx
+++ b/src/pages/token/rewards/TradingRewardsSummaryPanel.tsx
@@ -3,8 +3,8 @@ import styled, { AnyStyledComponent } from 'styled-components';
import { shallowEqual, useSelector } from 'react-redux';
import { STRING_KEYS } from '@/constants/localization';
-import { layoutMixins } from '@/styles/layoutMixins';
import { useStringGetter, useTokenConfigs } from '@/hooks';
+import { layoutMixins } from '@/styles/layoutMixins';
import { AssetIcon } from '@/components/AssetIcon';
import { Details } from '@/components/Details';
@@ -18,7 +18,10 @@ import abacusStateManager from '@/lib/abacus';
export const TradingRewardsSummaryPanel = () => {
const stringGetter = useStringGetter();
const { chainTokenLabel } = useTokenConfigs();
- const currentWeekTradingReward = useSelector(getHistoricalTradingRewardsForCurrentWeek, shallowEqual);
+ const currentWeekTradingReward = useSelector(
+ getHistoricalTradingRewardsForCurrentWeek,
+ shallowEqual
+ );
useEffect(() => {
abacusStateManager.refreshHistoricalTradingRewards();
diff --git a/src/pages/token/staking/StakingPage.tsx b/src/pages/token/staking/StakingPage.tsx
new file mode 100644
index 0000000..ff95117
--- /dev/null
+++ b/src/pages/token/staking/StakingPage.tsx
@@ -0,0 +1,67 @@
+import styled, { AnyStyledComponent } from 'styled-components';
+
+import { breakpoints } from '@/styles';
+import { layoutMixins } from '@/styles/layoutMixins';
+
+import { DetachedSection } from '@/components/ContentSection';
+import { ContentSectionHeader } from '@/components/ContentSectionHeader';
+
+import { StakingPanel } from './StakingPanel';
+import { StrideStakingPanel } from './StrideStakingPanel';
+import { DYDXBalancePanel } from '../rewards/DYDXBalancePanel';
+
+export default () => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+const Styled: Record = {};
+
+Styled.HeaderSection = styled.section`
+ ${layoutMixins.contentSectionDetached}
+
+ @media ${breakpoints.tablet} {
+ ${layoutMixins.flexColumn}
+ gap: 1rem;
+
+ margin-bottom: 0.5rem;
+ }
+`;
+
+Styled.ContentWrapper = styled.div`
+ ${layoutMixins.flexColumn}
+ gap: 1.5rem;
+ max-width: 80rem;
+ padding: 0 1rem;
+`;
+
+Styled.Row = styled.div`
+ gap: 1rem;
+ display: grid;
+ grid-template-columns: 2fr 1fr;
+`;
+
+Styled.InnerRow = styled.div`
+ gap: 1rem;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ height: fit-content;
+`;
diff --git a/src/pages/rewards/StakingPanel.tsx b/src/pages/token/staking/StakingPanel.tsx
similarity index 67%
rename from src/pages/rewards/StakingPanel.tsx
rename to src/pages/token/staking/StakingPanel.tsx
index 9d2a1a6..4636a9e 100644
--- a/src/pages/rewards/StakingPanel.tsx
+++ b/src/pages/token/staking/StakingPanel.tsx
@@ -1,7 +1,6 @@
import styled, { AnyStyledComponent } from 'styled-components';
import { useDispatch } from 'react-redux';
-import { ButtonAction, ButtonSize } from '@/constants/buttons';
import { STRING_KEYS } from '@/constants/localization';
import { DialogTypes } from '@/constants/dialogs';
@@ -14,22 +13,19 @@ import { Link } from '@/components/Link';
import { openDialog } from '@/state/dialogs';
-export const StakingPanel = () => {
+export const StakingPanel = ({ className }: { className?: string }) => {
const stringGetter = useStringGetter();
const dispatch = useDispatch();
const { stakingLearnMore } = useURLConfigs();
return (
- {stringGetter({ key: STRING_KEYS.STAKING })}}
- slotRight={
-
-
-
+
+ Stake with Keplr
+
+
}
onClick={() => dispatch(openDialog({ type: DialogTypes.ExternalNavKeplr }))}
>
@@ -39,12 +35,40 @@ export const StakingPanel = () => {
{stringGetter({ key: STRING_KEYS.LEARN_MORE })} →
-
+