fix: number of decimals displayed for the token amount (#19)

Consensys · Oct 5, 2022 · 78f3809 · 78f3809
1 parent 7fc22c9
commit 78f3809
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 7 deletions.
diff --git a/...es/wallet-ui/src/components/ui/organism/Header/SendSummaryModal/SendSummaryModal.view.tsx b/...es/wallet-ui/src/components/ui/organism/Header/SendSummaryModal/SendSummaryModal.view.tsx
@@ -24,7 +24,7 @@ import { useEffect, useState } from 'react';
 import { useStarkNetSnap } from 'services';
 import { ethers } from 'ethers';
 import Toastr from 'toastr2';
-import { NUMBER_DISPLAY_MAX_LENGTH } from 'utils/constants';
+import { DECIMALS_DISPLAYED_MAX_LENGTH } from 'utils/constants';
 
 interface Props {
   address: string;
@@ -88,7 +88,7 @@ export const SendSummaryModalView = ({ address, amount, chainId, closeModal }: P
       const ethToken = wallet.erc20TokenBalances[0];
       const gasFeesBN = ethers.utils.parseUnits(gasFees.suggestedMaxFee, gasFees.unit);
       const gasFeesFloat = parseFloat(ethers.utils.formatUnits(gasFeesBN, ethToken.decimals));
-      setGasFeesAmount(gasFeesFloat.toFixed(NUMBER_DISPLAY_MAX_LENGTH).toString());
+      setGasFeesAmount(gasFeesFloat.toFixed(DECIMALS_DISPLAYED_MAX_LENGTH).toString());
       if (ethToken.usdPrice) {
         setGasFeesAmountUSD(getAmountPrice(ethToken, gasFeesFloat, false));
       }
@@ -98,7 +98,7 @@ export const SendSummaryModalView = ({ address, amount, chainId, closeModal }: P
         const totalAmountBN = gasFeesBN.add(amountBN);
         const totalAmount = ethers.utils.formatUnits(totalAmountBN, ethToken.decimals);
         const totalAmountFloat = parseFloat(totalAmount);
-        setTotalAmount(totalAmountFloat.toFixed(NUMBER_DISPLAY_MAX_LENGTH).toString());
+        setTotalAmount(totalAmountFloat.toFixed(DECIMALS_DISPLAYED_MAX_LENGTH).toString());
         if (ethToken.usdPrice) {
           setTotalAmountUSD(getAmountPrice(ethToken, totalAmountFloat, false));
         }

diff --git a/packages/wallet-ui/src/services/coinGecko.ts b/packages/wallet-ui/src/services/coinGecko.ts
@@ -1,12 +1,13 @@
 import { Erc20Token } from 'types';
 import { COINGECKO_API, TOKENS } from 'utils/constants';
+import { fetchWithTimeout } from 'utils/utils';
 
 export const getAssetPriceUSD = async (asset: Erc20Token) => {
   if (TOKENS[asset.chainId][asset.address]?.coingeckoId) {
     const coingeckoId = TOKENS[asset.chainId][asset.address].coingeckoId;
     const url = COINGECKO_API + '/simple/price?ids=' + coingeckoId + '&vs_currencies=usd';
     try {
-      const result = await fetch(url);
+      const result = await fetchWithTimeout(url);
       const resultJson = await result.json();
       if (resultJson[coingeckoId]?.usd) {
         return resultJson[coingeckoId].usd;

diff --git a/packages/wallet-ui/src/utils/constants.ts b/packages/wallet-ui/src/utils/constants.ts
@@ -25,7 +25,7 @@ export const TOKENS: any = {
   },
 };
 
-export const NUMBER_DISPLAY_MAX_LENGTH = 6;
+export const DECIMALS_DISPLAYED_MAX_LENGTH = 6;
 
 export const COINGECKO_API = 'https://api.coingecko.com/api/v3/';
 
@@ -46,3 +46,5 @@ export const POPOVER_DURATION = 3000;
 export const TRANSACTIONS_REFRESH_FREQUENCY = 60000;
 
 export const TOKEN_BALANCE_REFRESH_FREQUENCY = 60000;
+
+export const TIMEOUT_DURATION = 10000;
diff --git a/packages/wallet-ui/src/utils/utils.ts b/packages/wallet-ui/src/utils/utils.ts
@@ -1,6 +1,11 @@
 import { KeyboardEvent } from 'react';
 import { ethers } from 'ethers';
-import { NUMBER_DISPLAY_MAX_LENGTH, STARKNET_MAINNET_EXPLORER, STARKNET_TESTNET_EXPLORER } from './constants';
+import {
+  DECIMALS_DISPLAYED_MAX_LENGTH,
+  STARKNET_MAINNET_EXPLORER,
+  STARKNET_TESTNET_EXPLORER,
+  TIMEOUT_DURATION,
+} from './constants';
 import { Erc20Token, Erc20TokenBalance } from 'types';
 import { constants } from 'starknet';
 
@@ -37,7 +42,11 @@ export const addMissingPropertiesToToken = (
 };
 
 export const getHumanReadableAmount = (asset: Erc20TokenBalance) => {
-  return ethers.utils.formatUnits(asset.amount, asset.decimals).substring(0, NUMBER_DISPLAY_MAX_LENGTH);
+  const amountStr = ethers.utils.formatUnits(asset.amount, asset.decimals);
+  const indexDecimal = amountStr.indexOf('.');
+  return ethers.utils
+    .formatUnits(asset.amount, asset.decimals)
+    .substring(0, indexDecimal + DECIMALS_DISPLAYED_MAX_LENGTH);
 };
 
 export const getAmountPrice = (asset: Erc20TokenBalance, assetAmount: number, usdMode: boolean) => {
@@ -70,3 +79,14 @@ export const isSpecialInputKey = (event: KeyboardEvent<HTMLInputElement>) => {
     event.metaKey
   );
 };
+
+export const fetchWithTimeout = async (resource: string, options = { timeout: TIMEOUT_DURATION }) => {
+  const controller = new AbortController();
+  const id = setTimeout(() => controller.abort(), options.timeout);
+  const response = await fetch(resource, {
+    ...options,
+    signal: controller.signal,
+  });
+  clearTimeout(id);
+  return response;
+};