From 550304abaf019fcd8bb9f4c5a8140c5b52edc92a Mon Sep 17 00:00:00 2001
From: robhyrk <rob.hyrkiel@gmail.com>
Date: Fri, 31 May 2024 16:39:05 -0400
Subject: [PATCH] feat: add loading state to tx buttons

---
 components/court/DelegateButton.tsx         | 1 +
 components/court/JoinCourtAsJurorButton.tsx | 1 +
 components/court/ManageDelegationsForm.tsx  | 1 +
 components/liquidity/ExitPoolFormAmm2.tsx   | 1 +
 components/liquidity/JoinPoolFormAmm2.tsx   | 1 +
 components/markets/BuyFullSetForm.tsx       | 6 +++++-
 components/markets/SellFullSetForm.tsx      | 6 +++++-
 components/portfolio/DepositButton.tsx      | 1 +
 components/portfolio/TransferButton.tsx     | 5 ++++-
 components/portfolio/WithdrawButton.tsx     | 1 +
 components/settings/AccountSettingsForm.tsx | 1 +
 components/trade-form/BuyForm.tsx           | 1 +
 components/trade-form/SellForm.tsx          | 1 +
 components/ui/FormTransactionButton.tsx     | 3 +++
 pages/deposit.tsx                           | 1 +
 15 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/components/court/DelegateButton.tsx b/components/court/DelegateButton.tsx
index 3bacf58a8..3291877de 100644
--- a/components/court/DelegateButton.tsx
+++ b/components/court/DelegateButton.tsx
@@ -168,6 +168,7 @@ const DelegateButton = ({ address }: { address: string }) => {
                 </span>
               </div>
               <FormTransactionButton
+                loading={isLoading}
                 className="w-full max-w-[250px]"
                 disabled={formState.isValid === false || isLoading}
               >
diff --git a/components/court/JoinCourtAsJurorButton.tsx b/components/court/JoinCourtAsJurorButton.tsx
index e81f44631..bf95d0a7f 100644
--- a/components/court/JoinCourtAsJurorButton.tsx
+++ b/components/court/JoinCourtAsJurorButton.tsx
@@ -216,6 +216,7 @@ const JoinCourtAsJurorButton = ({ className }: { className?: string }) => {
               </div>
 
               <FormTransactionButton
+                loading={isLoading}
                 className="w-full max-w-[250px]"
                 disabled={formState.isValid === false || isLoading}
               >
diff --git a/components/court/ManageDelegationsForm.tsx b/components/court/ManageDelegationsForm.tsx
index 55a7e1659..e9f3c7a23 100644
--- a/components/court/ManageDelegationsForm.tsx
+++ b/components/court/ManageDelegationsForm.tsx
@@ -249,6 +249,7 @@ const ManageDelegationsForm = (props: ManageDelegationsFormProps) => {
       </div>
 
       <FormTransactionButton
+        loading={isLoading}
         className="w-full max-w-[250px]"
         disabled={
           formState.isValid === false ||
diff --git a/components/liquidity/ExitPoolFormAmm2.tsx b/components/liquidity/ExitPoolFormAmm2.tsx
index c94c648f3..0ba2ba569 100644
--- a/components/liquidity/ExitPoolFormAmm2.tsx
+++ b/components/liquidity/ExitPoolFormAmm2.tsx
@@ -245,6 +245,7 @@ const ExitPoolForm = ({
         {...register("poolSharesPercentage", { min: 0, value: "0" })}
       />
       <FormTransactionButton
+        loading={isLoading}
         disabled={formState.isValid === false || isLoading}
       >
         Exit Pool
diff --git a/components/liquidity/JoinPoolFormAmm2.tsx b/components/liquidity/JoinPoolFormAmm2.tsx
index 762415597..40ce74ab9 100644
--- a/components/liquidity/JoinPoolFormAmm2.tsx
+++ b/components/liquidity/JoinPoolFormAmm2.tsx
@@ -235,6 +235,7 @@ const JoinPoolForm = ({
       </div>
 
       <FormTransactionButton
+        loading={isLoading}
         disabled={
           formState.isValid === false ||
           isLoading ||
diff --git a/components/markets/BuyFullSetForm.tsx b/components/markets/BuyFullSetForm.tsx
index c599b3eca..fd774095d 100644
--- a/components/markets/BuyFullSetForm.tsx
+++ b/components/markets/BuyFullSetForm.tsx
@@ -158,7 +158,11 @@ const BuyFullSetForm = ({
           </p>
         </div>
       </div>
-      <TransactionButton onClick={handleSignTransaction} disabled={disabled}>
+      <TransactionButton
+        onClick={handleSignTransaction}
+        disabled={disabled}
+        loading={isLoading}
+      >
         Confirm Buy
         {fee && (
           <span className="block text-xs font-normal">
diff --git a/components/markets/SellFullSetForm.tsx b/components/markets/SellFullSetForm.tsx
index 9f9eb87fc..bce6b4589 100644
--- a/components/markets/SellFullSetForm.tsx
+++ b/components/markets/SellFullSetForm.tsx
@@ -137,7 +137,11 @@ const SellFullSetForm = ({
           </p>
         </div>
       </div>
-      <TransactionButton onClick={handleSignTransaction} disabled={disabled}>
+      <TransactionButton
+        onClick={handleSignTransaction}
+        disabled={disabled}
+        loading={isLoading}
+      >
         Confirm Sell
         {fee && (
           <span className="block text-xs font-normal">
diff --git a/components/portfolio/DepositButton.tsx b/components/portfolio/DepositButton.tsx
index a6c97a786..bc0de168b 100644
--- a/components/portfolio/DepositButton.tsx
+++ b/components/portfolio/DepositButton.tsx
@@ -235,6 +235,7 @@ const DepositModal = ({
             </span>
           </div>
           <FormTransactionButton
+            loading={isLoading}
             className="w-full max-w-[250px]"
             disabled={formState.isValid === false || isLoading}
             disableFeeCheck={true}
diff --git a/components/portfolio/TransferButton.tsx b/components/portfolio/TransferButton.tsx
index f0b8e1725..f24e857d4 100644
--- a/components/portfolio/TransferButton.tsx
+++ b/components/portfolio/TransferButton.tsx
@@ -298,7 +298,10 @@ const TransferModal = ({
               : ""}
           </span>
         </div>
-        <FormTransactionButton disabled={!isValid || txIsLoading}>
+        <FormTransactionButton
+          loading={txIsLoading}
+          disabled={!isValid || txIsLoading}
+        >
           Transfer
         </FormTransactionButton>
       </form>
diff --git a/components/portfolio/WithdrawButton.tsx b/components/portfolio/WithdrawButton.tsx
index 76605db9e..d99b2f4a4 100644
--- a/components/portfolio/WithdrawButton.tsx
+++ b/components/portfolio/WithdrawButton.tsx
@@ -288,6 +288,7 @@ const WithdrawModal = ({
             <span className="ml-1 text-black">{chain?.withdrawFee}</span>
           </div>
           <FormTransactionButton
+            loading={isLoading}
             className="w-full max-w-[250px]"
             disabled={formState.isValid === false || isLoading}
           >
diff --git a/components/settings/AccountSettingsForm.tsx b/components/settings/AccountSettingsForm.tsx
index a4e39dcde..897ba7797 100644
--- a/components/settings/AccountSettingsForm.tsx
+++ b/components/settings/AccountSettingsForm.tsx
@@ -155,6 +155,7 @@ const AcccountSettingsForm: React.FC<AcccountSettingsFormProps> = ({
       </div>
 
       <FormTransactionButton
+        loading={isUpdating}
         disabled={!isDirty || !isValid || isUpdating || isClearing}
       >
         Set Identity
diff --git a/components/trade-form/BuyForm.tsx b/components/trade-form/BuyForm.tsx
index b28b7b1da..3e4f389f3 100644
--- a/components/trade-form/BuyForm.tsx
+++ b/components/trade-form/BuyForm.tsx
@@ -327,6 +327,7 @@ const BuyForm = ({
           className="w-full max-w-[250px]"
           disabled={formState.isValid === false || isLoading}
           disableFeeCheck={true}
+          loading={isLoading}
         >
           <div>
             <div className="center h-[20px] font-normal">Buy</div>
diff --git a/components/trade-form/SellForm.tsx b/components/trade-form/SellForm.tsx
index ad3624448..51d000c90 100644
--- a/components/trade-form/SellForm.tsx
+++ b/components/trade-form/SellForm.tsx
@@ -300,6 +300,7 @@ const SellForm = ({
           className="w-full max-w-[250px]"
           disabled={formState.isValid === false || isLoading}
           disableFeeCheck={true}
+          loading={isLoading}
         >
           <div>
             <div className="center h-[20px] font-normal">Sell</div>
diff --git a/components/ui/FormTransactionButton.tsx b/components/ui/FormTransactionButton.tsx
index 2cfeb3b5c..3e6bd194f 100644
--- a/components/ui/FormTransactionButton.tsx
+++ b/components/ui/FormTransactionButton.tsx
@@ -7,6 +7,7 @@ interface TransactionButtonProps {
   dataTest?: string;
   disableFeeCheck?: boolean;
   type?: "button" | "submit" | "reset";
+  loading: boolean | undefined;
 }
 
 const FormTransactionButton: FC<PropsWithChildren<TransactionButtonProps>> = ({
@@ -16,6 +17,7 @@ const FormTransactionButton: FC<PropsWithChildren<TransactionButtonProps>> = ({
   disableFeeCheck = false,
   type = "submit",
   children,
+  loading = undefined,
 }) => {
   return (
     <TransactionButton
@@ -24,6 +26,7 @@ const FormTransactionButton: FC<PropsWithChildren<TransactionButtonProps>> = ({
       className={className}
       dataTest={dataTest}
       disableFeeCheck={disableFeeCheck}
+      loading={loading}
     >
       {children}
     </TransactionButton>
diff --git a/pages/deposit.tsx b/pages/deposit.tsx
index f61988289..74c3103cd 100644
--- a/pages/deposit.tsx
+++ b/pages/deposit.tsx
@@ -267,6 +267,7 @@ const DotDeposit = ({ address }: { address: string }) => {
           )}
       </div>
       <FormTransactionButton
+        loading={isLoading}
         className="w-full rounded-none !bg-white !text-black disabled:bg-white disabled:text-white"
         disabled={isValid === false || isLoading}
         disableFeeCheck={true}