fix: polishes for staking (dydxprotocol#716)

nabla-studio · Jun 26, 2024 · 7a9c47d · 7a9c47d
1 parent 403ea90
commit 7a9c47d
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 40 deletions.
diff --git 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
@@ -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 })}
                         </$AccentLink>
                       ),
@@ -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 })}
-                        </$AccentLink>
-                      ),
-                    },
-                  }),
-                },
               ]
             : []),
         ]}

diff --git 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 (
     <Panel
       className={className}
@@ -95,11 +100,7 @@ export const StakingPanel = ({ className }: { className?: string }) => {
                   key: STRING_KEYS.UNSTAKED,
                 })}
               </WithTooltip>
-              {stakingApr && (
-                <Tag sign={TagSign.Positive}>
-                  {stringGetter({ key: STRING_KEYS.EST_APR, params: { PERCENTAGE: stakingApr } })}
-                </Tag>
-              )}
+              {stakingApr && <$Tag sign={TagSign.Positive}>{aprText}</$Tag>}
             </$Label>
             <$BalanceOutput type={OutputType.Asset} value={nativeTokenBalance} />
           </div>
@@ -122,11 +123,7 @@ export const StakingPanel = ({ className }: { className?: string }) => {
                   key: STRING_KEYS.STAKED,
                 })}
               </WithTooltip>
-              {stakingApr && (
-                <Tag>
-                  {stringGetter({ key: STRING_KEYS.EST_APR, params: { PERCENTAGE: stakingApr } })}
-                </Tag>
-              )}
+              {stakingApr && <$Tag>{aprText}</$Tag>}
             </$Label>
             <$BalanceOutput type={OutputType.Asset} value={nativeStakingBalance} />
           </div>
@@ -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
@@ -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 && (
-            <Tag sign={TagSign.Positive}>
-              {stringGetter({ key: STRING_KEYS.EST_APR, params: { PERCENTAGE: stakingApr } })}
-            </Tag>
+            <$Tag sign={TagSign.Positive}>
+              {stringGetter({
+                key: STRING_KEYS.EST_APR,
+                params: { PERCENTAGE: <$Output type={OutputType.Percent} value={stakingApr} /> },
+              })}
+            </$Tag>
           )}
         </$Title>
       }
@@ -43,10 +47,19 @@ export const StakeDialog = ({ setIsOpen }: ElementProps) => {
     </$Dialog>
   );
 };
+
 const $Dialog = styled(Dialog)`
   --dialog-content-paddingTop: var(--default-border-width);
 `;
 
 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
@@ -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) => {