@metamask/snaps-sdk 4.0.1 → 4.2.0

package/dist/types/jsx/component.d.ts

@@ -0,0 +1,66 @@
+import type { Json } from '@metamask/utils';
+/**
+ * A key, which can be a string or a number.
+ */
+export declare type Key = string | number;
+/**
+ * A JSON object.
+ */
+export declare type JsonObject = Record<string, Json>;
+/**
+ * A generic JSX element.
+ *
+ * @property type - The type of the element.
+ * @property props - The props of the element.
+ * @property key - The key of the element.
+ */
+export declare type GenericSnapElement = {
+    type: string;
+    props: JsonObject;
+    key: Key | null;
+};
+/**
+ * A JSX element.
+ *
+ * @property type - The type of the element.
+ * @property props - The props of the element.
+ * @property key - The key of the element.
+ */
+export declare type SnapElement<Props extends JsonObject = Record<string, never>, Type extends string = string> = {
+    type: Type;
+    props: Props;
+    key: Key | null;
+};
+/**
+ * A type that can be a single value or an array of values.
+ *
+ * @template Type - The type that can be an array.
+ * @example
+ * type MaybeArrayString = MaybeArray<string>;
+ * const maybeArrayString: MaybeArrayString = 'hello';
+ * const maybeArrayStringArray: MaybeArrayString = ['hello', 'world'];
+ */
+export declare type MaybeArray<Type> = Type | Type[];
+/**
+ * A JSX node, which can be an element, a string, null, or an array of nodes.
+ */
+export declare type SnapNode = MaybeArray<GenericSnapElement | string | null>;
+/**
+ * A JSX string element, which can be a string or an array of strings.
+ */
+export declare type StringElement = MaybeArray<string>;
+/**
+ * A JSX component.
+ */
+export declare type SnapComponent<Props extends JsonObject = Record<string, never>, Type extends string = string> = (props: Props & {
+    key?: Key | null;
+}) => SnapElement<Props, Type>;
+/**
+ * Create a Snap component from a type. This is a helper function that creates a
+ * Snap component function.
+ *
+ * @param type - The type of the component.
+ * @returns A function that creates a Snap element.
+ * @see SnapComponent
+ */
+export declare function createSnapComponent<Props extends JsonObject = Record<string, never>, Type extends string = string>(type: Type): SnapComponent<Props, Type>;

package/dist/types/jsx/components/Address.d.ts

@@ -0,0 +1,28 @@
+/**
+ * The props of the {@link Address} component.
+ *
+ * @property address - The (Ethereum) address to display. This should be a
+ * valid Ethereum address, starting with `0x`.
+ */
+export declare type AddressProps = {
+    address: `0x${string}`;
+};
+/**
+ * An address component, which is used to display an Ethereum address.
+ *
+ * This component does not accept any children.
+ *
+ * @param props - The props of the component.
+ * @param props.address - The (Ethereum) address to display. This should be a
+ * valid Ethereum address, starting with `0x`.
+ * @returns An address element.
+ * @example
+ * <Address address="0x1234567890123456789012345678901234567890" />
+ */
+export declare const Address: import("../component").SnapComponent<AddressProps, "Address">;
+/**
+ * An address element.
+ *
+ * @see Address
+ */
+export declare type AddressElement = ReturnType<typeof Address>;

package/dist/types/jsx/components/Box.d.ts

@@ -0,0 +1,27 @@
+import type { GenericSnapElement, MaybeArray } from '../component';
+/**
+ * The props of the {@link Box} component.
+ *
+ * @property children - The children of the box.
+ */
+export declare type BoxProps = {
+    children: MaybeArray<GenericSnapElement | null>;
+};
+/**
+ * A box component, which is used to group multiple components together.
+ *
+ * @param props - The props of the component.
+ * @param props.children - The children of the box.
+ * @returns A box element.
+ * @example
+ * <Box>
+ *   <Text>Hello world!</Text>
+ * </Box>
+ */
+export declare const Box: import("../component").SnapComponent<BoxProps, "Box">;
+/**
+ * A box element.
+ *
+ * @see Box
+ */
+export declare type BoxElement = ReturnType<typeof Box>;

package/dist/types/jsx/components/Copyable.d.ts

@@ -0,0 +1,32 @@
+/**
+ * The props of the {@link Copyable} component.
+ *
+ * @property value - The value to copy when the user clicks on the copyable
+ * element.
+ * @property sensitive - Whether the value is sensitive. If `true`, the value
+ * will be hidden when the user is not interacting with the copyable element.
+ */
+export declare type CopyableProps = {
+    value: string;
+    sensitive?: boolean | undefined;
+};
+/**
+ * A copyable component, which is used to display text that can be copied by the
+ * user.
+ *
+ * @param props - The props of the component.
+ * @param props.value - The value to copy when the user clicks on the copyable
+ * element.
+ * @param props.sensitive - Whether the value is sensitive. If `true`, the value
+ * will be hidden when the user is not interacting with the copyable element.
+ * @example
+ * <Copyable value="0x1234567890123456789012345678901234567890" />
+ * <Copyable value="0x1234567890123456789012345678901234567890" sensitive />
+ */
+export declare const Copyable: import("../component").SnapComponent<CopyableProps, "Copyable">;
+/**
+ * A copyable element.
+ *
+ * @see Copyable
+ */
+export declare type CopyableElement = ReturnType<typeof Copyable>;

package/dist/types/jsx/components/Divider.d.ts

@@ -0,0 +1,17 @@
+/**
+ * A divider component, which is used to create a horizontal line between
+ * elements.
+ *
+ * This component does not have any props.
+ *
+ * @returns A divider element.
+ * @example
+ * <Divider />
+ */
+export declare const Divider: import("../component").SnapComponent<Record<string, never>, "Divider">;
+/**
+ * A divider element.
+ *
+ * @see Divider
+ */
+export declare type DividerElement = ReturnType<typeof Divider>;

package/dist/types/jsx/components/Heading.d.ts

@@ -0,0 +1,26 @@
+import type { StringElement } from '../component';
+/**
+ * The props of the {@link Heading} component.
+ *
+ * @property children - The text to display in the heading.
+ */
+declare type HeadingProps = {
+    children: StringElement;
+};
+/**
+ * A heading component, which is used to display heading text.
+ *
+ * @param props - The props of the component.
+ * @param props.children - The text to display in the heading.
+ * @returns A heading element.
+ * @example
+ * <Heading>Hello world!</Heading>
+ */
+export declare const Heading: import("../component").SnapComponent<HeadingProps, "Heading">;
+/**
+ * A heading element.
+ *
+ * @see Heading
+ */
+export declare type HeadingElement = ReturnType<typeof Heading>;
+export {};

package/dist/types/jsx/components/Image.d.ts

@@ -0,0 +1,36 @@
+/**
+ * The props of the {@link Image} component.
+ *
+ * @property src - The SVG image to display. This should be an SVG string, and
+ * other formats such as PNG and JPEG are not supported directly. You can use
+ * the `data:` URL scheme to embed images inside the SVG.
+ * @property alt - The alternative text of the image, which describes the image
+ * for users who cannot see it.
+ */
+declare type ImageProps = {
+    src: string;
+    alt?: string | undefined;
+};
+/**
+ * An image component, which is used to display an image.
+ *
+ * This component does not accept any children.
+ *
+ * @param props - The props of the component.
+ * @param props.src - The URL of the image to display. This should be an SVG
+ * string, and other formats such as PNG and JPEG are not supported directly.
+ * You can use the `data:` URL scheme to embed images inside the SVG.
+ * @param props.alt - The alternative text of the image, which describes the
+ * image for users who cannot see it.
+ * @returns An image element.
+ * @example
+ * <Image src="<svg>...</svg>" alt="An example image" />
+ */
+export declare const Image: import("../component").SnapComponent<ImageProps, "Image">;
+/**
+ * An image element.
+ *
+ * @see Image
+ */
+export declare type ImageElement = ReturnType<typeof Image>;
+export {};

package/dist/types/jsx/components/Link.d.ts

@@ -0,0 +1,35 @@
+import type { MaybeArray } from '../component';
+import type { StandardFormattingElement } from './formatting';
+/**
+ * The children of the {@link Link} component.
+ */
+export declare type LinkChildren = MaybeArray<string | StandardFormattingElement | null>;
+/**
+ * The props of the {@link Link} component.
+ *
+ * @property children - The text to display in the link.
+ * @property href - The URL to link to. This must be an `https` or `mailto` URL.
+ * `http` is not allowed.
+ */
+export declare type LinkProps = {
+    children: LinkChildren;
+    href: string;
+};
+/**
+ * A link component, which is used to display a hyperlink.
+ *
+ * @param props - The props of the component.
+ * @param props.children - The text to display in the link.
+ * @param props.href - The URL to link to. This must be an `https` or `mailto`
+ * URL. `http` is not allowed.
+ * @returns A link element.
+ * @example
+ * <Link href="https://example.com">Click here</Link>
+ */
+export declare const Link: import("../component").SnapComponent<LinkProps, "Link">;
+/**
+ * A link element.
+ *
+ * @see Link
+ */
+export declare type LinkElement = ReturnType<typeof Link>;

package/dist/types/jsx/components/Row.d.ts

@@ -0,0 +1,41 @@
+import type { AddressElement } from './Address';
+import type { ImageElement } from './Image';
+import type { TextElement } from './Text';
+/**
+ * The children of a {@link Row} component.
+ */
+export declare type RowChildren = AddressElement | ImageElement | TextElement;
+/**
+ * The props of the {@link Row} component.
+ *
+ * @property label - The label of the row.
+ * @property children - The content of the row. This can be an address, an
+ * image, or text.
+ * @property variant - The variant of the row.
+ */
+export declare type RowProps = {
+    label: string;
+    children: RowChildren;
+    variant?: 'default' | 'warning' | 'error';
+};
+/**
+ * A row component, which is used to display a row of information.
+ *
+ * @param props - The props of the component.
+ * @param props.label - The label of the row.
+ * @param props.children - The content of the row. This can be an address, an
+ * image, or text.
+ * @param props.variant - The variant of the row.
+ * @returns A row element.
+ * @example
+ * <Row label="From" variant="warning">
+ *   <Address address="0x1234567890123456789012345678901234567890" />
+ * </Row>
+ */
+export declare const Row: import("../component").SnapComponent<RowProps, "Row">;
+/**
+ * A row element.
+ *
+ * @see Row
+ */
+export declare type RowElement = ReturnType<typeof Row>;

package/dist/types/jsx/components/Spinner.d.ts

@@ -0,0 +1,17 @@
+/**
+ * A spinner component, which is used to display a spinner, indicating that some
+ * operation is in progress.
+ *
+ * This component does not accept any props.
+ *
+ * @returns A spinner element.
+ * @example
+ * <Spinner />
+ */
+export declare const Spinner: import("../component").SnapComponent<Record<string, never>, "Spinner">;
+/**
+ * A spinner element.
+ *
+ * @see Spinner
+ */
+export declare type SpinnerElement = ReturnType<typeof Spinner>;

package/dist/types/jsx/components/Text.d.ts

@@ -0,0 +1,33 @@
+import type { MaybeArray } from '../component';
+import type { StandardFormattingElement } from './formatting';
+import type { LinkElement } from './Link';
+/**
+ * The children of the {@link Text} component.
+ */
+export declare type TextChildren = MaybeArray<string | StandardFormattingElement | LinkElement | null>;
+/**
+ * The props of the {@link Text} component.
+ *
+ * @property children - The text to display.
+ */
+export declare type TextProps = {
+    children: TextChildren;
+};
+/**
+ * A text component, which is used to display text.
+ *
+ * @param props - The props of the component.
+ * @param props.children - The text to display.
+ * @returns A text element.
+ * @example
+ * <Text>
+ *   Hello <Bold>world</Bold>!
+ * </Text>
+ */
+export declare const Text: import("../component").SnapComponent<TextProps, "Text">;
+/**
+ * A text element.
+ *
+ * @see Text
+ */
+export declare type TextElement = ReturnType<typeof Text>;

package/dist/types/jsx/components/form/Button.d.ts

@@ -0,0 +1,37 @@
+import type { StringElement } from '../../component';
+/**
+ * The props of the {@link Button} component.
+ *
+ * @property children - The text to display on the button.
+ * @property name - The name of the button. This is used to identify the button
+ * in the event handler.
+ * @property type - The type of the button, i.e., `'button'` or `'submit'`.
+ * Defaults to `'button'`.
+ * @property variant - The variant of the button, i.e., `'primary'` or
+ * `'destructive'`. Defaults to `'primary'`.
+ * @property disabled - Whether the button is disabled. Defaults to `false`.
+ */
+export declare type ButtonProps = {
+    children: StringElement;
+    name?: string | undefined;
+    type?: 'button' | 'submit' | undefined;
+    variant?: 'primary' | 'destructive' | undefined;
+    disabled?: boolean | undefined;
+};
+/**
+ * A button component, which is used to create a clickable button.
+ *
+ * @param props - The props of the component.
+ * @param props.children - The text to display on the button. This should be a
+ * string or an array of strings.
+ * @returns A button element.
+ * @example
+ * <Button name="my-button">Click me</Button>
+ */
+export declare const Button: import("../../component").SnapComponent<ButtonProps, "Button">;
+/**
+ * A button element.
+ *
+ * @see Button
+ */
+export declare type ButtonElement = ReturnType<typeof Button>;

package/dist/types/jsx/components/form/Field.d.ts

@@ -0,0 +1,34 @@
+import type { InputElement } from './Input';
+/**
+ * The props of the {@link Field} component.
+ *
+ * @property label - The label of the field.
+ * @property error - The error message of the field.
+ * @property children - The input field and the submit button.
+ */
+export declare type FieldProps = {
+    label?: string | undefined;
+    error?: string | undefined;
+    children: InputElement;
+};
+/**
+ * A field component, which is used to create a form field. This component can
+ * only be used as a child of the {@link Form} component.
+ *
+ * @param props - The props of the component.
+ * @param props.label - The label of the field.
+ * @param props.error - The error message of the field.
+ * @param props.children - The input field and the submit button.
+ * @returns A field element.
+ * @example
+ * <Field label="Username">
+ *   <Input name="username" type="text" />
+ * </Field>
+ */
+export declare const Field: import("../../component").SnapComponent<FieldProps, "Field">;
+/**
+ * A field element.
+ *
+ * @see Field
+ */
+export declare type FieldElement = ReturnType<typeof Field>;

package/dist/types/jsx/components/form/Form.d.ts

@@ -0,0 +1,39 @@
+import type { MaybeArray } from '../../component';
+import type { ButtonElement } from './Button';
+import type { FieldElement } from './Field';
+/**
+ * The props of the {@link Form} component.
+ *
+ * @property children - The form fields. See {@link Field}.
+ * @property name - The name of the form. This is used to identify the form in
+ * the event handler.
+ */
+declare type FormProps = {
+    children: MaybeArray<FieldElement | ButtonElement>;
+    name: string;
+};
+/**
+ * A form component, which is used to create a form.
+ *
+ * @param props - The props of the component.
+ * @param props.children - The form fields. This should be a single field or an
+ * array of fields.
+ * @param props.name - The name of the form. This is used to identify the form
+ * in the event handler.
+ * @returns A form element.
+ * @example
+ * <Form name="my-form">
+ *   <Field label="Username">
+ *     <Input name="username" type="text" />
+ *   </Field>
+ *   <Button type="submit">Submit</Button>
+ * </Form>
+ */
+export declare const Form: import("../../component").SnapComponent<FormProps, "Form">;
+/**
+ * A form element.
+ *
+ * @see Form
+ */
+export declare type FormElement = ReturnType<typeof Form>;
+export {};

package/dist/types/jsx/components/form/Input.d.ts

@@ -0,0 +1,37 @@
+/**
+ * The props of the {@link Input} component.
+ *
+ * @property name - The name of the input field. This is used to identify the
+ * input field in the form data.
+ * @property type - The type of the input field. Defaults to `text`.
+ * @property value - The value of the input field.
+ * @property placeholder - The placeholder text of the input field.
+ */
+declare type InputProps = {
+    name: string;
+    type?: 'text' | 'password' | 'number' | undefined;
+    value?: string | undefined;
+    placeholder?: string | undefined;
+};
+/**
+ * An input component, which is used to create an input field. This component
+ * can only be used as a child of the {@link Field} component.
+ *
+ * @param props - The props of the component.
+ * @param props.name - The name of the input field. This is used to identify the
+ * input field in the form data.
+ * @param props.type - The type of the input field.
+ * @param props.value - The value of the input field.
+ * @param props.placeholder - The placeholder text of the input field.
+ * @returns An input element.
+ * @example
+ * <Input name="username" type="text" />
+ */
+export declare const Input: import("../../component").SnapComponent<InputProps, "Input">;
+/**
+ * An input element.
+ *
+ * @see Input
+ */
+export declare type InputElement = ReturnType<typeof Input>;
+export {};

package/dist/types/jsx/components/form/index.d.ts

@@ -0,0 +1,9 @@
+import type { ButtonElement } from './Button';
+import type { FieldElement } from './Field';
+import type { FormElement } from './Form';
+import type { InputElement } from './Input';
+export * from './Button';
+export * from './Field';
+export * from './Form';
+export * from './Input';
+export declare type StandardFormElement = ButtonElement | FormElement | FieldElement | InputElement;

package/dist/types/jsx/components/formatting/Bold.d.ts

@@ -0,0 +1,32 @@
+import type { JsonObject, MaybeArray, SnapElement } from '../../component';
+/**
+ * The children of the {@link Bold} component.
+ */
+export declare type BoldChildren = MaybeArray<string | SnapElement<JsonObject, 'Italic'> | null>;
+/**
+ * The props of the {@link Bold} component.
+ *
+ * @property children - The text to display in bold.
+ */
+export declare type BoldProps = {
+    children: BoldChildren;
+};
+/**
+ * A bold component, which is used to display text in bold. This component can
+ * only be used as a child of the {@link Text} component.
+ *
+ * @param props - The props of the component.
+ * @param props.children - The text to display in bold.
+ * @returns A bold element.
+ * @example
+ * <Text>
+ *   Hello <Bold>world</Bold>!
+ * </Text>
+ */
+export declare const Bold: import("../../component").SnapComponent<BoldProps, "Bold">;
+/**
+ * A bold element.
+ *
+ * @see Bold
+ */
+export declare type BoldElement = ReturnType<typeof Bold>;

package/dist/types/jsx/components/formatting/Italic.d.ts

@@ -0,0 +1,34 @@
+import type { JsonObject, MaybeArray, SnapElement } from '../../component';
+/**
+ * The children of the {@link Italic} component.
+ */
+export declare type ItalicChildren = MaybeArray<string | SnapElement<JsonObject, 'Bold'> | null>;
+/**
+ * The props of the {@link Italic} component.
+ *
+ * @property children - The text to display in italic. This should be a string
+ * or an array of strings.
+ */
+export declare type ItalicProps = {
+    children: ItalicChildren;
+};
+/**
+ * An italic component, which is used to display text in italic. This componen
+ * can only be used as a child of the {@link Text} component.
+ *
+ * @param props - The props of the component.
+ * @param props.children - The text to display in italic. This should be a
+ * string or an array of strings.
+ * @returns An italic element.
+ * @example
+ * <Text>
+ *   Hello <Italic>world</Italic>!
+ * </Text>
+ */
+export declare const Italic: import("../../component").SnapComponent<ItalicProps, "Italic">;
+/**
+ * An italic element.
+ *
+ * @see Italic
+ */
+export declare type ItalicElement = ReturnType<typeof Italic>;

package/dist/types/jsx/components/formatting/index.d.ts

@@ -0,0 +1,5 @@
+import type { BoldElement } from './Bold';
+import type { ItalicElement } from './Italic';
+export * from './Bold';
+export * from './Italic';
+export declare type StandardFormattingElement = BoldElement | ItalicElement;

package/dist/types/jsx/components/index.d.ts

@@ -0,0 +1,28 @@
+import type { AddressElement } from './Address';
+import type { BoxElement } from './Box';
+import type { CopyableElement } from './Copyable';
+import type { DividerElement } from './Divider';
+import type { StandardFormElement } from './form';
+import type { StandardFormattingElement } from './formatting';
+import type { HeadingElement } from './Heading';
+import type { ImageElement } from './Image';
+import type { LinkElement } from './Link';
+import type { RowElement } from './Row';
+import type { SpinnerElement } from './Spinner';
+import type { TextElement } from './Text';
+export * from './form';
+export * from './formatting';
+export * from './Address';
+export * from './Box';
+export * from './Copyable';
+export * from './Divider';
+export * from './Heading';
+export * from './Image';
+export * from './Link';
+export * from './Row';
+export * from './Spinner';
+export * from './Text';
+/**
+ * A built-in JSX element, which can be used in a Snap user interface.
+ */
+export declare type JSXElement = StandardFormElement | StandardFormattingElement | AddressElement | BoxElement | CopyableElement | DividerElement | HeadingElement | ImageElement | LinkElement | RowElement | SpinnerElement | TextElement;

package/dist/types/jsx/index.d.ts

@@ -0,0 +1,5 @@
+export * from './component';
+export * from './components';
+export * from './jsx-runtime';
+export * from './jsx-dev-runtime';
+export { JSXElementStruct, isJSXElement, isJSXElementUnsafe, assertJSXElement, } from './validation';

package/dist/types/jsx/jsx-dev-runtime.d.ts

@@ -0,0 +1,17 @@
+import type { JsonObject, Key, SnapComponent } from './component';
+/**
+ * The JSX runtime for Snaps SDK components. This function is used to render
+ * Snap components into a format that can be used by the Snaps.
+ *
+ * This is the "development" version of the runtime, which includes additional
+ * validation, which is otherwise handled by MetaMask. To use this runtime,
+ * specify `@metamask/snaps-sdk` as import source for JSX, and use
+ * `react-jsxdev` as the pragma.
+ *
+ * @param component - The component to render.
+ * @param props - The props to pass to the component.
+ * @param key - The key of the component.
+ * @returns The rendered component.
+ * @see https://www.typescriptlang.org/tsconfig/#jsx
+ */
+export declare function jsxDEV<Props extends JsonObject>(component: SnapComponent<Props>, props: Props, key: Key | null): unknown | null;