refactor to add hideExternalAccount

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

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "hvi0QzsvwnbiFtw2bTGJojg09b8Y/RAlmDm1/H3MaYk=",
+    "shasum": "nq/+DKJXOe022/IoOctrZsmhRxt7ti91REvS9gXB5cE=",
     "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": "YWLgNvM8qJee2ZAhuSD3UcYdUqlQ7OX1cYgW8HYYiTI=",
+    "shasum": "5J7aOXR8VNiyrtVEhXWujSg6oHR4cCUpzh5BgudN+b4=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

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

@@ -1,7 +1,25 @@
 import { AccountSelector } from './AccountSelector';
 
 describe('AccountSelector', () => {
-  it('returns an account selector element', () => {
+  it('returns an account selector element without filter props', () => {
+    const result = (
+      <AccountSelector
+        name="account"
+        selectedAccount="1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bed"
+      />
+    );
+
+    expect(result).toStrictEqual({
+      type: 'AccountSelector',
+      props: {
+        name: 'account',
+        selectedAccount: '1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bed',
+      },
+      key: null,
+    });
+  });
+
+  it('returns an account selector element with the chainIds filter prop', () => {
     const result = (
       <AccountSelector
         name="account"
@@ -20,4 +38,24 @@ describe('AccountSelector', () => {
       key: null,
     });
   });
+
+  it('returns an account selector element with the hideExternalAccounts filter prop', () => {
+    const result = (
+      <AccountSelector
+        name="account"
+        hideExternalAccounts={true}
+        selectedAccount="1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bed"
+      />
+    );
+
+    expect(result).toStrictEqual({
+      type: 'AccountSelector',
+      props: {
+        name: 'account',
+        hideExternalAccounts: true,
+        selectedAccount: '1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bed',
+      },
+      key: null,
+    });
+  });
 });

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

@@ -8,12 +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 chainIds - The chain IDs of the account selector. This should be a valid CAIP-2 chain ID array.
+ * @property hideExternalAccounts - Whether to hide accounts not owned by the snap. Defaults to `false`.
  * @property selectedAccount - The default selected account of the account selector. This should be a
  * valid account ID.
  */
 export type AccountSelectorProps = {
   name: string;
-  chainIds: CaipChainId[];
+  chainIds?: CaipChainId[] | undefined;
+  hideExternalAccounts?: boolean | undefined;
   selectedAccount: string;
 };
 
@@ -28,13 +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.chainIds - The chain IDs of the account selector. This should be a valid CAIP-2 chain ID array.
+ * @param props.hideExternalAccounts - Whether to hide accounts not owned by the snap. Defaults to `false`.
  * @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"]} selectedAccount="1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bed" />
  * @example
- * <AccountSelector name="account" chainIds={["bip122:000000000019d6689c085ae165831e93"]} selectedAccount="1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bed" />
+ * <AccountSelector name="account" chainIds={["bip122:000000000019d6689c085ae165831e93"]} selectedAccount="1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bed" hideExternalAccounts />
  */
 export const AccountSelector = createSnapComponent<
   AccountSelectorProps,

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

@@ -974,7 +974,7 @@ describe('AccountSelectorStruct', () => {
     />,
     <AccountSelector
       name="account"
-      chainIds={['eip155:1']}
+      hideExternalAccounts={true}
       selectedAccount="1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bed"
     />,
   ])('validates an account picker element', (value) => {
@@ -1005,6 +1005,13 @@ describe('AccountSelectorStruct', () => {
       chainIds={['foo:bar']}
       selectedAccount="1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bed"
     />,
+    <AccountSelector
+      name="account"
+      chainIds={['foo:bar']}
+      selectedAccount="1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bed"
+      // @ts-expect-error - Invalid props.
+      hideExternalAccounts={42}
+    />,
     <Text>foo</Text>,
     <Box>
       <Text>foo</Text>

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

@@ -340,12 +340,11 @@ export const AccountSelectorStruct: Describe<AccountSelectorElement> = element(
   'AccountSelector',
   {
     name: string(),
-    chainIds: array(
-      CaipChainIdStruct as unknown as Struct<
-        Infer<typeof CaipChainIdStruct>,
-        Infer<typeof CaipChainIdStruct>
-      >,
-    ),
+    chainIds: optional(array(CaipChainIdStruct)) as unknown as Struct<
+      Infer<typeof CaipChainIdStruct>[] | undefined,
+      null
+    >,
+    hideExternalAccounts: optional(boolean()),
     selectedAccount: string(),
   },
 );

packages/snaps-webpack-plugin/src/__snapshots__/plugin.test.ts.snap

@@ -7,6 +7,13 @@ exports[`SnapsWebpackPlugin applies a transform 1`] = `
 })();"
 `;
 
+exports[`SnapsWebpackPlugin applies a transform 2`] = `
+"(() => {
+  var __webpack_exports__ = {};
+  const foo = 'bar';
+})();"
+`;
+
 exports[`SnapsWebpackPlugin forwards the options 1`] = `
 "/******/(() => {
   // webpackBootstrap