chore: Bump Snaps packages

app/scripts/metamask-controller.js

@@ -1479,6 +1479,7 @@ export default class MetamaskController extends EventEmitter {
           `${this.phishingController.name}:testOrigin`,
           `${this.approvalController.name}:hasRequest`,
           `${this.approvalController.name}:acceptRequest`,
+          `${this.snapController.name}:get`,
         ],
       });
 
@@ -5975,6 +5976,19 @@ export default class MetamaskController extends EventEmitter {
           this.controllerMessenger,
           'SnapController:getAll',
         ),
+        getCurrencyRate: (currency) => {
+          const rate = this.multichainRatesController.state.rates[currency];
+          const { fiatCurrency } = this.multichainRatesController.state;
+
+          if (!rate) {
+            return undefined;
+          }
+
+          return {
+            ...rate,
+            currency: fiatCurrency,
+          };
+        },
         ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
         hasPermission: this.permissionController.hasPermission.bind(
           this.permissionController,

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.7.0/index.html
+      - IFRAME_EXECUTION_ENVIRONMENT_URL: https://execution.metamask.io/iframe/6.9.1/index.html
       - ACCOUNT_SNAPS_DIRECTORY_URL: https://snaps.metamask.io/account-management
     # Main build uses the default browser manifest
     manifestOverrides: false
@@ -46,7 +46,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.7.0/index.html
+      - IFRAME_EXECUTION_ENVIRONMENT_URL: https://execution.metamask.io/iframe/6.9.1/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
@@ -67,7 +67,7 @@ buildTypes:
       - SEGMENT_FLASK_WRITE_KEY
       - ALLOW_LOCAL_SNAPS: true
       - REQUIRE_SNAPS_ALLOWLIST: false
-      - IFRAME_EXECUTION_ENVIRONMENT_URL: https://execution.metamask.io/iframe/6.7.0/index.html
+      - IFRAME_EXECUTION_ENVIRONMENT_URL: https://execution.metamask.io/iframe/6.9.1/index.html
       - SUPPORT_LINK: https://support.metamask.io/
       - SUPPORT_REQUEST_LINK: https://support.metamask.io/
       - INFURA_ENV_KEY_REF: INFURA_FLASK_PROJECT_ID
@@ -90,7 +90,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.7.0/index.html
+      - IFRAME_EXECUTION_ENVIRONMENT_URL: https://execution.metamask.io/iframe/6.9.1/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

package.json

@@ -229,7 +229,7 @@
     "semver@7.3.8": "^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": "^6.5.1",
+    "@metamask/snaps-sdk": "^6.9.0",
     "@swc/types@0.1.5": "^0.1.6",
     "@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",
@@ -264,8 +264,7 @@
     "@metamask/network-controller@npm:^17.0.0": "patch:@metamask/network-controller@npm%3A21.0.0#~/.yarn/patches/@metamask-network-controller-npm-21.0.0-559aa8e395.patch",
     "@metamask/network-controller@npm:^19.0.0": "patch:@metamask/network-controller@npm%3A21.0.0#~/.yarn/patches/@metamask-network-controller-npm-21.0.0-559aa8e395.patch",
     "@metamask/network-controller@npm:^20.0.0": "patch:@metamask/network-controller@npm%3A21.0.0#~/.yarn/patches/@metamask-network-controller-npm-21.0.0-559aa8e395.patch",
-    "path-to-regexp": "1.9.0",
-    "@metamask/snaps-utils@npm:^8.1.1": "patch:@metamask/snaps-utils@npm%3A8.1.1#~/.yarn/patches/@metamask-snaps-utils-npm-8.1.1-7d5dd6a26a.patch"
+    "path-to-regexp": "1.9.0"
   },
   "dependencies": {
     "@babel/runtime": "patch:@babel/runtime@npm%3A7.24.0#~/.yarn/patches/@babel-runtime-npm-7.24.0-7eb1dd11a2.patch",
@@ -342,7 +341,7 @@
     "@metamask/phishing-controller": "^12.0.1",
     "@metamask/post-message-stream": "^8.0.0",
     "@metamask/ppom-validator": "0.34.0",
-    "@metamask/preinstalled-example-snap": "^0.1.0",
+    "@metamask/preinstalled-example-snap": "^0.2.0",
     "@metamask/profile-sync-controller": "^0.9.7",
     "@metamask/providers": "^14.0.2",
     "@metamask/queued-request-controller": "^2.0.0",
@@ -353,11 +352,11 @@
     "@metamask/selected-network-controller": "^18.0.1",
     "@metamask/signature-controller": "^19.1.0",
     "@metamask/smart-transactions-controller": "^13.0.0",
-    "@metamask/snaps-controllers": "^9.7.0",
-    "@metamask/snaps-execution-environments": "^6.7.2",
-    "@metamask/snaps-rpc-methods": "^11.1.1",
-    "@metamask/snaps-sdk": "^6.5.1",
-    "@metamask/snaps-utils": "patch:@metamask/snaps-utils@npm%3A8.1.1#~/.yarn/patches/@metamask-snaps-utils-npm-8.1.1-7d5dd6a26a.patch",
+    "@metamask/snaps-controllers": "^9.11.1",
+    "@metamask/snaps-execution-environments": "^6.9.1",
+    "@metamask/snaps-rpc-methods": "^11.5.0",
+    "@metamask/snaps-sdk": "^6.9.0",
+    "@metamask/snaps-utils": "^8.4.1",
     "@metamask/transaction-controller": "^37.2.0",
     "@metamask/user-operation-controller": "^13.0.0",
     "@metamask/utils": "^9.3.0",

test/e2e/snaps/enums.js

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

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

@@ -43,6 +43,7 @@ import { SnapUICheckbox } from '../snaps/snap-ui-checkbox';
 import { SnapUITooltip } from '../snaps/snap-ui-tooltip';
 import { SnapUICard } from '../snaps/snap-ui-card';
 import { SnapUIAddress } from '../snaps/snap-ui-address';
+import { SnapUIAvatar } from '../snaps/snap-ui-avatar';
 import { SnapUISelector } from '../snaps/snap-ui-selector';
 import { SnapUIFooterButton } from '../snaps/snap-ui-footer-button';
 ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
@@ -106,6 +107,7 @@ export const safeComponentList = {
   SnapUICard,
   SnapUISelector,
   SnapUIAddress,
+  SnapUIAvatar,
   SnapUIFooterButton,
   FormTextField,
   ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)

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

@@ -1,5 +1,4 @@
 import React, { useMemo } from 'react';
-import { useSelector } from 'react-redux';
 import {
   CaipAccountId,
   isHexString,
@@ -11,32 +10,35 @@ import {
   Display,
   TextColor,
 } from '../../../../helpers/constants/design-system';
-import BlockieIdenticon from '../../../ui/identicon/blockieIdenticon';
-import Jazzicon from '../../../ui/jazzicon';
-import { getUseBlockie } from '../../../../selectors';
 import { shortenAddress } from '../../../../helpers/utils/util';
 import { toChecksumHexAddress } from '../../../../../shared/modules/hexstring-utils';
+import { SnapUIAvatar } from '../snap-ui-avatar';
 
 export type SnapUIAddressProps = {
   // The address must be a CAIP-10 string.
   address: string;
-  diameter?: number;
+  // This is not currently exposed to Snaps.
+  avatarSize?: 'xs' | 'sm' | 'md' | 'lg';
 };
 
 export const SnapUIAddress: React.FunctionComponent<SnapUIAddressProps> = ({
   address,
-  diameter = 32,
+  avatarSize = 'md',
 }) => {
-  const parsed = useMemo(() => {
+  const caipIdentifier = useMemo(() => {
     if (isHexString(address)) {
       // For legacy address inputs we assume them to be Ethereum addresses.
       // NOTE: This means the chain ID is not gonna be reliable.
-      return parseCaipAccountId(`eip155:1:${address}`);
+      return `eip155:1:${address}`;
     }
 
-    return parseCaipAccountId(address as CaipAccountId);
+    return address;
   }, [address]);
-  const useBlockie = useSelector(getUseBlockie);
+
+  const parsed = useMemo(
+    () => parseCaipAccountId(caipIdentifier as CaipAccountId),
+    [caipIdentifier],
+  );
 
   // For EVM addresses, we make sure they are checksummed.
   const transformedAddress =
@@ -47,20 +49,7 @@ export const SnapUIAddress: React.FunctionComponent<SnapUIAddressProps> = ({
 
   return (
     <Box display={Display.Flex} alignItems={AlignItems.center} gap={2}>
-      {useBlockie ? (
-        <BlockieIdenticon
-          address={parsed.address}
-          diameter={diameter}
-          borderRadius="50%"
-        />
-      ) : (
-        <Jazzicon
-          namespace={parsed.chain.namespace}
-          address={parsed.address}
-          diameter={diameter}
-          style={{ display: 'flex' }}
-        />
-      )}
+      <SnapUIAvatar address={caipIdentifier} size={avatarSize} />
       <Text color={TextColor.inherit}>{shortenedAddress}</Text>
     </Box>
   );

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

@@ -0,0 +1 @@
+export * from './snap-ui-avatar';

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

@@ -0,0 +1,44 @@
+import React, { useMemo } from 'react';
+import { useSelector } from 'react-redux';
+import { CaipAccountId, parseCaipAccountId } from '@metamask/utils';
+import BlockieIdenticon from '../../../ui/identicon/blockieIdenticon';
+import Jazzicon from '../../../ui/jazzicon';
+import { getUseBlockie } from '../../../../selectors';
+
+export const DIAMETERS: Record<string, number> = {
+  xs: 16,
+  sm: 24,
+  md: 32,
+  lg: 40,
+};
+
+export type SnapUIAvatarProps = {
+  // The address must be a CAIP-10 string.
+  address: string;
+  size?: 'xs' | 'sm' | 'md' | 'lg';
+};
+
+export const SnapUIAvatar: React.FunctionComponent<SnapUIAvatarProps> = ({
+  address,
+  size = 'md',
+}) => {
+  const parsed = useMemo(() => {
+    return parseCaipAccountId(address as CaipAccountId);
+  }, [address]);
+  const useBlockie = useSelector(getUseBlockie);
+
+  return useBlockie ? (
+    <BlockieIdenticon
+      address={parsed.address}
+      diameter={DIAMETERS[size]}
+      borderRadius="50%"
+    />
+  ) : (
+    <Jazzicon
+      namespace={parsed.chain.namespace}
+      address={parsed.address}
+      diameter={DIAMETERS[size]}
+      style={{ display: 'flex' }}
+    />
+  );
+};

ui/components/app/snaps/snap-ui-link/snap-ui-link.js

@@ -9,18 +9,39 @@ import {
   IconSize,
 } from '../../../component-library';
 import SnapLinkWarning from '../snap-link-warning';
+import useSnapNavigation from '../../../../hooks/snaps/useSnapNavigation';
 
 export const SnapUILink = ({ href, children }) => {
   const [isOpen, setIsOpen] = useState(false);
 
+  const isMetaMaskUrl = href.startsWith('metamask:');
+  const { navigate } = useSnapNavigation();
+
   const handleLinkClick = () => {
-    setIsOpen(true);
+    if (isMetaMaskUrl) {
+      navigate(href);
+    } else {
+      setIsOpen(true);
+    }
   };
 
   const handleModalClose = () => {
     setIsOpen(false);
   };
 
+  if (isMetaMaskUrl) {
+    return (
+      <ButtonLink
+        as="a"
+        size={ButtonLinkSize.Inherit}
+        className="snap-ui-link"
+        onClick={handleLinkClick}
+      >
+        {children}
+      </ButtonLink>
+    );
+  }
+
   return (
     <>
       <SnapLinkWarning isOpen={isOpen} onClose={handleModalClose} url={href} />

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

@@ -5,6 +5,6 @@ export const address: UIComponentFactory<AddressElement> = ({ element }) => ({
   element: 'SnapUIAddress',
   props: {
     address: element.props.address,
-    diameter: 16,
+    avatarSize: 'xs',
   },
 });

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

@@ -0,0 +1,9 @@
+import { AvatarElement } from '@metamask/snaps-sdk/jsx';
+import { UIComponentFactory } from './types';
+
+export const avatar: UIComponentFactory<AvatarElement> = ({ element }) => ({
+  element: 'SnapUIAvatar',
+  props: {
+    address: element.props.address,
+  },
+});

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

@@ -14,6 +14,7 @@ import { radioGroup as radioGroupFn } from './radioGroup';
 import { checkbox as checkboxFn } from './checkbox';
 import { selector as selectorFn } from './selector';
 import { UIComponentFactory, UIComponentParams } from './types';
+import { constructInputProps } from './input';
 
 export const field: UIComponentFactory<FieldElement> = ({
   element,
@@ -79,9 +80,7 @@ export const field: UIComponentFactory<FieldElement> = ({
           id: input.props.name,
           placeholder: input.props.placeholder,
           label: element.props.label,
-          textFieldProps: {
-            type: input.props.type,
-          },
+          ...constructInputProps(input.props),
           name: input.props.name,
           form,
           error: element.props.error !== undefined,

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

@@ -5,11 +5,24 @@ import {
 } from '../../../../../helpers/constants/design-system';
 import { UIComponentFactory } from './types';
 
+export const generateSize = (size: HeadingElement['props']['size']) => {
+  switch (size) {
+    case 'sm':
+      return TextVariant.headingSm;
+    case 'md':
+      return TextVariant.headingMd;
+    case 'lg':
+      return TextVariant.headingLg;
+    default:
+      return TextVariant.headingSm;
+  }
+};
+
 export const heading: UIComponentFactory<HeadingElement> = ({ element }) => ({
   element: 'Text',
   children: element.props.children,
   props: {
-    variant: TextVariant.headingSm,
+    variant: generateSize(element.props.size),
     overflowWrap: OverflowWrap.Anywhere,
   },
 });

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

@@ -26,6 +26,7 @@ import { container } from './container';
 import { selector } from './selector';
 import { icon } from './icon';
 import { section } from './section';
+import { avatar } from './avatar';
 
 export const COMPONENT_MAPPING = {
   Box: box,
@@ -38,6 +39,7 @@ export const COMPONENT_MAPPING = {
   Copyable: copyable,
   Row: row,
   Address: address,
+  Avatar: avatar,
   Button: button,
   FileInput: fileInput,
   Form: form,