Refactor AccountSelector

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

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "BbaKbj8YVe957H1cnhBBv8X4ITiFjgmmor7/Rp9b/Yc=",
+    "shasum": "Zz0TOSOi5y3LENV6h1cfCOLs/aLOQ/6D8P/AuKpoyYs=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

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

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

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

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "v2oIs3UY5j/3dXW5eRh3rg7Tv5qcVzHon7qzPQeRsAE=",
+    "shasum": "2zWUxxB/+eDTLsR2g4G4XNyJceFBNZWtl0xstsMXRH0=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

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

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "z4vMdrs40TdVE+vk7sPruIvWi0q669V+p3jc6WQIib4=",
+    "shasum": "5xW9p4wOMkPOhWz8v74UFpQrIVhUYPyiGl+NyQqC4KA=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

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

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "emnlXHvrhsGBMi/y1IPhiQPX9ogHmjmOU/iujBu5GB8=",
+    "shasum": "AthRr1C0N2RNkpXEiUaTGsOa8RNgBWbfgmyYVpLKVxU=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

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

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "Q2JcD7CoRLqjextX7QhYK6SOIK6ROF4NpvbUEwtITe8=",
+    "shasum": "20Q31RRwlRIjZ5QnHbjBzwnqv2TXu/ziW9xQgRfsXpU=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

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

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "3U9+Lvmmdc9JRmaHLcwGgi9lpnaj25joBF9+zXY4644=",
+    "shasum": "H+DxVktIoedt5Bm+wf4EaF68o5lDnrK6gmHlIDIxTYo=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

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

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "PTmRKwKUzSGr2ZBWOMDRHn1HTmmgk32dzd7zqmvcoMo=",
+    "shasum": "kayurDPL+WaZEvBcfnjph6mqz1Xxz2RACxD7OKJdt1o=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/snaps-controllers/coverage.json

@@ -1,6 +1,6 @@
 {
-  "branches": 92.64,
+  "branches": 92.69,
   "functions": 96.65,
-  "lines": 97.97,
-  "statements": 97.67
+  "lines": 97.98,
+  "statements": 97.68
 }

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.2.2",
     "@metamask/template-snap": "^0.7.0",
     "@swc/core": "1.3.78",
     "@swc/jest": "^0.2.26",

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

@@ -1,6 +1,7 @@
 import type { SnapId } from '@metamask/snaps-sdk';
 import { form, image, input, panel, text } from '@metamask/snaps-sdk';
 import {
+  AccountSelector,
   Box,
   Field,
   FileInput,
@@ -91,6 +92,13 @@ describe('SnapInterfaceController', () => {
             <Link href="https://foo.bar">foo</Link>
           </Text>
           <Form name="foo">
+            <Field label="Baz">
+              <AccountSelector name="foobar" />
+            </Field>
+            <AccountSelector
+              name="barbaz"
+              selectedAccount="1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bed"
+            />
             <Field label="Bar">
               <Input name="bar" type="text" />
             </Field>
@@ -121,8 +129,31 @@ describe('SnapInterfaceController', () => {
         'foo.bar',
       );
 
+      expect(rootMessenger.call).toHaveBeenNthCalledWith(
+        4,
+        'AccountsController:getSelectedMultichainAccount',
+      );
+
+      expect(rootMessenger.call).toHaveBeenNthCalledWith(
+        5,
+        'AccountsController:getAccount',
+        '1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bed',
+      );
+
       expect(content).toStrictEqual(element);
-      expect(state).toStrictEqual({ foo: { bar: null } });
+      expect(state).toStrictEqual({
+        foo: {
+          bar: null,
+          foobar: {
+            address: '0x1234567891234567891234567891234567891234',
+            id: '1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bed',
+          },
+          barbaz: {
+            address: '0x1234567891234567891234567891234567891234',
+            id: '1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bed',
+          },
+        },
+      });
     });
 
     it('supports providing interface context', async () => {

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

@@ -1,3 +1,7 @@
+import type {
+  AccountsControllerGetAccountAction,
+  AccountsControllerGetSelectedMultichainAccountAction,
+} from '@metamask/accounts-controller';
 import type {
   AcceptRequest,
   HasApprovalRequest,
@@ -76,7 +80,9 @@ export type SnapInterfaceControllerAllowedActions =
   | MaybeUpdateState
   | HasApprovalRequest
   | AcceptRequest
-  | GetSnap;
+  | GetSnap
+  | AccountsControllerGetSelectedMultichainAccountAction
+  | AccountsControllerGetAccountAction;
 
 export type SnapInterfaceControllerActions =
   | CreateInterface
@@ -195,7 +201,12 @@ export class SnapInterfaceController extends BaseController<
     validateInterfaceContext(context);
 
     const id = nanoid();
-    const componentState = constructState({}, element);
+    const componentState = constructState(
+      {},
+      element,
+      this.#getSelectedAccount.bind(this),
+      this.#getAccount.bind(this),
+    );
 
     this.update((draftState) => {
       // @ts-expect-error - TS2589: Type instantiation is excessively deep and
@@ -241,7 +252,12 @@ export class SnapInterfaceController extends BaseController<
     await this.#validateContent(element);
 
     const oldState = this.state.interfaces[id].state;
-    const newState = constructState(oldState, element);
+    const newState = constructState(
+      oldState,
+      element,
+      this.#getSelectedAccount.bind(this),
+      this.#getAccount.bind(this),
+    );
 
     this.update((draftState) => {
       draftState.interfaces[id].state = newState;
@@ -365,6 +381,27 @@ export class SnapInterfaceController extends BaseController<
     );
   }
 
+  /**
+   * Get the currently selected account in Extension.
+   *
+   * @returns The currently selected account.
+   */
+  #getSelectedAccount() {
+    return this.messagingSystem.call(
+      'AccountsController:getSelectedMultichainAccount',
+    );
+  }
+
+  /**
+   * Get an account by ID.
+   *
+   * @param id - The account ID.
+   * @returns The account.
+   */
+  #getAccount(id: string) {
+    return this.messagingSystem.call('AccountsController:getAccount', id);
+  }
+
   /**
    * Utility function to validate the components of an interface.
    * Throws if something is invalid.