Allow multiple chain ID in AccountSelector (#2768)

This PR changes the `chainId` prop of the `AccountSelector` to
`chainIds` that is an array of CAIP-2 chain IDs.

Author: GuillaumeRx

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

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "zGgTjLWTEn796eXGvv66p8tGxZSa82yEEGnRtyVutEc=",
+    "shasum": "hU2i377FhKzvwrx4y28hc5XFO3KccCUq7bAJdsQ2CD0=",
     "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": "qfkidJLew8JNN2Enx4pDUgWNgLPqBkG0k3mGQRR1oaY=",
+    "shasum": "VCd6NkT2lPRvH5tKtzCqtW4dO8zEA3/zagYxhhv1mBI=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

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

@@ -6,7 +6,7 @@ describe('AccountSelector', () => {
       <AccountSelector
         name="account"
         title="From account"
-        chainId="bip122:p2wpkh"
+        chainIds={['bip122:p2wpkh']}
         selectedAddress="bc1qc8dwyqua9elc3mzcxk93c70kjz8tcc92x0a8a6"
       />
     );
@@ -16,7 +16,7 @@ describe('AccountSelector', () => {
       props: {
         name: 'account',
         title: 'From account',
-        chainId: 'bip122:p2wpkh',
+        chainIds: ['bip122:p2wpkh'],
         selectedAddress: 'bc1qc8dwyqua9elc3mzcxk93c70kjz8tcc92x0a8a6',
       },
       key: null,

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

@@ -8,14 +8,14 @@ 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 chainId - The chain ID of the account selector. This should be a valid CAIP-2 chain ID.
+ * @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;
-  chainId: CaipChainId;
+  chainIds: CaipChainId[];
   selectedAddress: CaipAccountAddress;
 };
 
@@ -30,14 +30,14 @@ const TYPE = 'AccountSelector';
  * @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.chainId - The chain ID of the account selector. This should be a valid CAIP-2 chain ID.
+ * @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" chainId="eip155:1" selectedAddress="0x1234567890123456789012345678901234567890" />
+ * <AccountSelector name="account" title="From account" chainIds={["eip155:1"]} selectedAddress="0x1234567890123456789012345678901234567890" />
  * @example
- * <AccountSelector name="account" title="From account" chainId="bip122:000000000019d6689c085ae165831e93" selectedAddress="128Lkh3S7CkDTBZ8W7BbpsN3YYizJMp8p6" />
+ * <AccountSelector name="account" title="From account" chainIds={["bip122:000000000019d6689c085ae165831e93"]} selectedAddress="128Lkh3S7CkDTBZ8W7BbpsN3YYizJMp8p6" />
  */
 export const AccountSelector = createSnapComponent<
   AccountSelectorProps,

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

@@ -963,13 +963,13 @@ describe('AccountSelectorStruct', () => {
     <AccountSelector
       name="account"
       title="From Account"
-      chainId="bip122:000000000019d6689c085ae165831e93"
+      chainIds={['bip122:000000000019d6689c085ae165831e93']}
       selectedAddress="128Lkh3S7CkDTBZ8W7BbpsN3YYizJMp8p6"
     />,
     <AccountSelector
       name="account"
       title="From Account"
-      chainId="eip155:1"
+      chainIds={['eip155:1']}
       selectedAddress="0x1234567890123456789012345678901234567890"
     />,
   ])('validates an account picker element', (value) => {
@@ -994,19 +994,19 @@ describe('AccountSelectorStruct', () => {
     // @ts-expect-error - Invalid props.
     <AccountSelector title="From Account" />,
     // @ts-expect-error - Invalid props.
-    <AccountSelector chainId="bip122:000000000019d6689c085ae165831e93" />,
+    <AccountSelector chainIds={['bip122:000000000019d6689c085ae165831e93']} />,
     // @ts-expect-error - Invalid props.
     <AccountSelector selectedAddress="128Lkh3S7CkDTBZ8W7BbpsN3YYizJMp8p6" />,
     <AccountSelector
       name="account"
       title="From Account"
-      chainId="foo:bar"
+      chainIds={['foo:bar']}
       selectedAddress="0x1234567890123456789012345678901234567890"
     />,
     <AccountSelector
       name="account"
       title="From Account"
-      chainId="eip155:1"
+      chainIds={['eip155:1']}
       selectedAddress="0x123"
     />,
     <Text>foo</Text>,

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

@@ -342,10 +342,12 @@ export const AccountSelectorStruct: Describe<AccountSelectorElement> = element(
   {
     name: string(),
     title: string(),
-    chainId: CaipChainIdStruct as unknown as Struct<
-      Infer<typeof CaipChainIdStruct>,
-      Infer<typeof CaipChainIdStruct>
-    >,
+    chainIds: array(
+      CaipChainIdStruct as unknown as Struct<
+        Infer<typeof CaipChainIdStruct>,
+        Infer<typeof CaipChainIdStruct>
+      >,
+    ),
     selectedAddress: CaipAccountAddressStruct,
   },
 );