Merge pull request #2436 from zeitgeistpm/loading-btn

Add loading state to tx buttons
zeitgeistpm · Jun 14, 2024 · 1373aac · 1373aac
2 parents 70ba274 + 550304a
commit 1373aac
Show file tree

Hide file tree

Showing 15 changed files with 28 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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}