Interactive Interfaces (#22795)

## **Description** This PR integrates the necessary changes for interactive Interfaces. - Setup and update the various controllers. - Update the `SnapUIRenderer` to handle an `interfaceId` rather than direct content. - Add the logic for interface state and event handling in a new `InterfaceContext` react context. - Update the different APIs to handle the newly returned values. - Move the UI components mapping out of the `SnapUIRenderer` file - Rework confirmations to take the `SnapUIRenderer`. ## **Related issues** ## **Manual testing steps** 1. Fire up the interactive UI test snap [coming soon] 2. Play with the snap ## **Screenshots/Recordings**  ### **Before**  ### **After**  ## **Pre-merge author checklist** - [ ] I’ve followed [MetaMask Coding Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md). - [ ] I've clearly explained what problem this PR is solving and how it is solved. - [ ] I've linked related issues - [ ] I've included manual testing steps - [ ] I've included screenshots/recordings if applicable - [ ] I’ve included tests if applicable - [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [ ] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. - [ ] I’ve properly set the pull request status: - [ ] In case it's not yet "ready for review", I've set it to "draft". - [ ] In case it's "ready for review", I've changed it from "draft" to "non-draft". ## **Pre-merge reviewer checklist** - [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots. --------- Co-authored-by: Frederik Bolding <frederik.bolding@gmail.com>
MetaMask · Feb 14, 2024 · ccbbe45 · ccbbe45
1 parent 9118389
commit ccbbe45
Show file tree

Hide file tree

Showing 54 changed files with 950 additions and 337 deletions.
diff --git a/.storybook/test-data.js b/.storybook/test-data.js
@@ -4,6 +4,7 @@ import { NetworkType } from '@metamask/controller-utils';
 import { NetworkStatus } from '@metamask/network-controller';
 import { EthAccountType, EthMethod } from '@metamask/keyring-api';
 import { CHAIN_IDS } from '../shared/constants/network';
+import { copyable, divider, heading, panel, text } from '@metamask/snaps-sdk';
 
 const state = {
   invalidCustomNetwork: {
@@ -277,6 +278,24 @@ const state = {
         ],
       },
     },
+    interfaces: {
+      'test-interface': {
+        content: panel([
+          heading('Foo bar'),
+          text('Description'),
+          divider(),
+          text('More text'),
+          copyable('Text you can copy'),
+        ]),
+        state: {},
+        snapId: 'local:http://localhost:8080/',
+      },
+      'error-interface': {
+        content: 'foo',
+        state: {},
+        snapId: 'local:http://localhost:8080/',
+      },
+    },
     accountArray: [
       {
         name: 'This is a Really Long Account Name',

diff --git a/app/scripts/lib/setupSentry.js b/app/scripts/lib/setupSentry.js
@@ -251,6 +251,9 @@ export const SENTRY_BACKGROUND_STATE = {
     snapStates: false,
     snaps: false,
   },
+  SnapInterface: {
+    interfaces: false,
+  },
   SnapsRegistry: {
     database: false,
     lastUpdated: false,

diff --git a/app/scripts/metamask-controller.js b/app/scripts/metamask-controller.js
@@ -81,6 +81,7 @@ import {
   JsonSnapsRegistry,
   SnapController,
   IframeExecutionService,
+  SnapInterfaceController,
 } from '@metamask/snaps-controllers';
 import {
   createSnapsMethodMiddleware,
@@ -1176,8 +1177,6 @@ export default class MetamaskController extends EventEmitter {
         `${this.permissionController.name}:grantPermissions`,
         `${this.subjectMetadataController.name}:getSubjectMetadata`,
         `${this.subjectMetadataController.name}:addSubjectMetadata`,
-        `${this.phishingController.name}:maybeUpdateState`,
-        `${this.phishingController.name}:testOrigin`,
         'ExecutionService:executeSnap',
         'ExecutionService:getRpcRequestHandler',
         'ExecutionService:terminateSnap',
@@ -1187,6 +1186,8 @@ export default class MetamaskController extends EventEmitter {
         'SnapsRegistry:getMetadata',
         'SnapsRegistry:update',
         'SnapsRegistry:resolveVersion',
+        `SnapInterfaceController:createInterface`,
+        `SnapInterfaceController:getInterface`,
       ],
     });
 
@@ -1283,6 +1284,7 @@ export default class MetamaskController extends EventEmitter {
       allowedEvents: [],
       allowedActions: [],
     });
+
     this.snapsRegistry = new JsonSnapsRegistry({
       state: initState.SnapsRegistry,
       messenger: snapsRegistryMessenger,
@@ -1296,6 +1298,20 @@ export default class MetamaskController extends EventEmitter {
         '0x025b65308f0f0fb8bc7f7ff87bfc296e0330eee5d3c1d1ee4a048b2fd6a86fa0a6',
     });
 
+    const snapInterfaceControllerMessenger =
+      this.controllerMessenger.getRestricted({
+        name: 'SnapInterfaceController',
+        allowedActions: [
+          `${this.phishingController.name}:maybeUpdateState`,
+          `${this.phishingController.name}:testOrigin`,
+        ],
+      });
+
+    this.snapInterfaceController = new SnapInterfaceController({
+      state: initState.SnapInterfaceController,
+      messenger: snapInterfaceControllerMessenger,
+    });
+
     ///: END:ONLY_INCLUDE_IF
 
     // account tracker watches balances, nonces, and any code at their address
@@ -1944,6 +1960,7 @@ export default class MetamaskController extends EventEmitter {
       CronjobController: this.cronjobController,
       SnapsRegistry: this.snapsRegistry,
       NotificationController: this.notificationController,
+      SnapInterfaceController: this.snapInterfaceController,
       ///: END:ONLY_INCLUDE_IF
       ///: BEGIN:ONLY_INCLUDE_IF(desktop)
       DesktopController: this.desktopController.store,
@@ -1995,6 +2012,7 @@ export default class MetamaskController extends EventEmitter {
         CronjobController: this.cronjobController,
         SnapsRegistry: this.snapsRegistry,
         NotificationController: this.notificationController,
+        SnapInterfaceController: this.snapInterfaceController,
         ///: END:ONLY_INCLUDE_IF
         ///: BEGIN:ONLY_INCLUDE_IF(desktop)
         DesktopController: this.desktopController.store,
@@ -2253,11 +2271,11 @@ export default class MetamaskController extends EventEmitter {
             this.controllerMessenger,
             'SnapController:getSnapState',
           ),
-          showDialog: (origin, type, content, placeholder) =>
+          showDialog: (origin, type, id, placeholder) =>
             this.approvalController.addAndShowApprovalRequest({
               origin,
               type: SNAP_DIALOG_TYPES[type],
-              requestData: { content, placeholder },
+              requestData: { id, placeholder },
             }),
           showNativeNotification: (origin, args) =>
             this.controllerMessenger.call(
@@ -2304,6 +2322,14 @@ export default class MetamaskController extends EventEmitter {
               origin,
             ).result;
           },
+          createInterface: this.controllerMessenger.call.bind(
+            this.controllerMessenger,
+            'SnapInterfaceController:createInterface',
+          ),
+          getInterface: this.controllerMessenger.call.bind(
+            this.controllerMessenger,
+            'SnapInterfaceController:getInterface',
+          ),
           ///: END:ONLY_INCLUDE_IF
           ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
           getSnapKeyring: this.getSnapKeyring.bind(this),
@@ -3184,6 +3210,14 @@ export default class MetamaskController extends EventEmitter {
 
         return phishingController.test(website);
       },
+      deleteInterface: this.controllerMessenger.call.bind(
+        this.controllerMessenger,
+        'SnapInterfaceController:deleteInterface',
+      ),
+      updateInterfaceState: this.controllerMessenger.call.bind(
+        this.controllerMessenger,
+        'SnapInterfaceController:updateInterfaceState',
+      ),
       ///: END:ONLY_INCLUDE_IF
       ///: BEGIN:ONLY_INCLUDE_IF(desktop)
       // Desktop
@@ -4941,6 +4975,22 @@ export default class MetamaskController extends EventEmitter {
           this.subjectMetadataController,
           origin,
         ),
+        createInterface: this.controllerMessenger.call.bind(
+          this.controllerMessenger,
+          'SnapInterfaceController:createInterface',
+          origin,
+        ),
+        getInterfaceState: (...args) =>
+          this.controllerMessenger.call(
+            'SnapInterfaceController:getInterface',
+            origin,
+            ...args,
+          ).state,
+        updateInterface: this.controllerMessenger.call.bind(
+          this.controllerMessenger,
+          'SnapInterfaceController:updateInterface',
+          origin,
+        ),
         ///: END:ONLY_INCLUDE_IF
         ///: BEGIN:ONLY_INCLUDE_IF(snaps)
       }),

diff --git a/test/e2e/snaps/test-snap-dialog.spec.js b/test/e2e/snaps/test-snap-dialog.spec.js
@@ -193,7 +193,7 @@ describe('Test Snap Dialog', function () {
         );
 
         // fill '2323' in form field
-        await driver.pasteIntoField('.MuiInput-input', '2323');
+        await driver.pasteIntoField('.mm-input', '2323');
 
         // click submit button
         await driver.clickElement({

diff --git a/test/e2e/tests/state-snapshots/errors-after-init-opt-in-background-state.json b/test/e2e/tests/state-snapshots/errors-after-init-opt-in-background-state.json
@@ -205,6 +205,7 @@
     "snapStates": "object",
     "unencryptedSnapStates": "object"
   },
+  "SnapInterfaceController": "object",
   "SnapsRegistry": { "database": "object", "lastUpdated": "object" },
   "SubjectMetadataController": { "subjectMetadata": "object" },
   "SwapsController": {

diff --git a/test/e2e/tests/state-snapshots/errors-after-init-opt-in-ui-state.json b/test/e2e/tests/state-snapshots/errors-after-init-opt-in-ui-state.json
@@ -173,6 +173,7 @@
     "database": "object",
     "lastUpdated": "object",
     "notifications": "object",
+    "interfaces": "object",
     "names": "object",
     "nameSources": "object",
     "userOperations": "object",

diff --git a/ui/components/app/metamask-template-renderer/safe-component-list.js b/ui/components/app/metamask-template-renderer/safe-component-list.js
@@ -22,6 +22,9 @@ import { Copyable } from '../snaps/copyable';
 import Spinner from '../../ui/spinner';
 import { SnapUIMarkdown } from '../snaps/snap-ui-markdown';
 import { SnapUIImage } from '../snaps/snap-ui-image';
+import { SnapUIInput } from '../snaps/snap-ui-input';
+import { SnapUIForm } from '../snaps/snap-ui-form';
+import { SnapUIButton } from '../snaps/snap-ui-button';
 ///: END:ONLY_INCLUDE_IF
 ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
 import { CreateSnapAccount } from '../../../pages/create-snap-account';
@@ -66,6 +69,9 @@ export const safeComponentList = {
   Spinner,
   ConfirmInfoRow,
   ConfirmInfoRowAddress,
+  SnapUIInput,
+  SnapUIButton,
+  SnapUIForm,
   ///: END:ONLY_INCLUDE_IF
   ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
   CreateSnapAccount,

diff --git a/ui/components/app/snaps/insight-warnings/insight-warnings.js b/ui/components/app/snaps/insight-warnings/insight-warnings.js
@@ -72,12 +72,12 @@ export default function InsightWarnings({
     return (
       <Box className="insights-warnings-modal__content">
         {warnings.map((warning, idx) => {
-          const { snapId, content } = warning;
+          const { snapId, id } = warning;
           return (
             <SnapUIRenderer
               key={`${snapId}-${idx}`}
               snapId={snapId}
-              data={content}
+              interfaceId={id}
               delineatorType={DelineatorType.Warning}
               onClick={() => handleWarningClick(snapId)}
               isCollapsable

diff --git a/ui/components/app/snaps/snap-home-page/snap-home-renderer.js b/ui/components/app/snaps/snap-home-page/snap-home-renderer.js
@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { Box, Text } from '../../../component-library';
 import { SnapUIRenderer } from '../snap-ui-renderer';
 import { getTargetSubjectMetadata } from '../../../../selectors';
@@ -10,9 +10,11 @@ import { DelineatorType } from '../../../../helpers/constants/snaps';
 import { TextVariant } from '../../../../helpers/constants/design-system';
 import { Copyable } from '../copyable';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
+import { deleteInterface } from '../../../../store/actions';
 import { useSnapHome } from './useSnapHome';
 
 export const SnapHomeRenderer = ({ snapId }) => {
+  const dispatch = useDispatch();
   const t = useI18nContext();
   const targetSubjectMetadata = useSelector((state) =>
     getTargetSubjectMetadata(state, snapId),
@@ -21,7 +23,11 @@ export const SnapHomeRenderer = ({ snapId }) => {
   const snapName = getSnapName(snapId, targetSubjectMetadata);
   const { data, error, loading } = useSnapHome({ snapId });
 
-  const content = !loading && !error && data?.content;
+  const interfaceId = !loading && !error && data?.id;
+
+  useEffect(() => {
+    return () => interfaceId && dispatch(deleteInterface(interfaceId));
+  }, []);
 
   return (
     <Box>
@@ -33,8 +39,12 @@ export const SnapHomeRenderer = ({ snapId }) => {
           <Copyable text={error.message} />
         </SnapDelineator>
       )}
-      {(content || loading) && (
-        <SnapUIRenderer snapId={snapId} data={content} isLoading={loading} />
+      {(interfaceId || loading) && (
+        <SnapUIRenderer
+          snapId={snapId}
+          interfaceId={interfaceId}
+          isLoading={loading}
+        />
       )}
     </Box>
   );

diff --git a/ui/components/app/snaps/snap-insight/snap-insight.js b/ui/components/app/snaps/snap-insight/snap-insight.js
@@ -1,17 +1,8 @@
-import React, {
-  ///: BEGIN:ONLY_INCLUDE_IF(build-flask)
-  useEffect,
-  ///: END:ONLY_INCLUDE_IF
-} from 'react';
+import React, { useEffect } from 'react';
 
 import PropTypes from 'prop-types';
 
-import {
-  useSelector,
-  ///: BEGIN:ONLY_INCLUDE_IF(build-flask)
-  useDispatch,
-  ///: END:ONLY_INCLUDE_IF
-} from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 import { Text } from '../../../component-library';
 import {
   AlignItems,
@@ -29,9 +20,14 @@ import { DelineatorType } from '../../../../helpers/constants/snaps';
 import { getSnapName } from '../../../../helpers/utils/util';
 import { Copyable } from '../copyable';
 import { getTargetSubjectMetadata } from '../../../../selectors';
-///: BEGIN:ONLY_INCLUDE_IF(build-flask)
-import { trackInsightSnapUsage } from '../../../../store/actions';
-///: END:ONLY_INCLUDE_IF
+import {
+  ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-mmi,build-beta)
+  deleteInterface,
+  ///: END:ONLY_INCLUDE_IF
+  ///: BEGIN:ONLY_INCLUDE_IF(build-flask)
+  trackInsightSnapUsage,
+  ///: END:ONLY_INCLUDE_IF
+} from '../../../../store/actions';
 ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-mmi,build-beta)
 import { useTransactionInsightSnaps } from '../../../../hooks/snaps/useTransactionInsightSnaps';
 ///: END:ONLY_INCLUDE_IF
@@ -46,13 +42,13 @@ export const SnapInsight = ({
   insightHookParams,
   ///: END:ONLY_INCLUDE_IF
 }) => {
+  const dispatch = useDispatch();
   const t = useI18nContext();
-  let error, content;
+  let error, interfaceId;
   let isLoading = loading;
   ///: BEGIN:ONLY_INCLUDE_IF(build-flask)
   error = data?.error;
-  content = data?.response?.content;
-  const dispatch = useDispatch();
+  interfaceId = data?.response?.id;
   useEffect(() => {
     const trackInsightUsage = async () => {
       try {
@@ -68,8 +64,14 @@ export const SnapInsight = ({
   ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-mmi,build-beta)
   const insights = useTransactionInsightSnaps(insightHookParams);
   error = insights.data?.[0]?.error;
-  content = insights.data?.[0]?.response?.content;
+  interfaceId = insights.data?.[0]?.response?.id;
   isLoading = insights.loading;
+
+  useEffect(() => {
+    return () => {
+      interfaceId && dispatch(deleteInterface(interfaceId));
+    };
+  }, []);
   ///: END:ONLY_INCLUDE_IF
 
   const targetSubjectMetadata = useSelector((state) =>
@@ -78,7 +80,8 @@ export const SnapInsight = ({
 
   const snapName = getSnapName(snapId, targetSubjectMetadata);
 
-  const hasNoData = !error && !isLoading && !content;
+  const hasNoData = !error && !isLoading && !interfaceId;
+
   return (
     <Box
       flexDirection={FLEX_DIRECTION.COLUMN}
@@ -97,10 +100,10 @@ export const SnapInsight = ({
           flexDirection={FLEX_DIRECTION.COLUMN}
           className="snap-insight__container"
         >
-          {isLoading || content ? (
+          {isLoading || interfaceId ? (
             <SnapUIRenderer
               snapId={snapId}
-              data={content}
+              interfaceId={interfaceId}
               delineatorType={DelineatorType.Insights}
               isLoading={isLoading}
             />

diff --git a/ui/components/app/snaps/snap-ui-button/index.ts b/ui/components/app/snaps/snap-ui-button/index.ts
@@ -0,0 +1 @@
+export * from './snap-ui-button';