fix left button being primary

MetaMask · Sep 20, 2024 · 2cfcce7 · 2cfcce7
1 parent 60c02b7
commit 2cfcce7
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 22 deletions.
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
@@ -7,7 +7,7 @@ import {
 import { useSelector } from 'react-redux';
 import {
   Button,
-  ButtonLinkProps,
+  ButtonProps,
   ButtonSize,
   IconSize,
 } from '../../../component-library';
@@ -23,19 +23,21 @@ import classnames from 'classnames';
 
 type SnapUIFooterButtonProps = {
   name?: string;
+  variant?: ButtonVariant;
   isSnapAction?: boolean;
   onCancel?: () => void;
 };
 
 export const SnapUIFooterButton: FunctionComponent<
-  SnapUIFooterButtonProps & ButtonLinkProps<'button'>
+  SnapUIFooterButtonProps & ButtonProps<'button'>
 > = ({
   onCancel,
   name,
   children,
   disabled = false,
   isSnapAction = false,
   type,
+  variant = ButtonVariant.Primary,
   form,
   ...props
 }) => {
@@ -57,6 +59,12 @@ export const SnapUIFooterButton: FunctionComponent<
 
   const handleClick = isSnapAction ? handleSnapAction : onCancel;
 
+  const brandedButtonVariant = isSnapAction
+    ? ButtonVariant.Primary
+    : ButtonVariant.Secondary;
+
+  const buttonVariant = hideSnapBranding ? variant : brandedButtonVariant;
+
   return (
     <Button
       className={classnames('snap-ui-renderer__footer-button', {
@@ -69,7 +77,7 @@ export const SnapUIFooterButton: FunctionComponent<
       size={ButtonSize.Lg}
       block
       disabled={disabled}
-      variant={isSnapAction ? ButtonVariant.Primary : ButtonVariant.Secondary}
+      variant={buttonVariant}
       onClick={handleClick}
       textProps={{
         display: Display.Flex,

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 = {
@@ -61,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: 'SnapUIFooterButton',
-        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 {