fix: console error issue when no nonZero balances

PolkaGate · Jan 29, 2025 · 970edb1 · 970edb1
1 parent 69d383a
commit 970edb1
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 41 deletions.
diff --git a/packages/snap/snap.manifest.json b/packages/snap/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/polkagate/snap.git"
   },
   "source": {
-    "shasum": "fgwphLpIVVmc5eMEPvnIMG3nvqJEIO2KOdoWeyR0PJA=",
+    "shasum": "87YP0SaD+aVCL7sNXBS+d87d/Z0IrbWEFe8rnp7tWj0=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/snap/src/listeners/onUserInput.tsx b/packages/snap/src/listeners/onUserInput.tsx
@@ -158,7 +158,7 @@ export const onUserInput: OnUserInputHandler = async ({ id, event, context }) =>
           const clearAddress = event.name === 'clear';
           const displayClearIcon = !clearAddress && sendForm && Boolean(sendForm.to) && sendForm.to !== '';
 
-          await send(id, context, sendForm?.amount, formErrors, sendForm?.to, sendForm?.tokenSelector, displayClearIcon, clearAddress);
+          await send(id, context, sendForm?.amount, formErrors, sendForm?.to?.trim(), sendForm?.tokenSelector, displayClearIcon, clearAddress);
           break;
         }
 

diff --git a/packages/snap/src/ui/send/components/SendForm.tsx b/packages/snap/src/ui/send/components/SendForm.tsx
@@ -1,15 +1,4 @@
-import {
-  Avatar,
-  Box,
-  Button,
-  Field,
-  Form,
-  Icon,
-  Image,
-  Input,
-  Text,
-  type SnapComponent,
-} from '@metamask/snaps-sdk/jsx';
+import { Avatar, Box, Button, Field, Form, Icon, Image, Input, Text, type SnapComponent } from '@metamask/snaps-sdk/jsx';
 
 import jazzicon1 from '../../image/jazzicon/jazzicon1.svg';
 import { TokenSelector } from './TokenSelector';
@@ -25,30 +14,30 @@ export type SendFormProps = {
     genesisHash: string;
     logo: string;
   }[];
-  nonZeroBalances: Balances[];
+  tokensToList: Balances[] | undefined;
   pricesInUsd: { genesisHash: string, price: PriceValue }[];
   recipient: string | undefined;
-  selectedToken: Balances;
+  selectedToken: Balances | undefined;
 };
 
 export const SendForm: SnapComponent<SendFormProps> = ({
   clearAddress,
   displayClearIcon,
   formErrors,
   logos,
-  nonZeroBalances,
+  tokensToList,
   pricesInUsd,
   recipient,
   selectedToken
 }) => {
 
-  const _selectedToken = selectedToken || nonZeroBalances[0];
+  const _selectedToken = selectedToken || tokensToList?.[0];
 
   return (
     <Form name='sendForm'>
       <TokenSelector
         selectedToken={_selectedToken}
-        nonZeroBalances={nonZeroBalances}
+        tokensToList={tokensToList}
         logos={logos}
         pricesInUsd={pricesInUsd}
       />
@@ -63,7 +52,7 @@ export const SendForm: SnapComponent<SendFormProps> = ({
         />
         <Box direction='horizontal' center>
           <Text color='alternative'>
-            {_selectedToken.token}
+            {_selectedToken?.token || 'Unknown'}
           </Text>
         </Box>
       </Field>

diff --git a/packages/snap/src/ui/send/components/TokenSelector.tsx b/packages/snap/src/ui/send/components/TokenSelector.tsx
@@ -12,13 +12,12 @@ import { amountToHuman } from '../../../util/amountToHuman';
 
 /**
  * The props for the {@link AccountSelector} component.
- *
  * @property selectedAccount - The currently selected account.
  * @property accounts - The available accounts.
  */
 export type TokenSelectorProps = {
-  nonZeroBalances: Balances[],
-  selectedToken: Balances,
+  tokensToList: Balances[] | undefined,
+  selectedToken: Balances | undefined,
   pricesInUsd: { genesisHash: string, price: PriceValue }[];
   logos: {
     genesisHash: string;
@@ -27,7 +26,7 @@ export type TokenSelectorProps = {
 };
 
 export const TokenSelector: SnapComponent<TokenSelectorProps> = ({
-  nonZeroBalances,
+  tokensToList,
   selectedToken,
   logos,
   pricesInUsd
@@ -38,9 +37,9 @@ export const TokenSelector: SnapComponent<TokenSelectorProps> = ({
       <Selector
         name="tokenSelector"
         title="Select token"
-        value={`${selectedToken.token},${selectedToken.genesisHash}`}
+        value={`${selectedToken?.token},${selectedToken?.genesisHash}`}
       >
-        {nonZeroBalances.map(({ decimal, token, genesisHash, transferable }) => {
+        {(tokensToList || []).map(({ decimal, token, genesisHash, transferable }) => {
           const icon = logos.find((logo) => logo.genesisHash === genesisHash)?.logo;
           const price = pricesInUsd.find((item) => item.genesisHash === genesisHash)?.price.value || 0;
           const transferableInUsd = parseFloat(amountToHuman(transferable, decimal)) * price;

diff --git a/packages/snap/src/ui/send/index.tsx b/packages/snap/src/ui/send/index.tsx
@@ -10,14 +10,15 @@ import type { Balance } from "@polkadot/types/interfaces";
 import { FlowHeader } from "../components/FlowHeader";
 import { getTransfer } from "./utils/getTransfer";
 import type { Balances } from "../../util";
+import { PriceValue } from "../../util/getPrices";
 
 const ui = (
   fee: Balance | undefined,
-  nonZeroBalances: Balances[],
-  logos,
-  pricesInUsd,
+  tokensToList: Balances[] | undefined,
+  logos: { genesisHash: HexString; logo: string; }[],
+  pricesInUsd: { genesisHash: HexString; price: PriceValue; }[],
   recipient: string | undefined,
-  selectedToken: Balances,
+  selectedToken: Balances | undefined,
   formErrors: SendFormErrors,
   displayClearIcon: boolean | undefined,
   clearAddress: boolean | undefined,
@@ -38,12 +39,12 @@ const ui = (
           displayClearIcon={displayClearIcon}
           formErrors={formErrors}
           logos={logos}
-          nonZeroBalances={nonZeroBalances}
+          tokensToList={tokensToList}
           pricesInUsd={pricesInUsd}
           selectedToken={selectedToken}
           recipient={recipient}
         />
-        {!!fee &&
+        {!!fee && !!selectedToken &&
           <TransactionSummary
             decimal={selectedToken.decimal}
             fee={fee}
@@ -72,10 +73,11 @@ export async function send(
 ) {
 
   const { address, balancesAll, logos, pricesInUsd } = await handleBalancesAll(BALANCE_FETCH_TYPE.SAVED_ONLY);
-  const nonZeroBalances = balancesAll.filter(({ total }) => !total.isZero());
+  const maybeNonZeroBalances = balancesAll.filter(({ total }) => !total.isZero());
+  const tokensToList = maybeNonZeroBalances?.length ? maybeNonZeroBalances : balancesAll;
   const tokenGenesis = selectedTokenGenesisHash?.split(',');
   const maybeSelectedToken = tokenGenesis && balancesAll.find(({ token, genesisHash }) => tokenGenesis[0] === token && tokenGenesis[1] === genesisHash);
-  const selectedToken = maybeSelectedToken || nonZeroBalances[0];
+  const selectedToken = maybeSelectedToken || tokensToList?.[0];
   const noError = !formErrors || Object.keys(formErrors).length === 0;
   const formIsFilledOut = !!amount && Number(amount) !== 0 && !!recipient;
 
@@ -84,27 +86,27 @@ export async function send(
     : undefined;
 
   const total: number =
-    (fee ? Number(amountToHuman(fee, selectedToken.decimal)) : 0) +
+    (fee && selectedToken ? Number(amountToHuman(fee, selectedToken.decimal)) : 0) +
     (amount ? Number(amount) : 0);
 
-  const selectedTokenPrice = pricesInUsd.find((price) => price.genesisHash === selectedToken.genesisHash)?.price?.value || 0;
+  const selectedTokenPrice = pricesInUsd.find((price) => price.genesisHash === selectedToken?.genesisHash)?.price?.value || 0;
 
   await snap.request({
     method: 'snap_updateInterface',
     params: {
       id,
-      ui: ui(fee, nonZeroBalances, logos, pricesInUsd, recipient, selectedToken, formErrors, displayClearIcon, clearAddress, selectedTokenPrice, total),
+      ui: ui(fee, tokensToList, logos, pricesInUsd, recipient, selectedToken, formErrors, displayClearIcon, clearAddress, selectedTokenPrice, total),
       context: {
         ...(context ?? {}),
         address,
         amount,
-        decimal: selectedToken.decimal,
+        decimal: selectedToken?.decimal,
         fee: fee ? fee?.toString() : undefined,
-        genesisHash: selectedToken.genesisHash,
+        genesisHash: selectedToken?.genesisHash,
         price: selectedTokenPrice,
         recipient,
-        token: selectedToken.token,
-        transferable: selectedToken.transferable.toString(),
+        token: selectedToken?.token,
+        transferable: selectedToken?.transferable?.toString(),
       }
     },
   });