Changeset View
Changeset View
Standalone View
Standalone View
web/cashtab/src/components/Send/Send.js
Show All 33 Lines | |||||
// Note jestBCH is only used for unit tests; BCHJS must be mocked for jest | // Note jestBCH is only used for unit tests; BCHJS must be mocked for jest | ||||
const SendBCH = ({ jestBCH, filledAddress, callbackTxId }) => { | const SendBCH = ({ jestBCH, filledAddress, callbackTxId }) => { | ||||
// use balance parameters from wallet.state object and not legacy balances parameter from walletState, if user has migrated wallet | // use balance parameters from wallet.state object and not legacy balances parameter from walletState, if user has migrated wallet | ||||
// this handles edge case of user with old wallet who has not opened latest Cashtab version yet | // this handles edge case of user with old wallet who has not opened latest Cashtab version yet | ||||
// If the wallet object from ContextValue has a `state key`, then check which keys are in the wallet object | // If the wallet object from ContextValue has a `state key`, then check which keys are in the wallet object | ||||
// Else set it as blank | // Else set it as blank | ||||
const ContextValue = React.useContext(WalletContext); | const ContextValue = React.useContext(WalletContext); | ||||
const { wallet, fiatPrice, slpBalancesAndUtxos, apiError } = ContextValue; | const { | ||||
wallet, | |||||
fiatPrice, | |||||
slpBalancesAndUtxos, | |||||
apiError, | |||||
cashtabSettings, | |||||
} = ContextValue; | |||||
let balances; | let balances; | ||||
const paramsInWalletState = wallet.state ? Object.keys(wallet.state) : []; | const paramsInWalletState = wallet.state ? Object.keys(wallet.state) : []; | ||||
// If wallet.state includes balances and parsedTxHistory params, use these | // If wallet.state includes balances and parsedTxHistory params, use these | ||||
// These are saved in indexedDb in the latest version of the app, hence accessible more quickly | // These are saved in indexedDb in the latest version of the app, hence accessible more quickly | ||||
if (paramsInWalletState.includes('balances')) { | if (paramsInWalletState.includes('balances')) { | ||||
balances = wallet.state.balances; | balances = wallet.state.balances; | ||||
} else { | } else { | ||||
// If balances and parsedTxHistory are not in the wallet.state object, load them from Context | // If balances and parsedTxHistory are not in the wallet.state object, load them from Context | ||||
▲ Show 20 Lines • Show All 131 Lines • ▼ Show 20 Lines | async function submit() { | ||||
`Destination is not a valid ${currency.ticker} address`, | `Destination is not a valid ${currency.ticker} address`, | ||||
); | ); | ||||
return; | return; | ||||
} | } | ||||
// Calculate the amount in BCH | // Calculate the amount in BCH | ||||
let bchValue = value; | let bchValue = value; | ||||
if (selectedCurrency === 'USD') { | if (selectedCurrency !== 'XEC') { | ||||
bchValue = fiatToCrypto(value, fiatPrice); | bchValue = fiatToCrypto(value, fiatPrice); | ||||
} | } | ||||
try { | try { | ||||
const link = await sendBch( | const link = await sendBch( | ||||
BCH, | BCH, | ||||
wallet, | wallet, | ||||
slpBalancesAndUtxos.nonSlpUtxos, | slpBalancesAndUtxos.nonSlpUtxos, | ||||
▲ Show 20 Lines • Show All 162 Lines • ▼ Show 20 Lines | const onMax = async () => { | ||||
'Unable to calculate the max value due to network errors', | 'Unable to calculate the max value due to network errors', | ||||
); | ); | ||||
} | } | ||||
}; | }; | ||||
// Display price in USD below input field for send amount, if it can be calculated | // Display price in USD below input field for send amount, if it can be calculated | ||||
let fiatPriceString = ''; | let fiatPriceString = ''; | ||||
if (fiatPrice !== null && !isNaN(formData.value)) { | if (fiatPrice !== null && !isNaN(formData.value)) { | ||||
if (selectedCurrency === currency.ticker) { | if (selectedCurrency === currency.ticker) { | ||||
fiatPriceString = `$ ${(fiatPrice * Number(formData.value)).toFixed( | fiatPriceString = `${ | ||||
2, | cashtabSettings | ||||
)} USD`; | ? `${ | ||||
currency.fiatCurrencies[cashtabSettings.fiatCurrency] | |||||
.symbol | |||||
} ` | |||||
: '$ ' | |||||
} ${(fiatPrice * Number(formData.value)).toFixed(2)} ${ | |||||
cashtabSettings && cashtabSettings.fiatCurrency | |||||
? cashtabSettings.fiatCurrency.toUpperCase() | |||||
: 'USD' | |||||
}`; | |||||
} else { | } else { | ||||
fiatPriceString = `${ | fiatPriceString = `${ | ||||
formData.value ? fiatToCrypto(formData.value, fiatPrice) : '0' | formData.value ? fiatToCrypto(formData.value, fiatPrice) : '0' | ||||
} ${currency.ticker}`; | } ${currency.ticker}`; | ||||
} | } | ||||
} | } | ||||
const priceApiError = fiatPrice === null && selectedCurrency === 'USD'; | const priceApiError = fiatPrice === null && selectedCurrency !== 'XEC'; | ||||
return ( | return ( | ||||
<> | <> | ||||
<Modal | <Modal | ||||
title="Confirm Send" | title="Confirm Send" | ||||
visible={isModalVisible} | visible={isModalVisible} | ||||
onOk={handleOk} | onOk={handleOk} | ||||
onCancel={handleCancel} | onCancel={handleCancel} | ||||
Show All 11 Lines | return ( | ||||
</ZeroBalanceHeader> | </ZeroBalanceHeader> | ||||
) : ( | ) : ( | ||||
<> | <> | ||||
<BalanceHeader> | <BalanceHeader> | ||||
{formatBalance(balances.totalBalance)} {currency.ticker} | {formatBalance(balances.totalBalance)} {currency.ticker} | ||||
</BalanceHeader> | </BalanceHeader> | ||||
{fiatPrice !== null && ( | {fiatPrice !== null && ( | ||||
<BalanceHeaderFiat> | <BalanceHeaderFiat> | ||||
${(balances.totalBalance * fiatPrice).toFixed(2)}{' '} | {cashtabSettings | ||||
USD | ? `${ | ||||
currency.fiatCurrencies[ | |||||
cashtabSettings.fiatCurrency | |||||
].symbol | |||||
} ` | |||||
: '$ '} | |||||
{(balances.totalBalance * fiatPrice).toFixed(2)}{' '} | |||||
{cashtabSettings | |||||
? `${currency.fiatCurrencies[ | |||||
cashtabSettings.fiatCurrency | |||||
].slug.toUpperCase()} ` | |||||
: 'USD'} | |||||
</BalanceHeaderFiat> | </BalanceHeaderFiat> | ||||
)} | )} | ||||
</> | </> | ||||
)} | )} | ||||
<Row type="flex"> | <Row type="flex"> | ||||
<Col span={24}> | <Col span={24}> | ||||
<Spin spinning={loading} indicator={CashLoadingIcon}> | <Spin spinning={loading} indicator={CashLoadingIcon}> | ||||
Show All 26 Lines | return ( | ||||
placeholder: `${currency.ticker} Address`, | placeholder: `${currency.ticker} Address`, | ||||
name: 'address', | name: 'address', | ||||
onChange: e => handleAddressChange(e), | onChange: e => handleAddressChange(e), | ||||
required: true, | required: true, | ||||
value: filledAddress || formData.address, | value: filledAddress || formData.address, | ||||
}} | }} | ||||
></FormItemWithQRCodeAddon> | ></FormItemWithQRCodeAddon> | ||||
<SendBchInput | <SendBchInput | ||||
activeFiatCode={ | |||||
cashtabSettings && | |||||
cashtabSettings.fiatCurrency | |||||
? cashtabSettings.fiatCurrency.toUpperCase() | |||||
: 'USD' | |||||
} | |||||
validateStatus={ | validateStatus={ | ||||
sendBchAmountError ? 'error' : '' | sendBchAmountError ? 'error' : '' | ||||
} | } | ||||
help={ | help={ | ||||
sendBchAmountError ? sendBchAmountError : '' | sendBchAmountError ? sendBchAmountError : '' | ||||
} | } | ||||
onMax={onMax} | onMax={onMax} | ||||
inputProps={{ | inputProps={{ | ||||
▲ Show 20 Lines • Show All 82 Lines • Show Last 20 Lines |