[WIP] refactor AccountSelector

packages/snaps-controllers/package.json

@@ -79,6 +79,7 @@
     "test:watch": "jest --watch"
   },
   "dependencies": {
+    "@metamask/accounts-controller": "^18.2.2",
     "@metamask/approval-controller": "^7.0.2",
     "@metamask/base-controller": "^6.0.2",
     "@metamask/json-rpc-engine": "^9.0.2",
@@ -114,6 +115,7 @@
     "@metamask/eslint-config-jest": "^12.1.0",
     "@metamask/eslint-config-nodejs": "^12.1.0",
     "@metamask/eslint-config-typescript": "^12.1.0",
+    "@metamask/keyring-controller": "^17.0.0",
     "@metamask/template-snap": "^0.7.0",
     "@swc/core": "1.3.78",
     "@swc/jest": "^0.2.26",

packages/snaps-controllers/src/interface/SnapInterfaceController.ts

@@ -1,3 +1,4 @@
+import type { AccountsControllerGetSelectedMultichainAccountAction } from '@metamask/accounts-controller';
 import type {
   AcceptRequest,
   HasApprovalRequest,
@@ -76,7 +77,8 @@ export type SnapInterfaceControllerAllowedActions =
   | MaybeUpdateState
   | HasApprovalRequest
   | AcceptRequest
-  | GetSnap;
+  | GetSnap
+  | AccountsControllerGetSelectedMultichainAccountAction;
 
 export type SnapInterfaceControllerActions =
   | CreateInterface

packages/snaps-sdk/src/jsx/components/form/AccountSelector.test.tsx

@@ -2,28 +2,69 @@ 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"
-        selectedAccount="1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bed"
+        chainIds={['bip122:000000000019d6689c085ae165831e93']}
       />
     );
 
     expect(result).toStrictEqual({
       type: 'AccountSelector',
       props: {
         name: 'account',
-        selectedAccount: '1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bed',
+        chainIds: ['bip122:000000000019d6689c085ae165831e93'],
       },
       key: null,
     });
   });
 
-  it('returns an account selector element with the chainIds filter prop', () => {
+  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" switchGlobalAccount={true} />
+    );
+
+    expect(result).toStrictEqual({
+      type: 'AccountSelector',
+      props: {
+        name: 'account',
+        switchGlobalAccount: true,
+      },
+      key: null,
+    });
+  });
+
+  it('returns an account selector element with a selectedAccount prop', () => {
     const result = (
       <AccountSelector
         name="account"
-        chainIds={['bip122:p2wpkh']}
         selectedAccount="1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bed"
       />
     );
@@ -32,18 +73,19 @@ describe('AccountSelector', () => {
       type: 'AccountSelector',
       props: {
         name: 'account',
-        chainIds: ['bip122:p2wpkh'],
         selectedAccount: '1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bed',
       },
       key: null,
     });
   });
 
-  it('returns an account selector element with the hideExternalAccounts filter prop', () => {
+  it('returns an account selector element with all props', () => {
     const result = (
       <AccountSelector
         name="account"
+        chainIds={['bip122:000000000019d6689c085ae165831e93']}
         hideExternalAccounts={true}
+        switchGlobalAccount={true}
         selectedAccount="1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bed"
       />
     );
@@ -52,7 +94,9 @@ describe('AccountSelector', () => {
       type: 'AccountSelector',
       props: {
         name: 'account',
+        chainIds: ['bip122:000000000019d6689c085ae165831e93'],
         hideExternalAccounts: true,
+        switchGlobalAccount: true,
         selectedAccount: '1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bed',
       },
       key: null,

packages/snaps-sdk/src/jsx/components/form/AccountSelector.ts

@@ -9,14 +9,16 @@ import { createSnapComponent } from '../../component';
  * state in the form data.
  * @property chainIds - The chain IDs of the account selector. This should be a valid CAIP-2 chain ID array.
  * @property hideExternalAccounts - Whether to hide accounts not owned by the snap. Defaults to `false`.
+ * @property switchGlobalAccount - Whether to switch the currently selected account in MetaMask. Defaults to `false`.
  * @property selectedAccount - The default selected account of the account selector. This should be a
  * valid account ID.
  */
 export type AccountSelectorProps = {
   name: string;
   chainIds?: CaipChainId[] | undefined;
   hideExternalAccounts?: boolean | undefined;
-  selectedAccount: string;
+  switchGlobalAccount?: boolean | undefined;
+  selectedAccount?: string | undefined;
 };
 
 const TYPE = 'AccountSelector';
@@ -31,6 +33,7 @@ const TYPE = 'AccountSelector';
  * state in the form data.
  * @param props.chainIds - The chain IDs of the account selector. This should be a valid CAIP-2 chain ID array.
  * @param props.hideExternalAccounts - Whether to hide accounts not owned by the snap. Defaults to `false`.
+ * @param props.switchGlobalAccount - Whether to switch the currently selected account in MetaMask. Defaults to `false`.
  * @param props.selectedAccount - The default selected account of the account selector. This should be a
  * valid account ID.
  * @returns An account selector element.

packages/snaps-sdk/src/jsx/validation.test.tsx

@@ -967,14 +967,22 @@ describe('FileInputStruct', () => {
 
 describe('AccountSelectorStruct', () => {
   it.each([
+    <AccountSelector name="account" />,
     <AccountSelector
       name="account"
       chainIds={['bip122:000000000019d6689c085ae165831e93']}
+    />,
+    <AccountSelector name="account" hideExternalAccounts />,
+    <AccountSelector name="account" switchGlobalAccount />,
+    <AccountSelector
+      name="account"
       selectedAccount="1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bed"
     />,
     <AccountSelector
       name="account"
-      hideExternalAccounts={true}
+      chainIds={['foo:bar']}
+      hideExternalAccounts
+      switchGlobalAccount
       selectedAccount="1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bed"
     />,
   ])('validates an account picker element', (value) => {
@@ -995,7 +1003,7 @@ describe('AccountSelectorStruct', () => {
       <Text>foo</Text>
     </AccountSelector>,
     // @ts-expect-error - Invalid props.
-    <AccountSelector name="account" />,
+    <AccountSelector switchGlobalAccount="foo" />,
     // @ts-expect-error - Invalid props.
     <AccountSelector chainIds={['bip122:000000000019d6689c085ae165831e93']} />,
     // @ts-expect-error - Invalid props.

packages/snaps-sdk/src/jsx/validation.ts

@@ -345,7 +345,8 @@ export const AccountSelectorStruct: Describe<AccountSelectorElement> = element(
       null
     >,
     hideExternalAccounts: optional(boolean()),
-    selectedAccount: string(),
+    switchGlobalAccount: optional(boolean()),
+    selectedAccount: optional(string()),
   },
 );