cosmos-multisig-ui/components/forms/CreateTxForm/MsgForm/MsgRedelegateForm.tsx
2023-04-27 16:33:03 +02:00

127 lines
4.0 KiB
TypeScript

import { Decimal } from "@cosmjs/math";
import { assert } from "@cosmjs/utils";
import { Dispatch, SetStateAction, useCallback, useEffect, useState } from "react";
import { useAppContext } from "../../../../context/AppContext";
import { checkAddress, exampleAddress } from "../../../../lib/displayHelpers";
import { TxMsg, TxMsgRedelegate } from "../../../../types/txMsg";
import Input from "../../../inputs/Input";
interface MsgRedelegateFormProps {
readonly delegatorAddress: string;
readonly setCheckAndGetMsg: Dispatch<SetStateAction<(() => TxMsg | null) | undefined>>;
}
const MsgRedelegateForm = ({ delegatorAddress, setCheckAndGetMsg }: MsgRedelegateFormProps) => {
const { state } = useAppContext();
assert(state.chain.addressPrefix, "addressPrefix missing");
const [validatorSrcAddress, setValidatorSrcAddress] = useState("");
const [validatorDstAddress, setValidatorDstAddress] = useState("");
const [amount, setAmount] = useState("0");
const [validatorSrcAddressError, setValidatorSrcAddressError] = useState("");
const [validatorDstAddressError, setValidatorDstAddressError] = useState("");
const [amountError, setAmountError] = useState("");
const checkAndGetMsg = useCallback(() => {
assert(state.chain.addressPrefix, "addressPrefix missing");
assert(state.chain.denom, "denom missing");
const srcAddressErrorMsg = checkAddress(validatorSrcAddress, state.chain.addressPrefix);
if (srcAddressErrorMsg) {
setValidatorSrcAddressError(
`Invalid address for network ${state.chain.chainId}: ${srcAddressErrorMsg}`,
);
return null;
}
const dstAddressErrorMsg = checkAddress(validatorDstAddress, state.chain.addressPrefix);
if (dstAddressErrorMsg) {
setValidatorDstAddressError(
`Invalid address for network ${state.chain.chainId}: ${dstAddressErrorMsg}`,
);
return null;
}
if (!amount || Number(amount) <= 0) {
setAmountError("Amount must be greater than 0");
return null;
}
const amountInAtomics = Decimal.fromUserInput(
amount,
Number(state.chain.displayDenomExponent),
).atomics;
const msg: TxMsgRedelegate = {
typeUrl: "/cosmos.staking.v1beta1.MsgBeginRedelegate",
value: {
delegatorAddress,
validatorSrcAddress,
validatorDstAddress,
amount: [{ amount: amountInAtomics, denom: state.chain.denom }],
},
};
return msg;
}, [
amount,
delegatorAddress,
state.chain.addressPrefix,
state.chain.chainId,
state.chain.denom,
state.chain.displayDenomExponent,
validatorDstAddress,
validatorSrcAddress,
]);
useEffect(() => {
setCheckAndGetMsg(() => checkAndGetMsg);
}, [checkAndGetMsg, setCheckAndGetMsg]);
return (
<>
<div className="form-item">
<Input
label="Source Validator Address"
name="src-validator-address"
value={validatorSrcAddress}
onChange={({ target }) => setValidatorSrcAddress(target.value)}
error={validatorSrcAddressError}
placeholder={`E.g. ${exampleAddress(0, state.chain.addressPrefix)}`}
/>
</div>
<div className="form-item">
<Input
label="Destination Validator Address"
name="dst-validator-address"
value={validatorDstAddress}
onChange={({ target }) => setValidatorDstAddress(target.value)}
error={validatorDstAddressError}
placeholder={`E.g. ${exampleAddress(0, state.chain.addressPrefix)}`}
/>
</div>
<div className="form-item">
<Input
type="number"
label={`Amount (${state.chain.displayDenom})`}
name="amount"
value={amount}
onChange={({ target }) => setAmount(target.value)}
error={amountError}
/>
</div>
<style jsx>{`
p {
margin-top: 15px;
}
.form-item {
margin-top: 1.5em;
}
`}</style>
</>
);
};
export default MsgRedelegateForm;