diff --git a/components/forms/CreateTxForm/MsgForm/MsgSendForm.tsx b/components/forms/CreateTxForm/MsgForm/MsgSendForm.tsx index e96c023..e667cdb 100644 --- a/components/forms/CreateTxForm/MsgForm/MsgSendForm.tsx +++ b/components/forms/CreateTxForm/MsgForm/MsgSendForm.tsx @@ -1,17 +1,21 @@ import { Decimal } from "@cosmjs/math"; import { assert } from "@cosmjs/utils"; -import { Dispatch, SetStateAction, useCallback, useEffect, useState } from "react"; +import { useEffect, useState } from "react"; +import { MsgGetter } from ".."; import { useAppContext } from "../../../../context/AppContext"; import { checkAddress, exampleAddress } from "../../../../lib/displayHelpers"; +import { isTxMsgSend } from "../../../../lib/txMsgHelpers"; import { TxMsg, TxMsgSend } from "../../../../types/txMsg"; import Input from "../../../inputs/Input"; +import StackableContainer from "../../../layout/StackableContainer"; interface MsgSendFormProps { readonly fromAddress: string; - readonly setCheckAndGetMsg: Dispatch TxMsg | null) | undefined>>; + readonly setMsgGetter: (msgGetter: MsgGetter) => void; + readonly deleteMsg: () => void; } -const MsgSendForm = ({ fromAddress, setCheckAndGetMsg }: MsgSendFormProps) => { +const MsgSendForm = ({ fromAddress, setMsgGetter, deleteMsg }: MsgSendFormProps) => { const { state } = useAppContext(); assert(state.chain.addressPrefix, "addressPrefix missing"); @@ -21,39 +25,51 @@ const MsgSendForm = ({ fromAddress, setCheckAndGetMsg }: MsgSendFormProps) => { const [toAddressError, setToAddressError] = useState(""); const [amountError, setAmountError] = useState(""); - const checkAndGetMsg = useCallback(() => { - assert(state.chain.addressPrefix, "addressPrefix missing"); - assert(state.chain.denom, "denom missing"); + useEffect(() => { + try { + assert(state.chain.denom, "denom missing"); - const addressErrorMsg = checkAddress(toAddress, state.chain.addressPrefix); - if (addressErrorMsg) { - setToAddressError(`Invalid address for network ${state.chain.chainId}: ${addressErrorMsg}`); - return null; - } + setToAddressError(""); + setAmountError(""); - if (!amount || Number(amount) <= 0) { - setAmountError("Amount must be greater than 0"); - return null; - } + const isMsgValid = (msg: TxMsg): msg is TxMsgSend => { + assert(state.chain.addressPrefix, "addressPrefix missing"); - const amountInAtomics = Decimal.fromUserInput( - amount, - Number(state.chain.displayDenomExponent), - ).atomics; + const addressErrorMsg = checkAddress(toAddress, state.chain.addressPrefix); + if (addressErrorMsg) { + setToAddressError( + `Invalid address for network ${state.chain.chainId}: ${addressErrorMsg}`, + ); + return false; + } - const msg: TxMsgSend = { - typeUrl: "/cosmos.bank.v1beta1.MsgSend", - value: { - fromAddress, - toAddress, - amount: [{ amount: amountInAtomics, denom: state.chain.denom }], - }, - }; + if (!amount || Number(amount) <= 0) { + setAmountError("Amount must be greater than 0"); + return false; + } - return msg; + return isTxMsgSend(msg); + }; + + const amountInAtomics = amount + ? Decimal.fromUserInput(amount, Number(state.chain.displayDenomExponent)).atomics + : "0"; + + const msg: TxMsgSend = { + typeUrl: "/cosmos.bank.v1beta1.MsgSend", + value: { + fromAddress, + toAddress, + amount: [{ amount: amountInAtomics, denom: state.chain.denom }], + }, + }; + + setMsgGetter({ isMsgValid, msg }); + } catch {} }, [ amount, fromAddress, + setMsgGetter, state.chain.addressPrefix, state.chain.chainId, state.chain.denom, @@ -61,12 +77,12 @@ const MsgSendForm = ({ fromAddress, setCheckAndGetMsg }: MsgSendFormProps) => { toAddress, ]); - useEffect(() => { - setCheckAndGetMsg(() => checkAndGetMsg); - }, [checkAndGetMsg, setCheckAndGetMsg]); - return ( - <> + + +

MsgSend

{ />
- +
); };