Add AddressInput component (#3129)

Closes #2812 

This adds an `AddressInput` component that takes a CAIP-2 `chainId` to
identify the chain the address needs resolution on and resolves to a
display name and avatar (if it exists). The resolution is to be made
against the user's own saved accounts.

---------

Co-authored-by: Guillaume Roux <[email protected]>

Author: hmalik88

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

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "7m/tln4qf/bu8u9PdJnluGBWg7949ema1QUhYrL6Kys=",
+    "shasum": "e3eXjWGO/nmmRxBt/caaktmqj/3chjABsSkFq6leppU=",
     "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": "SeDH2s8fzM2/cxqbhyhF7G3TeztLsn01kRiWige7l2M=",
+    "shasum": "yvblLjVAXActFtH/3q3GxeTcbRopWjZCX2h4S21hscs=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/snaps-controllers/coverage.json

@@ -1,5 +1,5 @@
 {
-  "branches": 93.46,
+  "branches": 93.51,
   "functions": 97.36,
   "lines": 98.33,
   "statements": 98.06

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

@@ -16,6 +16,7 @@ import {
   Card,
   SelectorOption,
   AssetSelector,
+  AddressInput,
 } from '@metamask/snaps-sdk/jsx';
 
 import {
@@ -296,6 +297,49 @@ describe('constructState', () => {
     });
   });
 
+  it('handles root level AddressInput with value', () => {
+    const element = (
+      <Box>
+        <AddressInput name="foo" chainId="eip155:1" value="0x123" />
+      </Box>
+    );
+
+    const result = constructState({}, element, elementDataGetters);
+    expect(result).toStrictEqual({
+      foo: 'eip155:1:0x123',
+    });
+  });
+
+  it('handles root level AddressInput without value', () => {
+    const element = (
+      <Box>
+        <AddressInput name="foo" chainId="eip155:1" />
+      </Box>
+    );
+
+    const result = constructState({}, element, elementDataGetters);
+    expect(result).toStrictEqual({
+      foo: null,
+    });
+  });
+
+  it('handles AddressInput in forms', () => {
+    const element = (
+      <Box>
+        <Form name="form">
+          <Field label="foo">
+            <AddressInput name="foo" chainId="eip155:1" />
+          </Field>
+        </Form>
+      </Box>
+    );
+
+    const result = constructState({}, element, elementDataGetters);
+    expect(result).toStrictEqual({
+      form: { foo: null },
+    });
+  });
+
   it('sets default value for root level dropdown', () => {
     const element = (
       <Box>

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

@@ -21,6 +21,7 @@ import type {
   SelectorElement,
   SelectorOptionElement,
   AssetSelectorElement,
+  AddressInputElement,
 } from '@metamask/snaps-sdk/jsx';
 import { isJSXElementUnsafe } from '@metamask/snaps-sdk/jsx';
 import type { InternalAccount } from '@metamask/snaps-utils';
@@ -35,6 +36,8 @@ import {
   type CaipAccountId,
   parseCaipAccountId,
   parseCaipAssetType,
+  toCaipAccountId,
+  parseCaipChainId,
 } from '@metamask/utils';
 
 /**
@@ -183,7 +186,8 @@ function constructComponentSpecificDefaultState(
     | RadioGroupElement
     | CheckboxElement
     | SelectorElement
-    | AssetSelectorElement,
+    | AssetSelectorElement
+    | AddressInputElement,
   elementDataGetters: ElementDataGetters,
 ) {
   switch (element.type) {
@@ -264,7 +268,8 @@ function getComponentStateValue(
     | RadioGroupElement
     | CheckboxElement
     | SelectorElement
-    | AssetSelectorElement,
+    | AssetSelectorElement
+    | AddressInputElement,
   { getAssetsState }: ElementDataGetters,
 ) {
   switch (element.type) {
@@ -274,6 +279,15 @@ function getComponentStateValue(
     case 'AssetSelector':
       return getAssetSelectorStateValue(element.props.value, getAssetsState);
 
+    case 'AddressInput': {
+      if (!element.props.value) {
+        return null;
+      }
+
+      // Construct CAIP-10 Id
+      const { namespace, reference } = parseCaipChainId(element.props.chainId);
+      return toCaipAccountId(namespace, reference, element.props.value);
+    }
     default:
       return element.props.value;
   }
@@ -297,7 +311,8 @@ function constructInputState(
     | FileInputElement
     | CheckboxElement
     | SelectorElement
-    | AssetSelectorElement,
+    | AssetSelectorElement
+    | AddressInputElement,
   elementDataGetters: ElementDataGetters,
   form?: string,
 ) {
@@ -360,7 +375,8 @@ export function constructState(
         component.type === 'FileInput' ||
         component.type === 'Checkbox' ||
         component.type === 'Selector' ||
-        component.type === 'AssetSelector')
+        component.type === 'AssetSelector' ||
+        component.type === 'AddressInput')
     ) {
       const formState = newState[currentForm.name] as FormState;
       assertNameIsUnique(formState, component.props.name);
@@ -382,7 +398,8 @@ export function constructState(
       component.type === 'FileInput' ||
       component.type === 'Checkbox' ||
       component.type === 'Selector' ||
-      component.type === 'AssetSelector'
+      component.type === 'AssetSelector' ||
+      component.type === 'AddressInput'
     ) {
       assertNameIsUnique(newState, component.props.name);
       newState[component.props.name] = constructInputState(

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", "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: "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", "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", "Input", "Dropdown", "RadioGroup", "FileInput", "Checkbox", "Selector", but received: "Copyable".',
         stack: expect.any(String),
       },
       id: 1,

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

@@ -10,6 +10,7 @@ import type {
   Struct,
   UnionToIntersection,
 } from '@metamask/superstruct';
+import type { CaipChainId } from '@metamask/utils';
 
 import { union } from './structs';
 import type { EmptyObject } from '../types';
@@ -34,11 +35,13 @@ type StructSchema<Type> =
       : [Type] extends [string | undefined | null]
         ? [Type] extends [`0x${string}`]
           ? null
-          : [Type] extends [IsMatch<Type, string | undefined | null>]
+          : [Type] extends [CaipChainId]
             ? null
-            : [Type] extends [IsUnion<Type>]
-              ? EnumSchema<Type>
-              : Type
+            : [Type] extends [IsMatch<Type, string | undefined | null>]
+              ? null
+              : [Type] extends [IsUnion<Type>]
+                ? EnumSchema<Type>
+                : Type
         : [Type] extends [number | undefined | null]
           ? [Type] extends [IsMatch<Type, number | undefined | null>]
             ? null

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

@@ -0,0 +1,16 @@
+import { AddressInput } from './AddressInput';
+
+describe('AddressInput', () => {
+  it('renders an address input', () => {
+    const result = <AddressInput name="address" chainId="eip155:1" />;
+
+    expect(result).toStrictEqual({
+      type: 'AddressInput',
+      props: {
+        name: 'address',
+        chainId: 'eip155:1',
+      },
+      key: null,
+    });
+  });
+});

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

@@ -0,0 +1,32 @@
+import type { CaipChainId } from '@metamask/utils';
+
+import { createSnapComponent } from '../../component';
+
+export type AddressInputProps = {
+  name: string;
+  value?: string | undefined;
+  chainId: CaipChainId;
+  placeholder?: string | undefined;
+  disabled?: boolean | undefined;
+};
+
+const TYPE = 'AddressInput';
+
+/**
+ * An input component for entering an address. Resolves the address to a display name and avatar.
+ *
+ * @param props - The props of the component.
+ * @param props.name - The name of the input field.
+ * @param props.value - The value of the input field.
+ * @param props.chainId - The CAIP-2 chain ID of the address.
+ * @param props.placeholder - The placeholder text of the input field.
+ * @param props.disabled - Whether the input field is disabled.
+ * @returns An input element.
+ * @example
+ * <AddressInput name="address" value="0x1234567890123456789012345678901234567890" chainId="eip155:1" />
+ */
+export const AddressInput = createSnapComponent<AddressInputProps, typeof TYPE>(
+  TYPE,
+);
+
+export type AddressInputElement = ReturnType<typeof AddressInput>;

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

@@ -1,3 +1,4 @@
+import { AddressInput } from './AddressInput';
 import { Button } from './Button';
 import { Dropdown } from './Dropdown';
 import { Field } from './Field';
@@ -323,6 +324,30 @@ describe('Field', () => {
     });
   });
 
+  it('renders a field element with an address input', () => {
+    const result = (
+      <Field label="Label">
+        <AddressInput name="address" chainId="eip155:1" />
+      </Field>
+    );
+
+    expect(result).toStrictEqual({
+      type: 'Field',
+      key: null,
+      props: {
+        label: 'Label',
+        children: {
+          type: 'AddressInput',
+          key: null,
+          props: {
+            name: 'address',
+            chainId: 'eip155:1',
+          },
+        },
+      },
+    });
+  });
+
   it('renders a field with a conditional', () => {
     const result = (
       <Field>