From d03159488e52c57d4d90910d5408ea64c5f8dee8 Mon Sep 17 00:00:00 2001
From: Simon Warta <simon@warta.it>
Date: Wed, 15 Jun 2022 14:06:24 +0200
Subject: [PATCH 1/2] Show info about connected signer above signing button

---
 components/forms/TransactionSigning.tsx | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/components/forms/TransactionSigning.tsx b/components/forms/TransactionSigning.tsx
index 3474445..a0d2d78 100644
--- a/components/forms/TransactionSigning.tsx
+++ b/components/forms/TransactionSigning.tsx
@@ -26,7 +26,7 @@ const TransactionSigning = (props: Props) => {
   const [walletAccount, setWalletAccount] = useState<WalletAccount>();
   const [sigError, setSigError] = useState("");
   const [hasSigned, setHasSigned] = useState(false);
-  const [walletType, setWalletType] = useState("");
+  const [walletType, setWalletType] = useState<"Keplr" | "Ledger">();
   const [ledgerSigner, setLedgerSigner] = useState({});
 
   const connectKeplr = async () => {
@@ -40,7 +40,7 @@ const TransactionSigning = (props: Props) => {
       );
       setWalletAccount(tempWalletAccount);
       setHasSigned(tempHasSigned);
-      setWalletType("keplr");
+      setWalletType("Keplr");
     } catch (e) {
       console.log("enable err: ", e);
     }
@@ -72,14 +72,14 @@ const TransactionSigning = (props: Props) => {
     setWalletAccount(tempWalletAccount);
     setHasSigned(tempHasSigned);
     setLedgerSigner(offlineSigner);
-    setWalletType("ledger");
+    setWalletType("Ledger");
   };
 
   const signTransaction = async () => {
     assert(state.chain.chainId, "chainId missing");
 
     const offlineSigner =
-      walletType === "keplr" ? window.getOfflineSignerOnlyAmino(state.chain.chainId) : ledgerSigner;
+      walletType === "Keplr" ? window.getOfflineSignerOnlyAmino(state.chain.chainId) : ledgerSigner;
 
     const signerAddress = walletAccount?.bech32Address;
     assert(signerAddress, "Missing signer address");
@@ -135,7 +135,13 @@ const TransactionSigning = (props: Props) => {
         <>
           <h2>Sign this transaction</h2>
           {walletAccount ? (
-            <Button label="Sign transaction" onClick={signTransaction} />
+            <>
+              <p>
+                Connected signer {walletAccount.bech32Address} (
+                {walletType ?? "Unknown wallet type"}).
+              </p>
+              <Button label="Sign transaction" onClick={signTransaction} />
+            </>
           ) : (
             <>
               <Button label="Connect Keplr" onClick={connectKeplr} />

From 7802393e80fb6652aedc4d4ae967273712b863e1 Mon Sep 17 00:00:00 2001
From: Simon Warta <simon@warta.it>
Date: Wed, 15 Jun 2022 14:28:52 +0200
Subject: [PATCH 2/2] Show connected address

---
 components/forms/TransactionSigning.tsx | 30 +++++++++++++------------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/components/forms/TransactionSigning.tsx b/components/forms/TransactionSigning.tsx
index a0d2d78..290d148 100644
--- a/components/forms/TransactionSigning.tsx
+++ b/components/forms/TransactionSigning.tsx
@@ -134,20 +134,22 @@ const TransactionSigning = (props: Props) => {
       ) : (
         <>
           <h2>Sign this transaction</h2>
-          {walletAccount ? (
-            <>
-              <p>
-                Connected signer {walletAccount.bech32Address} (
-                {walletType ?? "Unknown wallet type"}).
-              </p>
-              <Button label="Sign transaction" onClick={signTransaction} />
-            </>
-          ) : (
-            <>
-              <Button label="Connect Keplr" onClick={connectKeplr} />
-              <Button label="Connect Ledger" onClick={connectLedger} />
-            </>
-          )}
+          <StackableContainer lessPadding lessMargin lessRadius>
+            {walletAccount ? (
+              <>
+                <p>
+                  Connected signer {walletAccount.bech32Address} (
+                  {walletType ?? "Unknown wallet type"}).
+                </p>
+                <Button label="Sign transaction" onClick={signTransaction} />
+              </>
+            ) : (
+              <>
+                <Button label="Connect Keplr" onClick={connectKeplr} />
+                <Button label="Connect Ledger (WebUSB)" onClick={connectLedger} />
+              </>
+            )}
+          </StackableContainer>
         </>
       )}
       {sigError && (