diff --git a/src/components/Panel.tsx b/src/components/Panel.tsx index 6582769..cebd1d7 100644 --- a/src/components/Panel.tsx +++ b/src/components/Panel.tsx @@ -7,7 +7,7 @@ import { layoutMixins } from '@/styles/layoutMixins'; import { breakpoints } from '@/styles'; type PanelProps = { - slotHeaderContent?: string; + slotHeaderContent?: React.ReactNode; slotHeader?: React.ReactNode; slotRight?: React.ReactNode; children?: React.ReactNode; diff --git a/src/pages/Profile.tsx b/src/pages/Profile.tsx index 2f9a0bd..fc5703a 100644 --- a/src/pages/Profile.tsx +++ b/src/pages/Profile.tsx @@ -5,7 +5,7 @@ import { useEnsName } from 'wagmi'; import { useNavigate } from 'react-router-dom'; import { ButtonSize } from '@/constants/buttons'; -import { TransferInputField, TransferType } from '@/constants/abacus'; +import { TransferType } from '@/constants/abacus'; import { layoutMixins } from '@/styles/layoutMixins'; @@ -26,12 +26,13 @@ import { useAccounts, useStringGetter, useTokenConfigs } from '@/hooks'; import { getOnboardingState } from '@/state/accountSelectors'; import { openDialog } from '@/state/dialogs'; -import abacusStateManager from '@/lib/abacus'; import { isTruthy } from '@/lib/isTruthy'; import { truncateAddress } from '@/lib/wallet'; import { DYDXBalancePanel } from './rewards/DYDXBalancePanel'; import { MigratePanel } from './rewards/MigratePanel'; +import { GovernancePanel } from './rewards/GovernancePanel'; +import { StakingPanel } from './rewards/StakingPanel'; const ENS_CHAIN_ID = 1; // Ethereum @@ -178,7 +179,7 @@ const Profile = () => { onClick={() => dispatch(openDialog({ type: DialogTypes.Help }))} /> - + @@ -230,6 +231,9 @@ const Profile = () => { withInnerBorders={false} /> + + + ); }; @@ -243,6 +247,7 @@ Styled.MobileProfileLayout = styled.div` gap: 1rem; padding: 1.25rem 0.9rem; + max-width: 100vw; `; Styled.Header = styled.header` @@ -337,7 +342,7 @@ Styled.Details = styled(Details)` Styled.RewardsPanel = styled(Panel)` align-self: flex-start; - + &, > * { height: 100%; diff --git a/src/pages/rewards/GovernancePanel.tsx b/src/pages/rewards/GovernancePanel.tsx new file mode 100644 index 0000000..2cfde09 --- /dev/null +++ b/src/pages/rewards/GovernancePanel.tsx @@ -0,0 +1,75 @@ +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'; + +import { useStringGetter, useURLConfigs } from '@/hooks'; + +import { Panel } from '@/components/Panel'; +import { IconName } from '@/components/Icon'; +import { IconButton } from '@/components/IconButton'; +import { Link } from '@/components/Link'; + +import { openDialog } from '@/state/dialogs'; + +export const GovernancePanel = () => { + const stringGetter = useStringGetter(); + const dispatch = useDispatch(); + const { governanceLearnMore } = useURLConfigs(); + + return ( + {stringGetter({ key: STRING_KEYS.GOVERNANCE })} + } + slotRight={ + + + + } + onClick={() => dispatch(openDialog({ type: DialogTypes.ExternalNavKeplr }))} + > + + {stringGetter({ key: STRING_KEYS.GOVERNANCE_DESCRIPTION })} + e.stopPropagation()}> + {stringGetter({ key: STRING_KEYS.LEARN_MORE })} → + + + + ); +}; + +const Styled: Record = {}; + +Styled.Description = styled.div` + color: var(--color-text-0); + --link-color: var(--color-text-1); + + a { + display: inline; + ::before { + content: ' '; + } + } +`; + +Styled.IconButton = styled(IconButton)` + color: var(--color-text-0); + --color-border: var(--color-layer-6); +`; + +Styled.Arrow = styled.div` + padding-right: 1.5rem; +`; + +Styled.Title = styled.h3` + font: var(--font-medium-book); + color: var(--color-text-2); + margin-bottom: -1rem; +`; \ No newline at end of file diff --git a/src/pages/rewards/MigratePanel.tsx b/src/pages/rewards/MigratePanel.tsx index 38aacf1..4593c8f 100644 --- a/src/pages/rewards/MigratePanel.tsx +++ b/src/pages/rewards/MigratePanel.tsx @@ -146,14 +146,15 @@ Styled.Title = styled.h3` color: var(--color-text-2); padding: var(--panel-paddingY) var(--panel-paddingX) 0; + margin-bottom: -0.5rem; `; Styled.MigrateAction = styled.div` ${layoutMixins.flexEqualColumns} align-items: center; - margin: 1rem; gap: 1rem; padding: 1rem; + margin: 1rem; width: 100%; background-color: var(--color-layer-2); @@ -233,4 +234,4 @@ Styled.InlineRow = styled.div` ${layoutMixins.inlineRow} color: var(--color-text-0); --link-color: var(--color-text-1); -`; +`; \ No newline at end of file diff --git a/src/pages/rewards/RewardsPage.tsx b/src/pages/rewards/RewardsPage.tsx index f69078a..0e4031a 100644 --- a/src/pages/rewards/RewardsPage.tsx +++ b/src/pages/rewards/RewardsPage.tsx @@ -3,45 +3,29 @@ import { useDispatch } from 'react-redux'; import { useNavigate } from 'react-router-dom'; import { STRING_KEYS } from '@/constants/localization'; -import { ButtonAction, ButtonSize } from '@/constants/buttons'; -import { DialogTypes } from '@/constants/dialogs'; import { AppRoute } from '@/constants/routes'; -import { useBreakpoints, useStringGetter, useURLConfigs } from '@/hooks'; +import { useBreakpoints, useStringGetter } from '@/hooks'; import { breakpoints } from '@/styles'; import { layoutMixins } from '@/styles/layoutMixins'; import { BackButton } from '@/components/BackButton'; import { Panel } from '@/components/Panel'; -import { IconName } from '@/components/Icon'; -import { IconButton } from '@/components/IconButton'; -import { Link } from '@/components/Link'; - -import { openDialog } from '@/state/dialogs'; import { DYDXBalancePanel } from './DYDXBalancePanel'; import { MigratePanel } from './MigratePanel'; import { LaunchIncentivesPanel } from './LaunchIncentivesPanel'; import { RewardsHelpPanel } from './RewardsHelpPanel'; +import { GovernancePanel } from './GovernancePanel'; +import { StakingPanel } from './StakingPanel'; const RewardsPage = () => { const dispatch = useDispatch(); const stringGetter = useStringGetter(); - const { governanceLearnMore, stakingLearnMore } = useURLConfigs(); const { isTablet, isNotTablet } = useBreakpoints(); const navigate = useNavigate(); - const panelArrow = ( - - - - ); - return ( {isTablet && ( @@ -61,37 +45,12 @@ const RewardsPage = () => { )} - - {stringGetter({ key: STRING_KEYS.GOVERNANCE })} - } - slotRight={panelArrow} - onClick={() => dispatch(openDialog({ type: DialogTypes.ExternalNavKeplr }))} - > - - {stringGetter({ key: STRING_KEYS.GOVERNANCE_DESCRIPTION })} - e.stopPropagation()}> - {stringGetter({ key: STRING_KEYS.LEARN_MORE })} → - - - - - {stringGetter({ key: STRING_KEYS.STAKING })} - } - slotRight={panelArrow} - onClick={() => dispatch(openDialog({ type: DialogTypes.ExternalNavKeplr }))} - > - - {stringGetter({ key: STRING_KEYS.STAKING_DESCRIPTION })} - e.stopPropagation()}> - {stringGetter({ key: STRING_KEYS.LEARN_MORE })} → - - - - + {isNotTablet && ( + + + + + )} @@ -140,24 +99,6 @@ Styled.Panel = styled(Panel)` height: fit-content; `; -Styled.Title = styled.h3` - font: var(--font-medium-book); - color: var(--color-text-2); - margin-bottom: -1rem; -`; - -Styled.Description = styled.div` - color: var(--color-text-0); - --link-color: var(--color-text-1); - - a { - display: inline; - ::before { - content: ' '; - } - } -`; - Styled.PanelRow = styled.div` ${layoutMixins.gridEqualColumns} gap: 1.5rem; @@ -171,12 +112,3 @@ Styled.PanelRow = styled.div` Styled.PanelRowIncentivesAndBalance = styled(Styled.PanelRow)` grid-template-columns: 2fr 1fr; `; - -Styled.IconButton = styled(IconButton)` - color: var(--color-text-0); - --color-border: var(--color-layer-6); -`; - -Styled.Arrow = styled.div` - padding: 1rem; -`; diff --git a/src/pages/rewards/StakingPanel.tsx b/src/pages/rewards/StakingPanel.tsx new file mode 100644 index 0000000..9d2a1a6 --- /dev/null +++ b/src/pages/rewards/StakingPanel.tsx @@ -0,0 +1,73 @@ +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'; + +import { useStringGetter, useURLConfigs } from '@/hooks'; + +import { Panel } from '@/components/Panel'; +import { IconName } from '@/components/Icon'; +import { IconButton } from '@/components/IconButton'; +import { Link } from '@/components/Link'; + +import { openDialog } from '@/state/dialogs'; + +export const StakingPanel = () => { + const stringGetter = useStringGetter(); + const dispatch = useDispatch(); + const { stakingLearnMore } = useURLConfigs(); + + return ( + {stringGetter({ key: STRING_KEYS.STAKING })}} + slotRight={ + + + + } + onClick={() => dispatch(openDialog({ type: DialogTypes.ExternalNavKeplr }))} + > + + {stringGetter({ key: STRING_KEYS.STAKING_DESCRIPTION })} + e.stopPropagation()}> + {stringGetter({ key: STRING_KEYS.LEARN_MORE })} → + + + + ); +}; + +const Styled: Record = {}; + +Styled.Description = styled.div` + color: var(--color-text-0); + --link-color: var(--color-text-1); + + a { + display: inline; + ::before { + content: ' '; + } + } +`; + +Styled.IconButton = styled(IconButton)` + color: var(--color-text-0); + --color-border: var(--color-layer-6); +`; + +Styled.Arrow = styled.div` + padding-right: 1.5rem; +`; + +Styled.Title = styled.h3` + font: var(--font-medium-book); + color: var(--color-text-2); + margin-bottom: -1rem; +`;