frontend: add issupportederc20 helper function

So that amount component does not have to maintain an extra list

Author: thisconnect

frontends/web/src/api/erc20.ts

@@ -21,3 +21,13 @@ export const supportedERC20Tokens: Readonly<TERC20Token[]> = [
   { code: 'eth-erc20-paxg', name: 'Pax Gold', unit: 'PAXG' },
   { code: 'eth-erc20-dai0x6b17', name: 'Dai', unit: 'DAI' },
 ];
+
+const supportedERC20Units = new Set(
+  supportedERC20Tokens.map(({ unit }) => unit)
+);
+
+export const isSupportedERC20Unit = (
+  unit: string,
+): unit is ERC20TokenUnit => (
+  supportedERC20Units.has(unit as ERC20TokenUnit)
+);

frontends/web/src/components/amount/amount.tsx

@@ -2,6 +2,7 @@
 
 import { useContext } from 'react';
 import type { CoinUnit, ConversionUnit } from '@/api/account';
+import { isSupportedERC20Unit } from '@/api/erc20';
 import { AppContext } from '@/contexts/AppContext';
 import { LocalizationContext } from '@/contexts/localization-context';
 import { useMediaQuery } from '@/hooks/mediaquery';
@@ -207,15 +208,9 @@ export const FormattedAmount = ({
   case 'ETH':
   case 'SEPETH':
     return formatEth(displayedAmount, group, decimal, maxDecimals);
-  case 'USDT':
-  case 'USDC':
-  case 'LINK':
-  case 'BAT':
-  case 'MKR':
-  case 'ZRX':
-  case 'WBTC':
-  case 'PAXG':
-  case 'DAI':
+  }
+
+  if (isSupportedERC20Unit(unit)) {
     return formatEth(displayedAmount, group, decimal, maxDecimals);
   }