[WIP] update

Author: GuillaumeRx

packages/examples/packages/send-flow/src/components/SendFlow.tsx

@@ -1,11 +1,15 @@
+import type {
+  AccountSelectorState,
+  AssetSelectorState,
+} from '@metamask/snaps-sdk';
 import type { SnapComponent } from '@metamask/snaps-sdk/jsx';
 import { Box, Container } from '@metamask/snaps-sdk/jsx';
 
 import { SendFlowFooter } from './SendFlowFooter';
 import { SendFlowHeader } from './SendFlowHeader';
 import { SendForm } from './SendForm';
 import { TransactionSummary } from './TransactionSummary';
-import type { Account, Currency } from '../types';
+import type { Currency } from '../types';
 
 /**
  * The props for the {@link SendFlow} component.
@@ -17,42 +21,50 @@ import type { Account, Currency } from '../types';
  * @property displayAvatar - Whether to display the avatar of the address.
  */
 export type SendFlowProps = {
-  selectedCurrency: 'BTC' | '$';
+  displayAvatar?: boolean;
+  useFiat: boolean;
+  account: AccountSelectorState | null;
+  asset: AssetSelectorState | null;
   total: Currency;
   fees: Currency;
   errors?: {
     amount?: string;
     to?: string;
   };
-  displayAvatar?: boolean | undefined;
 };
 
 /**
  * A send flow component, which shows the user a form to send funds to another.
  *
  * @param props - The component props.
- * @param props.selectedCurrency - The selected currency to display.
  * @param props.total - The total cost of the transaction.
  * @param props.errors - The form errors.
  * @param props.fees - The fees for the transaction.
+ * @param props.useFiat - Whether to use fiat currency.
+ * @param props.account - The account state.
+ * @param props.asset - The asset state.
  * @param props.displayAvatar - Whether to display the avatar of the address.
  * @returns The SendFlow component.
  */
 export const SendFlow: SnapComponent<SendFlowProps> = ({
-  selectedCurrency,
   total,
   fees,
   errors,
+  useFiat,
   displayAvatar,
+  account,
+  asset,
 }) => {
   return (
     <Container>
       <Box>
         <SendFlowHeader />
         <SendForm
-          selectedCurrency={selectedCurrency}
-          errors={errors}
           displayAvatar={displayAvatar}
+          useFiat={useFiat}
+          account={account}
+          asset={asset}
+          errors={errors}
         />
         <TransactionSummary fees={fees} total={total} />
       </Box>

packages/examples/packages/send-flow/src/components/SendForm.tsx

@@ -1,18 +1,21 @@
+import type {
+  AccountSelectorState,
+  AssetSelectorState,
+} from '@metamask/snaps-sdk';
 import {
   Box,
   Button,
   Field,
   Form,
   Icon,
-  Image,
   Input,
   AddressInput,
   Text,
   AccountSelector,
   type SnapComponent,
+  AssetSelector,
 } from '@metamask/snaps-sdk/jsx';
 
-import btcIcon from '../images/btc.svg';
 import type { SendFormErrors } from '../types';
 
 /**
@@ -23,8 +26,10 @@ import type { SendFormErrors } from '../types';
  * @property displayAvatar - Whether to display the avatar of the address.
  */
 export type SendFormProps = {
+  useFiat: boolean;
   errors?: SendFormErrors;
-  selectedCurrency: 'BTC' | '$';
+  account: AccountSelectorState | null;
+  asset: AssetSelectorState | null;
   displayAvatar?: boolean | undefined;
 };
 
@@ -33,31 +38,48 @@ export type SendFormProps = {
  *
  * @param props - The component props.
  * @param props.errors - The form errors.
- * @param props.selectedCurrency - The selected currency to display.
  * @param props.displayAvatar - Whether to display the avatar of the address.
+ * @param props.account - The account state.
+ * @param props.asset - The asset state.
+ * @param props.useFiat - Whether to use fiat currency.
  * @returns The SendForm component.
  */
 export const SendForm: SnapComponent<SendFormProps> = ({
   errors,
-  selectedCurrency,
+  useFiat,
+  account,
+  asset,
   displayAvatar,
 }) => (
   <Form name="sendForm">
     <Field label="From account">
-      <AccountSelector name="accountSelector" switchGlobalAccount />
-    </Field>
-    <Field label="Send amount" error={errors?.amount}>
-      <Box>
-        <Image src={btcIcon} />
-      </Box>
-      <Input name="amount" type="number" placeholder="Enter amount to send" />
-      <Box direction="horizontal" center>
-        <Text color="alternative">{selectedCurrency}</Text>
-        <Button name="swap">
-          <Icon name="swap-vertical" color="primary" size="md" />
-        </Button>
-      </Box>
+      <AccountSelector
+        name="account"
+        switchGlobalAccount
+        chainIds={[
+          'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp',
+          'solana:EtWTRABZaYq6iMfeYKouRu166VU2xqa1',
+        ]}
+      />
     </Field>
+    <Box direction="horizontal">
+      {account ? (
+        <Field label="Asset">
+          <AssetSelector name="asset" addresses={account.addresses} />
+        </Field>
+      ) : null}
+      <Field label="Send amount" error={errors?.amount}>
+        <Input name="amount" type="number" placeholder="Enter amount to send" />
+        <Box direction="horizontal" center>
+          <Text color="alternative" size="sm">
+            {useFiat ? '$' : (asset?.symbol ?? 'SOL')}
+          </Text>
+          <Button name="swap" size="sm">
+            <Icon name="swap-vertical" color="primary" size="inherit" />
+          </Button>
+        </Box>
+      </Field>
+    </Box>
     <Field label="To account" error={errors?.to}>
       <AddressInput
         name="to"

packages/examples/packages/send-flow/src/index.tsx

@@ -3,6 +3,7 @@ import type {
   OnHomePageHandler,
   OnUserInputHandler,
   OnRpcRequestHandler,
+  AssetSelectorState,
 } from '@metamask/snaps-sdk';
 import { UserInputEventType } from '@metamask/snaps-sdk';
 
@@ -74,7 +75,7 @@ export const onUserInput: OnUserInputHandler = async ({
   id,
   context,
 }) => {
-  const { selectedCurrency, fees } = context as SendFlowContext;
+  const { useFiat, fees } = context as SendFlowContext;
 
   const state = await snap.request({
     method: 'snap_getInterfaceState',
@@ -93,47 +94,30 @@ export const onUserInput: OnUserInputHandler = async ({
   if (event.type === UserInputEventType.InputChangeEvent) {
     switch (event.name) {
       case 'amount':
-      case 'to': {
+      case 'to':
+      case 'account':
+      case 'asset': {
         await snap.request({
           method: 'snap_updateInterface',
           params: {
             id,
             ui: (
               <SendFlow
-                accounts={accountsArray}
-                selectedAccount={sendForm.accountSelector}
-                selectedCurrency={selectedCurrency}
+                asset={state.asset as AssetSelectorState}
+                account={sendForm.account}
+                useFiat={useFiat}
                 total={total}
                 fees={fees}
                 errors={formErrors}
                 // For testing purposes, we display the avatar if the address is
                 // a valid hex checksum address.
-                displayAvatar={isCaipHexAddress(event.value)}
+                displayAvatar={isCaipHexAddress(state.to)}
               />
             ),
           },
         });
         break;
       }
-
-      case 'accountSelector': {
-        await snap.request({
-          method: 'snap_updateInterface',
-          params: {
-            id,
-            ui: (
-              <SendFlow
-                selectedCurrency={selectedCurrency}
-                total={total}
-                fees={fees}
-                errors={formErrors}
-              />
-            ),
-          },
-        });
-
-        break;
-      }
       default:
         break;
     }

packages/examples/packages/send-flow/src/types.ts

@@ -1,4 +1,7 @@
-import type { AccountSelectorValue } from '@metamask/snaps-sdk';
+import type {
+  AccountSelectorState,
+  AssetSelectorState,
+} from '@metamask/snaps-sdk';
 
 /**
  * The state of the send form.
@@ -10,7 +13,8 @@ import type { AccountSelectorValue } from '@metamask/snaps-sdk';
 export type SendFormState = {
   to: string;
   amount: string;
-  accountSelector: AccountSelectorValue;
+  account: AccountSelectorState | null;
+  asset: AssetSelectorState | null;
 };
 
 /**
@@ -43,6 +47,6 @@ export type Currency = {
  * @property fees - The fees for the transaction.
  */
 export type SendFlowContext = {
-  selectedCurrency: 'BTC' | '$';
+  useFiat: boolean;
   fees: Currency;
 };

packages/examples/packages/send-flow/src/utils.tsx

@@ -26,7 +26,9 @@ export async function generateSendFlow({ fees }: GenerateSendFlowParams) {
     params: {
       ui: (
         <SendFlow
-          selectedCurrency="BTC"
+          useFiat={false}
+          account={null}
+          asset={null}
           total={{ amount: 0, fiat: 0 }}
           fees={fees}
         />

packages/snaps-controllers/src/interface/SnapInterfaceController.test.tsx

@@ -28,6 +28,7 @@ import { MOCK_SNAP_ID } from '@metamask/snaps-utils/test-utils';
 
 import { SnapInterfaceController } from './SnapInterfaceController';
 import {
+  MOCK_ACCOUNT_ID,
   MockApprovalController,
   getRestrictedSnapInterfaceControllerMessenger,
   getRootSnapInterfaceControllerMessenger,
@@ -225,7 +226,7 @@ describe('SnapInterfaceController', () => {
               <AccountSelector
                 name="baz"
                 switchGlobalAccount
-                value="eip155:0:0x1234567890123456789012345678901234567890"
+                value="solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp:7S3P4HxJpyyigGzodYwHtCxZyUQe9JiBMHyRWXArAaKv"
               />
             </Field>
             <Field label="foobar">
@@ -256,13 +257,13 @@ describe('SnapInterfaceController', () => {
       expect(rootMessenger.call).toHaveBeenNthCalledWith(
         4,
         'AccountsController:getAccountByAddress',
-        '0x1234567890123456789012345678901234567890',
+        '7S3P4HxJpyyigGzodYwHtCxZyUQe9JiBMHyRWXArAaKv',
       );
 
       expect(rootMessenger.call).toHaveBeenNthCalledWith(
         5,
         'AccountsController:setSelectedAccount',
-        'foo',
+        MOCK_ACCOUNT_ID,
       );
 
       expect(rootMessenger.call).toHaveBeenNthCalledWith(
@@ -275,11 +276,13 @@ describe('SnapInterfaceController', () => {
         foo: {
           bar: null,
           baz: {
-            accountId: 'foo',
-            addresses: ['eip155:0:0x1234567890123456789012345678901234567890'],
+            accountId: MOCK_ACCOUNT_ID,
+            addresses: [
+              'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp:7S3P4HxJpyyigGzodYwHtCxZyUQe9JiBMHyRWXArAaKv',
+            ],
           },
           foobar: {
-            accountId: 'foo',
+            accountId: MOCK_ACCOUNT_ID,
             addresses: ['eip155:0:0x1234567890123456789012345678901234567890'],
           },
         },
@@ -1361,7 +1364,7 @@ describe('SnapInterfaceController', () => {
 
       // TODO: Either fix this lint violation or explain why it's necessary to
       //  ignore.
-
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
       rootMessenger.call(
         'SnapInterfaceController:resolveInterface',
         MOCK_SNAP_ID,