[WIP] AccountSelector

Author: GuillaumeRx

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>

packages/snaps-controllers/package.json

@@ -118,6 +118,7 @@
     "@metamask/eslint-config-jest": "^12.1.0",
     "@metamask/eslint-config-nodejs": "^12.1.0",
     "@metamask/eslint-config-typescript": "^12.1.0",
+    "@metamask/keyring-internal-api": "^4.0.1",
     "@metamask/template-snap": "^0.7.0",
     "@swc/core": "1.3.78",
     "@swc/jest": "^0.2.26",

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

@@ -8,6 +8,7 @@ import type {
   ControllerStateChangeEvent,
 } from '@metamask/base-controller';
 import { BaseController } from '@metamask/base-controller';
+import type { InternalAccount } from '@metamask/keyring-internal-api';
 import type {
   MaybeUpdateState,
   TestOrigin,
@@ -67,6 +68,16 @@ export type ResolveInterface = {
   handler: SnapInterfaceController['resolveInterface'];
 };
 
+type AccountsControllerGetSelectedMultichainAccountAction = {
+  type: `AccountsController:getSelectedMultichainAccount`;
+  handler: () => InternalAccount;
+};
+
+type AccountsControllerGetAccountByAddressAction = {
+  type: `AccountsController:getAccountByAddress`;
+  handler: (address: string) => InternalAccount;
+};
+
 export type SnapInterfaceControllerGetStateAction = ControllerGetStateAction<
   typeof controllerName,
   SnapInterfaceControllerState
@@ -77,7 +88,9 @@ export type SnapInterfaceControllerAllowedActions =
   | MaybeUpdateState
   | HasApprovalRequest
   | AcceptRequest
-  | GetSnap;
+  | GetSnap
+  | AccountsControllerGetSelectedMultichainAccountAction
+  | AccountsControllerGetAccountByAddressAction;
 
 export type SnapInterfaceControllerActions =
   | CreateInterface
@@ -249,7 +262,12 @@ export class SnapInterfaceController extends BaseController<
     validateInterfaceContext(context);
 
     const id = nanoid();
-    const componentState = constructState({}, element);
+    const componentState = constructState(
+      {},
+      element,
+      this.#getSelectedAccount.bind(this),
+      this.#getAccountByAddress.bind(this),
+    );
 
     this.update((draftState) => {
       // @ts-expect-error - TS2589: Type instantiation is excessively deep and
@@ -299,7 +317,12 @@ export class SnapInterfaceController extends BaseController<
     validateInterfaceContext(context);
 
     const oldState = this.state.interfaces[id].state;
-    const newState = constructState(oldState, element);
+    const newState = constructState(
+      oldState,
+      element,
+      this.#getSelectedAccount.bind(this),
+      this.#getAccountByAddress.bind(this),
+    );
 
     this.update((draftState) => {
       draftState.interfaces[id].state = newState;
@@ -426,6 +449,19 @@ export class SnapInterfaceController extends BaseController<
     );
   }
 
+  #getAccountByAddress(address: string) {
+    return this.messagingSystem.call(
+      'AccountsController:getAccountByAddress',
+      address,
+    );
+  }
+
+  #getSelectedAccount() {
+    return this.messagingSystem.call(
+      'AccountsController:getSelectedMultichainAccount',
+    );
+  }
+
   /**
    * Utility function to validate the components of an interface.
    * Throws if something is invalid.

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

@@ -1,3 +1,4 @@
+import type { InternalAccount } from '@metamask/keyring-internal-api';
 import { assert } from '@metamask/snaps-sdk';
 import type {
   FormState,
@@ -17,6 +18,7 @@ import type {
   RadioElement,
   SelectorElement,
   SelectorOptionElement,
+  AccountSelectorElement,
 } from '@metamask/snaps-sdk/jsx';
 import { isJSXElementUnsafe } from '@metamask/snaps-sdk/jsx';
 import {
@@ -25,6 +27,17 @@ import {
   getJsxElementFromComponent,
   walkJsx,
 } from '@metamask/snaps-utils';
+import type { CaipAccountId, CaipChainId } from '@metamask/utils';
+import {
+  parseCaipChainId,
+  toCaipAccountId,
+  type CaipAccountAddress,
+} from '@metamask/utils';
+
+type GetSelectedAccount = () => InternalAccount | undefined;
+type GetAccountByAddress = (
+  address: CaipAccountAddress,
+) => InternalAccount | undefined;
 
 /**
  * Get a JSX element from a component or JSX element. If the component is a
@@ -55,13 +68,31 @@ export function assertNameIsUnique(state: InterfaceState, name: string) {
   );
 }
 
+/**
+ * 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.
  *
  * This function is meant to be used inside constructInputState to account
  * for component specific defaults and will not override the component value or existing form state.
  *
  * @param element - The input element.
+ * @param getSelectedAccount - A function to get the selected account in the client.
  * @returns The default state for the specific component, if any.
  */
 function constructComponentSpecificDefaultState(
@@ -70,7 +101,9 @@ function constructComponentSpecificDefaultState(
     | DropdownElement
     | RadioGroupElement
     | CheckboxElement
-    | SelectorElement,
+    | SelectorElement
+    | AccountSelectorElement,
+  getSelectedAccount: GetSelectedAccount,
 ) {
   switch (element.type) {
     case 'Dropdown': {
@@ -88,6 +121,20 @@ function constructComponentSpecificDefaultState(
       return children[0]?.props.value;
     }
 
+    case 'AccountSelector': {
+      const account = getSelectedAccount();
+
+      if (!account) {
+        return null;
+      }
+
+      const { id, address, scopes } = account;
+
+      const addresses = createAddressList(address, scopes);
+
+      return { accountId: id, addresses };
+    }
+
     case 'Checkbox':
       return false;
 
@@ -103,20 +150,41 @@ function constructComponentSpecificDefaultState(
  * This function exists to account for components where that isn't the case.
  *
  * @param element - The input element.
+ * @param getAccountByAddress - A function to get an account by address.
  * @returns The state value for a given component.
  */
 function getComponentStateValue(
   element:
+    | AccountSelectorElement
     | InputElement
     | DropdownElement
     | RadioGroupElement
     | CheckboxElement
     | SelectorElement,
+  getAccountByAddress: GetAccountByAddress,
 ) {
   switch (element.type) {
     case 'Checkbox':
       return element.props.checked;
 
+    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;
   }
@@ -127,18 +195,23 @@ function getComponentStateValue(
  *
  * @param oldState - The previous state.
  * @param element - The input element.
+ * @param getSelectedAccount - A function to get the selected account in the client.
+ * @param getAccountByAddress - A function to get an account by address.
  * @param form - An optional form that the input is enclosed in.
  * @returns The input state.
  */
 function constructInputState(
   oldState: InterfaceState,
   element:
+    | AccountSelectorElement
     | InputElement
     | DropdownElement
     | RadioGroupElement
     | FileInputElement
     | CheckboxElement
     | SelectorElement,
+  getSelectedAccount: GetSelectedAccount,
+  getAccountByAddress: GetAccountByAddress,
   form?: string,
 ) {
   const oldStateUnwrapped = form ? (oldState[form] as FormState) : oldState;
@@ -149,9 +222,9 @@ function constructInputState(
   }
 
   return (
-    getComponentStateValue(element) ??
+    getComponentStateValue(element, getAccountByAddress) ??
     oldInputState ??
-    constructComponentSpecificDefaultState(element) ??
+    constructComponentSpecificDefaultState(element, getSelectedAccount) ??
     null
   );
 }
@@ -161,11 +234,15 @@ function constructInputState(
  *
  * @param oldState - The previous state.
  * @param rootComponent - The UI component to construct state from.
+ * @param getSelectedAccount - A function to get the selected account in the client.
+ * @param getAccountByAddress - A function to get an account by address.
  * @returns The interface state of the passed component.
  */
 export function constructState(
   oldState: InterfaceState,
   rootComponent: JSXElement,
+  getSelectedAccount: GetSelectedAccount,
+  getAccountByAddress: GetAccountByAddress,
 ): InterfaceState {
   const newState: InterfaceState = {};
 
@@ -196,13 +273,16 @@ export function constructState(
         component.type === 'RadioGroup' ||
         component.type === 'FileInput' ||
         component.type === 'Checkbox' ||
-        component.type === 'Selector')
+        component.type === 'Selector' ||
+        component.type === 'AccountSelector')
     ) {
       const formState = newState[currentForm.name] as FormState;
       assertNameIsUnique(formState, component.props.name);
       formState[component.props.name] = constructInputState(
         oldState,
         component,
+        getSelectedAccount,
+        getAccountByAddress,
         currentForm.name,
       );
       return;
@@ -215,10 +295,16 @@ export function constructState(
       component.type === 'RadioGroup' ||
       component.type === 'FileInput' ||
       component.type === 'Checkbox' ||
-      component.type === 'Selector'
+      component.type === 'Selector' ||
+      component.type === 'AccountSelector'
     ) {
       assertNameIsUnique(newState, component.props.name);
-      newState[component.props.name] = constructInputState(oldState, component);
+      newState[component.props.name] = constructInputState(
+        oldState,
+        component,
+        getSelectedAccount,
+        getAccountByAddress,
+      );
     }
   });