From 16d5acc25415079e7f5b8eb6e4eb22e35e47155b Mon Sep 17 00:00:00 2001
From: Guillaume Roux <hello@guillaumerx.fr>
Date: Mon, 3 Feb 2025 14:26:57 +0100
Subject: [PATCH 01/27] [WIP] `AccountSelector`

---
 .../dialogs/src/components/custom.tsx         |   3 +-
 .../src/interface/SnapInterfaceController.ts  |  14 +++
 .../snaps-controllers/src/interface/utils.ts  |  67 ++++++++++-
 .../components/form/AccountSelector.test.tsx  | 106 ++++++++++++++++++
 .../jsx/components/form/AccountSelector.ts    |  59 ++++++++++
 .../src/jsx/components/form/index.ts          |   2 +
 .../snaps-sdk/src/jsx/validation.test.tsx     |  67 +++++++++++
 packages/snaps-sdk/src/jsx/validation.ts      |  22 ++++
 .../src/types/handlers/user-input.ts          |  31 ++++-
 packages/snaps-sdk/src/types/interface.ts     |   7 +-
 yarn.lock                                     |  53 +++++++++
 11 files changed, 422 insertions(+), 9 deletions(-)
 create mode 100644 packages/snaps-sdk/src/jsx/components/form/AccountSelector.test.tsx
 create mode 100644 packages/snaps-sdk/src/jsx/components/form/AccountSelector.ts

diff --git a/packages/examples/packages/dialogs/src/components/custom.tsx b/packages/examples/packages/dialogs/src/components/custom.tsx
index 70473b8952..8470329d62 100644
--- a/packages/examples/packages/dialogs/src/components/custom.tsx
+++ b/packages/examples/packages/dialogs/src/components/custom.tsx
@@ -1,4 +1,5 @@
 import {
+  AccountSelector,
   Box,
   Button,
   Container,
@@ -22,7 +23,7 @@ export const CustomDialog: SnapComponent = () => (
         This is a custom dialog. It has a custom Footer and can be resolved to
         any value.
       </Text>
-      <Input name="custom-input" placeholder="Enter something..." />
+      <AccountSelector name="account" />
     </Box>
     <Footer>
       <Button name="cancel">Cancel</Button>
diff --git a/packages/snaps-controllers/src/interface/SnapInterfaceController.ts b/packages/snaps-controllers/src/interface/SnapInterfaceController.ts
index f8143fd2c5..3ffc45231f 100644
--- a/packages/snaps-controllers/src/interface/SnapInterfaceController.ts
+++ b/packages/snaps-controllers/src/interface/SnapInterfaceController.ts
@@ -71,6 +71,11 @@ type AccountsControllerGetAccountByAddressAction = {
   handler: (address: string) => InternalAccount | undefined;
 };
 
+type AccountsControllerGetSelectedMultichainAccountAction = {
+  type: `AccountsController:getSelectedMultichainAccount`;
+  handler: () => InternalAccount;
+};
+
 export type SnapInterfaceControllerGetStateAction = ControllerGetStateAction<
   typeof controllerName,
   SnapInterfaceControllerState
@@ -92,6 +97,7 @@ export type SnapInterfaceControllerAllowedActions =
   | AcceptRequest
   | GetSnap
   | MultichainAssetsControllerGetStateAction
+  | AccountsControllerGetSelectedMultichainAccountAction
   | AccountsControllerGetAccountByAddressAction;
 
 export type SnapInterfaceControllerActions =
@@ -267,6 +273,7 @@ export class SnapInterfaceController extends BaseController<
     const componentState = constructState({}, element, {
       getAssetsState: this.#getAssetsState.bind(this),
       getAccountByAddress: this.#getAccountByAddress.bind(this),
+      getSelectedAccount: this.#getSelectedAccount.bind(this),
     });
 
     this.update((draftState) => {
@@ -320,6 +327,7 @@ export class SnapInterfaceController extends BaseController<
     const newState = constructState(oldState, element, {
       getAssetsState: this.#getAssetsState.bind(this),
       getAccountByAddress: this.#getAccountByAddress.bind(this),
+      getSelectedAccount: this.#getSelectedAccount.bind(this),
     });
 
     this.update((draftState) => {
@@ -440,6 +448,12 @@ export class SnapInterfaceController extends BaseController<
     );
   }
 
+  #getSelectedAccount() {
+    return this.messagingSystem.call(
+      'AccountsController:getSelectedMultichainAccount',
+    );
+  }
+
   /**
    * Get an account by its address.
    *
diff --git a/packages/snaps-controllers/src/interface/utils.ts b/packages/snaps-controllers/src/interface/utils.ts
index 171d2a4573..7c022942ac 100644
--- a/packages/snaps-controllers/src/interface/utils.ts
+++ b/packages/snaps-controllers/src/interface/utils.ts
@@ -22,6 +22,7 @@ import type {
   SelectorOptionElement,
   AssetSelectorElement,
   AddressInputElement,
+  AccountSelectorElement,
 } from '@metamask/snaps-sdk/jsx';
 import { isJSXElementUnsafe } from '@metamask/snaps-sdk/jsx';
 import type { InternalAccount } from '@metamask/snaps-utils';
@@ -97,6 +98,8 @@ type GetAccountByAddress = (
   address: CaipAccountId,
 ) => InternalAccount | undefined;
 
+type GetSelectedAccount = () => InternalAccount | undefined;
+
 /**
  * Data getters for elements.
  * This is used to get data from elements that is not directly accessible from the element itself.
@@ -107,6 +110,7 @@ type GetAccountByAddress = (
 type ElementDataGetters = {
   getAssetsState: GetAssetsState;
   getAccountByAddress: GetAccountByAddress;
+  getSelectedAccount: GetSelectedAccount;
 };
 
 /**
@@ -203,6 +207,23 @@ export function getDefaultAsset(
   };
 }
 
+/**
+ * Create a list of CAIP account IDs from an address and a list of scopes.
+ *
+ * @param address - The address to create the account IDs from.
+ * @param scopes - The scopes to create the account IDs from.
+ * @returns The list of CAIP account IDs.
+ */
+export function createAddressList(
+  address: string,
+  scopes: CaipChainId[],
+): CaipAccountId[] {
+  return scopes.map((scope) => {
+    const { namespace, reference } = parseCaipChainId(scope);
+    return toCaipAccountId(namespace, reference, address);
+  });
+}
+
 /**
  * Construct default state for a component.
  *
@@ -222,7 +243,8 @@ function constructComponentSpecificDefaultState(
     | CheckboxElement
     | SelectorElement
     | AssetSelectorElement
-    | AddressInputElement,
+    | AddressInputElement
+    | AccountSelectorElement,
   elementDataGetters: ElementDataGetters,
 ) {
   switch (element.type) {
@@ -241,6 +263,20 @@ function constructComponentSpecificDefaultState(
       return children[0]?.props.value;
     }
 
+    case 'AccountSelector': {
+      const account = elementDataGetters.getSelectedAccount();
+
+      if (!account) {
+        return null;
+      }
+
+      const { id, address, scopes } = account;
+
+      const addresses = createAddressList(address, scopes);
+
+      return { accountId: id, addresses };
+    }
+
     case 'Checkbox':
       return false;
 
@@ -294,18 +330,21 @@ export function getAssetSelectorStateValue(
  * @param element - The input element.
  * @param elementDataGetters - Data getters for the element.
  * @param elementDataGetters.getAssetsState - A function to get the MultichainAssetController state.
+ * @param elementDataGetters.getAccountByAddress - A function to get an account by its address.
  * @returns The state value for a given component.
  */
 function getComponentStateValue(
   element:
+    | AccountSelectorElement
     | InputElement
     | DropdownElement
     | RadioGroupElement
     | CheckboxElement
     | SelectorElement
     | AssetSelectorElement
-    | AddressInputElement,
-  { getAssetsState }: ElementDataGetters,
+    | AddressInputElement
+    | AccountSelectorElement,
+  { getAssetsState, getAccountByAddress }: ElementDataGetters,
 ) {
   switch (element.type) {
     case 'Checkbox':
@@ -323,6 +362,24 @@ function getComponentStateValue(
       const { namespace, reference } = parseCaipChainId(element.props.chainId);
       return toCaipAccountId(namespace, reference, element.props.value);
     }
+    case 'AccountSelector': {
+      if (!element.props.selectedAddress) {
+        return undefined;
+      }
+
+      const account = getAccountByAddress(element.props.selectedAddress);
+
+      if (!account) {
+        return undefined;
+      }
+
+      const { id, address, scopes } = account;
+
+      const addresses = createAddressList(address, scopes);
+
+      return { accountId: id, addresses };
+    }
+
     default:
       return element.props.value;
   }
@@ -340,6 +397,7 @@ function getComponentStateValue(
 function constructInputState(
   oldState: InterfaceState,
   element:
+    | AccountSelectorElement
     | InputElement
     | DropdownElement
     | RadioGroupElement
@@ -347,7 +405,8 @@ function constructInputState(
     | CheckboxElement
     | SelectorElement
     | AssetSelectorElement
-    | AddressInputElement,
+    | AddressInputElement
+    | AccountSelectorElement,
   elementDataGetters: ElementDataGetters,
   form?: string,
 ) {
diff --git a/packages/snaps-sdk/src/jsx/components/form/AccountSelector.test.tsx b/packages/snaps-sdk/src/jsx/components/form/AccountSelector.test.tsx
new file mode 100644
index 0000000000..fb86744433
--- /dev/null
+++ b/packages/snaps-sdk/src/jsx/components/form/AccountSelector.test.tsx
@@ -0,0 +1,106 @@
+import { AccountSelector } from './AccountSelector';
+
+describe('AccountSelector', () => {
+  it('returns an account selector element without filter props', () => {
+    const result = <AccountSelector name="account" />;
+
+    expect(result).toStrictEqual({
+      type: 'AccountSelector',
+      props: {
+        name: 'account',
+      },
+      key: null,
+    });
+  });
+
+  it('returns an account selector element with the chainIds filter prop', () => {
+    const result = (
+      <AccountSelector
+        name="account"
+        chainIds={['bip122:000000000019d6689c085ae165831e93']}
+      />
+    );
+
+    expect(result).toStrictEqual({
+      type: 'AccountSelector',
+      props: {
+        name: 'account',
+        chainIds: ['bip122:000000000019d6689c085ae165831e93'],
+      },
+      key: null,
+    });
+  });
+
+  it('returns an account selector element with the hideExternalAccounts filter prop', () => {
+    const result = (
+      <AccountSelector name="account" hideExternalAccounts={true} />
+    );
+
+    expect(result).toStrictEqual({
+      type: 'AccountSelector',
+      props: {
+        name: 'account',
+        hideExternalAccounts: true,
+      },
+      key: null,
+    });
+  });
+
+  it('returns an account selector element with the switchGlobalAccount filter prop', () => {
+    const result = (
+      <AccountSelector name="account" switchSelectedAccount={true} />
+    );
+
+    expect(result).toStrictEqual({
+      type: 'AccountSelector',
+      props: {
+        name: 'account',
+        switchSelectedAccount: true,
+      },
+      key: null,
+    });
+  });
+
+  it('returns an account selector element with a selectedAccount prop', () => {
+    const result = (
+      <AccountSelector
+        name="account"
+        selectedAddress="eip155:1:0x1234567890abcdef1234567890abcdef12345678"
+      />
+    );
+
+    expect(result).toStrictEqual({
+      type: 'AccountSelector',
+      props: {
+        name: 'account',
+        selectedAddress: 'eip155:1:0x1234567890abcdef1234567890abcdef12345678',
+      },
+      key: null,
+    });
+  });
+
+  it('returns an account selector element with all props', () => {
+    const result = (
+      <AccountSelector
+        name="account"
+        chainIds={['bip122:000000000019d6689c085ae165831e93']}
+        hideExternalAccounts={true}
+        switchSelectedAccount={true}
+        selectedAddress="bip122:000000000019d6689c085ae165831e93:128Lkh3S7CkDTBZ8W7BbpsN3YYizJMp8p6"
+      />
+    );
+
+    expect(result).toStrictEqual({
+      type: 'AccountSelector',
+      props: {
+        name: 'account',
+        chainIds: ['bip122:000000000019d6689c085ae165831e93'],
+        hideExternalAccounts: true,
+        switchSelectedAccount: true,
+        selectedAddress:
+          'bip122:000000000019d6689c085ae165831e93:128Lkh3S7CkDTBZ8W7BbpsN3YYizJMp8p6',
+      },
+      key: null,
+    });
+  });
+});
diff --git a/packages/snaps-sdk/src/jsx/components/form/AccountSelector.ts b/packages/snaps-sdk/src/jsx/components/form/AccountSelector.ts
new file mode 100644
index 0000000000..be41877479
--- /dev/null
+++ b/packages/snaps-sdk/src/jsx/components/form/AccountSelector.ts
@@ -0,0 +1,59 @@
+import type { CaipAccountId, CaipChainId } from '@metamask/utils';
+
+import { createSnapComponent } from '../../component';
+
+/**
+ * The props of the {@link AccountSelector} component.
+ *
+ * @property name - The name of the account selector. This is used to identify the
+ * state in the form data.
+ * @property hideExternalAccounts - Whether to hide accounts that doesn't belong to the snap.
+ * @property chainIds - The chain IDs to filter the accounts to show.
+ * @property switchSelectedAccount - Whether to switch the selected account in the client.
+ * @property selectedAddress - The selected address.
+ */
+export type AccountSelectorProps = {
+  name: string;
+  hideExternalAccounts?: boolean | undefined;
+  chainIds?: CaipChainId[] | undefined;
+  switchSelectedAccount?: boolean | undefined;
+  selectedAddress?: CaipAccountId | undefined;
+};
+
+const TYPE = 'AccountSelector';
+
+/**
+ * An account selector component, which is used to create an account selector.
+ *
+ * @param props - The props of the component.
+ * @param props.name - The name of the account selector. This is used to identify the
+ * state in the form data.
+ * @param props.hideExternalAccounts - Whether to hide accounts that doesn't belong to the snap.
+ * @param props.chainIds - The chain IDs to filter the accounts to show.
+ * @param props.switchSelectedAccount - Whether to switch the selected account in the client.
+ * @param props.selectedAddress - The selected address.
+ * @returns An account selector element.
+ * @example
+ * <AccountSelector name="account-selector" />
+ * @example
+ * <AccountSelector name="account-selector" hideExternalAccounts />
+ * @example
+ * <AccountSelector name="account-selector" chainIds={['eip155:1']} />
+ * @example
+ * <AccountSelector name="account-selector" switchSelectedAccount />
+ * @example
+ * <AccountSelector name="account-selector" selectedAddress="eip155:1:0x1234..." />
+ * @example
+ * <AccountSelector name="account-selector" hideExternalAccounts chainIds={['eip155:1']} switchSelectedAccount selectedAddress="eip155:1:0x1234..." />
+ */
+export const AccountSelector = createSnapComponent<
+  AccountSelectorProps,
+  typeof TYPE
+>(TYPE);
+
+/**
+ * An account selector element.
+ *
+ * @see AccountSelector
+ */
+export type AccountSelectorElement = ReturnType<typeof AccountSelector>;
diff --git a/packages/snaps-sdk/src/jsx/components/form/index.ts b/packages/snaps-sdk/src/jsx/components/form/index.ts
index 245fa13227..70918b5c82 100644
--- a/packages/snaps-sdk/src/jsx/components/form/index.ts
+++ b/packages/snaps-sdk/src/jsx/components/form/index.ts
@@ -1,3 +1,4 @@
+import type { AccountSelectorElement } from './AccountSelector';
 import type { AddressInputElement } from './AddressInput';
 import type { AssetSelectorElement } from './AssetSelector';
 import type { ButtonElement } from './Button';
@@ -29,6 +30,7 @@ export * from './SelectorOption';
 export * from './AddressInput';
 
 export type StandardFormElement =
+  | AccountSelectorElement
   | AssetSelectorElement
   | AddressInputElement
   | ButtonElement
diff --git a/packages/snaps-sdk/src/jsx/validation.test.tsx b/packages/snaps-sdk/src/jsx/validation.test.tsx
index 0e12283d37..71ab6fa5aa 100644
--- a/packages/snaps-sdk/src/jsx/validation.test.tsx
+++ b/packages/snaps-sdk/src/jsx/validation.test.tsx
@@ -37,6 +37,7 @@ import {
   Skeleton,
   AssetSelector,
   AddressInput,
+  AccountSelector,
 } from './components';
 import {
   AddressStruct,
@@ -78,6 +79,7 @@ import {
   SkeletonStruct,
   AssetSelectorStruct,
   AddressInputStruct,
+  AccountSelectorStruct,
 } from './validation';
 
 describe('KeyStruct', () => {
@@ -376,6 +378,9 @@ describe('FieldStruct', () => {
     <Field label="foo">
       <AddressInput name="address" chainId="eip155:1" />
     </Field>,
+    <Field label="foo">
+      <AccountSelector name="account" />
+    </Field>,
   ])('validates a field element', (value) => {
     expect(is(value, FieldStruct)).toBe(true);
   });
@@ -633,6 +638,68 @@ describe('AddressStruct', () => {
   });
 });
 
+describe('AccountSelectorStruct', () => {
+  it.each([
+    <AccountSelector name="account" />,
+    <AccountSelector
+      name="account"
+      chainIds={['bip122:000000000019d6689c085ae165831e93']}
+    />,
+    <AccountSelector name="account" hideExternalAccounts />,
+    <AccountSelector name="account" switchSelectedAccount />,
+    <AccountSelector
+      name="account"
+      selectedAddress="eip155:1:0x1234567890abcdef1234567890abcdef12345678"
+    />,
+    <AccountSelector
+      name="account"
+      chainIds={['foo:bar']}
+      hideExternalAccounts
+      switchSelectedAccount
+      selectedAddress="eip155:1:0x1234567890abcdef1234567890abcdef12345678"
+    />,
+  ])('validates an account picker element', (value) => {
+    expect(is(value, AccountSelectorStruct)).toBe(true);
+  });
+
+  it.each([
+    'foo',
+    42,
+    null,
+    undefined,
+    {},
+    [],
+    // @ts-expect-error - Invalid props.
+    <AccountSelector />,
+    // @ts-expect-error - Invalid props.
+    <AccountSelector>
+      <Text>foo</Text>
+    </AccountSelector>,
+    // @ts-expect-error - Invalid props.
+    <AccountSelector switchSelectedAccount="foo" />,
+    // @ts-expect-error - Invalid props.
+    <AccountSelector chainIds={['bip122:000000000019d6689c085ae165831e93']} />,
+    // @ts-expect-error - Invalid props.
+    <AccountSelector selectedAddress={42} />,
+    <AccountSelector
+      name="account"
+      chainIds={['foo:bar']}
+      selectedAddress="eip155:1:0x1234567890abcdef1234567890abcdef12345678"
+      // @ts-expect-error - Invalid props.
+      hideExternalAccounts={42}
+    />,
+    <Text>foo</Text>,
+    <Box>
+      <Text>foo</Text>
+    </Box>,
+    <Row label="label">
+      <Image src="<svg />" alt="alt" />
+    </Row>,
+  ])('does not validate "%p"', (value) => {
+    expect(is(value, AddressStruct)).toBe(false);
+  });
+});
+
 describe('BoxStruct', () => {
   it.each([
     <Box>
diff --git a/packages/snaps-sdk/src/jsx/validation.ts b/packages/snaps-sdk/src/jsx/validation.ts
index bfe72209fa..71183ddd3f 100644
--- a/packages/snaps-sdk/src/jsx/validation.ts
+++ b/packages/snaps-sdk/src/jsx/validation.ts
@@ -43,6 +43,7 @@ import type {
 import type {
   AssetSelectorElement,
   AvatarElement,
+  AccountSelectorElement,
   SkeletonElement,
   AddressElement,
   AddressInputElement,
@@ -394,6 +395,23 @@ export const AddressStruct: Describe<AddressElement> = element('Address', {
   avatar: optional(boolean()),
 });
 
+/**
+ * A struct for the {@link AccountSelectorElement} type.
+ */
+export const AccountSelectorStruct: Describe<AccountSelectorElement> = element(
+  'AccountSelector',
+  {
+    name: string(),
+    hideExternalAccounts: optional(boolean()),
+    chainIds: optional(array(CaipChainIdStruct)) as unknown as Struct<
+      Infer<typeof CaipChainIdStruct>[] | undefined,
+      null
+    >,
+    switchSelectedAccount: optional(boolean()),
+    selectedAddress: optional(CaipAccountIdStruct),
+  },
+);
+
 /**
  * A struct for the {@link CardElement} type.
  */
@@ -520,6 +538,7 @@ const BOX_INPUT_BOTH = [
 const FIELD_CHILDREN_ARRAY = [
   AssetSelectorStruct,
   AddressInputStruct,
+  AccountSelectorStruct,
   InputStruct,
   DropdownStruct,
   RadioGroupStruct,
@@ -529,6 +548,7 @@ const FIELD_CHILDREN_ARRAY = [
 ] as [
   typeof AssetSelectorStruct,
   typeof AddressInputStruct,
+  typeof AccountSelectorStruct,
   typeof InputStruct,
   typeof DropdownStruct,
   typeof RadioGroupStruct,
@@ -921,6 +941,7 @@ export const SpinnerStruct: Describe<SpinnerElement> = element('Spinner');
  * another component (e.g., Field must be contained in a Form).
  */
 export const BoxChildStruct = typedUnion([
+  AccountSelectorStruct,
   AddressStruct,
   AssetSelectorStruct,
   AddressInputStruct,
@@ -989,6 +1010,7 @@ export const RootJSXElementStruct = typedUnion([
 export const JSXElementStruct: Describe<JSXElement> = typedUnion([
   AssetSelectorStruct,
   AddressInputStruct,
+  AccountSelectorStruct,
   ButtonStruct,
   InputStruct,
   FileInputStruct,
diff --git a/packages/snaps-sdk/src/types/handlers/user-input.ts b/packages/snaps-sdk/src/types/handlers/user-input.ts
index 063a67c049..c6e71a4e10 100644
--- a/packages/snaps-sdk/src/types/handlers/user-input.ts
+++ b/packages/snaps-sdk/src/types/handlers/user-input.ts
@@ -9,8 +9,9 @@ import {
   string,
   union,
   boolean,
+  array,
 } from '@metamask/superstruct';
-import { CaipAssetTypeStruct } from '@metamask/utils';
+import { CaipAssetTypeStruct, CaipAccountIdStruct } from '@metamask/utils';
 
 import { typedUnion, literal } from '../../internals';
 import type { InterfaceContext } from '../interface';
@@ -54,6 +55,19 @@ export const ButtonClickEventStruct = assign(
  */
 export type ButtonClickEvent = Infer<typeof ButtonClickEventStruct>;
 
+export const AccountSelectorValueStruct = object({
+  accountId: string(),
+  addresses: array(CaipAccountIdStruct),
+});
+
+/**
+ * The value of an `AccountSelector` component in state.
+ *
+ * @property accountId - The account ID of the account.
+ * @property addresses - The addresses of the account as CAIP-10 account ID.
+ */
+export type AccountSelectorValue = Infer<typeof AccountSelectorValueStruct>;
+
 export const FileStruct = object({
   name: string(),
   size: number(),
@@ -94,7 +108,13 @@ export const FormSubmitEventStruct = assign(
     value: record(
       string(),
       nullable(
-        union([string(), FileStruct, boolean(), AssetSelectorStateStruct]),
+        union([
+          string(),
+          FileStruct,
+          boolean(),
+          AccountSelectorValueStruct,
+          AssetSelectorStateStruct,
+        ]),
       ),
     ),
     name: string(),
@@ -121,7 +141,12 @@ export const InputChangeEventStruct = assign(
   object({
     type: literal(UserInputEventType.InputChangeEvent),
     name: string(),
-    value: union([string(), boolean(), AssetSelectorStateStruct]),
+    value: union([
+      string(),
+      boolean(),
+      AccountSelectorValueStruct,
+      AssetSelectorStateStruct,
+    ]),
   }),
 );
 
diff --git a/packages/snaps-sdk/src/types/interface.ts b/packages/snaps-sdk/src/types/interface.ts
index 47af64c78b..334a3fc19a 100644
--- a/packages/snaps-sdk/src/types/interface.ts
+++ b/packages/snaps-sdk/src/types/interface.ts
@@ -13,7 +13,11 @@ import {
   isObject,
 } from '@metamask/utils';
 
-import { AssetSelectorStateStruct, FileStruct } from './handlers';
+import {
+  AssetSelectorStateStruct,
+  FileStruct,
+  AccountSelectorValueStruct,
+} from './handlers';
 import { selectiveUnion } from '../internals';
 import type { JSXElement } from '../jsx';
 import { RootJSXElementStruct } from '../jsx';
@@ -28,6 +32,7 @@ import { ComponentStruct } from '../ui';
  */
 
 export const StateStruct = union([
+  AccountSelectorValueStruct,
   AssetSelectorStateStruct,
   FileStruct,
   string(),
diff --git a/yarn.lock b/yarn.lock
index 344017fcc2..01dac4b6b5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3679,6 +3679,41 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@metamask/keyring-api@npm:^16.1.0":
+  version: 16.1.0
+  resolution: "@metamask/keyring-api@npm:16.1.0"
+  dependencies:
+    "@metamask/keyring-utils": "npm:^2.0.0"
+    "@metamask/superstruct": "npm:^3.1.0"
+    "@metamask/utils": "npm:^11.1.0"
+    bech32: "npm:^2.0.0"
+  checksum: 10/6a3877e8e70b02728d4dc056a0eab5d961dd3089236539827ffb4194a3acdc9c71436cc3248ed1d6bf62d3dc0b6e69e2379177db6d690af1a77d4698767324fd
+  languageName: node
+  linkType: hard
+
+"@metamask/keyring-internal-api@npm:^4.0.1":
+  version: 4.0.1
+  resolution: "@metamask/keyring-internal-api@npm:4.0.1"
+  dependencies:
+    "@metamask/keyring-api": "npm:^16.1.0"
+    "@metamask/keyring-utils": "npm:^2.0.0"
+    "@metamask/superstruct": "npm:^3.1.0"
+    "@metamask/utils": "npm:^11.1.0"
+  checksum: 10/f55ffb3031a0fc43abf7e259b698901f50d5ce2b791cc8923156f8d8e8cc421e9ec278446a43f4ae333731728dbe5585f4beea7e1e44fcf1735d794286353caa
+  languageName: node
+  linkType: hard
+
+"@metamask/keyring-utils@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "@metamask/keyring-utils@npm:2.0.0"
+  dependencies:
+    "@metamask/superstruct": "npm:^3.1.0"
+    "@metamask/utils": "npm:^11.1.0"
+    bitcoin-address-validation: "npm:^2.2.3"
+  checksum: 10/f7514821fb3bd5f5be575e0d74d5cf8becbdeac35a3e13dcd9e8bf789ba34aa2072783bdc3d0ddac479b97c986bcb54d77cdccedf5945d1c33ef310790e90efb
+  languageName: node
+  linkType: hard
+
 "@metamask/lifecycle-hooks-example-snap@workspace:^, @metamask/lifecycle-hooks-example-snap@workspace:packages/examples/packages/lifecycle-hooks":
   version: 0.0.0-use.local
   resolution: "@metamask/lifecycle-hooks-example-snap@workspace:packages/examples/packages/lifecycle-hooks"
@@ -8439,6 +8474,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"bitcoin-address-validation@npm:^2.2.3":
+  version: 2.2.3
+  resolution: "bitcoin-address-validation@npm:2.2.3"
+  dependencies:
+    base58-js: "npm:^1.0.0"
+    bech32: "npm:^2.0.0"
+    sha256-uint8array: "npm:^0.10.3"
+  checksum: 10/01603b5edf610ecf0843ae546534313f1cffabc8e7435a3678bc9788f18a54e51302218a539794aafd49beb5be70b5d1d507eb7442cb33970fcd665592a71305
+  languageName: node
+  linkType: hard
+
 "bl@npm:^4.0.3, bl@npm:^4.1.0":
   version: 4.1.0
   resolution: "bl@npm:4.1.0"
@@ -16989,6 +17035,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"sha256-uint8array@npm:^0.10.3":
+  version: 0.10.7
+  resolution: "sha256-uint8array@npm:0.10.7"
+  checksum: 10/e427f9d2f9c521dea552f033d3f0c3bd641ab214d214dd41bde3c805edde393519cf982b3eee7d683b32e5f28fa23b2278d25935940e13fbe831b216a37832be
+  languageName: node
+  linkType: hard
+
 "shallow-clone@npm:^0.1.2":
   version: 0.1.2
   resolution: "shallow-clone@npm:0.1.2"

From a7c92340063d11a5b18d4b07a316fd9637aa1be6 Mon Sep 17 00:00:00 2001
From: Guillaume Roux <guillaumeroux123@gmail.com>
Date: Tue, 11 Feb 2025 14:01:04 +0100
Subject: [PATCH 02/27] rebase

---
 packages/examples/packages/dialogs/src/components/custom.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/examples/packages/dialogs/src/components/custom.tsx b/packages/examples/packages/dialogs/src/components/custom.tsx
index 8470329d62..a2408479ba 100644
--- a/packages/examples/packages/dialogs/src/components/custom.tsx
+++ b/packages/examples/packages/dialogs/src/components/custom.tsx
@@ -23,7 +23,7 @@ export const CustomDialog: SnapComponent = () => (
         This is a custom dialog. It has a custom Footer and can be resolved to
         any value.
       </Text>
-      <AccountSelector name="account" />
+      <AccountSelector name="account" switchSelectedAccount />
     </Box>
     <Footer>
       <Button name="cancel">Cancel</Button>

From c9578e7be767ab5a856f59f36d64d7ae74be7887 Mon Sep 17 00:00:00 2001
From: Guillaume Roux <hello@guillaumerx.fr>
Date: Wed, 12 Feb 2025 14:39:45 +0100
Subject: [PATCH 03/27] finish tests and fix bugs

---
 .../dialogs/src/components/custom.tsx         |  3 +-
 .../src/components/AccountSelector.tsx        | 54 -------------------
 .../send-flow/src/components/SendFlow.tsx     | 10 ----
 .../send-flow/src/components/SendForm.tsx     | 16 ++----
 .../examples/packages/send-flow/src/data.ts   | 26 ---------
 .../examples/packages/send-flow/src/index.tsx | 10 +---
 .../examples/packages/send-flow/src/types.ts  | 20 ++-----
 .../examples/packages/send-flow/src/utils.tsx | 35 ++----------
 .../SnapInterfaceController.test.tsx          | 44 ++++++++++++++-
 .../src/interface/SnapInterfaceController.ts  | 17 +++++-
 .../src/interface/utils.test.tsx              | 17 ++++++
 .../snaps-controllers/src/interface/utils.ts  | 14 ++++-
 .../src/test-utils/controller.ts              | 20 +++++++
 13 files changed, 121 insertions(+), 165 deletions(-)
 delete mode 100644 packages/examples/packages/send-flow/src/components/AccountSelector.tsx
 delete mode 100644 packages/examples/packages/send-flow/src/data.ts

diff --git a/packages/examples/packages/dialogs/src/components/custom.tsx b/packages/examples/packages/dialogs/src/components/custom.tsx
index a2408479ba..70473b8952 100644
--- a/packages/examples/packages/dialogs/src/components/custom.tsx
+++ b/packages/examples/packages/dialogs/src/components/custom.tsx
@@ -1,5 +1,4 @@
 import {
-  AccountSelector,
   Box,
   Button,
   Container,
@@ -23,7 +22,7 @@ export const CustomDialog: SnapComponent = () => (
         This is a custom dialog. It has a custom Footer and can be resolved to
         any value.
       </Text>
-      <AccountSelector name="account" switchSelectedAccount />
+      <Input name="custom-input" placeholder="Enter something..." />
     </Box>
     <Footer>
       <Button name="cancel">Cancel</Button>
diff --git a/packages/examples/packages/send-flow/src/components/AccountSelector.tsx b/packages/examples/packages/send-flow/src/components/AccountSelector.tsx
deleted file mode 100644
index 1d99e07070..0000000000
--- a/packages/examples/packages/send-flow/src/components/AccountSelector.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import {
-  Card,
-  Field,
-  Selector,
-  SelectorOption,
-  type SnapComponent,
-} from '@metamask/snaps-sdk/jsx';
-
-import type { Account } from '../types';
-import { truncate } from '../utils';
-
-/**
- * The props for the {@link AccountSelector} component.
- *
- * @property selectedAccount - The currently selected account.
- * @property accounts - The available accounts.
- */
-export type AccountSelectorProps = {
-  selectedAccount: string;
-  accounts: Account[];
-};
-
-/**
- * A component that shows the account selector.
- *
- * @param props - The component props.
- * @param props.selectedAccount - The currently selected account.
- * @param props.accounts - The available accounts.
- * @returns The AccountSelector component.
- */
-export const AccountSelector: SnapComponent<AccountSelectorProps> = ({
-  selectedAccount,
-  accounts,
-}) => (
-  <Field label={'From account'}>
-    <Selector
-      name="accountSelector"
-      title="From account"
-      value={selectedAccount}
-    >
-      {accounts.map(({ name, address, balance, icon }) => (
-        <SelectorOption value={address}>
-          <Card
-            image={icon}
-            title={name}
-            description={truncate(address, 13)}
-            value={`${balance.amount.toString()} BTC`}
-            extra={`$${balance.fiat.toString()}`}
-          />
-        </SelectorOption>
-      ))}
-    </Selector>
-  </Field>
-);
diff --git a/packages/examples/packages/send-flow/src/components/SendFlow.tsx b/packages/examples/packages/send-flow/src/components/SendFlow.tsx
index 9638cd99ca..fb6d064e9d 100644
--- a/packages/examples/packages/send-flow/src/components/SendFlow.tsx
+++ b/packages/examples/packages/send-flow/src/components/SendFlow.tsx
@@ -10,8 +10,6 @@ import type { Account, 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 total - The total cost of the transaction.
  * @property fees - The fees for the transaction.
@@ -19,8 +17,6 @@ import type { Account, Currency } from '../types';
  * @property displayAvatar - Whether to display the avatar of the address.
  */
 export type SendFlowProps = {
-  accounts: Account[];
-  selectedAccount: string;
   selectedCurrency: 'BTC' | '$';
   total: Currency;
   fees: Currency;
@@ -35,8 +31,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.
@@ -45,8 +39,6 @@ export type SendFlowProps = {
  * @returns The SendFlow component.
  */
 export const SendFlow: SnapComponent<SendFlowProps> = ({
-  accounts,
-  selectedAccount,
   selectedCurrency,
   total,
   fees,
@@ -58,8 +50,6 @@ export const SendFlow: SnapComponent<SendFlowProps> = ({
       <Box>
         <SendFlowHeader />
         <SendForm
-          selectedAccount={selectedAccount}
-          accounts={accounts}
           selectedCurrency={selectedCurrency}
           errors={errors}
           displayAvatar={displayAvatar}
diff --git a/packages/examples/packages/send-flow/src/components/SendForm.tsx b/packages/examples/packages/send-flow/src/components/SendForm.tsx
index 4b3aefdada..92787d58b5 100644
--- a/packages/examples/packages/send-flow/src/components/SendForm.tsx
+++ b/packages/examples/packages/send-flow/src/components/SendForm.tsx
@@ -8,25 +8,21 @@ import {
   Input,
   AddressInput,
   Text,
+  AccountSelector,
   type SnapComponent,
 } 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 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[];
   errors?: SendFormErrors;
   selectedCurrency: 'BTC' | '$';
   displayAvatar?: boolean | undefined;
@@ -36,22 +32,20 @@ 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.displayAvatar - Whether to display the avatar of the address.
  * @returns The SendForm component.
  */
 export const SendForm: SnapComponent<SendFormProps> = ({
-  selectedAccount,
-  accounts,
   errors,
   selectedCurrency,
   displayAvatar,
 }) => (
   <Form name="sendForm">
-    <AccountSelector selectedAccount={selectedAccount} accounts={accounts} />
+    <Field label="From account">
+      <AccountSelector name="accountSelector" switchSelectedAccount />
+    </Field>
     <Field label="Send amount" error={errors?.amount}>
       <Box>
         <Image src={btcIcon} />
diff --git a/packages/examples/packages/send-flow/src/data.ts b/packages/examples/packages/send-flow/src/data.ts
deleted file mode 100644
index 4b821fb503..0000000000
--- a/packages/examples/packages/send-flow/src/data.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import jazzicon1 from './images/jazzicon1.svg';
-import jazzicon2 from './images/jazzicon2.svg';
-import type { Account } from './types';
-
-/**
- * Example accounts data.
- */
-export const accounts: Record<string, Account> = {
-  bc1qxy2kgdygjrsqtzq2n0yrf2493p83kkfjhx0wlh: {
-    name: 'My Bitcoin Account',
-    address: 'bc1qxy2kgdygjrsqtzq2n0yrf2493p83kkfjhx0wlh',
-    balance: { amount: 1.8, fiat: 92000 },
-    icon: jazzicon1,
-  },
-  bc1pmpg8yzpty4xgp497qdydkcqt90zz68n48wzwm757vk8nrlkat99q272xm3: {
-    name: 'Savings Account',
-    address: 'bc1pmpg8yzpty4xgp497qdydkcqt90zz68n48wzwm757vk8nrlkat99q272xm3',
-    balance: { amount: 2.5, fiat: 150000 },
-    icon: jazzicon2,
-  },
-};
-
-/**
- * Example accounts data as an array.
- */
-export const accountsArray = Object.values(accounts);
diff --git a/packages/examples/packages/send-flow/src/index.tsx b/packages/examples/packages/send-flow/src/index.tsx
index 6e06fd8385..fd8d5b11b9 100644
--- a/packages/examples/packages/send-flow/src/index.tsx
+++ b/packages/examples/packages/send-flow/src/index.tsx
@@ -7,7 +7,6 @@ import type {
 import { UserInputEventType } from '@metamask/snaps-sdk';
 
 import { SendFlow } from './components';
-import { accountsArray, accounts } from './data';
 import type { SendFormState, SendFlowContext } from './types';
 import { formValidation, generateSendFlow, isCaipHexAddress } from './utils';
 
@@ -26,8 +25,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 },
       });
 
@@ -56,8 +53,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 },
   });
 
@@ -88,7 +83,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,
@@ -130,8 +125,6 @@ export const onUserInput: OnUserInputHandler = async ({
             id,
             ui: (
               <SendFlow
-                accounts={accountsArray}
-                selectedAccount={sendForm.accountSelector}
                 selectedCurrency={selectedCurrency}
                 total={total}
                 fees={fees}
@@ -144,7 +137,6 @@ export const onUserInput: OnUserInputHandler = async ({
 
         break;
       }
-
       default:
         break;
     }
diff --git a/packages/examples/packages/send-flow/src/types.ts b/packages/examples/packages/send-flow/src/types.ts
index 08b340749f..8409825fa9 100644
--- a/packages/examples/packages/send-flow/src/types.ts
+++ b/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;
 };
diff --git a/packages/examples/packages/send-flow/src/utils.tsx b/packages/examples/packages/send-flow/src/utils.tsx
index e62f42dad8..a36b604584 100644
--- a/packages/examples/packages/send-flow/src/utils.tsx
+++ b/packages/examples/packages/send-flow/src/utils.tsx
@@ -7,17 +7,9 @@ import {
 } from '@metamask/utils';
 
 import { SendFlow } from './components';
-import type {
-  Account,
-  Currency,
-  SendFlowContext,
-  SendFormErrors,
-  SendFormState,
-} from './types';
+import type { Currency, SendFormErrors, SendFormState } from './types';
 
 export type GenerateSendFlowParams = {
-  accountsArray: Account[];
-  accounts: Record<string, Account>;
   fees: Currency;
 };
 
@@ -25,30 +17,21 @@ export type GenerateSendFlowParams = {
  * Generate the send flow.
  *
  * @param params - The parameters for the send form.
- * @param params.accountsArray - The available accounts as an array.
- * @param params.accounts - The available accounts.
  * @param params.fees - The fees for the transaction.
  * @returns The interface ID.
  */
-export async function generateSendFlow({
-  accountsArray,
-  accounts,
-  fees,
-}: GenerateSendFlowParams) {
+export async function generateSendFlow({ fees }: GenerateSendFlowParams) {
   return await snap.request({
     method: 'snap_createInterface',
     params: {
       ui: (
         <SendFlow
-          accounts={accountsArray}
-          selectedAccount={accountsArray[0].address}
           selectedCurrency="BTC"
           total={{ amount: 0, fiat: 0 }}
           fees={fees}
         />
       ),
       context: {
-        accounts,
         selectedCurrency: 'BTC',
         fees,
       },
@@ -60,27 +43,15 @@ export async function generateSendFlow({
  * Validate the send form.
  *
  * @param formState - The state of the send form.
- * @param context - The context of the interface.
  * @returns The form errors.
  */
-export function formValidation(
-  formState: SendFormState,
-  context: SendFlowContext,
-): SendFormErrors {
+export function formValidation(formState: SendFormState): SendFormErrors {
   const errors: Partial<SendFormErrors> = {};
 
   if (formState.to === 'invalid address') {
     errors.to = 'Invalid address';
   }
 
-  if (
-    formState.amount &&
-    Number(formState.amount) >
-      context.accounts[formState.accountSelector].balance.amount
-  ) {
-    errors.amount = 'Insufficient funds';
-  }
-
   return errors;
 }
 
diff --git a/packages/snaps-controllers/src/interface/SnapInterfaceController.test.tsx b/packages/snaps-controllers/src/interface/SnapInterfaceController.test.tsx
index e703024069..204a8201d5 100644
--- a/packages/snaps-controllers/src/interface/SnapInterfaceController.test.tsx
+++ b/packages/snaps-controllers/src/interface/SnapInterfaceController.test.tsx
@@ -10,6 +10,7 @@ import {
 } from '@metamask/snaps-sdk';
 import {
   AssetSelector,
+  AccountSelector,
   Box,
   Field,
   FileInput,
@@ -220,6 +221,16 @@ describe('SnapInterfaceController', () => {
             <Field label="Bar">
               <Input name="bar" type="text" />
             </Field>
+            <Field label="baz">
+              <AccountSelector
+                name="baz"
+                switchSelectedAccount
+                selectedAddress="eip155:0:0x1234567890123456789012345678901234567890"
+              />
+            </Field>
+            <Field label="foobar">
+              <AccountSelector name="foobar" />
+            </Field>
           </Form>
         </Box>
       );
@@ -242,8 +253,37 @@ describe('SnapInterfaceController', () => {
         'https://foo.bar/',
       );
 
+      expect(rootMessenger.call).toHaveBeenNthCalledWith(
+        4,
+        'AccountsController:getAccountByAddress',
+        '0x1234567890123456789012345678901234567890',
+      );
+
+      expect(rootMessenger.call).toHaveBeenNthCalledWith(
+        5,
+        'AccountsController:setSelectedAccount',
+        'foo',
+      );
+
+      expect(rootMessenger.call).toHaveBeenNthCalledWith(
+        6,
+        'AccountsController:getSelectedMultichainAccount',
+      );
+
       expect(content).toStrictEqual(element);
-      expect(state).toStrictEqual({ foo: { bar: null } });
+      expect(state).toStrictEqual({
+        foo: {
+          bar: null,
+          baz: {
+            accountId: 'foo',
+            addresses: ['eip155:0:0x1234567890123456789012345678901234567890'],
+          },
+          foobar: {
+            accountId: 'foo',
+            addresses: ['eip155:0:0x1234567890123456789012345678901234567890'],
+          },
+        },
+      });
     });
 
     it('supports providing interface context', async () => {
@@ -1321,7 +1361,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,
diff --git a/packages/snaps-controllers/src/interface/SnapInterfaceController.ts b/packages/snaps-controllers/src/interface/SnapInterfaceController.ts
index 3ffc45231f..480e7bace9 100644
--- a/packages/snaps-controllers/src/interface/SnapInterfaceController.ts
+++ b/packages/snaps-controllers/src/interface/SnapInterfaceController.ts
@@ -76,6 +76,11 @@ type AccountsControllerGetSelectedMultichainAccountAction = {
   handler: () => InternalAccount;
 };
 
+export type AccountsControllerSetSelectedAccountAction = {
+  type: `AccountsController:setSelectedAccount`;
+  handler: (accountId: string) => void;
+};
+
 export type SnapInterfaceControllerGetStateAction = ControllerGetStateAction<
   typeof controllerName,
   SnapInterfaceControllerState
@@ -98,7 +103,8 @@ export type SnapInterfaceControllerAllowedActions =
   | GetSnap
   | MultichainAssetsControllerGetStateAction
   | AccountsControllerGetSelectedMultichainAccountAction
-  | AccountsControllerGetAccountByAddressAction;
+  | AccountsControllerGetAccountByAddressAction
+  | AccountsControllerSetSelectedAccountAction;
 
 export type SnapInterfaceControllerActions =
   | CreateInterface
@@ -274,6 +280,7 @@ export class SnapInterfaceController extends BaseController<
       getAssetsState: this.#getAssetsState.bind(this),
       getAccountByAddress: this.#getAccountByAddress.bind(this),
       getSelectedAccount: this.#getSelectedAccount.bind(this),
+      setSelectedAccount: this.#setSelectedAccount.bind(this),
     });
 
     this.update((draftState) => {
@@ -328,6 +335,7 @@ export class SnapInterfaceController extends BaseController<
       getAssetsState: this.#getAssetsState.bind(this),
       getAccountByAddress: this.#getAccountByAddress.bind(this),
       getSelectedAccount: this.#getSelectedAccount.bind(this),
+      setSelectedAccount: this.#setSelectedAccount.bind(this),
     });
 
     this.update((draftState) => {
@@ -454,6 +462,13 @@ export class SnapInterfaceController extends BaseController<
     );
   }
 
+  #setSelectedAccount(accountId: string) {
+    return this.messagingSystem.call(
+      'AccountsController:setSelectedAccount',
+      accountId,
+    );
+  }
+
   /**
    * Get an account by its address.
    *
diff --git a/packages/snaps-controllers/src/interface/utils.test.tsx b/packages/snaps-controllers/src/interface/utils.test.tsx
index 4a98be1ef5..c979ce213e 100644
--- a/packages/snaps-controllers/src/interface/utils.test.tsx
+++ b/packages/snaps-controllers/src/interface/utils.test.tsx
@@ -17,6 +17,7 @@ import {
   SelectorOption,
   AssetSelector,
   AddressInput,
+  AccountSelector,
 } from '@metamask/snaps-sdk/jsx';
 
 import {
@@ -73,10 +74,26 @@ describe('assertNameIsUnique', () => {
   });
 });
 
+describe('createAddressList', () => {
+  it('creates an address list from an account', () => {
+    const result = createAddressList(
+      '0x1234567890123456789012345678901234567890',
+      ['eip155:1', 'eip155:2'],
+    );
+
+    expect(result).toStrictEqual([
+      'eip155:1:0x1234567890123456789012345678901234567890',
+      'eip155:2:0x1234567890123456789012345678901234567890',
+    ]);
+  });
+});
+
 describe('constructState', () => {
   const elementDataGetters = {
     getAssetsState: jest.fn(),
     getAccountByAddress: jest.fn(),
+    getSelectedAccount: jest.fn(),
+    setSelectedAccount: jest.fn(),
   };
 
   it('can construct a new component state', () => {
diff --git a/packages/snaps-controllers/src/interface/utils.ts b/packages/snaps-controllers/src/interface/utils.ts
index 7c022942ac..2080239344 100644
--- a/packages/snaps-controllers/src/interface/utils.ts
+++ b/packages/snaps-controllers/src/interface/utils.ts
@@ -98,6 +98,8 @@ type GetAccountByAddress = (
   address: CaipAccountId,
 ) => InternalAccount | undefined;
 
+type SetSelectedAccount = (accountId: string) => void;
+
 type GetSelectedAccount = () => InternalAccount | undefined;
 
 /**
@@ -111,6 +113,7 @@ type ElementDataGetters = {
   getAssetsState: GetAssetsState;
   getAccountByAddress: GetAccountByAddress;
   getSelectedAccount: GetSelectedAccount;
+  setSelectedAccount: SetSelectedAccount;
 };
 
 /**
@@ -331,6 +334,7 @@ export function getAssetSelectorStateValue(
  * @param elementDataGetters - Data getters for the element.
  * @param elementDataGetters.getAssetsState - A function to get the MultichainAssetController state.
  * @param elementDataGetters.getAccountByAddress - A function to get an account by its address.
+ * @param elementDataGetters.setSelectedAccount
  * @returns The state value for a given component.
  */
 function getComponentStateValue(
@@ -344,7 +348,11 @@ function getComponentStateValue(
     | AssetSelectorElement
     | AddressInputElement
     | AccountSelectorElement,
-  { getAssetsState, getAccountByAddress }: ElementDataGetters,
+  {
+    getAssetsState,
+    getAccountByAddress,
+    setSelectedAccount,
+  }: ElementDataGetters,
 ) {
   switch (element.type) {
     case 'Checkbox':
@@ -373,6 +381,10 @@ function getComponentStateValue(
         return undefined;
       }
 
+      if (element.props.switchSelectedAccount) {
+        setSelectedAccount(account.id);
+      }
+
       const { id, address, scopes } = account;
 
       const addresses = createAddressList(address, scopes);
diff --git a/packages/snaps-controllers/src/test-utils/controller.ts b/packages/snaps-controllers/src/test-utils/controller.ts
index 3d7588156a..bab83df046 100644
--- a/packages/snaps-controllers/src/test-utils/controller.ts
+++ b/packages/snaps-controllers/src/test-utils/controller.ts
@@ -24,6 +24,7 @@ import {
 } from '@metamask/snaps-rpc-methods';
 import type { SnapId } from '@metamask/snaps-sdk';
 import { text } from '@metamask/snaps-sdk';
+import type { InternalAccount } from '@metamask/snaps-utils';
 import { SnapCaveatType } from '@metamask/snaps-utils';
 import {
   MockControllerMessenger,
@@ -795,6 +796,8 @@ export const getRestrictedSnapInterfaceControllerMessenger = (
       'MultichainAssetsController:getState',
       'AccountsController:getAccountByAddress',
       'SnapController:get',
+      'AccountsController:getSelectedMultichainAccount',
+      'AccountsController:setSelectedAccount',
     ],
     allowedEvents: [
       'NotificationServicesController:notificationsListUpdated',
@@ -834,6 +837,23 @@ export const getRestrictedSnapInterfaceControllerMessenger = (
       }),
     );
 
+    messenger.registerActionHandler(
+      'AccountsController:getSelectedMultichainAccount',
+      () =>
+        ({
+          address: '0x1234567890123456789012345678901234567890',
+          id: 'foo',
+          scopes: ['eip155:0'],
+        }) as unknown as InternalAccount,
+    );
+
+    messenger.registerActionHandler(
+      'AccountsController:setSelectedAccount',
+      (_id: string) => {
+        // no-op
+      },
+    );
+
     messenger.registerActionHandler('SnapController:get', (snapId: string) => {
       return getSnapObject({ id: snapId as SnapId });
     });

From 1d2a04e331fa3d9e583631a9530cbcbc31db57d5 Mon Sep 17 00:00:00 2001
From: Guillaume Roux <hello@guillaumerx.fr>
Date: Wed, 12 Feb 2025 15:55:43 +0100
Subject: [PATCH 04/27] move function to `snap-utils` and add JSDocs

---
 .../src/interface/SnapInterfaceController.ts  | 12 +++++++++++-
 .../src/interface/utils.test.tsx              | 14 --------------
 .../snaps-controllers/src/interface/utils.ts  |  1 +
 packages/snaps-utils/src/address.test.ts      | 15 +++++++++++++++
 packages/snaps-utils/src/address.ts           | 19 +++++++++++++++++++
 packages/snaps-utils/src/index.ts             |  1 +
 6 files changed, 47 insertions(+), 15 deletions(-)
 create mode 100644 packages/snaps-utils/src/address.test.ts
 create mode 100644 packages/snaps-utils/src/address.ts

diff --git a/packages/snaps-controllers/src/interface/SnapInterfaceController.ts b/packages/snaps-controllers/src/interface/SnapInterfaceController.ts
index 480e7bace9..ae1594f798 100644
--- a/packages/snaps-controllers/src/interface/SnapInterfaceController.ts
+++ b/packages/snaps-controllers/src/interface/SnapInterfaceController.ts
@@ -456,14 +456,24 @@ export class SnapInterfaceController extends BaseController<
     );
   }
 
+  /**
+   * Get the selected account in the client.
+   *
+   * @returns The selected account.
+   */
   #getSelectedAccount() {
     return this.messagingSystem.call(
       'AccountsController:getSelectedMultichainAccount',
     );
   }
 
+  /**
+   * Set the selected account in the client.
+   *
+   * @param accountId - The account id.
+   */
   #setSelectedAccount(accountId: string) {
-    return this.messagingSystem.call(
+    this.messagingSystem.call(
       'AccountsController:setSelectedAccount',
       accountId,
     );
diff --git a/packages/snaps-controllers/src/interface/utils.test.tsx b/packages/snaps-controllers/src/interface/utils.test.tsx
index c979ce213e..7cff215229 100644
--- a/packages/snaps-controllers/src/interface/utils.test.tsx
+++ b/packages/snaps-controllers/src/interface/utils.test.tsx
@@ -74,20 +74,6 @@ describe('assertNameIsUnique', () => {
   });
 });
 
-describe('createAddressList', () => {
-  it('creates an address list from an account', () => {
-    const result = createAddressList(
-      '0x1234567890123456789012345678901234567890',
-      ['eip155:1', 'eip155:2'],
-    );
-
-    expect(result).toStrictEqual([
-      'eip155:1:0x1234567890123456789012345678901234567890',
-      'eip155:2:0x1234567890123456789012345678901234567890',
-    ]);
-  });
-});
-
 describe('constructState', () => {
   const elementDataGetters = {
     getAssetsState: jest.fn(),
diff --git a/packages/snaps-controllers/src/interface/utils.ts b/packages/snaps-controllers/src/interface/utils.ts
index 2080239344..1ce99b1b71 100644
--- a/packages/snaps-controllers/src/interface/utils.ts
+++ b/packages/snaps-controllers/src/interface/utils.ts
@@ -27,6 +27,7 @@ import type {
 import { isJSXElementUnsafe } from '@metamask/snaps-sdk/jsx';
 import type { InternalAccount } from '@metamask/snaps-utils';
 import {
+  createAddressList,
   getJsonSizeUnsafe,
   getJsxChildren,
   getJsxElementFromComponent,
diff --git a/packages/snaps-utils/src/address.test.ts b/packages/snaps-utils/src/address.test.ts
new file mode 100644
index 0000000000..58de649017
--- /dev/null
+++ b/packages/snaps-utils/src/address.test.ts
@@ -0,0 +1,15 @@
+import { createAddressList } from './address';
+
+describe('createAddressList', () => {
+  it('creates an address list from an account', () => {
+    const result = createAddressList(
+      '0x1234567890123456789012345678901234567890',
+      ['eip155:1', 'eip155:2'],
+    );
+
+    expect(result).toStrictEqual([
+      'eip155:1:0x1234567890123456789012345678901234567890',
+      'eip155:2:0x1234567890123456789012345678901234567890',
+    ]);
+  });
+});
diff --git a/packages/snaps-utils/src/address.ts b/packages/snaps-utils/src/address.ts
new file mode 100644
index 0000000000..0bc82e5215
--- /dev/null
+++ b/packages/snaps-utils/src/address.ts
@@ -0,0 +1,19 @@
+import type { CaipAccountId, CaipChainId } from '@metamask/utils';
+import { parseCaipChainId, toCaipAccountId } from '@metamask/utils';
+
+/**
+ * Create a list of CAIP account IDs from an address and a list of scopes.
+ *
+ * @param address - The address to create the account IDs from.
+ * @param scopes - The scopes to create the account IDs from.
+ * @returns The list of CAIP account IDs.
+ */
+export function createAddressList(
+  address: string,
+  scopes: CaipChainId[],
+): CaipAccountId[] {
+  return scopes.map((scope) => {
+    const { namespace, reference } = parseCaipChainId(scope);
+    return toCaipAccountId(namespace, reference, address);
+  });
+}
diff --git a/packages/snaps-utils/src/index.ts b/packages/snaps-utils/src/index.ts
index b51634f29b..a27ad6f209 100644
--- a/packages/snaps-utils/src/index.ts
+++ b/packages/snaps-utils/src/index.ts
@@ -1,4 +1,5 @@
 export type * from './account';
+export * from './address';
 export * from './array';
 export * from './auxiliary-files';
 export * from './base64';

From 3fd96f47d4d4f2142e480df0be053a9941cc59dc Mon Sep 17 00:00:00 2001
From: Guillaume Roux <hello@guillaumerx.fr>
Date: Thu, 13 Feb 2025 11:52:44 +0100
Subject: [PATCH 05/27] address requested changes

---
 .../send-flow/src/components/SendForm.tsx     |  2 +-
 .../SnapInterfaceController.test.tsx          |  4 +-
 .../src/interface/utils.test.tsx              | 29 ++++++++
 .../snaps-controllers/src/interface/utils.ts  | 72 ++++++++++++++++++-
 .../src/test-utils/controller.ts              | 13 ++++
 .../components/form/AccountSelector.test.tsx  | 18 ++---
 .../jsx/components/form/AccountSelector.ts    | 20 +++---
 .../snaps-sdk/src/jsx/validation.test.tsx     | 14 ++--
 packages/snaps-sdk/src/jsx/validation.ts      |  4 +-
 .../src/{address.test.ts => account.test.ts}  |  8 +--
 packages/snaps-utils/src/account.ts           | 22 ++++++
 packages/snaps-utils/src/address.ts           | 19 -----
 packages/snaps-utils/src/index.ts             |  2 +-
 13 files changed, 170 insertions(+), 57 deletions(-)
 rename packages/snaps-utils/src/{address.test.ts => account.test.ts} (56%)
 delete mode 100644 packages/snaps-utils/src/address.ts

diff --git a/packages/examples/packages/send-flow/src/components/SendForm.tsx b/packages/examples/packages/send-flow/src/components/SendForm.tsx
index 92787d58b5..5b4f78b52f 100644
--- a/packages/examples/packages/send-flow/src/components/SendForm.tsx
+++ b/packages/examples/packages/send-flow/src/components/SendForm.tsx
@@ -44,7 +44,7 @@ export const SendForm: SnapComponent<SendFormProps> = ({
 }) => (
   <Form name="sendForm">
     <Field label="From account">
-      <AccountSelector name="accountSelector" switchSelectedAccount />
+      <AccountSelector name="accountSelector" switchGlobalAccount />
     </Field>
     <Field label="Send amount" error={errors?.amount}>
       <Box>
diff --git a/packages/snaps-controllers/src/interface/SnapInterfaceController.test.tsx b/packages/snaps-controllers/src/interface/SnapInterfaceController.test.tsx
index 204a8201d5..8a9bec9300 100644
--- a/packages/snaps-controllers/src/interface/SnapInterfaceController.test.tsx
+++ b/packages/snaps-controllers/src/interface/SnapInterfaceController.test.tsx
@@ -224,8 +224,8 @@ describe('SnapInterfaceController', () => {
             <Field label="baz">
               <AccountSelector
                 name="baz"
-                switchSelectedAccount
-                selectedAddress="eip155:0:0x1234567890123456789012345678901234567890"
+                switchGlobalAccount
+                value="eip155:0:0x1234567890123456789012345678901234567890"
               />
             </Field>
             <Field label="foobar">
diff --git a/packages/snaps-controllers/src/interface/utils.test.tsx b/packages/snaps-controllers/src/interface/utils.test.tsx
index 7cff215229..50c099328b 100644
--- a/packages/snaps-controllers/src/interface/utils.test.tsx
+++ b/packages/snaps-controllers/src/interface/utils.test.tsx
@@ -646,9 +646,13 @@ describe('constructState', () => {
       <Box>
         <AssetSelector
           name="foo"
+<<<<<<< HEAD
           addresses={[
             'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp:7S3P4HxJpyyigGzodYwHtCxZyUQe9JiBMHyRWXArAaKv',
           ]}
+=======
+          value="eip155:0:0x1234567890123456789012345678901234567890"
+>>>>>>> 82969fe5 (address requested changes)
         />
       </Box>
     );
@@ -727,9 +731,13 @@ describe('constructState', () => {
           <Field label="foo">
             <AssetSelector
               name="foo"
+<<<<<<< HEAD
               addresses={[
                 'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp:7S3P4HxJpyyigGzodYwHtCxZyUQe9JiBMHyRWXArAaKv',
               ]}
+=======
+              value="eip155:0:0x1234567890123456789012345678901234567890"
+>>>>>>> 82969fe5 (address requested changes)
             />
           </Field>
         </Form>
@@ -766,6 +774,7 @@ describe('constructState', () => {
 
     const element = (
       <Box>
+<<<<<<< HEAD
         <Form name="form">
           <Field label="foo">
             <AssetSelector
@@ -777,6 +786,12 @@ describe('constructState', () => {
             />
           </Field>
         </Form>
+=======
+        <AccountSelector
+          name="foo"
+          value="bip122:000000000019d6689c085ae165831e93:128Lkh3S7CkDTBZ8W7BbpsN3YYizJMp8p6"
+        />
+>>>>>>> 82969fe5 (address requested changes)
       </Box>
     );
 
@@ -829,6 +844,7 @@ describe('constructState', () => {
     });
   });
 
+<<<<<<< HEAD
   it('sets the value to null if the account has no assets', () => {
     elementDataGetters.getAssetsState.mockReturnValue({
       assetsMetadata: {
@@ -845,14 +861,27 @@ describe('constructState', () => {
     elementDataGetters.getAccountByAddress.mockReturnValue({
       id: MOCK_ACCOUNT_ID,
     });
+=======
+  it('switches the selected account if `switchGlobalAccount` is set', () => {
+    getAccountByAddress.mockImplementation((address: string) => ({
+      id: 'foo',
+      address,
+      scopes: ['eip155:0'],
+    }));
+>>>>>>> 82969fe5 (address requested changes)
 
     const element = (
       <Box>
         <AssetSelector
           name="foo"
+<<<<<<< HEAD
           addresses={[
             'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp:7S3P4HxJpyyigGzodYwHtCxZyUQe9JiBMHyRWXArAaKv',
           ]}
+=======
+          value="eip155:0:0x1234567890123456789012345678901234567890"
+          switchGlobalAccount
+>>>>>>> 82969fe5 (address requested changes)
         />
       </Box>
     );
diff --git a/packages/snaps-controllers/src/interface/utils.ts b/packages/snaps-controllers/src/interface/utils.ts
index 1ce99b1b71..b85b50acbb 100644
--- a/packages/snaps-controllers/src/interface/utils.ts
+++ b/packages/snaps-controllers/src/interface/utils.ts
@@ -27,7 +27,7 @@ import type {
 import { isJSXElementUnsafe } from '@metamask/snaps-sdk/jsx';
 import type { InternalAccount } from '@metamask/snaps-utils';
 import {
-  createAddressList,
+  createAccountList,
   getJsonSizeUnsafe,
   getJsxChildren,
   getJsxElementFromComponent,
@@ -101,9 +101,15 @@ type GetAccountByAddress = (
 
 type SetSelectedAccount = (accountId: string) => void;
 
+/**
+ * A function to get the selected account in the client.
+ *
+ * @returns The selected account.
+ */
 type GetSelectedAccount = () => InternalAccount | undefined;
 
 /**
+<<<<<<< HEAD
  * Data getters for elements.
  * This is used to get data from elements that is not directly accessible from the element itself.
  *
@@ -116,6 +122,23 @@ type ElementDataGetters = {
   getSelectedAccount: GetSelectedAccount;
   setSelectedAccount: SetSelectedAccount;
 };
+=======
+ * A function to get an account by address.
+ *
+ * @param address - The address of the account.
+ * @returns The account with the given address or undefined if none.
+ */
+type GetAccountByAddress = (
+  address: CaipAccountAddress,
+) => InternalAccount | undefined;
+
+/**
+ * A function to set the selected account in the client.
+ *
+ * @param accountId - The ID of the account to set as selected.
+ */
+type SetSelectedAccount = (accountId: string) => void;
+>>>>>>> 82969fe5 (address requested changes)
 
 /**
  * Get a JSX element from a component or JSX element. If the component is a
@@ -276,7 +299,7 @@ function constructComponentSpecificDefaultState(
 
       const { id, address, scopes } = account;
 
-      const addresses = createAddressList(address, scopes);
+      const addresses = createAccountList(address, scopes);
 
       return { accountId: id, addresses };
     }
@@ -297,6 +320,7 @@ function constructComponentSpecificDefaultState(
 }
 
 /**
+<<<<<<< HEAD
  * Get the state value for an asset selector.
  *
  * @param value - The asset selector value.
@@ -323,6 +347,41 @@ export function getAssetSelectorStateValue(
     name: asset.name ?? asset.symbol ?? 'Unknown',
     symbol: asset.symbol ?? 'Unknown',
   };
+=======
+ * Get the state value for an account selector.
+ *
+ * @param element - The account selector element.
+ * @param getAccountByAddress - A function to get an account by address.
+ * @param setSelectedAccount - A function to set the selected account in the client.
+ * @returns The state value for the account selector.
+ */
+function getAccountSelectorStateValue(
+  element: AccountSelectorElement,
+  getAccountByAddress: GetAccountByAddress,
+  setSelectedAccount: SetSelectedAccount,
+) {
+  if (!element.props.value) {
+    return undefined;
+  }
+
+  const { address: parsedAddress } = parseCaipAccountId(element.props.value);
+
+  const account = getAccountByAddress(parsedAddress);
+
+  if (!account) {
+    return undefined;
+  }
+
+  if (element.props.switchGlobalAccount) {
+    setSelectedAccount(account.id);
+  }
+
+  const { id, address, scopes } = account;
+
+  const addresses = createAccountList(address, scopes);
+
+  return { accountId: id, addresses };
+>>>>>>> 82969fe5 (address requested changes)
 }
 
 /**
@@ -359,6 +418,7 @@ function getComponentStateValue(
     case 'Checkbox':
       return element.props.checked;
 
+<<<<<<< HEAD
     case 'AssetSelector':
       return getAssetSelectorStateValue(element.props.value, getAssetsState);
 
@@ -392,6 +452,14 @@ function getComponentStateValue(
 
       return { accountId: id, addresses };
     }
+=======
+    case 'AccountSelector':
+      return getAccountSelectorStateValue(
+        element,
+        getAccountByAddress,
+        setSelectedAccount,
+      );
+>>>>>>> 82969fe5 (address requested changes)
 
     default:
       return element.props.value;
diff --git a/packages/snaps-controllers/src/test-utils/controller.ts b/packages/snaps-controllers/src/test-utils/controller.ts
index bab83df046..f7df8ea78e 100644
--- a/packages/snaps-controllers/src/test-utils/controller.ts
+++ b/packages/snaps-controllers/src/test-utils/controller.ts
@@ -833,18 +833,31 @@ export const getRestrictedSnapInterfaceControllerMessenger = (
       (address: string) => ({
         address,
         id: 'foo',
+<<<<<<< HEAD
         scopes: ['solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp'],
+=======
+        scopes: ['eip155:0'],
+>>>>>>> 82969fe5 (address requested changes)
       }),
     );
 
     messenger.registerActionHandler(
       'AccountsController:getSelectedMultichainAccount',
+<<<<<<< HEAD
       () =>
         ({
           address: '0x1234567890123456789012345678901234567890',
           id: 'foo',
           scopes: ['eip155:0'],
         }) as unknown as InternalAccount,
+=======
+      // @ts-expect-error partial mock
+      () => ({
+        address: '0x1234567890123456789012345678901234567890',
+        id: 'foo',
+        scopes: ['eip155:0'],
+      }),
+>>>>>>> 82969fe5 (address requested changes)
     );
 
     messenger.registerActionHandler(
diff --git a/packages/snaps-sdk/src/jsx/components/form/AccountSelector.test.tsx b/packages/snaps-sdk/src/jsx/components/form/AccountSelector.test.tsx
index fb86744433..37d6ad4006 100644
--- a/packages/snaps-sdk/src/jsx/components/form/AccountSelector.test.tsx
+++ b/packages/snaps-sdk/src/jsx/components/form/AccountSelector.test.tsx
@@ -48,24 +48,24 @@ describe('AccountSelector', () => {
 
   it('returns an account selector element with the switchGlobalAccount filter prop', () => {
     const result = (
-      <AccountSelector name="account" switchSelectedAccount={true} />
+      <AccountSelector name="account" switchGlobalAccount={true} />
     );
 
     expect(result).toStrictEqual({
       type: 'AccountSelector',
       props: {
         name: 'account',
-        switchSelectedAccount: true,
+        switchGlobalAccount: true,
       },
       key: null,
     });
   });
 
-  it('returns an account selector element with a selectedAccount prop', () => {
+  it('returns an account selector element with a value prop', () => {
     const result = (
       <AccountSelector
         name="account"
-        selectedAddress="eip155:1:0x1234567890abcdef1234567890abcdef12345678"
+        value="eip155:1:0x1234567890abcdef1234567890abcdef12345678"
       />
     );
 
@@ -73,7 +73,7 @@ describe('AccountSelector', () => {
       type: 'AccountSelector',
       props: {
         name: 'account',
-        selectedAddress: 'eip155:1:0x1234567890abcdef1234567890abcdef12345678',
+        value: 'eip155:1:0x1234567890abcdef1234567890abcdef12345678',
       },
       key: null,
     });
@@ -85,8 +85,8 @@ describe('AccountSelector', () => {
         name="account"
         chainIds={['bip122:000000000019d6689c085ae165831e93']}
         hideExternalAccounts={true}
-        switchSelectedAccount={true}
-        selectedAddress="bip122:000000000019d6689c085ae165831e93:128Lkh3S7CkDTBZ8W7BbpsN3YYizJMp8p6"
+        switchGlobalAccount={true}
+        value="bip122:000000000019d6689c085ae165831e93:128Lkh3S7CkDTBZ8W7BbpsN3YYizJMp8p6"
       />
     );
 
@@ -96,8 +96,8 @@ describe('AccountSelector', () => {
         name: 'account',
         chainIds: ['bip122:000000000019d6689c085ae165831e93'],
         hideExternalAccounts: true,
-        switchSelectedAccount: true,
-        selectedAddress:
+        switchGlobalAccount: true,
+        value:
           'bip122:000000000019d6689c085ae165831e93:128Lkh3S7CkDTBZ8W7BbpsN3YYizJMp8p6',
       },
       key: null,
diff --git a/packages/snaps-sdk/src/jsx/components/form/AccountSelector.ts b/packages/snaps-sdk/src/jsx/components/form/AccountSelector.ts
index be41877479..c32dbcadc3 100644
--- a/packages/snaps-sdk/src/jsx/components/form/AccountSelector.ts
+++ b/packages/snaps-sdk/src/jsx/components/form/AccountSelector.ts
@@ -7,17 +7,17 @@ import { createSnapComponent } from '../../component';
  *
  * @property name - The name of the account selector. This is used to identify the
  * state in the form data.
- * @property hideExternalAccounts - Whether to hide accounts that doesn't belong to the snap.
+ * @property hideExternalAccounts - Whether to hide accounts that don't belong to the snap.
  * @property chainIds - The chain IDs to filter the accounts to show.
- * @property switchSelectedAccount - Whether to switch the selected account in the client.
- * @property selectedAddress - The selected address.
+ * @property switchGlobalAccount - Whether to switch the selected account in the client.
+ * @property value - The selected address.
  */
 export type AccountSelectorProps = {
   name: string;
   hideExternalAccounts?: boolean | undefined;
   chainIds?: CaipChainId[] | undefined;
-  switchSelectedAccount?: boolean | undefined;
-  selectedAddress?: CaipAccountId | undefined;
+  switchGlobalAccount?: boolean | undefined;
+  value?: CaipAccountId | undefined;
 };
 
 const TYPE = 'AccountSelector';
@@ -30,8 +30,8 @@ const TYPE = 'AccountSelector';
  * state in the form data.
  * @param props.hideExternalAccounts - Whether to hide accounts that doesn't belong to the snap.
  * @param props.chainIds - The chain IDs to filter the accounts to show.
- * @param props.switchSelectedAccount - Whether to switch the selected account in the client.
- * @param props.selectedAddress - The selected address.
+ * @param props.switchGlobalAccount - Whether to switch the selected account in the client.
+ * @param props.value - The selected address.
  * @returns An account selector element.
  * @example
  * <AccountSelector name="account-selector" />
@@ -40,11 +40,11 @@ const TYPE = 'AccountSelector';
  * @example
  * <AccountSelector name="account-selector" chainIds={['eip155:1']} />
  * @example
- * <AccountSelector name="account-selector" switchSelectedAccount />
+ * <AccountSelector name="account-selector" switchGlobalAccount />
  * @example
- * <AccountSelector name="account-selector" selectedAddress="eip155:1:0x1234..." />
+ * <AccountSelector name="account-selector" value="eip155:1:0x1234..." />
  * @example
- * <AccountSelector name="account-selector" hideExternalAccounts chainIds={['eip155:1']} switchSelectedAccount selectedAddress="eip155:1:0x1234..." />
+ * <AccountSelector name="account-selector" hideExternalAccounts chainIds={['eip155:1']} switchGlobalAccount value="eip155:1:0x1234..." />
  */
 export const AccountSelector = createSnapComponent<
   AccountSelectorProps,
diff --git a/packages/snaps-sdk/src/jsx/validation.test.tsx b/packages/snaps-sdk/src/jsx/validation.test.tsx
index 71ab6fa5aa..b90072d5e0 100644
--- a/packages/snaps-sdk/src/jsx/validation.test.tsx
+++ b/packages/snaps-sdk/src/jsx/validation.test.tsx
@@ -646,17 +646,17 @@ describe('AccountSelectorStruct', () => {
       chainIds={['bip122:000000000019d6689c085ae165831e93']}
     />,
     <AccountSelector name="account" hideExternalAccounts />,
-    <AccountSelector name="account" switchSelectedAccount />,
+    <AccountSelector name="account" switchGlobalAccount />,
     <AccountSelector
       name="account"
-      selectedAddress="eip155:1:0x1234567890abcdef1234567890abcdef12345678"
+      value="eip155:1:0x1234567890abcdef1234567890abcdef12345678"
     />,
     <AccountSelector
       name="account"
       chainIds={['foo:bar']}
       hideExternalAccounts
-      switchSelectedAccount
-      selectedAddress="eip155:1:0x1234567890abcdef1234567890abcdef12345678"
+      switchGlobalAccount
+      value="eip155:1:0x1234567890abcdef1234567890abcdef12345678"
     />,
   ])('validates an account picker element', (value) => {
     expect(is(value, AccountSelectorStruct)).toBe(true);
@@ -676,15 +676,15 @@ describe('AccountSelectorStruct', () => {
       <Text>foo</Text>
     </AccountSelector>,
     // @ts-expect-error - Invalid props.
-    <AccountSelector switchSelectedAccount="foo" />,
+    <AccountSelector switchGlobalAccount="foo" />,
     // @ts-expect-error - Invalid props.
     <AccountSelector chainIds={['bip122:000000000019d6689c085ae165831e93']} />,
     // @ts-expect-error - Invalid props.
-    <AccountSelector selectedAddress={42} />,
+    <AccountSelector value={42} />,
     <AccountSelector
       name="account"
       chainIds={['foo:bar']}
-      selectedAddress="eip155:1:0x1234567890abcdef1234567890abcdef12345678"
+      value="eip155:1:0x1234567890abcdef1234567890abcdef12345678"
       // @ts-expect-error - Invalid props.
       hideExternalAccounts={42}
     />,
diff --git a/packages/snaps-sdk/src/jsx/validation.ts b/packages/snaps-sdk/src/jsx/validation.ts
index 71183ddd3f..0809e6c94f 100644
--- a/packages/snaps-sdk/src/jsx/validation.ts
+++ b/packages/snaps-sdk/src/jsx/validation.ts
@@ -407,8 +407,8 @@ export const AccountSelectorStruct: Describe<AccountSelectorElement> = element(
       Infer<typeof CaipChainIdStruct>[] | undefined,
       null
     >,
-    switchSelectedAccount: optional(boolean()),
-    selectedAddress: optional(CaipAccountIdStruct),
+    switchGlobalAccount: optional(boolean()),
+    value: optional(CaipAccountIdStruct),
   },
 );
 
diff --git a/packages/snaps-utils/src/address.test.ts b/packages/snaps-utils/src/account.test.ts
similarity index 56%
rename from packages/snaps-utils/src/address.test.ts
rename to packages/snaps-utils/src/account.test.ts
index 58de649017..5bf007cc91 100644
--- a/packages/snaps-utils/src/address.test.ts
+++ b/packages/snaps-utils/src/account.test.ts
@@ -1,8 +1,8 @@
-import { createAddressList } from './address';
+import { createAccountList } from './account';
 
-describe('createAddressList', () => {
-  it('creates an address list from an account', () => {
-    const result = createAddressList(
+describe('createAccountList', () => {
+  it('creates an account list from an address and a list of chain IDs', () => {
+    const result = createAccountList(
       '0x1234567890123456789012345678901234567890',
       ['eip155:1', 'eip155:2'],
     );
diff --git a/packages/snaps-utils/src/account.ts b/packages/snaps-utils/src/account.ts
index a1e4dbc972..7c02a2a0d2 100644
--- a/packages/snaps-utils/src/account.ts
+++ b/packages/snaps-utils/src/account.ts
@@ -1,3 +1,4 @@
+<<<<<<< HEAD
 import type { SnapId } from '@metamask/snaps-sdk';
 import type { Json } from '@metamask/utils';
 
@@ -16,3 +17,24 @@ export type InternalAccount = {
     snap?: { id: SnapId; enabled: boolean; name: string };
   };
 };
+=======
+import type { CaipAccountId, CaipChainId } from '@metamask/utils';
+import { parseCaipChainId, toCaipAccountId } from '@metamask/utils';
+
+/**
+ * Create a list of CAIP account IDs from an address and a list of scopes.
+ *
+ * @param address - The address to create the account IDs from.
+ * @param scopes - The scopes to create the account IDs from.
+ * @returns The list of CAIP account IDs.
+ */
+export function createAccountList(
+  address: string,
+  scopes: CaipChainId[],
+): CaipAccountId[] {
+  return scopes.map((scope) => {
+    const { namespace, reference } = parseCaipChainId(scope);
+    return toCaipAccountId(namespace, reference, address);
+  });
+}
+>>>>>>> 82969fe5 (address requested changes)
diff --git a/packages/snaps-utils/src/address.ts b/packages/snaps-utils/src/address.ts
deleted file mode 100644
index 0bc82e5215..0000000000
--- a/packages/snaps-utils/src/address.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import type { CaipAccountId, CaipChainId } from '@metamask/utils';
-import { parseCaipChainId, toCaipAccountId } from '@metamask/utils';
-
-/**
- * Create a list of CAIP account IDs from an address and a list of scopes.
- *
- * @param address - The address to create the account IDs from.
- * @param scopes - The scopes to create the account IDs from.
- * @returns The list of CAIP account IDs.
- */
-export function createAddressList(
-  address: string,
-  scopes: CaipChainId[],
-): CaipAccountId[] {
-  return scopes.map((scope) => {
-    const { namespace, reference } = parseCaipChainId(scope);
-    return toCaipAccountId(namespace, reference, address);
-  });
-}
diff --git a/packages/snaps-utils/src/index.ts b/packages/snaps-utils/src/index.ts
index a27ad6f209..058bbf3eae 100644
--- a/packages/snaps-utils/src/index.ts
+++ b/packages/snaps-utils/src/index.ts
@@ -1,5 +1,5 @@
-export type * from './account';
 export * from './address';
+export type * from './account';
 export * from './array';
 export * from './auxiliary-files';
 export * from './base64';

From c968ab38eeaa2f9ac81273e464e571fc09760012 Mon Sep 17 00:00:00 2001
From: Guillaume Roux <hello@guillaumerx.fr>
Date: Thu, 13 Feb 2025 11:54:32 +0100
Subject: [PATCH 06/27] move `keyring-internal-api` to regular deps

---
 packages/snaps-controllers/package.json | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/snaps-controllers/package.json b/packages/snaps-controllers/package.json
index 650e246027..566ef55c81 100644
--- a/packages/snaps-controllers/package.json
+++ b/packages/snaps-controllers/package.json
@@ -84,7 +84,12 @@
     "@metamask/base-controller": "^8.0.1",
     "@metamask/json-rpc-engine": "^10.0.2",
     "@metamask/json-rpc-middleware-stream": "^8.0.7",
+<<<<<<< HEAD
     "@metamask/key-tree": "^10.1.1",
+=======
+    "@metamask/key-tree": "^10.0.2",
+    "@metamask/keyring-internal-api": "^4.0.1",
+>>>>>>> 6d5e7b45 (move `keyring-internal-api` to regular deps)
     "@metamask/object-multiplex": "^2.1.0",
     "@metamask/permission-controller": "^11.0.6",
     "@metamask/phishing-controller": "^12.5.0",

From 9b981186172670b741658ff0ad23e5c32a89ed9b Mon Sep 17 00:00:00 2001
From: Guillaume Roux <hello@guillaumerx.fr>
Date: Thu, 27 Mar 2025 15:57:39 +0100
Subject: [PATCH 07/27] rebase

---
 packages/snaps-controllers/package.json       |   5 -
 .../src/interface/utils.test.tsx              | 272 +++++++++++++++---
 .../snaps-controllers/src/interface/utils.ts  | 132 ++++-----
 .../src/test-utils/controller.ts              |  17 +-
 .../src/jsx/components/form/index.ts          |   5 +-
 packages/snaps-utils/src/account.ts           |   9 +-
 packages/snaps-utils/src/index.ts             |   3 +-
 yarn.lock                                     |  53 ----
 8 files changed, 296 insertions(+), 200 deletions(-)

diff --git a/packages/snaps-controllers/package.json b/packages/snaps-controllers/package.json
index 566ef55c81..650e246027 100644
--- a/packages/snaps-controllers/package.json
+++ b/packages/snaps-controllers/package.json
@@ -84,12 +84,7 @@
     "@metamask/base-controller": "^8.0.1",
     "@metamask/json-rpc-engine": "^10.0.2",
     "@metamask/json-rpc-middleware-stream": "^8.0.7",
-<<<<<<< HEAD
     "@metamask/key-tree": "^10.1.1",
-=======
-    "@metamask/key-tree": "^10.0.2",
-    "@metamask/keyring-internal-api": "^4.0.1",
->>>>>>> 6d5e7b45 (move `keyring-internal-api` to regular deps)
     "@metamask/object-multiplex": "^2.1.0",
     "@metamask/permission-controller": "^11.0.6",
     "@metamask/phishing-controller": "^12.5.0",
diff --git a/packages/snaps-controllers/src/interface/utils.test.tsx b/packages/snaps-controllers/src/interface/utils.test.tsx
index 50c099328b..71ca2df7ae 100644
--- a/packages/snaps-controllers/src/interface/utils.test.tsx
+++ b/packages/snaps-controllers/src/interface/utils.test.tsx
@@ -623,6 +623,214 @@ describe('constructState', () => {
     });
   });
 
+  it('sets default value for root level AccountSelector', () => {
+    elementDataGetters.getSelectedAccount.mockReturnValue({
+      id: MOCK_ACCOUNT_ID,
+      address: '0x1234567890123456789012345678901234567890',
+      scopes: ['eip155:0'],
+    });
+
+    elementDataGetters.getAccountByAddress.mockImplementation(
+      (address: string) => ({
+        id: MOCK_ACCOUNT_ID,
+        address,
+        scopes: ['eip155:0'],
+      }),
+    );
+
+    const element = (
+      <Box>
+        <AccountSelector name="foo" />
+      </Box>
+    );
+
+    const result = constructState({}, element, elementDataGetters);
+    expect(result).toStrictEqual({
+      foo: {
+        accountId: MOCK_ACCOUNT_ID,
+        addresses: ['eip155:0:0x1234567890123456789012345678901234567890'],
+      },
+    });
+  });
+
+  it('supports root level AccountSelector', () => {
+    elementDataGetters.getSelectedAccount.mockReturnValue({
+      id: MOCK_ACCOUNT_ID,
+      address: '0x1234567890123456789012345678901234567890',
+      scopes: ['eip155:0'],
+    });
+
+    elementDataGetters.getAccountByAddress.mockImplementation(
+      (address: string) => ({
+        id: MOCK_ACCOUNT_ID,
+        address,
+        scopes: ['eip155:0'],
+      }),
+    );
+
+    const element = (
+      <Box>
+        <AccountSelector
+          name="foo"
+          value="eip155:0:0x1234567890123456789012345678901234567890"
+        />
+      </Box>
+    );
+
+    const result = constructState({}, element, elementDataGetters);
+    expect(result).toStrictEqual({
+      foo: {
+        accountId: MOCK_ACCOUNT_ID,
+        addresses: ['eip155:0:0x1234567890123456789012345678901234567890'],
+      },
+    });
+  });
+
+  it('sets default value for AccountSelector in form', () => {
+    elementDataGetters.getSelectedAccount.mockReturnValue({
+      id: MOCK_ACCOUNT_ID,
+      address: '0x1234567890123456789012345678901234567890',
+      scopes: ['eip155:0'],
+    });
+
+    elementDataGetters.getAccountByAddress.mockImplementation(
+      (address: string) => ({
+        id: MOCK_ACCOUNT_ID,
+        address,
+        scopes: ['eip155:0'],
+      }),
+    );
+
+    const element = (
+      <Box>
+        <Form name="form">
+          <Field label="foo">
+            <AccountSelector name="foo" />
+          </Field>
+        </Form>
+      </Box>
+    );
+
+    const result = constructState({}, element, elementDataGetters);
+    expect(result).toStrictEqual({
+      form: {
+        foo: {
+          accountId: MOCK_ACCOUNT_ID,
+          addresses: ['eip155:0:0x1234567890123456789012345678901234567890'],
+        },
+      },
+    });
+  });
+
+  it('supports AccountSelector in form', () => {
+    elementDataGetters.getSelectedAccount.mockReturnValue({
+      id: MOCK_ACCOUNT_ID,
+      address: '0x1234567890123456789012345678901234567890',
+      scopes: ['eip155:0'],
+    });
+
+    elementDataGetters.getAccountByAddress.mockImplementation(
+      (address: string) => ({
+        id: MOCK_ACCOUNT_ID,
+        address,
+        scopes: ['eip155:0'],
+      }),
+    );
+
+    const element = (
+      <Box>
+        <Form name="form">
+          <Field label="foo">
+            <AccountSelector
+              name="foo"
+              value="eip155:0:0x1234567890123456789012345678901234567890"
+            />
+          </Field>
+        </Form>
+      </Box>
+    );
+
+    const result = constructState({}, element, elementDataGetters);
+    expect(result).toStrictEqual({
+      form: {
+        foo: {
+          accountId: MOCK_ACCOUNT_ID,
+          addresses: ['eip155:0:0x1234567890123456789012345678901234567890'],
+        },
+      },
+    });
+  });
+
+  it('sets the selected account to the currently selected account if the account does not exist for AccountSelector', () => {
+    elementDataGetters.getSelectedAccount.mockReturnValue({
+      id: MOCK_ACCOUNT_ID,
+      address: '0x1234567890123456789012345678901234567890',
+      scopes: ['eip155:0'],
+    });
+
+    elementDataGetters.getAccountByAddress.mockReturnValue(undefined);
+
+    const element = (
+      <Box>
+        <AccountSelector
+          name="foo"
+          value="bip122:000000000019d6689c085ae165831e93:128Lkh3S7CkDTBZ8W7BbpsN3YYizJMp8p6"
+        />
+      </Box>
+    );
+
+    const result = constructState({}, element, elementDataGetters);
+
+    expect(result).toStrictEqual({
+      foo: {
+        accountId: MOCK_ACCOUNT_ID,
+        addresses: ['eip155:0:0x1234567890123456789012345678901234567890'],
+      },
+    });
+  });
+
+  it('sets the selected account to null if there is no selected account', () => {
+    elementDataGetters.getSelectedAccount.mockReturnValue(undefined);
+
+    const element = (
+      <Box>
+        <AccountSelector name="foo" />
+      </Box>
+    );
+
+    const result = constructState({}, element, elementDataGetters);
+
+    expect(result).toStrictEqual({
+      foo: null,
+    });
+  });
+
+  it('switches the selected account if `switchGlobalAccount` is set', () => {
+    elementDataGetters.getAccountByAddress.mockImplementation(
+      (address: string) => ({
+        id: MOCK_ACCOUNT_ID,
+        address,
+        scopes: ['eip155:0'],
+      }),
+    );
+
+    const element = (
+      <Box>
+        <AccountSelector
+          name="foo"
+          value="eip155:0:0x1234567890123456789012345678901234567890"
+          switchGlobalAccount
+        />
+      </Box>
+    );
+
+    constructState({}, element, elementDataGetters);
+
+    expect(elementDataGetters.setSelectedAccount).toHaveBeenCalledWith(
+      MOCK_ACCOUNT_ID,
+    );
+  });
+
   it('sets default value for root level AssetSelector', () => {
     elementDataGetters.getAssetsState.mockReturnValue({
       assetsMetadata: {
@@ -646,13 +854,9 @@ describe('constructState', () => {
       <Box>
         <AssetSelector
           name="foo"
-<<<<<<< HEAD
           addresses={[
             'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp:7S3P4HxJpyyigGzodYwHtCxZyUQe9JiBMHyRWXArAaKv',
           ]}
-=======
-          value="eip155:0:0x1234567890123456789012345678901234567890"
->>>>>>> 82969fe5 (address requested changes)
         />
       </Box>
     );
@@ -731,13 +935,9 @@ describe('constructState', () => {
           <Field label="foo">
             <AssetSelector
               name="foo"
-<<<<<<< HEAD
               addresses={[
                 'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp:7S3P4HxJpyyigGzodYwHtCxZyUQe9JiBMHyRWXArAaKv',
               ]}
-=======
-              value="eip155:0:0x1234567890123456789012345678901234567890"
->>>>>>> 82969fe5 (address requested changes)
             />
           </Field>
         </Form>
@@ -774,7 +974,6 @@ describe('constructState', () => {
 
     const element = (
       <Box>
-<<<<<<< HEAD
         <Form name="form">
           <Field label="foo">
             <AssetSelector
@@ -786,12 +985,6 @@ describe('constructState', () => {
             />
           </Field>
         </Form>
-=======
-        <AccountSelector
-          name="foo"
-          value="bip122:000000000019d6689c085ae165831e93:128Lkh3S7CkDTBZ8W7BbpsN3YYizJMp8p6"
-        />
->>>>>>> 82969fe5 (address requested changes)
       </Box>
     );
 
@@ -844,7 +1037,6 @@ describe('constructState', () => {
     });
   });
 
-<<<<<<< HEAD
   it('sets the value to null if the account has no assets', () => {
     elementDataGetters.getAssetsState.mockReturnValue({
       assetsMetadata: {
@@ -861,27 +1053,14 @@ describe('constructState', () => {
     elementDataGetters.getAccountByAddress.mockReturnValue({
       id: MOCK_ACCOUNT_ID,
     });
-=======
-  it('switches the selected account if `switchGlobalAccount` is set', () => {
-    getAccountByAddress.mockImplementation((address: string) => ({
-      id: 'foo',
-      address,
-      scopes: ['eip155:0'],
-    }));
->>>>>>> 82969fe5 (address requested changes)
 
     const element = (
       <Box>
         <AssetSelector
           name="foo"
-<<<<<<< HEAD
           addresses={[
             'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp:7S3P4HxJpyyigGzodYwHtCxZyUQe9JiBMHyRWXArAaKv',
           ]}
-=======
-          value="eip155:0:0x1234567890123456789012345678901234567890"
-          switchGlobalAccount
->>>>>>> 82969fe5 (address requested changes)
         />
       </Box>
     );
@@ -1196,7 +1375,12 @@ describe('getDefaultAsset', () => {
           'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp:7S3P4HxJpyyigGzodYwHtCxZyUQe9JiBMHyRWXArAaKv',
         ],
         undefined,
-        { getAssetsState, getAccountByAddress },
+        {
+          getAssetsState,
+          getAccountByAddress,
+          getSelectedAccount: jest.fn(),
+          setSelectedAccount: jest.fn(),
+        },
       ),
     ).toStrictEqual({
       asset: 'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp/slip44:501',
@@ -1231,7 +1415,12 @@ describe('getDefaultAsset', () => {
           'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp:7S3P4HxJpyyigGzodYwHtCxZyUQe9JiBMHyRWXArAaKv',
         ],
         undefined,
-        { getAssetsState, getAccountByAddress },
+        {
+          getAssetsState,
+          getAccountByAddress,
+          getSelectedAccount: jest.fn(),
+          setSelectedAccount: jest.fn(),
+        },
       ),
     ).toStrictEqual({
       asset:
@@ -1259,7 +1448,12 @@ describe('getDefaultAsset', () => {
           'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp:7S3P4HxJpyyigGzodYwHtCxZyUQe9JiBMHyRWXArAaKv',
         ],
         undefined,
-        { getAssetsState, getAccountByAddress },
+        {
+          getAssetsState,
+          getAccountByAddress,
+          getSelectedAccount: jest.fn(),
+          setSelectedAccount: jest.fn(),
+        },
       ),
     ).toBeNull();
   });
@@ -1295,7 +1489,12 @@ describe('getDefaultAsset', () => {
           'solana:EtWTRABZaYq6iMfeYKouRu166VU2xqa1:7S3P4HxJpyyigGzodYwHtCxZyUQe9JiBMHyRWXArAaKv',
         ],
         ['solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp'],
-        { getAssetsState, getAccountByAddress },
+        {
+          getAssetsState,
+          getAccountByAddress,
+          getSelectedAccount: jest.fn(),
+          setSelectedAccount: jest.fn(),
+        },
       ),
     ).toStrictEqual({
       asset: 'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp/slip44:501',
@@ -1320,7 +1519,12 @@ describe('getDefaultAsset', () => {
           'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp:7S3P4HxJpyyigGzodYwHtCxZyUQe9JiBMHyRWXArAaKv',
         ],
         undefined,
-        { getAssetsState, getAccountByAddress },
+        {
+          getAssetsState,
+          getAccountByAddress,
+          getSelectedAccount: jest.fn(),
+          setSelectedAccount: jest.fn(),
+        },
       ),
     ).toThrow(
       'Account not found for address: solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp:7S3P4HxJpyyigGzodYwHtCxZyUQe9JiBMHyRWXArAaKv.',
diff --git a/packages/snaps-controllers/src/interface/utils.ts b/packages/snaps-controllers/src/interface/utils.ts
index b85b50acbb..a5cc4a7a5d 100644
--- a/packages/snaps-controllers/src/interface/utils.ts
+++ b/packages/snaps-controllers/src/interface/utils.ts
@@ -54,6 +54,7 @@ const STATEFUL_COMPONENT_TYPES = [
   'Selector',
   'AssetSelector',
   'AddressInput',
+  'AccountSelector',
 ] as const;
 
 /**
@@ -99,6 +100,11 @@ type GetAccountByAddress = (
   address: CaipAccountId,
 ) => InternalAccount | undefined;
 
+/**
+ * A function to set the selected account in the client.
+ *
+ * @param accountId - The account ID.
+ */
 type SetSelectedAccount = (accountId: string) => void;
 
 /**
@@ -109,7 +115,6 @@ type SetSelectedAccount = (accountId: string) => void;
 type GetSelectedAccount = () => InternalAccount | undefined;
 
 /**
-<<<<<<< HEAD
  * Data getters for elements.
  * This is used to get data from elements that is not directly accessible from the element itself.
  *
@@ -122,23 +127,6 @@ type ElementDataGetters = {
   getSelectedAccount: GetSelectedAccount;
   setSelectedAccount: SetSelectedAccount;
 };
-=======
- * A function to get an account by address.
- *
- * @param address - The address of the account.
- * @returns The account with the given address or undefined if none.
- */
-type GetAccountByAddress = (
-  address: CaipAccountAddress,
-) => InternalAccount | undefined;
-
-/**
- * A function to set the selected account in the client.
- *
- * @param accountId - The ID of the account to set as selected.
- */
-type SetSelectedAccount = (accountId: string) => void;
->>>>>>> 82969fe5 (address requested changes)
 
 /**
  * Get a JSX element from a component or JSX element. If the component is a
@@ -234,23 +222,6 @@ export function getDefaultAsset(
   };
 }
 
-/**
- * Create a list of CAIP account IDs from an address and a list of scopes.
- *
- * @param address - The address to create the account IDs from.
- * @param scopes - The scopes to create the account IDs from.
- * @returns The list of CAIP account IDs.
- */
-export function createAddressList(
-  address: string,
-  scopes: CaipChainId[],
-): CaipAccountId[] {
-  return scopes.map((scope) => {
-    const { namespace, reference } = parseCaipChainId(scope);
-    return toCaipAccountId(namespace, reference, address);
-  });
-}
-
 /**
  * Construct default state for a component.
  *
@@ -290,19 +261,8 @@ function constructComponentSpecificDefaultState(
       return children[0]?.props.value;
     }
 
-    case 'AccountSelector': {
-      const account = elementDataGetters.getSelectedAccount();
-
-      if (!account) {
-        return null;
-      }
-
-      const { id, address, scopes } = account;
-
-      const addresses = createAccountList(address, scopes);
-
-      return { accountId: id, addresses };
-    }
+    case 'AccountSelector':
+      return getAccountSelectorDefaultState(elementDataGetters);
 
     case 'Checkbox':
       return false;
@@ -320,7 +280,6 @@ function constructComponentSpecificDefaultState(
 }
 
 /**
-<<<<<<< HEAD
  * Get the state value for an asset selector.
  *
  * @param value - The asset selector value.
@@ -347,7 +306,44 @@ export function getAssetSelectorStateValue(
     name: asset.name ?? asset.symbol ?? 'Unknown',
     symbol: asset.symbol ?? 'Unknown',
   };
-=======
+}
+
+/**
+ * Get the default state for an account selector.
+ *
+ * @param elementDataGetters - Data getters for the element.
+ * @param elementDataGetters.getSelectedAccount - A function to get the selected account in the client.
+ *
+ * @returns The default state for the account selector.
+ */
+export function getAccountSelectorDefaultState({
+  getSelectedAccount,
+}: ElementDataGetters) {
+  const account = getSelectedAccount();
+
+  if (!account) {
+    return null;
+  }
+
+  return formatAccountSelectorStateValue(account);
+}
+
+/**
+ * Format the state value for an account selector.
+ *
+ * @param account - The account to format.
+ *
+ * @returns The state value for the account selector.
+ */
+export function formatAccountSelectorStateValue(account: InternalAccount) {
+  const { id, address, scopes } = account;
+
+  const addresses = createAccountList(address, scopes);
+
+  return { accountId: id, addresses };
+}
+
+/**
  * Get the state value for an account selector.
  *
  * @param element - The account selector element.
@@ -364,9 +360,7 @@ function getAccountSelectorStateValue(
     return undefined;
   }
 
-  const { address: parsedAddress } = parseCaipAccountId(element.props.value);
-
-  const account = getAccountByAddress(parsedAddress);
+  const account = getAccountByAddress(element.props.value);
 
   if (!account) {
     return undefined;
@@ -376,12 +370,7 @@ function getAccountSelectorStateValue(
     setSelectedAccount(account.id);
   }
 
-  const { id, address, scopes } = account;
-
-  const addresses = createAccountList(address, scopes);
-
-  return { accountId: id, addresses };
->>>>>>> 82969fe5 (address requested changes)
+  return formatAccountSelectorStateValue(account);
 }
 
 /**
@@ -394,7 +383,7 @@ function getAccountSelectorStateValue(
  * @param elementDataGetters - Data getters for the element.
  * @param elementDataGetters.getAssetsState - A function to get the MultichainAssetController state.
  * @param elementDataGetters.getAccountByAddress - A function to get an account by its address.
- * @param elementDataGetters.setSelectedAccount
+ * @param elementDataGetters.setSelectedAccount - A function to set the selected account in the client.
  * @returns The state value for a given component.
  */
 function getComponentStateValue(
@@ -418,7 +407,6 @@ function getComponentStateValue(
     case 'Checkbox':
       return element.props.checked;
 
-<<<<<<< HEAD
     case 'AssetSelector':
       return getAssetSelectorStateValue(element.props.value, getAssetsState);
 
@@ -431,35 +419,13 @@ function getComponentStateValue(
       const { namespace, reference } = parseCaipChainId(element.props.chainId);
       return toCaipAccountId(namespace, reference, element.props.value);
     }
-    case 'AccountSelector': {
-      if (!element.props.selectedAddress) {
-        return undefined;
-      }
 
-      const account = getAccountByAddress(element.props.selectedAddress);
-
-      if (!account) {
-        return undefined;
-      }
-
-      if (element.props.switchSelectedAccount) {
-        setSelectedAccount(account.id);
-      }
-
-      const { id, address, scopes } = account;
-
-      const addresses = createAddressList(address, scopes);
-
-      return { accountId: id, addresses };
-    }
-=======
     case 'AccountSelector':
       return getAccountSelectorStateValue(
         element,
         getAccountByAddress,
         setSelectedAccount,
       );
->>>>>>> 82969fe5 (address requested changes)
 
     default:
       return element.props.value;
diff --git a/packages/snaps-controllers/src/test-utils/controller.ts b/packages/snaps-controllers/src/test-utils/controller.ts
index f7df8ea78e..38081f98f3 100644
--- a/packages/snaps-controllers/src/test-utils/controller.ts
+++ b/packages/snaps-controllers/src/test-utils/controller.ts
@@ -832,32 +832,19 @@ export const getRestrictedSnapInterfaceControllerMessenger = (
       // @ts-expect-error partial mock
       (address: string) => ({
         address,
-        id: 'foo',
-<<<<<<< HEAD
+        id: MOCK_ACCOUNT_ID,
         scopes: ['solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp'],
-=======
-        scopes: ['eip155:0'],
->>>>>>> 82969fe5 (address requested changes)
       }),
     );
 
     messenger.registerActionHandler(
       'AccountsController:getSelectedMultichainAccount',
-<<<<<<< HEAD
-      () =>
-        ({
-          address: '0x1234567890123456789012345678901234567890',
-          id: 'foo',
-          scopes: ['eip155:0'],
-        }) as unknown as InternalAccount,
-=======
       // @ts-expect-error partial mock
       () => ({
         address: '0x1234567890123456789012345678901234567890',
-        id: 'foo',
+        id: MOCK_ACCOUNT_ID,
         scopes: ['eip155:0'],
       }),
->>>>>>> 82969fe5 (address requested changes)
     );
 
     messenger.registerActionHandler(
diff --git a/packages/snaps-sdk/src/jsx/components/form/index.ts b/packages/snaps-sdk/src/jsx/components/form/index.ts
index 70918b5c82..6fe932c3b4 100644
--- a/packages/snaps-sdk/src/jsx/components/form/index.ts
+++ b/packages/snaps-sdk/src/jsx/components/form/index.ts
@@ -14,6 +14,8 @@ import type { RadioGroupElement } from './RadioGroup';
 import type { SelectorElement } from './Selector';
 import type { SelectorOptionElement } from './SelectorOption';
 
+export * from './AccountSelector';
+export * from './AddressInput';
 export * from './AssetSelector';
 export * from './Button';
 export * from './Checkbox';
@@ -27,12 +29,11 @@ export * from './Form';
 export * from './Input';
 export * from './Selector';
 export * from './SelectorOption';
-export * from './AddressInput';
 
 export type StandardFormElement =
   | AccountSelectorElement
-  | AssetSelectorElement
   | AddressInputElement
+  | AssetSelectorElement
   | ButtonElement
   | CheckboxElement
   | FormElement
diff --git a/packages/snaps-utils/src/account.ts b/packages/snaps-utils/src/account.ts
index 7c02a2a0d2..76810e6b09 100644
--- a/packages/snaps-utils/src/account.ts
+++ b/packages/snaps-utils/src/account.ts
@@ -1,6 +1,6 @@
-<<<<<<< HEAD
 import type { SnapId } from '@metamask/snaps-sdk';
-import type { Json } from '@metamask/utils';
+import type { Json, CaipAccountId, CaipChainId } from '@metamask/utils';
+import { parseCaipChainId, toCaipAccountId } from '@metamask/utils';
 
 /**
  * Copy of the original type from
@@ -12,14 +12,12 @@ export type InternalAccount = {
   address: string;
   options: Record<string, Json>;
   methods: string[];
+  scopes: CaipChainId[];
   metadata: {
     name: string;
     snap?: { id: SnapId; enabled: boolean; name: string };
   };
 };
-=======
-import type { CaipAccountId, CaipChainId } from '@metamask/utils';
-import { parseCaipChainId, toCaipAccountId } from '@metamask/utils';
 
 /**
  * Create a list of CAIP account IDs from an address and a list of scopes.
@@ -37,4 +35,3 @@ export function createAccountList(
     return toCaipAccountId(namespace, reference, address);
   });
 }
->>>>>>> 82969fe5 (address requested changes)
diff --git a/packages/snaps-utils/src/index.ts b/packages/snaps-utils/src/index.ts
index 058bbf3eae..00fef34a89 100644
--- a/packages/snaps-utils/src/index.ts
+++ b/packages/snaps-utils/src/index.ts
@@ -1,5 +1,4 @@
-export * from './address';
-export type * from './account';
+export * from './account';
 export * from './array';
 export * from './auxiliary-files';
 export * from './base64';
diff --git a/yarn.lock b/yarn.lock
index 01dac4b6b5..344017fcc2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3679,41 +3679,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@metamask/keyring-api@npm:^16.1.0":
-  version: 16.1.0
-  resolution: "@metamask/keyring-api@npm:16.1.0"
-  dependencies:
-    "@metamask/keyring-utils": "npm:^2.0.0"
-    "@metamask/superstruct": "npm:^3.1.0"
-    "@metamask/utils": "npm:^11.1.0"
-    bech32: "npm:^2.0.0"
-  checksum: 10/6a3877e8e70b02728d4dc056a0eab5d961dd3089236539827ffb4194a3acdc9c71436cc3248ed1d6bf62d3dc0b6e69e2379177db6d690af1a77d4698767324fd
-  languageName: node
-  linkType: hard
-
-"@metamask/keyring-internal-api@npm:^4.0.1":
-  version: 4.0.1
-  resolution: "@metamask/keyring-internal-api@npm:4.0.1"
-  dependencies:
-    "@metamask/keyring-api": "npm:^16.1.0"
-    "@metamask/keyring-utils": "npm:^2.0.0"
-    "@metamask/superstruct": "npm:^3.1.0"
-    "@metamask/utils": "npm:^11.1.0"
-  checksum: 10/f55ffb3031a0fc43abf7e259b698901f50d5ce2b791cc8923156f8d8e8cc421e9ec278446a43f4ae333731728dbe5585f4beea7e1e44fcf1735d794286353caa
-  languageName: node
-  linkType: hard
-
-"@metamask/keyring-utils@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "@metamask/keyring-utils@npm:2.0.0"
-  dependencies:
-    "@metamask/superstruct": "npm:^3.1.0"
-    "@metamask/utils": "npm:^11.1.0"
-    bitcoin-address-validation: "npm:^2.2.3"
-  checksum: 10/f7514821fb3bd5f5be575e0d74d5cf8becbdeac35a3e13dcd9e8bf789ba34aa2072783bdc3d0ddac479b97c986bcb54d77cdccedf5945d1c33ef310790e90efb
-  languageName: node
-  linkType: hard
-
 "@metamask/lifecycle-hooks-example-snap@workspace:^, @metamask/lifecycle-hooks-example-snap@workspace:packages/examples/packages/lifecycle-hooks":
   version: 0.0.0-use.local
   resolution: "@metamask/lifecycle-hooks-example-snap@workspace:packages/examples/packages/lifecycle-hooks"
@@ -8474,17 +8439,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"bitcoin-address-validation@npm:^2.2.3":
-  version: 2.2.3
-  resolution: "bitcoin-address-validation@npm:2.2.3"
-  dependencies:
-    base58-js: "npm:^1.0.0"
-    bech32: "npm:^2.0.0"
-    sha256-uint8array: "npm:^0.10.3"
-  checksum: 10/01603b5edf610ecf0843ae546534313f1cffabc8e7435a3678bc9788f18a54e51302218a539794aafd49beb5be70b5d1d507eb7442cb33970fcd665592a71305
-  languageName: node
-  linkType: hard
-
 "bl@npm:^4.0.3, bl@npm:^4.1.0":
   version: 4.1.0
   resolution: "bl@npm:4.1.0"
@@ -17035,13 +16989,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sha256-uint8array@npm:^0.10.3":
-  version: 0.10.7
-  resolution: "sha256-uint8array@npm:0.10.7"
-  checksum: 10/e427f9d2f9c521dea552f033d3f0c3bd641ab214d214dd41bde3c805edde393519cf982b3eee7d683b32e5f28fa23b2278d25935940e13fbe831b216a37832be
-  languageName: node
-  linkType: hard
-
 "shallow-clone@npm:^0.1.2":
   version: 0.1.2
   resolution: "shallow-clone@npm:0.1.2"

From b7b8628b8fe45a4ed8c64e756df8866afa7f4ad4 Mon Sep 17 00:00:00 2001
From: Guillaume Roux <hello@guillaumerx.fr>
Date: Mon, 31 Mar 2025 11:20:22 +0200
Subject: [PATCH 08/27] [WIP] update

---
 .../send-flow/src/components/SendFlow.tsx     |  26 ++-
 .../send-flow/src/components/SendForm.tsx     |  58 ++++--
 .../examples/packages/send-flow/src/index.tsx |  33 +---
 .../examples/packages/send-flow/src/types.ts  |  10 +-
 .../examples/packages/send-flow/src/utils.tsx |   4 +-
 .../SnapInterfaceController.test.tsx          |  17 +-
 .../src/interface/SnapInterfaceController.ts  |  33 +++-
 .../src/interface/utils.test.tsx              | 178 ++++++++++++++----
 .../snaps-controllers/src/interface/utils.ts  | 105 +++++++----
 .../src/permitted/createInterface.test.tsx    |   4 +-
 .../src/types/handlers/user-input.ts          |  10 +-
 packages/snaps-sdk/src/types/interface.ts     |   4 +-
 12 files changed, 328 insertions(+), 154 deletions(-)

diff --git a/packages/examples/packages/send-flow/src/components/SendFlow.tsx b/packages/examples/packages/send-flow/src/components/SendFlow.tsx
index fb6d064e9d..e2e0471183 100644
--- a/packages/examples/packages/send-flow/src/components/SendFlow.tsx
+++ b/packages/examples/packages/send-flow/src/components/SendFlow.tsx
@@ -1,3 +1,7 @@
+import type {
+  AccountSelectorState,
+  AssetSelectorState,
+} from '@metamask/snaps-sdk';
 import type { SnapComponent } from '@metamask/snaps-sdk/jsx';
 import { Box, Container } from '@metamask/snaps-sdk/jsx';
 
@@ -5,7 +9,7 @@ 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>
diff --git a/packages/examples/packages/send-flow/src/components/SendForm.tsx b/packages/examples/packages/send-flow/src/components/SendForm.tsx
index 5b4f78b52f..ae9d0062f0 100644
--- a/packages/examples/packages/send-flow/src/components/SendForm.tsx
+++ b/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"
diff --git a/packages/examples/packages/send-flow/src/index.tsx b/packages/examples/packages/send-flow/src/index.tsx
index fd8d5b11b9..0cb9d6375b 100644
--- a/packages/examples/packages/send-flow/src/index.tsx
+++ b/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,16 +94,18 @@ 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}
@@ -117,26 +120,6 @@ export const onUserInput: OnUserInputHandler = async ({
         });
         break;
       }
-
-      case 'accountSelector': {
-        await snap.request({
-          method: 'snap_updateInterface',
-          params: {
-            id,
-            ui: (
-              <SendFlow
-                selectedCurrency={selectedCurrency}
-                total={total}
-                fees={fees}
-                errors={formErrors}
-                displayAvatar={isCaipHexAddress(sendForm.to)}
-              />
-            ),
-          },
-        });
-
-        break;
-      }
       default:
         break;
     }
diff --git a/packages/examples/packages/send-flow/src/types.ts b/packages/examples/packages/send-flow/src/types.ts
index 8409825fa9..e76523e4e2 100644
--- a/packages/examples/packages/send-flow/src/types.ts
+++ b/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;
 };
diff --git a/packages/examples/packages/send-flow/src/utils.tsx b/packages/examples/packages/send-flow/src/utils.tsx
index a36b604584..51120eccff 100644
--- a/packages/examples/packages/send-flow/src/utils.tsx
+++ b/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}
         />
diff --git a/packages/snaps-controllers/src/interface/SnapInterfaceController.test.tsx b/packages/snaps-controllers/src/interface/SnapInterfaceController.test.tsx
index 8a9bec9300..79cffb2cf6 100644
--- a/packages/snaps-controllers/src/interface/SnapInterfaceController.test.tsx
+++ b/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,
diff --git a/packages/snaps-controllers/src/interface/SnapInterfaceController.ts b/packages/snaps-controllers/src/interface/SnapInterfaceController.ts
index ae1594f798..e320936af4 100644
--- a/packages/snaps-controllers/src/interface/SnapInterfaceController.ts
+++ b/packages/snaps-controllers/src/interface/SnapInterfaceController.ts
@@ -20,7 +20,12 @@ import { ContentType } from '@metamask/snaps-sdk';
 import type { JSXElement } from '@metamask/snaps-sdk/jsx';
 import type { InternalAccount } from '@metamask/snaps-utils';
 import { getJsonSizeUnsafe, validateJsxElements } from '@metamask/snaps-utils';
-import type { CaipAccountId, CaipAssetType, Json } from '@metamask/utils';
+import type {
+  CaipAccountId,
+  CaipAssetType,
+  CaipChainId,
+  Json,
+} from '@metamask/utils';
 import { assert, hasProperty, parseCaipAccountId } from '@metamask/utils';
 import { castDraft } from 'immer';
 import { nanoid } from 'nanoid';
@@ -76,11 +81,16 @@ type AccountsControllerGetSelectedMultichainAccountAction = {
   handler: () => InternalAccount;
 };
 
-export type AccountsControllerSetSelectedAccountAction = {
+type AccountsControllerSetSelectedAccountAction = {
   type: `AccountsController:setSelectedAccount`;
   handler: (accountId: string) => void;
 };
 
+type AccountsControllerListMultichainAccountsAction = {
+  type: `AccountsController:listMultichainAccounts`;
+  handler: (chainId?: CaipChainId) => InternalAccount[];
+};
+
 export type SnapInterfaceControllerGetStateAction = ControllerGetStateAction<
   typeof controllerName,
   SnapInterfaceControllerState
@@ -104,7 +114,8 @@ export type SnapInterfaceControllerAllowedActions =
   | MultichainAssetsControllerGetStateAction
   | AccountsControllerGetSelectedMultichainAccountAction
   | AccountsControllerGetAccountByAddressAction
-  | AccountsControllerSetSelectedAccountAction;
+  | AccountsControllerSetSelectedAccountAction
+  | AccountsControllerListMultichainAccountsAction;
 
 export type SnapInterfaceControllerActions =
   | CreateInterface
@@ -281,6 +292,7 @@ export class SnapInterfaceController extends BaseController<
       getAccountByAddress: this.#getAccountByAddress.bind(this),
       getSelectedAccount: this.#getSelectedAccount.bind(this),
       setSelectedAccount: this.#setSelectedAccount.bind(this),
+      listAccounts: this.#listAccounts.bind(this),
     });
 
     this.update((draftState) => {
@@ -336,6 +348,7 @@ export class SnapInterfaceController extends BaseController<
       getAccountByAddress: this.#getAccountByAddress.bind(this),
       getSelectedAccount: this.#getSelectedAccount.bind(this),
       setSelectedAccount: this.#setSelectedAccount.bind(this),
+      listAccounts: this.#listAccounts.bind(this),
     });
 
     this.update((draftState) => {
@@ -479,6 +492,20 @@ export class SnapInterfaceController extends BaseController<
     );
   }
 
+  #listAccounts(chainIds: CaipChainId[]) {
+    const accounts = chainIds.reduce<InternalAccount[]>((acc, chainId) => {
+      const result = this.messagingSystem.call(
+        'AccountsController:listMultichainAccounts',
+        chainId,
+      );
+
+      return [...acc, ...result];
+    }, []);
+
+    // dedupe accounts that could have multiple scopes in common
+    return Array.from(new Set(accounts));
+  }
+
   /**
    * Get an account by its address.
    *
diff --git a/packages/snaps-controllers/src/interface/utils.test.tsx b/packages/snaps-controllers/src/interface/utils.test.tsx
index 71ca2df7ae..af61c1a75a 100644
--- a/packages/snaps-controllers/src/interface/utils.test.tsx
+++ b/packages/snaps-controllers/src/interface/utils.test.tsx
@@ -19,10 +19,15 @@ import {
   AddressInput,
   AccountSelector,
 } from '@metamask/snaps-sdk/jsx';
+import type { CaipAccountId } from '@metamask/utils';
+import { parseCaipAccountId } from '@metamask/utils';
 
 import {
   assertNameIsUnique,
   constructState,
+  formatAccountSelectorStateValue,
+  getAccountSelectorDefaultStateValue,
+  getAccountSelectorStateValue,
   getAssetSelectorStateValue,
   getDefaultAsset,
   getJsxInterface,
@@ -631,11 +636,14 @@ describe('constructState', () => {
     });
 
     elementDataGetters.getAccountByAddress.mockImplementation(
-      (address: string) => ({
-        id: MOCK_ACCOUNT_ID,
-        address,
-        scopes: ['eip155:0'],
-      }),
+      (caipAccountId: CaipAccountId) => {
+        const { address } = parseCaipAccountId(caipAccountId);
+        return {
+          id: MOCK_ACCOUNT_ID,
+          address,
+          scopes: ['eip155:0'],
+        };
+      },
     );
 
     const element = (
@@ -661,11 +669,14 @@ describe('constructState', () => {
     });
 
     elementDataGetters.getAccountByAddress.mockImplementation(
-      (address: string) => ({
-        id: MOCK_ACCOUNT_ID,
-        address,
-        scopes: ['eip155:0'],
-      }),
+      (caipAccountId: CaipAccountId) => {
+        const { address } = parseCaipAccountId(caipAccountId);
+        return {
+          id: MOCK_ACCOUNT_ID,
+          address,
+          scopes: ['eip155:0'],
+        };
+      },
     );
 
     const element = (
@@ -694,11 +705,14 @@ describe('constructState', () => {
     });
 
     elementDataGetters.getAccountByAddress.mockImplementation(
-      (address: string) => ({
-        id: MOCK_ACCOUNT_ID,
-        address,
-        scopes: ['eip155:0'],
-      }),
+      (caipAccountId: CaipAccountId) => {
+        const { address } = parseCaipAccountId(caipAccountId);
+        return {
+          id: MOCK_ACCOUNT_ID,
+          address,
+          scopes: ['eip155:0'],
+        };
+      },
     );
 
     const element = (
@@ -730,11 +744,14 @@ describe('constructState', () => {
     });
 
     elementDataGetters.getAccountByAddress.mockImplementation(
-      (address: string) => ({
-        id: MOCK_ACCOUNT_ID,
-        address,
-        scopes: ['eip155:0'],
-      }),
+      (caipAccountId: CaipAccountId) => {
+        const { address } = parseCaipAccountId(caipAccountId);
+        return {
+          id: MOCK_ACCOUNT_ID,
+          address,
+          scopes: ['eip155:0'],
+        };
+      },
     );
 
     const element = (
@@ -789,29 +806,16 @@ describe('constructState', () => {
     });
   });
 
-  it('sets the selected account to null if there is no selected account', () => {
-    elementDataGetters.getSelectedAccount.mockReturnValue(undefined);
-
-    const element = (
-      <Box>
-        <AccountSelector name="foo" />
-      </Box>
-    );
-
-    const result = constructState({}, element, elementDataGetters);
-
-    expect(result).toStrictEqual({
-      foo: null,
-    });
-  });
-
   it('switches the selected account if `switchGlobalAccount` is set', () => {
     elementDataGetters.getAccountByAddress.mockImplementation(
-      (address: string) => ({
-        id: MOCK_ACCOUNT_ID,
-        address,
-        scopes: ['eip155:0'],
-      }),
+      (caipAccountId: CaipAccountId) => {
+        const { address } = parseCaipAccountId(caipAccountId);
+        return {
+          id: MOCK_ACCOUNT_ID,
+          address,
+          scopes: ['eip155:0'],
+        };
+      },
     );
 
     const element = (
@@ -1573,3 +1577,95 @@ describe('isStatefulComponent', () => {
     ).toBe(false);
   });
 });
+
+describe('formatAccountSelectorStateValue', () => {
+  it('formats the account selector state value', () => {
+    expect(
+      // @ts-expect-error partial mock
+      formatAccountSelectorStateValue({
+        id: MOCK_ACCOUNT_ID,
+        address: '0x1234567890123456789012345678901234567890',
+        scopes: ['eip155:1', 'eip155:2', 'eip155:3'],
+      }),
+    ).toStrictEqual({
+      accountId: MOCK_ACCOUNT_ID,
+      addresses: [
+        'eip155:1:0x1234567890123456789012345678901234567890',
+        'eip155:2:0x1234567890123456789012345678901234567890',
+        'eip155:3:0x1234567890123456789012345678901234567890',
+      ],
+    });
+  });
+});
+
+describe('getAccountSelectorDefaultStateValue', () => {
+  it('returns the account selector default state value', () => {
+    const getSelectedAccount = jest.fn().mockReturnValue({
+      id: MOCK_ACCOUNT_ID,
+      address: '0x1234567890123456789012345678901234567890',
+      scopes: ['eip155:1', 'eip155:2', 'eip155:3'],
+    });
+    expect(
+      getAccountSelectorDefaultStateValue({
+        getSelectedAccount,
+        getAccountByAddress: jest.fn(),
+        getAssetsState: jest.fn(),
+        setSelectedAccount: jest.fn(),
+      }),
+    ).toStrictEqual({
+      accountId: MOCK_ACCOUNT_ID,
+      addresses: [
+        'eip155:1:0x1234567890123456789012345678901234567890',
+        'eip155:2:0x1234567890123456789012345678901234567890',
+        'eip155:3:0x1234567890123456789012345678901234567890',
+      ],
+    });
+  });
+});
+
+describe('getAccountSelectorStateValue', () => {
+  it('returns the account selector state value', () => {
+    const getAccountByAddress = jest.fn().mockReturnValue({
+      id: MOCK_ACCOUNT_ID,
+      address: '0x1234567890123456789012345678901234567890',
+      scopes: ['eip155:1', 'eip155:2', 'eip155:3'],
+    });
+
+    const setSelectedAccount = jest.fn();
+
+    expect(
+      getAccountSelectorStateValue(
+        <AccountSelector
+          name="foo"
+          value="eip155:1:0x1234567890123456789012345678901234567890"
+        />,
+        getAccountByAddress,
+        setSelectedAccount,
+      ),
+    ).toStrictEqual({
+      accountId: MOCK_ACCOUNT_ID,
+      addresses: [
+        'eip155:1:0x1234567890123456789012345678901234567890',
+        'eip155:2:0x1234567890123456789012345678901234567890',
+        'eip155:3:0x1234567890123456789012345678901234567890',
+      ],
+    });
+  });
+
+  it('returns the null if the account is not found', () => {
+    const getAccountByAddress = jest.fn().mockReturnValue(undefined);
+
+    const setSelectedAccount = jest.fn();
+
+    expect(
+      getAccountSelectorStateValue(
+        <AccountSelector
+          name="foo"
+          value="eip155:1:0x1234567890123456789012345678901234567890"
+        />,
+        getAccountByAddress,
+        setSelectedAccount,
+      ),
+    ).toBeNull();
+  });
+});
diff --git a/packages/snaps-controllers/src/interface/utils.ts b/packages/snaps-controllers/src/interface/utils.ts
index a5cc4a7a5d..c0a8aa2fff 100644
--- a/packages/snaps-controllers/src/interface/utils.ts
+++ b/packages/snaps-controllers/src/interface/utils.ts
@@ -112,7 +112,12 @@ type SetSelectedAccount = (accountId: string) => void;
  *
  * @returns The selected account.
  */
-type GetSelectedAccount = () => InternalAccount | undefined;
+type GetSelectedAccount = () => InternalAccount;
+
+/**
+ * A function to get accounts for the provided chain IDs.
+ */
+type ListAccounts = (chainIds: CaipChainId[]) => InternalAccount[];
 
 /**
  * Data getters for elements.
@@ -120,12 +125,16 @@ type GetSelectedAccount = () => InternalAccount | undefined;
  *
  * @param getAssetState - A function to get the MultichainAssetController state.
  * @param getAccountByAddress - A function to get an account by its address.
+ * @param setSelectedAccount - A function to set the selected account in the client.
+ * @param getSelectedAccount - A function to get the selected account in the client.
+ * @param listAccounts - A function to list accounts for the provided chain IDs.
  */
 type ElementDataGetters = {
   getAssetsState: GetAssetsState;
   getAccountByAddress: GetAccountByAddress;
   getSelectedAccount: GetSelectedAccount;
   setSelectedAccount: SetSelectedAccount;
+  listAccounts: ListAccounts;
 };
 
 /**
@@ -157,6 +166,21 @@ export function assertNameIsUnique(state: InterfaceState, name: string) {
   );
 }
 
+/**
+ * Format the state value for an account selector.
+ *
+ * @param account - The account to format.
+ *
+ * @returns The state value for the account selector.
+ */
+export function formatAccountSelectorStateValue(account: InternalAccount) {
+  const { id, address, scopes } = account;
+
+  const addresses = createAccountList(address, scopes);
+
+  return { accountId: id, addresses };
+}
+
 /**
  * Get a default asset for a given address.
  *
@@ -222,6 +246,39 @@ export function getDefaultAsset(
   };
 }
 
+/**
+ * Get the default state value for an account selector.
+ *
+ * @param chainIds - The chain IDs to filter the accounts.
+ * @param elementDataGetters - Data getters for the element.
+ * @param elementDataGetters.getSelectedAccount - A function to get the selected account in the client.
+ * @param elementDataGetters.listAccounts - A function to list accounts for the provided chain IDs.
+ * @param elementDataGetters.setSelectedAccount - A function to set the selected account in the client.
+ * @returns The default state for the account selector.
+ */
+export function getAccountSelectorDefaultStateValue(
+  chainIds: CaipChainId[] | undefined,
+  { getSelectedAccount, listAccounts, setSelectedAccount }: ElementDataGetters,
+) {
+  const account = getSelectedAccount();
+
+  if (!chainIds || chainIds.length === 0) {
+    return formatAccountSelectorStateValue(account);
+  }
+
+  if (account.scopes.some((scope) => chainIds.includes(scope))) {
+    return formatAccountSelectorStateValue(account);
+  }
+
+  const accounts = listAccounts(chainIds);
+
+  assert(accounts.length > 0, 'No accounts found for the provided chain IDs.');
+
+  setSelectedAccount(accounts[0].id);
+
+  return formatAccountSelectorStateValue(accounts[0]);
+}
+
 /**
  * Construct default state for a component.
  *
@@ -262,7 +319,10 @@ function constructComponentSpecificDefaultState(
     }
 
     case 'AccountSelector':
-      return getAccountSelectorDefaultState(elementDataGetters);
+      return getAccountSelectorDefaultStateValue(
+        element.props.chainIds,
+        elementDataGetters,
+      );
 
     case 'Checkbox':
       return false;
@@ -308,41 +368,6 @@ export function getAssetSelectorStateValue(
   };
 }
 
-/**
- * Get the default state for an account selector.
- *
- * @param elementDataGetters - Data getters for the element.
- * @param elementDataGetters.getSelectedAccount - A function to get the selected account in the client.
- *
- * @returns The default state for the account selector.
- */
-export function getAccountSelectorDefaultState({
-  getSelectedAccount,
-}: ElementDataGetters) {
-  const account = getSelectedAccount();
-
-  if (!account) {
-    return null;
-  }
-
-  return formatAccountSelectorStateValue(account);
-}
-
-/**
- * Format the state value for an account selector.
- *
- * @param account - The account to format.
- *
- * @returns The state value for the account selector.
- */
-export function formatAccountSelectorStateValue(account: InternalAccount) {
-  const { id, address, scopes } = account;
-
-  const addresses = createAccountList(address, scopes);
-
-  return { accountId: id, addresses };
-}
-
 /**
  * Get the state value for an account selector.
  *
@@ -351,19 +376,19 @@ export function formatAccountSelectorStateValue(account: InternalAccount) {
  * @param setSelectedAccount - A function to set the selected account in the client.
  * @returns The state value for the account selector.
  */
-function getAccountSelectorStateValue(
+export function getAccountSelectorStateValue(
   element: AccountSelectorElement,
   getAccountByAddress: GetAccountByAddress,
   setSelectedAccount: SetSelectedAccount,
 ) {
   if (!element.props.value) {
-    return undefined;
+    return null;
   }
 
   const account = getAccountByAddress(element.props.value);
 
   if (!account) {
-    return undefined;
+    return null;
   }
 
   if (element.props.switchGlobalAccount) {
diff --git a/packages/snaps-rpc-methods/src/permitted/createInterface.test.tsx b/packages/snaps-rpc-methods/src/permitted/createInterface.test.tsx
index 7dc3472dc9..7a36ba062a 100644
--- a/packages/snaps-rpc-methods/src/permitted/createInterface.test.tsx
+++ b/packages/snaps-rpc-methods/src/permitted/createInterface.test.tsx
@@ -141,7 +141,7 @@ describe('snap_createInterface', () => {
       error: {
         code: -32602,
         message:
-          'Invalid params: At path: ui -- Expected type to be one of: "Address", "AssetSelector", "AddressInput", "Bold", "Box", "Button", "Copyable", "Divider", "Dropdown", "RadioGroup", "Field", "FileInput", "Form", "Heading", "Input", "Image", "Italic", "Link", "Row", "Spinner", "Text", "Tooltip", "Checkbox", "Card", "Icon", "Selector", "Section", "Avatar", "Banner", "Skeleton", "Container", but received: undefined.',
+          'Invalid params: At path: ui -- Expected type to be one of: "AccountSelector", "Address", "AssetSelector", "AddressInput", "Bold", "Box", "Button", "Copyable", "Divider", "Dropdown", "RadioGroup", "Field", "FileInput", "Form", "Heading", "Input", "Image", "Italic", "Link", "Row", "Spinner", "Text", "Tooltip", "Checkbox", "Card", "Icon", "Selector", "Section", "Avatar", "Banner", "Skeleton", "Container", but received: undefined.',
         stack: expect.any(String),
       },
       id: 1,
@@ -191,7 +191,7 @@ describe('snap_createInterface', () => {
       error: {
         code: -32602,
         message:
-          'Invalid params: At path: ui.props.children.props.children -- Expected type to be one of: "AssetSelector", "AddressInput", "Input", "Dropdown", "RadioGroup", "FileInput", "Checkbox", "Selector", but received: "Copyable".',
+          'Invalid params: At path: ui.props.children.props.children -- Expected type to be one of: "AssetSelector", "AddressInput", "AccountSelector", "Input", "Dropdown", "RadioGroup", "FileInput", "Checkbox", "Selector", but received: "Copyable".',
         stack: expect.any(String),
       },
       id: 1,
diff --git a/packages/snaps-sdk/src/types/handlers/user-input.ts b/packages/snaps-sdk/src/types/handlers/user-input.ts
index c6e71a4e10..66db395d68 100644
--- a/packages/snaps-sdk/src/types/handlers/user-input.ts
+++ b/packages/snaps-sdk/src/types/handlers/user-input.ts
@@ -55,18 +55,18 @@ export const ButtonClickEventStruct = assign(
  */
 export type ButtonClickEvent = Infer<typeof ButtonClickEventStruct>;
 
-export const AccountSelectorValueStruct = object({
+export const AccountSelectorStateStruct = object({
   accountId: string(),
   addresses: array(CaipAccountIdStruct),
 });
 
 /**
- * The value of an `AccountSelector` component in state.
+ * The state of an `AccountSelector` component.
  *
  * @property accountId - The account ID of the account.
  * @property addresses - The addresses of the account as CAIP-10 account ID.
  */
-export type AccountSelectorValue = Infer<typeof AccountSelectorValueStruct>;
+export type AccountSelectorState = Infer<typeof AccountSelectorStateStruct>;
 
 export const FileStruct = object({
   name: string(),
@@ -112,7 +112,7 @@ export const FormSubmitEventStruct = assign(
           string(),
           FileStruct,
           boolean(),
-          AccountSelectorValueStruct,
+          AccountSelectorStateStruct,
           AssetSelectorStateStruct,
         ]),
       ),
@@ -144,7 +144,7 @@ export const InputChangeEventStruct = assign(
     value: union([
       string(),
       boolean(),
-      AccountSelectorValueStruct,
+      AccountSelectorStateStruct,
       AssetSelectorStateStruct,
     ]),
   }),
diff --git a/packages/snaps-sdk/src/types/interface.ts b/packages/snaps-sdk/src/types/interface.ts
index 334a3fc19a..c211d5384c 100644
--- a/packages/snaps-sdk/src/types/interface.ts
+++ b/packages/snaps-sdk/src/types/interface.ts
@@ -16,7 +16,7 @@ import {
 import {
   AssetSelectorStateStruct,
   FileStruct,
-  AccountSelectorValueStruct,
+  AccountSelectorStateStruct,
 } from './handlers';
 import { selectiveUnion } from '../internals';
 import type { JSXElement } from '../jsx';
@@ -32,7 +32,7 @@ import { ComponentStruct } from '../ui';
  */
 
 export const StateStruct = union([
-  AccountSelectorValueStruct,
+  AccountSelectorStateStruct,
   AssetSelectorStateStruct,
   FileStruct,
   string(),

From d1b7b6a4e4894d6f67efce042822ce414900c3ab Mon Sep 17 00:00:00 2001
From: Guillaume Roux <hello@guillaumerx.fr>
Date: Wed, 9 Apr 2025 14:21:43 +0200
Subject: [PATCH 09/27] improve logic

---
 .../SnapInterfaceController.test.tsx          | 218 ++++++++++++++++--
 .../src/interface/utils.test.tsx              | 178 +++++++++++++-
 .../snaps-controllers/src/interface/utils.ts  |  60 +++--
 .../src/test-utils/controller.ts              |  14 +-
 packages/snaps-utils/src/account.test.ts      |  31 ++-
 packages/snaps-utils/src/account.ts           |  43 +++-
 6 files changed, 497 insertions(+), 47 deletions(-)

diff --git a/packages/snaps-controllers/src/interface/SnapInterfaceController.test.tsx b/packages/snaps-controllers/src/interface/SnapInterfaceController.test.tsx
index 79cffb2cf6..5376657ac6 100644
--- a/packages/snaps-controllers/src/interface/SnapInterfaceController.test.tsx
+++ b/packages/snaps-controllers/src/interface/SnapInterfaceController.test.tsx
@@ -222,16 +222,6 @@ describe('SnapInterfaceController', () => {
             <Field label="Bar">
               <Input name="bar" type="text" />
             </Field>
-            <Field label="baz">
-              <AccountSelector
-                name="baz"
-                switchGlobalAccount
-                value="solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp:7S3P4HxJpyyigGzodYwHtCxZyUQe9JiBMHyRWXArAaKv"
-              />
-            </Field>
-            <Field label="foobar">
-              <AccountSelector name="foobar" />
-            </Field>
           </Form>
         </Box>
       );
@@ -254,37 +244,217 @@ describe('SnapInterfaceController', () => {
         'https://foo.bar/',
       );
 
+      expect(content).toStrictEqual(element);
+      expect(state).toStrictEqual({
+        foo: {
+          bar: null,
+        },
+      });
+    });
+
+    it('can retrieve the selected account from the client', async () => {
+      const rootMessenger = getRootSnapInterfaceControllerMessenger();
+      const controllerMessenger =
+        getRestrictedSnapInterfaceControllerMessenger(rootMessenger);
+
+      // eslint-disable-next-line no-new
+      new SnapInterfaceController({
+        messenger: controllerMessenger,
+      });
+
+      const element = (
+        <Box>
+          <AccountSelector name="foo" />
+        </Box>
+      );
+
+      const id = await rootMessenger.call(
+        'SnapInterfaceController:createInterface',
+        MOCK_SNAP_ID,
+        element,
+      );
+
+      const { content, state } = rootMessenger.call(
+        'SnapInterfaceController:getInterface',
+        MOCK_SNAP_ID,
+        id,
+      );
+
       expect(rootMessenger.call).toHaveBeenNthCalledWith(
-        4,
+        2,
+        'AccountsController:getSelectedMultichainAccount',
+      );
+
+      expect(content).toStrictEqual(element);
+      expect(state).toStrictEqual({
+        foo: {
+          accountId: MOCK_ACCOUNT_ID,
+          addresses: ['eip155:0:0x1234567890123456789012345678901234567890'],
+        },
+      });
+    });
+
+    it('can switch the currently selected account in the client', async () => {
+      const rootMessenger = getRootSnapInterfaceControllerMessenger();
+      const controllerMessenger = getRestrictedSnapInterfaceControllerMessenger(
+        rootMessenger,
+        false,
+      );
+
+      rootMessenger.registerActionHandler(
+        'AccountsController:getAccountByAddress',
+        // @ts-expect-error partial mock
+        () => ({
+          id: MOCK_ACCOUNT_ID,
+          address: '7S3P4HxJpyyigGzodYwHtCxZyUQe9JiBMHyRWXArAaKv',
+          scopes: ['solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp'],
+        }),
+      );
+
+      rootMessenger.registerActionHandler(
+        'AccountsController:setSelectedAccount',
+        () => {
+          // no-op
+        },
+      );
+
+      // eslint-disable-next-line no-new
+      new SnapInterfaceController({
+        messenger: controllerMessenger,
+      });
+
+      const element = (
+        <Box>
+          <AccountSelector
+            name="foo"
+            switchGlobalAccount
+            value="solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp:7S3P4HxJpyyigGzodYwHtCxZyUQe9JiBMHyRWXArAaKv"
+          />
+        </Box>
+      );
+
+      const id = await rootMessenger.call(
+        'SnapInterfaceController:createInterface',
+        MOCK_SNAP_ID,
+        element,
+      );
+
+      const { content, state } = rootMessenger.call(
+        'SnapInterfaceController:getInterface',
+        MOCK_SNAP_ID,
+        id,
+      );
+
+      expect(rootMessenger.call).toHaveBeenNthCalledWith(
+        2,
         'AccountsController:getAccountByAddress',
         '7S3P4HxJpyyigGzodYwHtCxZyUQe9JiBMHyRWXArAaKv',
       );
 
       expect(rootMessenger.call).toHaveBeenNthCalledWith(
-        5,
+        3,
         'AccountsController:setSelectedAccount',
         MOCK_ACCOUNT_ID,
       );
 
+      expect(content).toStrictEqual(element);
+      expect(state).toStrictEqual({
+        foo: {
+          accountId: MOCK_ACCOUNT_ID,
+          addresses: [
+            'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp:7S3P4HxJpyyigGzodYwHtCxZyUQe9JiBMHyRWXArAaKv',
+          ],
+        },
+      });
+    });
+
+    it('can get accounts of a specific chain ID from the client', async () => {
+      const rootMessenger = getRootSnapInterfaceControllerMessenger();
+      const controllerMessenger = getRestrictedSnapInterfaceControllerMessenger(
+        rootMessenger,
+        false,
+      );
+
+      rootMessenger.registerActionHandler(
+        'AccountsController:getSelectedMultichainAccount',
+        // @ts-expect-error partial mock
+        () => ({
+          id: MOCK_ACCOUNT_ID,
+          address: '0x1234567890123456789012345678901234567890',
+          scopes: ['eip155:0'],
+        }),
+      );
+
+      rootMessenger.registerActionHandler(
+        'AccountsController:listMultichainAccounts',
+        () => [
+          // @ts-expect-error partial mock
+          {
+            id: MOCK_ACCOUNT_ID,
+            address: '7S3P4HxJpyyigGzodYwHtCxZyUQe9JiBMHyRWXArAaKv',
+            scopes: ['solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp'],
+          },
+        ],
+      );
+
+      rootMessenger.registerActionHandler(
+        'AccountsController:setSelectedAccount',
+        () => {
+          // no-op
+        },
+      );
+
+      // eslint-disable-next-line no-new
+      new SnapInterfaceController({
+        messenger: controllerMessenger,
+      });
+
+      const element = (
+        <Box>
+          <AccountSelector
+            name="foo"
+            switchGlobalAccount
+            chainIds={['solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp']}
+          />
+        </Box>
+      );
+
+      const id = await rootMessenger.call(
+        'SnapInterfaceController:createInterface',
+        MOCK_SNAP_ID,
+        element,
+      );
+
+      const { content, state } = rootMessenger.call(
+        'SnapInterfaceController:getInterface',
+        MOCK_SNAP_ID,
+        id,
+      );
+
       expect(rootMessenger.call).toHaveBeenNthCalledWith(
-        6,
+        2,
         'AccountsController:getSelectedMultichainAccount',
       );
 
+      expect(rootMessenger.call).toHaveBeenNthCalledWith(
+        3,
+        'AccountsController:listMultichainAccounts',
+        'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp',
+      );
+
+      expect(rootMessenger.call).toHaveBeenNthCalledWith(
+        4,
+        'AccountsController:setSelectedAccount',
+        MOCK_ACCOUNT_ID,
+      );
+
       expect(content).toStrictEqual(element);
       expect(state).toStrictEqual({
         foo: {
-          bar: null,
-          baz: {
-            accountId: MOCK_ACCOUNT_ID,
-            addresses: [
-              'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp:7S3P4HxJpyyigGzodYwHtCxZyUQe9JiBMHyRWXArAaKv',
-            ],
-          },
-          foobar: {
-            accountId: MOCK_ACCOUNT_ID,
-            addresses: ['eip155:0:0x1234567890123456789012345678901234567890'],
-          },
+          accountId: MOCK_ACCOUNT_ID,
+          addresses: [
+            'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp:7S3P4HxJpyyigGzodYwHtCxZyUQe9JiBMHyRWXArAaKv',
+          ],
         },
       });
     });
diff --git a/packages/snaps-controllers/src/interface/utils.test.tsx b/packages/snaps-controllers/src/interface/utils.test.tsx
index af61c1a75a..73ff3e5e1a 100644
--- a/packages/snaps-controllers/src/interface/utils.test.tsx
+++ b/packages/snaps-controllers/src/interface/utils.test.tsx
@@ -32,6 +32,7 @@ import {
   getDefaultAsset,
   getJsxInterface,
   isStatefulComponent,
+  matchingChainId,
 } from './utils';
 import { MOCK_ACCOUNT_ID } from '../test-utils';
 
@@ -85,6 +86,7 @@ describe('constructState', () => {
     getAccountByAddress: jest.fn(),
     getSelectedAccount: jest.fn(),
     setSelectedAccount: jest.fn(),
+    listAccounts: jest.fn(),
   };
 
   it('can construct a new component state', () => {
@@ -1384,6 +1386,7 @@ describe('getDefaultAsset', () => {
           getAccountByAddress,
           getSelectedAccount: jest.fn(),
           setSelectedAccount: jest.fn(),
+          listAccounts: jest.fn(),
         },
       ),
     ).toStrictEqual({
@@ -1424,6 +1427,7 @@ describe('getDefaultAsset', () => {
           getAccountByAddress,
           getSelectedAccount: jest.fn(),
           setSelectedAccount: jest.fn(),
+          listAccounts: jest.fn(),
         },
       ),
     ).toStrictEqual({
@@ -1457,6 +1461,7 @@ describe('getDefaultAsset', () => {
           getAccountByAddress,
           getSelectedAccount: jest.fn(),
           setSelectedAccount: jest.fn(),
+          listAccounts: jest.fn(),
         },
       ),
     ).toBeNull();
@@ -1498,6 +1503,7 @@ describe('getDefaultAsset', () => {
           getAccountByAddress,
           getSelectedAccount: jest.fn(),
           setSelectedAccount: jest.fn(),
+          listAccounts: jest.fn(),
         },
       ),
     ).toStrictEqual({
@@ -1528,6 +1534,7 @@ describe('getDefaultAsset', () => {
           getAccountByAddress,
           getSelectedAccount: jest.fn(),
           setSelectedAccount: jest.fn(),
+          listAccounts: jest.fn(),
         },
       ),
     ).toThrow(
@@ -1578,6 +1585,30 @@ describe('isStatefulComponent', () => {
   });
 });
 
+describe('matchingChainId', () => {
+  it('returns true if one of the chain IDs match the scope', () => {
+    expect(
+      matchingChainId('solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp', [
+        'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp',
+        'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp',
+      ]),
+    ).toBe(true);
+  });
+
+  it('returns false if none of the chain IDs match the scope', () => {
+    expect(
+      matchingChainId('bip122:000000000019d6689c085ae165831e93', [
+        'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp',
+        'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp',
+      ]),
+    ).toBe(false);
+  });
+
+  it('returns true if one of the chain ID has the `eip-155` namespace and the scope is `eip-155:0`', () => {
+    expect(matchingChainId('eip155:0', ['eip155:1'])).toBe(true);
+  });
+});
+
 describe('formatAccountSelectorStateValue', () => {
   it('formats the account selector state value', () => {
     expect(
@@ -1599,27 +1630,162 @@ describe('formatAccountSelectorStateValue', () => {
 });
 
 describe('getAccountSelectorDefaultStateValue', () => {
-  it('returns the account selector default state value', () => {
+  it('returns the currently selected account in the client if no chain Is are defined', () => {
     const getSelectedAccount = jest.fn().mockReturnValue({
       id: MOCK_ACCOUNT_ID,
       address: '0x1234567890123456789012345678901234567890',
-      scopes: ['eip155:1', 'eip155:2', 'eip155:3'],
+      scopes: ['eip155:0'],
     });
     expect(
-      getAccountSelectorDefaultStateValue({
+      getAccountSelectorDefaultStateValue(<AccountSelector name="foo" />, {
         getSelectedAccount,
         getAccountByAddress: jest.fn(),
         getAssetsState: jest.fn(),
         setSelectedAccount: jest.fn(),
+        listAccounts: jest.fn(),
       }),
+    ).toStrictEqual({
+      accountId: MOCK_ACCOUNT_ID,
+      addresses: ['eip155:0:0x1234567890123456789012345678901234567890'],
+    });
+  });
+
+  it('returns the currently selected account in the client if chain IDs match', () => {
+    const getSelectedAccount = jest.fn().mockReturnValue({
+      id: MOCK_ACCOUNT_ID,
+      address: '0x1234567890123456789012345678901234567890',
+      scopes: ['eip155:0'],
+    });
+    expect(
+      getAccountSelectorDefaultStateValue(
+        <AccountSelector name="foo" chainIds={['eip155:1']} />,
+        {
+          getSelectedAccount,
+          getAccountByAddress: jest.fn(),
+          getAssetsState: jest.fn(),
+          setSelectedAccount: jest.fn(),
+          listAccounts: jest.fn(),
+        },
+      ),
+    ).toStrictEqual({
+      accountId: MOCK_ACCOUNT_ID,
+      addresses: ['eip155:1:0x1234567890123456789012345678901234567890'],
+    });
+  });
+
+  it('returns the first account of the account that matches the chain Ids if the selected account is not on the same chain ID', () => {
+    const getSelectedAccount = jest.fn().mockReturnValue({
+      id: MOCK_ACCOUNT_ID,
+      address: '0x1234567890123456789012345678901234567890',
+      scopes: ['eip155:1', 'eip155:2', 'eip155:3'],
+    });
+
+    const listAccounts = jest.fn().mockReturnValue([
+      {
+        id: MOCK_ACCOUNT_ID,
+        address: '7S3P4HxJpyyigGzodYwHtCxZyUQe9JiBMHyRWXArAaKv',
+        scopes: ['solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp'],
+      },
+      {
+        id: MOCK_ACCOUNT_ID,
+        address: 'DYw8jCTfwHNRJhhmFcbXvVDTqWMEVFBX6ZKUmG5CNSKK',
+        scopes: ['solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp'],
+      },
+    ]);
+
+    expect(
+      getAccountSelectorDefaultStateValue(
+        <AccountSelector
+          name="foo"
+          chainIds={['solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp']}
+        />,
+        {
+          getSelectedAccount,
+          getAccountByAddress: jest.fn(),
+          getAssetsState: jest.fn(),
+          setSelectedAccount: jest.fn(),
+          listAccounts,
+        },
+      ),
     ).toStrictEqual({
       accountId: MOCK_ACCOUNT_ID,
       addresses: [
-        'eip155:1:0x1234567890123456789012345678901234567890',
-        'eip155:2:0x1234567890123456789012345678901234567890',
-        'eip155:3:0x1234567890123456789012345678901234567890',
+        'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp:7S3P4HxJpyyigGzodYwHtCxZyUQe9JiBMHyRWXArAaKv',
+      ],
+    });
+  });
+
+  it('throws if no account is found for the given chain IDs', () => {
+    const getSelectedAccount = jest.fn().mockReturnValue({
+      id: MOCK_ACCOUNT_ID,
+      address: '0x1234567890123456789012345678901234567890',
+      scopes: ['eip155:1', 'eip155:2', 'eip155:3'],
+    });
+
+    const listAccounts = jest.fn().mockReturnValue([]);
+
+    expect(() =>
+      getAccountSelectorDefaultStateValue(
+        <AccountSelector
+          name="foo"
+          chainIds={['bip122:000000000019d6689c085ae165831e93']}
+        />,
+        {
+          getSelectedAccount,
+          getAccountByAddress: jest.fn(),
+          getAssetsState: jest.fn(),
+          setSelectedAccount: jest.fn(),
+          listAccounts,
+        },
+      ),
+    ).toThrow('No accounts found for the provided chain IDs.');
+  });
+
+  it('switches the selected account in the client if "switchGlobalAccount" is true', () => {
+    const getSelectedAccount = jest.fn().mockReturnValue({
+      id: MOCK_ACCOUNT_ID,
+      address: '0x1234567890123456789012345678901234567890',
+      scopes: ['eip155:1', 'eip155:2', 'eip155:3'],
+    });
+
+    const listAccounts = jest.fn().mockReturnValue([
+      {
+        id: MOCK_ACCOUNT_ID,
+        address: '7S3P4HxJpyyigGzodYwHtCxZyUQe9JiBMHyRWXArAaKv',
+        scopes: ['solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp'],
+      },
+      {
+        id: MOCK_ACCOUNT_ID,
+        address: 'DYw8jCTfwHNRJhhmFcbXvVDTqWMEVFBX6ZKUmG5CNSKK',
+        scopes: ['solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp'],
+      },
+    ]);
+
+    const setSelectedAccount = jest.fn();
+
+    expect(
+      getAccountSelectorDefaultStateValue(
+        <AccountSelector
+          name="foo"
+          switchGlobalAccount={true}
+          chainIds={['solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp']}
+        />,
+        {
+          getSelectedAccount,
+          getAccountByAddress: jest.fn(),
+          getAssetsState: jest.fn(),
+          setSelectedAccount,
+          listAccounts,
+        },
+      ),
+    ).toStrictEqual({
+      accountId: MOCK_ACCOUNT_ID,
+      addresses: [
+        'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp:7S3P4HxJpyyigGzodYwHtCxZyUQe9JiBMHyRWXArAaKv',
       ],
     });
+
+    expect(setSelectedAccount).toHaveBeenCalledWith(MOCK_ACCOUNT_ID);
   });
 });
 
diff --git a/packages/snaps-controllers/src/interface/utils.ts b/packages/snaps-controllers/src/interface/utils.ts
index c0a8aa2fff..7ecd3ef5d3 100644
--- a/packages/snaps-controllers/src/interface/utils.ts
+++ b/packages/snaps-controllers/src/interface/utils.ts
@@ -28,6 +28,7 @@ import { isJSXElementUnsafe } from '@metamask/snaps-sdk/jsx';
 import type { InternalAccount } from '@metamask/snaps-utils';
 import {
   createAccountList,
+  createChainIdList,
   getJsonSizeUnsafe,
   getJsxChildren,
   getJsxElementFromComponent,
@@ -40,6 +41,7 @@ import {
   parseCaipAssetType,
   toCaipAccountId,
   parseCaipChainId,
+  KnownCaipNamespace,
 } from '@metamask/utils';
 
 /**
@@ -166,17 +168,46 @@ export function assertNameIsUnique(state: InterfaceState, name: string) {
   );
 }
 
+/**
+ * Check if the chain ID matches the scope.
+ * This function handles the case where a scope represents all EVM compatible chains.
+ * In this case, it returns true if the chain ID is an EIP-155 chain ID.
+ *
+ * @param scope - The scope to check.
+ * @param chainIds - The chain IDs to check against.
+ * @returns Whether one of the chain ID matches the scope.
+ */
+export function matchingChainId(scope: CaipChainId, chainIds: CaipChainId[]) {
+  // if the scope represents all EVM compatible chains, return true if the namespace is EIP-155.
+  if (scope === 'eip155:0') {
+    const namespaces = chainIds.map((chainId) => {
+      const { namespace } = parseCaipChainId(chainId);
+      return namespace;
+    });
+
+    return namespaces.includes(KnownCaipNamespace.Eip155);
+  }
+
+  // Otherwise, check if the scope is in the chain IDs.
+  return chainIds.includes(scope);
+}
+
 /**
  * Format the state value for an account selector.
  *
  * @param account - The account to format.
+ * @param requestedChainIds - The requested chain IDs.
  *
  * @returns The state value for the account selector.
  */
-export function formatAccountSelectorStateValue(account: InternalAccount) {
+export function formatAccountSelectorStateValue(
+  account: InternalAccount,
+  requestedChainIds?: CaipChainId[],
+) {
   const { id, address, scopes } = account;
 
-  const addresses = createAccountList(address, scopes);
+  const chainIds = createChainIdList(scopes, requestedChainIds);
+  const addresses = createAccountList(address, chainIds);
 
   return { accountId: id, addresses };
 }
@@ -249,7 +280,7 @@ export function getDefaultAsset(
 /**
  * Get the default state value for an account selector.
  *
- * @param chainIds - The chain IDs to filter the accounts.
+ * @param element - The account selector element.
  * @param elementDataGetters - Data getters for the element.
  * @param elementDataGetters.getSelectedAccount - A function to get the selected account in the client.
  * @param elementDataGetters.listAccounts - A function to list accounts for the provided chain IDs.
@@ -257,26 +288,30 @@ export function getDefaultAsset(
  * @returns The default state for the account selector.
  */
 export function getAccountSelectorDefaultStateValue(
-  chainIds: CaipChainId[] | undefined,
+  element: AccountSelectorElement,
   { getSelectedAccount, listAccounts, setSelectedAccount }: ElementDataGetters,
 ) {
+  const { chainIds, switchGlobalAccount } = element.props;
+
   const account = getSelectedAccount();
 
   if (!chainIds || chainIds.length === 0) {
-    return formatAccountSelectorStateValue(account);
+    return formatAccountSelectorStateValue(account, chainIds);
   }
 
-  if (account.scopes.some((scope) => chainIds.includes(scope))) {
-    return formatAccountSelectorStateValue(account);
+  if (account.scopes.some((scope) => matchingChainId(scope, chainIds))) {
+    return formatAccountSelectorStateValue(account, chainIds);
   }
 
   const accounts = listAccounts(chainIds);
 
   assert(accounts.length > 0, 'No accounts found for the provided chain IDs.');
 
-  setSelectedAccount(accounts[0].id);
+  if (switchGlobalAccount) {
+    setSelectedAccount(accounts[0].id);
+  }
 
-  return formatAccountSelectorStateValue(accounts[0]);
+  return formatAccountSelectorStateValue(accounts[0], chainIds);
 }
 
 /**
@@ -319,10 +354,7 @@ function constructComponentSpecificDefaultState(
     }
 
     case 'AccountSelector':
-      return getAccountSelectorDefaultStateValue(
-        element.props.chainIds,
-        elementDataGetters,
-      );
+      return getAccountSelectorDefaultStateValue(element, elementDataGetters);
 
     case 'Checkbox':
       return false;
@@ -395,7 +427,7 @@ export function getAccountSelectorStateValue(
     setSelectedAccount(account.id);
   }
 
-  return formatAccountSelectorStateValue(account);
+  return formatAccountSelectorStateValue(account, element.props.chainIds);
 }
 
 /**
diff --git a/packages/snaps-controllers/src/test-utils/controller.ts b/packages/snaps-controllers/src/test-utils/controller.ts
index 38081f98f3..9faf595502 100644
--- a/packages/snaps-controllers/src/test-utils/controller.ts
+++ b/packages/snaps-controllers/src/test-utils/controller.ts
@@ -24,7 +24,6 @@ import {
 } from '@metamask/snaps-rpc-methods';
 import type { SnapId } from '@metamask/snaps-sdk';
 import { text } from '@metamask/snaps-sdk';
-import type { InternalAccount } from '@metamask/snaps-utils';
 import { SnapCaveatType } from '@metamask/snaps-utils';
 import {
   MockControllerMessenger,
@@ -798,6 +797,7 @@ export const getRestrictedSnapInterfaceControllerMessenger = (
       'SnapController:get',
       'AccountsController:getSelectedMultichainAccount',
       'AccountsController:setSelectedAccount',
+      'AccountsController:listMultichainAccounts',
     ],
     allowedEvents: [
       'NotificationServicesController:notificationsListUpdated',
@@ -854,6 +854,18 @@ export const getRestrictedSnapInterfaceControllerMessenger = (
       },
     );
 
+    messenger.registerActionHandler(
+      'AccountsController:listMultichainAccounts',
+      () => [
+        // @ts-expect-error partial mock
+        {
+          id: MOCK_ACCOUNT_ID,
+          address: '0x1234567890123456789012345678901234567890',
+          scopes: ['eip155:0'],
+        },
+      ],
+    );
+
     messenger.registerActionHandler('SnapController:get', (snapId: string) => {
       return getSnapObject({ id: snapId as SnapId });
     });
diff --git a/packages/snaps-utils/src/account.test.ts b/packages/snaps-utils/src/account.test.ts
index 5bf007cc91..19549978bb 100644
--- a/packages/snaps-utils/src/account.test.ts
+++ b/packages/snaps-utils/src/account.test.ts
@@ -1,4 +1,4 @@
-import { createAccountList } from './account';
+import { createAccountList, createChainIdList } from './account';
 
 describe('createAccountList', () => {
   it('creates an account list from an address and a list of chain IDs', () => {
@@ -13,3 +13,32 @@ describe('createAccountList', () => {
     ]);
   });
 });
+
+describe('createChainIdList', () => {
+  it('creates a chain ID list from account scopes and requested chain IDs', () => {
+    const result = createChainIdList(
+      ['eip155:1', 'eip155:2'],
+      ['eip155:1', 'eip155:3'],
+    );
+
+    expect(result).toStrictEqual(['eip155:1']);
+  });
+
+  it('returns all account scopes if no requested chain IDs are provided', () => {
+    const result = createChainIdList(['eip155:1', 'eip155:2']);
+
+    expect(result).toStrictEqual(['eip155:1', 'eip155:2']);
+  });
+
+  it('returns all requested chain IDs if the scope represents all EVM compatible chains', () => {
+    const result = createChainIdList(['eip155:0'], ['eip155:1', 'eip155:2']);
+
+    expect(result).toStrictEqual(['eip155:1', 'eip155:2']);
+  });
+
+  it('returns "eip155:0" if the scope represents all EVM compatible chains', () => {
+    const result = createChainIdList(['eip155:0']);
+
+    expect(result).toStrictEqual(['eip155:0']);
+  });
+});
diff --git a/packages/snaps-utils/src/account.ts b/packages/snaps-utils/src/account.ts
index 76810e6b09..b0159d6db9 100644
--- a/packages/snaps-utils/src/account.ts
+++ b/packages/snaps-utils/src/account.ts
@@ -1,6 +1,10 @@
 import type { SnapId } from '@metamask/snaps-sdk';
 import type { Json, CaipAccountId, CaipChainId } from '@metamask/utils';
-import { parseCaipChainId, toCaipAccountId } from '@metamask/utils';
+import {
+  KnownCaipNamespace,
+  parseCaipChainId,
+  toCaipAccountId,
+} from '@metamask/utils';
 
 /**
  * Copy of the original type from
@@ -35,3 +39,40 @@ export function createAccountList(
     return toCaipAccountId(namespace, reference, address);
   });
 }
+
+/**
+ * Create a list of CAIP chain IDs from a list of account scopes and a list of requested chain IDs.
+ *
+ * @param accountScopes - The account scopes to create the chain ID list from.
+ * @param requestedChainIds - The requested chain IDs to filter the account scopes by.
+ * @returns The list of CAIP chain IDs.
+ */
+export function createChainIdList(
+  accountScopes: CaipChainId[],
+  requestedChainIds?: CaipChainId[],
+) {
+  // If there are no requested chain IDs, return all account scopes.
+  if (!requestedChainIds || requestedChainIds.length === 0) {
+    return accountScopes;
+  }
+
+  return accountScopes.reduce<CaipChainId[]>((acc, scope) => {
+    // If the scope represents all EVM compatible chains, return all requested chain IDs.
+    if (scope === 'eip155:0') {
+      const targetChainIds = requestedChainIds.filter((chainId) => {
+        const { namespace } = parseCaipChainId(chainId);
+
+        return namespace === KnownCaipNamespace.Eip155;
+      });
+
+      return [...acc, ...targetChainIds];
+    }
+
+    // If the scope is not in the requested chain IDs, skip it.
+    if (requestedChainIds.includes(scope)) {
+      return [...acc, scope];
+    }
+
+    return acc;
+  }, []);
+}

From 6ea26db25ae07caeb974ccd74d91f0a900dfd49e Mon Sep 17 00:00:00 2001
From: Guillaume Roux <hello@guillaumerx.fr>
Date: Wed, 9 Apr 2025 14:25:48 +0200
Subject: [PATCH 10/27] add missing JSDoc

---
 .../src/interface/SnapInterfaceController.ts                | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/snaps-controllers/src/interface/SnapInterfaceController.ts b/packages/snaps-controllers/src/interface/SnapInterfaceController.ts
index e320936af4..fc3618b9d2 100644
--- a/packages/snaps-controllers/src/interface/SnapInterfaceController.ts
+++ b/packages/snaps-controllers/src/interface/SnapInterfaceController.ts
@@ -492,6 +492,12 @@ export class SnapInterfaceController extends BaseController<
     );
   }
 
+  /**
+   * Get a list of accounts for the given chain IDs.
+   *
+   * @param chainIds - The chain IDs to get the accounts for.
+   * @returns The list of accounts.
+   */
   #listAccounts(chainIds: CaipChainId[]) {
     const accounts = chainIds.reduce<InternalAccount[]>((acc, chainId) => {
       const result = this.messagingSystem.call(

From e8633ac56e413a88b29318266084f0382b24b26f Mon Sep 17 00:00:00 2001
From: Guillaume Roux <hello@guillaumerx.fr>
Date: Tue, 15 Apr 2025 14:23:55 +0200
Subject: [PATCH 11/27] [WIP] Add support for `hideExternalAccounts`

---
 .../src/interface/SnapInterfaceController.ts  | 21 +++-
 .../snaps-controllers/src/interface/utils.ts  | 99 ++++++++++++-------
 2 files changed, 83 insertions(+), 37 deletions(-)

diff --git a/packages/snaps-controllers/src/interface/SnapInterfaceController.ts b/packages/snaps-controllers/src/interface/SnapInterfaceController.ts
index fc3618b9d2..2b47d61f52 100644
--- a/packages/snaps-controllers/src/interface/SnapInterfaceController.ts
+++ b/packages/snaps-controllers/src/interface/SnapInterfaceController.ts
@@ -293,6 +293,7 @@ export class SnapInterfaceController extends BaseController<
       getSelectedAccount: this.#getSelectedAccount.bind(this),
       setSelectedAccount: this.#setSelectedAccount.bind(this),
       listAccounts: this.#listAccounts.bind(this),
+      snapOwnsAccount: this.#snapOwnsAccount.bind(this, snapId),
     });
 
     this.update((draftState) => {
@@ -349,6 +350,7 @@ export class SnapInterfaceController extends BaseController<
       getSelectedAccount: this.#getSelectedAccount.bind(this),
       setSelectedAccount: this.#setSelectedAccount.bind(this),
       listAccounts: this.#listAccounts.bind(this),
+      snapOwnsAccount: this.#snapOwnsAccount.bind(this, snapId),
     });
 
     this.update((draftState) => {
@@ -498,7 +500,13 @@ export class SnapInterfaceController extends BaseController<
    * @param chainIds - The chain IDs to get the accounts for.
    * @returns The list of accounts.
    */
-  #listAccounts(chainIds: CaipChainId[]) {
+  #listAccounts(chainIds?: CaipChainId[]) {
+    if (!chainIds || chainIds.length === 0) {
+      return this.messagingSystem.call(
+        'AccountsController:listMultichainAccounts',
+      );
+    }
+
     const accounts = chainIds.reduce<InternalAccount[]>((acc, chainId) => {
       const result = this.messagingSystem.call(
         'AccountsController:listMultichainAccounts',
@@ -546,6 +554,17 @@ export class SnapInterfaceController extends BaseController<
     return this.messagingSystem.call('SnapController:get', id);
   }
 
+  /**
+   * Whether if the snap owns the account.
+   *
+   * @param snapId - The snap id.
+   * @param account - The account.
+   * @returns True if the snap owns the account, otherwise false.
+   */
+  #snapOwnsAccount(snapId: SnapId, account: InternalAccount) {
+    return account.metadata.snap?.id === snapId;
+  }
+
   /**
    * Utility function to validate the components of an interface.
    * Throws if something is invalid.
diff --git a/packages/snaps-controllers/src/interface/utils.ts b/packages/snaps-controllers/src/interface/utils.ts
index 7ecd3ef5d3..6cc2f98399 100644
--- a/packages/snaps-controllers/src/interface/utils.ts
+++ b/packages/snaps-controllers/src/interface/utils.ts
@@ -119,7 +119,12 @@ type GetSelectedAccount = () => InternalAccount;
 /**
  * A function to get accounts for the provided chain IDs.
  */
-type ListAccounts = (chainIds: CaipChainId[]) => InternalAccount[];
+type ListAccounts = (chainIds?: CaipChainId[]) => InternalAccount[];
+
+/**
+ * A function to check if the snap owns the account.
+ */
+type SnapOwnsAccount = (account: InternalAccount) => boolean;
 
 /**
  * Data getters for elements.
@@ -130,6 +135,7 @@ type ListAccounts = (chainIds: CaipChainId[]) => InternalAccount[];
  * @param setSelectedAccount - A function to set the selected account in the client.
  * @param getSelectedAccount - A function to get the selected account in the client.
  * @param listAccounts - A function to list accounts for the provided chain IDs.
+ * @param snapOwnsAccount - A function to check if the snap owns the account.
  */
 type ElementDataGetters = {
   getAssetsState: GetAssetsState;
@@ -137,6 +143,7 @@ type ElementDataGetters = {
   getSelectedAccount: GetSelectedAccount;
   setSelectedAccount: SetSelectedAccount;
   listAccounts: ListAccounts;
+  snapOwnsAccount: SnapOwnsAccount;
 };
 
 /**
@@ -285,33 +292,50 @@ export function getDefaultAsset(
  * @param elementDataGetters.getSelectedAccount - A function to get the selected account in the client.
  * @param elementDataGetters.listAccounts - A function to list accounts for the provided chain IDs.
  * @param elementDataGetters.setSelectedAccount - A function to set the selected account in the client.
+ * @param elementDataGetters.snapOwnsAccount - A function to check if the snap owns the account.
  * @returns The default state for the account selector.
  */
 export function getAccountSelectorDefaultStateValue(
   element: AccountSelectorElement,
-  { getSelectedAccount, listAccounts, setSelectedAccount }: ElementDataGetters,
+  {
+    getSelectedAccount,
+    listAccounts,
+    setSelectedAccount,
+    snapOwnsAccount,
+  }: ElementDataGetters,
 ) {
-  const { chainIds, switchGlobalAccount } = element.props;
-
-  const account = getSelectedAccount();
-
-  if (!chainIds || chainIds.length === 0) {
-    return formatAccountSelectorStateValue(account, chainIds);
-  }
-
-  if (account.scopes.some((scope) => matchingChainId(scope, chainIds))) {
-    return formatAccountSelectorStateValue(account, chainIds);
+  const { chainIds, switchGlobalAccount, hideExternalAccounts } = element.props;
+
+  const selectedAccount = getSelectedAccount();
+
+  if (
+    (!chainIds ||
+      chainIds.length === 0 ||
+      selectedAccount.scopes.some((scope) =>
+        matchingChainId(scope, chainIds),
+      )) &&
+    (!hideExternalAccounts ||
+      (hideExternalAccounts && snapOwnsAccount(selectedAccount)))
+  ) {
+    return formatAccountSelectorStateValue(selectedAccount, chainIds);
   }
 
   const accounts = listAccounts(chainIds);
 
-  assert(accounts.length > 0, 'No accounts found for the provided chain IDs.');
+  const filteredAccounts = hideExternalAccounts
+    ? accounts.filter((account) => snapOwnsAccount(account))
+    : accounts;
+
+  assert(
+    filteredAccounts.length > 0,
+    'No accounts found for the provided chain IDs.',
+  );
 
   if (switchGlobalAccount) {
-    setSelectedAccount(accounts[0].id);
+    setSelectedAccount(filteredAccounts[0].id);
   }
 
-  return formatAccountSelectorStateValue(accounts[0], chainIds);
+  return formatAccountSelectorStateValue(filteredAccounts[0], chainIds);
 }
 
 /**
@@ -404,26 +428,37 @@ export function getAssetSelectorStateValue(
  * Get the state value for an account selector.
  *
  * @param element - The account selector element.
- * @param getAccountByAddress - A function to get an account by address.
- * @param setSelectedAccount - A function to set the selected account in the client.
+ * @param elementDataGetters - Data getters for the element.
+ * @param elementDataGetters.getAccountByAddress - A function to get an account by address.
+ * @param elementDataGetters.setSelectedAccount - A function to set the selected account in the client.
+ * @param elementDataGetters.snapOwnsAccount - A function to check if the snap owns the account.
  * @returns The state value for the account selector.
  */
 export function getAccountSelectorStateValue(
   element: AccountSelectorElement,
-  getAccountByAddress: GetAccountByAddress,
-  setSelectedAccount: SetSelectedAccount,
+  {
+    getAccountByAddress,
+    setSelectedAccount,
+    snapOwnsAccount,
+  }: ElementDataGetters,
 ) {
-  if (!element.props.value) {
+  const { value, switchGlobalAccount, hideExternalAccounts } = element.props;
+
+  if (!value) {
     return null;
   }
 
-  const account = getAccountByAddress(element.props.value);
+  const account = getAccountByAddress(value);
 
   if (!account) {
     return null;
   }
 
-  if (element.props.switchGlobalAccount) {
+  if (hideExternalAccounts && !snapOwnsAccount(account)) {
+    return null;
+  }
+
+  if (switchGlobalAccount) {
     setSelectedAccount(account.id);
   }
 
@@ -438,9 +473,6 @@ export function getAccountSelectorStateValue(
  *
  * @param element - The input element.
  * @param elementDataGetters - Data getters for the element.
- * @param elementDataGetters.getAssetsState - A function to get the MultichainAssetController state.
- * @param elementDataGetters.getAccountByAddress - A function to get an account by its address.
- * @param elementDataGetters.setSelectedAccount - A function to set the selected account in the client.
  * @returns The state value for a given component.
  */
 function getComponentStateValue(
@@ -454,18 +486,17 @@ function getComponentStateValue(
     | AssetSelectorElement
     | AddressInputElement
     | AccountSelectorElement,
-  {
-    getAssetsState,
-    getAccountByAddress,
-    setSelectedAccount,
-  }: ElementDataGetters,
+  elementDataGetters: ElementDataGetters,
 ) {
   switch (element.type) {
     case 'Checkbox':
       return element.props.checked;
 
     case 'AssetSelector':
-      return getAssetSelectorStateValue(element.props.value, getAssetsState);
+      return getAssetSelectorStateValue(
+        element.props.value,
+        elementDataGetters.getAssetsState,
+      );
 
     case 'AddressInput': {
       if (!element.props.value) {
@@ -478,11 +509,7 @@ function getComponentStateValue(
     }
 
     case 'AccountSelector':
-      return getAccountSelectorStateValue(
-        element,
-        getAccountByAddress,
-        setSelectedAccount,
-      );
+      return getAccountSelectorStateValue(element, elementDataGetters);
 
     default:
       return element.props.value;

From 9c34381616eb8ca855c5eba04a143e6de6c273fb Mon Sep 17 00:00:00 2001
From: Guillaume Roux <hello@guillaumerx.fr>
Date: Tue, 20 May 2025 15:10:12 +0200
Subject: [PATCH 12/27] support `hideExternalAccounts`

---
 .../SnapInterfaceController.test.tsx          |  90 +++++++++
 .../src/interface/utils.test.tsx              | 172 +++++++++++++++++-
 2 files changed, 256 insertions(+), 6 deletions(-)

diff --git a/packages/snaps-controllers/src/interface/SnapInterfaceController.test.tsx b/packages/snaps-controllers/src/interface/SnapInterfaceController.test.tsx
index 5376657ac6..38be1fd6c2 100644
--- a/packages/snaps-controllers/src/interface/SnapInterfaceController.test.tsx
+++ b/packages/snaps-controllers/src/interface/SnapInterfaceController.test.tsx
@@ -368,6 +368,96 @@ describe('SnapInterfaceController', () => {
       });
     });
 
+    it('can select an account owned by the snap', async () => {
+      const rootMessenger = getRootSnapInterfaceControllerMessenger();
+      const controllerMessenger = getRestrictedSnapInterfaceControllerMessenger(
+        rootMessenger,
+        false,
+      );
+
+      rootMessenger.registerActionHandler(
+        'AccountsController:getSelectedMultichainAccount',
+        () => ({
+          id: MOCK_ACCOUNT_ID,
+          address: '0x1234567890123456789012345678901234567890',
+          scopes: ['eip155:0'],
+          metadata: {
+            // @ts-expect-error partial mock
+            snap: {
+              id: 'npm:foo@1.0.0' as SnapId,
+            },
+          },
+        }),
+      );
+
+      rootMessenger.registerActionHandler(
+        'AccountsController:listMultichainAccounts',
+        () => [
+          {
+            id: MOCK_ACCOUNT_ID,
+            address: '7S3P4HxJpyyigGzodYwHtCxZyUQe9JiBMHyRWXArAaKv',
+            scopes: ['solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp'],
+            metadata: {
+              // @ts-expect-error partial mock
+              snap: {
+                id: MOCK_SNAP_ID,
+              },
+            },
+          },
+        ],
+      );
+
+      rootMessenger.registerActionHandler(
+        'AccountsController:setSelectedAccount',
+        () => {
+          // no-op
+        },
+      );
+
+      // eslint-disable-next-line no-new
+      new SnapInterfaceController({
+        messenger: controllerMessenger,
+      });
+
+      const element = (
+        <Box>
+          <AccountSelector name="foo" hideExternalAccounts />
+        </Box>
+      );
+
+      const id = await rootMessenger.call(
+        'SnapInterfaceController:createInterface',
+        MOCK_SNAP_ID,
+        element,
+      );
+
+      const { content, state } = rootMessenger.call(
+        'SnapInterfaceController:getInterface',
+        MOCK_SNAP_ID,
+        id,
+      );
+
+      expect(rootMessenger.call).toHaveBeenNthCalledWith(
+        2,
+        'AccountsController:getSelectedMultichainAccount',
+      );
+
+      expect(rootMessenger.call).toHaveBeenNthCalledWith(
+        3,
+        'AccountsController:listMultichainAccounts',
+      );
+
+      expect(content).toStrictEqual(element);
+      expect(state).toStrictEqual({
+        foo: {
+          accountId: MOCK_ACCOUNT_ID,
+          addresses: [
+            'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp:7S3P4HxJpyyigGzodYwHtCxZyUQe9JiBMHyRWXArAaKv',
+          ],
+        },
+      });
+    });
+
     it('can get accounts of a specific chain ID from the client', async () => {
       const rootMessenger = getRootSnapInterfaceControllerMessenger();
       const controllerMessenger = getRestrictedSnapInterfaceControllerMessenger(
diff --git a/packages/snaps-controllers/src/interface/utils.test.tsx b/packages/snaps-controllers/src/interface/utils.test.tsx
index 73ff3e5e1a..df2c924ee0 100644
--- a/packages/snaps-controllers/src/interface/utils.test.tsx
+++ b/packages/snaps-controllers/src/interface/utils.test.tsx
@@ -87,6 +87,7 @@ describe('constructState', () => {
     getSelectedAccount: jest.fn(),
     setSelectedAccount: jest.fn(),
     listAccounts: jest.fn(),
+    snapOwnsAccount: jest.fn(),
   };
 
   it('can construct a new component state', () => {
@@ -1387,6 +1388,7 @@ describe('getDefaultAsset', () => {
           getSelectedAccount: jest.fn(),
           setSelectedAccount: jest.fn(),
           listAccounts: jest.fn(),
+          snapOwnsAccount: jest.fn(),
         },
       ),
     ).toStrictEqual({
@@ -1428,6 +1430,7 @@ describe('getDefaultAsset', () => {
           getSelectedAccount: jest.fn(),
           setSelectedAccount: jest.fn(),
           listAccounts: jest.fn(),
+          snapOwnsAccount: jest.fn(),
         },
       ),
     ).toStrictEqual({
@@ -1462,6 +1465,7 @@ describe('getDefaultAsset', () => {
           getSelectedAccount: jest.fn(),
           setSelectedAccount: jest.fn(),
           listAccounts: jest.fn(),
+          snapOwnsAccount: jest.fn(),
         },
       ),
     ).toBeNull();
@@ -1504,6 +1508,7 @@ describe('getDefaultAsset', () => {
           getSelectedAccount: jest.fn(),
           setSelectedAccount: jest.fn(),
           listAccounts: jest.fn(),
+          snapOwnsAccount: jest.fn(),
         },
       ),
     ).toStrictEqual({
@@ -1535,6 +1540,7 @@ describe('getDefaultAsset', () => {
           getSelectedAccount: jest.fn(),
           setSelectedAccount: jest.fn(),
           listAccounts: jest.fn(),
+          snapOwnsAccount: jest.fn(),
         },
       ),
     ).toThrow(
@@ -1643,6 +1649,7 @@ describe('getAccountSelectorDefaultStateValue', () => {
         getAssetsState: jest.fn(),
         setSelectedAccount: jest.fn(),
         listAccounts: jest.fn(),
+        snapOwnsAccount: jest.fn(),
       }),
     ).toStrictEqual({
       accountId: MOCK_ACCOUNT_ID,
@@ -1665,6 +1672,7 @@ describe('getAccountSelectorDefaultStateValue', () => {
           getAssetsState: jest.fn(),
           setSelectedAccount: jest.fn(),
           listAccounts: jest.fn(),
+          snapOwnsAccount: jest.fn(),
         },
       ),
     ).toStrictEqual({
@@ -1673,7 +1681,7 @@ describe('getAccountSelectorDefaultStateValue', () => {
     });
   });
 
-  it('returns the first account of the account that matches the chain Ids if the selected account is not on the same chain ID', () => {
+  it('returns the first account of the accounts that matches the chain Ids if the selected account is not on the same chain ID', () => {
     const getSelectedAccount = jest.fn().mockReturnValue({
       id: MOCK_ACCOUNT_ID,
       address: '0x1234567890123456789012345678901234567890',
@@ -1705,6 +1713,85 @@ describe('getAccountSelectorDefaultStateValue', () => {
           getAssetsState: jest.fn(),
           setSelectedAccount: jest.fn(),
           listAccounts,
+          snapOwnsAccount: jest.fn(),
+        },
+      ),
+    ).toStrictEqual({
+      accountId: MOCK_ACCOUNT_ID,
+      addresses: [
+        'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp:7S3P4HxJpyyigGzodYwHtCxZyUQe9JiBMHyRWXArAaKv',
+      ],
+    });
+  });
+
+  it('returns the currently selected account in the client if the snap owns the account', () => {
+    const getSelectedAccount = jest.fn().mockReturnValue({
+      id: MOCK_ACCOUNT_ID,
+      address: '7S3P4HxJpyyigGzodYwHtCxZyUQe9JiBMHyRWXArAaKv',
+      scopes: ['solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp'],
+    });
+
+    const snapOwnsAccount = jest.fn().mockReturnValue(true);
+    expect(
+      getAccountSelectorDefaultStateValue(
+        <AccountSelector
+          name="foo"
+          hideExternalAccounts
+          chainIds={['solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp']}
+        />,
+        {
+          getSelectedAccount,
+          getAccountByAddress: jest.fn(),
+          getAssetsState: jest.fn(),
+          setSelectedAccount: jest.fn(),
+          listAccounts: jest.fn(),
+          snapOwnsAccount,
+        },
+      ),
+    ).toStrictEqual({
+      accountId: MOCK_ACCOUNT_ID,
+      addresses: [
+        'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp:7S3P4HxJpyyigGzodYwHtCxZyUQe9JiBMHyRWXArAaKv',
+      ],
+    });
+  });
+
+  it('returns the first account of the accounts that matches the chain Ids and that is owned by the snap if the selected account is not on the same chain ID', () => {
+    const getSelectedAccount = jest.fn().mockReturnValue({
+      id: MOCK_ACCOUNT_ID,
+      address: '0x1234567890123456789012345678901234567890',
+      scopes: ['eip155:1', 'eip155:2', 'eip155:3'],
+    });
+
+    const listAccounts = jest.fn().mockReturnValue([
+      {
+        id: MOCK_ACCOUNT_ID,
+        address: '7S3P4HxJpyyigGzodYwHtCxZyUQe9JiBMHyRWXArAaKv',
+        scopes: ['solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp'],
+      },
+      {
+        id: MOCK_ACCOUNT_ID,
+        address: 'DYw8jCTfwHNRJhhmFcbXvVDTqWMEVFBX6ZKUmG5CNSKK',
+        scopes: ['solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp'],
+      },
+    ]);
+
+    const snapOwnsAccount = jest.fn().mockReturnValue(true);
+
+    expect(
+      getAccountSelectorDefaultStateValue(
+        <AccountSelector
+          name="foo"
+          hideExternalAccounts
+          chainIds={['solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp']}
+        />,
+        {
+          getSelectedAccount,
+          getAccountByAddress: jest.fn(),
+          getAssetsState: jest.fn(),
+          setSelectedAccount: jest.fn(),
+          listAccounts,
+          snapOwnsAccount,
         },
       ),
     ).toStrictEqual({
@@ -1736,6 +1823,37 @@ describe('getAccountSelectorDefaultStateValue', () => {
           getAssetsState: jest.fn(),
           setSelectedAccount: jest.fn(),
           listAccounts,
+          snapOwnsAccount: jest.fn(),
+        },
+      ),
+    ).toThrow('No accounts found for the provided chain IDs.');
+  });
+
+  it('throws if no account that the snap owns is found for the given chain IDs', () => {
+    const getSelectedAccount = jest.fn().mockReturnValue({
+      id: MOCK_ACCOUNT_ID,
+      address: '0x1234567890123456789012345678901234567890',
+      scopes: ['eip155:1', 'eip155:2', 'eip155:3'],
+    });
+
+    const listAccounts = jest.fn().mockReturnValue([]);
+
+    const snapOwnsAccount = jest.fn().mockReturnValue(false);
+
+    expect(() =>
+      getAccountSelectorDefaultStateValue(
+        <AccountSelector
+          name="foo"
+          hideExternalAccounts
+          chainIds={['bip122:000000000019d6689c085ae165831e93']}
+        />,
+        {
+          getSelectedAccount,
+          getAccountByAddress: jest.fn(),
+          getAssetsState: jest.fn(),
+          setSelectedAccount: jest.fn(),
+          listAccounts,
+          snapOwnsAccount,
         },
       ),
     ).toThrow('No accounts found for the provided chain IDs.');
@@ -1776,6 +1894,7 @@ describe('getAccountSelectorDefaultStateValue', () => {
           getAssetsState: jest.fn(),
           setSelectedAccount,
           listAccounts,
+          snapOwnsAccount: jest.fn(),
         },
       ),
     ).toStrictEqual({
@@ -1805,8 +1924,14 @@ describe('getAccountSelectorStateValue', () => {
           name="foo"
           value="eip155:1:0x1234567890123456789012345678901234567890"
         />,
-        getAccountByAddress,
-        setSelectedAccount,
+        {
+          getAccountByAddress,
+          setSelectedAccount,
+          getSelectedAccount: jest.fn(),
+          getAssetsState: jest.fn(),
+          listAccounts: jest.fn(),
+          snapOwnsAccount: jest.fn(),
+        },
       ),
     ).toStrictEqual({
       accountId: MOCK_ACCOUNT_ID,
@@ -1818,7 +1943,36 @@ describe('getAccountSelectorStateValue', () => {
     });
   });
 
-  it('returns the null if the account is not found', () => {
+  it('returns null if the account is not owned by the snap', () => {
+    const getAccountByAddress = jest.fn().mockReturnValue({
+      id: MOCK_ACCOUNT_ID,
+      address: '0x1234567890123456789012345678901234567890',
+      scopes: ['eip155:1', 'eip155:2', 'eip155:3'],
+    });
+
+    const setSelectedAccount = jest.fn();
+    const snapOwnsAccount = jest.fn().mockReturnValue(false);
+
+    expect(
+      getAccountSelectorStateValue(
+        <AccountSelector
+          name="foo"
+          hideExternalAccounts
+          value="eip155:1:0x1234567890123456789012345678901234567890"
+        />,
+        {
+          getAccountByAddress,
+          setSelectedAccount,
+          getSelectedAccount: jest.fn(),
+          getAssetsState: jest.fn(),
+          listAccounts: jest.fn(),
+          snapOwnsAccount,
+        },
+      ),
+    ).toBeNull();
+  });
+
+  it('returns null if the account is not found', () => {
     const getAccountByAddress = jest.fn().mockReturnValue(undefined);
 
     const setSelectedAccount = jest.fn();
@@ -1829,8 +1983,14 @@ describe('getAccountSelectorStateValue', () => {
           name="foo"
           value="eip155:1:0x1234567890123456789012345678901234567890"
         />,
-        getAccountByAddress,
-        setSelectedAccount,
+        {
+          getAccountByAddress,
+          setSelectedAccount,
+          getSelectedAccount: jest.fn(),
+          getAssetsState: jest.fn(),
+          listAccounts: jest.fn(),
+          snapOwnsAccount: jest.fn(),
+        },
       ),
     ).toBeNull();
   });

From c56d255ff924a0c1b83c0dfb872242a10f24563a Mon Sep 17 00:00:00 2001
From: Guillaume Roux <hello@guillaumerx.fr>
Date: Tue, 20 May 2025 16:47:01 +0200
Subject: [PATCH 13/27] cleanup

---
 .../src/components/AccountSelector.tsx        | 54 ++++++++++++++
 .../send-flow/src/components/SendFlow.tsx     | 36 +++++-----
 .../send-flow/src/components/SendForm.tsx     | 70 +++++++------------
 .../examples/packages/send-flow/src/data.ts   | 26 +++++++
 .../examples/packages/send-flow/src/index.tsx | 43 +++++++++---
 .../examples/packages/send-flow/src/types.ts  | 26 ++++---
 .../examples/packages/send-flow/src/utils.tsx | 39 +++++++++--
 packages/snaps-utils/coverage.json            |  6 +-
 8 files changed, 212 insertions(+), 88 deletions(-)
 create mode 100644 packages/examples/packages/send-flow/src/components/AccountSelector.tsx
 create mode 100644 packages/examples/packages/send-flow/src/data.ts

diff --git a/packages/examples/packages/send-flow/src/components/AccountSelector.tsx b/packages/examples/packages/send-flow/src/components/AccountSelector.tsx
new file mode 100644
index 0000000000..1d99e07070
--- /dev/null
+++ b/packages/examples/packages/send-flow/src/components/AccountSelector.tsx
@@ -0,0 +1,54 @@
+import {
+  Card,
+  Field,
+  Selector,
+  SelectorOption,
+  type SnapComponent,
+} from '@metamask/snaps-sdk/jsx';
+
+import type { Account } from '../types';
+import { truncate } from '../utils';
+
+/**
+ * The props for the {@link AccountSelector} component.
+ *
+ * @property selectedAccount - The currently selected account.
+ * @property accounts - The available accounts.
+ */
+export type AccountSelectorProps = {
+  selectedAccount: string;
+  accounts: Account[];
+};
+
+/**
+ * A component that shows the account selector.
+ *
+ * @param props - The component props.
+ * @param props.selectedAccount - The currently selected account.
+ * @param props.accounts - The available accounts.
+ * @returns The AccountSelector component.
+ */
+export const AccountSelector: SnapComponent<AccountSelectorProps> = ({
+  selectedAccount,
+  accounts,
+}) => (
+  <Field label={'From account'}>
+    <Selector
+      name="accountSelector"
+      title="From account"
+      value={selectedAccount}
+    >
+      {accounts.map(({ name, address, balance, icon }) => (
+        <SelectorOption value={address}>
+          <Card
+            image={icon}
+            title={name}
+            description={truncate(address, 13)}
+            value={`${balance.amount.toString()} BTC`}
+            extra={`$${balance.fiat.toString()}`}
+          />
+        </SelectorOption>
+      ))}
+    </Selector>
+  </Field>
+);
diff --git a/packages/examples/packages/send-flow/src/components/SendFlow.tsx b/packages/examples/packages/send-flow/src/components/SendFlow.tsx
index e2e0471183..9638cd99ca 100644
--- a/packages/examples/packages/send-flow/src/components/SendFlow.tsx
+++ b/packages/examples/packages/send-flow/src/components/SendFlow.tsx
@@ -1,7 +1,3 @@
-import type {
-  AccountSelectorState,
-  AssetSelectorState,
-} from '@metamask/snaps-sdk';
 import type { SnapComponent } from '@metamask/snaps-sdk/jsx';
 import { Box, Container } from '@metamask/snaps-sdk/jsx';
 
@@ -9,11 +5,13 @@ import { SendFlowFooter } from './SendFlowFooter';
 import { SendFlowHeader } from './SendFlowHeader';
 import { SendForm } from './SendForm';
 import { TransactionSummary } from './TransactionSummary';
-import type { Currency } from '../types';
+import type { Account, 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 total - The total cost of the transaction.
  * @property fees - The fees for the transaction.
@@ -21,50 +19,50 @@ import type { Currency } from '../types';
  * @property displayAvatar - Whether to display the avatar of the address.
  */
 export type SendFlowProps = {
-  displayAvatar?: boolean;
-  useFiat: boolean;
-  account: AccountSelectorState | null;
-  asset: AssetSelectorState | null;
+  accounts: Account[];
+  selectedAccount: string;
+  selectedCurrency: 'BTC' | '$';
   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.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.
  * @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> = ({
+  accounts,
+  selectedAccount,
+  selectedCurrency,
   total,
   fees,
   errors,
-  useFiat,
   displayAvatar,
-  account,
-  asset,
 }) => {
   return (
     <Container>
       <Box>
         <SendFlowHeader />
         <SendForm
-          displayAvatar={displayAvatar}
-          useFiat={useFiat}
-          account={account}
-          asset={asset}
+          selectedAccount={selectedAccount}
+          accounts={accounts}
+          selectedCurrency={selectedCurrency}
           errors={errors}
+          displayAvatar={displayAvatar}
         />
         <TransactionSummary fees={fees} total={total} />
       </Box>
diff --git a/packages/examples/packages/send-flow/src/components/SendForm.tsx b/packages/examples/packages/send-flow/src/components/SendForm.tsx
index ae9d0062f0..4b3aefdada 100644
--- a/packages/examples/packages/send-flow/src/components/SendForm.tsx
+++ b/packages/examples/packages/send-flow/src/components/SendForm.tsx
@@ -1,35 +1,34 @@
-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 type { SendFormErrors } from '../types';
+import { AccountSelector } from './AccountSelector';
+import btcIcon from '../images/btc.svg';
+import type { Account, 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 displayAvatar - Whether to display the avatar of the address.
  */
 export type SendFormProps = {
-  useFiat: boolean;
+  selectedAccount: string;
+  accounts: Account[];
   errors?: SendFormErrors;
-  account: AccountSelectorState | null;
-  asset: AssetSelectorState | null;
+  selectedCurrency: 'BTC' | '$';
   displayAvatar?: boolean | undefined;
 };
 
@@ -37,49 +36,34 @@ 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.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> = ({
+  selectedAccount,
+  accounts,
   errors,
-  useFiat,
-  account,
-  asset,
+  selectedCurrency,
   displayAvatar,
 }) => (
   <Form name="sendForm">
-    <Field label="From account">
-      <AccountSelector
-        name="account"
-        switchGlobalAccount
-        chainIds={[
-          'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp',
-          'solana:EtWTRABZaYq6iMfeYKouRu166VU2xqa1',
-        ]}
-      />
+    <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>
-    <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"
diff --git a/packages/examples/packages/send-flow/src/data.ts b/packages/examples/packages/send-flow/src/data.ts
new file mode 100644
index 0000000000..4b821fb503
--- /dev/null
+++ b/packages/examples/packages/send-flow/src/data.ts
@@ -0,0 +1,26 @@
+import jazzicon1 from './images/jazzicon1.svg';
+import jazzicon2 from './images/jazzicon2.svg';
+import type { Account } from './types';
+
+/**
+ * Example accounts data.
+ */
+export const accounts: Record<string, Account> = {
+  bc1qxy2kgdygjrsqtzq2n0yrf2493p83kkfjhx0wlh: {
+    name: 'My Bitcoin Account',
+    address: 'bc1qxy2kgdygjrsqtzq2n0yrf2493p83kkfjhx0wlh',
+    balance: { amount: 1.8, fiat: 92000 },
+    icon: jazzicon1,
+  },
+  bc1pmpg8yzpty4xgp497qdydkcqt90zz68n48wzwm757vk8nrlkat99q272xm3: {
+    name: 'Savings Account',
+    address: 'bc1pmpg8yzpty4xgp497qdydkcqt90zz68n48wzwm757vk8nrlkat99q272xm3',
+    balance: { amount: 2.5, fiat: 150000 },
+    icon: jazzicon2,
+  },
+};
+
+/**
+ * Example accounts data as an array.
+ */
+export const accountsArray = Object.values(accounts);
diff --git a/packages/examples/packages/send-flow/src/index.tsx b/packages/examples/packages/send-flow/src/index.tsx
index 0cb9d6375b..6e06fd8385 100644
--- a/packages/examples/packages/send-flow/src/index.tsx
+++ b/packages/examples/packages/send-flow/src/index.tsx
@@ -3,11 +3,11 @@ import type {
   OnHomePageHandler,
   OnUserInputHandler,
   OnRpcRequestHandler,
-  AssetSelectorState,
 } from '@metamask/snaps-sdk';
 import { UserInputEventType } from '@metamask/snaps-sdk';
 
 import { SendFlow } from './components';
+import { accountsArray, accounts } from './data';
 import type { SendFormState, SendFlowContext } from './types';
 import { formValidation, generateSendFlow, isCaipHexAddress } from './utils';
 
@@ -26,6 +26,8 @@ export const onRpcRequest: OnRpcRequestHandler = async ({ request }) => {
   switch (request.method) {
     case 'display': {
       const interfaceId = await generateSendFlow({
+        accountsArray,
+        accounts,
         fees: { amount: 1.0001, fiat: 1.23 },
       });
 
@@ -54,6 +56,8 @@ export const onRpcRequest: OnRpcRequestHandler = async ({ request }) => {
  */
 export const onHomePage: OnHomePageHandler = async () => {
   const interfaceId = await generateSendFlow({
+    accountsArray,
+    accounts,
     fees: { amount: 1.0001, fiat: 1.23 },
   });
 
@@ -75,7 +79,7 @@ export const onUserInput: OnUserInputHandler = async ({
   id,
   context,
 }) => {
-  const { useFiat, fees } = context as SendFlowContext;
+  const { selectedCurrency, fees } = context as SendFlowContext;
 
   const state = await snap.request({
     method: 'snap_getInterfaceState',
@@ -84,7 +88,7 @@ export const onUserInput: OnUserInputHandler = async ({
 
   const sendForm = state.sendForm as SendFormState;
 
-  const formErrors = formValidation(sendForm);
+  const formErrors = formValidation(sendForm, context as SendFlowContext);
 
   const total = {
     amount: Number(sendForm.amount ?? 0) + fees.amount,
@@ -94,18 +98,16 @@ export const onUserInput: OnUserInputHandler = async ({
   if (event.type === UserInputEventType.InputChangeEvent) {
     switch (event.name) {
       case 'amount':
-      case 'to':
-      case 'account':
-      case 'asset': {
+      case 'to': {
         await snap.request({
           method: 'snap_updateInterface',
           params: {
             id,
             ui: (
               <SendFlow
-                asset={state.asset as AssetSelectorState}
-                account={sendForm.account}
-                useFiat={useFiat}
+                accounts={accountsArray}
+                selectedAccount={sendForm.accountSelector}
+                selectedCurrency={selectedCurrency}
                 total={total}
                 fees={fees}
                 errors={formErrors}
@@ -120,6 +122,29 @@ export const onUserInput: OnUserInputHandler = async ({
         });
         break;
       }
+
+      case 'accountSelector': {
+        await snap.request({
+          method: 'snap_updateInterface',
+          params: {
+            id,
+            ui: (
+              <SendFlow
+                accounts={accountsArray}
+                selectedAccount={sendForm.accountSelector}
+                selectedCurrency={selectedCurrency}
+                total={total}
+                fees={fees}
+                errors={formErrors}
+                displayAvatar={isCaipHexAddress(sendForm.to)}
+              />
+            ),
+          },
+        });
+
+        break;
+      }
+
       default:
         break;
     }
diff --git a/packages/examples/packages/send-flow/src/types.ts b/packages/examples/packages/send-flow/src/types.ts
index e76523e4e2..08b340749f 100644
--- a/packages/examples/packages/send-flow/src/types.ts
+++ b/packages/examples/packages/send-flow/src/types.ts
@@ -1,8 +1,3 @@
-import type {
-  AccountSelectorState,
-  AssetSelectorState,
-} from '@metamask/snaps-sdk';
-
 /**
  * The state of the send form.
  *
@@ -13,8 +8,7 @@ import type {
 export type SendFormState = {
   to: string;
   amount: string;
-  account: AccountSelectorState | null;
-  asset: AssetSelectorState | null;
+  accountSelector: string;
 };
 
 /**
@@ -28,6 +22,21 @@ 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.
  *
@@ -47,6 +56,7 @@ export type Currency = {
  * @property fees - The fees for the transaction.
  */
 export type SendFlowContext = {
-  useFiat: boolean;
+  accounts: Record<string, Account>;
+  selectedCurrency: 'BTC' | '$';
   fees: Currency;
 };
diff --git a/packages/examples/packages/send-flow/src/utils.tsx b/packages/examples/packages/send-flow/src/utils.tsx
index 51120eccff..e62f42dad8 100644
--- a/packages/examples/packages/send-flow/src/utils.tsx
+++ b/packages/examples/packages/send-flow/src/utils.tsx
@@ -7,9 +7,17 @@ import {
 } from '@metamask/utils';
 
 import { SendFlow } from './components';
-import type { Currency, SendFormErrors, SendFormState } from './types';
+import type {
+  Account,
+  Currency,
+  SendFlowContext,
+  SendFormErrors,
+  SendFormState,
+} from './types';
 
 export type GenerateSendFlowParams = {
+  accountsArray: Account[];
+  accounts: Record<string, Account>;
   fees: Currency;
 };
 
@@ -17,23 +25,30 @@ export type GenerateSendFlowParams = {
  * Generate the send flow.
  *
  * @param params - The parameters for the send form.
+ * @param params.accountsArray - The available accounts as an array.
+ * @param params.accounts - The available accounts.
  * @param params.fees - The fees for the transaction.
  * @returns The interface ID.
  */
-export async function generateSendFlow({ fees }: GenerateSendFlowParams) {
+export async function generateSendFlow({
+  accountsArray,
+  accounts,
+  fees,
+}: GenerateSendFlowParams) {
   return await snap.request({
     method: 'snap_createInterface',
     params: {
       ui: (
         <SendFlow
-          useFiat={false}
-          account={null}
-          asset={null}
+          accounts={accountsArray}
+          selectedAccount={accountsArray[0].address}
+          selectedCurrency="BTC"
           total={{ amount: 0, fiat: 0 }}
           fees={fees}
         />
       ),
       context: {
+        accounts,
         selectedCurrency: 'BTC',
         fees,
       },
@@ -45,15 +60,27 @@ export async function generateSendFlow({ fees }: GenerateSendFlowParams) {
  * Validate the send form.
  *
  * @param formState - The state of the send form.
+ * @param context - The context of the interface.
  * @returns The form errors.
  */
-export function formValidation(formState: SendFormState): SendFormErrors {
+export function formValidation(
+  formState: SendFormState,
+  context: SendFlowContext,
+): SendFormErrors {
   const errors: Partial<SendFormErrors> = {};
 
   if (formState.to === 'invalid address') {
     errors.to = 'Invalid address';
   }
 
+  if (
+    formState.amount &&
+    Number(formState.amount) >
+      context.accounts[formState.accountSelector].balance.amount
+  ) {
+    errors.amount = 'Insufficient funds';
+  }
+
   return errors;
 }
 
diff --git a/packages/snaps-utils/coverage.json b/packages/snaps-utils/coverage.json
index 659b3a5c59..ab105beef9 100644
--- a/packages/snaps-utils/coverage.json
+++ b/packages/snaps-utils/coverage.json
@@ -1,6 +1,6 @@
 {
   "branches": 99.75,
-  "functions": 98.99,
-  "lines": 98.61,
-  "statements": 97.15
+  "functions": 98.97,
+  "lines": 98.59,
+  "statements": 97.11
 }

From d2a05c876acf7a3a67fcccd3d5e86914e0e0980d Mon Sep 17 00:00:00 2001
From: Guillaume Roux <hello@guillaumerx.fr>
Date: Wed, 21 May 2025 12:10:34 +0200
Subject: [PATCH 14/27] address requested changes

---
 .../SnapInterfaceController.test.tsx          | 121 +++++++++++++-----
 .../src/interface/SnapInterfaceController.ts  |  43 ++-----
 .../src/interface/utils.test.tsx              |  99 +-------------
 .../snaps-controllers/src/interface/utils.ts  |  37 +-----
 .../src/test-utils/controller.ts              |   8 --
 packages/snaps-utils/src/account.test.ts      |  41 +++++-
 packages/snaps-utils/src/account.ts           |  26 ++--
 7 files changed, 157 insertions(+), 218 deletions(-)

diff --git a/packages/snaps-controllers/src/interface/SnapInterfaceController.test.tsx b/packages/snaps-controllers/src/interface/SnapInterfaceController.test.tsx
index 38be1fd6c2..3da7380608 100644
--- a/packages/snaps-controllers/src/interface/SnapInterfaceController.test.tsx
+++ b/packages/snaps-controllers/src/interface/SnapInterfaceController.test.tsx
@@ -311,13 +311,6 @@ describe('SnapInterfaceController', () => {
         }),
       );
 
-      rootMessenger.registerActionHandler(
-        'AccountsController:setSelectedAccount',
-        () => {
-          // no-op
-        },
-      );
-
       // eslint-disable-next-line no-new
       new SnapInterfaceController({
         messenger: controllerMessenger,
@@ -351,12 +344,6 @@ describe('SnapInterfaceController', () => {
         '7S3P4HxJpyyigGzodYwHtCxZyUQe9JiBMHyRWXArAaKv',
       );
 
-      expect(rootMessenger.call).toHaveBeenNthCalledWith(
-        3,
-        'AccountsController:setSelectedAccount',
-        MOCK_ACCOUNT_ID,
-      );
-
       expect(content).toStrictEqual(element);
       expect(state).toStrictEqual({
         foo: {
@@ -407,13 +394,6 @@ describe('SnapInterfaceController', () => {
         ],
       );
 
-      rootMessenger.registerActionHandler(
-        'AccountsController:setSelectedAccount',
-        () => {
-          // no-op
-        },
-      );
-
       // eslint-disable-next-line no-new
       new SnapInterfaceController({
         messenger: controllerMessenger,
@@ -487,13 +467,6 @@ describe('SnapInterfaceController', () => {
         ],
       );
 
-      rootMessenger.registerActionHandler(
-        'AccountsController:setSelectedAccount',
-        () => {
-          // no-op
-        },
-      );
-
       // eslint-disable-next-line no-new
       new SnapInterfaceController({
         messenger: controllerMessenger,
@@ -532,12 +505,6 @@ describe('SnapInterfaceController', () => {
         'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp',
       );
 
-      expect(rootMessenger.call).toHaveBeenNthCalledWith(
-        4,
-        'AccountsController:setSelectedAccount',
-        MOCK_ACCOUNT_ID,
-      );
-
       expect(content).toStrictEqual(element);
       expect(state).toStrictEqual({
         foo: {
@@ -1467,6 +1434,94 @@ describe('SnapInterfaceController', () => {
         ),
       ).rejects.toThrow('Interface not created by foo.');
     });
+
+    it('can select an account owned by the snap', async () => {
+      const rootMessenger = getRootSnapInterfaceControllerMessenger();
+      const controllerMessenger = getRestrictedSnapInterfaceControllerMessenger(
+        rootMessenger,
+        false,
+      );
+
+      rootMessenger.registerActionHandler(
+        'AccountsController:getSelectedMultichainAccount',
+        () => ({
+          id: MOCK_ACCOUNT_ID,
+          address: '0x1234567890123456789012345678901234567890',
+          scopes: ['eip155:0'],
+          metadata: {
+            // @ts-expect-error partial mock
+            snap: {
+              id: 'npm:foo@1.0.0' as SnapId,
+            },
+          },
+        }),
+      );
+
+      rootMessenger.registerActionHandler(
+        'AccountsController:getAccountByAddress',
+        () => ({
+          id: MOCK_ACCOUNT_ID,
+          address: '7S3P4HxJpyyigGzodYwHtCxZyUQe9JiBMHyRWXArAaKv',
+          scopes: ['solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp'],
+          metadata: {
+            // @ts-expect-error partial mock
+            snap: {
+              id: MOCK_SNAP_ID,
+            },
+          },
+        }),
+      );
+
+      // eslint-disable-next-line no-new
+      new SnapInterfaceController({
+        messenger: controllerMessenger,
+      });
+
+      const element = (
+        <Box>
+          <AccountSelector name="foo" />
+        </Box>
+      );
+
+      const newElement = (
+        <Box>
+          <AccountSelector
+            name="foo"
+            hideExternalAccounts
+            value="solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp:7S3P4HxJpyyigGzodYwHtCxZyUQe9JiBMHyRWXArAaKv"
+          />
+        </Box>
+      );
+
+      const id = await rootMessenger.call(
+        'SnapInterfaceController:createInterface',
+        MOCK_SNAP_ID,
+        element,
+      );
+
+      await rootMessenger.call(
+        'SnapInterfaceController:updateInterface',
+        MOCK_SNAP_ID,
+        id,
+        newElement,
+      );
+
+      const { content, state } = rootMessenger.call(
+        'SnapInterfaceController:getInterface',
+        MOCK_SNAP_ID,
+        id,
+      );
+
+      expect(content).toStrictEqual(newElement);
+      expect(state).toStrictEqual({
+        foo: {
+          accountId: MOCK_ACCOUNT_ID,
+          addresses: [
+            'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp:7S3P4HxJpyyigGzodYwHtCxZyUQe9JiBMHyRWXArAaKv',
+          ],
+        },
+      });
+    });
   });
 
   describe('updateInterfaceState', () => {
diff --git a/packages/snaps-controllers/src/interface/SnapInterfaceController.ts b/packages/snaps-controllers/src/interface/SnapInterfaceController.ts
index 2b47d61f52..3d1c7a30a2 100644
--- a/packages/snaps-controllers/src/interface/SnapInterfaceController.ts
+++ b/packages/snaps-controllers/src/interface/SnapInterfaceController.ts
@@ -19,7 +19,11 @@ import type {
 import { ContentType } from '@metamask/snaps-sdk';
 import type { JSXElement } from '@metamask/snaps-sdk/jsx';
 import type { InternalAccount } from '@metamask/snaps-utils';
-import { getJsonSizeUnsafe, validateJsxElements } from '@metamask/snaps-utils';
+import {
+  getJsonSizeUnsafe,
+  snapOwnsAccount,
+  validateJsxElements,
+} from '@metamask/snaps-utils';
 import type {
   CaipAccountId,
   CaipAssetType,
@@ -81,11 +85,6 @@ type AccountsControllerGetSelectedMultichainAccountAction = {
   handler: () => InternalAccount;
 };
 
-type AccountsControllerSetSelectedAccountAction = {
-  type: `AccountsController:setSelectedAccount`;
-  handler: (accountId: string) => void;
-};
-
 type AccountsControllerListMultichainAccountsAction = {
   type: `AccountsController:listMultichainAccounts`;
   handler: (chainId?: CaipChainId) => InternalAccount[];
@@ -114,7 +113,6 @@ export type SnapInterfaceControllerAllowedActions =
   | MultichainAssetsControllerGetStateAction
   | AccountsControllerGetSelectedMultichainAccountAction
   | AccountsControllerGetAccountByAddressAction
-  | AccountsControllerSetSelectedAccountAction
   | AccountsControllerListMultichainAccountsAction;
 
 export type SnapInterfaceControllerActions =
@@ -291,9 +289,9 @@ export class SnapInterfaceController extends BaseController<
       getAssetsState: this.#getAssetsState.bind(this),
       getAccountByAddress: this.#getAccountByAddress.bind(this),
       getSelectedAccount: this.#getSelectedAccount.bind(this),
-      setSelectedAccount: this.#setSelectedAccount.bind(this),
       listAccounts: this.#listAccounts.bind(this),
-      snapOwnsAccount: this.#snapOwnsAccount.bind(this, snapId),
+      snapOwnsAccount: (account: InternalAccount) =>
+        snapOwnsAccount(snapId, account),
     });
 
     this.update((draftState) => {
@@ -348,9 +346,9 @@ export class SnapInterfaceController extends BaseController<
       getAssetsState: this.#getAssetsState.bind(this),
       getAccountByAddress: this.#getAccountByAddress.bind(this),
       getSelectedAccount: this.#getSelectedAccount.bind(this),
-      setSelectedAccount: this.#setSelectedAccount.bind(this),
       listAccounts: this.#listAccounts.bind(this),
-      snapOwnsAccount: this.#snapOwnsAccount.bind(this, snapId),
+      snapOwnsAccount: (account: InternalAccount) =>
+        snapOwnsAccount(snapId, account),
     });
 
     this.update((draftState) => {
@@ -482,18 +480,6 @@ export class SnapInterfaceController extends BaseController<
     );
   }
 
-  /**
-   * Set the selected account in the client.
-   *
-   * @param accountId - The account id.
-   */
-  #setSelectedAccount(accountId: string) {
-    this.messagingSystem.call(
-      'AccountsController:setSelectedAccount',
-      accountId,
-    );
-  }
-
   /**
    * Get a list of accounts for the given chain IDs.
    *
@@ -554,17 +540,6 @@ export class SnapInterfaceController extends BaseController<
     return this.messagingSystem.call('SnapController:get', id);
   }
 
-  /**
-   * Whether if the snap owns the account.
-   *
-   * @param snapId - The snap id.
-   * @param account - The account.
-   * @returns True if the snap owns the account, otherwise false.
-   */
-  #snapOwnsAccount(snapId: SnapId, account: InternalAccount) {
-    return account.metadata.snap?.id === snapId;
-  }
-
   /**
    * Utility function to validate the components of an interface.
    * Throws if something is invalid.
diff --git a/packages/snaps-controllers/src/interface/utils.test.tsx b/packages/snaps-controllers/src/interface/utils.test.tsx
index df2c924ee0..4cf4723fb0 100644
--- a/packages/snaps-controllers/src/interface/utils.test.tsx
+++ b/packages/snaps-controllers/src/interface/utils.test.tsx
@@ -85,7 +85,7 @@ describe('constructState', () => {
     getAssetsState: jest.fn(),
     getAccountByAddress: jest.fn(),
     getSelectedAccount: jest.fn(),
-    setSelectedAccount: jest.fn(),
+
     listAccounts: jest.fn(),
     snapOwnsAccount: jest.fn(),
   };
@@ -809,35 +809,6 @@ describe('constructState', () => {
     });
   });
 
-  it('switches the selected account if `switchGlobalAccount` is set', () => {
-    elementDataGetters.getAccountByAddress.mockImplementation(
-      (caipAccountId: CaipAccountId) => {
-        const { address } = parseCaipAccountId(caipAccountId);
-        return {
-          id: MOCK_ACCOUNT_ID,
-          address,
-          scopes: ['eip155:0'],
-        };
-      },
-    );
-
-    const element = (
-      <Box>
-        <AccountSelector
-          name="foo"
-          value="eip155:0:0x1234567890123456789012345678901234567890"
-          switchGlobalAccount
-        />
-      </Box>
-    );
-
-    constructState({}, element, elementDataGetters);
-
-    expect(elementDataGetters.setSelectedAccount).toHaveBeenCalledWith(
-      MOCK_ACCOUNT_ID,
-    );
-  });
-
   it('sets default value for root level AssetSelector', () => {
     elementDataGetters.getAssetsState.mockReturnValue({
       assetsMetadata: {
@@ -1386,7 +1357,6 @@ describe('getDefaultAsset', () => {
           getAssetsState,
           getAccountByAddress,
           getSelectedAccount: jest.fn(),
-          setSelectedAccount: jest.fn(),
           listAccounts: jest.fn(),
           snapOwnsAccount: jest.fn(),
         },
@@ -1428,7 +1398,6 @@ describe('getDefaultAsset', () => {
           getAssetsState,
           getAccountByAddress,
           getSelectedAccount: jest.fn(),
-          setSelectedAccount: jest.fn(),
           listAccounts: jest.fn(),
           snapOwnsAccount: jest.fn(),
         },
@@ -1463,7 +1432,6 @@ describe('getDefaultAsset', () => {
           getAssetsState,
           getAccountByAddress,
           getSelectedAccount: jest.fn(),
-          setSelectedAccount: jest.fn(),
           listAccounts: jest.fn(),
           snapOwnsAccount: jest.fn(),
         },
@@ -1506,7 +1474,6 @@ describe('getDefaultAsset', () => {
           getAssetsState,
           getAccountByAddress,
           getSelectedAccount: jest.fn(),
-          setSelectedAccount: jest.fn(),
           listAccounts: jest.fn(),
           snapOwnsAccount: jest.fn(),
         },
@@ -1538,7 +1505,6 @@ describe('getDefaultAsset', () => {
           getAssetsState,
           getAccountByAddress,
           getSelectedAccount: jest.fn(),
-          setSelectedAccount: jest.fn(),
           listAccounts: jest.fn(),
           snapOwnsAccount: jest.fn(),
         },
@@ -1647,7 +1613,6 @@ describe('getAccountSelectorDefaultStateValue', () => {
         getSelectedAccount,
         getAccountByAddress: jest.fn(),
         getAssetsState: jest.fn(),
-        setSelectedAccount: jest.fn(),
         listAccounts: jest.fn(),
         snapOwnsAccount: jest.fn(),
       }),
@@ -1670,7 +1635,6 @@ describe('getAccountSelectorDefaultStateValue', () => {
           getSelectedAccount,
           getAccountByAddress: jest.fn(),
           getAssetsState: jest.fn(),
-          setSelectedAccount: jest.fn(),
           listAccounts: jest.fn(),
           snapOwnsAccount: jest.fn(),
         },
@@ -1711,7 +1675,6 @@ describe('getAccountSelectorDefaultStateValue', () => {
           getSelectedAccount,
           getAccountByAddress: jest.fn(),
           getAssetsState: jest.fn(),
-          setSelectedAccount: jest.fn(),
           listAccounts,
           snapOwnsAccount: jest.fn(),
         },
@@ -1743,7 +1706,6 @@ describe('getAccountSelectorDefaultStateValue', () => {
           getSelectedAccount,
           getAccountByAddress: jest.fn(),
           getAssetsState: jest.fn(),
-          setSelectedAccount: jest.fn(),
           listAccounts: jest.fn(),
           snapOwnsAccount,
         },
@@ -1789,7 +1751,6 @@ describe('getAccountSelectorDefaultStateValue', () => {
           getSelectedAccount,
           getAccountByAddress: jest.fn(),
           getAssetsState: jest.fn(),
-          setSelectedAccount: jest.fn(),
           listAccounts,
           snapOwnsAccount,
         },
@@ -1821,7 +1782,6 @@ describe('getAccountSelectorDefaultStateValue', () => {
           getSelectedAccount,
           getAccountByAddress: jest.fn(),
           getAssetsState: jest.fn(),
-          setSelectedAccount: jest.fn(),
           listAccounts,
           snapOwnsAccount: jest.fn(),
         },
@@ -1851,61 +1811,12 @@ describe('getAccountSelectorDefaultStateValue', () => {
           getSelectedAccount,
           getAccountByAddress: jest.fn(),
           getAssetsState: jest.fn(),
-          setSelectedAccount: jest.fn(),
           listAccounts,
           snapOwnsAccount,
         },
       ),
     ).toThrow('No accounts found for the provided chain IDs.');
   });
-
-  it('switches the selected account in the client if "switchGlobalAccount" is true', () => {
-    const getSelectedAccount = jest.fn().mockReturnValue({
-      id: MOCK_ACCOUNT_ID,
-      address: '0x1234567890123456789012345678901234567890',
-      scopes: ['eip155:1', 'eip155:2', 'eip155:3'],
-    });
-
-    const listAccounts = jest.fn().mockReturnValue([
-      {
-        id: MOCK_ACCOUNT_ID,
-        address: '7S3P4HxJpyyigGzodYwHtCxZyUQe9JiBMHyRWXArAaKv',
-        scopes: ['solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp'],
-      },
-      {
-        id: MOCK_ACCOUNT_ID,
-        address: 'DYw8jCTfwHNRJhhmFcbXvVDTqWMEVFBX6ZKUmG5CNSKK',
-        scopes: ['solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp'],
-      },
-    ]);
-
-    const setSelectedAccount = jest.fn();
-
-    expect(
-      getAccountSelectorDefaultStateValue(
-        <AccountSelector
-          name="foo"
-          switchGlobalAccount={true}
-          chainIds={['solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp']}
-        />,
-        {
-          getSelectedAccount,
-          getAccountByAddress: jest.fn(),
-          getAssetsState: jest.fn(),
-          setSelectedAccount,
-          listAccounts,
-          snapOwnsAccount: jest.fn(),
-        },
-      ),
-    ).toStrictEqual({
-      accountId: MOCK_ACCOUNT_ID,
-      addresses: [
-        'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp:7S3P4HxJpyyigGzodYwHtCxZyUQe9JiBMHyRWXArAaKv',
-      ],
-    });
-
-    expect(setSelectedAccount).toHaveBeenCalledWith(MOCK_ACCOUNT_ID);
-  });
 });
 
 describe('getAccountSelectorStateValue', () => {
@@ -1916,8 +1827,6 @@ describe('getAccountSelectorStateValue', () => {
       scopes: ['eip155:1', 'eip155:2', 'eip155:3'],
     });
 
-    const setSelectedAccount = jest.fn();
-
     expect(
       getAccountSelectorStateValue(
         <AccountSelector
@@ -1926,7 +1835,6 @@ describe('getAccountSelectorStateValue', () => {
         />,
         {
           getAccountByAddress,
-          setSelectedAccount,
           getSelectedAccount: jest.fn(),
           getAssetsState: jest.fn(),
           listAccounts: jest.fn(),
@@ -1950,7 +1858,6 @@ describe('getAccountSelectorStateValue', () => {
       scopes: ['eip155:1', 'eip155:2', 'eip155:3'],
     });
 
-    const setSelectedAccount = jest.fn();
     const snapOwnsAccount = jest.fn().mockReturnValue(false);
 
     expect(
@@ -1962,7 +1869,6 @@ describe('getAccountSelectorStateValue', () => {
         />,
         {
           getAccountByAddress,
-          setSelectedAccount,
           getSelectedAccount: jest.fn(),
           getAssetsState: jest.fn(),
           listAccounts: jest.fn(),
@@ -1975,8 +1881,6 @@ describe('getAccountSelectorStateValue', () => {
   it('returns null if the account is not found', () => {
     const getAccountByAddress = jest.fn().mockReturnValue(undefined);
 
-    const setSelectedAccount = jest.fn();
-
     expect(
       getAccountSelectorStateValue(
         <AccountSelector
@@ -1985,7 +1889,6 @@ describe('getAccountSelectorStateValue', () => {
         />,
         {
           getAccountByAddress,
-          setSelectedAccount,
           getSelectedAccount: jest.fn(),
           getAssetsState: jest.fn(),
           listAccounts: jest.fn(),
diff --git a/packages/snaps-controllers/src/interface/utils.ts b/packages/snaps-controllers/src/interface/utils.ts
index 6cc2f98399..0987e8db01 100644
--- a/packages/snaps-controllers/src/interface/utils.ts
+++ b/packages/snaps-controllers/src/interface/utils.ts
@@ -102,13 +102,6 @@ type GetAccountByAddress = (
   address: CaipAccountId,
 ) => InternalAccount | undefined;
 
-/**
- * A function to set the selected account in the client.
- *
- * @param accountId - The account ID.
- */
-type SetSelectedAccount = (accountId: string) => void;
-
 /**
  * A function to get the selected account in the client.
  *
@@ -132,7 +125,6 @@ type SnapOwnsAccount = (account: InternalAccount) => boolean;
  *
  * @param getAssetState - A function to get the MultichainAssetController state.
  * @param getAccountByAddress - A function to get an account by its address.
- * @param setSelectedAccount - A function to set the selected account in the client.
  * @param getSelectedAccount - A function to get the selected account in the client.
  * @param listAccounts - A function to list accounts for the provided chain IDs.
  * @param snapOwnsAccount - A function to check if the snap owns the account.
@@ -141,7 +133,6 @@ type ElementDataGetters = {
   getAssetsState: GetAssetsState;
   getAccountByAddress: GetAccountByAddress;
   getSelectedAccount: GetSelectedAccount;
-  setSelectedAccount: SetSelectedAccount;
   listAccounts: ListAccounts;
   snapOwnsAccount: SnapOwnsAccount;
 };
@@ -291,20 +282,14 @@ export function getDefaultAsset(
  * @param elementDataGetters - Data getters for the element.
  * @param elementDataGetters.getSelectedAccount - A function to get the selected account in the client.
  * @param elementDataGetters.listAccounts - A function to list accounts for the provided chain IDs.
- * @param elementDataGetters.setSelectedAccount - A function to set the selected account in the client.
  * @param elementDataGetters.snapOwnsAccount - A function to check if the snap owns the account.
  * @returns The default state for the account selector.
  */
 export function getAccountSelectorDefaultStateValue(
   element: AccountSelectorElement,
-  {
-    getSelectedAccount,
-    listAccounts,
-    setSelectedAccount,
-    snapOwnsAccount,
-  }: ElementDataGetters,
+  { getSelectedAccount, listAccounts, snapOwnsAccount }: ElementDataGetters,
 ) {
-  const { chainIds, switchGlobalAccount, hideExternalAccounts } = element.props;
+  const { chainIds, hideExternalAccounts } = element.props;
 
   const selectedAccount = getSelectedAccount();
 
@@ -331,10 +316,6 @@ export function getAccountSelectorDefaultStateValue(
     'No accounts found for the provided chain IDs.',
   );
 
-  if (switchGlobalAccount) {
-    setSelectedAccount(filteredAccounts[0].id);
-  }
-
   return formatAccountSelectorStateValue(filteredAccounts[0], chainIds);
 }
 
@@ -430,19 +411,14 @@ export function getAssetSelectorStateValue(
  * @param element - The account selector element.
  * @param elementDataGetters - Data getters for the element.
  * @param elementDataGetters.getAccountByAddress - A function to get an account by address.
- * @param elementDataGetters.setSelectedAccount - A function to set the selected account in the client.
  * @param elementDataGetters.snapOwnsAccount - A function to check if the snap owns the account.
  * @returns The state value for the account selector.
  */
 export function getAccountSelectorStateValue(
   element: AccountSelectorElement,
-  {
-    getAccountByAddress,
-    setSelectedAccount,
-    snapOwnsAccount,
-  }: ElementDataGetters,
+  { getAccountByAddress, snapOwnsAccount }: ElementDataGetters,
 ) {
-  const { value, switchGlobalAccount, hideExternalAccounts } = element.props;
+  const { value, hideExternalAccounts } = element.props;
 
   if (!value) {
     return null;
@@ -458,10 +434,6 @@ export function getAccountSelectorStateValue(
     return null;
   }
 
-  if (switchGlobalAccount) {
-    setSelectedAccount(account.id);
-  }
-
   return formatAccountSelectorStateValue(account, element.props.chainIds);
 }
 
@@ -528,7 +500,6 @@ function getComponentStateValue(
 function constructInputState(
   oldState: InterfaceState,
   element:
-    | AccountSelectorElement
     | InputElement
     | DropdownElement
     | RadioGroupElement
diff --git a/packages/snaps-controllers/src/test-utils/controller.ts b/packages/snaps-controllers/src/test-utils/controller.ts
index 9faf595502..eba12a0328 100644
--- a/packages/snaps-controllers/src/test-utils/controller.ts
+++ b/packages/snaps-controllers/src/test-utils/controller.ts
@@ -796,7 +796,6 @@ export const getRestrictedSnapInterfaceControllerMessenger = (
       'AccountsController:getAccountByAddress',
       'SnapController:get',
       'AccountsController:getSelectedMultichainAccount',
-      'AccountsController:setSelectedAccount',
       'AccountsController:listMultichainAccounts',
     ],
     allowedEvents: [
@@ -847,13 +846,6 @@ export const getRestrictedSnapInterfaceControllerMessenger = (
       }),
     );
 
-    messenger.registerActionHandler(
-      'AccountsController:setSelectedAccount',
-      (_id: string) => {
-        // no-op
-      },
-    );
-
     messenger.registerActionHandler(
       'AccountsController:listMultichainAccounts',
       () => [
diff --git a/packages/snaps-utils/src/account.test.ts b/packages/snaps-utils/src/account.test.ts
index 19549978bb..73a57c7ba7 100644
--- a/packages/snaps-utils/src/account.test.ts
+++ b/packages/snaps-utils/src/account.test.ts
@@ -1,4 +1,11 @@
-import { createAccountList, createChainIdList } from './account';
+import type { SnapId } from '@metamask/snaps-sdk';
+
+import {
+  createAccountList,
+  createChainIdList,
+  snapOwnsAccount,
+} from './account';
+import { MOCK_SNAP_ID } from './test-utils';
 
 describe('createAccountList', () => {
   it('creates an account list from an address and a list of chain IDs', () => {
@@ -42,3 +49,35 @@ describe('createChainIdList', () => {
     expect(result).toStrictEqual(['eip155:0']);
   });
 });
+
+describe('snapOwnsAccount', () => {
+  it('returns true if the snap owns the account', () => {
+    const result = snapOwnsAccount(MOCK_SNAP_ID, {
+      id: 'eip155:1:0x1234567890123456789012345678901234567890',
+      scopes: ['eip155:1'],
+      metadata: {
+        // @ts-expect-error partial mock
+        snap: {
+          id: MOCK_SNAP_ID,
+        },
+      },
+    });
+
+    expect(result).toBe(true);
+  });
+
+  it('returns false if the snap does not own the account', () => {
+    const result = snapOwnsAccount(MOCK_SNAP_ID, {
+      id: 'eip155:2:0x1234567890123456789012345678901234567890',
+      scopes: ['eip155:1'],
+      metadata: {
+        // @ts-expect-error partial mock
+        snap: {
+          id: 'npm:other-snap' as SnapId,
+        },
+      },
+    });
+
+    expect(result).toBe(false);
+  });
+});
diff --git a/packages/snaps-utils/src/account.ts b/packages/snaps-utils/src/account.ts
index b0159d6db9..ff23d1f2bb 100644
--- a/packages/snaps-utils/src/account.ts
+++ b/packages/snaps-utils/src/account.ts
@@ -1,10 +1,6 @@
 import type { SnapId } from '@metamask/snaps-sdk';
 import type { Json, CaipAccountId, CaipChainId } from '@metamask/utils';
-import {
-  KnownCaipNamespace,
-  parseCaipChainId,
-  toCaipAccountId,
-} from '@metamask/utils';
+import { KnownCaipNamespace, parseCaipChainId } from '@metamask/utils';
 
 /**
  * Copy of the original type from
@@ -34,10 +30,7 @@ export function createAccountList(
   address: string,
   scopes: CaipChainId[],
 ): CaipAccountId[] {
-  return scopes.map((scope) => {
-    const { namespace, reference } = parseCaipChainId(scope);
-    return toCaipAccountId(namespace, reference, address);
-  });
+  return scopes.map((scope) => `${scope}:${address}`) as CaipAccountId[];
 }
 
 /**
@@ -59,13 +52,13 @@ export function createChainIdList(
   return accountScopes.reduce<CaipChainId[]>((acc, scope) => {
     // If the scope represents all EVM compatible chains, return all requested chain IDs.
     if (scope === 'eip155:0') {
-      const targetChainIds = requestedChainIds.filter((chainId) => {
+      const evmChainIds = requestedChainIds.filter((chainId) => {
         const { namespace } = parseCaipChainId(chainId);
 
         return namespace === KnownCaipNamespace.Eip155;
       });
 
-      return [...acc, ...targetChainIds];
+      return [...acc, ...evmChainIds];
     }
 
     // If the scope is not in the requested chain IDs, skip it.
@@ -76,3 +69,14 @@ export function createChainIdList(
     return acc;
   }, []);
 }
+
+/**
+ * Whether if the snap owns the account.
+ *
+ * @param snapId - The snap id.
+ * @param account - The account.
+ * @returns True if the snap owns the account, otherwise false.
+ */
+export function snapOwnsAccount(snapId: SnapId, account: InternalAccount) {
+  return account.metadata.snap?.id === snapId;
+}

From 70411d09386036a16821665b7a30ecd480fe094c Mon Sep 17 00:00:00 2001
From: Guillaume Roux <hello@guillaumerx.fr>
Date: Wed, 21 May 2025 12:15:02 +0200
Subject: [PATCH 15/27] update manifests and coverage after rebase

---
 packages/examples/packages/dialogs/snap.manifest.json        | 2 +-
 packages/examples/packages/file-upload/snap.manifest.json    | 2 +-
 packages/examples/packages/home-page/snap.manifest.json      | 2 +-
 packages/examples/packages/interactive-ui/snap.manifest.json | 2 +-
 packages/examples/packages/jsx/snap.manifest.json            | 2 +-
 packages/examples/packages/preinstalled/snap.manifest.json   | 2 +-
 packages/examples/packages/send-flow/snap.manifest.json      | 2 +-
 7 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/examples/packages/dialogs/snap.manifest.json b/packages/examples/packages/dialogs/snap.manifest.json
index 7cc8b37f2a..9162194b5b 100644
--- a/packages/examples/packages/dialogs/snap.manifest.json
+++ b/packages/examples/packages/dialogs/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "uCUq9PpdqnbX61m+h7IfPWoZafKw3gsb6dvSLJse63k=",
+    "shasum": "vvzCJ8B00GXoZDq0/ZeMzguNiPRmim1qcbD27rbYH8o=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",
diff --git a/packages/examples/packages/file-upload/snap.manifest.json b/packages/examples/packages/file-upload/snap.manifest.json
index 6ca1cd840d..395b416144 100644
--- a/packages/examples/packages/file-upload/snap.manifest.json
+++ b/packages/examples/packages/file-upload/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "4k6xK8xISA7UOVam45VhyZbIsnivQetJf+zYSliy0uE=",
+    "shasum": "YOWrI9oMzaIWvmV9LgcN26us5sYglQDbBX07W6XljnY=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",
diff --git a/packages/examples/packages/home-page/snap.manifest.json b/packages/examples/packages/home-page/snap.manifest.json
index 2a6a3607ee..475d1de2fa 100644
--- a/packages/examples/packages/home-page/snap.manifest.json
+++ b/packages/examples/packages/home-page/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "XMyDMaJ0vTcAHOZLQ47QaJ5vvpJZ7gdJ1prS96WuF5A=",
+    "shasum": "z5wfUL3L05s9oQcF9DqPC51v52oJAMm6xKSg1G+Oybw=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",
diff --git a/packages/examples/packages/interactive-ui/snap.manifest.json b/packages/examples/packages/interactive-ui/snap.manifest.json
index 290bda0ed3..4039718d60 100644
--- a/packages/examples/packages/interactive-ui/snap.manifest.json
+++ b/packages/examples/packages/interactive-ui/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "drB7P0k6b6CJojJ2jGPD7WIaDQBSIXIn0+0DeK+8GMQ=",
+    "shasum": "f5KnTUI4ZIwhE+lJrFhfiOQfx1ZmtoFnkmzKKcPXEdo=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",
diff --git a/packages/examples/packages/jsx/snap.manifest.json b/packages/examples/packages/jsx/snap.manifest.json
index b94417e1f6..648ab6712d 100644
--- a/packages/examples/packages/jsx/snap.manifest.json
+++ b/packages/examples/packages/jsx/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "19gK/VOwtR4It+Okzr3egNGj0+rg3LdI1Up9iXxFAKE=",
+    "shasum": "9qEMnlcHK3ETO9tVCsjN7c6NGvAPJJHZmPC/Mcp4TIs=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",
diff --git a/packages/examples/packages/preinstalled/snap.manifest.json b/packages/examples/packages/preinstalled/snap.manifest.json
index 6d6dea7858..49110169b7 100644
--- a/packages/examples/packages/preinstalled/snap.manifest.json
+++ b/packages/examples/packages/preinstalled/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "I6UW3+TF1AWBF62h/1NiJNuKG1IA2R/R3o3xHzJCdrA=",
+    "shasum": "tUcUWcyZ9IOY/BYxXSrTfMFcn96KBE2UUNTBVahNT/Y=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",
diff --git a/packages/examples/packages/send-flow/snap.manifest.json b/packages/examples/packages/send-flow/snap.manifest.json
index 33562448f5..3aaa56dc5b 100644
--- a/packages/examples/packages/send-flow/snap.manifest.json
+++ b/packages/examples/packages/send-flow/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "6lChQQfDqYhY5N/FRsogbHI8+a4eWJuojcRS2yRi66Q=",
+    "shasum": "CJT5E1MntaPZkK6LBvAayvsc0q1AVGVVMRGh0gkxRHY=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

From 5e2980c04570d6d8307bbdccb4cf41caa1c77280 Mon Sep 17 00:00:00 2001
From: Guillaume Roux <hello@guillaumerx.fr>
Date: Wed, 21 May 2025 14:27:29 +0200
Subject: [PATCH 16/27] address requested changes

---
 .../src/interface/SnapInterfaceController.ts           | 10 ++++------
 .../snaps-controllers/src/interface/utils.test.tsx     | 10 +++++-----
 packages/snaps-controllers/src/interface/utils.ts      |  4 ++--
 packages/snaps-sdk/src/jsx/validation.test.tsx         |  2 +-
 packages/snaps-utils/src/account.ts                    |  6 +++---
 5 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/packages/snaps-controllers/src/interface/SnapInterfaceController.ts b/packages/snaps-controllers/src/interface/SnapInterfaceController.ts
index 3d1c7a30a2..eb3d8e6474 100644
--- a/packages/snaps-controllers/src/interface/SnapInterfaceController.ts
+++ b/packages/snaps-controllers/src/interface/SnapInterfaceController.ts
@@ -493,14 +493,12 @@ export class SnapInterfaceController extends BaseController<
       );
     }
 
-    const accounts = chainIds.reduce<InternalAccount[]>((acc, chainId) => {
-      const result = this.messagingSystem.call(
+    const accounts = chainIds.flatMap((chainId) =>
+      this.messagingSystem.call(
         'AccountsController:listMultichainAccounts',
         chainId,
-      );
-
-      return [...acc, ...result];
-    }, []);
+      ),
+    );
 
     // dedupe accounts that could have multiple scopes in common
     return Array.from(new Set(accounts));
diff --git a/packages/snaps-controllers/src/interface/utils.test.tsx b/packages/snaps-controllers/src/interface/utils.test.tsx
index 4cf4723fb0..42a1aa7926 100644
--- a/packages/snaps-controllers/src/interface/utils.test.tsx
+++ b/packages/snaps-controllers/src/interface/utils.test.tsx
@@ -32,7 +32,7 @@ import {
   getDefaultAsset,
   getJsxInterface,
   isStatefulComponent,
-  matchingChainId,
+  isMatchingChainId,
 } from './utils';
 import { MOCK_ACCOUNT_ID } from '../test-utils';
 
@@ -1557,10 +1557,10 @@ describe('isStatefulComponent', () => {
   });
 });
 
-describe('matchingChainId', () => {
+describe('isMatchingChainId', () => {
   it('returns true if one of the chain IDs match the scope', () => {
     expect(
-      matchingChainId('solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp', [
+      isMatchingChainId('solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp', [
         'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp',
         'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp',
       ]),
@@ -1569,7 +1569,7 @@ describe('matchingChainId', () => {
 
   it('returns false if none of the chain IDs match the scope', () => {
     expect(
-      matchingChainId('bip122:000000000019d6689c085ae165831e93', [
+      isMatchingChainId('bip122:000000000019d6689c085ae165831e93', [
         'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp',
         'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp',
       ]),
@@ -1577,7 +1577,7 @@ describe('matchingChainId', () => {
   });
 
   it('returns true if one of the chain ID has the `eip-155` namespace and the scope is `eip-155:0`', () => {
-    expect(matchingChainId('eip155:0', ['eip155:1'])).toBe(true);
+    expect(isMatchingChainId('eip155:0', ['eip155:1'])).toBe(true);
   });
 });
 
diff --git a/packages/snaps-controllers/src/interface/utils.ts b/packages/snaps-controllers/src/interface/utils.ts
index 0987e8db01..28807a635d 100644
--- a/packages/snaps-controllers/src/interface/utils.ts
+++ b/packages/snaps-controllers/src/interface/utils.ts
@@ -175,7 +175,7 @@ export function assertNameIsUnique(state: InterfaceState, name: string) {
  * @param chainIds - The chain IDs to check against.
  * @returns Whether one of the chain ID matches the scope.
  */
-export function matchingChainId(scope: CaipChainId, chainIds: CaipChainId[]) {
+export function isMatchingChainId(scope: CaipChainId, chainIds: CaipChainId[]) {
   // if the scope represents all EVM compatible chains, return true if the namespace is EIP-155.
   if (scope === 'eip155:0') {
     const namespaces = chainIds.map((chainId) => {
@@ -297,7 +297,7 @@ export function getAccountSelectorDefaultStateValue(
     (!chainIds ||
       chainIds.length === 0 ||
       selectedAccount.scopes.some((scope) =>
-        matchingChainId(scope, chainIds),
+        isMatchingChainId(scope, chainIds),
       )) &&
     (!hideExternalAccounts ||
       (hideExternalAccounts && snapOwnsAccount(selectedAccount)))
diff --git a/packages/snaps-sdk/src/jsx/validation.test.tsx b/packages/snaps-sdk/src/jsx/validation.test.tsx
index b90072d5e0..a05d96a051 100644
--- a/packages/snaps-sdk/src/jsx/validation.test.tsx
+++ b/packages/snaps-sdk/src/jsx/validation.test.tsx
@@ -696,7 +696,7 @@ describe('AccountSelectorStruct', () => {
       <Image src="<svg />" alt="alt" />
     </Row>,
   ])('does not validate "%p"', (value) => {
-    expect(is(value, AddressStruct)).toBe(false);
+    expect(is(value, AccountSelectorStruct)).toBe(false);
   });
 });
 
diff --git a/packages/snaps-utils/src/account.ts b/packages/snaps-utils/src/account.ts
index ff23d1f2bb..ea55a18a22 100644
--- a/packages/snaps-utils/src/account.ts
+++ b/packages/snaps-utils/src/account.ts
@@ -58,12 +58,12 @@ export function createChainIdList(
         return namespace === KnownCaipNamespace.Eip155;
       });
 
-      return [...acc, ...evmChainIds];
+      acc.push(...evmChainIds);
     }
 
     // If the scope is not in the requested chain IDs, skip it.
-    if (requestedChainIds.includes(scope)) {
-      return [...acc, scope];
+    else if (requestedChainIds.includes(scope)) {
+      acc.push(scope);
     }
 
     return acc;

From ed3d2e90dc37e9258d23e8a796209f605ca0db94 Mon Sep 17 00:00:00 2001
From: Guillaume Roux <hello@guillaumerx.fr>
Date: Thu, 22 May 2025 12:52:15 +0200
Subject: [PATCH 17/27] update `listAccounts` method, remove useless test and
 add comments

---
 .../SnapInterfaceController.test.tsx          | 62 -------------------
 .../src/interface/SnapInterfaceController.ts  | 19 +++---
 .../snaps-controllers/src/interface/utils.ts  |  4 ++
 3 files changed, 12 insertions(+), 73 deletions(-)

diff --git a/packages/snaps-controllers/src/interface/SnapInterfaceController.test.tsx b/packages/snaps-controllers/src/interface/SnapInterfaceController.test.tsx
index 3da7380608..f257a77320 100644
--- a/packages/snaps-controllers/src/interface/SnapInterfaceController.test.tsx
+++ b/packages/snaps-controllers/src/interface/SnapInterfaceController.test.tsx
@@ -294,67 +294,6 @@ describe('SnapInterfaceController', () => {
       });
     });
 
-    it('can switch the currently selected account in the client', async () => {
-      const rootMessenger = getRootSnapInterfaceControllerMessenger();
-      const controllerMessenger = getRestrictedSnapInterfaceControllerMessenger(
-        rootMessenger,
-        false,
-      );
-
-      rootMessenger.registerActionHandler(
-        'AccountsController:getAccountByAddress',
-        // @ts-expect-error partial mock
-        () => ({
-          id: MOCK_ACCOUNT_ID,
-          address: '7S3P4HxJpyyigGzodYwHtCxZyUQe9JiBMHyRWXArAaKv',
-          scopes: ['solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp'],
-        }),
-      );
-
-      // eslint-disable-next-line no-new
-      new SnapInterfaceController({
-        messenger: controllerMessenger,
-      });
-
-      const element = (
-        <Box>
-          <AccountSelector
-            name="foo"
-            switchGlobalAccount
-            value="solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp:7S3P4HxJpyyigGzodYwHtCxZyUQe9JiBMHyRWXArAaKv"
-          />
-        </Box>
-      );
-
-      const id = await rootMessenger.call(
-        'SnapInterfaceController:createInterface',
-        MOCK_SNAP_ID,
-        element,
-      );
-
-      const { content, state } = rootMessenger.call(
-        'SnapInterfaceController:getInterface',
-        MOCK_SNAP_ID,
-        id,
-      );
-
-      expect(rootMessenger.call).toHaveBeenNthCalledWith(
-        2,
-        'AccountsController:getAccountByAddress',
-        '7S3P4HxJpyyigGzodYwHtCxZyUQe9JiBMHyRWXArAaKv',
-      );
-
-      expect(content).toStrictEqual(element);
-      expect(state).toStrictEqual({
-        foo: {
-          accountId: MOCK_ACCOUNT_ID,
-          addresses: [
-            'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp:7S3P4HxJpyyigGzodYwHtCxZyUQe9JiBMHyRWXArAaKv',
-          ],
-        },
-      });
-    });
-
     it('can select an account owned by the snap', async () => {
       const rootMessenger = getRootSnapInterfaceControllerMessenger();
       const controllerMessenger = getRestrictedSnapInterfaceControllerMessenger(
@@ -502,7 +441,6 @@ describe('SnapInterfaceController', () => {
       expect(rootMessenger.call).toHaveBeenNthCalledWith(
         3,
         'AccountsController:listMultichainAccounts',
-        'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp',
       );
 
       expect(content).toStrictEqual(element);
diff --git a/packages/snaps-controllers/src/interface/SnapInterfaceController.ts b/packages/snaps-controllers/src/interface/SnapInterfaceController.ts
index eb3d8e6474..30f5ae61c0 100644
--- a/packages/snaps-controllers/src/interface/SnapInterfaceController.ts
+++ b/packages/snaps-controllers/src/interface/SnapInterfaceController.ts
@@ -37,6 +37,7 @@ import { nanoid } from 'nanoid';
 import {
   constructState,
   getJsxInterface,
+  isMatchingChainId,
   validateInterfaceContext,
 } from './utils';
 import type { GetSnap } from '../snaps';
@@ -487,21 +488,17 @@ export class SnapInterfaceController extends BaseController<
    * @returns The list of accounts.
    */
   #listAccounts(chainIds?: CaipChainId[]) {
+    const accounts = this.messagingSystem.call(
+      'AccountsController:listMultichainAccounts',
+    );
+
     if (!chainIds || chainIds.length === 0) {
-      return this.messagingSystem.call(
-        'AccountsController:listMultichainAccounts',
-      );
+      return accounts;
     }
 
-    const accounts = chainIds.flatMap((chainId) =>
-      this.messagingSystem.call(
-        'AccountsController:listMultichainAccounts',
-        chainId,
-      ),
+    return accounts.filter((account) =>
+      account.scopes.some((scope) => isMatchingChainId(scope, chainIds)),
     );
-
-    // dedupe accounts that could have multiple scopes in common
-    return Array.from(new Set(accounts));
   }
 
   /**
diff --git a/packages/snaps-controllers/src/interface/utils.ts b/packages/snaps-controllers/src/interface/utils.ts
index 28807a635d..815ad8fbbe 100644
--- a/packages/snaps-controllers/src/interface/utils.ts
+++ b/packages/snaps-controllers/src/interface/utils.ts
@@ -293,6 +293,10 @@ export function getAccountSelectorDefaultStateValue(
 
   const selectedAccount = getSelectedAccount();
 
+  // Use the selected account if it matches.
+  // The following conditions are checked:
+  // - If the selected account has any of the requested chain IDs in its scopes.
+  // - If the selected account is owned by the snap and hideExternalAccounts is true.
   if (
     (!chainIds ||
       chainIds.length === 0 ||

From 6a7c8d2002134344aa8d95c17c29a7f93560f840 Mon Sep 17 00:00:00 2001
From: Guillaume Roux <hello@guillaumerx.fr>
Date: Thu, 22 May 2025 12:57:41 +0200
Subject: [PATCH 18/27] update coverage

---
 packages/snaps-controllers/coverage.json | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/snaps-controllers/coverage.json b/packages/snaps-controllers/coverage.json
index a9b6365a07..c6d43c5fa8 100644
--- a/packages/snaps-controllers/coverage.json
+++ b/packages/snaps-controllers/coverage.json
@@ -1,6 +1,6 @@
 {
-  "branches": 94.97,
-  "functions": 98.38,
-  "lines": 98.76,
-  "statements": 98.59
+  "branches": 94.6,
+  "functions": 98.45,
+  "lines": 98.71,
+  "statements": 98.55
 }

From e3f4119dab96ab38bf7c9c0ab69809d6e0189d8d Mon Sep 17 00:00:00 2001
From: Guillaume Roux <hello@guillaumerx.fr>
Date: Thu, 22 May 2025 13:04:16 +0200
Subject: [PATCH 19/27] apply suggested changes

---
 packages/snaps-controllers/src/interface/utils.ts | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/snaps-controllers/src/interface/utils.ts b/packages/snaps-controllers/src/interface/utils.ts
index 815ad8fbbe..b44899b70a 100644
--- a/packages/snaps-controllers/src/interface/utils.ts
+++ b/packages/snaps-controllers/src/interface/utils.ts
@@ -178,12 +178,10 @@ export function assertNameIsUnique(state: InterfaceState, name: string) {
 export function isMatchingChainId(scope: CaipChainId, chainIds: CaipChainId[]) {
   // if the scope represents all EVM compatible chains, return true if the namespace is EIP-155.
   if (scope === 'eip155:0') {
-    const namespaces = chainIds.map((chainId) => {
+    return chainIds.some((chainId) => {
       const { namespace } = parseCaipChainId(chainId);
-      return namespace;
+      return namespace === KnownCaipNamespace.Eip155;
     });
-
-    return namespaces.includes(KnownCaipNamespace.Eip155);
   }
 
   // Otherwise, check if the scope is in the chain IDs.

From b8459894643929a2e1e2a86d610361cb03ffdf2c Mon Sep 17 00:00:00 2001
From: Guillaume Roux <hello@guillaumerx.fr>
Date: Thu, 22 May 2025 13:16:08 +0200
Subject: [PATCH 20/27] update `snaps-utils` coverage

---
 packages/snaps-utils/coverage.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/snaps-utils/coverage.json b/packages/snaps-utils/coverage.json
index ab105beef9..834be0a59b 100644
--- a/packages/snaps-utils/coverage.json
+++ b/packages/snaps-utils/coverage.json
@@ -2,5 +2,5 @@
   "branches": 99.75,
   "functions": 98.97,
   "lines": 98.59,
-  "statements": 97.11
+  "statements": 97.12
 }

From e132af92cd59abe46a6f9b8e54380e879eb7532d Mon Sep 17 00:00:00 2001
From: Guillaume Roux <hello@guillaumerx.fr>
Date: Thu, 22 May 2025 13:17:23 +0200
Subject: [PATCH 21/27] remove duplicated type

---
 packages/snaps-controllers/src/interface/utils.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/snaps-controllers/src/interface/utils.ts b/packages/snaps-controllers/src/interface/utils.ts
index b44899b70a..c2d0772a96 100644
--- a/packages/snaps-controllers/src/interface/utils.ts
+++ b/packages/snaps-controllers/src/interface/utils.ts
@@ -451,7 +451,6 @@ export function getAccountSelectorStateValue(
  */
 function getComponentStateValue(
   element:
-    | AccountSelectorElement
     | InputElement
     | DropdownElement
     | RadioGroupElement

From d3ca8c6ed06dbaa91d2edf590a9129e8d5b5b07a Mon Sep 17 00:00:00 2001
From: Guillaume Roux <guillaumeroux123@gmail.com>
Date: Thu, 22 May 2025 13:18:55 +0200
Subject: [PATCH 22/27] Update
 packages/snaps-controllers/src/interface/utils.test.tsx

Co-authored-by: Frederik Bolding <frederik.bolding@gmail.com>
---
 packages/snaps-controllers/src/interface/utils.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/snaps-controllers/src/interface/utils.test.tsx b/packages/snaps-controllers/src/interface/utils.test.tsx
index 42a1aa7926..58463a02fd 100644
--- a/packages/snaps-controllers/src/interface/utils.test.tsx
+++ b/packages/snaps-controllers/src/interface/utils.test.tsx
@@ -1602,7 +1602,7 @@ describe('formatAccountSelectorStateValue', () => {
 });
 
 describe('getAccountSelectorDefaultStateValue', () => {
-  it('returns the currently selected account in the client if no chain Is are defined', () => {
+  it('returns the currently selected account in the client if no chain IDs are defined', () => {
     const getSelectedAccount = jest.fn().mockReturnValue({
       id: MOCK_ACCOUNT_ID,
       address: '0x1234567890123456789012345678901234567890',

From 1f8a9cadebed8212a2582f90acaff88be8df51c3 Mon Sep 17 00:00:00 2001
From: Guillaume Roux <guillaumeroux123@gmail.com>
Date: Thu, 22 May 2025 13:19:54 +0200
Subject: [PATCH 23/27] Update
 packages/snaps-controllers/src/interface/utils.test.tsx

Co-authored-by: Frederik Bolding <frederik.bolding@gmail.com>
---
 packages/snaps-controllers/src/interface/utils.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/snaps-controllers/src/interface/utils.test.tsx b/packages/snaps-controllers/src/interface/utils.test.tsx
index 58463a02fd..b9dc302fb7 100644
--- a/packages/snaps-controllers/src/interface/utils.test.tsx
+++ b/packages/snaps-controllers/src/interface/utils.test.tsx
@@ -1645,7 +1645,7 @@ describe('getAccountSelectorDefaultStateValue', () => {
     });
   });
 
-  it('returns the first account of the accounts that matches the chain Ids if the selected account is not on the same chain ID', () => {
+  it('returns the first account of the accounts that matches the chain IDs if the selected account is not on the same chain ID', () => {
     const getSelectedAccount = jest.fn().mockReturnValue({
       id: MOCK_ACCOUNT_ID,
       address: '0x1234567890123456789012345678901234567890',

From aad70f41225f444e4027f2b5bd234f24fb5e8425 Mon Sep 17 00:00:00 2001
From: Guillaume Roux <guillaumeroux123@gmail.com>
Date: Thu, 22 May 2025 13:22:04 +0200
Subject: [PATCH 24/27] Update
 packages/snaps-controllers/src/interface/utils.test.tsx

Co-authored-by: Frederik Bolding <frederik.bolding@gmail.com>
---
 packages/snaps-controllers/src/interface/utils.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/snaps-controllers/src/interface/utils.test.tsx b/packages/snaps-controllers/src/interface/utils.test.tsx
index b9dc302fb7..769bdcf5b8 100644
--- a/packages/snaps-controllers/src/interface/utils.test.tsx
+++ b/packages/snaps-controllers/src/interface/utils.test.tsx
@@ -1718,7 +1718,7 @@ describe('getAccountSelectorDefaultStateValue', () => {
     });
   });
 
-  it('returns the first account of the accounts that matches the chain Ids and that is owned by the snap if the selected account is not on the same chain ID', () => {
+  it('returns the first account of the accounts that matches the chain IDs and that is owned by the snap if the selected account is not on the same chain ID', () => {
     const getSelectedAccount = jest.fn().mockReturnValue({
       id: MOCK_ACCOUNT_ID,
       address: '0x1234567890123456789012345678901234567890',

From 8a7e387bef1aafc7671ea050d19960fcf7dc3d00 Mon Sep 17 00:00:00 2001
From: Guillaume Roux <hello@guillaumerx.fr>
Date: Thu, 22 May 2025 14:25:02 +0200
Subject: [PATCH 25/27] return `null` instead of throwing if no accounts are
 found

---
 packages/snaps-controllers/coverage.json                | 2 +-
 packages/snaps-controllers/src/interface/utils.test.tsx | 8 ++++----
 packages/snaps-controllers/src/interface/utils.ts       | 9 +++++----
 3 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/packages/snaps-controllers/coverage.json b/packages/snaps-controllers/coverage.json
index c6d43c5fa8..59cbd3c21a 100644
--- a/packages/snaps-controllers/coverage.json
+++ b/packages/snaps-controllers/coverage.json
@@ -1,5 +1,5 @@
 {
-  "branches": 94.6,
+  "branches": 94.61,
   "functions": 98.45,
   "lines": 98.71,
   "statements": 98.55
diff --git a/packages/snaps-controllers/src/interface/utils.test.tsx b/packages/snaps-controllers/src/interface/utils.test.tsx
index 769bdcf5b8..7a96eb061e 100644
--- a/packages/snaps-controllers/src/interface/utils.test.tsx
+++ b/packages/snaps-controllers/src/interface/utils.test.tsx
@@ -1772,7 +1772,7 @@ describe('getAccountSelectorDefaultStateValue', () => {
 
     const listAccounts = jest.fn().mockReturnValue([]);
 
-    expect(() =>
+    expect(
       getAccountSelectorDefaultStateValue(
         <AccountSelector
           name="foo"
@@ -1786,7 +1786,7 @@ describe('getAccountSelectorDefaultStateValue', () => {
           snapOwnsAccount: jest.fn(),
         },
       ),
-    ).toThrow('No accounts found for the provided chain IDs.');
+    ).toBeNull();
   });
 
   it('throws if no account that the snap owns is found for the given chain IDs', () => {
@@ -1800,7 +1800,7 @@ describe('getAccountSelectorDefaultStateValue', () => {
 
     const snapOwnsAccount = jest.fn().mockReturnValue(false);
 
-    expect(() =>
+    expect(
       getAccountSelectorDefaultStateValue(
         <AccountSelector
           name="foo"
@@ -1815,7 +1815,7 @@ describe('getAccountSelectorDefaultStateValue', () => {
           snapOwnsAccount,
         },
       ),
-    ).toThrow('No accounts found for the provided chain IDs.');
+    ).toBeNull();
   });
 });
 
diff --git a/packages/snaps-controllers/src/interface/utils.ts b/packages/snaps-controllers/src/interface/utils.ts
index c2d0772a96..73d555fc45 100644
--- a/packages/snaps-controllers/src/interface/utils.ts
+++ b/packages/snaps-controllers/src/interface/utils.ts
@@ -313,10 +313,11 @@ export function getAccountSelectorDefaultStateValue(
     ? accounts.filter((account) => snapOwnsAccount(account))
     : accounts;
 
-  assert(
-    filteredAccounts.length > 0,
-    'No accounts found for the provided chain IDs.',
-  );
+  // The AccountSelector component in the UI will be disabled if there is no account available for the networks provided.
+  // In this case, we return null to indicate that there is no default selected account.
+  if (filteredAccounts.length === 0) {
+    return null;
+  }
 
   return formatAccountSelectorStateValue(filteredAccounts[0], chainIds);
 }

From c3aec1ca237c18517b5c07800b6468f7f1a295c1 Mon Sep 17 00:00:00 2001
From: Guillaume Roux <hello@guillaumerx.fr>
Date: Thu, 22 May 2025 14:32:38 +0200
Subject: [PATCH 26/27] update coverage after rebase

---
 packages/snaps-controllers/coverage.json | 8 ++++----
 packages/snaps-utils/coverage.json       | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/snaps-controllers/coverage.json b/packages/snaps-controllers/coverage.json
index 59cbd3c21a..dffd65d6ce 100644
--- a/packages/snaps-controllers/coverage.json
+++ b/packages/snaps-controllers/coverage.json
@@ -1,6 +1,6 @@
 {
-  "branches": 94.61,
-  "functions": 98.45,
-  "lines": 98.71,
-  "statements": 98.55
+  "branches": 95.14,
+  "functions": 98.43,
+  "lines": 98.79,
+  "statements": 98.62
 }
diff --git a/packages/snaps-utils/coverage.json b/packages/snaps-utils/coverage.json
index 834be0a59b..d33640423b 100644
--- a/packages/snaps-utils/coverage.json
+++ b/packages/snaps-utils/coverage.json
@@ -1,6 +1,6 @@
 {
-  "branches": 99.75,
-  "functions": 98.97,
-  "lines": 98.59,
-  "statements": 97.12
+  "branches": 99.76,
+  "functions": 99.01,
+  "lines": 98.62,
+  "statements": 97.18
 }

From 0fb7cd2b289d5baa6096064fbd45e0d2becd8a8f Mon Sep 17 00:00:00 2001
From: Guillaume Roux <hello@guillaumerx.fr>
Date: Thu, 22 May 2025 14:59:02 +0200
Subject: [PATCH 27/27] update test names

---
 packages/snaps-controllers/src/interface/utils.test.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/snaps-controllers/src/interface/utils.test.tsx b/packages/snaps-controllers/src/interface/utils.test.tsx
index 7a96eb061e..159c4bbfb5 100644
--- a/packages/snaps-controllers/src/interface/utils.test.tsx
+++ b/packages/snaps-controllers/src/interface/utils.test.tsx
@@ -1763,7 +1763,7 @@ describe('getAccountSelectorDefaultStateValue', () => {
     });
   });
 
-  it('throws if no account is found for the given chain IDs', () => {
+  it('returns null if no account is found for the given chain IDs', () => {
     const getSelectedAccount = jest.fn().mockReturnValue({
       id: MOCK_ACCOUNT_ID,
       address: '0x1234567890123456789012345678901234567890',
@@ -1789,7 +1789,7 @@ describe('getAccountSelectorDefaultStateValue', () => {
     ).toBeNull();
   });
 
-  it('throws if no account that the snap owns is found for the given chain IDs', () => {
+  it('returns null if no account that the snap owns is found for the given chain IDs', () => {
     const getSelectedAccount = jest.fn().mockReturnValue({
       id: MOCK_ACCOUNT_ID,
       address: '0x1234567890123456789012345678901234567890',