feat: AccountSelector

packages/examples/packages/browserify-plugin/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "t/mItLdi/miIU7FWJjijmmaFT/5svN1dK4Ik+1LMbqw=",
+    "shasum": "KjwC6jkBcnAui2Jmq6KN0Qwk7jYXdCLchANymyK09TE=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/browserify/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "3kC/z0z6RjjarArtxcs+iltJRQgvZNIPBueMP0cLQJw=",
+    "shasum": "Ts0bhDgT3g1QhIpQKPUUPp5//WpIHHEo12Y19llvJKc=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/dialogs/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "asBcwQ0fIXFCZ6skpbENtZiyskGDEdEIrAbWkOvEQ0s=",
+    "shasum": "eZ18Dl535QE/pwY5v43q+I3diqp3dLLpl3LUMxkSdZE=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/file-upload/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "cVHHqNAq33UzS3K9AQEFn/P/qA9IF/v2Ru4Wp4Prolw=",
+    "shasum": "ORqLuWaD4ejU2RfyIJ+5EoSVV63PiNKFoa4pedii5XU=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/home-page/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "jsrLxUR5DtPf/77zAm3jiCCPqOg8YZRF7vsYgEim+vg=",
+    "shasum": "j5iBI5gEtOZ6C5/aMGQFh4v87CW+wH8m9/liqGSEXyM=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/interactive-ui/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "2XAIve/Nn/RGKdyrooukRjz+ixn0c9n10gqme9HGJxY=",
+    "shasum": "U2cdlR15dCGYAukUDMzSfAPl3aKblq+ksp2GhGcUyI8=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/jsx/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "slB8CHO9cqeUog9kw6E0ODJf6Dkcm05/GQ+vDLxvAas=",
+    "shasum": "92DiSLz5bXBSG4778ra3U2zjvhslOp0JsaMCJpOmUo8=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/preinstalled/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "nMtsXN1K9BkY6zSrF8nii2pxbKBpWaAq7eUOOZ04ajs=",
+    "shasum": "PN/6w6gGQyRKRpc+Alj1E+YBKBBsviVkPJgLvStAZBo=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

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

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "KZtEm+Gz8nWwCiyEtiQRmnVvp0J5F91e/bUWY1rJUNI=",
+    "shasum": "CRqvgPhhWzcZlFnly2XWaI+6ZAda5nkD9XIi4BjotQ0=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

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

@@ -1,7 +1,7 @@
 import type { SnapComponent } from '@metamask/snaps-sdk/jsx';
 import { Box, Container } from '@metamask/snaps-sdk/jsx';
 
-import type { Account, Currency } from '../types';
+import type { Currency } from '../types';
 import { SendFlowFooter } from './SendFlowFooter';
 import { SendFlowHeader } from './SendFlowHeader';
 import { SendForm } from './SendForm';
@@ -10,8 +10,6 @@ import { TransactionSummary } from './TransactionSummary';
 /**
  * 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 total - The total cost of the transaction.
  * @property fees - The fees for the transaction.
@@ -20,8 +18,6 @@ import { TransactionSummary } from './TransactionSummary';
  * @property errors - The form errors.
  */
 export type SendFlowProps = {
-  accounts: Account[];
-  selectedAccount: string;
   selectedCurrency: 'BTC' | '$';
   total: Currency;
   fees: Currency;
@@ -37,8 +33,6 @@ 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.total - The total cost of the transaction.
  * @param props.errors - The form errors.
@@ -48,8 +42,6 @@ export type SendFlowProps = {
  * @returns The SendFlow component.
  */
 export const SendFlow: SnapComponent<SendFlowProps> = ({
-  accounts,
-  selectedAccount,
   selectedCurrency,
   total,
   fees,
@@ -62,8 +54,6 @@ export const SendFlow: SnapComponent<SendFlowProps> = ({
       <Box>
         <SendFlowHeader />
         <SendForm
-          selectedAccount={selectedAccount}
-          accounts={accounts}
           selectedCurrency={selectedCurrency}
           flushToAddress={flushToAddress}
           displayClearIcon={displayClearIcon}

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

@@ -7,27 +7,23 @@ import {
   Image,
   Input,
   Text,
+  AccountSelector,
   type SnapComponent,
 } from '@metamask/snaps-sdk/jsx';
 
 import btcIcon from '../images/btc.svg';
 import jazzicon3 from '../images/jazzicon3.svg';
-import type { Account, SendFormErrors } from '../types';
-import { AccountSelector } from './AccountSelector';
+import type { SendFormErrors } from '../types';
 
 /**
  * The props for the {@link SendForm} component.
  *
- * @property selectedAccount - The currently selected account.
- * @property accounts - The available accounts.
  * @property errors - The form errors.
  * @property selectedCurrency - The selected currency to display.
  * @property displayClearIcon - Whether to display the clear icon or not.
  * @property flushToAddress - Whether to flush the address field or not.
  */
 export type SendFormProps = {
-  selectedAccount: string;
-  accounts: Account[];
   errors?: SendFormErrors;
   selectedCurrency: 'BTC' | '$';
   displayClearIcon: boolean;
@@ -38,24 +34,22 @@ export type SendFormProps = {
  * 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.errors - The form errors.
  * @param props.selectedCurrency - The selected currency to display.
  * @param props.displayClearIcon - Whether to display the clear icon or not.
  * @param props.flushToAddress - Whether to flush the address field or not.
  * @returns The SendForm component.
  */
 export const SendForm: SnapComponent<SendFormProps> = ({
-  selectedAccount,
-  accounts,
   errors,
   selectedCurrency,
   displayClearIcon,
   flushToAddress,
 }) => (
   <Form name="sendForm">
-    <AccountSelector selectedAccount={selectedAccount} accounts={accounts} />
+    <Field label="From account">
+      <AccountSelector name="accountSelector" switchGlobalAccount />
+    </Field>
     <Field label="Send amount" error={errors?.amount}>
       <Box>
         <Image src={btcIcon} />

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

@@ -9,7 +9,6 @@ import {
 } from '@metamask/snaps-sdk';
 
 import { SendFlow } from './components';
-import { accountsArray, accounts } from './data';
 import type { SendFormState, SendFlowContext } from './types';
 import { formValidation, generateSendFlow } from './utils';
 
@@ -28,8 +27,6 @@ export const onRpcRequest: OnRpcRequestHandler = async ({ request }) => {
   switch (request.method) {
     case 'display': {
       const interfaceId = await generateSendFlow({
-        accountsArray,
-        accounts,
         fees: { amount: 1.0001, fiat: 1.23 },
       });
 
@@ -58,8 +55,6 @@ export const onRpcRequest: OnRpcRequestHandler = async ({ request }) => {
  */
 export const onHomePage: OnHomePageHandler = async () => {
   const interfaceId = await generateSendFlow({
-    accountsArray,
-    accounts,
     fees: { amount: 1.0001, fiat: 1.23 },
   });
 
@@ -90,7 +85,7 @@ export const onUserInput: OnUserInputHandler = async ({
 
   const sendForm = state.sendForm as SendFormState;
 
-  const formErrors = formValidation(sendForm, context as SendFlowContext);
+  const formErrors = formValidation(sendForm);
 
   const total = {
     amount: Number(sendForm.amount ?? 0) + fees.amount,
@@ -108,8 +103,6 @@ export const onUserInput: OnUserInputHandler = async ({
             id,
             ui: (
               <SendFlow
-                accounts={accountsArray}
-                selectedAccount={sendForm.accountSelector}
                 selectedCurrency={selectedCurrency}
                 total={total}
                 fees={fees}
@@ -134,8 +127,6 @@ export const onUserInput: OnUserInputHandler = async ({
             id,
             ui: (
               <SendFlow
-                accounts={accountsArray}
-                selectedAccount={sendForm.accountSelector}
                 selectedCurrency={selectedCurrency}
                 total={total}
                 fees={fees}

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

@@ -1,3 +1,5 @@
+import type { AccountSelectorValue } from '@metamask/snaps-sdk';
+
 /**
  * The state of the send form.
  *
@@ -8,7 +10,7 @@
 export type SendFormState = {
   to: string;
   amount: string;
-  accountSelector: string;
+  accountSelector: AccountSelectorValue;
 };
 
 /**
@@ -22,21 +24,6 @@ export type SendFormErrors = {
   amount?: string;
 };
 
-/**
- * An Account of the send flow interface.
- *
- * @property name - The name of the account.
- * @property address - The address of the account.
- * @property balance - The balance of the account.
- * @property icon - The icon of the account.
- */
-export type Account = {
-  name: string;
-  address: string;
-  balance: Currency;
-  icon: string;
-};
-
 /**
  * A currency value.
  *
@@ -56,7 +43,6 @@ export type Currency = {
  * @property fees - The fees for the transaction.
  */
 export type SendFlowContext = {
-  accounts: Record<string, Account>;
   selectedCurrency: 'BTC' | '$';
   fees: Currency;
 };