Add AssetSelector to snaps-sdk

Author: GuillaumeRx

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

@@ -0,0 +1,41 @@
+import { AssetSelector } from './AssetSelector';
+
+describe('AssetSelector', () => {
+  it('renders an asset selector', () => {
+    const result = (
+      <AssetSelector
+        addresses={['eip155:0:0x1234567890123456789012345678901234567890']}
+      />
+    );
+
+    expect(result).toStrictEqual({
+      type: 'AssetSelector',
+      props: {
+        addresses: ['eip155:0:0x1234567890123456789012345678901234567890'],
+      },
+      key: null,
+    });
+  });
+
+  it('renders an asset selector with optional props', () => {
+    const result = (
+      <AssetSelector
+        addresses={['eip155:0:0x1234567890123456789012345678901234567890']}
+        chainIds={['eip155:1']}
+        value="eip155:1/erc20:0x6b175474e89094c44da98b954eedeac495271d0f"
+        disabled={true}
+      />
+    );
+
+    expect(result).toStrictEqual({
+      type: 'AssetSelector',
+      props: {
+        addresses: ['eip155:0:0x1234567890123456789012345678901234567890'],
+        chainIds: ['eip155:1'],
+        value: 'eip155:1/erc20:0x6b175474e89094c44da98b954eedeac495271d0f',
+        disabled: true,
+      },
+      key: null,
+    });
+  });
+});

packages/snaps-sdk/src/jsx/components/form/AssetSelector.tsx

@@ -0,0 +1,52 @@
+import type { CaipAssetTypeOrId, CaipChainId } from '@metamask/utils';
+import type { MatchingAddressesCaipAccountIdList } from 'src/types';
+
+import { createSnapComponent } from '../../component';
+
+/**
+ * The props of the {@link AssetSelector} component.
+ *
+ * @property addresses - The addresses of the account to pull the assets from.
+ * Only one address is supported, but different chains can be used.
+ * @property chainIds - The chain IDs to filter the assets.
+ * @property value - The selected value of the asset selector.
+ * @property disabled - Whether the asset selector is disabled.
+ */
+export type AssetSelectorProps = {
+  addresses: MatchingAddressesCaipAccountIdList;
+  chainIds?: CaipChainId[] | undefined;
+  value?: CaipAssetTypeOrId | undefined;
+  disabled?: boolean | undefined;
+};
+
+const TYPE = 'AssetSelector';
+
+/**
+ * An asset selector component, which is used to create an asset selector.
+ *
+ * @param props - The props of the component.
+ * @param props.addresses - The addresses of the account to pull the assets from.
+ * @param props.chainIds - The chain IDs to filter the assets.
+ * @param props.value - The selected value of the asset selector.
+ * @param props.disabled - Whether the asset selector is disabled.
+ * @returns An asset selector element.
+ * @example
+ * <AssetSelector
+ *  addresses={[
+ *    'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp:7S3P4HxJpyyigGzodYwHtCxZyUQe9JiBMHyRWXArAaKv',
+ *    'solana:EtWTRABZaYq6iMfeYKouRu166VU2xqa1:7S3P4HxJpyyigGzodYwHtCxZyUQe9JiBMHyRWXArAaKv'
+ *  ]}
+ *  value="solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp/token:EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v"
+ * />
+ * @example
+ * <AssetSelector
+ *  addresses={['eip155:0:0x1234567890123456789012345678901234567890']}
+ *  chainIds={['eip155:1']}
+ * />
+ */
+export const AssetSelector = createSnapComponent<
+  AssetSelectorProps,
+  typeof TYPE
+>(TYPE);
+
+export type AssetSelectorElement = ReturnType<typeof AssetSelector>;

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

@@ -1,3 +1,4 @@
+import type { AssetSelectorElement } from './AssetSelector';
 import type { ButtonElement } from './Button';
 import type { CheckboxElement } from './Checkbox';
 import type { DropdownElement } from './Dropdown';
@@ -11,6 +12,7 @@ import type { RadioGroupElement } from './RadioGroup';
 import type { SelectorElement } from './Selector';
 import type { SelectorOptionElement } from './SelectorOption';
 
+export * from './AssetSelector';
 export * from './Button';
 export * from './Checkbox';
 export * from './Dropdown';
@@ -25,6 +27,7 @@ export * from './Selector';
 export * from './SelectorOption';
 
 export type StandardFormElement =
+  | AssetSelectorElement
   | ButtonElement
   | CheckboxElement
   | FormElement

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

@@ -23,6 +23,8 @@ import {
 } from '@metamask/superstruct';
 import {
   CaipAccountIdStruct,
+  CaipAssetTypeOrIdStruct,
+  CaipChainIdStruct,
   hasProperty,
   HexChecksumAddressStruct,
   isPlainObject,
@@ -40,6 +42,7 @@ import type {
   StringElement,
 } from './component';
 import type {
+  AssetSelectorElement,
   AvatarElement,
   SkeletonElement,
   AddressElement,
@@ -86,7 +89,10 @@ import {
   svg,
   typedUnion,
 } from '../internals';
-import type { EmptyObject } from '../types';
+import {
+  MatchingAddressesCaipAccountIdListStruct,
+  type EmptyObject,
+} from '../types';
 
 /**
  * A struct for the {@link Key} type.
@@ -407,6 +413,22 @@ export const SelectorStruct: Describe<SelectorElement> = element('Selector', {
   disabled: optional(boolean()),
 });
 
+/**
+ * A struct for the {@link AssetSelectorElement} type.
+ */
+export const AssetSelectorStruct: Describe<AssetSelectorElement> = element(
+  'AssetSelector',
+  {
+    addresses: MatchingAddressesCaipAccountIdListStruct,
+    chainIds: optional(array(CaipChainIdStruct)) as unknown as Struct<
+      Infer<typeof CaipChainIdStruct>[] | undefined,
+      null
+    >,
+    value: optional(CaipAssetTypeOrIdStruct),
+    disabled: optional(boolean()),
+  },
+);
+
 /**
  * A struct for the {@link RadioElement} type.
  */
@@ -475,13 +497,15 @@ const BOX_INPUT_BOTH = [
  * A subset of JSX elements that are allowed as single children of the Field component.
  */
 const FIELD_CHILDREN_ARRAY = [
+  AssetSelectorStruct,
   InputStruct,
   DropdownStruct,
   RadioGroupStruct,
   FileInputStruct,
   CheckboxStruct,
   SelectorStruct,
 ] as [
+  typeof AssetSelectorStruct,
   typeof InputStruct,
   typeof DropdownStruct,
   typeof RadioGroupStruct,
@@ -873,6 +897,7 @@ export const SpinnerStruct: Describe<SpinnerElement> = element('Spinner');
  */
 export const BoxChildStruct = typedUnion([
   AddressStruct,
+  AssetSelectorStruct,
   BoldStruct,
   BoxStruct,
   ButtonStruct,
@@ -936,6 +961,7 @@ export const RootJSXElementStruct = typedUnion([
  * A struct for the {@link JSXElement} type.
  */
 export const JSXElementStruct: Describe<JSXElement> = typedUnion([
+  AssetSelectorStruct,
   ButtonStruct,
   InputStruct,
   FileInputStruct,

packages/snaps-sdk/src/types/caip.test.ts

@@ -0,0 +1,44 @@
+import { is } from '@metamask/superstruct';
+
+import { MatchingAddressesCaipAccountIdListStruct } from './caip';
+
+describe('MatchingAddressesCaipAccountIdListStruct', () => {
+  it('validates an array of matchin addresses', () => {
+    expect(
+      is(
+        [
+          'eip155:1:0x1234567890123456789012345678901234567890',
+          'eip155:2:0x1234567890123456789012345678901234567890',
+          'eip155:3:0x1234567890123456789012345678901234567890',
+        ],
+        MatchingAddressesCaipAccountIdListStruct,
+      ),
+    ).toBe(true);
+  });
+
+  it("doesn't validate an array of mismatching addresses", () => {
+    expect(
+      is(
+        [
+          'eip155:1:0x1234567890123456789012345678901234567890',
+          'eip155:2:0x1234567890123456789012225678901234567890',
+          'eip155:3:0x1234567890123456789012345678901234567890',
+        ],
+        MatchingAddressesCaipAccountIdListStruct,
+      ),
+    ).toBe(false);
+  });
+
+  it("doesn't validate an array of mismatching chain namespaces", () => {
+    expect(
+      is(
+        [
+          'eip155:1:0x1234567890123456789012345678901234567890',
+          'eip155:2:0x1234567890123456789012345678901234567890',
+          'foo:3:0x1234567890123456789012345678901234567890',
+        ],
+        MatchingAddressesCaipAccountIdListStruct,
+      ),
+    ).toBe(false);
+  });
+});

packages/snaps-sdk/src/types/caip.ts

@@ -1,4 +1,11 @@
-import type { CaipAccountId, CaipChainId } from '@metamask/utils';
+import type { Infer } from '@metamask/superstruct';
+import { array, refine } from '@metamask/superstruct';
+import {
+  CaipAccountIdStruct,
+  parseCaipAccountId,
+  type CaipAccountId,
+  type CaipChainId,
+} from '@metamask/utils';
 
 export type {
   CaipAccountId,
@@ -22,3 +29,35 @@ export type ChainId = CaipChainId;
  * @deprecated Use {@link CaipAccountId} instead.
  */
 export type AccountId = CaipAccountId;
+
+/**
+ * A stuct representing a list of CAIP-10 account IDs where the account addresses and namespaces are the same.
+ */
+export const MatchingAddressesCaipAccountIdListStruct = refine(
+  array(CaipAccountIdStruct),
+  'Matching Addresses Account ID List',
+  (value) => {
+    const parsedAccountIds = value.map((accountId) =>
+      parseCaipAccountId(accountId),
+    );
+
+    if (
+      !parsedAccountIds.every(
+        ({ address, chain: { namespace } }) =>
+          address === parsedAccountIds[0].address &&
+          namespace === parsedAccountIds[0].chain.namespace,
+      )
+    ) {
+      return 'All account IDs must have the same address and chain namespace.';
+    }
+
+    return true;
+  },
+);
+
+/**
+ * A list of CAIP-10 account IDs where the account addresses are the same.
+ */
+export type MatchingAddressesCaipAccountIdList = Infer<
+  typeof MatchingAddressesCaipAccountIdListStruct
+>;

packages/snaps-sdk/src/types/index.ts

@@ -4,7 +4,7 @@ import './global';
 import './images';
 /* eslint-enable import-x/no-unassigned-import */
 
-export type * from './caip';
+export * from './caip';
 export * from './handlers';
 export * from './methods';
 export type * from './permissions';