use selectedAccount in AccountSelector

MetaMask · Sep 30, 2024 · 070098d · 070098d
1 parent 6cc4791
commit 070098d
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 39 deletions.
diff --git a/packages/snaps-controllers/src/interface/utils.test.tsx b/packages/snaps-controllers/src/interface/utils.test.tsx
@@ -553,16 +553,15 @@ describe('constructState', () => {
       <Box>
         <AccountSelector
           name="foo"
-          title="Choose an account"
-          chainId="eip155:1"
-          selectedAddress="0x1234567890123456789012345678901234567890"
+          chainIds={['eip155:1']}
+          selectedAccount="1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bed"
         />
       </Box>
     );
 
     const result = constructState({}, element);
     expect(result).toStrictEqual({
-      foo: '0x1234567890123456789012345678901234567890',
+      foo: '1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bed',
     });
   });
 
@@ -571,16 +570,15 @@ describe('constructState', () => {
       <Box>
         <AccountSelector
           name="foo"
-          title="Choose an account"
-          chainId="eip155:1"
-          selectedAddress="0x1234567890123456789012345678901234567890"
+          chainIds={['eip155:1']}
+          selectedAccount="1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bed"
         />
       </Box>
     );
 
     const result = constructState({}, element);
     expect(result).toStrictEqual({
-      foo: '0x1234567890123456789012345678901234567890',
+      foo: '1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bed',
     });
   });
 
@@ -590,17 +588,16 @@ describe('constructState', () => {
         <Form name="form">
           <AccountSelector
             name="foo"
-            title="Choose an account"
-            chainId="eip155:1"
-            selectedAddress="0x1234567890123456789012345678901234567890"
+            chainIds={['eip155:1']}
+            selectedAccount="1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bed"
           />
         </Form>
       </Box>
     );
 
     const result = constructState({}, element);
     expect(result).toStrictEqual({
-      form: { foo: '0x1234567890123456789012345678901234567890' },
+      form: { foo: '1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bed' },
     });
   });
 
@@ -610,17 +607,16 @@ describe('constructState', () => {
         <Form name="form">
           <AccountSelector
             name="foo"
-            title="Choose an account"
-            chainId="eip155:1"
-            selectedAddress="0x1234567890123456789012345678901234567890"
+            chainIds={['eip155:1']}
+            selectedAccount="1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bed"
           />
         </Form>
       </Box>
     );
 
     const result = constructState({}, element);
     expect(result).toStrictEqual({
-      form: { foo: '0x1234567890123456789012345678901234567890' },
+      form: { foo: '1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bed' },
     });
   });
 

diff --git a/packages/snaps-controllers/src/interface/utils.ts b/packages/snaps-controllers/src/interface/utils.ts
@@ -121,7 +121,7 @@ function getComponentStateValue(
       return element.props.checked;
 
     case 'AccountSelector':
-      return element.props.selectedAddress;
+      return element.props.selectedAccount;
 
     default:
       return element.props.value;

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"
         chainIds={['bip122:p2wpkh']}
-        selectedAddress="bc1qc8dwyqua9elc3mzcxk93c70kjz8tcc92x0a8a6"
+        selectedAccount="1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bed"
       />
     );
 
@@ -15,7 +15,7 @@ describe('AccountSelector', () => {
       props: {
         name: 'account',
         chainIds: ['bip122:p2wpkh'],
-        selectedAddress: 'bc1qc8dwyqua9elc3mzcxk93c70kjz8tcc92x0a8a6',
+        selectedAccount: '1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bed',
       },
       key: null,
     });

diff --git a/packages/snaps-sdk/src/jsx/components/form/AccountSelector.ts b/packages/snaps-sdk/src/jsx/components/form/AccountSelector.ts
@@ -1,4 +1,4 @@
-import type { CaipAccountAddress, CaipChainId } from '@metamask/utils';
+import type { CaipChainId } from '@metamask/utils';
 
 import { createSnapComponent } from '../../component';
 
@@ -8,13 +8,13 @@ import { createSnapComponent } from '../../component';
  * @property name - The name of the account selector. This is used to identify the
  * state in the form data.
  * @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.
+ * @property selectedAccount - The default selected account of the account selector. This should be a
+ * valid account ID.
  */
 export type AccountSelectorProps = {
   name: string;
   chainIds: CaipChainId[];
-  selectedAddress: CaipAccountAddress;
+  selectedAccount: string;
 };
 
 const TYPE = 'AccountSelector';
@@ -28,13 +28,13 @@ 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.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.
+ * @param props.selectedAccount - The default selected account of the account selector. This should be a
+ * valid account ID.
  * @returns An account selector element.
  * @example
- * <AccountSelector name="account" chainIds={["eip155:1"]} selectedAddress="0x1234567890123456789012345678901234567890" />
+ * <AccountSelector name="account" chainIds={["eip155:1"]} selectedAccount="1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bed" />
  * @example
- * <AccountSelector name="account" chainIds={["bip122:000000000019d6689c085ae165831e93"]} selectedAddress="128Lkh3S7CkDTBZ8W7BbpsN3YYizJMp8p6" />
+ * <AccountSelector name="account" chainIds={["bip122:000000000019d6689c085ae165831e93"]} selectedAccount="1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bed" />
  */
 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
@@ -301,7 +301,7 @@ describe('FieldStruct', () => {
       <AccountSelector
         name="foo"
         chainIds={['eip155:1']}
-        selectedAddress="0x1234567890abcdef1234567890abcdef12345678"
+        selectedAccount="1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bed"
       />
     </Field>,
   ])('validates a field element', (value) => {
@@ -970,12 +970,12 @@ describe('AccountSelectorStruct', () => {
     <AccountSelector
       name="account"
       chainIds={['bip122:000000000019d6689c085ae165831e93']}
-      selectedAddress="128Lkh3S7CkDTBZ8W7BbpsN3YYizJMp8p6"
+      selectedAccount="1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bed"
     />,
     <AccountSelector
       name="account"
       chainIds={['eip155:1']}
-      selectedAddress="0x1234567890123456789012345678901234567890"
+      selectedAccount="1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bed"
     />,
   ])('validates an account picker element', (value) => {
     expect(is(value, AccountSelectorStruct)).toBe(true);
@@ -999,16 +999,11 @@ describe('AccountSelectorStruct', () => {
     // @ts-expect-error - Invalid props.
     <AccountSelector chainIds={['bip122:000000000019d6689c085ae165831e93']} />,
     // @ts-expect-error - Invalid props.
-    <AccountSelector selectedAddress="128Lkh3S7CkDTBZ8W7BbpsN3YYizJMp8p6" />,
+    <AccountSelector selectedAddress={42} />,
     <AccountSelector
       name="account"
       chainIds={['foo:bar']}
-      selectedAddress="0x1234567890123456789012345678901234567890"
-    />,
-    <AccountSelector
-      name="account"
-      chainIds={['eip155:1']}
-      selectedAddress="0x123"
+      selectedAccount="1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bed"
     />,
     <Text>foo</Text>,
     <Box>

diff --git a/packages/snaps-sdk/src/jsx/validation.ts b/packages/snaps-sdk/src/jsx/validation.ts
@@ -20,7 +20,6 @@ import {
   refine,
 } from '@metamask/superstruct';
 import {
-  CaipAccountAddressStruct,
   CaipAccountIdStruct,
   CaipChainIdStruct,
   hasProperty,
@@ -347,7 +346,7 @@ export const AccountSelectorStruct: Describe<AccountSelectorElement> = element(
         Infer<typeof CaipChainIdStruct>
       >,
     ),
-    selectedAddress: CaipAccountAddressStruct,
+    selectedAccount: string(),
   },
 );