cosmos-multisig-ui/components/forms/RewardsForm.tsx

import { Account, calculateFee } from "@cosmjs/stargate";
import { assert } from "@cosmjs/utils";
import axios from "axios";
import { NextRouter, withRouter } from "next/router";
import { useState } from "react";
import { useAppContext } from "../../context/AppContext";
import { checkAddress, exampleValidatorAddress } from "../../lib/displayHelpers";
import Button from "../inputs/Button";
import Input from "../inputs/Input";
import StackableContainer from "../layout/StackableContainer";

interface Props {
  delegatorAddress: string;
  accountOnChain: Account | null;
  router: NextRouter;
  closeForm: () => void;
}

const RewardsForm = (props: Props) => {
  const { state } = useAppContext();
  const [validatorAddress, setValidatorAddress] = useState("");
  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 = (txValidatorAddress: string, gasLimit: number) => {
    assert(Number.isSafeInteger(gasLimit) && gasLimit > 0, "gas limit must be a positive integer");

    const msgDelegatorReward = {
      delegatorAddress: props.delegatorAddress,
      validatorAddress: txValidatorAddress,
    };
    const msg = {
      typeUrl: "/cosmos.distribution.v1beta1.MsgWithdrawDelegatorReward",
      value: msgDelegatorReward,
    };
    assert(gasPrice, "gasPrice missing");
    const fee = calculateFee(gasLimit, gasPrice);
    const { accountOnChain } = props;
    assert(accountOnChain, "accountOnChain missing");
    return {
      accountNumber: accountOnChain.accountNumber,
      sequence: accountOnChain.sequence,
      chainId: state.chain.chainId,
      msgs: [msg],
      fee: fee,
      memo: memo,
    };
  };

  const handleCreate = async () => {
    assert(state.chain.addressPrefix, "addressPrefix missing");
    const validatorAddressError = checkAddress(validatorAddress, state.chain.addressPrefix);
    if (validatorAddressError) {
      setAddressError(
        `Invalid address for network ${state.chain.chainId}: ${validatorAddressError}`,
      );
      return;
    }

    setProcessing(true);
    const tx = createTransaction(validatorAddress, gas);
    console.log(tx, "tx data");
    const dataJSON = JSON.stringify(tx);
    const res = await axios.post("/api/transaction", { dataJSON });
    console.log(dataJSON, "tx dataJSON", res);
    const { transactionID } = res.data;
    props.router.push(`${props.delegatorAddress}/transaction/${transactionID}`);
  };

  assert(state.chain.addressPrefix, "addressPrefix missing");

  return (
    <StackableContainer lessPadding>
      <button className="remove" onClick={() => props.closeForm()}>
        ✕
      </button>
      <h2>Claim Rewards</h2>
      <div className="form-item">
        <Input
          label="Validator Address"
          name="validatorAddress"
          value={validatorAddress}
          onChange={(e: React.ChangeEvent<HTMLInputElement>) => setValidatorAddress(e.target.value)}
          error={addressError}
          placeholder={`E.g. ${exampleValidatorAddress(0, state.chain.addressPrefix)})}`}
        />
      </div>
      <div className="form-item">
        <Input
          label="Gas Limit"
          name="gas"
          type="number"
          value={gas}
          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
            setGas(parseInt(e.target.value, 10))
          }
        />
      </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: React.ChangeEvent<HTMLInputElement>) => setMemo(e.target.value)}
        />
      </div>
      <Button label="Claim Rewards" 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(RewardsForm);