Add AccountSelector to Box and Field children (#2774)

This PR fixes the forgotten addition of the `AccountSelector` to `Box` childrens list. It also allows the usage of `AccountSelector` in the `Field` component. The `title` prop of the `AccountSelector` was also dropped in favor of wrapping this component inside of a `Field`.
MetaMask · Sep 30, 2024 · 6cc4791 · 6cc4791
1 parent e7fab1c
commit 6cc4791
Show file tree

Hide file tree

Showing 8 changed files with 21 additions and 20 deletions.
diff --git a/packages/examples/packages/browserify-plugin/snap.manifest.json b/packages/examples/packages/browserify-plugin/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "xgOEOeRZ2iYTZYeRAnfZG3l9yoo8ovVLUAdCml94hFs=",
+    "shasum": "hvi0QzsvwnbiFtw2bTGJojg09b8Y/RAlmDm1/H3MaYk=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/browserify/snap.manifest.json b/packages/examples/packages/browserify/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "9dsfk6vfqlgxdoelqn+HupcCYfJRJZS4mQNsWg0u93s=",
+    "shasum": "YWLgNvM8qJee2ZAhuSD3UcYdUqlQ7OX1cYgW8HYYiTI=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/snaps-rpc-methods/src/permitted/createInterface.test.tsx b/packages/snaps-rpc-methods/src/permitted/createInterface.test.tsx
@@ -140,7 +140,7 @@ describe('snap_createInterface', () => {
       error: {
         code: -32602,
         message:
-          'Invalid params: At path: ui -- Expected type to be one of: "Address", "Bold", "Box", "Button", "Copyable", "Divider", "Dropdown", "RadioGroup", "FileInput", "Form", "Heading", "Input", "Image", "Italic", "Link", "Row", "Spinner", "Text", "Tooltip", "Checkbox", "Card", "Icon", "Selector", "Section", "Container", but received: undefined.',
+          'Invalid params: At path: ui -- Expected type to be one of: "AccountSelector", "Address", "Bold", "Box", "Button", "Copyable", "Divider", "Dropdown", "RadioGroup", "FileInput", "Form", "Heading", "Input", "Image", "Italic", "Link", "Row", "Spinner", "Text", "Tooltip", "Checkbox", "Card", "Icon", "Selector", "Section", "Container", but received: undefined.',
         stack: expect.any(String),
       },
       id: 1,
@@ -190,7 +190,7 @@ describe('snap_createInterface', () => {
       error: {
         code: -32602,
         message:
-          'Invalid params: At path: ui.props.children -- Expected type to be one of: "Address", "Bold", "Box", "Button", "Copyable", "Divider", "Dropdown", "RadioGroup", "FileInput", "Form", "Heading", "Input", "Image", "Italic", "Link", "Row", "Spinner", "Text", "Tooltip", "Checkbox", "Card", "Icon", "Selector", "Section", but received: "Field".',
+          'Invalid params: At path: ui.props.children -- Expected type to be one of: "AccountSelector", "Address", "Bold", "Box", "Button", "Copyable", "Divider", "Dropdown", "RadioGroup", "FileInput", "Form", "Heading", "Input", "Image", "Italic", "Link", "Row", "Spinner", "Text", "Tooltip", "Checkbox", "Card", "Icon", "Selector", "Section", but received: "Field".',
         stack: expect.any(String),
       },
       id: 1,

diff --git a/packages/snaps-sdk/src/jsx/components/form/AccountSelector.test.tsx b/packages/snaps-sdk/src/jsx/components/form/AccountSelector.test.tsx
@@ -5,7 +5,6 @@ describe('AccountSelector', () => {
     const result = (
       <AccountSelector
         name="account"
-        title="From account"
         chainIds={['bip122:p2wpkh']}
         selectedAddress="bc1qc8dwyqua9elc3mzcxk93c70kjz8tcc92x0a8a6"
       />
@@ -15,7 +14,6 @@ describe('AccountSelector', () => {
       type: 'AccountSelector',
       props: {
         name: 'account',
-        title: 'From account',
         chainIds: ['bip122:p2wpkh'],
         selectedAddress: 'bc1qc8dwyqua9elc3mzcxk93c70kjz8tcc92x0a8a6',
       },

diff --git a/packages/snaps-sdk/src/jsx/components/form/AccountSelector.ts b/packages/snaps-sdk/src/jsx/components/form/AccountSelector.ts
@@ -7,14 +7,12 @@ import { createSnapComponent } from '../../component';
  *
  * @property name - The name of the account selector. This is used to identify the
  * state in the form data.
- * @property title - The title of the account selector. This is displayed in the UI.
  * @property chainIds - The chain IDs of the account selector. This should be a valid CAIP-2 chain ID array.
  * @property selectedAddress - The default selected address of the account selector. This should be a
  * valid CAIP-10 account address.
  */
 export type AccountSelectorProps = {
   name: string;
-  title: string;
   chainIds: CaipChainId[];
   selectedAddress: CaipAccountAddress;
 };
@@ -29,15 +27,14 @@ const TYPE = 'AccountSelector';
  * @param props - The props of the component.
  * @param props.name - The name of the account selector field. This is used to identify the
  * state in the form data.
- * @param props.title - The title of the account selector field. This is displayed in the UI.
  * @param props.chainIds - The chain IDs of the account selector. This should be a valid CAIP-2 chain ID array.
  * @param props.selectedAddress - The selected address of the account selector. This should be a
  * valid CAIP-10 account address.
  * @returns An account selector element.
  * @example
- * <AccountSelector name="account" title="From account" chainIds={["eip155:1"]} selectedAddress="0x1234567890123456789012345678901234567890" />
+ * <AccountSelector name="account" chainIds={["eip155:1"]} selectedAddress="0x1234567890123456789012345678901234567890" />
  * @example
- * <AccountSelector name="account" title="From account" chainIds={["bip122:000000000019d6689c085ae165831e93"]} selectedAddress="128Lkh3S7CkDTBZ8W7BbpsN3YYizJMp8p6" />
+ * <AccountSelector name="account" chainIds={["bip122:000000000019d6689c085ae165831e93"]} selectedAddress="128Lkh3S7CkDTBZ8W7BbpsN3YYizJMp8p6" />
  */
 export const AccountSelector = createSnapComponent<
   AccountSelectorProps,

diff --git a/packages/snaps-sdk/src/jsx/components/form/Field.ts b/packages/snaps-sdk/src/jsx/components/form/Field.ts
@@ -1,5 +1,6 @@
 import type { GenericSnapChildren } from '../../component';
 import { createSnapComponent } from '../../component';
+import type { AccountSelectorElement } from './AccountSelector';
 import type { CheckboxElement } from './Checkbox';
 import type { DropdownElement } from './Dropdown';
 import type { FileInputElement } from './FileInput';
@@ -26,7 +27,8 @@ export type FieldProps = {
     | FileInputElement
     | InputElement
     | CheckboxElement
-    | SelectorElement;
+    | SelectorElement
+    | AccountSelectorElement;
 };
 
 const TYPE = 'Field';

diff --git a/packages/snaps-sdk/src/jsx/validation.test.tsx b/packages/snaps-sdk/src/jsx/validation.test.tsx
@@ -297,6 +297,13 @@ describe('FieldStruct', () => {
         </SelectorOption>
       </Selector>
     </Field>,
+    <Field label="foo">
+      <AccountSelector
+        name="foo"
+        chainIds={['eip155:1']}
+        selectedAddress="0x1234567890abcdef1234567890abcdef12345678"
+      />
+    </Field>,
   ])('validates a field element', (value) => {
     expect(is(value, FieldStruct)).toBe(true);
   });
@@ -962,13 +969,11 @@ describe('AccountSelectorStruct', () => {
   it.each([
     <AccountSelector
       name="account"
-      title="From Account"
       chainIds={['bip122:000000000019d6689c085ae165831e93']}
       selectedAddress="128Lkh3S7CkDTBZ8W7BbpsN3YYizJMp8p6"
     />,
     <AccountSelector
       name="account"
-      title="From Account"
       chainIds={['eip155:1']}
       selectedAddress="0x1234567890123456789012345678901234567890"
     />,
@@ -992,20 +997,16 @@ describe('AccountSelectorStruct', () => {
     // @ts-expect-error - Invalid props.
     <AccountSelector name="account" />,
     // @ts-expect-error - Invalid props.
-    <AccountSelector title="From Account" />,
-    // @ts-expect-error - Invalid props.
     <AccountSelector chainIds={['bip122:000000000019d6689c085ae165831e93']} />,
     // @ts-expect-error - Invalid props.
     <AccountSelector selectedAddress="128Lkh3S7CkDTBZ8W7BbpsN3YYizJMp8p6" />,
     <AccountSelector
       name="account"
-      title="From Account"
       chainIds={['foo:bar']}
       selectedAddress="0x1234567890123456789012345678901234567890"
     />,
     <AccountSelector
       name="account"
-      title="From Account"
       chainIds={['eip155:1']}
       selectedAddress="0x123"
     />,

diff --git a/packages/snaps-sdk/src/jsx/validation.ts b/packages/snaps-sdk/src/jsx/validation.ts
@@ -341,7 +341,6 @@ export const AccountSelectorStruct: Describe<AccountSelectorElement> = element(
   'AccountSelector',
   {
     name: string(),
-    title: string(),
     chainIds: array(
       CaipChainIdStruct as unknown as Struct<
         Infer<typeof CaipChainIdStruct>,
@@ -391,13 +390,15 @@ const FIELD_CHILDREN_ARRAY = [
   FileInputStruct,
   CheckboxStruct,
   SelectorStruct,
+  AccountSelectorStruct,
 ] as [
   typeof InputStruct,
   typeof DropdownStruct,
   typeof RadioGroupStruct,
   typeof FileInputStruct,
   typeof CheckboxStruct,
   typeof SelectorStruct,
+  typeof AccountSelectorStruct,
 ];
 
 /**
@@ -428,7 +429,8 @@ const FieldChildStruct = nullUnion([
   | FileInputElement
   | InputElement
   | CheckboxElement
-  | SelectorElement,
+  | SelectorElement
+  | AccountSelectorElement,
   null
 >;
 
@@ -742,6 +744,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,
   BoldStruct,
   BoxStruct,