Removed total values when the token price is unknown in send flow con…

…firmation. Disabled currency swapping on send flow for tokens without a known price (#376) Co-authored-by: rocky-fleek <[email protected]>
Psychedelic · Feb 15, 2022 · 577f078 · 577f078
1 parent 37c51b1
commit 577f078
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 24 deletions.
diff --git a/...ce/Popup/Views/Send/Steps/Step3/index.jsx → source/Popup/Views/Send/Steps/Step3.jsx b/...ce/Popup/Views/Send/Steps/Step3/index.jsx → 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 = ({
               <AssetFormat value={amount} asset={asset?.symbol} />
             </Typography>
           </div>
-          <Typography variant="subtitle1">
-            <USDFormat value={subtotal} />
-          </Typography>
+          {asset?.price && (
+            <Typography variant="subtitle1">
+              <USDFormat value={subtotal} />
+            </Typography>
+          )}
         </Grid>
         <Grid item xs={12}>
           <Card>
@@ -238,10 +240,11 @@ const Step3 = ({
             <InfoRow name={t('common.taxFee')} value={`${XTC_FEE} XTC ($${xtcFee})`} />
           </Grid>
         )}
-        <Grid item xs={12}>
-          <InfoRow name={t('common.total')} value={<USDFormat value={subtotal + fee} />} total />
-        </Grid>
-
+        {asset?.price && (
+          <Grid item xs={12}>
+            <InfoRow name={t('common.total')} value={<USDFormat value={subtotal + fee} />} total />
+          </Grid>
+        )}
         <Grid item xs={12}>
           <Button
             variant="rainbow"

diff --git a/source/Popup/Views/Send/hooks/useSteps.jsx b/source/Popup/Views/Send/hooks/useSteps.jsx
@@ -49,7 +49,9 @@ const useSteps = () => {
   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
@@ -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
@@ -53,7 +53,8 @@ const MultiInput = ({
   decimalScale,
 }) => {
   const classes = useStyles();
-
+  const hasConversionRate = !!secondaryValue?.conversionRate
+    && !Number.isNaN(secondaryValue?.conversionRate);
   return (
     <InputBase>
       <div className={classes.leftContainer} onClick={onClick}>
@@ -80,19 +81,28 @@ const MultiInput = ({
           }}
         />
         <span className={classes.estimatedTotal}>
-          <NumberFormat
-            displayType="text"
-            decimalScale={decimalScale}
-            fixedDecimalScale
-            thousandSeparator=","
-            value={conversionPrice}
-            prefix={secondaryValue.prefix}
-            suffix={secondaryValue.suffix}
-          />
+          {hasConversionRate ? (
+            <NumberFormat
+              displayType="text"
+              decimalScale={decimalScale}
+              fixedDecimalScale
+              thousandSeparator=","
+              value={conversionPrice}
+              prefix={secondaryValue.prefix}
+              suffix={secondaryValue.suffix}
+            />
+          ) : (
+            <span>No price available</span>
+          )}
         </span>
-        <IconButton className={classes.swapIcon} onClick={() => handleSwapValues()}>
-          <img src={ExchangeIcon} />
-        </IconButton>
+        {hasConversionRate && (
+          <IconButton
+            className={classes.swapIcon}
+            onClick={() => handleSwapValues()}
+          >
+            <img src={ExchangeIcon} />
+          </IconButton>
+        )}
       </div>
     </InputBase>
   );