Add vesting support

components/forms/TransactionSigning.js

@@ -1,8 +1,7 @@
 import React, { useState, useEffect } from "react";
 import axios from "axios";
 import { toBase64 } from "@cosmjs/encoding";
-import { SigningStargateClient } from "@cosmjs/stargate";
-
+import { AminoTypes, SigningStargateClient } from "@cosmjs/stargate";
 import { useAppContext } from "../../context/AppContext";
 import Button from "../inputs/Button";
 import HashView from "../dataViews/HashView";
@@ -41,8 +40,42 @@ const TransactionSigning = (props) => {
           disableBalanceCheck: true,
         },
       };
+      const options = {
+        aminoTypes: new AminoTypes({
+          "/cosmos.vesting.v1beta1.MsgCreateVestingAccount": {
+            aminoType: "cosmos-sdk/MsgCreateVestingAccount",
+            toAmino: ({ fromAddress, toAddress, amount, endTime, delayed }) => ({
+              from_address: fromAddress,
+              to_address: toAddress,
+              amount: [...amount],
+              end_time: endTime,
+              delayed: delayed,
+            }),
+            fromAmino: ({ from_address, to_address, amount, end_time, delayed }) => ({
+              fromAddress: from_address,
+              toAddress: to_address,
+              amount: [...amount],
+              endTime: end_time,
+              delayed: delayed,
+            }),
+          },
+          "/cosmos.bank.v1beta1.MsgSend": {
+            aminoType: "cosmos-sdk/MsgSend",
+            toAmino: ({ fromAddress, toAddress, amount }) => ({
+              from_address: fromAddress,
+              to_address: toAddress,
+              amount: [...amount],
+            }),
+            fromAmino: ({ from_address, to_address, amount }) => ({
+              fromAddress: from_address,
+              toAddress: to_address,
+              amount: [...amount],
+            }),
+          },
+        }),
+      };
       const offlineSigner = window.getOfflineSignerOnlyAmino(state.chain.chainId);
-      const signingClient = await SigningStargateClient.offline(offlineSigner);
+      const signingClient = await SigningStargateClient.offline(offlineSigner, options);
       const signerData = {
         accountNumber: props.tx.accountNumber,
         sequence: props.tx.sequence,

components/forms/VestingForm.js

@@ -0,0 +1,163 @@
+import axios from "axios";
+import { calculateFee } from "@cosmjs/stargate";
+import { Decimal } from "@cosmjs/math";
+import React, { useState } from "react";
+import { withRouter } from "next/router";
+
+import { useAppContext } from "../../context/AppContext";
+import Button from "../../components/inputs/Button";
+import Input from "../../components/inputs/Input";
+import StackableContainer from "../layout/StackableContainer";
+import { checkAddress, exampleAddress } from "../../lib/displayHelpers";
+
+const VestingForm = (props) => {
+  const { state } = useAppContext();
+  const [toAddress, setToAddress] = useState("");
+  const [amount, setAmount] = useState("0");
+  const [unixEpochTime, setUnixEpochTime] = useState("0");
+  const [delayed, setDelayed] = useState(true);
+  const [memo, setMemo] = useState("");
+  const [gas, setGas] = useState(200000);
+  const [gasPrice, _setGasPrice] = useState(state.chain.gasPrice);
+  const [_processing, setProcessing] = useState(false);
+  const [addressError, setAddressError] = useState("");
+
+  const createTransaction = (txToAddress, txAmount, txGas, txEndTime) => {
+    const amountInAtomics = Decimal.fromUserInput(
+      txAmount,
+      Number(state.chain.displayDenomExponent),
+    ).atomics;
+    const msgCreateVestingAccount = {
+      fromAddress: props.address,
+      toAddress: txToAddress,
+      endTime: txEndTime,
+      amount: [
+        {
+          amount: amountInAtomics,
+          denom: state.chain.denom,
+        },
+      ],
+      delayed: delayed,
+    };
+    const msg = {
+      typeUrl: "/cosmos.vesting.v1beta1.MsgCreateVestingAccount",
+      value: msgCreateVestingAccount,
+    };
+    const fee = calculateFee(Number(txGas), gasPrice);
+    return {
+      accountNumber: props.accountOnChain.accountNumber,
+      sequence: props.accountOnChain.sequence,
+      chainId: state.chain.chainId,
+      msgs: [msg],
+      fee: fee,
+      memo: memo,
+    };
+  };
+
+  const handleCreate = async () => {
+    const toAddressError = checkAddress(toAddress, state.chain.addressPrefix);
+    if (toAddressError) {
+      setAddressError(`Invalid address for network ${state.chain.chainId}: ${toAddressError}`);
+      return;
+    }
+
+    setProcessing(true);
+    const tx = createTransaction(toAddress, amount, gas, unixEpochTime);
+    console.log(tx);
+    const dataJSON = JSON.stringify(tx);
+    const res = await axios.post("/api/transaction", { dataJSON });
+    const { transactionID } = res.data;
+    props.router.push(`${props.address}/transaction/${transactionID}`);
+  };
+
+  return (
+    <StackableContainer lessPadding>
+      <button className="remove" onClick={() => props.closeForm()}>
+        ✕
+      </button>
+      <h2>Create New Vesting Account</h2>
+      <div className="form-item">
+        <Input
+          label="Recieving Address"
+          name="toAddress"
+          value={toAddress}
+          onChange={(e) => setToAddress(e.target.value)}
+          error={addressError}
+          placeholder={`E.g. ${exampleAddress(0, state.chain.addressPrefix)}`}
+        />
+      </div>
+      <div className="form-item">
+        <Input
+          label={`Amount (${state.chain.displayDenom})`}
+          name="amount"
+          type="number"
+          value={amount}
+          onChange={(e) => setAmount(e.target.value)}
+        />
+      </div>
+      <div className="form-item">
+        <Input
+          label="Vesting end time (UNIX timestamp)"
+          name="unixEpochTime"
+          type="number"
+          value={unixEpochTime}
+          onChange={(e) => setUnixEpochTime(e.target.value)}
+        />
+      </div>
+      <div className="form-item">
+        <Input
+          label="Delayed"
+          name="delayed"
+          type="checkbox"
+          value={delayed}
+          onChange={(e) => {
+            setDelayed(e.target.checked);
+          }}
+        />
+      </div>
+      <div className="form-item">
+        <Input
+          label="Gas Limit"
+          name="gas"
+          type="number"
+          value={gas}
+          onChange={(e) => setGas(e.target.value)}
+        />
+      </div>
+      <div className="form-item">
+        <Input label="Gas Price" name="gas_price" type="string" value={gasPrice} disabled={true} />
+      </div>
+      <div className="form-item">
+        <Input
+          label="Memo"
+          name="memo"
+          type="text"
+          value={memo}
+          onChange={(e) => setMemo(e.target.value)}
+        />
+      </div>
+      <Button label="Create Vesting Account" onClick={handleCreate} />
+      <style jsx>{`
+        p {
+          margin-top: 15px;
+        }
+        .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 withRouter(VestingForm);

pages/multi/[address]/index.js

@@ -12,6 +12,7 @@ import MultisigMembers from "../../../components/dataViews/MultisigMembers";
 import Page from "../../../components/layout/Page";
 import StackableContainer from "../../../components/layout/StackableContainer";
 import TransactionForm from "../../../components/forms/TransactionForm";
+import VestingForm from "../../../components/forms/VestingForm";
 
 function participantPubkeysFromMultisig(multisigPubkey) {
   return multisigPubkey.value.pubkeys;
@@ -22,10 +23,11 @@ function participantAddressesFromMultisig(multisigPubkey, addressPrefix) {
     pubkeyToAddress(p, addressPrefix),
   );
 }
-
+ 
 const multipage = (props) => {
   const { state } = useAppContext();
-  const [showTxForm, setShowTxForm] = useState(false);
+  const [showSendForm, setShowSendForm] = useState(false);
+  const [showVestingForm, setShowVestingForm] = useState(false);
   const [holdings, setHoldings] = useState("");
   const [accountOnChain, setAccountOnChain] = useState(null);
   const [accountError, setAccountError] = useState(null);
@@ -84,35 +86,55 @@ const multipage = (props) => {
             </div>
           </StackableContainer>
         )}
-        {showTxForm ? (
+        {showSendForm && (
           <TransactionForm
             address={router.query.address}
             accountOnChain={accountOnChain}
             closeForm={() => {
-              setShowTxForm(false);
+              setShowSendForm(false);
+            }}
+          />
+        )}
+        {showVestingForm && (
+          <VestingForm
+            address={router.query.address}
+            accountOnChain={accountOnChain}
+            closeForm={() => {
+              setShowVestingForm(false);
             }}
           />
-        ) : (
-          <div className="interfaces">
-            <div className="col-1">
-              <MultisigHoldings holdings={holdings} />
+        )}
+        {!showSendForm && !showVestingForm && (
+          <>
+            <div className="interfaces">
+              <div className="col-2">
+                <MultisigHoldings holdings={holdings} />
+              </div>
             </div>
-            <div className="col-2">
-              <StackableContainer lessPadding>
-                <h2>New transaction</h2>
-                <p>
-                  Once a transaction is created, it can be signed by the multisig members, and then
-                  broadcast.
-                </p>
-                <Button
-                  label="Create Transaction"
-                  onClick={() => {
-                    setShowTxForm(true);
-                  }}
-                />
-              </StackableContainer>
+            <div className="interfaces">
+              <div className="col-2">
+                <StackableContainer lessPadding>
+                  <h2>Actions</h2>
+                  <p>
+                    Once a transaction is created, it can be signed by the multisig members, and
+                    then broadcast.
+                  </p>
+                  <Button
+                    label="Create Send Transaction"
+                    onClick={() => {
+                      setShowSendForm(true);
+                    }}
+                  />
+                  <Button
+                    label="Create Vesting Account"
+                    onClick={() => {
+                      setShowVestingForm(true);
+                    }}
+                  />
+                </StackableContainer>
+              </div>
             </div>
-          </div>
+          </>
         )}
       </StackableContainer>
       <style jsx>{`