diff --git a/source/Popup/Views/Send/Steps/Step3/index.jsx b/source/Popup/Views/Send/Steps/Step3.jsx similarity index 95% rename from source/Popup/Views/Send/Steps/Step3/index.jsx rename to source/Popup/Views/Send/Steps/Step3.jsx index 890f7a0c..44acab55 100644 --- a/source/Popup/Views/Send/Steps/Step3/index.jsx +++ b/source/Popup/Views/Send/Steps/Step3.jsx @@ -30,7 +30,7 @@ import { useRouter, TokenIcon, TABS } from '@components'; import { ADDRESS_TYPES, DEFAULT_ICP_FEE, XTC_FEE } from '@shared/constants/addresses'; import { HANDLER_TYPES, sendMessage } from '@background/Keyring'; import { useICPPrice } from '@redux/icp'; -import useStyles from '../../styles'; +import useStyles from '../styles'; const Step3 = ({ asset, amount, address, addressInfo, handleSendClick, error, isTrxCompleted, @@ -116,9 +116,11 @@ const Step3 = ({ - - - + {asset?.price && ( + + + + )} @@ -238,10 +240,11 @@ const Step3 = ({ )} - - } total /> - - + {asset?.price && ( + + } total /> + + )} { const handleChangeAddressInfo = (value) => setAddressInfo(value); const handleChangeAsset = (value) => setSelectedAsset({ ...value, - price: { ICP: icpPrice, XTC: USD_PER_TC, WTC: USD_PER_TC }[value?.symbol] || 1, + price: { + ICP: icpPrice, XTC: USD_PER_TC, WTC: USD_PER_TC, WICP: icpPrice, + }[value?.symbol], }); const handleChangeStep = (index) => setStep(index); const handleChangeAmount = (value) => setAmount(Number(value)); diff --git a/source/Popup/Views/Send/styles.js b/source/Popup/Views/Send/styles.js index 7e3c78d8..6a83121f 100644 --- a/source/Popup/Views/Send/styles.js +++ b/source/Popup/Views/Send/styles.js @@ -52,8 +52,8 @@ export default makeStyles((theme) => ({ animationDuration: '0.5s', }, image: { - height: 22, - width: 22, + height: 30, + width: 30, borderRadius: 44, marginRight: 6, }, diff --git a/source/ui/MultiInput/index.jsx b/source/ui/MultiInput/index.jsx index 75073942..14157a1a 100644 --- a/source/ui/MultiInput/index.jsx +++ b/source/ui/MultiInput/index.jsx @@ -53,7 +53,8 @@ const MultiInput = ({ decimalScale, }) => { const classes = useStyles(); - + const hasConversionRate = !!secondaryValue?.conversionRate + && !Number.isNaN(secondaryValue?.conversionRate); return ( @@ -80,19 +81,28 @@ const MultiInput = ({ }} /> - + {hasConversionRate ? ( + + ) : ( + No price available + )} - handleSwapValues()}> - - + {hasConversionRate && ( + handleSwapValues()} + > + + + )} );