chore: Bump Snaps packages (#29920)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

Bump Snaps packages and handle any required changes.

Summary of Snaps changes:
- Add support for onAssetsLookup and onAssetsConversion handlers + the
`endowment:assets` permission
- Add `Intl` as a default global
- Add `Skeleton` component
- Add border radius prop to `Image`


[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/29920?quickstart=1)

## **Related issues**

Closes MetaMask/snaps#3027
Closes MetaMask/snaps#2940

---------

Co-authored-by: David Drazic <[email protected]>

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.12.0/index.html
+      - IFRAME_EXECUTION_ENVIRONMENT_URL: https://execution.metamask.io/iframe/6.13.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.12.0/index.html
+      - IFRAME_EXECUTION_ENVIRONMENT_URL: https://execution.metamask.io/iframe/6.13.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.12.0/index.html
+      - IFRAME_EXECUTION_ENVIRONMENT_URL: https://execution.metamask.io/iframe/6.13.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.12.0/index.html
+      - IFRAME_EXECUTION_ENVIRONMENT_URL: https://execution.metamask.io/iframe/6.13.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

lavamoat/browserify/beta/policy.json

@@ -1841,6 +1841,7 @@
     },
     "@metamask/snaps-sdk": {
       "globals": {
+        "URL": true,
         "fetch": true
       },
       "packages": {

lavamoat/browserify/flask/policy.json

@@ -1854,6 +1854,7 @@
     },
     "@metamask/snaps-sdk": {
       "globals": {
+        "URL": true,
         "fetch": true
       },
       "packages": {

lavamoat/browserify/main/policy.json

@@ -1841,6 +1841,7 @@
     },
     "@metamask/snaps-sdk": {
       "globals": {
+        "URL": true,
         "fetch": true
       },
       "packages": {

lavamoat/browserify/mmi/policy.json

@@ -1933,6 +1933,7 @@
     },
     "@metamask/snaps-sdk": {
       "globals": {
+        "URL": true,
         "fetch": true
       },
       "packages": {

package.json

@@ -216,7 +216,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.15.0",
+    "@metamask/snaps-sdk": "^6.16.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",
@@ -345,11 +345,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.17.0",
-    "@metamask/snaps-execution-environments": "^6.12.0",
-    "@metamask/snaps-rpc-methods": "^11.9.1",
-    "@metamask/snaps-sdk": "^6.15.0",
-    "@metamask/snaps-utils": "^8.8.0",
+    "@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/solana-wallet-snap": "^1.1.0",
     "@metamask/transaction-controller": "^43.0.0",
     "@metamask/user-operation-controller": "^22.0.0",

shared/constants/permissions.ts

@@ -60,6 +60,7 @@ export const PermissionWeight = Object.freeze({
   snap_getLocale: 4,
   wallet_snap: 4,
   endowment_networkAccess: 3,
+  endowment_assets: 3,
   endowment_webassembly: 4,
   endowment_transactionInsight: 4,
   endowment_cronjob: 4,

shared/constants/snaps/permissions.ts

@@ -10,6 +10,7 @@ export const EndowmentPermissions = Object.freeze({
   'endowment:page-settings': 'endowment:page-settings',
   'endowment:signature-insight': 'endowment:signature-insight',
   'endowment:name-lookup': 'endowment:name-lookup',
+  'endowment:assets': 'endowment:assets',
   ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
   'endowment:keyring': 'endowment:keyring',
   ///: END:ONLY_INCLUDE_IF

test/e2e/snaps/enums.js

@@ -1,3 +1,3 @@
 module.exports = {
-  TEST_SNAPS_WEBSITE_URL: 'https://metamask.github.io/snaps/test-snaps/2.18.0',
+  TEST_SNAPS_WEBSITE_URL: 'https://metamask.github.io/snaps/test-snaps/2.18.1',
 };

ui/components/app/metamask-template-renderer/safe-component-list.js

@@ -60,6 +60,7 @@ import {
 import { SnapAccountRedirect } from '../../../pages/snap-account-redirect';
 import { CreateNamedSnapAccount } from '../../multichain/create-named-snap-account';
 import SnapAuthorshipHeader from '../snaps/snap-authorship-header';
+import { Skeleton } from '../../component-library/skeleton';
 ///: END:ONLY_INCLUDE_IF
 
 export const safeComponentList = {
@@ -108,6 +109,7 @@ export const safeComponentList = {
   SnapUITooltip,
   span: 'span',
   Spinner,
+  Skeleton,
   Text,
   TextArea,
   TextField,

ui/components/app/snaps/snap-ui-image/snap-ui-image.tsx

@@ -5,13 +5,15 @@ export type SnapUIImageProps = {
   style?: React.CSSProperties;
   width?: string;
   height?: string;
+  borderRadius?: string;
 };
 
 export const SnapUIImage = ({
   value,
   width,
   height,
   style,
+  borderRadius,
 }: SnapUIImageProps) => {
   const src = `data:image/svg+xml;utf8,${encodeURIComponent(value)}`;
 
@@ -22,7 +24,7 @@ export const SnapUIImage = ({
       src={src}
       width={width}
       height={height}
-      style={style}
+      style={{ ...style, borderRadius }}
     />
   );
 };

ui/components/app/snaps/snap-ui-renderer/components/image.ts

@@ -1,9 +1,26 @@
 import { ImageElement } from '@metamask/snaps-sdk/jsx';
 import { UIComponentFactory } from './types';
 
+function generateBorderRadius(
+  borderRadius?: ImageElement['props']['borderRadius'],
+) {
+  switch (borderRadius) {
+    default:
+    case 'none':
+      return '0';
+
+    case 'medium':
+      return '6px';
+
+    case 'full':
+      return '50%';
+  }
+}
+
 export const image: UIComponentFactory<ImageElement> = ({ element }) => ({
   element: 'SnapUIImage',
   props: {
     value: element.props.src,
+    borderRadius: generateBorderRadius(element.props.borderRadius),
   },
 });

ui/components/app/snaps/snap-ui-renderer/components/index.ts

@@ -28,6 +28,7 @@ import { icon } from './icon';
 import { section } from './section';
 import { avatar } from './avatar';
 import { banner } from './banner';
+import { skeleton } from './skeleton';
 
 export const COMPONENT_MAPPING = {
   Box: box,
@@ -60,4 +61,5 @@ export const COMPONENT_MAPPING = {
   Selector: selector,
   Section: section,
   Banner: banner,
+  Skeleton: skeleton,
 };

ui/components/app/snaps/snap-ui-renderer/components/skeleton.ts

@@ -0,0 +1,21 @@
+import { SkeletonElement } from '@metamask/snaps-sdk/jsx';
+import { BorderRadius } from '../../../../../helpers/constants/design-system';
+import { mapSnapBorderRadiusToExtensionBorderRadius } from '../utils';
+import { UIComponentFactory } from './types';
+
+const DEFAULT_SKELETON_WIDTH = '100%';
+const DEFAULT_SKELETON_HEIGHT = 22;
+const DEFAULT_SKELETON_BORDER_RADIUS = BorderRadius.MD;
+
+export const skeleton: UIComponentFactory<SkeletonElement> = ({ element }) => {
+  return {
+    element: 'Skeleton',
+    props: {
+      width: element.props.width ?? DEFAULT_SKELETON_WIDTH,
+      height: element.props.height ?? DEFAULT_SKELETON_HEIGHT,
+      borderRadius: element.props.borderRadius
+        ? mapSnapBorderRadiusToExtensionBorderRadius(element.props.borderRadius)
+        : DEFAULT_SKELETON_BORDER_RADIUS,
+    },
+  };
+};

ui/components/app/snaps/snap-ui-renderer/utils.ts

@@ -5,7 +5,10 @@ import { sha256 } from '@noble/hashes/sha256';
 import { NonEmptyArray, bytesToHex, remove0x } from '@metamask/utils';
 import { unescape as unescapeEntities } from 'he';
 import { ChangeEvent as ReactChangeEvent } from 'react';
-import { BackgroundColor } from '../../../../helpers/constants/design-system';
+import {
+  BackgroundColor,
+  BorderRadius,
+} from '../../../../helpers/constants/design-system';
 import { COMPONENT_MAPPING } from './components';
 import { UIComponent } from './components/types';
 
@@ -156,3 +159,23 @@ export const mapToExtensionCompatibleColor = (color: string) => {
   };
   return color ? backgroundColorMapping[color] : undefined;
 };
+
+/**
+ * Map Snap custom size for border radius to extension compatible size.
+ *
+ * @param snapBorderRadius - Snap custom color.
+ * @returns String, representing border radius size from design system.
+ */
+export const mapSnapBorderRadiusToExtensionBorderRadius = (
+  snapBorderRadius: string | undefined,
+): BorderRadius => {
+  switch (snapBorderRadius) {
+    case 'none':
+    default:
+      return BorderRadius.none;
+    case 'medium':
+      return BorderRadius.MD;
+    case 'full':
+      return BorderRadius.full;
+  }
+};

ui/helpers/utils/permission.js

@@ -523,6 +523,14 @@ export const PERMISSION_DESCRIPTIONS = deepFreeze({
     leftIcon: IconName.Search,
     weight: PermissionWeight.endowment_nameLookup,
   }),
+  [EndowmentPermissions['endowment:assets']]: ({ t, subjectName }) => ({
+    label: t('permission_assets'),
+    description: t('permission_assetsDescription', [
+      getSnapNameComponent(subjectName),
+    ]),
+    leftIcon: IconName.Coin,
+    weight: PermissionWeight.endowment_assets,
+  }),
   [EndowmentPermissions['endowment:signature-insight']]: ({
     t,
     permissionValue,