front: update FT icons

massalabs · Jun 5, 2024 · b4eec42 · b4eec42
1 parent c472d1e
commit b4eec42
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 98 deletions.
diff --git a/wails-frontend/package-lock.json b/wails-frontend/package-lock.json
diff --git a/web-frontend/package-lock.json b/web-frontend/package-lock.json
diff --git a/web-frontend/src/pages/Assets/AssetsList.tsx b/web-frontend/src/pages/Assets/AssetsList.tsx
@@ -1,12 +1,11 @@
 import { useState } from 'react';
 
-import { Token, getAssetIcons } from '@massalabs/react-ui-kit';
+import { Token } from '@massalabs/react-ui-kit';
 
-import { useFTTransfer } from '@/custom/smart-contract/useFTTransfer';
 import Intl from '@/i18n/i18n';
 import { Asset } from '@/models/AssetModel';
 import { DeleteAssetModal } from '@/pages/Assets/DeleteAssets';
-import { symbolDict } from '@/utils/tokenIcon';
+import { tokenIcon } from '@/utils/tokenIcon';
 
 interface AssetsListProps {
   assets: Asset[] | undefined;
@@ -23,20 +22,13 @@ export function AssetsList(props: AssetsListProps) {
     setModal(true);
   }
 
-  const { isMainnet } = useFTTransfer();
-
   return (
     <>
       {assets
         ?.filter((a) => a.balance !== undefined && a.balance !== '')
         .map((token: Asset, index: number) => (
           <Token
-            logo={getAssetIcons(
-              symbolDict[token.symbol as keyof typeof symbolDict],
-              true,
-              isMainnet,
-              32,
-            )}
+            logo={tokenIcon(token.symbol, 32)}
             name={token.name}
             symbol={token.symbol}
             decimals={token.decimals}

diff --git a/web-frontend/src/pages/TransferCoins/ReceiveCoins/GenerateLink.tsx b/web-frontend/src/pages/TransferCoins/ReceiveCoins/GenerateLink.tsx
@@ -8,18 +8,16 @@ import {
   PopupModalHeader,
   Clipboard,
   formatAmount,
-  getAssetIcons,
   Selector,
   Identicon,
 } from '@massalabs/react-ui-kit';
 
-import { useFTTransfer } from '@/custom/smart-contract/useFTTransfer';
 import Intl from '@/i18n/i18n';
 import { AccountObject } from '@/models/AccountModel';
 import { Asset } from '@/models/AssetModel';
 import { AssetSelector } from '@/pages/TransferCoins/SendCoins/AssetSelector';
 import { parseForm } from '@/utils/';
-import { symbolDict } from '@/utils/tokenIcon';
+import { tokenIcon } from '@/utils/tokenIcon';
 import { SendInputsErrors } from '@/validation/sendInputs';
 
 interface MoneyForm {
@@ -37,8 +35,6 @@ interface GenerateLinkProps {
 function GenerateLink(props: GenerateLinkProps) {
   const { account, presetURL, setURL, setModal } = props;
 
-  const { isMainnet } = useFTTransfer();
-
   const [amount, setAmount] = useState<string>('');
   const [link, setLink] = useState('');
   const [error, setError] = useState<SendInputsErrors | null>(null);
@@ -121,17 +117,7 @@ function GenerateLink(props: GenerateLinkProps) {
                 preIcon={<Identicon username={account.nickname} />}
                 content={account.nickname}
                 amount={formattedBalance}
-                posIcon={
-                  getAssetIcons(
-                    symbolDict[
-                      selectedAsset?.symbol as keyof typeof symbolDict
-                    ],
-                    true,
-                    isMainnet,
-                    24,
-                    'mr-3',
-                  ) as JSX.Element
-                }
+                posIcon={tokenIcon(selectedAsset?.symbol || '', 24)}
                 variant="secondary"
               />
             </div>

diff --git a/web-frontend/src/pages/TransferCoins/SendCoins/AssetSelector.tsx b/web-frontend/src/pages/TransferCoins/SendCoins/AssetSelector.tsx
@@ -1,18 +1,12 @@
 import { useEffect } from 'react';
 
-import {
-  Dropdown,
-  formatAmount,
-  getAssetIcons,
-  IOption,
-} from '@massalabs/react-ui-kit';
+import { Dropdown, formatAmount, IOption } from '@massalabs/react-ui-kit';
 import { useParams } from 'react-router-dom';
 
 import { useResource } from '@/custom/api';
-import { useFTTransfer } from '@/custom/smart-contract/useFTTransfer';
 import Intl from '@/i18n/i18n';
 import { Asset } from '@/models/AssetModel';
-import { symbolDict } from '@/utils/tokenIcon';
+import { tokenIcon } from '@/utils/tokenIcon';
 
 interface AssetSelectorProps {
   selectedAsset: Asset | undefined;
@@ -23,7 +17,6 @@ interface AssetSelectorProps {
 export function AssetSelector(props: AssetSelectorProps) {
   const { selectedAsset, setSelectedAsset, selectSymbol } = props;
   const { nickname } = useParams();
-  const { isMainnet } = useFTTransfer();
 
   const { data: assets, isLoading: isAssetsLoading } = useResource<Asset[]>(
     `accounts/${nickname}/assets`,
@@ -60,12 +53,7 @@ export function AssetSelector(props: AssetSelectorProps) {
             </p>
           </div>
         ),
-        icon: getAssetIcons(
-          symbolDict[asset.symbol as keyof typeof symbolDict],
-          true,
-          isMainnet,
-          28,
-        ),
+        icon: tokenIcon(asset.symbol, 28),
         onClick: () => setSelectedAsset(asset),
       };
     });

diff --git a/web-frontend/src/pages/TransferCoins/SendCoins/SendConfirmation.tsx b/web-frontend/src/pages/TransferCoins/SendCoins/SendConfirmation.tsx
@@ -3,7 +3,6 @@ import {
   Button,
   Tooltip,
   formatFTAmount,
-  getAssetIcons,
   parseAmount,
   Clipboard,
   Mns,
@@ -14,8 +13,7 @@ import { FiChevronLeft } from 'react-icons/fi';
 import { PRESET_HIGH, PRESET_LOW, PRESET_STANDARD } from './Advanced';
 import Intl from '@/i18n/i18n';
 import { Asset } from '@/models/AssetModel';
-import { useMassaWeb3Store } from '@/store/store';
-import { symbolDict } from '@/utils/tokenIcon';
+import { tokenIcon } from '@/utils/tokenIcon';
 
 export interface SendConfirmationData {
   amount: string;
@@ -33,7 +31,6 @@ interface SendConfirmationProps {
 
 export function SendConfirmation(props: SendConfirmationProps) {
   const { data, handleConfirm, isLoading } = props;
-  const { isMainnet } = useMassaWeb3Store();
 
   const { amount, asset, fees, recipientAddress, recipientDomainName } = data;
   const { symbol, decimals } = asset;
@@ -106,13 +103,7 @@ export function SendConfirmation(props: SendConfirmationProps) {
           customClass="p-0 bg-transparent"
           amount={formattedAmount}
           symbol={symbol}
-          icon={getAssetIcons(
-            symbolDict[symbol as keyof typeof symbolDict],
-            true,
-            isMainnet,
-            32,
-            'mr-3',
-          )}
+          icon={tokenIcon(symbol, 28)}
         />
         <div className="flex flex-col gap-4 p-4">
           <div className="flex items-center gap-8">

diff --git a/web-frontend/src/utils/tokenIcon.ts b/web-frontend/src/utils/tokenIcon.ts
@@ -1,12 +1,5 @@
-import { MAS } from '@/const/assets/assets';
+import { getAssetIcons } from '@massalabs/react-ui-kit';
 
-export const symbolDict = {
-  MAS: MAS,
-  WMAS: 'WMAS',
-  'WETH.e': 'WETH',
-  'WETH.s': 'WETH',
-  'USDC.e': 'USDC',
-  'USDC.s': 'USDC',
-  'DAI.e': 'DAI',
-  'tDAI.s': 'DAI',
-};
+export function tokenIcon(symbol: string, size: number) {
+  return getAssetIcons(symbol, undefined, false, size) as JSX.Element;
+}