/** * Copyright (c) 2018 - present Zilliqa Research Pte. Ltd. * * This program is free software: you can redistribute it and/or modify it under the * terms of the GNU General Public License as published by the Free Software * Foundation, either version 3 of the License, or (at your option) any later * version. * * This program is distributed in the hope that it will be useful, but WITHOUT ANY * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR * A PARTICULAR PURPOSE. See the GNU General Public License for more details. * * You should have received a copy of the GNU General Public License along with * this program. If not, see . */ import React, { useState } from 'react'; import { Card, Label, Input, FormGroup, Form, Row, Col, FormFeedback } from 'reactstrap'; import { BN, units } from '@zilliqa-js/util'; import Button from '../button'; import { getInputValidationState, formatSendAmountInZil, setValIfWholeNum } from '../../utils'; import SpinnerWithCheckMark from '../spinner-with-check-mark'; import Disclaimer from '../disclaimer'; import { isBech32 } from '@zilliqa-js/util/dist/validation'; import { useAsyncFn } from '../../use-async-fn'; const SendForm = ({ send, getBalance, getMinGasPrice, curNetwork }) => { const [hasRun, setHasRun] = useState(false); const [isDraft, setIsDraft] = useState(true); const [toAddress, setToAddress] = useState(''); const [toAddressValid, setToAddressValid] = useState(false); const [toAddressInvalid, setToAddressInvalid] = useState(false); const [amount, setAmount] = useState(''); const minGasProps = useAsyncFn({ fn: getMinGasPrice }); const minGasPriceInQa = minGasProps.data as string; const isUpdatingMinGasPrice = minGasProps.isPending; const minGasPriceInZil: string = units.fromQa(new BN(minGasPriceInQa), units.Units.Zil); const balanceProps = useAsyncFn({ fn: getBalance }); const balanceInQa = balanceProps.data as string; const isUpdatingBalance = balanceProps.isPending; const balanceInZil: string = units.fromQa(new BN(balanceInQa), units.Units.Zil); const mutationProps = useAsyncFn({ fn: send, deferred: true, }); const confirm = () => { setIsDraft(true); setHasRun(false); setToAddress(''); setToAddressValid(false); setToAddressInvalid(false); setAmount(''); }; const changeToAddress = (e: React.ChangeEvent): void => { e.preventDefault(); const value = e.target.value; const key = 'toAddress'; const validationResult: any = getInputValidationState(key, value, isBech32(value)); setToAddress(value); setToAddressValid(validationResult.toAddressValid); setToAddressInvalid(validationResult.toAddressInvalid); }; const formatAmount = async (): Promise => { await balanceProps.run(); if (amount !== '') { const amountInZil: string = parseFloat(amount).toFixed(3); const amountFormattedInZil = formatSendAmountInZil( amountInZil, balanceInZil, minGasPriceInZil ); setAmount(amountFormattedInZil); } }; const isBalanceInsufficient = new BN(balanceInQa).lte(new BN(minGasPriceInQa)); const isSendButtonDisabled = toAddressInvalid || toAddress === '' || amount === '' || isBalanceInsufficient; return (

{'Send'}

{isDraft ? (
e.preventDefault()}> {'invalid address'} {'valid address'}
Gas Price:{' '} {isUpdatingMinGasPrice ? 'loading...' : `${minGasPriceInZil} ZIL`}
{isBalanceInsufficient && !isUpdatingBalance ? (

{'Your balance is not sufficient to send transaction.'}
{`Minimum Gas Price: ${minGasPriceInZil} ZIL`}

) : null}
) : ( {hasRun ? ( ) : (
)}
)}
); }; const TransactionProcess = ({ confirm, mutationProps, curNetwork }) => { const { isFulfilled, isPending, error, data } = mutationProps; const getTxExplorerURL = (txId) => { return `${curNetwork.explorerUrl}/tx/${txId}?network=${encodeURIComponent(curNetwork.nodeUrl)}`; }; return (
{isPending ? (

{'Sending Transaction'}
{'Please kindly wait.'}

) : error ? (
{error.message}
) : isFulfilled ? ( <>

{'Transaction In Process'}

{'the transaction is pending blockchain confirmation.'}
{'Please check after a few minutes.'}

{data ? ( {'View Your Transaction'} ) : null}
) : null}
); }; const CreateForm = ({ setIsDraft, toAddress, amount, gasPrice, setHasRun, mutationProps }) => { const { isPending, run, error } = mutationProps; const [isDisclaimerChecked, setIsDisclaimerChecked] = useState(false); const onSubmit = () => { setHasRun(true); run({ toAddress, amount }); }; const isSubmitButtonDisabled = isPending || !isDisclaimerChecked; const submitButtonText = 'Confirm'; return (
Transaction Info:
{'To Address'} {toAddress}
{'Amount to Send'} {amount} ZIL
{'Gas Price'} {gasPrice} ZIL

e.preventDefault()}>
); }; export default SendForm;