From 77ea4aac6c70592ba62dc1d327774227acf739df Mon Sep 17 00:00:00 2001
From: abefernan <44572727+abefernan@users.noreply.github.com>
Date: Tue, 11 Jun 2024 07:43:41 +0200
Subject: [PATCH] Add tweaks

---
 .../TxMsgUpdateAdminDetails.tsx               |  4 +-
 .../MsgForm/MsgUpdateAdminForm.tsx            | 91 ++++++++++---------
 .../forms/CreateTxForm/MsgForm/index.tsx      |  2 +-
 components/forms/CreateTxForm/index.tsx       |  5 +-
 lib/txMsgHelpers.ts                           |  3 +-
 types/txMsg.ts                                |  2 +-
 6 files changed, 57 insertions(+), 50 deletions(-)

diff --git a/components/dataViews/TransactionInfo/TxMsgUpdateAdminDetails.tsx b/components/dataViews/TransactionInfo/TxMsgUpdateAdminDetails.tsx
index 04e9e3f..9a7c1d8 100644
--- a/components/dataViews/TransactionInfo/TxMsgUpdateAdminDetails.tsx
+++ b/components/dataViews/TransactionInfo/TxMsgUpdateAdminDetails.tsx
@@ -19,7 +19,9 @@ const TxMsgUpdateAdminDetails = ({ msgValue }: TxMsgUpdateAdminDetailsProps) =>
       </li>
       <li>
         <label>New admin:</label>
-        <div>{msgValue.newAdmin.toString()}</div>
+        <div title={msgValue.newAdmin}>
+          <HashView hash={msgValue.newAdmin} />
+        </div>
       </li>
       <style jsx>{`
         li:not(:has(h3)) {
diff --git a/components/forms/CreateTxForm/MsgForm/MsgUpdateAdminForm.tsx b/components/forms/CreateTxForm/MsgForm/MsgUpdateAdminForm.tsx
index 066044b..ced812b 100644
--- a/components/forms/CreateTxForm/MsgForm/MsgUpdateAdminForm.tsx
+++ b/components/forms/CreateTxForm/MsgForm/MsgUpdateAdminForm.tsx
@@ -1,5 +1,5 @@
 import { MsgUpdateAdminEncodeObject } from "@cosmjs/cosmwasm-stargate";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 import { MsgGetter } from "..";
 import { useChains } from "../../../../context/ChainsContext";
 import { checkAddress, exampleAddress, trimStringsObj } from "../../../../lib/displayHelpers";
@@ -13,38 +13,38 @@ interface MsgUpdateAdminFormProps {
   readonly deleteMsg: () => void;
 }
 
-const MsgUpdateAdminForm = ({
-                                      fromAddress,
-                                      setMsgGetter,
-                                      deleteMsg,
-                                    }: MsgUpdateAdminFormProps) => {
+const MsgUpdateAdminForm = ({ fromAddress, setMsgGetter, deleteMsg }: MsgUpdateAdminFormProps) => {
   const { chain } = useChains();
 
   const [contractAddress, setContractAddress] = useState("");
-  const [newAdmin, setNewAdmin] = useState("");
+  const [newAdminAddress, setNewAdminAddress] = useState("");
 
   const [contractAddressError, setContractAddressError] = useState("");
-  const [codeIdError, setNewAdminError] = useState("");
+  const [newAdminAddressError, setNewAdminAddressError] = useState("");
 
-  const trimmedInputs = trimStringsObj({ contractAddress, newAdmin });
+  const trimmedInputs = trimStringsObj({ contractAddress, newAdminAddress });
 
   useEffect(() => {
     // eslint-disable-next-line no-shadow
-    const { contractAddress, newAdmin } = trimmedInputs;
+    const { contractAddress, newAdminAddress } = trimmedInputs;
 
     const isMsgValid = (): boolean => {
       setContractAddressError("");
-      setNewAdminError("");
+      setNewAdminAddressError("");
 
-      const addressErrorMsg = checkAddress(contractAddress, chain.addressPrefix);
-      if (addressErrorMsg) {
-        setContractAddressError(`Invalid address for network ${chain.chainId}: ${addressErrorMsg}`);
+      const contractAddressErrorMsg = checkAddress(contractAddress, chain.addressPrefix);
+      if (contractAddressErrorMsg) {
+        setContractAddressError(
+          `Invalid address for network ${chain.chainId}: ${contractAddressErrorMsg}`,
+        );
         return false;
       }
 
-      const newAdminErrorMsg = checkAddress(newAdmin, chain.addressPrefix);
-      if (newAdminErrorMsg) {
-        setNewAdminError("New admin should be a valid bech32 address.");
+      const newAdminAddressErrorMsg = checkAddress(newAdminAddress, chain.addressPrefix);
+      if (newAdminAddressErrorMsg) {
+        setNewAdminAddressError(
+          `Invalid address for network ${chain.chainId}: ${newAdminAddressErrorMsg}`,
+        );
         return false;
       }
 
@@ -54,7 +54,7 @@ const MsgUpdateAdminForm = ({
     const msgValue = MsgCodecs[MsgTypeUrls.UpdateAdmin].fromPartial({
       sender: fromAddress,
       contract: contractAddress,
-      newAdmin: newAdmin,
+      newAdmin: newAdminAddress,
     });
 
     const msg: MsgUpdateAdminEncodeObject = { typeUrl: MsgTypeUrls.UpdateAdmin, value: msgValue };
@@ -85,41 +85,42 @@ const MsgUpdateAdminForm = ({
         <Input
           label="New Admin"
           name="new-admin"
-          value={newAdmin}
+          value={newAdminAddress}
           onChange={({ target }) => {
-            setNewAdmin(target.value);
-            setNewAdminError("");
+            setNewAdminAddress(target.value);
+            setNewAdminAddressError("");
           }}
-          error={codeIdError}
+          error={newAdminAddressError}
+          placeholder={`E.g. ${exampleAddress(0, chain.addressPrefix)}`}
         />
       </div>
       <style jsx>{`
-          .form-item {
-              margin-top: 1.5em;
-          }
+        .form-item {
+          margin-top: 1.5em;
+        }
 
-          .form-item label {
-              font-style: italic;
-              font-size: 12px;
-          }
+        .form-item label {
+          font-style: italic;
+          font-size: 12px;
+        }
 
-          .form-select {
-              display: flex;
-              flex-direction: column;
-              gap: 0.8em;
-          }
+        .form-select {
+          display: flex;
+          flex-direction: column;
+          gap: 0.8em;
+        }
 
-          button.remove {
-              background: rgba(255, 255, 255, 0.2);
-              width: 30px;
-              height: 30px;
-              border-radius: 50%;
-              border: none;
-              color: white;
-              position: absolute;
-              right: 10px;
-              top: 10px;
-          }
+        button.remove {
+          background: rgba(255, 255, 255, 0.2);
+          width: 30px;
+          height: 30px;
+          border-radius: 50%;
+          border: none;
+          color: white;
+          position: absolute;
+          right: 10px;
+          top: 10px;
+        }
       `}</style>
     </StackableContainer>
   );
diff --git a/components/forms/CreateTxForm/MsgForm/index.tsx b/components/forms/CreateTxForm/MsgForm/index.tsx
index 11da8d3..82c840a 100644
--- a/components/forms/CreateTxForm/MsgForm/index.tsx
+++ b/components/forms/CreateTxForm/MsgForm/index.tsx
@@ -12,7 +12,7 @@ import MsgSendForm from "./MsgSendForm";
 import MsgSetWithdrawAddressForm from "./MsgSetWithdrawAddressForm";
 import MsgTransferForm from "./MsgTransferForm";
 import MsgUndelegateForm from "./MsgUndelegateForm";
-import MsgUpdateAdminForm from "@/components/forms/CreateTxForm/MsgForm/MsgUpdateAdminForm";
+import MsgUpdateAdminForm from "./MsgUpdateAdminForm";
 
 interface MsgFormProps {
   readonly msgType: MsgTypeUrl;
diff --git a/components/forms/CreateTxForm/index.tsx b/components/forms/CreateTxForm/index.tsx
index c575686..10e50a4 100644
--- a/components/forms/CreateTxForm/index.tsx
+++ b/components/forms/CreateTxForm/index.tsx
@@ -255,7 +255,10 @@ const CreateTxForm = ({ router, senderAddress, accountOnChain }: CreateTxFormPro
               <Button label="MigrateContract" onClick={() => addMsgType(MsgTypeUrls.Migrate)} />
             </li>
             <li>
-              <Button label="UpdateAdminContract" onClick={() => addMsgType(MsgTypeUrls.UpdateAdmin)} />
+              <Button
+                label="UpdateAdminContract"
+                onClick={() => addMsgType(MsgTypeUrls.UpdateAdmin)}
+              />
             </li>
           </ul>
         </div>
diff --git a/lib/txMsgHelpers.ts b/lib/txMsgHelpers.ts
index e4022e6..3fa8f2c 100644
--- a/lib/txMsgHelpers.ts
+++ b/lib/txMsgHelpers.ts
@@ -39,7 +39,8 @@ const gasOfMsg = (msgType: MsgTypeUrl): number => {
 
 export const gasOfTx = (msgTypes: readonly MsgTypeUrl[]): number => {
   const txFlatGas = 100_000;
-  return msgTypes.reduce((acc, msgType) => acc + gasOfMsg(msgType), txFlatGas);
+  const totalTxGas = msgTypes.reduce((acc, msgType) => acc + gasOfMsg(msgType), txFlatGas);
+  return totalTxGas;
 };
 
 export const isKnownMsgTypeUrl = (typeUrl: string): typeUrl is MsgTypeUrl =>
diff --git a/types/txMsg.ts b/types/txMsg.ts
index 129d3ab..00a4f0c 100644
--- a/types/txMsg.ts
+++ b/types/txMsg.ts
@@ -14,7 +14,7 @@ import {
   MsgInstantiateContract,
   MsgInstantiateContract2,
   MsgMigrateContract,
-  MsgUpdateAdmin
+  MsgUpdateAdmin,
 } from "cosmjs-types/cosmwasm/wasm/v1/tx";
 import { MsgTransfer } from "cosmjs-types/ibc/applications/transfer/v1/tx";