diff --git a/packages/examples/packages/browserify-plugin/snap.manifest.json b/packages/examples/packages/browserify-plugin/snap.manifest.json
index 9b3401744c..fc111c2e52 100644
--- a/packages/examples/packages/browserify-plugin/snap.manifest.json
+++ b/packages/examples/packages/browserify-plugin/snap.manifest.json
@@ -7,7 +7,7 @@
"url": "https://github.com/MetaMask/snaps.git"
},
"source": {
- "shasum": "hqhKyin2aEwIBEINbyp58fba1ey8216iP25qGL6EEZ4=",
+ "shasum": "R4WjwqkDLNMUtU07n8AGq0WZKjsqjTjQXlASF++J4ws=",
"location": {
"npm": {
"filePath": "dist/bundle.js",
diff --git a/packages/examples/packages/browserify/snap.manifest.json b/packages/examples/packages/browserify/snap.manifest.json
index 36426cbf99..d42908c907 100644
--- a/packages/examples/packages/browserify/snap.manifest.json
+++ b/packages/examples/packages/browserify/snap.manifest.json
@@ -7,7 +7,7 @@
"url": "https://github.com/MetaMask/snaps.git"
},
"source": {
- "shasum": "nnIVqIGRhj27zj2pHhpg9RN8HRiEH/o9EIBzhOhEhVs=",
+ "shasum": "06xWu+ehUlNMpbJQxTZi2mlnAJId3cLHEK6fWD2Z9rc=",
"location": {
"npm": {
"filePath": "dist/bundle.js",
diff --git a/packages/snaps-sdk/src/jsx/components/form/Checkbox.test.tsx b/packages/snaps-sdk/src/jsx/components/form/Checkbox.test.tsx
index 7ac2a7557a..1bb3ece167 100644
--- a/packages/snaps-sdk/src/jsx/components/form/Checkbox.test.tsx
+++ b/packages/snaps-sdk/src/jsx/components/form/Checkbox.test.tsx
@@ -14,9 +14,15 @@ describe('Checkbox', () => {
});
});
- it('renders a checkbox with a variant and a label', () => {
+ it('renders a disabled checkbox with a variant and a label', () => {
const result = (
-
+
);
expect(result).toStrictEqual({
@@ -26,6 +32,7 @@ describe('Checkbox', () => {
checked: true,
variant: 'toggle',
label: 'Foo',
+ disabled: true,
},
key: null,
});
diff --git a/packages/snaps-sdk/src/jsx/components/form/Checkbox.ts b/packages/snaps-sdk/src/jsx/components/form/Checkbox.ts
index ad2dd799fc..df462ef5cf 100644
--- a/packages/snaps-sdk/src/jsx/components/form/Checkbox.ts
+++ b/packages/snaps-sdk/src/jsx/components/form/Checkbox.ts
@@ -8,12 +8,14 @@ import { createSnapComponent } from '../../component';
* @property checked - Whether the checkbox is checked or not.
* @property label - An optional label for the checkbox.
* @property variant - An optional variant for the checkbox.
+ * @property disabled - Whether the checkbox is disabled.
*/
export type CheckboxProps = {
name: string;
checked?: boolean | undefined;
label?: string | undefined;
variant?: 'default' | 'toggle' | undefined;
+ disabled?: boolean | undefined;
};
const TYPE = 'Checkbox';
@@ -27,6 +29,7 @@ const TYPE = 'Checkbox';
* @param props.checked - Whether the checkbox is checked or not.
* @param props.label - An optional label for the checkbox.
* @param props.variant - An optional variant for the checkbox.
+ * @param props.disabled - Whether the checkbox is disabled.
* @returns A checkbox element.
* @example
*
diff --git a/packages/snaps-sdk/src/jsx/components/form/Dropdown.test.tsx b/packages/snaps-sdk/src/jsx/components/form/Dropdown.test.tsx
index a43e4f91f7..de8618ab83 100644
--- a/packages/snaps-sdk/src/jsx/components/form/Dropdown.test.tsx
+++ b/packages/snaps-sdk/src/jsx/components/form/Dropdown.test.tsx
@@ -66,4 +66,41 @@ describe('Dropdown', () => {
key: null,
});
});
+
+ it('renders disabled dropdown with options', () => {
+ const result = (
+
+
+
+
+ );
+
+ expect(result).toStrictEqual({
+ type: 'Dropdown',
+ props: {
+ name: 'dropdown',
+ value: 'foo',
+ disabled: true,
+ children: [
+ {
+ type: 'Option',
+ props: {
+ value: 'foo',
+ children: 'Foo',
+ },
+ key: null,
+ },
+ {
+ type: 'Option',
+ props: {
+ value: 'bar',
+ children: 'Bar',
+ },
+ key: null,
+ },
+ ],
+ },
+ key: null,
+ });
+ });
});
diff --git a/packages/snaps-sdk/src/jsx/components/form/Dropdown.ts b/packages/snaps-sdk/src/jsx/components/form/Dropdown.ts
index f0c476fb2b..f5f6877188 100644
--- a/packages/snaps-sdk/src/jsx/components/form/Dropdown.ts
+++ b/packages/snaps-sdk/src/jsx/components/form/Dropdown.ts
@@ -9,11 +9,13 @@ import type { OptionElement } from './Option';
* state in the form data.
* @property value - The selected value of the dropdown.
* @property children - The children of the dropdown.
+ * @property disabled - Whether the dropdown is disabled.
*/
export type DropdownProps = {
name: string;
value?: string | undefined;
children: SnapsChildren;
+ disabled?: boolean | undefined;
};
const TYPE = 'Dropdown';
@@ -26,6 +28,7 @@ const TYPE = 'Dropdown';
* state in the form data.
* @param props.value - The selected value of the dropdown.
* @param props.children - The children of the dropdown.
+ * @param props.disabled - Whether the dropdown is disabled.
* @returns A dropdown element.
* @example
*
diff --git a/packages/snaps-sdk/src/jsx/components/form/FileInput.test.tsx b/packages/snaps-sdk/src/jsx/components/form/FileInput.test.tsx
index 77ea8a4542..8e64905129 100644
--- a/packages/snaps-sdk/src/jsx/components/form/FileInput.test.tsx
+++ b/packages/snaps-sdk/src/jsx/components/form/FileInput.test.tsx
@@ -26,4 +26,17 @@ describe('FileInput', () => {
key: null,
});
});
+
+ it('renders disabled file input', () => {
+ const result = ;
+
+ expect(result).toStrictEqual({
+ type: 'FileInput',
+ props: {
+ name: 'foo',
+ disabled: true,
+ },
+ key: null,
+ });
+ });
});
diff --git a/packages/snaps-sdk/src/jsx/components/form/FileInput.ts b/packages/snaps-sdk/src/jsx/components/form/FileInput.ts
index 7a009ae689..56bc6b9b95 100644
--- a/packages/snaps-sdk/src/jsx/components/form/FileInput.ts
+++ b/packages/snaps-sdk/src/jsx/components/form/FileInput.ts
@@ -10,11 +10,13 @@ import { createSnapComponent } from '../../component';
* specified, the file input field accepts all file types.
* @property compact - Whether the file input field is compact. Default is
* `false`.
+ * @property disabled - whether the file input is disabled.
*/
export type FileInputProps = {
name: string;
accept?: string[] | undefined;
compact?: boolean | undefined;
+ disabled?: boolean | undefined;
};
const TYPE = 'FileInput';
@@ -33,6 +35,7 @@ const TYPE = 'FileInput';
* valid values, see the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept).
* @param props.compact - Whether the file input field is compact. Default is
* `false`.
+ * @param props.disabled - Whether the file input is disabled.
* @returns A file input element.
* @example
*
diff --git a/packages/snaps-sdk/src/jsx/components/form/Input.test.tsx b/packages/snaps-sdk/src/jsx/components/form/Input.test.tsx
index f446081a89..1696e8447e 100644
--- a/packages/snaps-sdk/src/jsx/components/form/Input.test.tsx
+++ b/packages/snaps-sdk/src/jsx/components/form/Input.test.tsx
@@ -42,4 +42,58 @@ describe('Input', () => {
key: null,
});
});
+
+ it('renders a disabled text input', () => {
+ const result = ;
+
+ expect(result).toStrictEqual({
+ type: 'Input',
+ props: {
+ name: 'foo',
+ type: 'text',
+ disabled: true,
+ },
+ key: null,
+ });
+ });
+
+ it('renders a disabled number input', () => {
+ const result = (
+
+ );
+
+ expect(result).toStrictEqual({
+ type: 'Input',
+ props: {
+ name: 'foo',
+ type: 'number',
+ min: 0,
+ max: 10,
+ step: 1,
+ disabled: true,
+ },
+ key: null,
+ });
+ });
+
+ it('renders a disabled password input', () => {
+ const result = ;
+
+ expect(result).toStrictEqual({
+ type: 'Input',
+ props: {
+ name: 'foo',
+ type: 'password',
+ disabled: true,
+ },
+ key: null,
+ });
+ });
});
diff --git a/packages/snaps-sdk/src/jsx/components/form/Input.ts b/packages/snaps-sdk/src/jsx/components/form/Input.ts
index 814bac24f5..6897019687 100644
--- a/packages/snaps-sdk/src/jsx/components/form/Input.ts
+++ b/packages/snaps-sdk/src/jsx/components/form/Input.ts
@@ -6,6 +6,7 @@ export type GenericInputProps = {
name: string;
value?: string | undefined;
placeholder?: string | undefined;
+ disabled?: boolean | undefined;
};
export type TextInputProps = { type: 'text' } & GenericInputProps;
@@ -57,6 +58,7 @@ const TYPE = 'Input';
* Only applicable to the type `number` input.
* @param props.step - The step value of the input field.
* Only applicable to the type `number` input.
+ * @param props.disabled - Whether the input is disabled.
* @returns An input element.
* @example
*
diff --git a/packages/snaps-sdk/src/jsx/components/form/Option.test.tsx b/packages/snaps-sdk/src/jsx/components/form/Option.test.tsx
index 0c6a5eb3b2..8f3c6d7e6e 100644
--- a/packages/snaps-sdk/src/jsx/components/form/Option.test.tsx
+++ b/packages/snaps-sdk/src/jsx/components/form/Option.test.tsx
@@ -13,4 +13,22 @@ describe('Option', () => {
key: null,
});
});
+
+ it('renders disabled dropdown option', () => {
+ const result = (
+
+ );
+
+ expect(result).toStrictEqual({
+ type: 'Option',
+ props: {
+ value: 'foo',
+ children: 'Foo',
+ disabled: true,
+ },
+ key: null,
+ });
+ });
});
diff --git a/packages/snaps-sdk/src/jsx/components/form/Option.ts b/packages/snaps-sdk/src/jsx/components/form/Option.ts
index 6466ce068c..d83ad56a92 100644
--- a/packages/snaps-sdk/src/jsx/components/form/Option.ts
+++ b/packages/snaps-sdk/src/jsx/components/form/Option.ts
@@ -8,10 +8,12 @@ import { Dropdown } from './Dropdown';
* @property value - The value of the dropdown option. This is used to populate the
* state in the form data.
* @property children - The text to display.
+ * @property disabled - Whether the option is disabled.
*/
type OptionProps = {
value: string;
children: string;
+ disabled?: boolean;
};
const TYPE = 'Option';
@@ -24,6 +26,7 @@ const TYPE = 'Option';
* @param props.value - The value of the dropdown option. This is used to populate the
* state in the form data.
* @param props.children - The text to display.
+ * @param props.disabled - Whether the option is disabled.
* @returns A dropdown option element.
* @example
*
diff --git a/packages/snaps-sdk/src/jsx/components/form/Radio.test.tsx b/packages/snaps-sdk/src/jsx/components/form/Radio.test.tsx
index 3c4f441296..5f51eb2f4e 100644
--- a/packages/snaps-sdk/src/jsx/components/form/Radio.test.tsx
+++ b/packages/snaps-sdk/src/jsx/components/form/Radio.test.tsx
@@ -13,4 +13,22 @@ describe('Radio', () => {
key: null,
});
});
+
+ it('renders a disabled radio option', () => {
+ const result = (
+
+ Foo
+
+ );
+
+ expect(result).toStrictEqual({
+ type: 'Radio',
+ props: {
+ value: 'foo',
+ disabled: true,
+ children: 'Foo',
+ },
+ key: null,
+ });
+ });
});
diff --git a/packages/snaps-sdk/src/jsx/components/form/Radio.ts b/packages/snaps-sdk/src/jsx/components/form/Radio.ts
index d01200d3b3..f52998725e 100644
--- a/packages/snaps-sdk/src/jsx/components/form/Radio.ts
+++ b/packages/snaps-sdk/src/jsx/components/form/Radio.ts
@@ -6,10 +6,12 @@ import { createSnapComponent } from '../../component';
* @property value - The value of the radio option. This is used to populate the
* state in the form data.
* @property children - The text to display.
+ * @property disabled - Whether the radio is disabled.
*/
type RadioProps = {
value: string;
children: string;
+ disabled?: boolean | undefined;
};
const TYPE = 'Radio';
@@ -22,6 +24,7 @@ const TYPE = 'Radio';
* @param props.value - The value of the radio option. This is used to populate the
* state in the form data.
* @param props.children - The text to display.
+ * @param props.disabled - Whether the radio is disabled.
* @returns A radio element.
* @example
*
diff --git a/packages/snaps-sdk/src/jsx/components/form/RadioGroup.test.tsx b/packages/snaps-sdk/src/jsx/components/form/RadioGroup.test.tsx
index f9874a44f1..5770570490 100644
--- a/packages/snaps-sdk/src/jsx/components/form/RadioGroup.test.tsx
+++ b/packages/snaps-sdk/src/jsx/components/form/RadioGroup.test.tsx
@@ -45,4 +45,40 @@ describe('RadioGroup', () => {
key: null,
});
});
+
+ it('renders a disabled Radio group', () => {
+ const result = (
+
+ Option A
+ Option B
+
+ );
+
+ expect(result).toStrictEqual({
+ type: 'RadioGroup',
+ props: {
+ name: 'radio-choice',
+ disabled: true,
+ children: [
+ {
+ type: 'Radio',
+ key: null,
+ props: {
+ value: 'A',
+ children: 'Option A',
+ },
+ },
+ {
+ type: 'Radio',
+ key: null,
+ props: {
+ value: 'B',
+ children: 'Option B',
+ },
+ },
+ ],
+ },
+ key: null,
+ });
+ });
});
diff --git a/packages/snaps-sdk/src/jsx/components/form/RadioGroup.ts b/packages/snaps-sdk/src/jsx/components/form/RadioGroup.ts
index b23ef09100..da1b31330d 100644
--- a/packages/snaps-sdk/src/jsx/components/form/RadioGroup.ts
+++ b/packages/snaps-sdk/src/jsx/components/form/RadioGroup.ts
@@ -9,17 +9,25 @@ const TYPE = 'RadioGroup';
*
* @property name - The name of the dropdown. This is used to identify the
* state in the form data.
+ * @property value - The value of the radio group element.
* @property children - Radio options in form of elements.
+ * @property disabled - Whether the radio group is disabled.
*/
type RadioGroupProps = {
name: string;
value?: string | undefined;
children: SnapsChildren;
+ disabled?: boolean | undefined;
};
/**
* A RadioGroup component, used to display multiple choices, where only one can be chosen.
*
+ * @param props.name - The name of the dropdown. This is used to identify the
+ * state in the form data.
+ * @param props.value - The value of the radio group element.
+ * @param props.children - Radio options in form of elements.
+ * @param props.disabled - Whether the radio group is disabled.
* @returns A RadioGroup element.
* @example
*
diff --git a/packages/snaps-sdk/src/jsx/components/form/Selector.test.tsx b/packages/snaps-sdk/src/jsx/components/form/Selector.test.tsx
index 843025d3d0..127c4c217c 100644
--- a/packages/snaps-sdk/src/jsx/components/form/Selector.test.tsx
+++ b/packages/snaps-sdk/src/jsx/components/form/Selector.test.tsx
@@ -100,4 +100,45 @@ describe('Selector', () => {
key: null,
});
});
+
+ it('renders a disabled selector', () => {
+ const result = (
+
+
+
+
+
+ );
+
+ expect(result).toStrictEqual({
+ type: 'Selector',
+ props: {
+ name: 'selector',
+ value: 'foo',
+ title: 'Choose an option',
+ disabled: true,
+ children: {
+ type: 'SelectorOption',
+ props: {
+ value: 'foo',
+ children: {
+ type: 'Card',
+ props: {
+ title: 'Foo',
+ value: '$1',
+ },
+ key: null,
+ },
+ },
+ key: null,
+ },
+ },
+ key: null,
+ });
+ });
});
diff --git a/packages/snaps-sdk/src/jsx/components/form/Selector.ts b/packages/snaps-sdk/src/jsx/components/form/Selector.ts
index 67e8adb9c8..503ac0e5f8 100644
--- a/packages/snaps-sdk/src/jsx/components/form/Selector.ts
+++ b/packages/snaps-sdk/src/jsx/components/form/Selector.ts
@@ -10,12 +10,14 @@ import type { SelectorOptionElement } from './SelectorOption';
* @property title - The title of the selector. This is displayed in the UI.
* @property value - The selected value of the selector.
* @property children - The children of the selector.
+ * @property disabled - Whether the selector is disabled.
*/
export type SelectorProps = {
name: string;
title: string;
value?: string | undefined;
children: SnapsChildren;
+ disabled?: boolean | undefined;
};
const TYPE = 'Selector';
@@ -29,6 +31,7 @@ const TYPE = 'Selector';
* @param props.title - The title of the selector field. This is displayed in the UI.
* @param props.value - The selected value of the selector.
* @param props.children - The children of the selector.
+ * @property disabled - Whether the selector is disabled.
* @returns A selector element.
* @example
*
diff --git a/packages/snaps-sdk/src/jsx/components/form/SelectorOption.test.tsx b/packages/snaps-sdk/src/jsx/components/form/SelectorOption.test.tsx
index 65dd9aeb0a..7ea5451270 100644
--- a/packages/snaps-sdk/src/jsx/components/form/SelectorOption.test.tsx
+++ b/packages/snaps-sdk/src/jsx/components/form/SelectorOption.test.tsx
@@ -25,4 +25,29 @@ describe('Option', () => {
key: null,
});
});
+
+ it('renders a disabled selector option', () => {
+ const result = (
+
+
+
+ );
+
+ expect(result).toStrictEqual({
+ type: 'SelectorOption',
+ props: {
+ value: 'foo',
+ disabled: true,
+ children: {
+ type: 'Card',
+ props: {
+ title: 'Foo',
+ value: 'Bar',
+ },
+ key: null,
+ },
+ },
+ key: null,
+ });
+ });
});
diff --git a/packages/snaps-sdk/src/jsx/components/form/SelectorOption.ts b/packages/snaps-sdk/src/jsx/components/form/SelectorOption.ts
index 67734f5716..00c847c01c 100644
--- a/packages/snaps-sdk/src/jsx/components/form/SelectorOption.ts
+++ b/packages/snaps-sdk/src/jsx/components/form/SelectorOption.ts
@@ -7,10 +7,12 @@ import type { CardElement } from '../Card';
* @property value - The value of the selector option. This is used to populate the
* state in the form data.
* @property children - The component to display.
+ * @property disabled - Whether the selector option is disabled.
*/
export type SelectorOptionProps = {
value: string;
children: CardElement;
+ disabled?: boolean;
};
const TYPE = 'SelectorOption';
@@ -23,6 +25,7 @@ const TYPE = 'SelectorOption';
* @param props.value - The value of the selector option. This is used to populate the
* state in the form data.
* @param props.children - The component to display.
+ * @param props.disabled - Whether the selector option is disabled.
* @returns A selector option element.
* @example
*
diff --git a/packages/snaps-sdk/src/jsx/validation.test.tsx b/packages/snaps-sdk/src/jsx/validation.test.tsx
index f7c38514aa..cbe0999408 100644
--- a/packages/snaps-sdk/src/jsx/validation.test.tsx
+++ b/packages/snaps-sdk/src/jsx/validation.test.tsx
@@ -210,8 +210,11 @@ describe('ButtonStruct', () => {
describe('InputStruct', () => {
it.each([
,
+ ,
,
+ ,
,
+ ,
,
,
,
@@ -811,6 +814,7 @@ describe('CheckboxStruct', () => {
,
,
,
+ ,
])('validates a dropdown element', (value) => {
expect(is(value, CheckboxStruct)).toBe(true);
});
@@ -899,6 +903,16 @@ describe('DropdownStruct', () => {
,
+
+
+
+ ,
+
+
+
+ ,
])('validates a dropdown element', (value) => {
expect(is(value, DropdownStruct)).toBe(true);
});
@@ -930,6 +944,12 @@ describe('RadioGroupStruct', () => {
Option 1
Option 2
,
+
+ Option 1
+
+ Option 2
+
+ ,
])('validates a radio group element', (value) => {
expect(is(value, RadioGroupStruct)).toBe(true);
});
@@ -960,6 +980,7 @@ describe('FileInputStruct', () => {
,
,
,
+ ,
])('validates a file input element', (value) => {
expect(is(value, FileInputStruct)).toBe(true);
});
@@ -1001,6 +1022,16 @@ describe('SelectorStruct', () => {
,
+
+
+
+
+ ,
+
+
+
+
+ ,
])('validates a selector element', (value) => {
expect(is(value, SelectorStruct)).toBe(true);
});
diff --git a/packages/snaps-sdk/src/jsx/validation.ts b/packages/snaps-sdk/src/jsx/validation.ts
index 3649a37da8..b02997c944 100644
--- a/packages/snaps-sdk/src/jsx/validation.ts
+++ b/packages/snaps-sdk/src/jsx/validation.ts
@@ -270,6 +270,7 @@ export const CheckboxStruct: Describe = element('Checkbox', {
checked: optional(boolean()),
label: optional(string()),
variant: optional(nullUnion([literal('default'), literal('toggle')])),
+ disabled: optional(boolean()),
});
/**
@@ -279,6 +280,7 @@ export const GenericInputPropsStruct = object({
name: string(),
value: optional(string()),
placeholder: optional(string()),
+ disabled: optional(boolean()),
});
/**
@@ -342,6 +344,7 @@ export const InputStruct: Describe = elementWithSelectiveProps(
export const OptionStruct: Describe = element('Option', {
value: string(),
children: string(),
+ disabled: optional(boolean()),
});
/**
@@ -351,6 +354,7 @@ export const DropdownStruct: Describe = element('Dropdown', {
name: string(),
value: optional(string()),
children: children([OptionStruct]),
+ disabled: optional(boolean()),
});
/**
@@ -387,6 +391,7 @@ export const SelectorOptionStruct: Describe = element(
{
value: string(),
children: CardStruct,
+ disabled: optional(boolean()),
},
);
@@ -398,6 +403,7 @@ export const SelectorStruct: Describe = element('Selector', {
title: string(),
value: optional(string()),
children: children([SelectorOptionStruct]),
+ disabled: optional(boolean()),
});
/**
@@ -406,6 +412,7 @@ export const SelectorStruct: Describe = element('Selector', {
export const RadioStruct: Describe = element('Radio', {
value: string(),
children: string(),
+ disabled: optional(boolean()),
});
/**
@@ -417,6 +424,7 @@ export const RadioGroupStruct: Describe = element(
name: string(),
value: optional(string()),
children: children([RadioStruct]),
+ disabled: optional(boolean()),
},
);
@@ -429,6 +437,7 @@ export const FileInputStruct: Describe = element(
name: string(),
accept: nullUnion([optional(array(string()))]),
compact: optional(boolean()),
+ disabled: optional(boolean()),
},
);