chore: Bump Snaps dependencies

.yarn/patches/@metamask-snaps-controllers-npm-9.4.0-7c3abbbea6.patch → .yarn/patches/@metamask-snaps-controllers-npm-9.5.0-8b21e3c072.patch

@@ -1,5 +1,5 @@
 diff --git a/package.json b/package.json
-index 9464ffc2614c6c648051df5cb5c9c9b9e651a831..5b1bcb34b8167cf6bbc5b2854b1f196e0fa0204f 100644
+index e738c058c38f8bc5c14bab9644ecced32eefa075..9aba0d03fc642572fcbdc2c791e335df72d70f35 100644
 --- a/package.json
 +++ b/package.json
 @@ -9,7 +9,7 @@

package.json

@@ -227,7 +227,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.2.1",
+    "@metamask/snaps-sdk": "^6.3.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",
@@ -260,8 +260,8 @@
     "@solana/web3.js/rpc-websockets": "^8.0.1",
     "@metamask/network-controller@npm:^19.0.0": "patch:@metamask/network-controller@npm%3A20.2.0#~/.yarn/patches/@metamask-network-controller-npm-20.2.0-98b1a5ae59.patch",
     "@metamask/gas-fee-controller@npm:^15.1.1": "patch:@metamask/gas-fee-controller@npm%3A15.1.2#~/.yarn/patches/@metamask-gas-fee-controller-npm-15.1.2-db4d2976aa.patch",
-    "@metamask/snaps-controllers@npm:^8.1.1": "patch:@metamask/snaps-controllers@npm%3A9.4.0#~/.yarn/patches/@metamask-snaps-controllers-npm-9.4.0-7c3abbbea6.patch",
-    "@metamask/snaps-controllers@npm:^9.4.0": "patch:@metamask/snaps-controllers@npm%3A9.4.0#~/.yarn/patches/@metamask-snaps-controllers-npm-9.4.0-7c3abbbea6.patch",
+    "@metamask/snaps-controllers@npm:^8.1.1": "patch:@metamask/snaps-controllers@npm%3A9.5.0#~/.yarn/patches/@metamask-snaps-controllers-npm-9.5.0-8b21e3c072.patch",
+    "@metamask/snaps-controllers@npm:^9.5.0": "patch:@metamask/snaps-controllers@npm%3A9.5.0#~/.yarn/patches/@metamask-snaps-controllers-npm-9.5.0-8b21e3c072.patch",
     "@metamask/nonce-tracker@npm:^5.0.0": "patch:@metamask/nonce-tracker@npm%3A5.0.0#~/.yarn/patches/@metamask-nonce-tracker-npm-5.0.0-d81478218e.patch",
     "@metamask/keyring-controller@npm:^16.0.0": "patch:@metamask/keyring-controller@npm%3A17.1.1#~/.yarn/patches/@metamask-keyring-controller-npm-17.1.1-098cb41930.patch",
     "@metamask/keyring-controller@npm:^17.1.0": "patch:@metamask/keyring-controller@npm%3A17.1.1#~/.yarn/patches/@metamask-keyring-controller-npm-17.1.1-098cb41930.patch",
@@ -351,10 +351,10 @@
     "@metamask/selected-network-controller": "^15.0.2",
     "@metamask/signature-controller": "^18.1.0",
     "@metamask/smart-transactions-controller": "12.0.1",
-    "@metamask/snaps-controllers": "^9.4.0",
+    "@metamask/snaps-controllers": "^9.5.0",
     "@metamask/snaps-execution-environments": "^6.6.2",
     "@metamask/snaps-rpc-methods": "^11.0.0",
-    "@metamask/snaps-sdk": "^6.2.1",
+    "@metamask/snaps-sdk": "^6.3.0",
     "@metamask/snaps-utils": "^8.0.1",
     "@metamask/transaction-controller": "^35.2.0",
     "@metamask/user-operation-controller": "^13.0.0",

test/e2e/snaps/enums.js

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

test/e2e/snaps/test-snap-jsx.spec.js

@@ -79,7 +79,7 @@ describe('Test Snap JSX', function () {
         // check for count zero
         await driver.waitForSelector({
           text: '0',
-          tag: 'b',
+          tag: 'p',
         });
 
         // click increment twice
@@ -88,7 +88,7 @@ describe('Test Snap JSX', function () {
         // wait for count to be 1
         await driver.waitForSelector({
           text: '1',
-          tag: 'b',
+          tag: 'p',
         });
       },
     );

ui/components/app/app-components.scss

@@ -23,7 +23,9 @@
 @import 'snaps/snap-ui-renderer/index';
 @import 'snaps/snap-ui-markdown/index';
 @import 'snaps/snap-ui-button/index';
+@import 'snaps/snap-ui-input/index';
 @import 'snaps/snap-ui-file-input/index';
+@import 'snaps/snap-ui-selector/index';
 @import 'snaps/snap-delineator/index';
 @import 'snaps/snap-home-menu/index';
 @import 'snaps/snap-list-item/index';

ui/components/app/metamask-template-renderer/metamask-template-renderer.js

@@ -33,7 +33,9 @@ function renderElement(element) {
 function getPropComponents(components) {
   return Object.entries(components).reduce((accumulator, [key, component]) => {
     if (component) {
-      accumulator[key] = renderElement(component);
+      accumulator[key] = Array.isArray(component)
+        ? component.map(renderElement)
+        : renderElement(component);
     }
     return accumulator;
   }, {});

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

@@ -26,6 +26,7 @@ import Spinner from '../../ui/spinner';
 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 { SnapUIIcon } from '../snaps/snap-ui-icon';
 import { SnapUIImage } from '../snaps/snap-ui-image';
 import { SnapUIFileInput } from '../snaps/snap-ui-file-input';
 import { SnapUIInput } from '../snaps/snap-ui-input';
@@ -36,6 +37,7 @@ import { SnapUIRadioGroup } from '../snaps/snap-ui-radio-group';
 import { SnapUICheckbox } from '../snaps/snap-ui-checkbox';
 import { SnapUITooltip } from '../snaps/snap-ui-tooltip';
 import { SnapUICard } from '../snaps/snap-ui-card';
+import { SnapUISelector } from '../snaps/snap-ui-selector';
 import { SnapFooterButton } from '../snaps/snap-footer-button';
 ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
 import { SnapAccountSuccessMessage } from '../../../pages/confirmations/components/snap-account-success-message';
@@ -80,6 +82,7 @@ export const safeComponentList = {
   SnapDelineator,
   SnapUIMarkdown,
   SnapUILink,
+  SnapUIIcon,
   SnapUIImage,
   Spinner,
   ConfirmInfoRow,
@@ -94,6 +97,7 @@ export const safeComponentList = {
   SnapUICheckbox,
   SnapUITooltip,
   SnapUICard,
+  SnapUISelector,
   SnapFooterButton,
   FormTextField,
   ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)

ui/components/app/snaps/snap-footer-button/snap-footer-button.tsx

@@ -50,7 +50,7 @@ export const SnapFooterButton: FunctionComponent<SnapFooterButtonProps> = ({
       }}
     >
       {isSnapAction && (
-        <SnapIcon snapId={snapId} avatarSize={IconSize.Xs} marginRight={2} />
+        <SnapIcon snapId={snapId} avatarSize={IconSize.Sm} marginRight={2} />
       )}
       {children}
     </Button>

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

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

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Icon, IconName, IconSize } from '../../../component-library/icon';
+import { IconColor } from '../../../../helpers/constants/design-system';
+
+export type SnapUIIconProps = {
+  name: IconName;
+  color?: IconColor;
+  size?: IconSize;
+};
+
+export const SnapUIIcon = ({ name, color, size }: SnapUIIconProps) => {
+  return (
+    <Icon
+      className="snap-ui-renderer__icon"
+      name={name}
+      size={size}
+      color={color}
+    />
+  );
+};

ui/components/app/snaps/snap-ui-input/index.scss

@@ -0,0 +1,13 @@
+.snap-ui-renderer__input {
+  .snap-ui-button {
+    &:has(.snap-ui-renderer__image) {
+      display: flex;
+    }
+
+    .snap-ui-renderer__image {
+      vertical-align: middle;
+      max-height: 20px;
+      max-width: 20px;
+    }
+  }
+}

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

@@ -1,13 +1,22 @@
-import { ButtonElement } from '@metamask/snaps-sdk/jsx';
+import { ButtonElement, JSXElement } from '@metamask/snaps-sdk/jsx';
+import { getJsxChildren } from '@metamask/snaps-utils';
+import { NonEmptyArray } from '@metamask/utils';
+import { mapTextToTemplate } from '../utils';
 import { UIComponentFactory } from './types';
 
-export const button: UIComponentFactory<ButtonElement> = ({ element }) => ({
+export const button: UIComponentFactory<ButtonElement> = ({
+  element,
+  ...params
+}) => ({
   element: 'SnapUIButton',
   props: {
     type: element.props.type,
     variant: element.props.variant,
     name: element.props.name,
     disabled: element.props.disabled,
   },
-  children: element.props.children,
+  children: mapTextToTemplate(
+    getJsxChildren(element) as NonEmptyArray<string | JSXElement>,
+    params,
+  ),
 });

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

@@ -6,15 +6,21 @@ import {
   DropdownElement,
   RadioGroupElement,
   CheckboxElement,
+  SelectorElement,
 } from '@metamask/snaps-sdk/jsx';
 import { getJsxChildren } from '@metamask/snaps-utils';
 import { button as buttonFn } from './button';
 import { dropdown as dropdownFn } from './dropdown';
 import { radioGroup as radioGroupFn } from './radioGroup';
 import { checkbox as checkboxFn } from './checkbox';
+import { selector as selectorFn } from './selector';
 import { UIComponentFactory, UIComponentParams } from './types';
 
-export const field: UIComponentFactory<FieldElement> = ({ element, form }) => {
+export const field: UIComponentFactory<FieldElement> = ({
+  element,
+  form,
+  ...params
+}) => {
   // For fields we don't render the Input itself, we just adapt SnapUIInput.
   const children = getJsxChildren(element);
   const child = children[0] as JSXElement;
@@ -40,7 +46,10 @@ export const field: UIComponentFactory<FieldElement> = ({ element, form }) => {
       const button = children[1] as ButtonElement;
       const buttonMapped =
         button &&
-        buttonFn({ element: button } as UIComponentParams<ButtonElement>);
+        buttonFn({
+          ...params,
+          element: button,
+        } as UIComponentParams<ButtonElement>);
 
       return {
         element: 'SnapUIInput',
@@ -120,6 +129,24 @@ export const field: UIComponentFactory<FieldElement> = ({ element, form }) => {
       };
     }
 
+    case 'Selector': {
+      const selector = child as SelectorElement;
+      const selectorMapped = selectorFn({
+        ...params,
+        element: selector,
+      } as UIComponentParams<SelectorElement>);
+      return {
+        ...selectorMapped,
+        element: 'SnapUISelector',
+        props: {
+          ...selectorMapped.props,
+          label: element.props.label,
+          form,
+          error: element.props.error,
+        },
+      };
+    }
+
     default:
       throw new Error(`Invalid Field child: ${child.type}`);
   }

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

@@ -7,7 +7,8 @@ import {
   Display,
   FlexDirection,
 } from '../../../../../helpers/constants/design-system';
-import { UIComponentFactory } from './types';
+import { UIComponentFactory, UIComponentParams } from './types';
+import { button as buttonFn } from './button';
 
 export const DEFAULT_FOOTER = {
   element: 'Box',
@@ -52,20 +53,24 @@ export const footer: UIComponentFactory<FooterElement> = ({
   element,
   t,
   onCancel,
+  ...params
 }) => {
   const defaultButtons = getDefaultButtons(element, t, onCancel);
 
   const footerChildren = (getJsxChildren(element) as ButtonElement[]).map(
-    (children) => {
-      const { children: buttonChildren, ...props } = children.props;
+    (children, index) => {
+      const buttonMapped = buttonFn({
+        ...params,
+        element: children,
+      } as UIComponentParams<ButtonElement>);
       return {
         element: 'SnapFooterButton',
-        key: `snap-footer-button-${props.name}`,
+        key: `snap-footer-button-${buttonMapped.props?.name ?? index}`,
         props: {
-          ...props,
+          ...buttonMapped.props,
           isSnapAction: true,
         },
-        children: buttonChildren,
+        children: buttonMapped.children,
       };
     },
   );

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

@@ -0,0 +1,44 @@
+import { IconElement } from '@metamask/snaps-sdk/jsx';
+import { IconColor } from '../../../../../helpers/constants/design-system';
+import { IconName, IconSize } from '../../../../component-library';
+import { UIComponentFactory } from './types';
+
+const ICON_NAMES = new Set(Object.values(IconName));
+
+export const icon: UIComponentFactory<IconElement> = ({ element }) => {
+  const getIconName = () => {
+    if (ICON_NAMES.has(element.props.name as IconName)) {
+      return element.props.name as IconName;
+    }
+    return IconName.Danger;
+  };
+
+  const getIconColor = () => {
+    switch (element.props.color) {
+      case 'muted':
+        return IconColor.iconMuted;
+      case 'primary':
+        return IconColor.primaryDefault;
+      default:
+        return IconColor.iconDefault;
+    }
+  };
+
+  const getIconSize = () => {
+    switch (element.props.size) {
+      case 'md':
+        return IconSize.Md;
+      default:
+        return IconSize.Inherit;
+    }
+  };
+
+  return {
+    element: 'SnapUIIcon',
+    props: {
+      name: getIconName(),
+      color: getIconColor(),
+      size: getIconSize(),
+    },
+  };
+};

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

@@ -23,13 +23,16 @@ import { tooltip } from './tooltip';
 import { card } from './card';
 import { footer } from './footer';
 import { container } from './container';
+import { selector } from './selector';
+import { icon } from './icon';
 
 export const COMPONENT_MAPPING = {
   Box: box,
   Heading: heading,
   Text: text,
   Divider: divider,
   Spinner: spinner,
+  Icon: icon,
   Image: image,
   Copyable: copyable,
   Row: row,
@@ -50,4 +53,5 @@ export const COMPONENT_MAPPING = {
   Card: card,
   Footer: footer,
   Container: container,
+  Selector: selector,
 };

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

@@ -0,0 +1,41 @@
+import {
+  JSXElement,
+  SelectorElement,
+  SelectorOptionElement,
+} from '@metamask/snaps-sdk/jsx';
+import { getJsxChildren } from '@metamask/snaps-utils';
+
+import { mapToTemplate } from '../utils';
+import { UIComponentFactory } from './types';
+
+export const selector: UIComponentFactory<SelectorElement> = ({
+  element,
+  form,
+  ...params
+}) => {
+  const children = getJsxChildren(element) as SelectorOptionElement[];
+
+  const options = children.map((child) => child.props.value);
+
+  const optionComponents = children.map((child) =>
+    mapToTemplate({
+      ...params,
+      form,
+      element: child.props.children as JSXElement,
+    }),
+  );
+
+  return {
+    element: 'SnapUISelector',
+    props: {
+      id: element.props.name,
+      name: element.props.name,
+      title: element.props.title,
+      form,
+      options,
+    },
+    propComponents: {
+      optionComponents,
+    },
+  };
+};