fix(snap): Use default buttons when hideSnapsBranding is true (#2…

…7303) ## **Description** This PR makes the button not use the snap branding when the `hideSnapsBranding` flag is set to `true`. It also fixes an issue with the snap homepage footer having a margin when only one button is rendered in the footer. The `snap-footer-button` was also renamed `snap-ui-renderer__footer-button` to conform to the conventional naming of ui elements used in the `snap-ui-renderer` [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/27303?quickstart=1) ## **Related issues** Fixes: N/A ## **Manual testing steps** 1. Go to test-snaps 2. Try the preinstalled example snap ## **Screenshots/Recordings**  ### **Before** ![image](https://github.com/user-attachments/assets/31e1fd4b-bc6b-40d9-8d33-d941a8088479) ![image](https://github.com/user-attachments/assets/4b7551cf-0b11-4fd4-83a2-2369f5feecae) ### **After** ![image](https://github.com/user-attachments/assets/c31cbc9c-0cd0-45a4-b48c-e52cfece9a41) ![image](https://github.com/user-attachments/assets/96f6bfaa-7dc6-4033-ab94-913dad2a4060) ## **Pre-merge author checklist** - [ ] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Extension Coding Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md). - [ ] I've completed the PR template to the best of my ability - [ ] I’ve included tests if applicable - [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [ ] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **Pre-merge reviewer checklist** - [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.
MetaMask · Sep 20, 2024 · c323433 · c323433
1 parent 27d8a54
commit c323433
Show file tree

Hide file tree

Showing 10 changed files with 99 additions and 92 deletions.
diff --git a/ui/components/app/app-components.scss b/ui/components/app/app-components.scss
@@ -34,7 +34,7 @@
 @import 'snaps/insight-warnings/index';
 @import 'snaps/snap-authorship-header/index';
 @import 'snaps/snap-authorship-pill/index';
-@import 'snaps/snap-footer-button/index';
+@import 'snaps/snap-ui-footer-button/index';
 @import 'hold-to-reveal-button/index';
 @import 'home-notification/index';
 @import 'info-box/index';

diff --git a/ui/components/app/metamask-template-renderer/safe-component-list.js b/ui/components/app/metamask-template-renderer/safe-component-list.js
@@ -44,7 +44,7 @@ import { SnapUITooltip } from '../snaps/snap-ui-tooltip';
 import { SnapUICard } from '../snaps/snap-ui-card';
 import { SnapUIAddress } from '../snaps/snap-ui-address';
 import { SnapUISelector } from '../snaps/snap-ui-selector';
-import { SnapFooterButton } from '../snaps/snap-footer-button';
+import { SnapUIFooterButton } from '../snaps/snap-ui-footer-button';
 ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
 import { SnapAccountSuccessMessage } from '../../../pages/confirmations/components/snap-account-success-message';
 import { SnapAccountErrorMessage } from '../../../pages/confirmations/components/snap-account-error-message';
@@ -106,7 +106,7 @@ export const safeComponentList = {
   SnapUICard,
   SnapUISelector,
   SnapUIAddress,
-  SnapFooterButton,
+  SnapUIFooterButton,
   FormTextField,
   ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
   CreateSnapAccount,

diff --git a/ui/components/app/snaps/snap-footer-button/index.scss b/ui/components/app/snaps/snap-footer-button/index.scss
diff --git a/ui/components/app/snaps/snap-footer-button/index.ts b/ui/components/app/snaps/snap-footer-button/index.ts
diff --git a/ui/components/app/snaps/snap-ui-footer-button/index.scss b/ui/components/app/snaps/snap-ui-footer-button/index.scss
@@ -0,0 +1,51 @@
+.snap-ui-renderer__footer-button {
+  &:not(.hide-snap-branding) {
+    &.mm-button-primary {
+      box-shadow: none;
+      color: var(--color-text-alternative);
+      background-color: var(--color-icon-default);
+
+      &:hover:not(&--disabled) {
+        opacity: 80%;
+        box-shadow: none;
+      }
+
+      &:active:not(&--disabled) {
+        opacity: 60%;
+      }
+    }
+
+    &.mm-button-secondary {
+      border-color: var(--color-icon-default);
+      color: var(--color-icon-default);
+
+      & span {
+        color: var(--color-icon-default);
+      }
+
+      &:hover:not(&--disabled) {
+        border-color: var(--color-icon-default);
+        color: var(--color-background-default);
+        background-color: var(--color-background-default-hover);
+        box-shadow: none;
+
+        & span {
+          color: var(--color-icon-default);
+        }
+      }
+
+      &:active:not(&--disabled) {
+        border-color: var(--color-icon-default);
+        opacity: 60%;
+
+        & span {
+          color: var(--color-icon-default);
+        }
+      }
+    }
+  }
+
+  &--disabled {
+    cursor: default !important;
+  }
+}
diff --git a/ui/components/app/snaps/snap-ui-footer-button/index.ts b/ui/components/app/snaps/snap-ui-footer-button/index.ts
@@ -0,0 +1 @@
+export * from './snap-ui-footer-button';
diff --git a/...snap-footer-button/snap-footer-button.tsx → ...i-footer-button/snap-ui-footer-button.tsx b/...snap-footer-button/snap-footer-button.tsx → ...i-footer-button/snap-ui-footer-button.tsx
@@ -5,9 +5,10 @@ import {
   UserInputEventType,
 } from '@metamask/snaps-sdk';
 import { useSelector } from 'react-redux';
+import classnames from 'classnames';
 import {
   Button,
-  ButtonLinkProps,
+  ButtonProps,
   ButtonSize,
   IconSize,
 } from '../../../component-library';
@@ -20,20 +21,23 @@ import { useSnapInterfaceContext } from '../../../../contexts/snaps';
 import { SnapIcon } from '../snap-icon';
 import { getHideSnapBranding } from '../../../../selectors';
 
-type SnapFooterButtonProps = {
+type SnapUIFooterButtonProps = {
   name?: string;
+  variant?: ButtonVariant;
   isSnapAction?: boolean;
   onCancel?: () => void;
 };
 
-export const SnapFooterButton: FunctionComponent<
-  SnapFooterButtonProps & ButtonLinkProps<'button'>
+export const SnapUIFooterButton: FunctionComponent<
+  SnapUIFooterButtonProps & ButtonProps<'button'>
 > = ({
   onCancel,
   name,
   children,
+  disabled = false,
   isSnapAction = false,
   type,
+  variant = ButtonVariant.Primary,
   form,
   ...props
 }) => {
@@ -55,15 +59,25 @@ export const SnapFooterButton: FunctionComponent<
 
   const handleClick = isSnapAction ? handleSnapAction : onCancel;
 
+  const brandedButtonVariant = isSnapAction
+    ? ButtonVariant.Primary
+    : ButtonVariant.Secondary;
+
+  const buttonVariant = hideSnapBranding ? variant : brandedButtonVariant;
+
   return (
     <Button
-      className="snap-footer-button"
+      className={classnames('snap-ui-renderer__footer-button', {
+        'snap-ui-renderer__footer-button--disabled': disabled,
+        'hide-snap-branding': hideSnapBranding,
+      })}
       type={type}
       form={form}
       {...props}
       size={ButtonSize.Lg}
       block
-      variant={isSnapAction ? ButtonVariant.Primary : ButtonVariant.Secondary}
+      disabled={disabled}
+      variant={buttonVariant}
       onClick={handleClick}
       textProps={{
         display: Display.Flex,

diff --git a/ui/components/app/snaps/snap-ui-renderer/components/container.ts b/ui/components/app/snaps/snap-ui-renderer/components/container.ts
@@ -61,7 +61,7 @@ export const container: UIComponentFactory<BoxElement> = ({
         className: 'snap-ui-renderer__footer-centered',
       },
       children: {
-        element: 'SnapFooterButton',
+        element: 'SnapUIFooterButton',
         key: 'default-button',
         props: {
           onCancel,

diff --git a/ui/components/app/snaps/snap-ui-renderer/components/footer.ts b/ui/components/app/snaps/snap-ui-renderer/components/footer.ts
@@ -7,7 +7,8 @@ import {
   Display,
   FlexDirection,
 } from '../../../../../helpers/constants/design-system';
-import { UIComponentFactory, UIComponentParams } from './types';
+import { ButtonVariant } from '../../../../component-library';
+import { UIComponent, UIComponentFactory, UIComponentParams } from './types';
 import { button as buttonFn } from './button';
 
 export const DEFAULT_FOOTER = {
@@ -17,6 +18,7 @@ export const DEFAULT_FOOTER = {
     display: Display.Flex,
     flexDirection: FlexDirection.Row,
     width: BlockSize.Full,
+    gap: 4,
     padding: 4,
     className: 'snap-ui-renderer__footer',
     backgroundColor: BackgroundColor.backgroundDefault,
@@ -39,7 +41,7 @@ const getDefaultButtons = (
   // If onCancel is omitted by the caller we assume that it is safe to not display the default footer.
   if (children.length === 1 && onCancel) {
     return {
-      element: 'SnapFooterButton',
+      element: 'SnapUIFooterButton',
       key: 'default-button',
       props: {
         onCancel,
@@ -60,26 +62,27 @@ export const footer: UIComponentFactory<FooterElement> = ({
 }) => {
   const defaultButtons = getDefaultButtons(element, t, onCancel);
 
-  const footerChildren = (getJsxChildren(element) as ButtonElement[]).map(
-    (children, index) => {
-      const buttonMapped = buttonFn({
-        ...params,
-        element: children,
-      } as UIComponentParams<ButtonElement>);
-      return {
-        element: 'SnapFooterButton',
-        key: `snap-footer-button-${buttonMapped.props?.name ?? index}`,
-        props: {
-          ...buttonMapped.props,
-          isSnapAction: true,
-        },
-        children: buttonMapped.children,
-      };
-    },
-  );
+  const footerChildren: UIComponent[] = (
+    getJsxChildren(element) as ButtonElement[]
+  ).map((children, index) => {
+    const buttonMapped = buttonFn({
+      ...params,
+      element: children,
+    } as UIComponentParams<ButtonElement>);
+    return {
+      element: 'SnapUIFooterButton',
+      key: `snap-footer-button-${buttonMapped.props?.name ?? index}`,
+      props: {
+        ...buttonMapped.props,
+        variant: index === 0 ? ButtonVariant.Secondary : ButtonVariant.Primary,
+        isSnapAction: true,
+      },
+      children: buttonMapped.children,
+    };
+  });
 
   if (defaultButtons) {
-    footerChildren.unshift(defaultButtons);
+    footerChildren.unshift(defaultButtons as UIComponent);
   }
 
   return {

diff --git a/ui/components/app/snaps/snap-ui-renderer/index.scss b/ui/components/app/snaps/snap-ui-renderer/index.scss
@@ -68,21 +68,5 @@
 
   &__footer {
     margin-top: auto;
-
-    &-centered {
-      margin-top: auto;
-
-      & button {
-        &:first-child {
-          margin-right: 0;
-        }
-      }
-    }
-
-    & button {
-      &:first-child {
-        margin-right: 16px;
-      }
-    }
   }
 }