From 1ddd763a0b7d0f679e33a0f7d4b8ff1e32332290 Mon Sep 17 00:00:00 2001 From: moo-onthelawn <70078372+moo-onthelawn@users.noreply.github.com> Date: Mon, 24 Jun 2024 16:07:55 -0400 Subject: [PATCH] fix: polishes for staking (#716) --- src/hooks/useStakingAPR.ts | 6 +---- src/pages/token/rewards/RewardsHelpPanel.tsx | 19 ++------------- src/pages/token/rewards/StakingPanel.tsx | 25 ++++++++++++-------- src/views/dialogs/StakeDialog.tsx | 19 ++++++++++++--- src/views/forms/StakeForm/index.tsx | 6 +---- 5 files changed, 35 insertions(+), 40 deletions(-) diff --git a/src/hooks/useStakingAPR.ts b/src/hooks/useStakingAPR.ts index 886a006e5..a49bfd67c 100644 --- a/src/hooks/useStakingAPR.ts +++ b/src/hooks/useStakingAPR.ts @@ -1,7 +1,5 @@ import { useQuery } from '@tanstack/react-query'; -import { PERCENT_DECIMALS } from '@/constants/numbers'; - import { useEndpointsConfig } from './useEndpointsConfig'; export const useStakingAPR = () => { @@ -29,7 +27,5 @@ export const useStakingAPR = () => { refetchOnReconnect: false, }); - const formattedAPR = data ? (data * 100).toFixed(PERCENT_DECIMALS) : undefined; - - return formattedAPR; + return data; }; diff --git a/src/pages/token/rewards/RewardsHelpPanel.tsx b/src/pages/token/rewards/RewardsHelpPanel.tsx index eaca34bc6..686d07faf 100644 --- a/src/pages/token/rewards/RewardsHelpPanel.tsx +++ b/src/pages/token/rewards/RewardsHelpPanel.tsx @@ -17,7 +17,7 @@ export const RewardsHelpPanel = () => { const stringGetter = useStringGetter(); const { isStakingEnabled } = useEnvFeatures(); - const { tradingRewardsLearnMore, mintscanValidatorsLearnMore } = useURLConfigs(); + const { protocolStaking, tradingRewardsLearnMore } = useURLConfigs(); return ( <$HelpCard @@ -63,7 +63,7 @@ export const RewardsHelpPanel = () => { key: STRING_KEYS.FAQ_WHAT_IS_STAKING_ANSWER, params: { HERE_LINK: ( - <$AccentLink href="https://protocolstaking.info/"> + <$AccentLink href={protocolStaking}> {stringGetter({ key: STRING_KEYS.HERE })} ), @@ -82,21 +82,6 @@ export const RewardsHelpPanel = () => { key: STRING_KEYS.FAQ_WHAT_ARE_THE_RISKS_OF_STAKING_ANSWER, }), }, - { - header: stringGetter({ - key: STRING_KEYS.FAQ_HOW_IS_THE_PRECONFIGURED_SET_OF_VALIDATORS_DETERMINED_QUESTION, - }), - content: stringGetter({ - key: STRING_KEYS.FAQ_HOW_IS_THE_PRECONFIGURED_SET_OF_VALIDATORS_DETERMINED_ANSWER, - params: { - DOCUMENT_LINK: ( - <$AccentLink href={mintscanValidatorsLearnMore}> - {stringGetter({ key: STRING_KEYS.DOCUMENT })} - - ), - }, - }), - }, ] : []), ]} diff --git a/src/pages/token/rewards/StakingPanel.tsx b/src/pages/token/rewards/StakingPanel.tsx index 2d414ef71..36f204324 100644 --- a/src/pages/token/rewards/StakingPanel.tsx +++ b/src/pages/token/rewards/StakingPanel.tsx @@ -58,6 +58,11 @@ export const StakingPanel = ({ className }: { className?: string }) => { }, }); + const aprText = stringGetter({ + key: STRING_KEYS.EST_APR, + params: { PERCENTAGE: <$Output type={OutputType.Percent} value={stakingApr} /> }, + }); + return ( { key: STRING_KEYS.UNSTAKED, })} - {stakingApr && ( - - {stringGetter({ key: STRING_KEYS.EST_APR, params: { PERCENTAGE: stakingApr } })} - - )} + {stakingApr && <$Tag sign={TagSign.Positive}>{aprText}} <$BalanceOutput type={OutputType.Asset} value={nativeTokenBalance} /> @@ -122,11 +123,7 @@ export const StakingPanel = ({ className }: { className?: string }) => { key: STRING_KEYS.STAKED, })} - {stakingApr && ( - - {stringGetter({ key: STRING_KEYS.EST_APR, params: { PERCENTAGE: stakingApr } })} - - )} + {stakingApr && <$Tag>{aprText}} <$BalanceOutput type={OutputType.Asset} value={nativeStakingBalance} /> @@ -193,6 +190,14 @@ const $Content = styled.div` gap: 0.75rem; `; +const $Tag = styled(Tag)` + display: inline-block; +`; + +const $Output = styled(Output)` + display: inline-block; +`; + const $TotalBalance = styled(Details)` div { --scrollArea-height: auto; diff --git a/src/views/dialogs/StakeDialog.tsx b/src/views/dialogs/StakeDialog.tsx index 09fd1f93b..6e76c7da2 100644 --- a/src/views/dialogs/StakeDialog.tsx +++ b/src/views/dialogs/StakeDialog.tsx @@ -10,6 +10,7 @@ import { layoutMixins } from '@/styles/layoutMixins'; import { AssetIcon } from '@/components/AssetIcon'; import { Dialog } from '@/components/Dialog'; +import { Output, OutputType } from '@/components/Output'; import { Tag, TagSign } from '@/components/Tag'; import { StakeForm } from '@/views/forms/StakeForm'; @@ -32,9 +33,12 @@ export const StakeDialog = ({ setIsOpen }: ElementProps) => { <$Title> {stringGetter({ key: STRING_KEYS.STAKE })} {stakingApr && ( - - {stringGetter({ key: STRING_KEYS.EST_APR, params: { PERCENTAGE: stakingApr } })} - + <$Tag sign={TagSign.Positive}> + {stringGetter({ + key: STRING_KEYS.EST_APR, + params: { PERCENTAGE: <$Output type={OutputType.Percent} value={stakingApr} /> }, + })} + )} } @@ -43,6 +47,7 @@ export const StakeDialog = ({ setIsOpen }: ElementProps) => { ); }; + const $Dialog = styled(Dialog)` --dialog-content-paddingTop: var(--default-border-width); `; @@ -50,3 +55,11 @@ const $Dialog = styled(Dialog)` const $Title = styled.span` ${layoutMixins.inlineRow} `; + +const $Tag = styled(Tag)` + display: inline-block; +`; + +const $Output = styled(Output)` + display: inline-block; +`; diff --git a/src/views/forms/StakeForm/index.tsx b/src/views/forms/StakeForm/index.tsx index 12e251abe..a3b9f010c 100644 --- a/src/views/forms/StakeForm/index.tsx +++ b/src/views/forms/StakeForm/index.tsx @@ -90,11 +90,7 @@ export const StakeForm = ({ onDone, className }: StakeFormProps) => { .then((stdFee) => { if (stdFee.amount.length > 0) { const feeAmount = stdFee.amount[0].amount; - setFee( - MustBigNumber(formatUnits(BigInt(feeAmount), chainTokenDecimals)).plus( - MustBigNumber(AMOUNT_RESERVED_FOR_GAS_DYDX) - ) - ); + setFee(MustBigNumber(formatUnits(BigInt(feeAmount), chainTokenDecimals))); } }) .catch((err) => {