chore: Bump Snaps packages (#30062)

## **Description** Bump Snaps packages and handle any required changes. Summary of Snaps changes: - Add support for onProtocolRequest + the `endowment:protocol` permission - Add `URLSearchParams` as a default global - Add disabled states for all input components [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/30062?quickstart=1) ## **Related issues** Closes #29669 --------- Co-authored-by: David Drazic <[email protected]> Co-authored-by: Maarten Zuidhoorn <[email protected]>
MetaMask · Feb 4, 2025 · 7f746e9 · 7f746e9
1 parent 86334eb
commit 7f746e9
Show file tree

Hide file tree

Showing 24 changed files with 158 additions and 55 deletions.
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
diff --git a/app/scripts/controllers/permissions/specifications.test.js b/app/scripts/controllers/permissions/specifications.test.js
@@ -16,7 +16,7 @@ describe('PermissionController specifications', () => {
   describe('caveat specifications', () => {
     it('getCaveatSpecifications returns the expected specifications object', () => {
       const caveatSpecifications = getCaveatSpecifications({});
-      expect(Object.keys(caveatSpecifications)).toHaveLength(12);
+      expect(Object.keys(caveatSpecifications)).toHaveLength(13);
       expect(caveatSpecifications[Caip25CaveatType].type).toStrictEqual(
         Caip25CaveatType,
       );
@@ -54,6 +54,9 @@ describe('PermissionController specifications', () => {
       expect(caveatSpecifications.lookupMatchers.type).toStrictEqual(
         SnapCaveatType.LookupMatchers,
       );
+      expect(caveatSpecifications.protocolSnapScopes.type).toStrictEqual(
+        SnapCaveatType.ProtocolSnapScopes,
+      );
     });
   });
 

diff --git a/builds.yml b/builds.yml
@@ -27,7 +27,7 @@ buildTypes:
       - ALLOW_LOCAL_SNAPS: false
       - REQUIRE_SNAPS_ALLOWLIST: true
       - REJECT_INVALID_SNAPS_PLATFORM_VERSION: true
-      - IFRAME_EXECUTION_ENVIRONMENT_URL: https://execution.metamask.io/iframe/6.13.0/index.html
+      - IFRAME_EXECUTION_ENVIRONMENT_URL: https://execution.metamask.io/iframe/6.14.0/index.html
       - ACCOUNT_SNAPS_DIRECTORY_URL: https://snaps.metamask.io/account-management
     # Main build uses the default browser manifest
     manifestOverrides: false
@@ -48,7 +48,7 @@ buildTypes:
       - ALLOW_LOCAL_SNAPS: false
       - REQUIRE_SNAPS_ALLOWLIST: true
       - REJECT_INVALID_SNAPS_PLATFORM_VERSION: true
-      - IFRAME_EXECUTION_ENVIRONMENT_URL: https://execution.metamask.io/iframe/6.13.0/index.html
+      - IFRAME_EXECUTION_ENVIRONMENT_URL: https://execution.metamask.io/iframe/6.14.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
@@ -72,7 +72,7 @@ buildTypes:
       - ALLOW_LOCAL_SNAPS: true
       - REQUIRE_SNAPS_ALLOWLIST: false
       - REJECT_INVALID_SNAPS_PLATFORM_VERSION: false
-      - IFRAME_EXECUTION_ENVIRONMENT_URL: https://execution.metamask.io/iframe/6.13.0/index.html
+      - IFRAME_EXECUTION_ENVIRONMENT_URL: https://execution.metamask.io/iframe/6.14.0/index.html
       - SUPPORT_LINK: https://support.metamask.io/
       - SUPPORT_REQUEST_LINK: https://support.metamask.io/
       - INFURA_ENV_KEY_REF: INFURA_FLASK_PROJECT_ID
@@ -96,7 +96,7 @@ buildTypes:
       - ALLOW_LOCAL_SNAPS: false
       - REQUIRE_SNAPS_ALLOWLIST: true
       - REJECT_INVALID_SNAPS_PLATFORM_VERSION: true
-      - IFRAME_EXECUTION_ENVIRONMENT_URL: https://execution.metamask.io/iframe/6.13.0/index.html
+      - IFRAME_EXECUTION_ENVIRONMENT_URL: https://execution.metamask.io/iframe/6.14.0/index.html
       - MMI_CONFIGURATION_SERVICE_URL: https://configuration.metamask-institutional.io/v2/configuration/default
       - SUPPORT_LINK: https://support.metamask-institutional.io
       - SUPPORT_REQUEST_LINK: https://support.metamask-institutional.io

diff --git a/package.json b/package.json
@@ -220,7 +220,7 @@
     "@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",
     "lavamoat-core@npm:^16.2.2": "patch:lavamoat-core@npm%3A16.2.2#~/.yarn/patches/lavamoat-core-npm-16.2.2-e361ff1f8a.patch",
-    "@metamask/snaps-sdk": "^6.16.0",
+    "@metamask/snaps-sdk": "^6.17.0",
     "@swc/[email protected]": "^0.1.6",
     "@babel/core": "patch:@babel/core@npm%3A7.25.9#~/.yarn/patches/@babel-core-npm-7.25.9-4ae3bff7f3.patch",
     "@babel/runtime": "patch:@babel/runtime@npm%3A7.25.9#~/.yarn/patches/@babel-runtime-npm-7.25.9-fe8c62510a.patch",
@@ -348,11 +348,11 @@
     "@metamask/selected-network-controller": "^19.0.0",
     "@metamask/signature-controller": "^23.1.0",
     "@metamask/smart-transactions-controller": "^16.0.1",
-    "@metamask/snaps-controllers": "^9.18.0",
-    "@metamask/snaps-execution-environments": "^6.13.0",
-    "@metamask/snaps-rpc-methods": "^11.10.0",
-    "@metamask/snaps-sdk": "^6.16.0",
-    "@metamask/snaps-utils": "^8.9.1",
+    "@metamask/snaps-controllers": "^9.19.0",
+    "@metamask/snaps-execution-environments": "^6.14.0",
+    "@metamask/snaps-rpc-methods": "^11.11.0",
+    "@metamask/snaps-sdk": "^6.17.0",
+    "@metamask/snaps-utils": "^8.10.0",
     "@metamask/solana-wallet-snap": "^1.2.0",
     "@metamask/transaction-controller": "^43.0.0",
     "@metamask/user-operation-controller": "^22.0.0",

diff --git a/shared/constants/permissions.ts b/shared/constants/permissions.ts
@@ -61,6 +61,7 @@ export const PermissionWeight = Object.freeze({
   wallet_snap: 4,
   endowment_networkAccess: 3,
   endowment_assets: 3,
+  endowment_protocol: 3,
   endowment_webassembly: 4,
   endowment_transactionInsight: 4,
   endowment_cronjob: 4,

diff --git a/shared/constants/snaps/permissions.ts b/shared/constants/snaps/permissions.ts
@@ -11,6 +11,7 @@ export const EndowmentPermissions = Object.freeze({
   'endowment:signature-insight': 'endowment:signature-insight',
   'endowment:name-lookup': 'endowment:name-lookup',
   'endowment:assets': 'endowment:assets',
+  'endowment:protocol': 'endowment:protocol',
   ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
   'endowment:keyring': 'endowment:keyring',
   ///: END:ONLY_INCLUDE_IF

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
@@ -22,6 +22,7 @@ export type SnapUICheckboxProps = {
   label?: string;
   error?: string;
   form?: string;
+  disabled?: boolean;
 };
 
 export const SnapUICheckbox: FunctionComponent<SnapUICheckboxProps> = ({
@@ -31,6 +32,7 @@ export const SnapUICheckbox: FunctionComponent<SnapUICheckboxProps> = ({
   label,
   error,
   form,
+  disabled,
   ...props
 }) => {
   const { handleInputChange, getValue } = useSnapInterfaceContext();
@@ -65,6 +67,7 @@ export const SnapUICheckbox: FunctionComponent<SnapUICheckboxProps> = ({
           value={value}
           onLabel={label}
           offLabel={label}
+          disabled={disabled}
           {...props}
         />
       ) : (
@@ -75,6 +78,7 @@ export const SnapUICheckbox: FunctionComponent<SnapUICheckboxProps> = ({
           inputProps={{
             borderColor: BorderColor.borderMuted,
           }}
+          isDisabled={disabled}
           {...props}
         />
       )}

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
@@ -19,13 +19,15 @@ export type SnapUIDropdownProps = {
   error?: string;
   options: { name: string; value: string }[];
   form?: string;
+  disabled?: boolean;
 };
 
 export const SnapUIDropdown: FunctionComponent<SnapUIDropdownProps> = ({
   name,
   label,
   error,
   form,
+  disabled,
   ...props
 }) => {
   const { handleInputChange, getValue } = useSnapInterfaceContext();
@@ -61,6 +63,7 @@ export const SnapUIDropdown: FunctionComponent<SnapUIDropdownProps> = ({
         style={{
           border: '1px solid var(--color-border-muted)',
         }}
+        disabled={disabled}
         {...props}
       />
       {error && (

diff --git a/ui/components/app/snaps/snap-ui-file-input/index.scss b/ui/components/app/snaps/snap-ui-file-input/index.scss
@@ -2,6 +2,7 @@
   &__file-input {
     &__drop-zone {
       background-color: var(--color-background-alternative);
+      cursor: pointer;
 
       .mm-icon,
       .mm-text {

diff --git a/ui/components/app/snaps/snap-ui-file-input/snap-ui-file-input.tsx b/ui/components/app/snaps/snap-ui-file-input/snap-ui-file-input.tsx
@@ -42,6 +42,7 @@ export type SnapUIFileInputProps = {
   compact?: boolean;
   error?: boolean;
   helpText?: string;
+  disabled?: boolean;
 };
 
 /**
@@ -65,6 +66,7 @@ export type SnapUIFileInputProps = {
  * has an error, the help text is displayed in red.
  * @param props.helpText - The help text of the file input, which is displayed
  * below the file input field.
+ * @param props.disabled - Whether the file input is disabled.
  * @returns A file input element.
  */
 export const SnapUIFileInput: FunctionComponent<SnapUIFileInputProps> = ({
@@ -75,6 +77,7 @@ export const SnapUIFileInput: FunctionComponent<SnapUIFileInputProps> = ({
   compact,
   error,
   helpText,
+  disabled,
 }) => {
   const t = useI18nContext();
   const { handleFileChange } = useSnapInterfaceContext();
@@ -126,6 +129,7 @@ export const SnapUIFileInput: FunctionComponent<SnapUIFileInputProps> = ({
         onChange={handleChange}
         accept={accept?.join(',')}
         hidden={true}
+        disabled={disabled}
       />
     </>
   );
@@ -167,6 +171,7 @@ export const SnapUIFileInput: FunctionComponent<SnapUIFileInputProps> = ({
           borderRadius={BorderRadius.MD}
           onClick={handleClick}
           ariaLabel={t('uploadFile')}
+          disabled={disabled}
         />
         {footer}
       </Box>
@@ -183,7 +188,10 @@ export const SnapUIFileInput: FunctionComponent<SnapUIFileInputProps> = ({
     >
       {header}
       <Box
-        className="snap-ui-renderer__file-input__drop-zone"
+        className={classnames('snap-ui-renderer__file-input__drop-zone', {
+          'snap-ui-snap-ui-renderer__file-input__drop-zone--disabled':
+            disabled === true,
+        })}
         display={Display.Flex}
         flexDirection={FlexDirection.Row}
         justifyContent={JustifyContent.center}
@@ -197,7 +205,6 @@ export const SnapUIFileInput: FunctionComponent<SnapUIFileInputProps> = ({
         borderWidth={1}
         borderRadius={BorderRadius.MD}
         style={{
-          cursor: 'pointer',
           backgroundColor: active
             ? 'var(--color-background-default-hover)'
             : 'var(--color-background-default)',

diff --git a/ui/components/app/snaps/snap-ui-input/snap-ui-input.tsx b/ui/components/app/snaps/snap-ui-input/snap-ui-input.tsx
@@ -17,7 +17,7 @@ export type SnapUIInputProps = {
 
 export const SnapUIInput: FunctionComponent<
   SnapUIInputProps & FormTextFieldProps<'div'>
-> = ({ name, form, label, ...props }) => {
+> = ({ name, form, label, disabled, ...props }) => {
   const { handleInputChange, getValue, focusedInput, setCurrentFocusedInput } =
     useSnapInterfaceContext();
 
@@ -63,6 +63,7 @@ export const SnapUIInput: FunctionComponent<
       value={value}
       onChange={handleChange}
       label={label}
+      disabled={disabled}
       {...props}
     />
   );

diff --git a/ui/components/app/snaps/snap-ui-radio-group/snap-ui-radio-group.tsx b/ui/components/app/snaps/snap-ui-radio-group/snap-ui-radio-group.tsx
@@ -15,21 +15,27 @@ import {
   Text,
 } from '../../../component-library';
 
-export type SnapUIRadioOption = { value: string; name: string };
+export type SnapUIRadioOption = {
+  value: string;
+  name: string;
+  disabled: boolean;
+};
 
 export type SnapUIRadioGroupProps = {
   name: string;
   label?: string;
   error?: string;
   options: SnapUIRadioOption[];
   form?: string;
+  disabled?: boolean;
 };
 
 export const SnapUIRadioGroup: FunctionComponent<SnapUIRadioGroupProps> = ({
   name,
   label,
   error,
   form,
+  disabled,
   ...props
 }) => {
   const { handleInputChange, getValue } = useSnapInterfaceContext();
@@ -61,8 +67,13 @@ export const SnapUIRadioGroup: FunctionComponent<SnapUIRadioGroupProps> = ({
             checked={value === option.value}
             onChange={() => handleChange(option.value)}
             style={{ margin: '0' }} // radio buttons have default margins that need to be stripped to ensure proper centering
+            disabled={disabled || option.disabled}
           />
           <Text
+            className={classnames({
+              'snap-ui-renderer__radio-label--disabled':
+                disabled || option.disabled,
+            })}
             as="label"
             htmlFor={option.name}
             variant={TextVariant.bodyMd}

diff --git a/ui/components/app/snaps/snap-ui-renderer/components/checkbox.ts b/ui/components/app/snaps/snap-ui-renderer/components/checkbox.ts
@@ -11,6 +11,7 @@ export const checkbox: UIComponentFactory<CheckboxElement> = ({
     name: element.props.name,
     label: element.props.label,
     variant: element.props.variant,
+    disabled: element.props.disabled,
     form,
   },
 });
diff --git a/ui/components/app/snaps/snap-ui-renderer/components/dropdown.ts b/ui/components/app/snaps/snap-ui-renderer/components/dropdown.ts
@@ -12,13 +12,15 @@ export const dropdown: UIComponentFactory<DropdownElement> = ({
   const options = children.map((child) => ({
     value: child.props.value,
     name: child.props.children,
+    disabled: child.props.disabled,
   }));
 
   return {
     element: 'SnapUIDropdown',
     props: {
       id: element.props.name,
       name: element.props.name,
+      disabled: element.props.disabled,
       form,
       options,
     },

diff --git a/ui/components/app/snaps/snap-ui-renderer/components/field.ts b/ui/components/app/snaps/snap-ui-renderer/components/field.ts
@@ -40,6 +40,7 @@ export const field: UIComponentFactory<FieldElement> = ({
           form,
           error: element.props.error !== undefined,
           helpText: element.props.error,
+          disabled: child.props.disabled,
         },
       };
     }
@@ -85,6 +86,7 @@ export const field: UIComponentFactory<FieldElement> = ({
           form,
           error: element.props.error !== undefined,
           helpText: element.props.error,
+          disabled: child.props.disabled,
         },
         propComponents: {
           startAccessory: leftAccessoryMapped && {
@@ -119,6 +121,7 @@ export const field: UIComponentFactory<FieldElement> = ({
           name: dropdown.props.name,
           form,
           error: element.props.error,
+          disabled: child.props.disabled,
         },
       };
     }
@@ -137,6 +140,7 @@ export const field: UIComponentFactory<FieldElement> = ({
           name: radioGroup.props.name,
           form,
           error: element.props.error,
+          disabled: child.props.disabled,
         },
       };
     }
@@ -153,6 +157,7 @@ export const field: UIComponentFactory<FieldElement> = ({
           fieldLabel: element.props.label,
           form,
           error: element.props.error,
+          disabled: child.props.disabled,
         },
       };
     }
@@ -171,6 +176,7 @@ export const field: UIComponentFactory<FieldElement> = ({
           label: element.props.label,
           form,
           error: element.props.error,
+          disabled: child.props.disabled,
         },
       };
     }

diff --git a/ui/components/app/snaps/snap-ui-renderer/components/file-input.ts b/ui/components/app/snaps/snap-ui-renderer/components/file-input.ts
@@ -11,6 +11,7 @@ export const fileInput: UIComponentFactory<FileInputElement> = ({
     name: element.props.name,
     accept: element.props.accept,
     compact: element.props.compact,
+    disabled: element.props.disabled,
     form,
   },
 });
diff --git a/ui/components/app/snaps/snap-ui-renderer/components/input.ts b/ui/components/app/snaps/snap-ui-renderer/components/input.ts
@@ -42,6 +42,7 @@ export const input: UIComponentFactory<InputElement> = ({ element, form }) => {
     props: {
       id: element.props.name,
       placeholder: element.props.placeholder,
+      disabled: element.props.disabled,
       ...constructInputProps(element.props),
       name: element.props.name,
       form,