chore: Bump Snaps packages (#25505)

## **Description** Bump snaps packages to latest and handle breaking changes. Summary of changes in the snaps deps: - Add `Checkbox` component - Add `Tooltip` component - Add `FileInput` component - Add `alignment` prop to `Text` - Support additional components inside forms - Support conditional children in most JSX components - Support parameters in `setTimeout` and `setInterval` Closes #25385 Closes MetaMask/snaps#2500 Closes MetaMask/MetaMask-planning#2416 [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/25505?quickstart=1) --------- Co-authored-by: Guillaume Roux <[email protected]> Co-authored-by: Maarten Zuidhoorn <[email protected]>
MetaMask · Jun 27, 2024 · 721673e · 721673e
1 parent e0fb582
commit 721673e
Show file tree

Hide file tree

Showing 27 changed files with 607 additions and 70 deletions.
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
diff --git a/builds.yml b/builds.yml
@@ -26,7 +26,7 @@ buildTypes:
       - SEGMENT_WRITE_KEY_REF: SEGMENT_PROD_WRITE_KEY
       - ALLOW_LOCAL_SNAPS: false
       - REQUIRE_SNAPS_ALLOWLIST: true
-      - IFRAME_EXECUTION_ENVIRONMENT_URL: https://execution.metamask.io/iframe/6.4.0/index.html
+      - IFRAME_EXECUTION_ENVIRONMENT_URL: https://execution.metamask.io/iframe/6.5.0/index.html
       - ACCOUNT_SNAPS_DIRECTORY_URL: https://snaps.metamask.io/account-management
       - BTC_BETA_SUPPORT: false
     # Main build uses the default browser manifest
@@ -47,7 +47,7 @@ buildTypes:
       - SEGMENT_WRITE_KEY_REF: SEGMENT_BETA_WRITE_KEY
       - ALLOW_LOCAL_SNAPS: false
       - REQUIRE_SNAPS_ALLOWLIST: true
-      - IFRAME_EXECUTION_ENVIRONMENT_URL: https://execution.metamask.io/iframe/6.4.0/index.html
+      - IFRAME_EXECUTION_ENVIRONMENT_URL: https://execution.metamask.io/iframe/6.5.0/index.html
       - ACCOUNT_SNAPS_DIRECTORY_URL: https://snaps.metamask.io/account-management
     # Modifies how the version is displayed.
     # eg. instead of 10.25.0 -> 10.25.0-beta.2
@@ -68,7 +68,7 @@ buildTypes:
       - SEGMENT_FLASK_WRITE_KEY
       - ALLOW_LOCAL_SNAPS: true
       - REQUIRE_SNAPS_ALLOWLIST: false
-      - IFRAME_EXECUTION_ENVIRONMENT_URL: https://execution.metamask.io/iframe/6.4.0/index.html
+      - IFRAME_EXECUTION_ENVIRONMENT_URL: https://execution.metamask.io/iframe/6.5.0/index.html
       - SUPPORT_LINK: https://support.metamask.io/
       - SUPPORT_REQUEST_LINK: https://support.metamask.io/
       - INFURA_ENV_KEY_REF: INFURA_FLASK_PROJECT_ID
@@ -92,7 +92,7 @@ buildTypes:
       - SEGMENT_WRITE_KEY_REF: SEGMENT_MMI_WRITE_KEY
       - ALLOW_LOCAL_SNAPS: false
       - REQUIRE_SNAPS_ALLOWLIST: true
-      - IFRAME_EXECUTION_ENVIRONMENT_URL: https://execution.metamask.io/iframe/6.4.0/index.html
+      - IFRAME_EXECUTION_ENVIRONMENT_URL: https://execution.metamask.io/iframe/6.5.0/index.html
       - MMI_CONFIGURATION_SERVICE_URL: https://configuration.metamask-institutional.io/v2/configuration/default
       - SUPPORT_LINK: https://mmi-support.metamask.io/hc/en-us
       - SUPPORT_REQUEST_LINK: https://mmi-support.metamask.io/hc/en-us/requests/new

diff --git a/package.json b/package.json
@@ -221,7 +221,7 @@
     "[email protected]": "^7.5.4",
     "@trezor/schema-utils@npm:1.0.2": "patch:@trezor/schema-utils@npm%3A1.0.2#~/.yarn/patches/@trezor-schema-utils-npm-1.0.2-7dd48689b2.patch",
     "lavamoat-core@npm:^15.1.1": "patch:lavamoat-core@npm%3A15.1.1#~/.yarn/patches/lavamoat-core-npm-15.1.1-51fbe39988.patch",
-    "@metamask/snaps-sdk": "^5.0.0",
+    "@metamask/snaps-sdk": "^6.0.0",
     "@metamask/transaction-controller": "^32.0.0",
     "@babel/runtime@npm:^7.7.6": "patch:@babel/runtime@npm%3A7.24.0#~/.yarn/patches/@babel-runtime-npm-7.24.0-7eb1dd11a2.patch",
     "@babel/runtime@npm:^7.9.2": "patch:@babel/runtime@npm%3A7.24.0#~/.yarn/patches/@babel-runtime-npm-7.24.0-7eb1dd11a2.patch",
@@ -335,11 +335,11 @@
     "@metamask/selected-network-controller": "^15.0.2",
     "@metamask/signature-controller": "^16.0.0",
     "@metamask/smart-transactions-controller": "^10.1.2",
-    "@metamask/snaps-controllers": "^9.0.0",
-    "@metamask/snaps-execution-environments": "^6.4.0",
-    "@metamask/snaps-rpc-methods": "^9.1.3",
-    "@metamask/snaps-sdk": "^5.0.0",
-    "@metamask/snaps-utils": "^7.6.0",
+    "@metamask/snaps-controllers": "^9.2.0",
+    "@metamask/snaps-execution-environments": "^6.5.0",
+    "@metamask/snaps-rpc-methods": "^9.1.4",
+    "@metamask/snaps-sdk": "^6.0.0",
+    "@metamask/snaps-utils": "^7.7.0",
     "@metamask/transaction-controller": "^32.0.0",
     "@metamask/user-operation-controller": "^10.0.0",
     "@metamask/utils": "^8.2.1",

diff --git a/test/e2e/snaps/enums.js b/test/e2e/snaps/enums.js
@@ -1,3 +1,3 @@
 module.exports = {
-  TEST_SNAPS_WEBSITE_URL: 'https://metamask.github.io/snaps/test-snaps/2.9.0/',
+  TEST_SNAPS_WEBSITE_URL: 'https://metamask.github.io/snaps/test-snaps/2.11.0/',
 };
diff --git a/ui/components/app/app-components.scss b/ui/components/app/app-components.scss
@@ -23,6 +23,7 @@
 @import 'snaps/snap-ui-renderer/index';
 @import 'snaps/snap-ui-markdown/index';
 @import 'snaps/snap-ui-button/index';
+@import 'snaps/snap-ui-file-input/index';
 @import 'snaps/snap-delineator/index';
 @import 'snaps/snap-list-item/index';
 @import 'snaps/copyable/index';

diff --git a/ui/components/app/metamask-template-renderer/safe-component-list.js b/ui/components/app/metamask-template-renderer/safe-component-list.js
@@ -27,10 +27,13 @@ import { SnapUIMarkdown } from '../snaps/snap-ui-markdown';
 import { SnapUILink } from '../snaps/snap-ui-link';
 import { SmartTransactionStatusPage } from '../../../pages/smart-transactions/smart-transaction-status-page';
 import { SnapUIImage } from '../snaps/snap-ui-image';
+import { SnapUIFileInput } from '../snaps/snap-ui-file-input';
 import { SnapUIInput } from '../snaps/snap-ui-input';
 import { SnapUIForm } from '../snaps/snap-ui-form';
 import { SnapUIButton } from '../snaps/snap-ui-button';
 import { SnapUIDropdown } from '../snaps/snap-ui-dropdown';
+import { SnapUICheckbox } from '../snaps/snap-ui-checkbox';
+import { SnapUITooltip } from '../snaps/snap-ui-tooltip';
 ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
 import { SnapAccountSuccessMessage } from '../../../pages/confirmations/components/snap-account-success-message';
 import { SnapAccountErrorMessage } from '../../../pages/confirmations/components/snap-account-error-message';
@@ -78,10 +81,13 @@ export const safeComponentList = {
   ConfirmInfoRow,
   ConfirmInfoRowAddress,
   ConfirmInfoRowValueDouble,
+  SnapUIFileInput,
   SnapUIInput,
   SnapUIButton,
   SnapUIForm,
   SnapUIDropdown,
+  SnapUICheckbox,
+  SnapUITooltip,
   ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
   CreateSnapAccount,
   RemoveSnapAccount,

diff --git a/ui/components/app/snaps/snap-ui-button/snap-ui-button.tsx b/ui/components/app/snaps/snap-ui-button/snap-ui-button.tsx
@@ -36,7 +36,10 @@ export const SnapUIButton: FunctionComponent<
       event.preventDefault();
     }
 
-    handleEvent({ event: UserInputEventType.ButtonClickEvent, name });
+    handleEvent({
+      event: UserInputEventType.ButtonClickEvent,
+      name,
+    });
   };
 
   const overriddenVariant = disabled ? 'disabled' : variant;

diff --git a/ui/components/app/snaps/snap-ui-checkbox/index.ts b/ui/components/app/snaps/snap-ui-checkbox/index.ts
@@ -0,0 +1 @@
+export * from './snap-ui-checkbox';
diff --git a/ui/components/app/snaps/snap-ui-checkbox/snap-ui-checkbox.tsx b/ui/components/app/snaps/snap-ui-checkbox/snap-ui-checkbox.tsx
@@ -0,0 +1,81 @@
+import React, { FunctionComponent, useEffect, useState } from 'react';
+import { useSnapInterfaceContext } from '../../../../contexts/snaps';
+import {
+  Display,
+  FlexDirection,
+} from '../../../../helpers/constants/design-system';
+import {
+  Box,
+  Label,
+  HelpText,
+  HelpTextSeverity,
+  Checkbox,
+} from '../../../component-library';
+import ToggleButton from '../../../ui/toggle-button';
+
+export type SnapUICheckboxProps = {
+  name: string;
+  fieldLabel?: string;
+  variant?: 'default' | 'toggle';
+  label?: string;
+  error?: string;
+  form?: string;
+};
+
+export const SnapUICheckbox: FunctionComponent<SnapUICheckboxProps> = ({
+  name,
+  variant,
+  fieldLabel,
+  label,
+  error,
+  form,
+  ...props
+}) => {
+  const { handleInputChange, getValue } = useSnapInterfaceContext();
+
+  const initialValue = getValue<boolean>(name, form);
+
+  const [value, setValue] = useState(initialValue ?? false);
+
+  useEffect(() => {
+    if (initialValue !== undefined && initialValue !== null) {
+      setValue(initialValue);
+    }
+  }, [initialValue]);
+
+  const handleChange = () => {
+    setValue(!value);
+    handleInputChange(name, !value, form);
+  };
+
+  return (
+    <Box
+      className="snap-ui-renderer__checkbox"
+      display={Display.Flex}
+      flexDirection={FlexDirection.Column}
+    >
+      {fieldLabel && <Label htmlFor={name}>{fieldLabel}</Label>}
+      {variant === 'toggle' ? (
+        <ToggleButton
+          onToggle={handleChange}
+          value={value}
+          onLabel={label}
+          offLabel={label}
+          {...props}
+        />
+      ) : (
+        <Checkbox
+          onChange={handleChange}
+          isChecked={value}
+          label={label}
+          {...props}
+        />
+      )}
+      {error && (
+        <HelpText severity={HelpTextSeverity.Danger} marginTop={1}>
+          {error}
+        </HelpText>
+      )}
+    </Box>
+  );
+};
diff --git a/ui/components/app/snaps/snap-ui-dropdown/snap-ui-dropdown.tsx b/ui/components/app/snaps/snap-ui-dropdown/snap-ui-dropdown.tsx
@@ -29,7 +29,7 @@ export const SnapUIDropdown: FunctionComponent<SnapUIDropdownProps> = ({
 }) => {
   const { handleInputChange, getValue } = useSnapInterfaceContext();
 
-  const initialValue = getValue(name, form);
+  const initialValue = getValue<string>(name, form);
 
   const [value, setValue] = useState(initialValue ?? '');
 

diff --git a/ui/components/app/snaps/snap-ui-file-input/index.scss b/ui/components/app/snaps/snap-ui-file-input/index.scss
@@ -0,0 +1,21 @@
+.snap-ui-renderer {
+  &__file-input {
+    &__drop-zone {
+      background-color: var(--color-background-alternative);
+
+      .mm-icon,
+      .mm-text {
+        color: var(--color-icon-alternative);
+      }
+
+      &:hover .mm-icon,
+      &:hover .mm-text {
+        color: var(--color-info-default);
+      }
+
+      &:hover {
+        background-color: var(--color-background-alternative-hover);
+      }
+    }
+  }
+}
diff --git a/ui/components/app/snaps/snap-ui-file-input/index.ts b/ui/components/app/snaps/snap-ui-file-input/index.ts
@@ -0,0 +1 @@
+export * from './snap-ui-file-input';