Merge pull request #123 from cosmos/feat/set-withdraw-address

Support set withdraw address

components/dataViews/TransactionInfo/TxMsgSetWithdrawAddressDetails.tsx

@@ -0,0 +1,47 @@
+import { TxMsgSetWithdrawAddress } from "../../../types/txMsg";
+import HashView from "../HashView";
+
+interface TxMsgSetWithdrawAddressDetailsProps {
+  readonly msg: TxMsgSetWithdrawAddress;
+}
+
+const TxMsgSetWithdrawAddressDetails = ({ msg }: TxMsgSetWithdrawAddressDetailsProps) => (
+  <>
+    <li>
+      <h2>MsgSetWithdrawAddress</h2>
+    </li>
+    <li>
+      <label>Withdraw Address:</label>
+      <div title={msg.value.withdrawAddress}>
+        <HashView hash={msg.value.withdrawAddress} />
+      </div>
+    </li>
+    <style jsx>{`
+      li:not(:has(h2)) {
+        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;
+      }
+    `}</style>
+  </>
+);
+
+export default TxMsgSetWithdrawAddressDetails;

components/dataViews/TransactionInfo/index.tsx

@@ -5,6 +5,7 @@ import {
   isTxMsgDelegate,
   isTxMsgRedelegate,
   isTxMsgSend,
+  isTxMsgSetWithdrawAddress,
   isTxMsgUndelegate,
 } from "../../../lib/txMsgHelpers";
 import { DbTransaction } from "../../../types";
@@ -13,6 +14,7 @@ import TxMsgClaimRewardsDetails from "./TxMsgClaimRewardsDetails";
 import TxMsgDelegateDetails from "./TxMsgDelegateDetails";
 import TxMsgRedelegateDetails from "./TxMsgRedelegateDetails";
 import TxMsgSendDetails from "./TxMsgSendDetails";
+import TxMsgSetWithdrawAddressDetails from "./TxMsgSetWithdrawAddressDetails";
 import TxMsgUndelegateDetails from "./TxMsgUndelegateDetails";
 
 interface Props {
@@ -33,6 +35,7 @@ const TransactionInfo = ({ tx }: Props) => {
               {isTxMsgUndelegate(msg) ? <TxMsgUndelegateDetails msg={msg} /> : null}
               {isTxMsgRedelegate(msg) ? <TxMsgRedelegateDetails msg={msg} /> : null}
               {isTxMsgClaimRewards(msg) ? <TxMsgClaimRewardsDetails msg={msg} /> : null}
+              {isTxMsgSetWithdrawAddress(msg) ? <TxMsgSetWithdrawAddressDetails msg={msg} /> : null}
             </StackableContainer>
           ))}
           <StackableContainer lessPadding lessMargin>

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"

lib/txMsgHelpers.ts

@@ -5,6 +5,7 @@ import {
   TxMsgDelegate,
   TxMsgRedelegate,
   TxMsgSend,
+  TxMsgSetWithdrawAddress,
   TxMsgUndelegate,
 } from "../types/txMsg";
 
@@ -58,4 +59,19 @@ const isTxMsgClaimRewards = (msg: TxMsg | EncodeObject): msg is TxMsgClaimReward
   !!msg.value.delegatorAddress &&
   !!msg.value.validatorAddress;
 
-export { isTxMsgSend, isTxMsgDelegate, isTxMsgUndelegate, isTxMsgRedelegate, isTxMsgClaimRewards };
+const isTxMsgSetWithdrawAddress = (msg: TxMsg | EncodeObject): msg is TxMsgSetWithdrawAddress =>
+  msg.typeUrl === "/cosmos.distribution.v1beta1.MsgSetWithdrawAddress" &&
+  "value" in msg &&
+  "delegatorAddress" in msg.value &&
+  "withdrawAddress" in msg.value &&
+  !!msg.value.delegatorAddress &&
+  !!msg.value.withdrawAddress;
+
+export {
+  isTxMsgSend,
+  isTxMsgDelegate,
+  isTxMsgUndelegate,
+  isTxMsgRedelegate,
+  isTxMsgClaimRewards,
+  isTxMsgSetWithdrawAddress,
+};

types/txMsg.ts

@@ -1,11 +1,18 @@
-export type TxType = "send" | "delegate" | "undelegate" | "redelegate" | "claimRewards";
+export type TxType =
+  | "send"
+  | "delegate"
+  | "undelegate"
+  | "redelegate"
+  | "claimRewards"
+  | "setWithdrawAddress";
 
 export type TxMsg =
   | TxMsgSend
   | TxMsgDelegate
   | TxMsgUndelegate
   | TxMsgRedelegate
-  | TxMsgClaimRewards;
+  | TxMsgClaimRewards
+  | TxMsgSetWithdrawAddress;
 
 export interface TxMsgSend {
   readonly typeUrl: "/cosmos.bank.v1beta1.MsgSend";
@@ -51,3 +58,11 @@ export interface TxMsgClaimRewards {
     readonly validatorAddress: string;
   };
 }
+
+export interface TxMsgSetWithdrawAddress {
+  readonly typeUrl: "/cosmos.distribution.v1beta1.MsgSetWithdrawAddress";
+  readonly value: {
+    readonly delegatorAddress: string;
+    readonly withdrawAddress: string;
+  };
+}