Refactor (change approach)

MetaMask · Dec 9, 2024 · a9f1364 · a9f1364
1 parent dfe4482
commit a9f1364
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 16 deletions.
diff --git a/ui/components/app/snaps/snap-ui-button/snap-ui-button.tsx b/ui/components/app/snaps/snap-ui-button/snap-ui-button.tsx
@@ -15,13 +15,13 @@ import { useSnapInterfaceContext } from '../../../../contexts/snaps';
 
 export type SnapUIButtonProps = {
   name?: string;
+  loading?: boolean;
 };
 
 const COLORS = {
   primary: TextColor.infoDefault,
   destructive: TextColor.errorDefault,
   disabled: TextColor.textMuted,
-  loading: TextColor.primaryDefault,
 };
 
 export const SnapUIButton: FunctionComponent<
@@ -32,6 +32,7 @@ export const SnapUIButton: FunctionComponent<
   type = ButtonType.Button,
   variant = 'primary',
   disabled = false,
+  loading = false,
   className = '',
   ...props
 }) => {
@@ -66,7 +67,7 @@ export const SnapUIButton: FunctionComponent<
       disabled={disabled}
       {...props}
     >
-      {variant === 'loading' ? (
+      {loading ? (
         <Icon
           name={IconName.Loading}
           style={{ animation: 'spin 2s linear infinite' }}

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
@@ -13,7 +13,6 @@ import {
   Icon,
   IconName,
   IconSize,
-  ButtonVariant as ExtensionButtonVariant,
 } from '../../../component-library';
 import {
   AlignItems,
@@ -38,6 +37,7 @@ export const SnapUIFooterButton: FunctionComponent<
   name,
   children,
   disabled = false,
+  loading = false,
   isSnapAction = false,
   type,
   variant = ButtonVariant.Primary,
@@ -67,8 +67,6 @@ export const SnapUIFooterButton: FunctionComponent<
     : ButtonVariant.Secondary;
 
   const buttonVariant = hideSnapBranding ? variant : brandedButtonVariant;
-  const finalButtonVariant =
-    buttonVariant === 'loading' ? ButtonVariant.Primary : buttonVariant;
 
   return (
     <Button
@@ -82,18 +80,18 @@ export const SnapUIFooterButton: FunctionComponent<
       size={ButtonSize.Lg}
       block
       disabled={disabled}
-      variant={finalButtonVariant as unknown as ExtensionButtonVariant}
+      variant={buttonVariant}
       onClick={handleClick}
       textProps={{
         display: Display.Flex,
         alignItems: AlignItems.center,
         flexDirection: FlexDirection.Row,
       }}
     >
-      {isSnapAction && !hideSnapBranding && variant !== 'loading' && (
+      {isSnapAction && !hideSnapBranding && !loading && (
         <SnapIcon snapId={snapId} avatarSize={IconSize.Sm} marginRight={2} />
       )}
-      {variant === 'loading' ? (
+      {loading ? (
         <Icon
           name={IconName.Loading}
           style={{ animation: 'spin 2s linear infinite' }}

diff --git a/ui/components/app/snaps/snap-ui-renderer/components/button.ts b/ui/components/app/snaps/snap-ui-renderer/components/button.ts
@@ -15,6 +15,7 @@ export const button: UIComponentFactory<ButtonElement> = ({
     variant: element.props.variant,
     name: element.props.name,
     disabled: element.props.disabled,
+    loading: element.props.loading,
   },
   children: mapTextToTemplate(
     getJsxChildren(element) as NonEmptyArray<string | JSXElement>,

diff --git a/ui/components/app/snaps/snap-ui-renderer/components/footer.ts b/ui/components/app/snaps/snap-ui-renderer/components/footer.ts
@@ -71,19 +71,15 @@ export const footer: UIComponentFactory<FooterElement> = ({
       ...params,
       element: children,
     } as UIComponentParams<ButtonElement>);
-
-    const variant =
-      buttonMapped.props?.variant ??
-      (providedChildren.length === 2 && index === 0
-        ? ButtonVariant.Secondary
-        : ButtonVariant.Primary);
-
     return {
       element: 'SnapUIFooterButton',
       key: `snap-footer-button-${buttonMapped.props?.name ?? index}`,
       props: {
         ...buttonMapped.props,
-        variant,
+        variant:
+          providedChildren.length === 2 && index === 0
+            ? ButtonVariant.Secondary
+            : ButtonVariant.Primary,
         isSnapAction: true,
       },
       children: buttonMapped.children,