Merge pull request #239 from eoscostarica/feature/price-impact

feat: add price impact
eoscostarica · Oct 28, 2020 · 63f51cf · 63f51cf
2 parents 2722858 + c9819ff
commit 63f51cf
Show file tree

Hide file tree

Showing 6 changed files with 125 additions and 41 deletions.
diff --git a/src/language/en/en.json b/src/language/en/en.json
@@ -122,7 +122,8 @@
     "help": "Help",
     "valueOverWalletBalance": "Value is over your wallet balance",
     "valueOverPoolBalance": "Value is over pool balance",
-    "errorNumberIsTooBig": "The number is too big"
+    "errorNumberIsTooBig": "The number is too big",
+    "priceImpact": "Price Impact"
   },
   "about": {
     "title": "About evodex"

diff --git a/src/language/es/es.json b/src/language/es/es.json
@@ -123,7 +123,8 @@
     "help": "Ayuda",
     "valueOverWalletBalance": "El valor supera el balance de su billetera",
     "valueOverPoolBalance": "El valor supera el balance del pool",
-    "errorNumberIsTooBig": "El numero ingresado es muy grande"
+    "errorNumberIsTooBig": "El numero ingresado es muy grande",
+    "priceImpact": "Impacto en el precio"
   },
   "about": {
     "title": "Acerca de evodex"

diff --git a/src/language/ru/ru.json b/src/language/ru/ru.json
@@ -120,9 +120,10 @@
     "help": "Помощь",
     "valueOverWalletBalance": "Ценность над балансом вашего кошелька",
     "valueOverPoolBalance": "Ценность над балансом пула",
-    "errorNumberIsTooBig": "Номер слишком большой"
+    "errorNumberIsTooBig": "Номер слишком большой",
+    "priceImpact": "Влияние на цену"
   },
   "about": {
     "title": "О evodex"
   }
-}
+}
diff --git a/src/language/zh/zh.json b/src/language/zh/zh.json
@@ -121,7 +121,8 @@
     "pool": "池",
     "help": "帮帮我",
     "valueOverWalletBalance": "钱包余额中的价值",
-    "valueOverPoolBalance": "价值超过总资产余额"
+    "valueOverPoolBalance": "价值超过总资产余额",
+    "priceImpact": "价格影响"
   },
   "about": {
     "title": "关于 evodex"

diff --git a/src/routes/Evodex/BackLayer/Exchange/ExchangeBackLayer.js b/src/routes/Evodex/BackLayer/Exchange/ExchangeBackLayer.js
@@ -37,17 +37,16 @@ const useStyles = makeStyles((theme) => {
 
   return {
     exchangeRoot: {
-      marginTop: theme.spacing(7),
+      marginTop: theme.spacing(5),
       padding: theme.spacing(3, 1, 0, 1),
       [`${theme.breakpoints.down('sm')} and (orientation: landscape)`]: {
         marginTop: theme.spacing(4)
       },
       [theme.breakpoints.up('md')]: {
-        paddingLeft: theme.spacing(4),
-        paddingRight: theme.spacing(4)
+        padding: theme.spacing(0, 4)
       },
       [theme.breakpoints.up('lg')]: {
-        padding: theme.spacing(4, 0)
+        padding: theme.spacing(3, 0)
       }
     },
     titleBox: {
@@ -112,12 +111,20 @@ const useStyles = makeStyles((theme) => {
       flexFlow: 'column'
     },
     infoBoxWrapper: {
-      width: '100%',
+      maxWidth: 500,
       display: 'flex',
-      justifyContent: 'center'
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      justifyContent: 'center',
+      alignItems: 'center'
     },
-    feeSpace: {
-      marginLeft: theme.spacing(2)
+    textWrapper: {
+      minWidth: 260,
+      display: 'flex',
+      justifyContent: 'space-between',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      flex: 1
     },
     textInfo: {
       fontSize: 16.2,
@@ -126,6 +133,9 @@ const useStyles = makeStyles((theme) => {
       lineHeight: 1.73,
       color: '#fff'
     },
+    textBold: {
+      fontWeight: 'bold'
+    },
     textWithDescription: {
       display: 'flex',
       justifyContent: 'space-between',
@@ -164,6 +174,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,
@@ -332,6 +348,9 @@ const ExchangeBackLayer = ({ onReload, ual, isLightMode, showMessage }) => {
   }
 
   const handleOnChange = (key) => (value) => {
+    setAssets(null)
+    setInputError((prev) => ({ ...prev, youGive: '', youReceive: '' }))
+
     switch (key) {
       case 'youGive': {
         validateYouGive(value)
@@ -429,6 +448,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
 
@@ -597,17 +629,54 @@ const ExchangeBackLayer = ({ onReload, ual, isLightMode, showMessage }) => {
           }
         />
       </Box>
-      <Box className={classes.infoBoxWrapper}>
-        <Typography variant="body1" className={classes.textInfo}>
-          <strong>{`${t('price')}: `}</strong>
-          {assets ? <span>{assets.price}</span> : 0}
-        </Typography>
-        <Typography
-          variant="body1"
-          className={clsx(classes.textInfo, classes.feeSpace)}
-        >
-          <strong>{`${t('fee')}:`}</strong> {pair ? Number(pair.fee) / 100 : 0}%
-        </Typography>
+      <Box className={classes.infoBox}>
+        <Box className={classes.infoBoxWrapper}>
+          {assets?.rate && (
+            <Box className={classes.textWrapper}>
+              <Typography
+                variant="body1"
+                className={clsx(classes.textInfo, classes.textBold)}
+              >
+                {`${t('rate')}: `}
+              </Typography>
+              <Typography variant="body1" className={classes.textInfo}>
+                {assets.rate}
+              </Typography>
+            </Box>
+          )}
+          {pair?.fee && (
+            <Box className={classes.textWrapper}>
+              <Typography
+                variant="body1"
+                className={clsx(classes.textInfo, classes.textBold)}
+              >
+                {`${t('fee')}: `}
+              </Typography>
+              <Typography variant="body1" className={classes.textInfo}>
+                {Number(pair.fee) / 100}%
+              </Typography>
+            </Box>
+          )}
+          {assets?.priceImpact >= 0 && (
+            <Box className={classes.textWrapper}>
+              <Typography
+                variant="body1"
+                className={clsx(classes.textInfo, classes.textBold)}
+              >
+                {`${t('priceImpact')}: `}
+              </Typography>
+              <Typography
+                variant="body1"
+                className={clsx(
+                  classes.textInfo,
+                  getClassForPriceImpact(assets?.priceImpact)
+                )}
+              >
+                {assets.priceImpact}%
+              </Typography>
+            </Box>
+          )}
+        </Box>
       </Box>
       {loading && (
         <LinearProgress className={classes.loading} color="secondary" />

diff --git a/src/utils/evolutiondex.js b/src/utils/evolutiondex.js
@@ -28,7 +28,8 @@ const amountToAsset = (amount = '0', currentAsset) => {
     return asset(`0 ${currentAsset.symbol.code().toString()}`)
   }
 
-  const chunks = amount.split('.')
+  const strAmount = typeof amount !== 'string' ? amount.toString() : amount
+  const chunks = strAmount.split('.')
   const integer = chunks[0]
   const decimal = chunks[1] || '0'
   const validAmount = parseFloat(`${integer}.${decimal}`).toFixed(
@@ -174,6 +175,28 @@ const computeForward = (x, y, z, fee) => {
 
   return tmp.plus(tmpFee)
 }
+const getPriceInfo = (assetToGive, assetToReceive, pair) => {
+  const price =
+    parseFloat(assetToReceive.toString().split(' ')[0]) /
+    parseFloat(assetToGive.toString().split(' ')[0])
+  const spotPrice = pair.to.amount / pair.from.amount
+  const priceImpact = Math.abs(
+    parseFloat(
+      ((1 - (price * (1 + pair.fee / 10000)) / spotPrice) * 100).toFixed(2)
+    )
+  )
+  const token1 = `1 ${assetToGive.symbol.code().toString()}`
+  const token2 = `${price.toFixed(
+    4
+  )} ${assetToReceive.symbol.code().toString()}`
+
+  return {
+    price,
+    spotPrice,
+    priceImpact,
+    rate: `${token1} = ${token2}`
+  }
+}
 const getExchangeAssets = (amount, pair) => {
   const assetToGive = amountToAsset(amount, pair.from.asset)
   const assetToReceive = numberToAsset(0, pair.to.asset.symbol)
@@ -186,15 +209,9 @@ const getExchangeAssets = (amount, pair) => {
   assetToReceive.set_amount(computeForwardAmount)
 
   return {
+    ...getPriceInfo(assetToGive, assetToReceive, pair),
     assetToGive,
-    assetToReceive,
-    price: amountToAsset(
-      (
-        parseFloat(assetToReceive.toString().split(' ')[0]) /
-        parseFloat(assetToGive.toString().split(' ')[0])
-      ).toFixed(assetToReceive.symbol.precision()),
-      assetToReceive
-    ).toString()
+    assetToReceive
   }
 }
 const getExchangeAssetsFromToken2 = (amount, pair) => {
@@ -213,15 +230,9 @@ const getExchangeAssetsFromToken2 = (amount, pair) => {
   assetToGive.set_amount(computeForwardAmount)
 
   return {
+    ...getPriceInfo(assetToGive, assetToReceive, pair),
     assetToGive,
-    assetToReceive,
-    price: amountToAsset(
-      (
-        parseFloat(assetToReceive.toString().split(' ')[0]) /
-        parseFloat(assetToGive.toString().split(' ')[0])
-      ).toFixed(assetToReceive.symbol.precision()),
-      assetToReceive
-    ).toString()
+    assetToReceive
   }
 }
 const getUserTokenBalance = async (ual, pool) => {