From f0ff98cd7e8927dde7f893f7b5aa4dde88081abb Mon Sep 17 00:00:00 2001
From: abefernan <44572727+abefernan@users.noreply.github.com>
Date: Mon, 17 Apr 2023 16:50:14 +0200
Subject: [PATCH] Add loading state to form buttons

---
 components/forms/DelegationForm.tsx   |  6 +++---
 components/forms/MultisigForm.tsx     | 19 +++++++++----------
 components/forms/ReDelegationForm.tsx |  4 ++--
 components/forms/RewardsForm.tsx      |  4 ++--
 components/forms/TransactionForm.tsx  | 15 +++++++--------
 components/forms/UnDelegationForm.tsx |  4 ++--
 6 files changed, 25 insertions(+), 27 deletions(-)

diff --git a/components/forms/DelegationForm.tsx b/components/forms/DelegationForm.tsx
index e8cfddd..8cb44ab 100644
--- a/components/forms/DelegationForm.tsx
+++ b/components/forms/DelegationForm.tsx
@@ -3,7 +3,7 @@ import { Account, calculateFee } from "@cosmjs/stargate";
 import { assert } from "@cosmjs/utils";
 import axios from "axios";
 import { NextRouter, withRouter } from "next/router";
-import React, { useState } from "react";
+import { useState } from "react";
 import { useAppContext } from "../../context/AppContext";
 import { checkAddress, exampleValidatorAddress } from "../../lib/displayHelpers";
 import Button from "../inputs/Button";
@@ -24,7 +24,7 @@ const DelegationForm = (props: Props) => {
   const [memo, setMemo] = useState("");
   const [gas, setGas] = useState(200000);
   const [gasPrice, _setGasPrice] = useState(state.chain.gasPrice);
-  const [_processing, setProcessing] = useState(false);
+  const [processing, setProcessing] = useState(false);
   const [addressError, setAddressError] = useState("");
 
   const createTransaction = (txValidatorAddress: string, txAmount: string, gasLimit: number) => {
@@ -130,7 +130,7 @@ const DelegationForm = (props: Props) => {
           onChange={(e: React.ChangeEvent<HTMLInputElement>) => setMemo(e.target.value)}
         />
       </div>
-      <Button label="Delegate" onClick={handleCreate} />
+      <Button label="Delegate" onClick={handleCreate} loading={processing} />
       <style jsx>{`
         p {
           margin-top: 15px;
diff --git a/components/forms/MultisigForm.tsx b/components/forms/MultisigForm.tsx
index c84f1ed..309906d 100644
--- a/components/forms/MultisigForm.tsx
+++ b/components/forms/MultisigForm.tsx
@@ -1,15 +1,14 @@
-import React, { useState } from "react";
-import { withRouter, NextRouter } from "next/router";
 import { StargateClient } from "@cosmjs/stargate";
 import { assert } from "@cosmjs/utils";
-
+import { NextRouter, withRouter } from "next/router";
+import { useState } from "react";
 import { useAppContext } from "../../context/AppContext";
-import Button from "../inputs/Button";
-import { createMultisigFromCompressedSecp256k1Pubkeys } from "../../lib/multisigHelpers";
-import Input from "../inputs/Input";
-import StackableContainer from "../layout/StackableContainer";
-import ThresholdInput from "../inputs/ThresholdInput";
 import { exampleAddress, examplePubkey } from "../../lib/displayHelpers";
+import { createMultisigFromCompressedSecp256k1Pubkeys } from "../../lib/multisigHelpers";
+import Button from "../inputs/Button";
+import Input from "../inputs/Input";
+import ThresholdInput from "../inputs/ThresholdInput";
+import StackableContainer from "../layout/StackableContainer";
 
 const emptyPubKeyGroup = () => {
   return { address: "", compressedPubkey: "", keyError: "", isPubkey: false };
@@ -23,7 +22,7 @@ const MultiSigForm = (props: Props) => {
   const { state } = useAppContext();
   const [pubkeys, setPubkeys] = useState([emptyPubKeyGroup(), emptyPubKeyGroup()]);
   const [threshold, setThreshold] = useState(2);
-  const [_processing, setProcessing] = useState(false);
+  const [processing, setProcessing] = useState(false);
 
   const handleChangeThreshold = (e: React.ChangeEvent<HTMLInputElement>) => {
     let newThreshold = parseInt(e.target.value, 10);
@@ -195,7 +194,7 @@ const MultiSigForm = (props: Props) => {
           </p>
         </StackableContainer>
       </StackableContainer>
-      <Button primary onClick={handleCreate} label="Create Multisig" />
+      <Button primary onClick={handleCreate} label="Create Multisig" loading={processing} />
       <style jsx>{`
         .key-inputs {
           display: flex;
diff --git a/components/forms/ReDelegationForm.tsx b/components/forms/ReDelegationForm.tsx
index 9ffb758..5ada999 100644
--- a/components/forms/ReDelegationForm.tsx
+++ b/components/forms/ReDelegationForm.tsx
@@ -25,7 +25,7 @@ const ReDelegationForm = (props: Props) => {
   const [memo, setMemo] = useState("");
   const [gas, setGas] = useState(300000);
   const [gasPrice, _setGasPrice] = useState(state.chain.gasPrice);
-  const [_processing, setProcessing] = useState(false);
+  const [processing, setProcessing] = useState(false);
   const [addressErrors, setAddressErrors] = useState({ src: "", dst: "" });
 
   const createTransaction = (
@@ -158,7 +158,7 @@ const ReDelegationForm = (props: Props) => {
           onChange={(e: React.ChangeEvent<HTMLInputElement>) => setMemo(e.target.value)}
         />
       </div>
-      <Button label="ReDelegate" onClick={handleCreate} />
+      <Button label="ReDelegate" onClick={handleCreate} loading={processing} />
       <style jsx>{`
         p {
           margin-top: 15px;
diff --git a/components/forms/RewardsForm.tsx b/components/forms/RewardsForm.tsx
index e4b630e..c4a16d0 100644
--- a/components/forms/RewardsForm.tsx
+++ b/components/forms/RewardsForm.tsx
@@ -22,7 +22,7 @@ const RewardsForm = (props: Props) => {
   const [memo, setMemo] = useState("");
   const [gas, setGas] = useState(200000);
   const [gasPrice, _setGasPrice] = useState(state.chain.gasPrice);
-  const [_processing, setProcessing] = useState(false);
+  const [processing, setProcessing] = useState(false);
   const [addressError, setAddressError] = useState("");
 
   const createTransaction = (txValidatorAddress: string, gasLimit: number) => {
@@ -111,7 +111,7 @@ const RewardsForm = (props: Props) => {
           onChange={(e: React.ChangeEvent<HTMLInputElement>) => setMemo(e.target.value)}
         />
       </div>
-      <Button label="Claim Rewards" onClick={handleCreate} />
+      <Button label="Claim Rewards" onClick={handleCreate} loading={processing} />
       <style jsx>{`
         p {
           margin-top: 15px;
diff --git a/components/forms/TransactionForm.tsx b/components/forms/TransactionForm.tsx
index 1531d0f..3d22d75 100644
--- a/components/forms/TransactionForm.tsx
+++ b/components/forms/TransactionForm.tsx
@@ -1,15 +1,14 @@
-import axios from "axios";
-import { Account, calculateFee } from "@cosmjs/stargate";
 import { Decimal } from "@cosmjs/math";
+import { Account, calculateFee } from "@cosmjs/stargate";
 import { assert } from "@cosmjs/utils";
-import React, { useState } from "react";
-import { withRouter, NextRouter } from "next/router";
-
+import axios from "axios";
+import { NextRouter, withRouter } from "next/router";
+import { useState } from "react";
 import { useAppContext } from "../../context/AppContext";
+import { checkAddress, exampleAddress } from "../../lib/displayHelpers";
 import Button from "../inputs/Button";
 import Input from "../inputs/Input";
 import StackableContainer from "../layout/StackableContainer";
-import { checkAddress, exampleAddress } from "../../lib/displayHelpers";
 
 interface Props {
   address: string | null;
@@ -25,7 +24,7 @@ const TransactionForm = (props: Props) => {
   const [memo, setMemo] = useState("");
   const [gas, setGas] = useState(200000);
   const [gasPrice, _setGasPrice] = useState(state.chain.gasPrice);
-  const [_processing, setProcessing] = useState(false);
+  const [processing, setProcessing] = useState(false);
   const [addressError, setAddressError] = useState("");
 
   const createTransaction = (txToAddress: string, txAmount: string, gasLimit: number) => {
@@ -130,7 +129,7 @@ const TransactionForm = (props: Props) => {
           onChange={(e: React.ChangeEvent<HTMLInputElement>) => setMemo(e.target.value)}
         />
       </div>
-      <Button label="Create Transaction" onClick={handleCreate} />
+      <Button label="Create Transaction" onClick={handleCreate} loading={processing} />
       <style jsx>{`
         p {
           margin-top: 15px;
diff --git a/components/forms/UnDelegationForm.tsx b/components/forms/UnDelegationForm.tsx
index 2fb9342..50cb41f 100644
--- a/components/forms/UnDelegationForm.tsx
+++ b/components/forms/UnDelegationForm.tsx
@@ -24,7 +24,7 @@ const UnDelegationForm = (props: Props) => {
   const [memo, setMemo] = useState("");
   const [gas, setGas] = useState(300000);
   const [gasPrice, _setGasPrice] = useState(state.chain.gasPrice);
-  const [_processing, setProcessing] = useState(false);
+  const [processing, setProcessing] = useState(false);
   const [addressError, setAddressError] = useState("");
 
   const createTransaction = (txValidatorAddress: string, txAmount: string, gasLimit: number) => {
@@ -130,7 +130,7 @@ const UnDelegationForm = (props: Props) => {
           onChange={(e: React.ChangeEvent<HTMLInputElement>) => setMemo(e.target.value)}
         />
       </div>
-      <Button label="UnDelegate" onClick={handleCreate} />
+      <Button label="UnDelegate" onClick={handleCreate} loading={processing} />
       <style jsx>{`
         p {
           margin-top: 15px;