TW-1387 Implement sending EVM tokens

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/ListItem.tsx

@@ -9,7 +9,7 @@ import { setEvmTokenStatusAction } from 'app/store/evm/assets/actions';
 import { useStoredEvmTokenSelector } from 'app/store/evm/assets/selectors';
 import { setTezosTokenStatusAction } from 'app/store/tezos/assets/actions';
 import { useStoredTezosTokenSelector } from 'app/store/tezos/assets/selectors';
-import { EvmTokenIconWithNetwork, TezosTokenIconWithNetwork } from 'app/templates/AssetIcon';
+import { EvmAssetIconWithNetwork, TezosTokenIconWithNetwork } from 'app/templates/AssetIcon';
 import { DeleteAssetModal } from 'app/templates/remove-asset-modal/delete-asset-modal';
 import { setAnotherSelector } from 'lib/analytics';
 import { EVM_TOKEN_SLUG, TEZ_TOKEN_SLUG } from 'lib/assets/defaults';
@@ -237,7 +237,7 @@ export const EvmListItem = memo<EvmListItemProps>(
       return (
         <>
           <div className={classNameMemo} onClick={onClick}>
-            <EvmTokenIconWithNetwork evmChainId={chainId} assetSlug={assetSlug} className="shrink-0" />
+            <EvmAssetIconWithNetwork evmChainId={chainId} assetSlug={assetSlug} className="shrink-0" />
 
             <div className="flex-grow flex gap-x-2 items-center overflow-hidden">
               <div className="flex-grow flex flex-col gap-y-1 overflow-hidden">
@@ -274,7 +274,7 @@ export const EvmListItem = memo<EvmListItemProps>(
         testIDProperties={{ key: assetSlug }}
         {...setAnotherSelector('name', assetName)}
       >
-        <EvmTokenIconWithNetwork evmChainId={chainId} assetSlug={assetSlug} className="shrink-0" />
+        <EvmAssetIconWithNetwork evmChainId={chainId} assetSlug={assetSlug} className="shrink-0" />
 
         <div className="flex-grow flex flex-col gap-y-1 overflow-hidden">
           <div className="flex gap-x-4">

src/app/pages/Send/build-basic-evm-send-params.ts

@@ -0,0 +1,64 @@
+import { encodeFunctionData, erc20Abi, erc721Abi, parseEther, parseUnits } from 'viem';
+
+import { erc1155Abi } from 'lib/abi/erc1155';
+import { EvmAssetStandard } from 'lib/evm/types';
+import { EvmAssetMetadata } from 'lib/metadata/types';
+import { isEvmNativeTokenSlug } from 'lib/utils/evm.utils';
+
+interface BasicEvmSendParams {
+  to: HexString;
+  value: bigint;
+  data?: HexString;
+}
+
+/**
+ * Builds parameters for sending a EVM token or ETH.
+ * @param sender Tokens sender address.
+ * @param receiver Tokens receiver address.
+ * @param assetMetadata Token metadata
+ * @param amount Amount to send, the default value is one 'atomic' unit.
+ * @returns Parameters for sending a EVM token or ETH.
+ */
+export const buildBasicEvmSendParams = (
+  sender: HexString,
+  receiver: HexString,
+  assetMetadata: EvmAssetMetadata,
+  amount?: string
+): BasicEvmSendParams => {
+  let value = BigInt(0);
+  let data: HexString | undefined;
+
+  const atomicAmount = amount ? parseUnits(amount, assetMetadata.decimals ?? 0) : BigInt(1);
+  switch (assetMetadata.standard) {
+    case EvmAssetStandard.NATIVE:
+      value = amount ? parseEther(amount) : BigInt(1);
+      break;
+    case EvmAssetStandard.ERC20:
+      data = encodeFunctionData({
+        abi: erc20Abi,
+        args: [receiver, atomicAmount],
+        functionName: 'transfer'
+      });
+      break;
+    case EvmAssetStandard.ERC721:
+      data = encodeFunctionData({
+        abi: erc721Abi,
+        args: [sender, receiver, BigInt(assetMetadata.tokenId)],
+        functionName: 'safeTransferFrom'
+      });
+      break;
+    case EvmAssetStandard.ERC1155:
+      data = encodeFunctionData({
+        abi: erc1155Abi,
+        args: [sender, receiver, BigInt(assetMetadata.tokenId), atomicAmount, '0x'],
+        functionName: 'safeTransferFrom'
+      });
+      break;
+    default:
+      throw new Error('Unsupported EVM token standard');
+  }
+
+  const to = isEvmNativeTokenSlug(assetMetadata.address) ? receiver : assetMetadata?.address ?? receiver;
+
+  return { to, value, data };
+};

src/app/pages/Send/form/EvmForm.tsx

@@ -6,10 +6,11 @@ import { FormProvider, useForm } from 'react-hook-form-v7';
 import { formatEther, isAddress } from 'viem';
 
 import { DeadEndBoundaryError } from 'app/ErrorBoundary';
+import { useEvmCollectibleMetadataSelector } from 'app/store/evm/collectibles-metadata/selectors';
 import { useEvmTokenMetadataSelector } from 'app/store/evm/tokens-metadata/selectors';
 import { useFormAnalytics } from 'lib/analytics';
 import { EVM_TOKEN_SLUG } from 'lib/assets/defaults';
-import { useEvmTokenBalance } from 'lib/balances/hooks';
+import { useEvmAssetBalance } from 'lib/balances/hooks';
 import { useAssetFiatCurrencyPrice } from 'lib/fiat-currency';
 import { t, toLocalFixed } from 'lib/i18n';
 import { getAssetSymbol } from 'lib/metadata';
@@ -41,8 +42,11 @@ export const EvmForm: FC<Props> = ({ chainId, assetSlug, onSelectAssetClick, onR
 
   if (!account || !network) throw new DeadEndBoundaryError();
 
-  const storedMetadata = useEvmTokenMetadataSelector(network.chainId, assetSlug);
-  const assetMetadata = isEvmNativeTokenSlug(assetSlug) ? network?.currency : storedMetadata;
+  const storedTokenMetadata = useEvmTokenMetadataSelector(network.chainId, assetSlug);
+  const storedCollectibleMetadata = useEvmCollectibleMetadataSelector(network.chainId, assetSlug);
+  const assetMetadata = isEvmNativeTokenSlug(assetSlug)
+    ? network?.currency
+    : storedTokenMetadata ?? storedCollectibleMetadata;
 
   if (!assetMetadata) throw new Error('Metadata not found');
 
@@ -53,8 +57,8 @@ export const EvmForm: FC<Props> = ({ chainId, assetSlug, onSelectAssetClick, onR
 
   const formAnalytics = useFormAnalytics('SendForm');
 
-  const { value: balance = ZERO } = useEvmTokenBalance(assetSlug, accountPkh, network);
-  const { value: ethBalance = ZERO } = useEvmTokenBalance(EVM_TOKEN_SLUG, accountPkh, network);
+  const { value: balance = ZERO } = useEvmAssetBalance(assetSlug, accountPkh, network);
+  const { value: ethBalance = ZERO } = useEvmAssetBalance(EVM_TOKEN_SLUG, accountPkh, network);
 
   const [shouldUseFiat, setShouldUseFiat] = useSafeState(false);