Merge pull request #210 from magiodev/main

implement cosmwasm MsgUpdateAdmin msgType

components/dataViews/TransactionInfo/TxMsgUpdateAdminDetails.tsx

@@ -0,0 +1,61 @@
+import { MsgUpdateAdmin } from "cosmjs-types/cosmwasm/wasm/v1/tx";
+import HashView from "../HashView";
+
+interface TxMsgUpdateAdminDetailsProps {
+  readonly msgValue: MsgUpdateAdmin;
+}
+
+const TxMsgUpdateAdminDetails = ({ msgValue }: TxMsgUpdateAdminDetailsProps) => {
+  return (
+    <>
+      <li>
+        <h3>MsgUpdateAdmin</h3>
+      </li>
+      <li>
+        <label>Contract:</label>
+        <div title={msgValue.contract}>
+          <HashView hash={msgValue.contract} />
+        </div>
+      </li>
+      <li>
+        <label>New admin:</label>
+        <div title={msgValue.newAdmin}>
+          <HashView hash={msgValue.newAdmin} />
+        </div>
+      </li>
+      <style jsx>{`
+        li:not(:has(h3)) {
+          background: rgba(255, 255, 255, 0.03);
+          padding: 6px 10px;
+          border-radius: 8px;
+          display: flex;
+          align-items: center;
+        }
+        li + li:nth-child(2) {
+          margin-top: 25px;
+        }
+        li + li {
+          margin-top: 10px;
+        }
+        li div {
+          padding: 3px 6px;
+        }
+        label {
+          font-size: 12px;
+          background: rgba(255, 255, 255, 0.1);
+          padding: 3px 6px;
+          border-radius: 5px;
+          display: block;
+        }
+        .parse-error p {
+          max-width: 550px;
+          color: red;
+          font-size: 16px;
+          line-height: 1.4;
+        }
+      `}</style>
+    </>
+  );
+};
+
+export default TxMsgUpdateAdminDetails;

components/dataViews/TransactionInfo/index.tsx

@@ -16,6 +16,7 @@ import TxMsgSendDetails from "./TxMsgSendDetails";
 import TxMsgSetWithdrawAddressDetails from "./TxMsgSetWithdrawAddressDetails";
 import TxMsgTransferDetails from "./TxMsgTransferDetails";
 import TxMsgUndelegateDetails from "./TxMsgUndelegateDetails";
+import TxMsgUpdateAdminDetails from "./TxMsgUpdateAdminDetails";
 
 const TxMsgDetails = ({ typeUrl, value: msgValue }: EncodeObject) => {
   switch (typeUrl) {
@@ -43,6 +44,8 @@ const TxMsgDetails = ({ typeUrl, value: msgValue }: EncodeObject) => {
       return <TxMsgInstantiateContract2Details msgValue={msgValue} />;
     case MsgTypeUrls.Migrate:
       return <TxMsgMigrateContractDetails msgValue={msgValue} />;
+    case MsgTypeUrls.UpdateAdmin:
+      return <TxMsgUpdateAdminDetails msgValue={msgValue} />;
     default:
       return null;
   }

components/forms/CreateTxForm/MsgForm/MsgUpdateAdminForm.tsx

@@ -0,0 +1,129 @@
+import { MsgUpdateAdminEncodeObject } from "@cosmjs/cosmwasm-stargate";
+import { useEffect, useState } from "react";
+import { MsgGetter } from "..";
+import { useChains } from "../../../../context/ChainsContext";
+import { checkAddress, exampleAddress, trimStringsObj } from "../../../../lib/displayHelpers";
+import { MsgCodecs, MsgTypeUrls } from "../../../../types/txMsg";
+import Input from "../../../inputs/Input";
+import StackableContainer from "../../../layout/StackableContainer";
+
+interface MsgUpdateAdminFormProps {
+  readonly fromAddress: string;
+  readonly setMsgGetter: (msgGetter: MsgGetter) => void;
+  readonly deleteMsg: () => void;
+}
+
+const MsgUpdateAdminForm = ({ fromAddress, setMsgGetter, deleteMsg }: MsgUpdateAdminFormProps) => {
+  const { chain } = useChains();
+
+  const [contractAddress, setContractAddress] = useState("");
+  const [newAdminAddress, setNewAdminAddress] = useState("");
+
+  const [contractAddressError, setContractAddressError] = useState("");
+  const [newAdminAddressError, setNewAdminAddressError] = useState("");
+
+  const trimmedInputs = trimStringsObj({ contractAddress, newAdminAddress });
+
+  useEffect(() => {
+    // eslint-disable-next-line no-shadow
+    const { contractAddress, newAdminAddress } = trimmedInputs;
+
+    const isMsgValid = (): boolean => {
+      setContractAddressError("");
+      setNewAdminAddressError("");
+
+      const contractAddressErrorMsg = checkAddress(contractAddress, chain.addressPrefix);
+      if (contractAddressErrorMsg) {
+        setContractAddressError(
+          `Invalid address for network ${chain.chainId}: ${contractAddressErrorMsg}`,
+        );
+        return false;
+      }
+
+      const newAdminAddressErrorMsg = checkAddress(newAdminAddress, chain.addressPrefix);
+      if (newAdminAddressErrorMsg) {
+        setNewAdminAddressError(
+          `Invalid address for network ${chain.chainId}: ${newAdminAddressErrorMsg}`,
+        );
+        return false;
+      }
+
+      return true;
+    };
+
+    const msgValue = MsgCodecs[MsgTypeUrls.UpdateAdmin].fromPartial({
+      sender: fromAddress,
+      contract: contractAddress,
+      newAdmin: newAdminAddress,
+    });
+
+    const msg: MsgUpdateAdminEncodeObject = { typeUrl: MsgTypeUrls.UpdateAdmin, value: msgValue };
+
+    setMsgGetter({ isMsgValid, msg });
+  }, [chain.addressPrefix, chain.chainId, fromAddress, setMsgGetter, trimmedInputs]);
+
+  return (
+    <StackableContainer lessPadding lessMargin>
+      <button className="remove" onClick={() => deleteMsg()}>
+        ✕
+      </button>
+      <h2>MsgUpdateAdmin</h2>
+      <div className="form-item">
+        <Input
+          label="Contract Address"
+          name="contract-address"
+          value={contractAddress}
+          onChange={({ target }) => {
+            setContractAddress(target.value);
+            setContractAddressError("");
+          }}
+          error={contractAddressError}
+          placeholder={`E.g. ${exampleAddress(0, chain.addressPrefix)}`}
+        />
+      </div>
+      <div className="form-item">
+        <Input
+          label="New Admin"
+          name="new-admin"
+          value={newAdminAddress}
+          onChange={({ target }) => {
+            setNewAdminAddress(target.value);
+            setNewAdminAddressError("");
+          }}
+          error={newAdminAddressError}
+          placeholder={`E.g. ${exampleAddress(0, chain.addressPrefix)}`}
+        />
+      </div>
+      <style jsx>{`
+        .form-item {
+          margin-top: 1.5em;
+        }
+
+        .form-item label {
+          font-style: italic;
+          font-size: 12px;
+        }
+
+        .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;
+        }
+      `}</style>
+    </StackableContainer>
+  );
+};
+
+export default MsgUpdateAdminForm;

components/forms/CreateTxForm/MsgForm/index.tsx

@@ -12,6 +12,7 @@ import MsgSendForm from "./MsgSendForm";
 import MsgSetWithdrawAddressForm from "./MsgSetWithdrawAddressForm";
 import MsgTransferForm from "./MsgTransferForm";
 import MsgUndelegateForm from "./MsgUndelegateForm";
+import MsgUpdateAdminForm from "./MsgUpdateAdminForm";
 
 interface MsgFormProps {
   readonly msgType: MsgTypeUrl;
@@ -46,6 +47,8 @@ const MsgForm = ({ msgType, senderAddress, ...restProps }: MsgFormProps) => {
       return <MsgInstantiateContract2Form fromAddress={senderAddress} {...restProps} />;
     case MsgTypeUrls.Migrate:
       return <MsgMigrateContractForm fromAddress={senderAddress} {...restProps} />;
+    case MsgTypeUrls.UpdateAdmin:
+      return <MsgUpdateAdminForm fromAddress={senderAddress} {...restProps} />;
     default:
       return null;
   }

components/forms/CreateTxForm/index.tsx

@@ -254,6 +254,12 @@ const CreateTxForm = ({ router, senderAddress, accountOnChain }: CreateTxFormPro
             <li>
               <Button label="MigrateContract" onClick={() => addMsgType(MsgTypeUrls.Migrate)} />
             </li>
+            <li>
+              <Button
+                label="UpdateAdminContract"
+                onClick={() => addMsgType(MsgTypeUrls.UpdateAdmin)}
+              />
+            </li>
           </ul>
         </div>
       </div>

lib/txMsgHelpers.ts

@@ -30,6 +30,8 @@ const gasOfMsg = (msgType: MsgTypeUrl): number => {
       return 150_000;
     case MsgTypeUrls.Migrate:
       return 150_000;
+    case MsgTypeUrls.UpdateAdmin:
+      return 150_000;
     default:
       throw new Error("Unknown msg type");
   }

types/txMsg.ts

@@ -14,6 +14,7 @@ import {
   MsgInstantiateContract,
   MsgInstantiateContract2,
   MsgMigrateContract,
+  MsgUpdateAdmin,
 } from "cosmjs-types/cosmwasm/wasm/v1/tx";
 import { MsgTransfer } from "cosmjs-types/ibc/applications/transfer/v1/tx";
 
@@ -30,6 +31,7 @@ export const MsgTypeUrls = {
   Instantiate: "/cosmwasm.wasm.v1.MsgInstantiateContract",
   Instantiate2: "/cosmwasm.wasm.v1.MsgInstantiateContract2",
   Migrate: "/cosmwasm.wasm.v1.MsgMigrateContract",
+  UpdateAdmin: "/cosmwasm.wasm.v1.MsgUpdateAdmin",
 } as const;
 
 export type MsgTypeUrl = (typeof MsgTypeUrls)[keyof typeof MsgTypeUrls];
@@ -47,4 +49,5 @@ export const MsgCodecs = {
   [MsgTypeUrls.Instantiate]: MsgInstantiateContract,
   [MsgTypeUrls.Instantiate2]: MsgInstantiateContract2,
   [MsgTypeUrls.Migrate]: MsgMigrateContract,
+  [MsgTypeUrls.UpdateAdmin]: MsgUpdateAdmin,
 };