feat: add colors for price impact according to the value

eoscostarica · Oct 22, 2020 · 45a7a7b · 45a7a7b
1 parent 6fd6b97
commit 45a7a7b
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 3 deletions.
diff --git a/src/routes/Evodex/BackLayer/Exchange/ExchangeBackLayer.js b/src/routes/Evodex/BackLayer/Exchange/ExchangeBackLayer.js
@@ -175,6 +175,12 @@ const useStyles = makeStyles((theme) => {
     error: {
       color: theme.palette.error.main
     },
+    warning: {
+      color: theme.palette.warning.main
+    },
+    success: {
+      color: theme.palette.success.main
+    },
     helpText,
     message,
     loading,
@@ -443,6 +449,19 @@ const ExchangeBackLayer = ({ onReload, ual, isLightMode, showMessage }) => {
     setLoading(false)
   }
 
+  const getClassForPriceImpact = (priceImpact) => {
+    switch (true) {
+      case priceImpact < 1:
+        return classes.success
+      case priceImpact > 2 && priceImpact < 5:
+        return classes.warning
+      case priceImpact >= 5:
+        return classes.error
+      default:
+        return ''
+    }
+  }
+
   useEffect(() => {
     if (!exchangeState.currentPair) return
 
@@ -639,15 +658,21 @@ const ExchangeBackLayer = ({ onReload, ual, isLightMode, showMessage }) => {
               </Typography>
             </Box>
           )}
-          {assets?.priceImpact && (
+          {assets?.priceImpact >= 0 && (
             <Box className={classes.textWrapper}>
               <Typography
                 variant="body1"
                 className={clsx(classes.textInfo, classes.textBold)}
               >
                 {`${t('priceImpact')}: `}
               </Typography>
-              <Typography variant="body1" className={classes.textInfo}>
+              <Typography
+                variant="body1"
+                className={clsx(
+                  classes.textInfo,
+                  getClassForPriceImpact(assets?.priceImpact)
+                )}
+              >
                 {assets.priceImpact}%
               </Typography>
             </Box>

diff --git a/src/utils/evolutiondex.js b/src/utils/evolutiondex.js
@@ -181,8 +181,14 @@ const getPriceInfo = (assetToGive, assetToReceive, pair) => {
     parseFloat(assetToGive.toString().split(' ')[0])
   const spotPrice = pair.pool2.amount / pair.pool1.amount
   const priceImpact = Math.abs(
-    parseFloat(((spotPrice / price - 1) * 100).toFixed(2))
+    parseFloat(
+      ((1 - (price * (1 + pair.fee / 10000)) / spotPrice) * 100).toFixed(2)
+    )
   )
+  // const priceImpact = Math.abs(
+  //   parseFloat(((spotPrice / price - 1) * 100).toFixed(2))
+  // )
+  // 1 - (price * (1 + pair.fee / 10000) / )
   const token1 = `1 ${assetToGive.symbol.code().toString()}`
   const token2 = `${price.toFixed(
     4