From 284e510761a5f0e46638adbdf521b61a1d109a5c Mon Sep 17 00:00:00 2001
From: abefernan <44572727+abefernan@users.noreply.github.com>
Date: Fri, 14 Apr 2023 17:26:20 +0200
Subject: [PATCH 01/15] Query gasprice

---
 components/chainSelect/ChainSelect.tsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/components/chainSelect/ChainSelect.tsx b/components/chainSelect/ChainSelect.tsx
index 127a9b3..31d9a2e 100644
--- a/components/chainSelect/ChainSelect.tsx
+++ b/components/chainSelect/ChainSelect.tsx
@@ -135,7 +135,16 @@ const ChainSelect = () => {
       const firstAsset: ChainRegistryAsset | undefined = assetData.assets?.[0];
       const denom = firstAsset?.base || "";
       const displayDenom = firstAsset?.symbol || "";
-      const gasPrice = firstAsset ? `0.03${firstAsset.base}` : "";
+      const feeToken = chainData["fees"]?.fee_tokens.find(
+        (token: { denom: string }) => token.denom == denom,
+      );
+      const gasPrice =
+        feeToken["average_gas_price"] ??
+        feeToken["low_gas_price"] ??
+        feeToken["high_gas_price"] ??
+        feeToken["fixed_min_gas_price"] ??
+        0.03;
+      const formattedGasPrice = firstAsset ? `${gasPrice}${denom}` : "";
       const displayUnit = firstAsset?.denom_units.find((u) => u.denom == firstAsset.display);
       const displayDenomExponent = displayUnit?.exponent ?? 6;
 
@@ -151,7 +160,7 @@ const ChainSelect = () => {
           denom,
           displayDenom,
           displayDenomExponent,
-          gasPrice,
+          gasPrice: formattedGasPrice,
           chainId,
           chainDisplayName,
           registryName,

From b6338db0a1a526572f7aef39bbe0d0c39de7a85b Mon Sep 17 00:00:00 2001
From: abefernan <44572727+abefernan@users.noreply.github.com>
Date: Fri, 14 Apr 2023 17:28:32 +0200
Subject: [PATCH 02/15] Check good rpc from array

---
 components/chainSelect/ChainSelect.tsx | 25 +++++++++++++++++--------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/components/chainSelect/ChainSelect.tsx b/components/chainSelect/ChainSelect.tsx
index 127a9b3..7eaf0d9 100644
--- a/components/chainSelect/ChainSelect.tsx
+++ b/components/chainSelect/ChainSelect.tsx
@@ -125,7 +125,7 @@ const ChainSelect = () => {
       const { data: chainData } = await axios.get(chainInfoUrl);
       const { data: assetData } = await axios.get(chainAssetUrl);
 
-      const nodeAddress = getNodeFromArray(chainData.apis.rpc);
+      const nodeAddress = await getNodeFromArray(chainData.apis.rpc);
       const addressPrefix = chainData["bech32_prefix"];
       const chainId = chainData["chain_id"];
       const chainDisplayName = chainData["pretty_name"];
@@ -139,10 +139,6 @@ const ChainSelect = () => {
       const displayUnit = firstAsset?.denom_units.find((u) => u.denom == firstAsset.display);
       const displayDenomExponent = displayUnit?.exponent ?? 6;
 
-      // test client connection
-      const client = await StargateClient.connect(nodeAddress);
-      await client.getHeight();
-
       // change app state
       dispatch({
         type: "changeChain",
@@ -175,13 +171,26 @@ const ChainSelect = () => {
     return "";
   };
 
-  const getNodeFromArray = (nodeArray: { address: string; provider: string }[]) => {
+  const getNodeFromArray = async (nodeArray: { address: string; provider: string }[]) => {
     // only return https connections
-    const secureNodes = nodeArray.filter((node) => node.address.includes("https://"));
+    const secureNodes = nodeArray
+      .filter((node) => node.address.includes("https://"))
+      .map(({ address }) => address);
+
     if (secureNodes.length === 0) {
       throw new Error("No SSL enabled RPC nodes available for this chain");
     }
-    return secureNodes[0].address;
+
+    try {
+      for (const node of secureNodes) {
+        // test client connection
+        const client = await StargateClient.connect(node);
+        await client.getHeight();
+        return node;
+      }
+    } catch {}
+
+    throw new Error("No RPC nodes available for this chain");
   };
 
   const onChainSelect = (option: ChainOption) => {

From 4ee7903b05e0f6c447ca29e3531af76b5dbdcb15 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Abel=20Fern=C3=A1ndez?=
 <44572727+abefernan@users.noreply.github.com>
Date: Mon, 17 Apr 2023 16:37:26 +0200
Subject: [PATCH 03/15] Improve secure url checking

Co-authored-by: Simon Warta <2603011+webmaster128@users.noreply.github.com>
---
 components/chainSelect/ChainSelect.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/chainSelect/ChainSelect.tsx b/components/chainSelect/ChainSelect.tsx
index 7eaf0d9..b9aaca4 100644
--- a/components/chainSelect/ChainSelect.tsx
+++ b/components/chainSelect/ChainSelect.tsx
@@ -174,7 +174,7 @@ const ChainSelect = () => {
   const getNodeFromArray = async (nodeArray: { address: string; provider: string }[]) => {
     // only return https connections
     const secureNodes = nodeArray
-      .filter((node) => node.address.includes("https://"))
+      .filter((node) => node.address.startsWith("https://"))
       .map(({ address }) => address);
 
     if (secureNodes.length === 0) {

From 962a239a9b54248c2f286cdba15d3950f1a6b2b3 Mon Sep 17 00:00:00 2001
From: abefernan <44572727+abefernan@users.noreply.github.com>
Date: Mon, 17 Apr 2023 16:40:15 +0200
Subject: [PATCH 04/15] Fix try catch in for loop

---
 components/chainSelect/ChainSelect.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/chainSelect/ChainSelect.tsx b/components/chainSelect/ChainSelect.tsx
index b9aaca4..3f1150b 100644
--- a/components/chainSelect/ChainSelect.tsx
+++ b/components/chainSelect/ChainSelect.tsx
@@ -181,14 +181,14 @@ const ChainSelect = () => {
       throw new Error("No SSL enabled RPC nodes available for this chain");
     }
 
-    try {
-      for (const node of secureNodes) {
+    for (const node of secureNodes) {
+      try {
         // test client connection
         const client = await StargateClient.connect(node);
         await client.getHeight();
         return node;
-      }
-    } catch {}
+      } catch {}
+    }
 
     throw new Error("No RPC nodes available for this chain");
   };

From ddc374d4e74adaf2820a09b094311c550a00ce74 Mon Sep 17 00:00:00 2001
From: abefernan <44572727+abefernan@users.noreply.github.com>
Date: Mon, 17 Apr 2023 16:43:18 +0200
Subject: [PATCH 05/15] Add empty object fallback for feeToken

---
 components/chainSelect/ChainSelect.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/chainSelect/ChainSelect.tsx b/components/chainSelect/ChainSelect.tsx
index 31d9a2e..1945db7 100644
--- a/components/chainSelect/ChainSelect.tsx
+++ b/components/chainSelect/ChainSelect.tsx
@@ -135,9 +135,9 @@ const ChainSelect = () => {
       const firstAsset: ChainRegistryAsset | undefined = assetData.assets?.[0];
       const denom = firstAsset?.base || "";
       const displayDenom = firstAsset?.symbol || "";
-      const feeToken = chainData["fees"]?.fee_tokens.find(
-        (token: { denom: string }) => token.denom == denom,
-      );
+      const feeToken =
+        chainData["fees"]?.fee_tokens.find((token: { denom: string }) => token.denom == denom) ??
+        {};
       const gasPrice =
         feeToken["average_gas_price"] ??
         feeToken["low_gas_price"] ??

From 6aa535b7bbdcea4e6ac9b4932d1ea70cbb5142e8 Mon Sep 17 00:00:00 2001
From: abefernan <44572727+abefernan@users.noreply.github.com>
Date: Mon, 17 Apr 2023 16:48:54 +0200
Subject: [PATCH 06/15] Add spinner component

---
 components/Spinner.tsx | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)
 create mode 100644 components/Spinner.tsx

diff --git a/components/Spinner.tsx b/components/Spinner.tsx
new file mode 100644
index 0000000..18f7586
--- /dev/null
+++ b/components/Spinner.tsx
@@ -0,0 +1,30 @@
+interface SpinnerProps {
+  readonly size?: number;
+}
+
+const Spinner = ({ size }: SpinnerProps) => (
+  <>
+    <div className="spinner"></div>
+    <style jsx>{`
+      .spinner {
+        border: ${size || 2}px solid #f3f3f3;
+        border-top: ${size || 2}px solid #561253;
+        border-radius: 50%;
+        width: ${size || 16}px;
+        height: ${size || 16}px;
+        animation: spin 1s linear infinite;
+      }
+
+      @keyframes spin {
+        0% {
+          transform: rotate(0deg);
+        }
+        100% {
+          transform: rotate(360deg);
+        }
+      }
+    `}</style>
+  </>
+);
+
+export default Spinner;

From a6082905c7e3da83bcb0a1c83e028d4ac0c2283a Mon Sep 17 00:00:00 2001
From: abefernan <44572727+abefernan@users.noreply.github.com>
Date: Mon, 17 Apr 2023 16:49:09 +0200
Subject: [PATCH 07/15] Add loading feature to Button

---
 components/inputs/Button.tsx | 24 ++++++++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/components/inputs/Button.tsx b/components/inputs/Button.tsx
index 860fa3f..0bf2e7d 100644
--- a/components/inputs/Button.tsx
+++ b/components/inputs/Button.tsx
@@ -1,7 +1,8 @@
-import React from "react";
+import Spinner from "../Spinner";
 
 interface Props {
   primary?: boolean;
+  loading?: boolean;
   disabled?: boolean;
   href?: string;
   label: string;
@@ -17,10 +18,18 @@ const Button = (props: Props) => (
     ) : (
       <button
         className={props.primary ? "primary button" : "button"}
-        onClick={props.onClick}
+        onClick={props.disabled || props.loading ? () => {} : props.onClick}
         disabled={props.disabled}
+        data-loading={props.loading}
       >
-        {props.label}
+        {props.loading ? (
+          <div className="button-cluster">
+            <Spinner />
+            {props.label}
+          </div>
+        ) : (
+          props.label
+        )}
       </button>
     )}
     <style jsx>{`
@@ -44,10 +53,17 @@ const Button = (props: Props) => (
       button:first-child {
         margin-top: 0;
       }
-      button:disabled {
+      button:disabled,
+      button[data-loading="true"] {
         opacity: 0.5;
         cursor: initial;
       }
+      .button-cluster {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+      }
     `}</style>
   </>
 );

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 08/15] 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;

From d246382a8ff50fc69ab5db82654dbe9739b5e7c8 Mon Sep 17 00:00:00 2001
From: abefernan <44572727+abefernan@users.noreply.github.com>
Date: Mon, 17 Apr 2023 16:50:26 +0200
Subject: [PATCH 09/15] Remove unneded loading state from form

---
 components/forms/FindMultisigForm.tsx | 18 +++++++-----------
 1 file changed, 7 insertions(+), 11 deletions(-)

diff --git a/components/forms/FindMultisigForm.tsx b/components/forms/FindMultisigForm.tsx
index 8dfbf4a..9c17152 100644
--- a/components/forms/FindMultisigForm.tsx
+++ b/components/forms/FindMultisigForm.tsx
@@ -1,12 +1,11 @@
-import React, { useState } from "react";
-import { withRouter, NextRouter } from "next/router";
-
-import { useAppContext } from "../../context/AppContext";
-import Button from "../inputs/Button";
-import StackableContainer from "../layout/StackableContainer";
-import Input from "../inputs/Input";
-import { exampleAddress } from "../../lib/displayHelpers";
 import { assert } from "@cosmjs/utils";
+import { NextRouter, withRouter } from "next/router";
+import { useState } from "react";
+import { useAppContext } from "../../context/AppContext";
+import { exampleAddress } from "../../lib/displayHelpers";
+import Button from "../inputs/Button";
+import Input from "../inputs/Input";
+import StackableContainer from "../layout/StackableContainer";
 
 interface Props {
   router: NextRouter;
@@ -15,11 +14,8 @@ interface Props {
 const FindMultisigForm = (props: Props) => {
   const { state } = useAppContext();
   const [address, setAddress] = useState("");
-  const [_processing, setProcessing] = useState(false);
 
   const handleSearch = () => {
-    setProcessing(true);
-
     props.router.push(`/multi/${address}`);
   };
 

From 4448a31cf9ae34f872c48dd6baf4789acccd5bd3 Mon Sep 17 00:00:00 2001
From: abefernan <44572727+abefernan@users.noreply.github.com>
Date: Mon, 17 Apr 2023 16:50:42 +0200
Subject: [PATCH 10/15] Add loading states to connect and sign form

---
 components/forms/TransactionSigning.tsx | 184 ++++++++++++++----------
 1 file changed, 110 insertions(+), 74 deletions(-)

diff --git a/components/forms/TransactionSigning.tsx b/components/forms/TransactionSigning.tsx
index 46d6a73..62d7bfc 100644
--- a/components/forms/TransactionSigning.tsx
+++ b/components/forms/TransactionSigning.tsx
@@ -1,18 +1,22 @@
-import React, { useState } from "react";
-import axios from "axios";
+import { makeCosmoshubPath } from "@cosmjs/amino";
 import { toBase64 } from "@cosmjs/encoding";
+import { LedgerSigner } from "@cosmjs/ledger-amino";
 import { SigningStargateClient } from "@cosmjs/stargate";
 import { assert } from "@cosmjs/utils";
-
-import { useAppContext } from "../../context/AppContext";
-import Button from "../inputs/Button";
-import HashView from "../dataViews/HashView";
-import StackableContainer from "../layout/StackableContainer";
-import { DbSignature, DbTransaction, WalletAccount } from "../../types";
-
 import TransportWebUSB from "@ledgerhq/hw-transport-webusb";
-import { LedgerSigner } from "@cosmjs/ledger-amino";
-import { makeCosmoshubPath } from "@cosmjs/amino";
+import axios from "axios";
+import { useState } from "react";
+import { useAppContext } from "../../context/AppContext";
+import { DbSignature, DbTransaction, WalletAccount } from "../../types";
+import HashView from "../dataViews/HashView";
+import Button from "../inputs/Button";
+import StackableContainer from "../layout/StackableContainer";
+
+interface LoadingStates {
+  readonly signing?: boolean;
+  readonly keplr?: boolean;
+  readonly ledger?: boolean;
+}
 
 interface Props {
   signatures: DbSignature[];
@@ -28,10 +32,13 @@ const TransactionSigning = (props: Props) => {
   const [hasSigned, setHasSigned] = useState(false);
   const [walletType, setWalletType] = useState<"Keplr" | "Ledger">();
   const [ledgerSigner, setLedgerSigner] = useState({});
+  const [loading, setLoading] = useState<LoadingStates>({});
 
   const connectKeplr = async () => {
     try {
       assert(state.chain.chainId, "chainId missing");
+
+      setLoading((newLoading) => ({ ...newLoading, keplr: true }));
       await window.keplr.enable(state.chain.chainId);
       window.keplr.defaultOptions = {
         sign: { preferNoSetFee: true, preferNoSetMemo: true, disableBalanceCheck: true },
@@ -45,81 +52,102 @@ const TransactionSigning = (props: Props) => {
       setHasSigned(tempHasSigned);
       setWalletType("Keplr");
     } catch (e) {
-      console.log("enable err: ", e);
+      console.log("enable keplr err: ", e);
+    } finally {
+      setLoading((newLoading) => ({ ...newLoading, keplr: false }));
     }
   };
 
   const connectLedger = async () => {
-    assert(state.chain.addressPrefix, "addressPrefix missing");
+    try {
+      assert(state.chain.addressPrefix, "addressPrefix missing");
 
-    // Prepare ledger
-    const ledgerTransport = await TransportWebUSB.create(120000, 120000);
+      setLoading((newLoading) => ({ ...newLoading, ledger: true }));
+      // Prepare ledger
+      const ledgerTransport = await TransportWebUSB.create(120000, 120000);
 
-    // Setup signer
-    const offlineSigner = new LedgerSigner(ledgerTransport, {
-      hdPaths: [makeCosmoshubPath(0)],
-      prefix: state.chain.addressPrefix,
-    });
-    console.log(offlineSigner);
-    const accounts = await offlineSigner.getAccounts();
-    console.log(accounts);
-    const tempWalletAccount: WalletAccount = {
-      bech32Address: accounts[0].address,
-      pubkey: accounts[0].pubkey,
-      algo: accounts[0].algo,
-    };
+      // Setup signer
+      const offlineSigner = new LedgerSigner(ledgerTransport, {
+        hdPaths: [makeCosmoshubPath(0)],
+        prefix: state.chain.addressPrefix,
+      });
+      console.log(offlineSigner);
+      const accounts = await offlineSigner.getAccounts();
+      console.log(accounts);
+      const tempWalletAccount: WalletAccount = {
+        bech32Address: accounts[0].address,
+        pubkey: accounts[0].pubkey,
+        algo: accounts[0].algo,
+      };
 
-    const tempHasSigned = props.signatures.some(
-      (sig) => sig.address === tempWalletAccount.bech32Address,
-    );
-    setWalletAccount(tempWalletAccount);
-    setHasSigned(tempHasSigned);
-    setLedgerSigner(offlineSigner);
-    setWalletType("Ledger");
+      const tempHasSigned = props.signatures.some(
+        (sig) => sig.address === tempWalletAccount.bech32Address,
+      );
+      setWalletAccount(tempWalletAccount);
+      setHasSigned(tempHasSigned);
+      setLedgerSigner(offlineSigner);
+      setWalletType("Ledger");
+    } catch (e) {
+      console.log("enable ledger err: ", e);
+    } finally {
+      setLoading((newLoading) => ({ ...newLoading, ledger: false }));
+    }
   };
 
   const signTransaction = async () => {
     assert(state.chain.chainId, "chainId missing");
 
-    const offlineSigner =
-      walletType === "Keplr" ? window.getOfflineSignerOnlyAmino(state.chain.chainId) : ledgerSigner;
+    try {
+      setLoading((newLoading) => ({ ...newLoading, signing: true }));
+      const offlineSigner =
+        walletType === "Keplr"
+          ? window.getOfflineSignerOnlyAmino(state.chain.chainId)
+          : ledgerSigner;
 
-    const signerAddress = walletAccount?.bech32Address;
-    assert(signerAddress, "Missing signer address");
-    const signingClient = await SigningStargateClient.offline(offlineSigner);
+      const signerAddress = walletAccount?.bech32Address;
+      assert(signerAddress, "Missing signer address");
+      const signingClient = await SigningStargateClient.offline(offlineSigner);
 
-    const signerData = {
-      accountNumber: props.tx.accountNumber,
-      sequence: props.tx.sequence,
-      chainId: state.chain.chainId,
-    };
-
-    const { bodyBytes, signatures } = await signingClient.sign(
-      signerAddress,
-      props.tx.msgs,
-      props.tx.fee,
-      props.tx.memo,
-      signerData,
-    );
-
-    // check existing signatures
-    const bases64EncodedSignature = toBase64(signatures[0]);
-    const bases64EncodedBodyBytes = toBase64(bodyBytes);
-    const prevSigMatch = props.signatures.findIndex(
-      (signature) => signature.signature === bases64EncodedSignature,
-    );
-
-    if (prevSigMatch > -1) {
-      setSigError("This account has already signed.");
-    } else {
-      const signature = {
-        bodyBytes: bases64EncodedBodyBytes,
-        signature: bases64EncodedSignature,
-        address: signerAddress,
+      const signerData = {
+        accountNumber: props.tx.accountNumber,
+        sequence: props.tx.sequence,
+        chainId: state.chain.chainId,
       };
-      const _res = await axios.post(`/api/transaction/${props.transactionID}/signature`, signature);
-      props.addSignature(signature);
-      setHasSigned(true);
+
+      const { bodyBytes, signatures } = await signingClient.sign(
+        signerAddress,
+        props.tx.msgs,
+        props.tx.fee,
+        props.tx.memo,
+        signerData,
+      );
+
+      // check existing signatures
+      const bases64EncodedSignature = toBase64(signatures[0]);
+      const bases64EncodedBodyBytes = toBase64(bodyBytes);
+      const prevSigMatch = props.signatures.findIndex(
+        (signature) => signature.signature === bases64EncodedSignature,
+      );
+
+      if (prevSigMatch > -1) {
+        setSigError("This account has already signed.");
+      } else {
+        const signature = {
+          bodyBytes: bases64EncodedBodyBytes,
+          signature: bases64EncodedSignature,
+          address: signerAddress,
+        };
+        const _res = await axios.post(
+          `/api/transaction/${props.transactionID}/signature`,
+          signature,
+        );
+        props.addSignature(signature);
+        setHasSigned(true);
+      }
+    } catch (e) {
+      console.log("signing err: ", e);
+    } finally {
+      setLoading((newLoading) => ({ ...newLoading, signing: false }));
     }
   };
 
@@ -144,12 +172,20 @@ const TransactionSigning = (props: Props) => {
                   Connected signer {walletAccount.bech32Address} (
                   {walletType ?? "Unknown wallet type"}).
                 </p>
-                <Button label="Sign transaction" onClick={signTransaction} />
+                <Button
+                  label="Sign transaction"
+                  onClick={signTransaction}
+                  loading={loading.signing}
+                />
               </>
             ) : (
               <>
-                <Button label="Connect Keplr" onClick={connectKeplr} />
-                <Button label="Connect Ledger (WebUSB)" onClick={connectLedger} />
+                <Button label="Connect Keplr" onClick={connectKeplr} loading={loading.keplr} />
+                <Button
+                  label="Connect Ledger (WebUSB)"
+                  onClick={connectLedger}
+                  loading={loading.ledger}
+                />
               </>
             )}
           </StackableContainer>

From 0ffb2b4d3c1eeaa941c661e4d6c30b0dade51ed4 Mon Sep 17 00:00:00 2001
From: abefernan <44572727+abefernan@users.noreply.github.com>
Date: Mon, 17 Apr 2023 16:59:42 +0200
Subject: [PATCH 11/15] Consistent try and setLoading

---
 components/forms/TransactionSigning.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/forms/TransactionSigning.tsx b/components/forms/TransactionSigning.tsx
index 62d7bfc..2151b70 100644
--- a/components/forms/TransactionSigning.tsx
+++ b/components/forms/TransactionSigning.tsx
@@ -36,9 +36,9 @@ const TransactionSigning = (props: Props) => {
 
   const connectKeplr = async () => {
     try {
+      setLoading((newLoading) => ({ ...newLoading, keplr: true }));
       assert(state.chain.chainId, "chainId missing");
 
-      setLoading((newLoading) => ({ ...newLoading, keplr: true }));
       await window.keplr.enable(state.chain.chainId);
       window.keplr.defaultOptions = {
         sign: { preferNoSetFee: true, preferNoSetMemo: true, disableBalanceCheck: true },
@@ -60,9 +60,9 @@ const TransactionSigning = (props: Props) => {
 
   const connectLedger = async () => {
     try {
+      setLoading((newLoading) => ({ ...newLoading, ledger: true }));
       assert(state.chain.addressPrefix, "addressPrefix missing");
 
-      setLoading((newLoading) => ({ ...newLoading, ledger: true }));
       // Prepare ledger
       const ledgerTransport = await TransportWebUSB.create(120000, 120000);
 
@@ -95,10 +95,10 @@ const TransactionSigning = (props: Props) => {
   };
 
   const signTransaction = async () => {
-    assert(state.chain.chainId, "chainId missing");
-
     try {
       setLoading((newLoading) => ({ ...newLoading, signing: true }));
+      assert(state.chain.chainId, "chainId missing");
+
       const offlineSigner =
         walletType === "Keplr"
           ? window.getOfflineSignerOnlyAmino(state.chain.chainId)

From f25aa33e08d3fbaed69cc12a4e14e34e980e9f4b Mon Sep 17 00:00:00 2001
From: abefernan <44572727+abefernan@users.noreply.github.com>
Date: Tue, 18 Apr 2023 15:13:51 +0200
Subject: [PATCH 12/15] Add registry types

---
 components/chainSelect/chainregistry.ts | 53 +++++++++++++++++++++++--
 1 file changed, 50 insertions(+), 3 deletions(-)

diff --git a/components/chainSelect/chainregistry.ts b/components/chainSelect/chainregistry.ts
index ef1aa4a..d5db392 100644
--- a/components/chainSelect/chainregistry.ts
+++ b/components/chainSelect/chainregistry.ts
@@ -1,7 +1,49 @@
+import axios from "axios";
+
+export interface RegistryChainApisRpc {
+  readonly address: string;
+  readonly provider: string;
+}
+
+export interface RegistryChainApis {
+  readonly rpc: readonly RegistryChainApisRpc[];
+}
+
+export interface RegistryChainExplorer {
+  readonly kind: string;
+  readonly url: string;
+  readonly tx_page: string;
+}
+
+export interface RegistryChainFeeTokens {
+  readonly denom: string;
+  readonly average_gas_price?: number;
+  readonly low_gas_price?: number;
+  readonly high_gas_price?: number;
+  readonly fixed_min_gas_price?: number;
+}
+
+export interface RegistryChainFees {
+  readonly fee_tokens: readonly RegistryChainFeeTokens[];
+}
+
+export interface RegistryChain {
+  readonly apis: RegistryChainApis;
+  readonly bech32_prefix: string;
+  readonly chain_id: string;
+  readonly explorers: readonly RegistryChainExplorer[];
+  readonly fees: RegistryChainFees;
+  readonly pretty_name: string;
+}
+
+export interface RegistryChainResponse {
+  readonly data: RegistryChain;
+}
+
 /**
  * See https://github.com/cosmos/chain-registry/blob/1e9ecde770951cab90f0853a624411d79af90b83/provenance/assetlist.json#L8-L12
  */
-export interface ChainRegistryDemonUnit {
+export interface RegistryAssetDenomUnit {
   denom: string;
   exponent: number;
   aliases: string[];
@@ -10,9 +52,9 @@ export interface ChainRegistryDemonUnit {
 /**
  * See https://github.com/cosmos/chain-registry/blob/1e9ecde770951cab90f0853a624411d79af90b83/provenance/assetlist.json#L5-L28
  */
-export interface ChainRegistryAsset {
+export interface RegistryAsset {
   description: string;
-  denom_units: ChainRegistryDemonUnit[];
+  denom_units: RegistryAssetDenomUnit[];
   base: string;
   name: string;
   display: string;
@@ -23,3 +65,8 @@ export interface ChainRegistryAsset {
   };
   coingecko_id: string;
 }
+
+export interface RegistryAssetsResponse {
+  readonly data: { readonly assets: readonly RegistryAsset[] };
+}
+

From 9a023651228da2766ccf38031db84a92436da174 Mon Sep 17 00:00:00 2001
From: abefernan <44572727+abefernan@users.noreply.github.com>
Date: Tue, 18 Apr 2023 15:14:08 +0200
Subject: [PATCH 13/15] Add registry helpers

---
 components/chainSelect/chainregistry.ts | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/components/chainSelect/chainregistry.ts b/components/chainSelect/chainregistry.ts
index d5db392..1714f4c 100644
--- a/components/chainSelect/chainregistry.ts
+++ b/components/chainSelect/chainregistry.ts
@@ -70,3 +70,23 @@ export interface RegistryAssetsResponse {
   readonly data: { readonly assets: readonly RegistryAsset[] };
 }
 
+const registryGhUrl = "https://cdn.jsdelivr.net/gh/cosmos/chain-registry@master/";
+
+export const getChainFromRegistry = async (chainGhName: string): Promise<RegistryChain> => {
+  const chainGhUrl = registryGhUrl + chainGhName + "/chain.json";
+
+  const { data: chain }: RegistryChainResponse = await axios.get(chainGhUrl);
+  return chain;
+};
+
+export const getAssetsFromRegistry = async (
+  chainGhName: string,
+): Promise<readonly RegistryAsset[]> => {
+  const assetsGhUrl = registryGhUrl + chainGhName + "/assetlist.json";
+
+  const {
+    data: { assets },
+  }: RegistryAssetsResponse = await axios.get(assetsGhUrl);
+
+  return assets;
+};

From 6f5ae3e32f56bd21ad02d0da74a1f7aacb45f217 Mon Sep 17 00:00:00 2001
From: abefernan <44572727+abefernan@users.noreply.github.com>
Date: Tue, 18 Apr 2023 15:15:10 +0200
Subject: [PATCH 14/15] Refactor ChainSelect functions

---
 components/chainSelect/ChainSelect.tsx | 80 ++++++++++++--------------
 1 file changed, 37 insertions(+), 43 deletions(-)

diff --git a/components/chainSelect/ChainSelect.tsx b/components/chainSelect/ChainSelect.tsx
index 1c996fb..9ef95b4 100644
--- a/components/chainSelect/ChainSelect.tsx
+++ b/components/chainSelect/ChainSelect.tsx
@@ -8,7 +8,12 @@ import Button from "../inputs/Button";
 import Input from "../inputs/Input";
 import Select from "../inputs/Select";
 import StackableContainer from "../layout/StackableContainer";
-import { ChainRegistryAsset } from "./chainregistry";
+import {
+  RegistryChainApisRpc,
+  RegistryChainExplorer,
+  getAssetsFromRegistry,
+  getChainFromRegistry,
+} from "./chainregistry";
 
 interface ChainOption {
   label: string;
@@ -112,75 +117,64 @@ const ChainSelect = () => {
 
   const getChainInfo = async (chainOption: GithubChainRegistryItem) => {
     setChainError(null);
-    try {
-      const chainInfoUrl =
-        "https://cdn.jsdelivr.net/gh/cosmos/chain-registry@master/" +
-        chainOption.path +
-        "/chain.json";
-      const chainAssetUrl =
-        "https://cdn.jsdelivr.net/gh/cosmos/chain-registry@master/" +
-        chainOption.path +
-        "/assetlist.json";
 
-      const { data: chainData } = await axios.get(chainInfoUrl);
-      const { data: assetData } = await axios.get(chainAssetUrl);
+    try {
+      const chainData = await getChainFromRegistry(chainOption.path);
+      const assets = await getAssetsFromRegistry(chainOption.path);
+      const firstAsset = assets[0];
 
       const nodeAddress = await getNodeFromArray(chainData.apis.rpc);
-      const addressPrefix = chainData["bech32_prefix"];
-      const chainId = chainData["chain_id"];
-      const chainDisplayName = chainData["pretty_name"];
-      const registryName = chainOption.name;
       const explorerLink = getExplorerFromArray(chainData.explorers);
+      const denom = firstAsset.base || "";
+      const displayDenom = firstAsset.symbol || "";
 
-      const firstAsset: ChainRegistryAsset | undefined = assetData.assets?.[0];
-      const denom = firstAsset?.base || "";
-      const displayDenom = firstAsset?.symbol || "";
-      const feeToken =
-        chainData["fees"]?.fee_tokens.find((token: { denom: string }) => token.denom == denom) ??
-        {};
+      const displayUnit = firstAsset.denom_units.find((u) => u.denom == firstAsset.display);
+      const displayDenomExponent = displayUnit?.exponent ?? 6;
+
+      const feeToken = chainData.fees.fee_tokens.find((token) => token.denom == denom) ?? { denom };
       const gasPrice =
-        feeToken["average_gas_price"] ??
-        feeToken["low_gas_price"] ??
-        feeToken["high_gas_price"] ??
-        feeToken["fixed_min_gas_price"] ??
+        feeToken.average_gas_price ??
+        feeToken.low_gas_price ??
+        feeToken.high_gas_price ??
+        feeToken.fixed_min_gas_price ??
         0.03;
       const formattedGasPrice = firstAsset ? `${gasPrice}${denom}` : "";
-      const displayUnit = firstAsset?.denom_units.find((u) => u.denom == firstAsset.display);
-      const displayDenomExponent = displayUnit?.exponent ?? 6;
 
       // change app state
       dispatch({
         type: "changeChain",
         value: {
+          registryName: chainOption.name,
+          addressPrefix: chainData.bech32_prefix,
+          chainId: chainData.chain_id,
+          chainDisplayName: chainData.pretty_name,
           nodeAddress,
+          explorerLink,
           denom,
           displayDenom,
           displayDenomExponent,
           gasPrice: formattedGasPrice,
-          chainId,
-          chainDisplayName,
-          registryName,
-          addressPrefix,
-          explorerLink,
         },
       });
+
       setShowSettings(false);
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    } catch (error: any) {
-      console.log(error);
+    } catch (error) {
+      if (error instanceof Error) {
+        setChainError(error.message);
+      } else {
+        setChainError("Error getting chain info");
+      }
+
+      console.error("Error getting chain info", error);
       setShowSettings(true);
-      setChainError(error.toString());
     }
   };
 
-  const getExplorerFromArray = (array: { kind: string; url: string; tx_page: string }[]) => {
-    if (array && array.length > 0) {
-      return array[0]["tx_page"];
-    }
-    return "";
+  const getExplorerFromArray = (explorers: readonly RegistryChainExplorer[]) => {
+    return explorers[0]?.tx_page ?? "";
   };
 
-  const getNodeFromArray = async (nodeArray: { address: string; provider: string }[]) => {
+  const getNodeFromArray = async (nodeArray: readonly RegistryChainApisRpc[]) => {
     // only return https connections
     const secureNodes = nodeArray
       .filter((node) => node.address.startsWith("https://"))

From 65ce83a3cd141f9068c1f87436733832a423629c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Abel=20Fern=C3=A1ndez?=
 <44572727+abefernan@users.noreply.github.com>
Date: Wed, 19 Apr 2023 10:44:16 +0200
Subject: [PATCH 15/15] Fix old value name

Co-authored-by: Simon Warta <2603011+webmaster128@users.noreply.github.com>
---
 components/forms/TransactionSigning.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/forms/TransactionSigning.tsx b/components/forms/TransactionSigning.tsx
index 2151b70..f1b0c2d 100644
--- a/components/forms/TransactionSigning.tsx
+++ b/components/forms/TransactionSigning.tsx
@@ -36,7 +36,7 @@ const TransactionSigning = (props: Props) => {
 
   const connectKeplr = async () => {
     try {
-      setLoading((newLoading) => ({ ...newLoading, keplr: true }));
+      setLoading((oldLoading) => ({ ...oldLoading, keplr: true }));
       assert(state.chain.chainId, "chainId missing");
 
       await window.keplr.enable(state.chain.chainId);