feat: Add support for AssetSelector and AccountSelector in snaps-jest

packages/examples/packages/send-flow/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "/yjbhUdBhF3sOsQJ4WEy3T+lNtTh1L+B+zqoCoJ4EjQ=",
+    "shasum": "t2VeohT74VJief0KmSyEo1EJQV+DOgs5QFn1WtvgLww=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",
@@ -21,7 +21,8 @@
       "dapps": true
     },
     "snap_dialog": {},
-    "endowment:page-home": {}
+    "endowment:page-home": {},
+    "snap_getPreferences": {}
   },
   "platformVersion": "8.1.0",
   "manifestVersion": "0.1"

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

@@ -1,27 +1,32 @@
+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.
  *
  * @property accounts - The available accounts.
- * @property selectedAccount - The currently selected account.
- * @property selectedCurrency - The selected currency to display.
+ * @property asset - The selected asset to display.
  * @property total - The total cost of the transaction.
+ * @property useFiat - Whether to use fiat currency.
  * @property fees - The fees for the transaction.
  * @property errors - The form errors.
  * @property displayAvatar - Whether to display the avatar of the address.
  */
 export type SendFlowProps = {
-  accounts: Account[];
-  selectedAccount: string;
-  selectedCurrency: 'BTC' | '$';
+  account?: AccountSelectorState;
+  asset?: AssetSelectorState;
+  useFiat: boolean;
+  fiatCurrency: string;
   total: Currency;
   fees: Currency;
   errors?: {
@@ -35,19 +40,21 @@ export type SendFlowProps = {
  * A send flow component, which shows the user a form to send funds to another.
  *
  * @param props - The component props.
- * @param props.accounts - The available accounts.
- * @param props.selectedAccount - The currently selected account.
- * @param props.selectedCurrency - The selected currency to display.
+ * @param props.account - The account to use.
+ * @param props.asset - The asset to use.
+ * @param props.useFiat - Whether to use fiat currency.
+ * @param props.fiatCurrency - The fiat currency to use.
  * @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.displayAvatar - Whether to display the avatar of the address.
  * @returns The SendFlow component.
  */
 export const SendFlow: SnapComponent<SendFlowProps> = ({
-  accounts,
-  selectedAccount,
-  selectedCurrency,
+  account,
+  asset,
+  useFiat,
+  fiatCurrency,
   total,
   fees,
   errors,
@@ -58,9 +65,10 @@ export const SendFlow: SnapComponent<SendFlowProps> = ({
       <Box>
         <SendFlowHeader />
         <SendForm
-          selectedAccount={selectedAccount}
-          accounts={accounts}
-          selectedCurrency={selectedCurrency}
+          account={account}
+          fiatCurrency={fiatCurrency}
+          asset={asset}
+          useFiat={useFiat}
           errors={errors}
           displayAvatar={displayAvatar}
         />

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

@@ -1,76 +1,111 @@
+import type {
+  AccountSelectorState,
+  AssetSelectorState,
+} from '@metamask/snaps-sdk';
 import {
   Box,
   Button,
   Field,
   Form,
   Icon,
-  Image,
   Input,
   AddressInput,
   Text,
   type SnapComponent,
+  AccountSelector,
+  AssetSelector,
 } from '@metamask/snaps-sdk/jsx';
 
-import { AccountSelector } from './AccountSelector';
-import btcIcon from '../images/btc.svg';
-import type { Account, SendFormErrors } from '../types';
+import type { SendFormErrors } from '../types';
 
 /**
  * The props for the {@link SendForm} component.
  *
- * @property selectedAccount - The currently selected account.
- * @property accounts - The available accounts.
+ * @property account - The selected account.
+ * @property asset - The selected asset to display.
+ * @property useFiat - Whether to use fiat currency.
+ * @property fiatCurrency - The fiat currency to use.
  * @property errors - The form errors.
- * @property selectedCurrency - The selected currency to display.
  * @property displayAvatar - Whether to display the avatar of the address.
  */
 export type SendFormProps = {
-  selectedAccount: string;
-  accounts: Account[];
+  account?: AccountSelectorState;
+  asset?: AssetSelectorState;
+  useFiat: boolean;
+  fiatCurrency: string;
   errors?: SendFormErrors;
-  selectedCurrency: 'BTC' | '$';
   displayAvatar?: boolean | undefined;
 };
 
 /**
  * A component that shows the send form.
  *
  * @param props - The component props.
- * @param props.selectedAccount - The currently selected account.
- * @param props.accounts - The available accounts.
+ * @param props.account - The account to use.
+ * @param props.asset - The asset to use.
  * @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.useFiat - Whether to use fiat currency.
+ * @param props.fiatCurrency - The fiat currency to use.
  * @returns The SendForm component.
  */
 export const SendForm: SnapComponent<SendFormProps> = ({
-  selectedAccount,
-  accounts,
+  account,
+  asset,
   errors,
-  selectedCurrency,
   displayAvatar,
-}) => (
-  <Form name="sendForm">
-    <AccountSelector selectedAccount={selectedAccount} accounts={accounts} />
-    <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>
-    </Field>
-    <Field label="To account" error={errors?.to}>
-      <AddressInput
-        name="to"
-        chainId="eip155:0"
-        placeholder="Enter receiving address"
-        displayAvatar={displayAvatar}
+  fiatCurrency,
+  useFiat,
+}) => {
+  const currencySymbol = useFiat
+    ? fiatCurrency.toUpperCase()
+    : (asset?.symbol ?? 'SOL');
+
+  return (
+    <Form name="sendForm">
+      <AccountSelector
+        switchGlobalAccount
+        name="account"
+        chainIds={[
+          'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp',
+          'solana:EtWTRABZaYq6iMfeYKouRu166VU2xqa1',
+        ]}
       />
-    </Field>
-  </Form>
-);
+      <Box direction="horizontal">
+        {account ? (
+          <Field label="Asset">
+            <AssetSelector
+              name="asset"
+              addresses={account.addresses}
+              chainIds={[
+                'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp',
+                'solana:EtWTRABZaYq6iMfeYKouRu166VU2xqa1',
+              ]}
+            />
+          </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">{currencySymbol}</Text>
+            <Button name="swap">
+              <Icon name="swap-vertical" color="primary" size="md" />
+            </Button>
+          </Box>
+        </Field>
+      </Box>
+      <Field label="To account" error={errors?.to}>
+        <AddressInput
+          name="to"
+          chainId="eip155:0"
+          placeholder="Enter receiving address"
+          displayAvatar={displayAvatar}
+        />
+      </Field>
+    </Form>
+  );
+};