Merge branch 'main' into bowen/fuzzylookup

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

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "Rvk4nDRt8bofy5oUtavVGwVB0pnZ7BdsmO9V315Qs+w=",
+    "shasum": "+w62Op5ur4nVLmQ0uKA0IsAQN2hkKOsgSm4VK9jxxYY=",
     "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": "u+bnPdpw6us0nDDr3k28cfDoIA+5CT1Y7A88nYJLNGk=",
+    "shasum": "SL7kg2vwhtpuzNvOx7uQZNZbccRgfFtTi0xZdEVEP0s=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/snaps-controllers/src/services/iframe/IframeExecutionService.ts

@@ -35,7 +35,10 @@ export class IframeExecutionService extends AbstractExecutionService<Window> {
     worker: Window;
     stream: BasePostMessageStream;
   }> {
-    const iframeWindow = await createWindow(this.iframeUrl.toString(), jobId);
+    const iframeWindow = await createWindow({
+      uri: this.iframeUrl.toString(),
+      id: jobId,
+    });
 
     const stream = new WindowPostMessageStream({
       name: 'parent',

packages/snaps-controllers/src/services/webworker/WebWorkerExecutionService.ts

@@ -98,11 +98,11 @@ export class WebWorkerExecutionService extends AbstractExecutionService<string>
       return;
     }
 
-    const window = await createWindow(
-      this.#documentUrl.href,
-      WORKER_POOL_ID,
-      false,
-    );
+    const window = await createWindow({
+      uri: this.#documentUrl.href,
+      id: WORKER_POOL_ID,
+      sandbox: false,
+    });
 
     this.#runtimeStream = new WindowPostMessageStream({
       name: 'parent',

packages/snaps-execution-environments/src/proxy/ProxySnapExecutor.ts

@@ -96,7 +96,7 @@ export class ProxySnapExecutor {
    * @returns The executor job object.
    */
   async #initializeJob(jobId: string): Promise<ExecutorJob> {
-    const window = await createWindow(this.#frameUrl, jobId);
+    const window = await createWindow({ uri: this.#frameUrl, id: jobId });
     const jobStream = new WindowPostMessageStream({
       name: 'parent',
       target: 'child',

packages/snaps-sdk/src/jsx/components/Heading.test.tsx

@@ -41,4 +41,17 @@ describe('Heading', () => {
       },
     });
   });
+
+  it('renders a heading with a `lg` size', () => {
+    const result = <Heading size="lg">Foo</Heading>;
+
+    expect(result).toStrictEqual({
+      type: 'Heading',
+      key: null,
+      props: {
+        children: 'Foo',
+        size: 'lg',
+      },
+    });
+  });
 });

packages/snaps-sdk/src/jsx/components/Heading.ts

@@ -5,9 +5,11 @@ import { createSnapComponent } from '../component';
  * The props of the {@link Heading} component.
  *
  * @property children - The text to display in the heading.
+ * @property size - The size of the heading.
  */
 type HeadingProps = {
   children: StringElement;
+  size?: 'md' | 'lg' | undefined;
 };
 
 const TYPE = 'Heading';
@@ -17,9 +19,12 @@ const TYPE = 'Heading';
  *
  * @param props - The props of the component.
  * @param props.children - The text to display in the heading.
+ * @param props.size - The size of the heading.
  * @returns A heading element.
  * @example
  * <Heading>Hello world!</Heading>
+ * @example
+ * <Heading size="lg">Hello world!</Heading>
  */
 export const Heading = createSnapComponent<HeadingProps, typeof TYPE>(TYPE);
 

packages/snaps-sdk/src/jsx/components/Link.test.tsx

@@ -1,3 +1,4 @@
+import { Address } from './Address';
 import { Icon } from './Icon';
 import { Link } from './Link';
 
@@ -49,6 +50,27 @@ describe('Link', () => {
     });
   });
 
+  it('renders a link with an Address', () => {
+    const result = (
+      <Link href="https://example.com">
+        <Address address="0x1234567890123456789012345678901234567890" />
+      </Link>
+    );
+
+    expect(result).toStrictEqual({
+      type: 'Link',
+      key: null,
+      props: {
+        href: 'https://example.com',
+        children: {
+          type: 'Address',
+          key: null,
+          props: { address: '0x1234567890123456789012345678901234567890' },
+        },
+      },
+    });
+  });
+
   it('renders a link with a conditional value', () => {
     const result = (
       <Link href="https://example.com">

packages/snaps-sdk/src/jsx/components/Link.ts

@@ -1,5 +1,6 @@
 import type { SnapsChildren } from '../component';
 import { createSnapComponent } from '../component';
+import type { AddressElement } from './Address';
 import type { StandardFormattingElement } from './formatting';
 import { type IconElement } from './Icon';
 import { type ImageElement } from './Image';
@@ -8,7 +9,11 @@ import { type ImageElement } from './Image';
  * The children of the {@link Link} component.
  */
 export type LinkChildren = SnapsChildren<
-  string | StandardFormattingElement | IconElement | ImageElement
+  | string
+  | StandardFormattingElement
+  | IconElement
+  | ImageElement
+  | AddressElement
 >;
 
 /**

packages/snaps-sdk/src/jsx/components/Row.test.tsx

@@ -1,5 +1,6 @@
 import { Address } from './Address';
 import { Image } from './Image';
+import { Link } from './Link';
 import { Row } from './Row';
 import { Text } from './Text';
 
@@ -73,4 +74,36 @@ describe('Row', () => {
       },
     });
   });
+
+  it('renders a row with a Link', () => {
+    const result = (
+      <Row label="Foo">
+        <Link href="https://example.com">
+          <Address address="0x1234567890123456789012345678901234567890" />
+        </Link>
+      </Row>
+    );
+
+    expect(result).toStrictEqual({
+      type: 'Row',
+      key: null,
+      props: {
+        label: 'Foo',
+        children: {
+          type: 'Link',
+          key: null,
+          props: {
+            href: 'https://example.com',
+            children: {
+              type: 'Address',
+              key: null,
+              props: {
+                address: '0x1234567890123456789012345678901234567890',
+              },
+            },
+          },
+        },
+      },
+    });
+  });
 });

packages/snaps-sdk/src/jsx/components/Row.ts

@@ -1,6 +1,7 @@
 import { createSnapComponent } from '../component';
 import type { AddressElement } from './Address';
 import type { ImageElement } from './Image';
+import type { LinkElement } from './Link';
 import type { TextElement } from './Text';
 import type { ValueElement } from './Value';
 
@@ -11,7 +12,8 @@ export type RowChildren =
   | AddressElement
   | ImageElement
   | TextElement
-  | ValueElement;
+  | ValueElement
+  | LinkElement;
 
 /**
  * The props of the {@link Row} component.

packages/snaps-sdk/src/jsx/components/Text.ts

@@ -26,6 +26,8 @@ export type TextColors =
  * The props of the {@link Text} component.
  *
  * @property children - The text to display.
+ * @property alignment - The alignment of the text.
+ * @property color - The color of the text.
  */
 export type TextProps = {
   children: TextChildren;
@@ -39,6 +41,8 @@ const TYPE = 'Text';
  * A text component, which is used to display text.
  *
  * @param props - The props of the component.
+ * @param props.alignment - The alignment of the text.
+ * @param props.color - The color of the text.
  * @param props.children - The text to display.
  * @returns A text element.
  * @example

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

@@ -0,0 +1,25 @@
+import { AccountSelector } from './AccountSelector';
+
+describe('AccountSelector', () => {
+  it('returns an account selector element', () => {
+    const result = (
+      <AccountSelector
+        name="account"
+        title="From account"
+        chainId="bip122:p2wpkh"
+        selectedAddress="bc1qc8dwyqua9elc3mzcxk93c70kjz8tcc92x0a8a6"
+      />
+    );
+
+    expect(result).toStrictEqual({
+      type: 'AccountSelector',
+      props: {
+        name: 'account',
+        title: 'From account',
+        chainId: 'bip122:p2wpkh',
+        selectedAddress: 'bc1qc8dwyqua9elc3mzcxk93c70kjz8tcc92x0a8a6',
+      },
+      key: null,
+    });
+  });
+});

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

@@ -0,0 +1,52 @@
+import type { CaipAccountAddress, CaipChainId } from '@metamask/utils';
+
+import { createSnapComponent } from '../../component';
+
+/**
+ * The props of the {@link AccountSelector} 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 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;
+  chainId: CaipChainId;
+  selectedAddress: CaipAccountAddress;
+};
+
+const TYPE = 'AccountSelector';
+
+/**
+ * An account selector component, which is used to create an account selector.
+ *
+ * This component does not accept any children.
+ *
+ * @param props - The props of the component.
+ * @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.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" chainId="eip155:1" selectedAddress="0x1234567890123456789012345678901234567890" />
+ * @example
+ * <AccountSelector name="account" title="From account" chainId="bip122:000000000019d6689c085ae165831e93" selectedAddress="128Lkh3S7CkDTBZ8W7BbpsN3YYizJMp8p6" />
+ */
+export const AccountSelector = createSnapComponent<
+  AccountSelectorProps,
+  typeof TYPE
+>(TYPE);
+
+/**
+ * An account selector element.
+ *
+ * @see AccountSelector
+ */
+export type AccountSelectorElement = ReturnType<typeof AccountSelector>;

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

@@ -1,3 +1,4 @@
+import type { AccountSelectorElement } from './AccountSelector';
 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 './AccountSelector';
 export * from './Button';
 export * from './Checkbox';
 export * from './Dropdown';
@@ -25,6 +27,7 @@ export * from './Selector';
 export * from './SelectorOption';
 
 export type StandardFormElement =
+  | AccountSelectorElement
   | ButtonElement
   | CheckboxElement
   | FormElement