diff --git a/packages/examples/packages/interactive-ui/snap.manifest.json b/packages/examples/packages/interactive-ui/snap.manifest.json
index 9fd474a512..6f6d2e300b 100644
--- a/packages/examples/packages/interactive-ui/snap.manifest.json
+++ b/packages/examples/packages/interactive-ui/snap.manifest.json
@@ -7,7 +7,7 @@
"url": "https://github.com/MetaMask/snaps.git"
},
"source": {
- "shasum": "ldOmsuDgyS+Dz5o+bZtxtgb4Ss5XVJQ0fYpJtbHFtz8=",
+ "shasum": "ZfrR4llZ3X3UXNIvRClCXQoQ7qSZKdgO3PgVq6L1Gxk=",
"location": {
"npm": {
"filePath": "dist/bundle.js",
diff --git a/packages/examples/packages/interactive-ui/src/components/InteractiveForm.tsx b/packages/examples/packages/interactive-ui/src/components/InteractiveForm.tsx
index bea2545f9e..aa4b75f67c 100644
--- a/packages/examples/packages/interactive-ui/src/components/InteractiveForm.tsx
+++ b/packages/examples/packages/interactive-ui/src/components/InteractiveForm.tsx
@@ -14,6 +14,8 @@ import {
Dropdown,
Option,
Checkbox,
+ Container,
+ Footer,
} from '@metamask/snaps-sdk/jsx';
/**
@@ -46,54 +48,72 @@ export type InteractiveFormState = {
'example-selector': string;
};
-export const InteractiveForm: SnapComponent = () => {
+export const InteractiveForm: SnapComponent<{ disabled?: boolean }> = ({
+ disabled,
+}) => {
return (
-
- Interactive UI Example Snap
-
-
+
+
+ Interactive UI Example Snap
+
+
+
+
);
};
diff --git a/packages/examples/packages/interactive-ui/src/components/Result.tsx b/packages/examples/packages/interactive-ui/src/components/Result.tsx
index 3d75d4dff4..e709ebe0cc 100644
--- a/packages/examples/packages/interactive-ui/src/components/Result.tsx
+++ b/packages/examples/packages/interactive-ui/src/components/Result.tsx
@@ -1,5 +1,13 @@
import type { SnapComponent } from '@metamask/snaps-sdk/jsx';
-import { Heading, Button, Box, Text, Copyable } from '@metamask/snaps-sdk/jsx';
+import {
+ Heading,
+ Button,
+ Box,
+ Text,
+ Copyable,
+ Container,
+ Footer,
+} from '@metamask/snaps-sdk/jsx';
import type { InteractiveFormState } from './InteractiveForm';
@@ -9,17 +17,20 @@ type ResultProps = {
export const Result: SnapComponent = ({ values }) => {
return (
-
- Interactive UI Example Snap
- You submitted the following values:
+
- {Object.values(values).map((value) => (
-
- ))}
+ Interactive UI Example Snap
+ You submitted the following values:
+
+ {Object.values(values).map((value) => (
+
+ ))}
+
-
+
-
+
+
+
);
};
diff --git a/packages/examples/packages/interactive-ui/src/index.test.tsx b/packages/examples/packages/interactive-ui/src/index.test.tsx
index 5304ee8c77..6906e2bfab 100644
--- a/packages/examples/packages/interactive-ui/src/index.test.tsx
+++ b/packages/examples/packages/interactive-ui/src/index.test.tsx
@@ -1,5 +1,5 @@
import { expect } from '@jest/globals';
-import { assertIsConfirmationDialog, installSnap } from '@metamask/snaps-jest';
+import { assertIsCustomDialog, installSnap } from '@metamask/snaps-jest';
import {
Insight,
@@ -52,7 +52,7 @@ describe('onRpcRequest', () => {
await formScreen.clickElement('submit');
const resultScreen = await response.getInterface();
- assertIsConfirmationDialog(resultScreen);
+ assertIsCustomDialog(resultScreen);
expect(resultScreen).toRender(
{
}}
/>,
);
- await resultScreen.ok();
+ await resultScreen.clickElement('ok');
- expect(await response).toRespondWith(true);
+ expect(await response).toRespondWith(null);
});
it('lets users input nothing', async () => {
@@ -84,7 +84,7 @@ describe('onRpcRequest', () => {
await formScreen.clickElement('submit');
const resultScreen = await response.getInterface();
- assertIsConfirmationDialog(resultScreen);
+ assertIsCustomDialog(resultScreen);
expect(resultScreen).toRender(
{
}}
/>,
);
- await resultScreen.ok();
+ await resultScreen.clickElement('ok');
- expect(await response).toRespondWith(true);
+ expect(await response).toRespondWith(null);
});
});
});
diff --git a/packages/examples/packages/interactive-ui/src/index.tsx b/packages/examples/packages/interactive-ui/src/index.tsx
index ca6adb02f5..8924868fc6 100644
--- a/packages/examples/packages/interactive-ui/src/index.tsx
+++ b/packages/examples/packages/interactive-ui/src/index.tsx
@@ -32,11 +32,19 @@ import { decodeData } from './utils';
export const onRpcRequest: OnRpcRequestHandler = async ({ request }) => {
switch (request.method) {
case 'dialog': {
+ const params = request.params as { disabled: boolean };
+ const disabled = params?.disabled;
+ const interfaceId = await snap.request({
+ method: 'snap_createInterface',
+ params: {
+ ui: ,
+ context: { disabled },
+ },
+ });
return await snap.request({
method: 'snap_dialog',
params: {
- type: 'confirmation',
- content: ,
+ id: interfaceId,
},
});
}
@@ -139,7 +147,17 @@ export const onUserInput: OnUserInputHandler = async ({
method: 'snap_updateInterface',
params: {
id,
- ui: ,
+ ui: ,
+ },
+ });
+ break;
+
+ case 'ok':
+ await snap.request({
+ method: 'snap_resolveInterface',
+ params: {
+ id,
+ value: null,
},
});
break;
diff --git a/packages/test-snaps/src/features/snaps/interactive-ui/InteractiveUI.tsx b/packages/test-snaps/src/features/snaps/interactive-ui/InteractiveUI.tsx
index 24cc1811fd..3ba2af2dff 100644
--- a/packages/test-snaps/src/features/snaps/interactive-ui/InteractiveUI.tsx
+++ b/packages/test-snaps/src/features/snaps/interactive-ui/InteractiveUI.tsx
@@ -14,10 +14,13 @@ import { getSnapId } from '../../../utils';
export const InteractiveUI: FunctionComponent = () => {
const [invokeSnap, { isLoading, data, error }] = useInvokeMutation();
- const handleClick = (method: string) => () => {
+ const handleClick = (method: string, disabled: boolean) => () => {
invokeSnap({
snapId: getSnapId(INTERACTIVE_UI_SNAP_ID, INTERACTIVE_UI_SNAP_PORT),
method,
+ params: {
+ disabled,
+ },
}).catch(logError);
};
return (
@@ -33,16 +36,17 @@ export const InteractiveUI: FunctionComponent = () => {
variant="primary"
id="createDialogButton"
disabled={isLoading}
- onClick={handleClick('dialog')}
+ onClick={handleClick('dialog', false)}
>
Create Dialog