From 2b9bf85a0cf9e364017afce6a84905dd1ddb7f13 Mon Sep 17 00:00:00 2001
From: abefernan <44572727+abefernan@users.noreply.github.com>
Date: Thu, 27 Apr 2023 16:29:42 +0200
Subject: [PATCH] Remove old forms

---
 components/forms/DelegationForm.tsx   | 157 ----------------------
 components/forms/ReDelegationForm.tsx | 185 --------------------------
 components/forms/RewardsForm.tsx      | 138 -------------------
 components/forms/TransactionForm.tsx  | 156 ----------------------
 components/forms/UnDelegationForm.tsx | 158 ----------------------
 5 files changed, 794 deletions(-)
 delete mode 100644 components/forms/DelegationForm.tsx
 delete mode 100644 components/forms/ReDelegationForm.tsx
 delete mode 100644 components/forms/RewardsForm.tsx
 delete mode 100644 components/forms/TransactionForm.tsx
 delete mode 100644 components/forms/UnDelegationForm.tsx

diff --git a/components/forms/DelegationForm.tsx b/components/forms/DelegationForm.tsx
deleted file mode 100644
index 6f2ff60..0000000
--- a/components/forms/DelegationForm.tsx
+++ /dev/null
@@ -1,157 +0,0 @@
-import { Decimal } from "@cosmjs/math";
-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;
-  router: NextRouter;
-  closeForm: () => void;
-}
-
-const DelegationForm = (props: Props) => {
-  const { state } = useAppContext();
-  const [validatorAddress, setValidatorAddress] = useState("");
-  const [amount, setAmount] = useState("0");
-  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, txAmount: string, gasLimit: number) => {
-    assert(Number.isSafeInteger(gasLimit) && gasLimit > 0, "gas limit must be a positive integer");
-
-    const amountInAtomics = Decimal.fromUserInput(
-      txAmount,
-      Number(state.chain.displayDenomExponent),
-    ).atomics;
-    const msgDelegate = {
-      delegatorAddress: props.delegatorAddress,
-      validatorAddress: txValidatorAddress,
-      amount: {
-        amount: amountInAtomics,
-        denom: state.chain.denom,
-      },
-    };
-    const msg = {
-      typeUrl: "/cosmos.staking.v1beta1.MsgDelegate",
-      value: msgDelegate,
-    };
-    assert(gasPrice, "gasPrice missing");
-    const fee = calculateFee(gasLimit, gasPrice);
-    const { accountOnChain } = props;
-    assert(typeof accountOnChain.accountNumber === "number", "accountNumber 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, amount, 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>Create Delegation</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={`Amount (${state.chain.displayDenom})`}
-          name="amount"
-          type="number"
-          value={amount}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) => setAmount(e.target.value)}
-        />
-      </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="Delegate" onClick={handleCreate} loading={processing} />
-      <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(DelegationForm);
diff --git a/components/forms/ReDelegationForm.tsx b/components/forms/ReDelegationForm.tsx
deleted file mode 100644
index ec2a98b..0000000
--- a/components/forms/ReDelegationForm.tsx
+++ /dev/null
@@ -1,185 +0,0 @@
-import { Decimal } from "@cosmjs/math";
-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;
-  router: NextRouter;
-  closeForm: () => void;
-}
-
-const ReDelegationForm = (props: Props) => {
-  const { state } = useAppContext();
-  const [validatorSrcAddress, setValidatorSrcAddress] = useState("");
-  const [validatorDstAddress, setValidatorDstAddress] = useState("");
-  const [amount, setAmount] = useState("0");
-  const [memo, setMemo] = useState("");
-  const [gas, setGas] = useState(300000);
-  const [gasPrice, _setGasPrice] = useState(state.chain.gasPrice);
-  const [processing, setProcessing] = useState(false);
-  const [addressErrors, setAddressErrors] = useState({ src: "", dst: "" });
-
-  const createTransaction = (
-    txValidatorSrcAddress: string,
-    txValidatorDstAddress: string,
-    txAmount: string,
-    gasLimit: number,
-  ) => {
-    assert(Number.isSafeInteger(gasLimit) && gasLimit > 0, "gas limit must be a positive integer");
-
-    const amountInAtomics = Decimal.fromUserInput(
-      txAmount,
-      Number(state.chain.displayDenomExponent),
-    ).atomics;
-    const msgRedelegate = {
-      delegatorAddress: props.delegatorAddress,
-      validatorSrcAddress: txValidatorSrcAddress,
-      validatorDstAddress: txValidatorDstAddress,
-      amount: {
-        amount: amountInAtomics,
-        denom: state.chain.denom,
-      },
-    };
-    const msg = {
-      typeUrl: "/cosmos.staking.v1beta1.MsgBeginRedelegate",
-      value: msgRedelegate,
-    };
-    assert(gasPrice, "gasPrice missing");
-    const fee = calculateFee(gasLimit, gasPrice);
-    const { accountOnChain } = props;
-    assert(typeof accountOnChain.accountNumber === "number", "accountNumber 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 validatorSrcAddressError = checkAddress(validatorSrcAddress, state.chain.addressPrefix);
-    const validatorDstAddressError = checkAddress(validatorDstAddress, state.chain.addressPrefix);
-
-    setAddressErrors({
-      src: validatorSrcAddressError
-        ? `Invalid address for network ${state.chain.chainId}: ${validatorSrcAddressError}`
-        : "",
-      dst: validatorDstAddressError
-        ? `Invalid address for network ${state.chain.chainId}: ${validatorDstAddressError}`
-        : "",
-    });
-    if (validatorSrcAddressError || validatorDstAddressError) {
-      return;
-    }
-
-    setProcessing(true);
-    const tx = createTransaction(validatorSrcAddress, validatorDstAddress, amount, 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>Create ReDelegation</h2>
-      <div className="form-item">
-        <Input
-          label="Validator Source Address"
-          name="validatorSourceAddress"
-          value={validatorSrcAddress}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-            setValidatorSrcAddress(e.target.value)
-          }
-          error={addressErrors.src}
-          placeholder={`E.g. ${exampleValidatorAddress(0, state.chain.addressPrefix)}`}
-        />
-      </div>
-      <div className="form-item">
-        <Input
-          label="Validator Destination Address"
-          name="validatorDestinationAddress"
-          value={validatorDstAddress}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-            setValidatorDstAddress(e.target.value)
-          }
-          error={addressErrors.dst}
-          placeholder={`E.g. ${exampleValidatorAddress(1, state.chain.addressPrefix)}`}
-        />
-      </div>
-      <div className="form-item">
-        <Input
-          label={`Amount (${state.chain.displayDenom})`}
-          name="amount"
-          type="number"
-          value={amount}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) => setAmount(e.target.value)}
-        />
-      </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="ReDelegate" onClick={handleCreate} loading={processing} />
-      <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(ReDelegationForm);
diff --git a/components/forms/RewardsForm.tsx b/components/forms/RewardsForm.tsx
deleted file mode 100644
index f0f583e..0000000
--- a/components/forms/RewardsForm.tsx
+++ /dev/null
@@ -1,138 +0,0 @@
-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;
-  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(typeof accountOnChain.accountNumber === "number", "accountNumber 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} loading={processing} />
-      <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);
diff --git a/components/forms/TransactionForm.tsx b/components/forms/TransactionForm.tsx
deleted file mode 100644
index 47dfb82..0000000
--- a/components/forms/TransactionForm.tsx
+++ /dev/null
@@ -1,156 +0,0 @@
-import { Decimal } from "@cosmjs/math";
-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, exampleAddress } from "../../lib/displayHelpers";
-import Button from "../inputs/Button";
-import Input from "../inputs/Input";
-import StackableContainer from "../layout/StackableContainer";
-
-interface Props {
-  address: string | null;
-  accountOnChain: Account;
-  router: NextRouter;
-  closeForm: () => void;
-}
-
-const TransactionForm = (props: Props) => {
-  const { state } = useAppContext();
-  const [toAddress, setToAddress] = useState("");
-  const [amount, setAmount] = useState("0");
-  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: string, txAmount: string, gasLimit: number) => {
-    assert(Number.isSafeInteger(gasLimit) && gasLimit > 0, "gas limit must be a positive integer");
-
-    const amountInAtomics = Decimal.fromUserInput(
-      txAmount,
-      Number(state.chain.displayDenomExponent),
-    ).atomics;
-    const msgSend = {
-      fromAddress: props.address,
-      toAddress: txToAddress,
-      amount: [
-        {
-          amount: amountInAtomics,
-          denom: state.chain.denom,
-        },
-      ],
-    };
-    const msg = {
-      typeUrl: "/cosmos.bank.v1beta1.MsgSend",
-      value: msgSend,
-    };
-    assert(gasPrice, "gasPrice missing");
-    const fee = calculateFee(gasLimit, gasPrice);
-    const { accountOnChain } = props;
-    assert(typeof accountOnChain.accountNumber === "number", "accountNumber 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 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);
-    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}`);
-  };
-
-  assert(state.chain.addressPrefix, "addressPrefix missing");
-
-  return (
-    <StackableContainer lessPadding>
-      <button className="remove" onClick={() => props.closeForm()}>
-        ✕
-      </button>
-      <h2>Create New transaction</h2>
-      <div className="form-item">
-        <Input
-          label="To Address"
-          name="toAddress"
-          value={toAddress}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) => 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: React.ChangeEvent<HTMLInputElement>) => setAmount(e.target.value)}
-        />
-      </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="Create Transaction" onClick={handleCreate} loading={processing} />
-      <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(TransactionForm);
diff --git a/components/forms/UnDelegationForm.tsx b/components/forms/UnDelegationForm.tsx
deleted file mode 100644
index 699c4dd..0000000
--- a/components/forms/UnDelegationForm.tsx
+++ /dev/null
@@ -1,158 +0,0 @@
-import { Decimal } from "@cosmjs/math";
-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 UnDelegationForm = (props: Props) => {
-  const { state } = useAppContext();
-  const [validatorAddress, setValidatorAddress] = useState("");
-  const [amount, setAmount] = useState("0");
-  const [memo, setMemo] = useState("");
-  const [gas, setGas] = useState(300000);
-  const [gasPrice, _setGasPrice] = useState(state.chain.gasPrice);
-  const [processing, setProcessing] = useState(false);
-  const [addressError, setAddressError] = useState("");
-
-  const createTransaction = (txValidatorAddress: string, txAmount: string, gasLimit: number) => {
-    assert(Number.isSafeInteger(gasLimit) && gasLimit > 0, "gas limit must be a positive integer");
-
-    const amountInAtomics = Decimal.fromUserInput(
-      txAmount,
-      Number(state.chain.displayDenomExponent),
-    ).atomics;
-    const msgUndelegate = {
-      delegatorAddress: props.delegatorAddress,
-      validatorAddress: txValidatorAddress,
-      amount: {
-        amount: amountInAtomics,
-        denom: state.chain.denom,
-      },
-    };
-    const msg = {
-      typeUrl: "/cosmos.staking.v1beta1.MsgUndelegate",
-      value: msgUndelegate,
-    };
-    assert(gasPrice, "gasPrice missing");
-    const fee = calculateFee(gasLimit, gasPrice);
-    const { accountOnChain } = props;
-    assert(accountOnChain, "accountOnChain missing");
-    assert(typeof accountOnChain.accountNumber === "number", "accountNumber 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, amount, 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>Create UnDelegation</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={`Amount (${state.chain.displayDenom})`}
-          name="amount"
-          type="number"
-          value={amount}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) => setAmount(e.target.value)}
-        />
-      </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="UnDelegate" onClick={handleCreate} loading={processing} />
-      <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(UnDelegationForm);