TW-1387 Implement sending EVM tokens

src/app/hooks/listing-logic/use-account-tokens-listing-logic.ts

@@ -61,23 +61,26 @@ export const useAccountTokensForListing = (
     [enabledEvmChains, enabledTezChains]
   );
 
-  const enabledChainsSlugsSorted = useMemoWithCompare(() => {
-    const enabledChainsSlugs = [
-      ...gasChainsSlugs,
-      ...tezTokens
-        .filter(({ status }) => status === 'enabled')
-        .map(({ chainId, slug }) => toChainAssetSlug(TempleChainKind.Tezos, chainId, slug)),
-      ...evmTokens
-        .filter(({ status }) => status === 'enabled')
-        .map(({ chainId, slug }) => toChainAssetSlug(TempleChainKind.EVM, chainId, slug))
-    ];
-
-    const enabledChainsSlugsFiltered = filterZeroBalances
-      ? enabledChainsSlugs.filter(isNonZeroBalance)
-      : enabledChainsSlugs;
-
-    return enabledChainsSlugsFiltered.sort(tokensSortPredicate);
-  }, [gasChainsSlugs, tezTokens, evmTokens, filterZeroBalances, isNonZeroBalance, tokensSortPredicate]);
+  const enabledChainsSlugsFiltered = useMemo(() => {
+    const enabledChainsSlugs = gasChainsSlugs
+      .concat(
+        tezTokens
+          .filter(({ status }) => status === 'enabled')
+          .map(({ chainId, slug }) => toChainAssetSlug(TempleChainKind.Tezos, chainId, slug))
+      )
+      .concat(
+        evmTokens
+          .filter(({ status }) => status === 'enabled')
+          .map(({ chainId, slug }) => toChainAssetSlug(TempleChainKind.EVM, chainId, slug))
+      );
+
+    return filterZeroBalances ? enabledChainsSlugs.filter(isNonZeroBalance) : enabledChainsSlugs;
+  }, [evmTokens, filterZeroBalances, gasChainsSlugs, isNonZeroBalance, tezTokens]);
+
+  const enabledChainsSlugsSorted = useMemoWithCompare(
+    () => enabledChainsSlugsFiltered.sort(tokensSortPredicate),
+    [enabledChainsSlugsFiltered, tokensSortPredicate]
+  );
 
   return {
     enabledChainsSlugsSorted,

src/app/hooks/listing-logic/use-evm-chain-account-tokens-listing-logic.ts

@@ -40,16 +40,19 @@ export const useEvmChainAccountTokensForListing = (
     [balances]
   );
 
-  const enabledSlugsSorted = useMemoWithCompare(() => {
-    const enabledSlugs = [
-      EVM_TOKEN_SLUG,
-      ...tokens.filter(({ status }) => status === 'enabled').map(({ slug }) => slug)
-    ];
-
-    const enabledSlugsFiltered = filterZeroBalances ? enabledSlugs.filter(isNonZeroBalance) : enabledSlugs;
-
-    return enabledSlugsFiltered.sort(tokensSortPredicate);
-  }, [tokens, isNonZeroBalance, tokensSortPredicate, filterZeroBalances]);
+  const enabledSlugsFiltered = useMemo(() => {
+    const gasTokensSlugs: string[] = [EVM_TOKEN_SLUG];
+    const enabledSlugs = gasTokensSlugs.concat(
+      tokens.filter(({ status }) => status === 'enabled').map(({ slug }) => slug)
+    );
+
+    return filterZeroBalances ? enabledSlugs.filter(isNonZeroBalance) : enabledSlugs;
+  }, [filterZeroBalances, isNonZeroBalance, tokens]);
+
+  const enabledSlugsSorted = useMemoWithCompare(
+    () => enabledSlugsFiltered.sort(tokensSortPredicate),
+    [enabledSlugsFiltered, tokensSortPredicate]
+  );
 
   return {
     enabledSlugsSorted,

src/app/hooks/listing-logic/use-tezos-account-tokens-listing-logic.ts

@@ -53,13 +53,16 @@ export const useTezosAccountTokensForListing = (publicKeyHash: string, filterZer
     [balancesRecord, publicKeyHash]
   );
 
-  const enabledChainsSlugsSorted = useMemoWithCompare(() => {
+  const enabledSlugsFiltered = useMemo(() => {
     const enabledSlugs = gasSlugs.concat(enabledStoredChainSlugs);
 
-    const enabledSlugsFiltered = filterZeroBalances ? enabledSlugs.filter(isNonZeroBalance) : enabledSlugs;
+    return filterZeroBalances ? enabledSlugs.filter(isNonZeroBalance) : enabledSlugs;
+  }, [enabledStoredChainSlugs, filterZeroBalances, gasSlugs, isNonZeroBalance]);
 
-    return enabledSlugsFiltered.sort(tokensSortPredicate);
-  }, [enabledStoredChainSlugs, isNonZeroBalance, tokensSortPredicate, gasSlugs, filterZeroBalances]);
+  const enabledChainsSlugsSorted = useMemoWithCompare(
+    () => enabledSlugsFiltered.sort(tokensSortPredicate),
+    [enabledSlugsFiltered, tokensSortPredicate]
+  );
 
   return {
     enabledChainsSlugsSorted,

src/app/hooks/listing-logic/use-tezos-chain-account-tokens-listing-logic.ts

@@ -45,14 +45,19 @@ export const useTezosChainAccountTokensForListing = (publicKeyHash: string, chai
     [isNonZeroBalance, leadingAssetsSlugs, filterZeroBalances]
   );
 
-  const nonLeadingTokenSlugsFilteredSorted = useMemoWithCompare(() => {
-    const nonLeadingSlugs = [
-      TEZ_TOKEN_SLUG,
-      ...tokens.filter(({ status }) => status === 'enabled').map(({ slug }) => slug)
-    ];
-
-    return (filterZeroBalances ? nonLeadingSlugs.filter(isNonZeroBalance) : nonLeadingSlugs).sort(tokensSortPredicate);
-  }, [tokens, isNonZeroBalance, tokensSortPredicate, filterZeroBalances]);
+  const nonLeadingTokensSlugsFiltered = useMemo(() => {
+    const gasSlugs: string[] = [TEZ_TOKEN_SLUG];
+    const nonLeadingSlugs = gasSlugs.concat(
+      tokens.filter(({ status }) => status === 'enabled').map(({ slug }) => slug)
+    );
+
+    return filterZeroBalances ? nonLeadingSlugs.filter(isNonZeroBalance) : nonLeadingSlugs;
+  }, [tokens, isNonZeroBalance, filterZeroBalances]);
+
+  const nonLeadingTokenSlugsFilteredSorted = useMemoWithCompare(
+    () => nonLeadingTokensSlugsFiltered.sort(tokensSortPredicate),
+    [nonLeadingTokensSlugsFiltered, tokensSortPredicate]
+  );
 
   const enabledTokenSlugsSorted = useMemo(
     () => Array.from(new Set(leadingAssetsFiltered.concat(nonLeadingTokenSlugsFilteredSorted))),

src/app/pages/Collectibles/CollectiblePage/CollectiblePageImage.tsx

@@ -1,9 +1,11 @@
 import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
 
+import { isString } from 'lodash';
+
 import { Model3DViewer } from 'app/atoms/Model3DViewer';
 import { useCollectiblesListOptionsSelector } from 'app/store/assets-filter-options/selectors';
 import { TezosAssetImage } from 'app/templates/AssetImage';
-import { isSvgDataUriInUtf8Encoding, buildObjktCollectibleArtifactUri } from 'lib/images-uri';
+import { isSvgDataUriInUtf8Encoding, buildObjktCollectibleArtifactUri, buildHttpLinkFromUri } from 'lib/images-uri';
 import { TokenMetadata } from 'lib/metadata';
 import { EvmCollectibleMetadata } from 'lib/metadata/types';
 import { ImageStacked } from 'lib/ui/ImageStacked';
@@ -103,7 +105,9 @@ interface EvmCollectiblePageImageProps {
 }
 
 export const EvmCollectiblePageImage = memo<EvmCollectiblePageImageProps>(({ metadata, className }) => {
-  const sources = useMemo(() => (metadata.image ? [metadata.image] : []), [metadata.image]);
+  const { image } = metadata;
+
+  const sources = useMemo(() => [buildHttpLinkFromUri(image)].filter(isString), [image]);
 
   return (
     <ImageStacked

src/app/pages/Collectibles/CollectiblePage/PropertiesItems.tsx

@@ -3,13 +3,14 @@ import React, { memo, useMemo } from 'react';
 import BigNumber from 'bignumber.js';
 
 import { OldStyleHashChip, ExternalLinkChip } from 'app/atoms';
-import { useRawEvmAssetBalanceSelector } from 'app/store/evm/balances/selectors';
 import type { CollectibleDetails } from 'app/store/tezos/collectibles/state';
 import { fromFa2TokenSlug } from 'lib/assets/utils';
 import { useTezosAssetBalance } from 'lib/balances';
+import { useEvmAssetBalance } from 'lib/balances/hooks';
 import { formatDate } from 'lib/i18n';
 import { EvmCollectibleMetadata } from 'lib/metadata/types';
 import { useBlockExplorerHref } from 'temple/front/block-explorers';
+import { useEvmChainByChainId } from 'temple/front/chains';
 import { TezosNetworkEssentials } from 'temple/networks';
 import { TempleChainKind } from 'temple/types';
 
@@ -109,15 +110,16 @@ interface EvmPropertiesItemsProps {
 }
 
 export const EvmPropertiesItems = memo<EvmPropertiesItemsProps>(({ accountPkh, evmChainId, assetSlug, metadata }) => {
-  const rawBalance = useRawEvmAssetBalanceSelector(accountPkh, evmChainId, assetSlug);
+  const chain = useEvmChainByChainId(evmChainId);
+  const { value: balance } = useEvmAssetBalance(assetSlug, accountPkh, chain!);
 
   if (!metadata) return null;
 
   return (
     <>
       <div className={itemClassName}>
         <h6 className={itemTitleClassName}>Owned</h6>
-        <span className={itemValueClassName}>{rawBalance ?? '-'}</span>
+        <span className={itemValueClassName}>{balance?.toFixed() ?? '-'}</span>
       </div>
 
       <div className={itemClassName}>

src/app/pages/Collectibles/CollectiblePage/index.tsx

@@ -87,6 +87,11 @@ const EvmCollectiblePage = memo<EvmCollectiblePageProps>(({ evmChainId, assetSlu
     return tab ?? tabs[0]!;
   }, [tabs, tabNameInUrl]);
 
+  const onSendButtonClick = useCallback(
+    () => navigate(buildSendPagePath(TempleChainKind.EVM, String(evmChainId), assetSlug)),
+    [evmChainId, assetSlug]
+  );
+
   return (
     <PageLayout
       pageTitle={
@@ -128,6 +133,10 @@ const EvmCollectiblePage = memo<EvmCollectiblePageProps>(({ evmChainId, assetSlu
             </div>
           )}
 
+          <FormSubmitButton onClick={onSendButtonClick} testID={CollectiblesSelectors.sendButton}>
+            <T id="send" />
+          </FormSubmitButton>
+
           <TabsBar tabs={tabs} activeTabName={activeTabName} withOutline />
 
           <div className="grid grid-cols-2 gap-2 text-gray-910">

src/app/pages/Collectibles/CollectiblesTab/components/CollectibleItem.tsx

@@ -11,7 +11,6 @@ import { ReactComponent as DeleteIcon } from 'app/icons/base/delete.svg';
 import { dispatch } from 'app/store';
 import { setEvmCollectibleStatusAction } from 'app/store/evm/assets/actions';
 import { useStoredEvmCollectibleSelector } from 'app/store/evm/assets/selectors';
-import { useRawEvmAssetBalanceSelector } from 'app/store/evm/balances/selectors';
 import { useEvmCollectibleMetadataSelector } from 'app/store/evm/collectibles-metadata/selectors';
 import { setTezosCollectibleStatusAction } from 'app/store/tezos/assets/actions';
 import { useStoredTezosCollectibleSelector } from 'app/store/tezos/assets/selectors';
@@ -25,13 +24,15 @@ import { DeleteAssetModal } from 'app/templates/remove-asset-modal/delete-asset-
 import { setAnotherSelector, setTestID } from 'lib/analytics';
 import { objktCurrencies } from 'lib/apis/objkt';
 import { getAssetStatus } from 'lib/assets/hooks/utils';
+import { useEvmAssetBalance } from 'lib/balances/hooks';
 import { T } from 'lib/i18n';
 import { getTokenName } from 'lib/metadata';
 import { getCollectibleName, getCollectionName } from 'lib/metadata/utils';
 import { atomsToTokens } from 'lib/temple/helpers';
 import { TEZOS_MAINNET_CHAIN_ID } from 'lib/temple/types';
 import { useBooleanState } from 'lib/ui/hooks';
 import useTippy, { UseTippyOptions } from 'lib/ui/useTippy';
+import { ZERO } from 'lib/utils/numbers';
 import { Link } from 'lib/woozie';
 import { useEvmChainByChainId, useTezosChainByChainId } from 'temple/front/chains';
 import { TempleChainKind } from 'temple/types';
@@ -278,12 +279,13 @@ interface EvmCollectibleItemProps {
 export const EvmCollectibleItem = memo<EvmCollectibleItemProps>(
   ({ assetSlug, evmChainId, accountPkh, showDetails = false, manageActive = false, hideWithoutMeta }) => {
     const metadata = useEvmCollectibleMetadataSelector(evmChainId, assetSlug);
-    const balanceAtomic = useRawEvmAssetBalanceSelector(accountPkh, evmChainId, assetSlug);
-    const balance = balanceAtomic ?? '0';
+    const chain = useEvmChainByChainId(evmChainId);
+    const { value: balance = ZERO } = useEvmAssetBalance(assetSlug, accountPkh, chain!);
+    const balanceBeforeTruncate = balance.toString();
 
     const storedToken = useStoredEvmCollectibleSelector(accountPkh, evmChainId, assetSlug);
 
-    const checked = getAssetStatus(balance, storedToken?.status) === 'enabled';
+    const checked = getAssetStatus(balanceBeforeTruncate, storedToken?.status) === 'enabled';
 
     const [deleteModalOpened, setDeleteModalOpened, setDeleteModalClosed] = useBooleanState(false);
 
@@ -313,7 +315,10 @@ export const EvmCollectibleItem = memo<EvmCollectibleItemProps>(
       [checked, assetSlug, evmChainId, accountPkh]
     );
 
-    const truncatedBalance = useMemo(() => (balance.length > 6 ? `${balance.slice(0, 6)}...` : balance), [balance]);
+    const truncatedBalance = useMemo(
+      () => (balanceBeforeTruncate.length > 6 ? `${balanceBeforeTruncate.slice(0, 6)}...` : balanceBeforeTruncate),
+      [balanceBeforeTruncate]
+    );
 
     const network = useEvmChainByChainId(evmChainId);
 

src/app/pages/Home/OtherComponents/Tokens/components/AddTokenModal/AddTokenForm.tsx

@@ -34,7 +34,7 @@ import { t, T } from 'lib/i18n';
 import { isCollectible, TokenMetadata } from 'lib/metadata';
 import { fetchOneTokenMetadata } from 'lib/metadata/fetch';
 import { TokenMetadataNotFoundError } from 'lib/metadata/on-chain';
-import { EvmTokenMetadata } from 'lib/metadata/types';
+import { EvmCollectibleMetadata, EvmTokenMetadata } from 'lib/metadata/types';
 import { loadContract } from 'lib/temple/contract';
 import { useSafeState } from 'lib/ui/hooks';
 import { navigate } from 'lib/woozie';
@@ -69,11 +69,14 @@ interface RequiredTokenMetadataResponse extends TokenMetadataResponse {
   symbol: string;
 }
 
-interface RequiredEvmTokenMetadata extends EvmTokenMetadata {
+interface RequiredMetadata {
   name: string;
   symbol: string;
 }
 
+type RequiredEvmTokenMetadata = EvmTokenMetadata & RequiredMetadata;
+type RequiredEvmCollectibleMetadata = EvmCollectibleMetadata & RequiredMetadata;
+
 interface FormData {
   address: string;
   id?: string;
@@ -125,7 +128,7 @@ export const AddTokenForm = memo<AddTokenPageProps>(
 
     const attemptRef = useRef(0);
     const tezMetadataRef = useRef<RequiredTokenMetadataResponse>();
-    const evmMetadataRef = useRef<RequiredEvmTokenMetadata>();
+    const evmMetadataRef = useRef<RequiredEvmTokenMetadata | RequiredEvmCollectibleMetadata>();
 
     const loadMetadataPure = useCallback(async () => {
       if (!formValid) return;
@@ -173,10 +176,10 @@ export const AddTokenForm = memo<AddTokenPageProps>(
             ? fetchEvmCollectibleMetadataFromChain
             : fetchEvmTokenMetadataFromChain)(selectedNetwork, tokenSlug);
 
-          if (!metadata || !metadata.name || !metadata.symbol)
+          if (!metadata || !hasRequiredMetadata(metadata))
             throw new TokenMetadataNotFoundError('Failed to load token metadata');
 
-          evmMetadataRef.current = metadata as RequiredEvmTokenMetadata;
+          evmMetadataRef.current = metadata;
 
           stateToSet = { bottomSectionVisible: true };
         }
@@ -285,14 +288,16 @@ export const AddTokenForm = memo<AddTokenPageProps>(
               dispatch(
                 putEvmCollectiblesMetadataAction({
                   chainId: selectedNetwork.chainId,
-                  records: { [tokenSlug]: { ...evmMetadataRef.current, tokenId: id } }
+                  records: {
+                    [tokenSlug]: { ...(evmMetadataRef.current as RequiredEvmCollectibleMetadata), tokenId: id }
+                  }
                 })
               );
             else
               dispatch(
                 putEvmTokensMetadataAction({
                   chainId: selectedNetwork.chainId,
-                  records: { [tokenSlug]: evmMetadataRef.current }
+                  records: { [tokenSlug]: evmMetadataRef.current as RequiredEvmTokenMetadata }
                 })
               );
           }
@@ -422,6 +427,10 @@ export const AddTokenForm = memo<AddTokenPageProps>(
   }
 );
 
+const hasRequiredMetadata = (
+  metadata: EvmTokenMetadata | EvmCollectibleMetadata
+): metadata is RequiredEvmCollectibleMetadata | RequiredEvmTokenMetadata => Boolean(metadata.name && metadata.symbol);
+
 const errorHandler = (err: any, contractAddress: string) => {
   if (err instanceof ContractNotFoundError) {
     toastError(t('referredByTokenContractNotFound', contractAddress));

src/app/pages/Home/OtherComponents/Tokens/components/EvmChainTokensTab.tsx

@@ -67,13 +67,14 @@ const TabContentWithManageActive: FC<TabContentProps> = ({ publicKeyHash, networ
     hideZeroBalance
   );
 
+  const storedSlugs = useMemo(
+    () => tokens.filter(({ status }) => status !== 'removed').map(({ slug }) => slug),
+    [tokens]
+  );
+
   const allStoredSlugsSorted = useMemoWithCompare(
-    () =>
-      tokens
-        .filter(({ status }) => status !== 'removed')
-        .map(({ slug }) => slug)
-        .sort(tokensSortPredicate),
-    [tokens, tokensSortPredicate]
+    () => storedSlugs.sort(tokensSortPredicate),
+    [storedSlugs, tokensSortPredicate]
   );
 
   const allSlugsSorted = usePreservedOrderSlugsToManage(enabledSlugsSorted, allStoredSlugsSorted);