fix: Allow AccountSelector in Field and add disabled prop. (#3430)

This PR fixes the missing type in the `Field` for `AccountSelector` and
adds the `disabled` prop to it.

Author: GuillaumeRx

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

@@ -79,13 +79,27 @@ describe('AccountSelector', () => {
     });
   });
 
+  it('returns an account selector element with a disabled prop', () => {
+    const result = <AccountSelector name="account" disabled={true} />;
+
+    expect(result).toStrictEqual({
+      type: 'AccountSelector',
+      props: {
+        name: 'account',
+        disabled: true,
+      },
+      key: null,
+    });
+  });
+
   it('returns an account selector element with all props', () => {
     const result = (
       <AccountSelector
         name="account"
         chainIds={['bip122:000000000019d6689c085ae165831e93']}
         hideExternalAccounts={true}
         switchGlobalAccount={true}
+        disabled={true}
         value="bip122:000000000019d6689c085ae165831e93:128Lkh3S7CkDTBZ8W7BbpsN3YYizJMp8p6"
       />
     );
@@ -97,6 +111,7 @@ describe('AccountSelector', () => {
         chainIds: ['bip122:000000000019d6689c085ae165831e93'],
         hideExternalAccounts: true,
         switchGlobalAccount: true,
+        disabled: true,
         value:
           'bip122:000000000019d6689c085ae165831e93:128Lkh3S7CkDTBZ8W7BbpsN3YYizJMp8p6',
       },

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

@@ -10,6 +10,7 @@ import { createSnapComponent } from '../../component';
  * @property hideExternalAccounts - Whether to hide accounts that don't belong to the snap.
  * @property chainIds - The chain IDs to filter the accounts to show.
  * @property switchGlobalAccount - Whether to switch the selected account in the client.
+ * @property disabled - Whether the account selector is disabled.
  * @property value - The selected address.
  */
 export type AccountSelectorProps = {
@@ -18,6 +19,7 @@ export type AccountSelectorProps = {
   chainIds?: CaipChainId[] | undefined;
   switchGlobalAccount?: boolean | undefined;
   value?: CaipAccountId | undefined;
+  disabled?: boolean | undefined;
 };
 
 const TYPE = 'AccountSelector';
@@ -32,6 +34,7 @@ const TYPE = 'AccountSelector';
  * @param props.chainIds - The chain IDs to filter the accounts to show.
  * @param props.switchGlobalAccount - Whether to switch the selected account in the client.
  * @param props.value - The selected address.
+ * @param props.disabled - Whether the account selector is disabled.
  * @returns An account selector element.
  * @example
  * <AccountSelector name="account-selector" />

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

@@ -1,3 +1,4 @@
+import { AccountSelector } from './AccountSelector';
 import { AddressInput } from './AddressInput';
 import { Button } from './Button';
 import { Dropdown } from './Dropdown';
@@ -348,6 +349,29 @@ describe('Field', () => {
     });
   });
 
+  it('renders a field with an account selector', () => {
+    const result = (
+      <Field label="Select Account">
+        <AccountSelector name="account" />
+      </Field>
+    );
+
+    expect(result).toStrictEqual({
+      type: 'Field',
+      key: null,
+      props: {
+        label: 'Select Account',
+        children: {
+          type: 'AccountSelector',
+          key: null,
+          props: {
+            name: 'account',
+          },
+        },
+      },
+    });
+  });
+
   it('renders a field with a conditional', () => {
     const result = (
       <Field>

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

@@ -1,3 +1,4 @@
+import type { AccountSelectorElement } from './AccountSelector';
 import type { AddressInputElement } from './AddressInput';
 import type { AssetSelectorElement } from './AssetSelector';
 import type { CheckboxElement } from './Checkbox';
@@ -30,7 +31,8 @@ export type FieldProps = {
     | CheckboxElement
     | SelectorElement
     | AssetSelectorElement
-    | AddressInputElement;
+    | AddressInputElement
+    | AccountSelectorElement;
 };
 
 const TYPE = 'Field';

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

@@ -658,6 +658,7 @@ describe('AccountSelectorStruct', () => {
       switchGlobalAccount
       value="eip155:1:0x1234567890abcdef1234567890abcdef12345678"
     />,
+    <AccountSelector name="account" disabled={true} />,
   ])('validates an account picker element', (value) => {
     expect(is(value, AccountSelectorStruct)).toBe(true);
   });

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

@@ -409,6 +409,7 @@ export const AccountSelectorStruct: Describe<AccountSelectorElement> = element(
     >,
     switchGlobalAccount: optional(boolean()),
     value: optional(CaipAccountIdStruct),
+    disabled: optional(boolean()),
   },
 );
 
@@ -595,7 +596,8 @@ const FieldChildStruct = selectiveUnion((value) => {
   | CheckboxElement
   | SelectorElement
   | AssetSelectorElement
-  | AddressInputElement,
+  | AddressInputElement
+  | AccountSelectorElement,
   null
 >;