feature: update cep18 tokens fetching

src/apps/popup/pages/contact-details/index.tsx

@@ -2,13 +2,13 @@ import React, { useCallback, useMemo, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom';
-import { PasswordProtectionPage } from 'src/apps/popup/pages/password-protection-page';
 
 import { getBlockExplorerAccountUrl } from '@src/constants';
 
 import { DeleteContactPageContent } from '@popup/pages/contact-details/deleting';
 import { ContactDetails } from '@popup/pages/contact-details/details';
 import { EditingContactPageContent } from '@popup/pages/contact-details/editing';
+import { PasswordProtectionPage } from '@popup/pages/password-protection-page';
 import { RouterPath, useTypedNavigate } from '@popup/router';
 
 import {

src/apps/popup/pages/home/components/tokens-list/index.tsx

@@ -5,12 +5,12 @@ import styled from 'styled-components';
 import { RouterPath, useTypedNavigate } from '@popup/router';
 
 import { TokenType, useCasperToken } from '@hooks/use-casper-token';
-import { useFetchErc20Tokens } from '@hooks/use-fetch-erc20-tokens';
 
 import { SpaceBetweenFlexRow, SpacingSize } from '@libs/layout';
+import { useFetchCep18Tokens } from '@libs/services/cep18-service';
 import { List, TokenPlate, Typography } from '@libs/ui/components';
 
-import { formatErc20TokenBalance } from './utils';
+import { formatCep18Tokens } from './utils';
 
 const TotalValueContainer = styled(SpaceBetweenFlexRow)`
   padding: 12px 16px;
@@ -25,12 +25,12 @@ export const TokensList = () => {
   const [totalAmountFiat, setTotalAmountFiat] = useState<string | null>(null);
 
   const casperToken = useCasperToken();
-  const erc20Tokens = useFetchErc20Tokens();
+  const { cep18Tokens } = useFetchCep18Tokens();
   const { t } = useTranslation();
   const navigate = useTypedNavigate();
 
   useEffect(() => {
-    const erc20TokensList = formatErc20TokenBalance(erc20Tokens);
+    const formatedCep18Tokens = formatCep18Tokens(cep18Tokens);
 
     const tokensList: TokenType[] = [];
 
@@ -39,12 +39,12 @@ export const TokensList = () => {
       setTotalAmountFiat(casperToken.amountFiat);
     }
 
-    if (erc20TokensList) {
-      tokensList.push(...erc20TokensList);
+    if (formatedCep18Tokens) {
+      tokensList.push(...formatedCep18Tokens);
     }
 
     setTokensList(tokensList);
-  }, [casperToken, erc20Tokens]);
+  }, [casperToken, cep18Tokens]);
 
   useEffect(() => {
     const container = document.querySelector('#ms-container');

src/apps/popup/pages/home/components/tokens-list/utils.ts

@@ -1,40 +1,22 @@
-import { TokenType } from '@hooks/use-casper-token';
-
-import { ContractPackageWithBalance } from '@libs/services/erc20-service';
-import { divideErc20Balance, formatNumber } from '@libs/ui/utils';
+import { TokenDto } from 'casper-wallet-core/src/data/dto';
 
-export const MINIMUM_SHOWING_BALANCE = 0.00001;
+import { TokenType } from '@hooks/use-casper-token';
 
-export const formatErc20TokenBalance = (
-  erc20Tokens: ContractPackageWithBalance[] | null
+export const formatCep18Tokens = (
+  cep18Tokens: TokenDto[] | undefined
 ): TokenType[] | undefined => {
-  return erc20Tokens
-    ?.map(token => {
-      const calculatedErc20Balance = token?.balance
-        ? divideErc20Balance(token?.balance, token.metadata?.decimals)
-        : '0';
-
-      const formattedErc20Amount = calculatedErc20Balance
-        ? formatNumber(calculatedErc20Balance, { precision: { max: 5 } })
-        : '-';
-
-      const erc20Amount =
-        parseFloat(formattedErc20Amount) >= MINIMUM_SHOWING_BALANCE
-          ? formattedErc20Amount
-          : '0';
-
-      return {
-        id: token.contract_package_hash,
-        contractHash: token.contractHash,
-        name: token.contract_name,
-        balance: token.balance,
-        amount: erc20Amount,
-        symbol: token?.metadata?.symbol || '',
-        decimals: token?.metadata?.decimals,
-        amountFiat: null,
-        icon: token.icon_url || 'assets/icons/cep18-contract-icon.svg'
-      };
-    })
+  return cep18Tokens
+    ?.map(token => ({
+      id: token.contractPackageHash,
+      contractHash: token.contractHash,
+      name: token.name,
+      balance: token.balance,
+      amount: token.formattedDecimalBalance,
+      symbol: token.symbol,
+      decimals: token.decimals,
+      amountFiat: null,
+      icon: token.iconUrl || 'assets/icons/cep18-contract-icon.svg'
+    }))
     .sort((a, b) => {
       const first = a.amount.split(',').join('');
       const second = b.amount.split(',').join('');

src/apps/popup/pages/receive/content.tsx

@@ -1,13 +1,12 @@
 import { QRCodeSVG } from 'qrcode.react';
 import React, { useEffect, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import { shallowEqual, useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
 import styled from 'styled-components';
 
-import { formatErc20TokenBalance } from '@popup/pages/home/components/tokens-list/utils';
+import { formatCep18Tokens } from '@popup/pages/home/components/tokens-list/utils';
 import { useTypedLocation } from '@popup/router';
 
-import { selectErc20Tokens } from '@background/redux/account-info/selectors';
 import { selectVaultActiveAccount } from '@background/redux/vault/selectors';
 
 import { useCopyToClipboard } from '@hooks/use-copy-to-clipboard';
@@ -20,6 +19,7 @@ import {
   VerticalSpaceContainer
 } from '@libs/layout';
 import { useFetchWalletBalance } from '@libs/services/balance-service';
+import { useFetchCep18Tokens } from '@libs/services/cep18-service';
 import { ActiveAccountPlate, Tile, Typography } from '@libs/ui/components';
 import { motesToCSPR } from '@libs/ui/utils';
 
@@ -55,9 +55,8 @@ export const ReceivePageContent = () => {
     symbol: location?.state?.tokenData?.symbol ?? ''
   });
 
-  const tokens = useSelector(selectErc20Tokens, shallowEqual);
-
   const { accountBalance } = useFetchWalletBalance();
+  const { cep18Tokens } = useFetchCep18Tokens();
 
   useEffect(() => {
     if (tokenData?.symbol === 'CSPR') {
@@ -67,12 +66,13 @@ export const ReceivePageContent = () => {
         '0';
       setTokenData(prev => ({ ...prev, balance }));
     } else {
-      const erc20Tokens = formatErc20TokenBalance(tokens);
+      const formatedCep18Tokens = formatCep18Tokens(cep18Tokens);
       const balance =
-        erc20Tokens?.find(t => t?.symbol === tokenData?.symbol)?.amount ?? '0';
+        formatedCep18Tokens?.find(t => t?.symbol === tokenData?.symbol)
+          ?.amount ?? '0';
       setTokenData(prev => ({ ...prev, balance }));
     }
-  }, [accountBalance.liquidBalance, tokenData?.symbol, tokens]);
+  }, [accountBalance.liquidBalance, tokenData?.symbol, cep18Tokens]);
 
   return (
     <ContentContainer>

src/apps/popup/pages/token-details/content.tsx

@@ -7,7 +7,6 @@ import {
   ParagraphContainer,
   SpacingSize
 } from '@libs/layout';
-import { ContractPackageWithBalance } from '@libs/services/erc20-service';
 import {
   CasperTokenTransferDeploysList,
   Cep18TokenDeploysList,
@@ -16,13 +15,7 @@ import {
 
 import { Token } from './token';
 
-interface TokenPageContentProps {
-  erc20Tokens: ContractPackageWithBalance[] | null;
-}
-
-export const TokenPageContent: React.FC<TokenPageContentProps> = ({
-  erc20Tokens
-}) => {
+export const TokenPageContent: React.FC = () => {
   const { t } = useTranslation();
 
   const { tokenName } = useParams();
@@ -34,7 +27,7 @@ export const TokenPageContent: React.FC<TokenPageContentProps> = ({
           <Trans t={t}>Token</Trans>
         </Typography>
       </ParagraphContainer>
-      <Token erc20Tokens={erc20Tokens} />
+      <Token />
       <ParagraphContainer top={SpacingSize.XL}>
         <Typography type="header">
           <Trans t={t}>Activity</Trans>

src/apps/popup/pages/token-details/index.tsx

@@ -1,22 +1,21 @@
 import React from 'react';
-import { useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom';
 
-import { selectErc20Tokens } from '@background/redux/account-info/selectors';
-
 import {
   HeaderPopup,
   HeaderSubmenuBarNavLink,
   HeaderViewInExplorer,
   PopupLayout
 } from '@libs/layout';
+import { useFetchCep18Tokens } from '@libs/services/cep18-service';
 
 import { TokenPageContent } from './content';
 
 export const TokenDetailPage = () => {
-  const erc20Tokens = useSelector(selectErc20Tokens);
   const { tokenName } = useParams();
 
+  const { cep18Tokens } = useFetchCep18Tokens();
+
   return (
     <PopupLayout
       renderHeader={() => (
@@ -29,13 +28,13 @@ export const TokenDetailPage = () => {
               <HeaderSubmenuBarNavLink linkType="back" />
               <HeaderViewInExplorer
                 tokenName={tokenName}
-                erc20Tokens={erc20Tokens}
+                cep18Tokens={cep18Tokens}
               />
             </>
           )}
         />
       )}
-      renderContent={() => <TokenPageContent erc20Tokens={erc20Tokens} />}
+      renderContent={() => <TokenPageContent />}
     />
   );
 };

src/apps/popup/pages/token-details/token.tsx

@@ -6,7 +6,7 @@ import styled from 'styled-components';
 
 import { NetworkSetting } from '@src/constants';
 
-import { formatErc20TokenBalance } from '@popup/pages/home/components/tokens-list/utils';
+import { formatCep18Tokens } from '@popup/pages/home/components/tokens-list/utils';
 import { RouterPath, useTypedLocation, useTypedNavigate } from '@popup/router';
 
 import {
@@ -23,7 +23,7 @@ import {
   SpaceBetweenFlexRow,
   SpacingSize
 } from '@libs/layout';
-import { ContractPackageWithBalance } from '@libs/services/erc20-service';
+import { useFetchCep18Tokens } from '@libs/services/cep18-service';
 import {
   Button,
   List,
@@ -52,11 +52,7 @@ type TokenInfoList = {
   value: string;
 };
 
-type TokenProps = {
-  erc20Tokens: ContractPackageWithBalance[] | null;
-};
-
-export const Token = ({ erc20Tokens }: TokenProps) => {
+export const Token = () => {
   const location = useTypedLocation();
   const [tokenData, setTokenData] = useState<TokenType | null>(
     location.state.tokenData ?? null
@@ -71,6 +67,7 @@ export const Token = ({ erc20Tokens }: TokenProps) => {
   const { casperLiveUrl } = useSelector(selectApiConfigBasedOnActiveNetwork);
   const activeAccount = useSelector(selectVaultActiveAccount);
   const network = useSelector(selectActiveNetworkSetting);
+  const { cep18Tokens } = useFetchCep18Tokens();
 
   useEffect(() => {
     if (tokenName === 'Casper') {
@@ -82,10 +79,10 @@ export const Token = ({ erc20Tokens }: TokenProps) => {
         ]);
       }
     } else {
-      // ERC-20 token case
-      const erc20TokensList = formatErc20TokenBalance(erc20Tokens);
+      // CEP-18 token case
+      const formatedCep18Tokens = formatCep18Tokens(cep18Tokens);
 
-      const token = erc20TokensList?.find(token => token.id === tokenName);
+      const token = formatedCep18Tokens?.find(token => token.id === tokenName);
 
       if (token) {
         setTokenData(token);
@@ -110,7 +107,7 @@ export const Token = ({ erc20Tokens }: TokenProps) => {
     casperToken,
     activeAccount,
     casperLiveUrl,
-    erc20Tokens,
+    cep18Tokens,
     tokenData?.symbol,
     tokenData?.decimals
   ]);

src/apps/popup/pages/transfer/token-step.tsx

@@ -1,14 +1,16 @@
 import React, { useEffect, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
-import { useActiveAccountErc20Tokens } from '@hooks/use-active-account-erc20-tokens';
+import { formatCep18Tokens } from '@popup/pages/home/components/tokens-list/utils';
+
 import { TokenType, useCasperToken } from '@hooks/use-casper-token';
 
 import {
   ContentContainer,
   ParagraphContainer,
   SpacingSize
 } from '@libs/layout';
+import { useFetchCep18Tokens } from '@libs/services/cep18-service';
 import {
   ActiveAccountPlate,
   List,
@@ -37,19 +39,20 @@ export const TokenStep = ({
   const { t } = useTranslation();
 
   const casperToken = useCasperToken();
-  const { tokens, isLoading } = useActiveAccountErc20Tokens();
+  const { cep18Tokens, isLoadingTokens } = useFetchCep18Tokens();
 
   useEffect(() => {
     const tokensList: TokenType[] = [];
 
-    if (isLoading) return;
+    if (isLoadingTokens) return;
+    const formatedCep18Tokens = formatCep18Tokens(cep18Tokens);
 
     if (casperToken) {
       tokensList.push(casperToken);
     }
 
-    if (tokens) {
-      tokensList.push(...tokens);
+    if (formatedCep18Tokens) {
+      tokensList.push(...formatedCep18Tokens);
     }
 
     setTokenList(tokensList);
@@ -61,7 +64,13 @@ export const TokenStep = ({
     } else {
       setSelectedToken(casperToken);
     }
-  }, [casperToken, tokens, isLoading, selectedToken?.id, setSelectedToken]);
+  }, [
+    casperToken,
+    cep18Tokens,
+    isLoadingTokens,
+    selectedToken?.id,
+    setSelectedToken
+  ]);
 
   return (
     <ContentContainer>