MetaMask · FrederikBolding · Dec 20, 2024 · Dec 17, 2024 · Dec 17, 2024 · Dec 17, 2024
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.10.0/index.html
+      - IFRAME_EXECUTION_ENVIRONMENT_URL: https://execution.metamask.io/iframe/6.11.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.10.0/index.html
+      - IFRAME_EXECUTION_ENVIRONMENT_URL: https://execution.metamask.io/iframe/6.11.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
@@ -71,7 +71,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.10.0/index.html
+      - IFRAME_EXECUTION_ENVIRONMENT_URL: https://execution.metamask.io/iframe/6.11.0/index.html
       - SUPPORT_LINK: https://support.metamask.io/
       - SUPPORT_REQUEST_LINK: https://support.metamask.io/
       - INFURA_ENV_KEY_REF: INFURA_FLASK_PROJECT_ID
@@ -95,7 +95,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.10.0/index.html
+      - IFRAME_EXECUTION_ENVIRONMENT_URL: https://execution.metamask.io/iframe/6.11.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
@@ -225,7 +225,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": "^6.13.0",
+    "@metamask/snaps-sdk": "^6.14.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",
@@ -331,7 +331,7 @@
     "@metamask/polling-controller": "^12.0.1",
     "@metamask/post-message-stream": "^8.0.0",
     "@metamask/ppom-validator": "0.36.0",
-    "@metamask/preinstalled-example-snap": "^0.2.0",
+    "@metamask/preinstalled-example-snap": "^0.3.0",
     "@metamask/profile-sync-controller": "^3.1.1",
     "@metamask/providers": "^18.2.0",
     "@metamask/queued-request-controller": "^7.0.1",
@@ -343,11 +343,11 @@
     "@metamask/selected-network-controller": "^19.0.0",
     "@metamask/signature-controller": "^23.1.0",
     "@metamask/smart-transactions-controller": "^16.0.0",
-    "@metamask/snaps-controllers": "^9.15.0",
-    "@metamask/snaps-execution-environments": "^6.10.0",
-    "@metamask/snaps-rpc-methods": "^11.7.0",
-    "@metamask/snaps-sdk": "^6.13.0",
-    "@metamask/snaps-utils": "^8.6.1",
+    "@metamask/snaps-controllers": "^9.16.0",
+    "@metamask/snaps-execution-environments": "^6.11.0",
+    "@metamask/snaps-rpc-methods": "^11.8.0",
+    "@metamask/snaps-sdk": "^6.14.0",
+    "@metamask/snaps-utils": "^8.7.0",
     "@metamask/solana-wallet-snap": "^1.0.4",
     "@metamask/transaction-controller": "^42.0.0",
     "@metamask/user-operation-controller": "^21.0.0",

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

diff --git a/ui/components/app/metamask-template-renderer/safe-component-list.js b/ui/components/app/metamask-template-renderer/safe-component-list.js
@@ -33,6 +33,7 @@ import { Copyable } from '../snaps/copyable';
 import { SnapDelineator } from '../snaps/snap-delineator';
 import { SnapUIAddress } from '../snaps/snap-ui-address';
 import { SnapUIAvatar } from '../snaps/snap-ui-avatar';
+import { SnapUIBanner } from '../snaps/snap-ui-banner';
 import { SnapUIButton } from '../snaps/snap-ui-button';
 import { SnapUICard } from '../snaps/snap-ui-card';
 import { SnapUICheckbox } from '../snaps/snap-ui-checkbox';
@@ -89,6 +90,7 @@ export const safeComponentList = {
   SnapDelineator,
   SnapUIAddress,
   SnapUIAvatar,
+  SnapUIBanner,
   SnapUIButton,
   SnapUICard,
   SnapUICheckbox,

@@ -0,0 +1 @@
+export * from './snap-settings-renderer';
@@ -0,0 +1,81 @@
+import React, { FunctionComponent, useEffect, useMemo } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useLocation } from 'react-router-dom';
+import { useI18nContext } from '../../../../hooks/useI18nContext';
+
+import { deleteInterface } from '../../../../store/actions';
+import { Box, Text } from '../../../component-library';
+import {
+  BackgroundColor,
+  BlockSize,
+  TextVariant,
+} from '../../../../helpers/constants/design-system';
+import { SnapDelineator } from '../snap-delineator';
+import { getSnapMetadata } from '../../../../selectors';
+import { DelineatorType } from '../../../../helpers/constants/snaps';
+import { Copyable } from '../copyable';
+import { SnapUIRenderer } from '../snap-ui-renderer';
+import { useSnapSettings } from '../../../../hooks/snaps/useSnapSettings';
+import { decodeSnapIdFromPathname } from '../../../../helpers/utils/snaps';
+
+type SnapSettingsRendererProps = {
+  snapId: string;
+};
+
+export const SnapSettingsRenderer: FunctionComponent<
+  SnapSettingsRendererProps
+> = () => {
+  const { pathname } = useLocation();
+  const dispatch = useDispatch();
+  const t = useI18nContext();
+
+  const snapId = useMemo(() => decodeSnapIdFromPathname(pathname), [pathname]);
+
+  const { name: snapName } = useSelector((state) =>
+    getSnapMetadata(state, snapId),
+  );
+
+  const { data, error, loading } = useSnapSettings({
+    snapId,
+  });
+
+  const interfaceId = !loading && !error ? data?.id : undefined;
+
+  useEffect(() => {
+    return () => {
+      interfaceId && dispatch(deleteInterface(interfaceId));
+    };
+  }, [interfaceId]);
+
+  if (!snapId) {
+    return null;
+  }
+
+  return (
+    <Box
+      height={BlockSize.Full}
+      width={BlockSize.Full}
+      backgroundColor={BackgroundColor.backgroundDefault}
+    >
+      {error && (
+        <Box height={BlockSize.Full} padding={4}>
+          <SnapDelineator snapName={snapName} type={DelineatorType.Error}>
+            <Text variant={TextVariant.bodySm} marginBottom={4}>
+              {t('snapsUIError', [<b key="0">{snapName}</b>])}
+            </Text>
+            <Copyable text={error.message} />
+          </SnapDelineator>
+        </Box>
+      )}
+      {(interfaceId || loading) && (
+        <SnapUIRenderer
+          snapId={snapId}
+          interfaceId={interfaceId}
+          isLoading={loading}
+          useDelineator={false}
+          contentBackgroundColor={BackgroundColor.backgroundDefault}
+        />
+      )}
+    </Box>
+  );
+};
@@ -0,0 +1 @@
+export * from './snap-ui-banner';
@@ -0,0 +1,33 @@
+import React, { ReactNode } from 'react';
+import { SnapUIBanner } from './snap-ui-banner';
+import { BannerAlertSeverity } from '../../../component-library';
+
+export default {
+  title: 'Components/App/Snaps/SnapUIBanner',
+  component: SnapUIBanner,
+  argTypes: {
+    title: {
+      control: 'text',
+    },
+    severity: {
+      control: 'text',
+    },
+    children: {
+      control: 'text',
+    },
+  },
+};
+
+export const DefaultStory = (args: {
+  title: string;
+  severity: BannerAlertSeverity;
+  children: ReactNode;
+}) => <SnapUIBanner {...args} />;
+
+DefaultStory.storyName = 'Default';
+
+DefaultStory.args = {
+  title: 'Banner title',
+  severity: 'info',
+  children: 'Banner content.',
+};
@@ -0,0 +1,19 @@
+import React, { FunctionComponent } from 'react';
+import { BannerAlert, BannerAlertSeverity } from '../../../component-library';
+
+export type SnapUIBannerProps = {
+  severity: BannerAlertSeverity | undefined;
+  title: string;
+};
+
+export const SnapUIBanner: FunctionComponent<SnapUIBannerProps> = ({
+  children,
+  severity,
+  title,
+}) => {
+  return (
+    <BannerAlert severity={severity} title={title}>
+      {children}
+    </BannerAlert>
+  );
+};
@@ -1,7 +1,12 @@
 import React, { FunctionComponent, MouseEvent as ReactMouseEvent } from 'react';
 import classnames from 'classnames';
 import { ButtonType, UserInputEventType } from '@metamask/snaps-sdk';
-import { ButtonLinkProps, Text } from '../../../component-library';
+import {
+  ButtonLinkProps,
+  Icon,
+  IconName,
+  Text,
+} from '../../../component-library';
 import {
   FontWeight,
   TextColor,
@@ -10,6 +15,8 @@ import { useSnapInterfaceContext } from '../../../../contexts/snaps';
 
 export type SnapUIButtonProps = {
   name?: string;
+  textVariant: ButtonLinkProps<'button'>['variant'];
+  loading?: boolean;
 };
 
 const COLORS = {
@@ -26,7 +33,9 @@ export const SnapUIButton: FunctionComponent<
   type = ButtonType.Button,
   variant = 'primary',
   disabled = false,
+  loading = false,
   className = '',
+  textVariant,
   ...props
 }) => {
   const { handleEvent } = useSnapInterfaceContext();
@@ -58,9 +67,17 @@ export const SnapUIButton: FunctionComponent<
       onClick={handleClick}
       color={color}
       disabled={disabled}
+      variant={textVariant}
       {...props}
     >
-      {children}
+      {loading ? (
+        <Icon
+          name={IconName.Loading}
+          style={{ animation: 'spin 1.2s linear infinite' }}
+        />
+      ) : (
+        children
+      )}
     </Text>
   );
 };
@@ -10,6 +10,8 @@ import {
   Button,
   ButtonProps,
   ButtonSize,
+  Icon,
+  IconName,
   IconSize,
 } from '../../../component-library';
 import {
@@ -35,6 +37,7 @@ export const SnapUIFooterButton: FunctionComponent<
   name,
   children,
   disabled = false,
+  loading = false,
   isSnapAction = false,
   type,
   variant = ButtonVariant.Primary,
@@ -85,10 +88,17 @@ export const SnapUIFooterButton: FunctionComponent<
         flexDirection: FlexDirection.Row,
       }}
     >
-      {isSnapAction && !hideSnapBranding && (
+      {isSnapAction && !hideSnapBranding && !loading && (
         <SnapIcon snapId={snapId} avatarSize={IconSize.Sm} marginRight={2} />
       )}
-      {children}
+      {loading ? (
+        <Icon
+          name={IconName.Loading}
+          style={{ animation: 'spin 1.2s linear infinite' }}
+        />
+      ) : (
+        children
+      )}
     </Button>
   );
 };
@@ -0,0 +1,20 @@
+import { BannerElement, JSXElement } from '@metamask/snaps-sdk/jsx';
+import { getJsxChildren } from '@metamask/snaps-utils';
+import { mapToTemplate } from '../utils';
+import { UIComponentFactory } from './types';
+
+export const banner: UIComponentFactory<BannerElement> = ({
+  element,
+  ...params
+}) => {
+  return {
+    element: 'SnapUIBanner',
+    children: getJsxChildren(element).map((children) =>
+      mapToTemplate({ element: children as JSXElement, ...params }),
+    ),
+    props: {
+      title: element.props.title,
+      severity: element.props.severity,
+    },
+  };
+};
@@ -2,6 +2,7 @@ import { ButtonElement, JSXElement } from '@metamask/snaps-sdk/jsx';
 import { getJsxChildren } from '@metamask/snaps-utils';
 import { NonEmptyArray } from '@metamask/utils';
 import { mapTextToTemplate } from '../utils';
+import { TextVariant } from '../../../../../helpers/constants/design-system';
 import { UIComponentFactory } from './types';
 
 export const button: UIComponentFactory<ButtonElement> = ({
@@ -15,6 +16,9 @@ export const button: UIComponentFactory<ButtonElement> = ({
     variant: element.props.variant,
     name: element.props.name,
     disabled: element.props.disabled,
+    loading: element.props.loading,
+    textVariant:
+      element.props.size === 'sm' ? TextVariant.bodySm : TextVariant.bodyMd,
   },
   children: mapTextToTemplate(
     getJsxChildren(element) as NonEmptyArray<string | JSXElement>,

@@ -27,6 +27,7 @@ import { selector } from './selector';
 import { icon } from './icon';
 import { section } from './section';
 import { avatar } from './avatar';
+import { banner } from './banner';
 
 export const COMPONENT_MAPPING = {
   Box: box,
@@ -58,4 +59,5 @@ export const COMPONENT_MAPPING = {
   Container: container,
   Selector: selector,
   Section: section,
+  Banner: banner,
 };