Add and use MsgSetWithdrawAddressForm

components/forms/CreateTxForm/MsgForm/MsgSetWithdrawAddressForm.tsx

@@ -0,0 +1,97 @@
+import { assert } from "@cosmjs/utils";
+import { useEffect, useState } from "react";
+import { MsgGetter } from "..";
+import { useAppContext } from "../../../../context/AppContext";
+import { checkAddress, exampleAddress } from "../../../../lib/displayHelpers";
+import { isTxMsgSetWithdrawAddress } from "../../../../lib/txMsgHelpers";
+import { TxMsg, TxMsgSetWithdrawAddress } from "../../../../types/txMsg";
+import Input from "../../../inputs/Input";
+import StackableContainer from "../../../layout/StackableContainer";
+
+interface MsgSetWithdrawAddressFormProps {
+  readonly delegatorAddress: string;
+  readonly setMsgGetter: (msgGetter: MsgGetter) => void;
+  readonly deleteMsg: () => void;
+}
+
+const MsgSetWithdrawAddressForm = ({
+  delegatorAddress,
+  setMsgGetter,
+  deleteMsg,
+}: MsgSetWithdrawAddressFormProps) => {
+  const { state } = useAppContext();
+  assert(state.chain.addressPrefix, "addressPrefix missing");
+
+  const [withdrawAddress, setWithdrawAddress] = useState("");
+  const [withdrawAddressError, setWithdrawAddressError] = useState("");
+
+  useEffect(() => {
+    try {
+      setWithdrawAddressError("");
+
+      const isMsgValid = (msg: TxMsg): msg is TxMsgSetWithdrawAddress => {
+        assert(state.chain.addressPrefix, "addressPrefix missing");
+
+        const addressErrorMsg = checkAddress(withdrawAddress, state.chain.addressPrefix);
+        if (addressErrorMsg) {
+          setWithdrawAddressError(
+            `Invalid address for network ${state.chain.chainId}: ${addressErrorMsg}`,
+          );
+          return false;
+        }
+
+        return isTxMsgSetWithdrawAddress(msg);
+      };
+
+      const msg: TxMsgSetWithdrawAddress = {
+        typeUrl: "/cosmos.distribution.v1beta1.MsgSetWithdrawAddress",
+        value: { delegatorAddress, withdrawAddress },
+      };
+
+      setMsgGetter({ isMsgValid, msg });
+    } catch {}
+  }, [
+    delegatorAddress,
+    setMsgGetter,
+    state.chain.addressPrefix,
+    state.chain.chainId,
+    withdrawAddress,
+  ]);
+
+  return (
+    <StackableContainer lessPadding lessMargin>
+      <button className="remove" onClick={() => deleteMsg()}>
+        ✕
+      </button>
+      <h2>MsgSetWithdrawAddress</h2>
+      <div className="form-item">
+        <Input
+          label="Withdraw Address"
+          name="withdraw-address"
+          value={withdrawAddress}
+          onChange={({ target }) => setWithdrawAddress(target.value)}
+          error={withdrawAddressError}
+          placeholder={`E.g. ${exampleAddress(0, state.chain.addressPrefix)}`}
+        />
+      </div>
+      <style jsx>{`
+        .form-item {
+          margin-top: 1.5em;
+        }
+        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 MsgSetWithdrawAddressForm;

components/forms/CreateTxForm/MsgForm/index.tsx

@@ -4,6 +4,7 @@ import MsgClaimRewardsForm from "./MsgClaimRewardsForm";
 import MsgDelegateForm from "./MsgDelegateForm";
 import MsgRedelegateForm from "./MsgRedelegateForm";
 import MsgSendForm from "./MsgSendForm";
+import MsgSetWithdrawAddressForm from "./MsgSetWithdrawAddressForm";
 import MsgUndelegateForm from "./MsgUndelegateForm";
 
 type MsgFormProps = {
@@ -26,6 +27,8 @@ const MsgForm = ({ txType, senderAddress, ...restProps }: MsgFormProps) => {
       return <MsgRedelegateForm delegatorAddress={senderAddress} {...restProps} />;
     case "claimRewards":
       return <MsgClaimRewardsForm delegatorAddress={senderAddress} {...restProps} />;
+    case "setWithdrawAddress":
+      return <MsgSetWithdrawAddressForm delegatorAddress={senderAddress} {...restProps} />;
     default:
       return null;
   }

components/forms/CreateTxForm/index.tsx

@@ -145,6 +145,7 @@ const CreateTxForm = ({ router, senderAddress, accountOnChain }: CreateTxFormPro
         <Button label="Add MsgUndelegate" onClick={() => addTxType("undelegate")} />
         <Button label="Add MsgBeginRedelegate" onClick={() => addTxType("redelegate")} />
         <Button label="Add MsgWithdrawDelegatorReward" onClick={() => addTxType("claimRewards")} />
+        <Button label="Add MsgSetWithdrawAddress" onClick={() => addTxType("setWithdrawAddress")} />
       </StackableContainer>
       <Button
         label="Create Transaction"