Enable destructive footer buttons in Snap UI

MetaMask · Jan 29, 2025 · f47b917 · f47b917
1 parent 08365f0
commit f47b917
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 7 deletions.
diff --git a/ui/components/app/snaps/snap-ui-footer-button/index.scss b/ui/components/app/snaps/snap-ui-footer-button/index.scss
@@ -2,8 +2,6 @@
   &: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%;
@@ -13,11 +11,15 @@
       &:active:not(&--disabled) {
         opacity: 60%;
       }
+
+      &:not(.mm-button-primary--type-danger) {
+        color: var(--color-text-alternative);
+        background-color: var(--color-icon-default);
+      }
     }
 
     &.mm-button-secondary {
       border-color: var(--color-icon-default);
-      color: var(--color-icon-default);
 
       & span {
         color: var(--color-icon-default);
@@ -42,6 +44,10 @@
           color: var(--color-icon-default);
         }
       }
+
+      &:not(.mm-button-primary--type-danger) {
+        color: var(--color-icon-default);
+      }
     }
   }
 

diff --git a/ui/components/app/snaps/snap-ui-footer-button/snap-ui-footer-button.tsx b/ui/components/app/snaps/snap-ui-footer-button/snap-ui-footer-button.tsx
@@ -23,9 +23,11 @@ import { useSnapInterfaceContext } from '../../../../contexts/snaps';
 import { SnapIcon } from '../snap-icon';
 import { getHideSnapBranding } from '../../../../selectors';
 
+type SnapButtonVariant = ButtonVariant & 'destructive';
+
 type SnapUIFooterButtonProps = {
   name?: string;
-  variant?: ButtonVariant;
+  variant?: SnapButtonVariant;
   isSnapAction?: boolean;
   onCancel?: () => void;
 };
@@ -40,7 +42,7 @@ export const SnapUIFooterButton: FunctionComponent<
   loading = false,
   isSnapAction = false,
   type,
-  variant = ButtonVariant.Primary,
+  variant = ButtonVariant.Primary as SnapButtonVariant,
   form,
   ...props
 }) => {
@@ -88,6 +90,7 @@ export const SnapUIFooterButton: FunctionComponent<
         flexDirection: FlexDirection.Row,
       }}
       data-theme={null}
+      danger={variant === 'destructive'}
     >
       {isSnapAction && !hideSnapBranding && !loading && (
         <SnapIcon snapId={snapId} avatarSize={IconSize.Sm} marginRight={2} />

diff --git a/ui/components/app/snaps/snap-ui-renderer/components/footer.ts b/ui/components/app/snaps/snap-ui-renderer/components/footer.ts
@@ -77,9 +77,10 @@ export const footer: UIComponentFactory<FooterElement> = ({
       props: {
         ...buttonMapped.props,
         variant:
-          providedChildren.length === 2 && index === 0
+          buttonMapped.props?.variant ??
+          (providedChildren.length === 2 && index === 0
             ? ButtonVariant.Secondary
-            : ButtonVariant.Primary,
+            : ButtonVariant.Primary),
         isSnapAction: true,
       },
       children: buttonMapped.children,