undelegate

components/forms/FlexibleTransactionForm.js

@@ -11,6 +11,7 @@ import { json } from "@codemirror/lang-json";
 import * as dark from "@codemirror/theme-one-dark";
 import CodeMirror from "@uiw/react-codemirror";
 import MsgDelegate from "../messages/MsgDelegate";
+import MsgUndelegate from "../messages/MsgUndelegate";
 import MsgRedelegate from "../messages/MsgRedelegate";
 import MsgVote from "../messages/MsgVote";
 
@@ -38,6 +39,24 @@ function blankDelegateJSON(delegatorAddress) {
   );
 }
 
+function blankUndelegateJSON(delegatorAddress) {
+  return JSON.stringify(
+    {
+      typeUrl: "/cosmos.staking.v1beta1.MsgUndelegate",
+      value: {
+        delegatorAddress,
+        validatorAddress: "",
+        amount: {
+          denom: "uumee",
+          amount: "0",
+        },
+      },
+    },
+    null,
+    2,
+  );
+}
+
 function blankRedelegateJSON(delegatorAddress) {
   return JSON.stringify(
     {
@@ -82,8 +101,9 @@ const FlexibleTransactionForm = (props) => {
       if (!props.msgs) {
         return {
           0: blankDelegateJSON(props.address),
-          1: blankRedelegateJSON(props.address),
-          2: blankVoteJSON(props.address, -1),
+          1: blankUndelegateJSON(props.address),
+          2: blankRedelegateJSON(props.address),
+          3: blankVoteJSON(props.address, -1),
         };
       }
 
@@ -152,6 +172,8 @@ const FlexibleTransactionForm = (props) => {
     switch (msg.typeUrl) {
       case "/cosmos.staking.v1beta1.MsgDelegate":
         return <MsgDelegate msg={msg} onMsgChange={onMsgChange} onCheck={onCheck} />;
+      case "/cosmos.staking.v1beta1.MsgUndelegate":
+        return <MsgUndelegate msg={msg} onMsgChange={onMsgChange} onCheck={onCheck} />;
       case "/cosmos.staking.v1beta1.MsgBeginRedelegate":
         return <MsgRedelegate msg={msg} onMsgChange={onMsgChange} onCheck={onCheck} />;
       case "/cosmos.gov.v1beta1.MsgVote":

components/messages/MsgUndelegate.js

@@ -0,0 +1,114 @@
+import React, { useState, useEffect } from "react";
+
+import { useAppContext } from "../../context/AppContext";
+import Input from "../../components/inputs/Input";
+import { checkAddress, exampleAddress } from "../../lib/displayHelpers";
+
+const MsgUnDelegate = (props) => {
+  const onMsgChange = props.onMsgChange || (() => {});
+  const onCheck = props.onCheck || (() => {});
+  const { state } = useAppContext();
+  const [validatorAddressError, setValidatorAddressError] = useState("");
+  const [delegatorAddressError, setDelegatorAddressError] = useState("");
+  // const [amountError, setAmountError] = useState("");
+
+  function checkMsg(msg, updateInternalErrors) {
+    if (!msg) return false;
+    if (!msg.typeUrl) return false;
+    if (!msg.value) return false;
+
+    const v = msg.value;
+    if (!v.amount) return false;
+    if (!v.amount.denom) return false;
+    if (!v.amount.amount) return false;
+
+    const toValidatorAddressError = checkAddress(
+      v.validatorAddress,
+      state.chain.addressPrefix + "valoper",
+    );
+    if (updateInternalErrors) {
+      if (toValidatorAddressError) {
+        const errorMsg = `Invalid validator address for network ${state.chain.chainId}: ${toValidatorAddressError}`;
+        setValidatorAddressError(errorMsg);
+      } else {
+        setValidatorAddressError("");
+      }
+    }
+    const toDelegatorAddressError = checkAddress(v.delegatorAddress, state.chain.addressPrefix);
+    if (updateInternalErrors) {
+      if (toDelegatorAddressError) {
+        const errorMsg = `Invalid delegator address for network ${state.chain.chainId}: ${toDelegatorAddressError}`;
+        setDelegatorAddressError(errorMsg);
+      } else {
+        setDelegatorAddressError("");
+      }
+    }
+    if (toValidatorAddressError || toDelegatorAddressError) {
+      return false;
+    }
+
+    return true;
+  }
+
+  function checkAndSetAmount(newAmount) {
+    const newMsg = JSON.parse(JSON.stringify(props.msg));
+    newMsg.value.amount.amount = newAmount;
+    onMsgChange(newMsg);
+    onCheck(checkMsg(newMsg, true));
+  }
+
+  function checkAndSetValidatorAddress(valaddr) {
+    const newMsg = JSON.parse(JSON.stringify(props.msg));
+    newMsg.value.validatorAddress = valaddr;
+    onMsgChange(newMsg);
+    onCheck(checkMsg(newMsg, true));
+  }
+
+  useEffect(() => {
+    onCheck(checkMsg(props.msg, false));
+  }, []);
+
+  return (
+    <div>
+      <h2>Undelegate (warning: unbonding period)</h2>
+      <div className="form-item">
+        <Input
+          label="Delegator Address"
+          name="delegatorAddress"
+          value={props.msg.value.delegatorAddress}
+          disabled={true}
+          error={delegatorAddressError}
+        />
+      </div>
+      <div className="form-item">
+        <Input
+          label="Validator Address"
+          name="validatorAddress"
+          value={props.msg.value.validatorAddress}
+          onChange={(e) => checkAndSetValidatorAddress(e.target.value)}
+          error={validatorAddressError}
+          placeholder={`E.g. ${exampleAddress(0, state.chain.addressPrefix + "valoper")}`}
+        />
+      </div>
+      <div className="form-item">
+        <Input
+          label={`Amount (${props.msg.value.amount.denom})`}
+          name="amount"
+          type="number"
+          value={props.msg.value.amount.amount}
+          onChange={(e) => checkAndSetAmount(e.target.value)}
+        />
+      </div>
+      <style jsx>{`
+        p {
+          margin-top: 15px;
+        }
+        .form-item {
+          margin-top: 1.5em;
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default MsgUnDelegate;