From 86c7aef9fdcc4a25117a4a5fedc36b3adda13b0a Mon Sep 17 00:00:00 2001
From: david0xd <david@timechaser.org>
Date: Fri, 6 Dec 2024 16:55:58 +0100
Subject: [PATCH] Add loading variant for Snaps UI Button

Update manifest shasum

Add loading variant to old button
---
 .../examples/packages/browserify-plugin/snap.manifest.json  | 2 +-
 packages/snaps-sdk/src/jsx/components/form/Button.ts        | 2 +-
 packages/snaps-sdk/src/jsx/validation.test.tsx              | 1 +
 packages/snaps-sdk/src/jsx/validation.ts                    | 4 +++-
 packages/snaps-sdk/src/ui/components/button.ts              | 2 ++
 packages/snaps-utils/src/ui.tsx                             | 6 +++++-
 6 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/packages/examples/packages/browserify-plugin/snap.manifest.json b/packages/examples/packages/browserify-plugin/snap.manifest.json
index 741d09c663..74fa283d77 100644
--- a/packages/examples/packages/browserify-plugin/snap.manifest.json
+++ b/packages/examples/packages/browserify-plugin/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "d1js9Y4zJwk7n/e47V5fdMreo1FBtVKl4GtPhfckZrs=",
+    "shasum": "w8ZPchwG+LqlFzbmkqVQ5nDqt5GDFkZsU8dUm1b5NXo=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",
diff --git a/packages/snaps-sdk/src/jsx/components/form/Button.ts b/packages/snaps-sdk/src/jsx/components/form/Button.ts
index e41c0e6d01..67a5dd2c72 100644
--- a/packages/snaps-sdk/src/jsx/components/form/Button.ts
+++ b/packages/snaps-sdk/src/jsx/components/form/Button.ts
@@ -22,7 +22,7 @@ export type ButtonProps = {
   children: SnapsChildren<StringElement | IconElement | ImageElement>;
   name?: string | undefined;
   type?: 'button' | 'submit' | undefined;
-  variant?: 'primary' | 'destructive' | undefined;
+  variant?: 'primary' | 'destructive' | 'loading' | undefined;
   disabled?: boolean | undefined;
   form?: string | undefined;
 };
diff --git a/packages/snaps-sdk/src/jsx/validation.test.tsx b/packages/snaps-sdk/src/jsx/validation.test.tsx
index a341804f72..46fc4fd39b 100644
--- a/packages/snaps-sdk/src/jsx/validation.test.tsx
+++ b/packages/snaps-sdk/src/jsx/validation.test.tsx
@@ -163,6 +163,7 @@ describe('ButtonStruct', () => {
     <Button name="foo">bar</Button>,
     <Button type="submit">foo</Button>,
     <Button variant="destructive">foo</Button>,
+    <Button variant="loading">foo</Button>,
     <Button disabled={true}>foo</Button>,
     <Button key="button">foo</Button>,
     <Button>
diff --git a/packages/snaps-sdk/src/jsx/validation.ts b/packages/snaps-sdk/src/jsx/validation.ts
index 2e11dd7435..b8380820c8 100644
--- a/packages/snaps-sdk/src/jsx/validation.ts
+++ b/packages/snaps-sdk/src/jsx/validation.ts
@@ -243,7 +243,9 @@ export const ButtonStruct: Describe<ButtonElement> = element('Button', {
   children: children([StringElementStruct, ImageStruct, IconStruct]),
   name: optional(string()),
   type: optional(nullUnion([literal('button'), literal('submit')])),
-  variant: optional(nullUnion([literal('primary'), literal('destructive')])),
+  variant: optional(
+    nullUnion([literal('primary'), literal('destructive'), literal('loading')]),
+  ),
   disabled: optional(boolean()),
   form: optional(string()),
 });
diff --git a/packages/snaps-sdk/src/ui/components/button.ts b/packages/snaps-sdk/src/ui/components/button.ts
index 6103999e19..285968bce6 100644
--- a/packages/snaps-sdk/src/ui/components/button.ts
+++ b/packages/snaps-sdk/src/ui/components/button.ts
@@ -15,6 +15,7 @@ import { LiteralStruct, NodeType } from '../nodes';
 export enum ButtonVariant {
   Primary = 'primary',
   Secondary = 'secondary',
+  Loading = 'loading',
 }
 
 export enum ButtonType {
@@ -31,6 +32,7 @@ export const ButtonStruct = assign(
       union([
         enumValue(ButtonVariant.Primary),
         enumValue(ButtonVariant.Secondary),
+        enumValue(ButtonVariant.Loading),
       ]),
     ),
     buttonType: optional(
diff --git a/packages/snaps-utils/src/ui.tsx b/packages/snaps-utils/src/ui.tsx
index 10aaff7b2c..9b530c1aca 100644
--- a/packages/snaps-utils/src/ui.tsx
+++ b/packages/snaps-utils/src/ui.tsx
@@ -51,12 +51,16 @@ const ALLOWED_PROTOCOLS = ['https:', 'mailto:', 'metamask:'];
  * @param variant - The legacy button component variant.
  * @returns The button variant.
  */
-function getButtonVariant(variant?: 'primary' | 'secondary' | undefined) {
+function getButtonVariant(
+  variant?: 'primary' | 'secondary' | 'loading' | undefined,
+) {
   switch (variant) {
     case 'primary':
       return 'primary';
     case 'secondary':
       return 'destructive';
+    case 'loading':
+      return 'loading';
     default:
       return undefined;
   }