Revert "Allow multiple chain ID in AccountSelector (#2768)"

This reverts commit ea11bfa.
MetaMask · Oct 4, 2024 · 0388168 · 0388168
1 parent 779edde
commit 0388168
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 18 deletions.
diff --git a/packages/snaps-sdk/src/jsx/components/form/AccountSelector.test.tsx b/packages/snaps-sdk/src/jsx/components/form/AccountSelector.test.tsx
@@ -6,7 +6,7 @@ describe('AccountSelector', () => {
       <AccountSelector
         name="account"
         title="From account"
-        chainIds={['bip122:p2wpkh']}
+        chainId="bip122:p2wpkh"
         selectedAddress="bc1qc8dwyqua9elc3mzcxk93c70kjz8tcc92x0a8a6"
       />
     );
@@ -16,7 +16,7 @@ describe('AccountSelector', () => {
       props: {
         name: 'account',
         title: 'From account',
-        chainIds: ['bip122:p2wpkh'],
+        chainId: 'bip122:p2wpkh',
         selectedAddress: 'bc1qc8dwyqua9elc3mzcxk93c70kjz8tcc92x0a8a6',
       },
       key: null,

diff --git a/packages/snaps-sdk/src/jsx/components/form/AccountSelector.ts b/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 chainIds - The chain IDs of the account selector. This should be a valid CAIP-2 chain ID array.
+ * @property chainId - The chain ID of the account selector. This should be a valid CAIP-2 chain ID.
  * @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[];
+  chainId: 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.chainIds - The chain IDs of the account selector. This should be a valid CAIP-2 chain ID array.
+ * @param props.chainId - The chain ID of the account selector. This should be a valid CAIP-2 chain ID.
  * @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" title="From account" chainId="eip155:1" selectedAddress="0x1234567890123456789012345678901234567890" />
  * @example
- * <AccountSelector name="account" title="From account" chainIds={["bip122:000000000019d6689c085ae165831e93"]} selectedAddress="128Lkh3S7CkDTBZ8W7BbpsN3YYizJMp8p6" />
+ * <AccountSelector name="account" title="From account" chainId="bip122:000000000019d6689c085ae165831e93" selectedAddress="128Lkh3S7CkDTBZ8W7BbpsN3YYizJMp8p6" />
  */
 export const AccountSelector = createSnapComponent<
   AccountSelectorProps,

diff --git a/packages/snaps-sdk/src/jsx/validation.test.tsx b/packages/snaps-sdk/src/jsx/validation.test.tsx
@@ -963,13 +963,13 @@ describe('AccountSelectorStruct', () => {
     <AccountSelector
       name="account"
       title="From Account"
-      chainIds={['bip122:000000000019d6689c085ae165831e93']}
+      chainId="bip122:000000000019d6689c085ae165831e93"
       selectedAddress="128Lkh3S7CkDTBZ8W7BbpsN3YYizJMp8p6"
     />,
     <AccountSelector
       name="account"
       title="From Account"
-      chainIds={['eip155:1']}
+      chainId="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 chainIds={['bip122:000000000019d6689c085ae165831e93']} />,
+    <AccountSelector chainId="bip122:000000000019d6689c085ae165831e93" />,
     // @ts-expect-error - Invalid props.
     <AccountSelector selectedAddress="128Lkh3S7CkDTBZ8W7BbpsN3YYizJMp8p6" />,
     <AccountSelector
       name="account"
       title="From Account"
-      chainIds={['foo:bar']}
+      chainId="foo:bar"
       selectedAddress="0x1234567890123456789012345678901234567890"
     />,
     <AccountSelector
       name="account"
       title="From Account"
-      chainIds={['eip155:1']}
+      chainId="eip155:1"
       selectedAddress="0x123"
     />,
     <Text>foo</Text>,

diff --git a/packages/snaps-sdk/src/jsx/validation.ts b/packages/snaps-sdk/src/jsx/validation.ts
@@ -342,12 +342,10 @@ export const AccountSelectorStruct: Describe<AccountSelectorElement> = element(
   {
     name: string(),
     title: string(),
-    chainIds: array(
-      CaipChainIdStruct as unknown as Struct<
-        Infer<typeof CaipChainIdStruct>,
-        Infer<typeof CaipChainIdStruct>
-      >,
-    ),
+    chainId: CaipChainIdStruct as unknown as Struct<
+      Infer<typeof CaipChainIdStruct>,
+      Infer<typeof CaipChainIdStruct>
+    >,
     selectedAddress: CaipAccountAddressStruct,
   },
 );