Merge pull request #95 from cosmos/feat/undelegate-redelegate-claim
Add undelegate, redelegate and claim rewards
This commit is contained in:
Abel Fernández
@@ -1,11 +1,9 @@
|
||||
import React from "react";
|
||||
import { Coin } from "cosmjs-types/cosmos/base/v1beta1/coin";
|
||||
|
||||
import { DbTransaction } from "../../types";
|
||||
import { useAppContext } from "../../context/AppContext";
|
||||
import HashView from "./HashView";
|
||||
import { printableCoin, printableCoins } from "../../lib/displayHelpers";
|
||||
import { DbTransaction } from "../../types";
|
||||
import StackableContainer from "../layout/StackableContainer";
|
||||
import { printableCoins, printableCoin } from "../../lib/displayHelpers";
|
||||
import HashView from "./HashView";
|
||||
|
||||
interface Props {
|
||||
tx: DbTransaction;
|
||||
@@ -32,16 +30,16 @@ const TransactionInfo = (props: Props) => {
|
||||
</li>
|
||||
</>
|
||||
) : msg.typeUrl === "/cosmos.staking.v1beta1.MsgDelegate" ||
|
||||
msg.typeUrl === "/cosmos.staking.v1beta1.MsgUnDelegate" ? (
|
||||
msg.typeUrl === "/cosmos.staking.v1beta1.MsgUndelegate" ? (
|
||||
<>
|
||||
<li>
|
||||
<label>Amount:</label>
|
||||
<div>{printableCoin(props.tx.msgs[0].value.amount, state.chain)}</div>
|
||||
<div>{printableCoin(msg.value.amount, state.chain)}</div>
|
||||
</li>
|
||||
<li>
|
||||
<label>Validator Address:</label>
|
||||
<div title={props.tx.msgs[0].value.validatorAddress}>
|
||||
<HashView hash={props.tx.msgs[0].value.validatorAddress} />
|
||||
<div title={msg.value.validatorAddress}>
|
||||
<HashView hash={msg.value.validatorAddress} />
|
||||
</div>
|
||||
</li>
|
||||
</>
|
||||
@@ -49,21 +47,28 @@ const TransactionInfo = (props: Props) => {
|
||||
<>
|
||||
<li>
|
||||
<label>Amount:</label>
|
||||
<div>{printableCoin(props.tx.msgs[0].value.amount, state.chain)}</div>
|
||||
<div>{printableCoin(msg.value.amount, state.chain)}</div>
|
||||
</li>
|
||||
<li>
|
||||
<label>Source Validator Address:</label>
|
||||
<div title={props.tx.msgs[0].value.validatorSrcAddress}>
|
||||
<HashView hash={props.tx.msgs[0].value.validatorSrcAddress} />
|
||||
<div title={msg.value.validatorSrcAddress}>
|
||||
<HashView hash={msg.value.validatorSrcAddress} />
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<label>Destination Validator Address:</label>
|
||||
<div title={props.tx.msgs[0].value.validatorDstAddress}>
|
||||
<HashView hash={props.tx.msgs[0].value.validatorDstAddress} />
|
||||
<div title={msg.value.validatorDstAddress}>
|
||||
<HashView hash={msg.value.validatorDstAddress} />
|
||||
</div>
|
||||
</li>
|
||||
</>
|
||||
) : msg.typeUrl === "/cosmos.distribution.v1beta1.MsgWithdrawDelegatorReward" ? (
|
||||
<li>
|
||||
<label>Validator Address:</label>
|
||||
<div title={msg.value.validatorAddress}>
|
||||
<HashView hash={msg.value.validatorAddress} />
|
||||
</div>
|
||||
</li>
|
||||
) : null,
|
||||
)}
|
||||
{props.tx.fee && (
|
||||
|
||||
@@ -11,7 +11,7 @@ import Input from "../inputs/Input";
|
||||
import StackableContainer from "../layout/StackableContainer";
|
||||
|
||||
interface Props {
|
||||
address: string | null;
|
||||
delegatorAddress: string;
|
||||
accountOnChain: Account | null;
|
||||
router: NextRouter;
|
||||
closeForm: () => void;
|
||||
@@ -35,7 +35,7 @@ const DelegationForm = (props: Props) => {
|
||||
Number(state.chain.displayDenomExponent),
|
||||
).atomics;
|
||||
const msgDelegate = {
|
||||
delegatorAddress: props.address,
|
||||
delegatorAddress: props.delegatorAddress,
|
||||
validatorAddress: txValidatorAddress,
|
||||
amount: {
|
||||
amount: amountInAtomics,
|
||||
@@ -77,7 +77,7 @@ const DelegationForm = (props: Props) => {
|
||||
const res = await axios.post("/api/transaction", { dataJSON });
|
||||
console.log(dataJSON, "tx dataJSON", res);
|
||||
const { transactionID } = res.data;
|
||||
props.router.push(`${props.address}/transaction/${transactionID}`);
|
||||
props.router.push(`${props.delegatorAddress}/transaction/${transactionID}`);
|
||||
};
|
||||
|
||||
assert(state.chain.addressPrefix, "addressPrefix missing");
|
||||
|
||||
@@ -0,0 +1,185 @@
|
||||
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 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(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 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} />
|
||||
<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);
|
||||
@@ -0,0 +1,138 @@
|
||||
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);
|
||||
@@ -0,0 +1,157 @@
|
||||
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");
|
||||
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} />
|
||||
<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);
|
||||
@@ -8,13 +8,18 @@ import HashView from "../../../components/dataViews/HashView";
|
||||
import MultisigHoldings from "../../../components/dataViews/MultisigHoldings";
|
||||
import MultisigMembers from "../../../components/dataViews/MultisigMembers";
|
||||
import DelegationForm from "../../../components/forms/DelegationForm";
|
||||
import ReDelegationForm from "../../../components/forms/ReDelegationForm";
|
||||
import RewardsForm from "../../../components/forms/RewardsForm";
|
||||
import TransactionForm from "../../../components/forms/TransactionForm";
|
||||
import UnDelegationForm from "../../../components/forms/UnDelegationForm";
|
||||
import Button from "../../../components/inputs/Button";
|
||||
import Page from "../../../components/layout/Page";
|
||||
import StackableContainer from "../../../components/layout/StackableContainer";
|
||||
import { useAppContext } from "../../../context/AppContext";
|
||||
import { getMultisigAccount } from "../../../lib/multisigHelpers";
|
||||
|
||||
type TxView = null | "send" | "delegate" | "undelegate" | "redelegate" | "claimRewards";
|
||||
|
||||
function participantPubkeysFromMultisig(
|
||||
multisig: MultisigThresholdPubkey,
|
||||
): readonly SinglePubkey[] {
|
||||
@@ -23,8 +28,7 @@ function participantPubkeysFromMultisig(
|
||||
|
||||
const Multipage = () => {
|
||||
const { state } = useAppContext();
|
||||
const [showSendTxForm, setShowSendTxForm] = useState(false);
|
||||
const [showDelegateTxForm, setShowDelegateTxForm] = useState(false);
|
||||
const [txView, setTxView] = useState<TxView>(null);
|
||||
const [holdings, setHoldings] = useState<Coin | null>(null);
|
||||
const [multisigAddress, setMultisigAddress] = useState("");
|
||||
const [accountOnChain, setAccountOnChain] = useState<Account | null>(null);
|
||||
@@ -32,6 +36,10 @@ const Multipage = () => {
|
||||
const [accountError, setAccountError] = useState(null);
|
||||
const router = useRouter();
|
||||
|
||||
const closeForm = () => {
|
||||
setTxView(null);
|
||||
};
|
||||
|
||||
const fetchMultisig = useCallback(
|
||||
async (address: string) => {
|
||||
setAccountError(null);
|
||||
@@ -98,25 +106,42 @@ const Multipage = () => {
|
||||
</div>
|
||||
</StackableContainer>
|
||||
)}
|
||||
{showSendTxForm && (
|
||||
{txView === "send" && (
|
||||
<TransactionForm
|
||||
address={multisigAddress}
|
||||
accountOnChain={accountOnChain}
|
||||
closeForm={() => {
|
||||
setShowSendTxForm(false);
|
||||
}}
|
||||
closeForm={closeForm}
|
||||
/>
|
||||
)}
|
||||
{showDelegateTxForm && (
|
||||
{txView === "delegate" && (
|
||||
<DelegationForm
|
||||
address={multisigAddress}
|
||||
delegatorAddress={multisigAddress}
|
||||
accountOnChain={accountOnChain}
|
||||
closeForm={() => {
|
||||
setShowDelegateTxForm(false);
|
||||
}}
|
||||
closeForm={closeForm}
|
||||
/>
|
||||
)}
|
||||
{!showSendTxForm && !showDelegateTxForm && (
|
||||
{txView === "undelegate" && (
|
||||
<UnDelegationForm
|
||||
delegatorAddress={multisigAddress}
|
||||
accountOnChain={accountOnChain}
|
||||
closeForm={closeForm}
|
||||
/>
|
||||
)}
|
||||
{txView === "redelegate" && (
|
||||
<ReDelegationForm
|
||||
delegatorAddress={multisigAddress}
|
||||
accountOnChain={accountOnChain}
|
||||
closeForm={closeForm}
|
||||
/>
|
||||
)}
|
||||
{txView === "claimRewards" && (
|
||||
<RewardsForm
|
||||
delegatorAddress={multisigAddress}
|
||||
accountOnChain={accountOnChain}
|
||||
closeForm={closeForm}
|
||||
/>
|
||||
)}
|
||||
{txView === null && (
|
||||
<div className="interfaces">
|
||||
<div className="col-1">
|
||||
<MultisigHoldings holdings={holdings} />
|
||||
@@ -131,13 +156,31 @@ const Multipage = () => {
|
||||
<Button
|
||||
label="Create Transaction"
|
||||
onClick={() => {
|
||||
setShowSendTxForm(true);
|
||||
setTxView("send");
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
label="Create Delegation"
|
||||
onClick={() => {
|
||||
setShowDelegateTxForm(true);
|
||||
setTxView("delegate");
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
label="Create UnDelegation"
|
||||
onClick={() => {
|
||||
setTxView("undelegate");
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
label="Create Redelegate"
|
||||
onClick={() => {
|
||||
setTxView("redelegate");
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
label="Claim Rewards"
|
||||
onClick={() => {
|
||||
setTxView("claimRewards");
|
||||
}}
|
||||
/>
|
||||
</StackableContainer>
|
||||
|
||||
Reference in New Issue
Block a user