fix: format numbers

lifinance · Oct 24, 2022 · fe63cdd · fe63cdd
1 parent 151f40f
commit fe63cdd
Show file tree

Hide file tree

Showing 8 changed files with 39 additions and 28 deletions.
diff --git a/packages/widget/src/components/StepActions/StepActions.tsx b/packages/widget/src/components/StepActions/StepActions.tsx
@@ -101,6 +101,7 @@ export const StepActions: React.FC<StepActionsProps> = ({
 };
 
 export const StepDetailsContent: React.FC<{ step: Step }> = ({ step }) => {
+  const { t } = useTranslation();
   return (
     <Typography
       fontSize={12}
@@ -109,16 +110,20 @@ export const StepDetailsContent: React.FC<{ step: Step }> = ({ step }) => {
       alignItems="center"
       display="flex"
     >
-      {formatTokenAmount(
-        step.estimate.fromAmount,
-        step.action.fromToken.decimals,
-      )}{' '}
+      {t('format.number', {
+        value: formatTokenAmount(
+          step.estimate.fromAmount,
+          step.action.fromToken.decimals,
+        ),
+      })}{' '}
       {step.action.fromToken.symbol}
       <ArrowForwardIcon sx={{ fontSize: 18, paddingX: 0.5 }} />
-      {formatTokenAmount(
-        step.execution?.toAmount ?? step.estimate.toAmount,
-        step.action.toToken.decimals,
-      )}{' '}
+      {t('format.number', {
+        value: formatTokenAmount(
+          step.execution?.toAmount ?? step.estimate.toAmount,
+          step.action.toToken.decimals,
+        ),
+      })}{' '}
       {step.action.toToken.symbol}
     </Typography>
   );

diff --git a/packages/widget/src/components/SwapInput/FormPriceHelperText.tsx b/packages/widget/src/components/SwapInput/FormPriceHelperText.tsx
@@ -39,7 +39,7 @@ export const FormPriceHelperText: React.FC<
           overflowWrap: 'break-word',
         }}
       >
-        {t(`swap.currency`, {
+        {t(`format.currency`, {
           value: fromAmountTokenPrice,
         })}
       </Typography>
@@ -58,9 +58,9 @@ export const FormPriceHelperText: React.FC<
           lineHeight={1.3334}
           pl={0.25}
         >
-          {t(`swap.maxAmount`, {
-            amount: token?.amount,
-          })}
+          {`/ ${t(`format.number`, {
+            value: token?.amount,
+          })}`}
         </Typography>
       ) : null}
     </FormHelperText>

diff --git a/packages/widget/src/components/SwapInput/SwapInput.tsx b/packages/widget/src/components/SwapInput/SwapInput.tsx
@@ -63,7 +63,7 @@ export const SwapInput: React.FC<SwapFormTypeProps> = ({ formType }) => {
 
   return (
     <Card>
-      <CardTitle>{t('swap.amount')}</CardTitle>
+      <CardTitle>{t('swap.fromAmount')}</CardTitle>
       <FormControl fullWidth>
         <Input
           inputRef={ref}

diff --git a/packages/widget/src/components/SwapRouteCard/SwapRouteCard.tsx b/packages/widget/src/components/SwapRouteCard/SwapRouteCard.tsx
@@ -104,7 +104,7 @@ export const SwapRouteCardEssentials: React.FC<
                 key={`${gas.token.address}${gas.token.symbol}`}
               >
                 {gas.amount?.toFixed(6)} {gas.token.symbol} (
-                {t(`swap.currency`, { value: gas.amountUSD })})
+                {t(`format.currency`, { value: gas.amountUSD })})
               </Typography>
             ))}
           </Box>
@@ -123,7 +123,7 @@ export const SwapRouteCardEssentials: React.FC<
             fontWeight="500"
             lineHeight={1}
           >
-            {t(`swap.currency`, { value: gasCostUSD })}
+            {t(`format.currency`, { value: gasCostUSD })}
           </Typography>
         </Box>
       </Tooltip>

diff --git a/packages/widget/src/components/Token/Token.tsx b/packages/widget/src/components/Token/Token.tsx
@@ -25,7 +25,9 @@ export const Token: React.FC<
             fontWeight: 700,
           }}
         >
-          {formatTokenAmount(token.amount, token.decimals)}
+          {t('format.number', {
+            value: formatTokenAmount(token.amount, token.decimals),
+          })}
         </TextFitter>
       </Box>
       <TextSecondaryContainer connected={connected} component="span">

diff --git a/packages/widget/src/components/TokenList/TokenListItem.tsx b/packages/widget/src/components/TokenList/TokenListItem.tsx
@@ -49,7 +49,9 @@ export const TokenListItem: React.FC<TokenListItemProps> = memo(
               <Box sx={{ textAlign: 'right' }}>
                 {Number(token.amount) ? (
                   <Typography variant="body1" noWrap>
-                    {token.amount}
+                    {t('format.number', {
+                      value: token.amount,
+                    })}
                   </Typography>
                 ) : null}
                 {tokenPrice ? (
@@ -59,7 +61,7 @@ export const TokenListItem: React.FC<TokenListItemProps> = memo(
                     color="text.secondary"
                     data-price={token.priceUSD}
                   >
-                    {t(`swap.currency`, {
+                    {t(`format.currency`, {
                       value: tokenPrice,
                     })}
                   </Typography>

diff --git a/packages/widget/src/i18n/en.json b/packages/widget/src/i18n/en.json
@@ -60,15 +60,14 @@
     "slippage": "Slippage"
   },
   "swap": {
-    "amount": "You pay",
+    "fromAmount": "You pay",
     "crossStepDetails": "Bridge from {{from}} to {{to}} via {{tool}}",
-    "currency": "{{value, currency(currency: USD)}}",
     "error": {
       "message": {
         "slippageTooLarge": "The slippage is larger than the defined threshold. Please request a new route to get a fresh quote.",
         "transactionFailed": "Please check the block explorer for more information.",
-        "transactionNotSent": "Transaction was not sent, your funds are still in your wallet ({{amount}} {{tokenSymbol}} on {{chainName}}).",
-        "transactionRejected": "Your signature is required to complete the transaction. {{amount}} {{tokenSymbol}} on {{chainName}} remain in your wallet."
+        "transactionNotSent": "Transaction was not sent, your funds are still in your wallet ({{amount, number(maximumFractionDigits: 4)}} {{tokenSymbol}} on {{chainName}}).",
+        "transactionRejected": "Your signature is required to complete the transaction. {{amount, number(maximumFractionDigits: 4)}} {{tokenSymbol}} on {{chainName}} remain in your wallet."
       },
       "title": {
         "chainSwitch": "Chain switch required.",
@@ -101,7 +100,6 @@
         "routeNotFound": "No routes available"
       }
     },
-    "maxAmount": "/ {{amount}}",
     "otherTokens": "Other tokens",
     "process": {
       "crossChain": {
@@ -141,7 +139,7 @@
     "stepSwapAndBridge": "Swap and bridge",
     "success": {
       "message": {
-        "swapSuccessful": "There are now {{amount}} {{tokenSymbol}} in wallet {{walletAddress}} on {{chainName}} chain."
+        "swapSuccessful": "There are now {{amount, number(maximumFractionDigits: 4)}} {{tokenSymbol}} in wallet {{walletAddress}} on {{chainName}} chain."
       },
       "title": {
         "swapSuccessful": "Swap successful"
@@ -159,7 +157,7 @@
     },
     "to": "To",
     "tokenOnChain": "{{tokenSymbol}} on {{chainName}}",
-    "tokenOnChainAmount": "{{amount}} {{tokenSymbol}} on {{chainName}}",
+    "tokenOnChainAmount": "{{amount, number(maximumFractionDigits: 4)}} {{tokenSymbol}} on {{chainName}}",
     "tokenSearch": "Search your token",
     "valueLoss": "Value loss",
     "walletAddressOrEns": "Wallet address or ENS name",
@@ -193,5 +191,9 @@
   },
   "wallet": {
     "extensionNotFound": "Please make sure that only the {{name}} browser extension is active before choosing this wallet."
+  },
+  "format": {
+    "currency": "{{value, currency(currency: USD)}}",
+    "number": "{{value, number(maximumFractionDigits: 4)}}"
   }
 }
diff --git a/packages/widget/src/pages/SwapPage/TokenValueBottomSheet.tsx b/packages/widget/src/pages/SwapPage/TokenValueBottomSheet.tsx
@@ -59,19 +59,19 @@ const TokenValueBottomSheetContent: React.FC<TokenValueBottomSheetProps> = ({
       <Box display="flex" justifyContent="space-between" mt={1}>
         <Typography>{t('swap.swapping')}</Typography>
         <Typography fontWeight={600}>
-          {t('swap.currency', { value: route.fromAmountUSD })}
+          {t('format.currency', { value: route.fromAmountUSD })}
         </Typography>
       </Box>
       <Box display="flex" justifyContent="space-between" mt={0.25}>
         <Typography>{t('swap.gasCost')}</Typography>
         <Typography fontWeight={600}>
-          {t('swap.currency', { value: route.gasCostUSD })}
+          {t('format.currency', { value: route.gasCostUSD })}
         </Typography>
       </Box>
       <Box display="flex" justifyContent="space-between" mt={0.25}>
         <Typography>{t('swap.receiving')}</Typography>
         <Typography fontWeight={600}>
-          {t('swap.currency', { value: route.toAmountUSD })}
+          {t('format.currency', { value: route.toAmountUSD })}
         </Typography>
       </Box>
       <Box display="flex" justifyContent="space-between" mt={0.25}>