Merge branch 'develop'

.env.example

@@ -2,6 +2,7 @@ PORT=3000
 REACT_APP_EOS_API_HOST=jungle.eosio.cr
 REACT_APP_EOS_API_PORT=443
 REACT_APP_EOS_API_PROTOCOL=https
+REACT_APP_EOS_API_TIMEOUT=2500
 REACT_APP_EOS_API_HOST_FAILOVER=jungle.eosargentina.io
 REACT_APP_EOS_API_PORT_FAILOVER=443
 REACT_APP_EOS_API_PROTOCOL_FAILOVER=https

src/App.js

@@ -1,10 +1,12 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
 import { BrowserRouter, Route, Redirect, Switch } from 'react-router-dom'
+import { UALProvider, withUAL } from 'ual-reactjs-renderer'
 
 import HelmetMetaData from 'components/PageTitle'
 
 import routes from './routes'
+import ual from './ual'
 
 const App = ({ ual }) => (
   <BrowserRouter>
@@ -24,4 +26,33 @@ App.propTypes = {
   ual: PropTypes.object
 }
 
-export default App
+const AppWrapper = () => {
+  const AppWithUAL = withUAL(App)
+  const [ualConfig, setUalConfig] = useState(null)
+
+  useEffect(() => {
+    const init = async () => {
+      await ual.init()
+      setUalConfig(ual)
+    }
+
+    init()
+  }, [])
+
+  return (
+    <>
+      {!ualConfig && 'Loading...'}
+      {ualConfig && (
+        <UALProvider
+          chains={ualConfig.chains}
+          authenticators={ualConfig.authenticators}
+          appName={ualConfig.appName}
+        >
+          <AppWithUAL />
+        </UALProvider>
+      )}
+    </>
+  )
+}
+
+export default AppWrapper

src/config/ual.config.js

@@ -1,4 +1,5 @@
 export const ualConfig = {
+  timeout: parseInt(process.env.REACT_APP_EOS_API_TIMEOUT || 2500),
   appName: process.env.REACT_APP_EOS_APP_NAME || 'evodex.io',
   blockExplorerUrl: process.env.REACT_APP_EOS_BLOCK_EXPLORER_URL,
   chainId:
@@ -16,5 +17,10 @@ export const ualConfig = {
     host:
       process.env.REACT_APP_EOS_API_HOST_FAILOVER || 'jungle.eosargentina.io',
     port: parseInt(process.env.REACT_APP_EOS_API_PORT_FAILOVER || '443')
-  }
+  },
+  endpoint: `${process.env.REACT_APP_EOS_API_PROTOCOL}://${
+    process.env.REACT_APP_EOS_API_HOST
+  }${process.env.REACT_APP_EOS_API_PORT ? ':' : ''}${
+    process.env.REACT_APP_EOS_API_PORT
+  }`
 }

src/index.js

@@ -2,34 +2,19 @@ import React from 'react'
 import { render } from 'react-dom'
 import CssBaseline from '@material-ui/core/CssBaseline'
 import { ThemeProvider } from '@material-ui/core/styles'
-import { UALProvider, withUAL } from 'ual-reactjs-renderer'
 
-import ual from './ual'
 import App from './App'
 import theme from './theme'
 import * as serviceWorker from './serviceWorker'
 import './i18n'
 
-const init = async () => {
-  const AppWithUAL = withUAL(App)
-  await ual.init()
-
-  render(
-    <UALProvider
-      chains={ual.chains}
-      authenticators={ual.authenticators}
-      appName={ual.appName}
-    >
-      <CssBaseline />
-      <ThemeProvider theme={theme}>
-        <AppWithUAL />
-      </ThemeProvider>
-    </UALProvider>,
-    document.getElementById('root')
-  )
-}
-
-init()
+render(
+  <ThemeProvider theme={theme}>
+    <CssBaseline />
+    <App />
+  </ThemeProvider>,
+  document.getElementById('root')
+)
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.

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"

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"

src/language/ru/ru.json

@@ -120,9 +120,10 @@
     "help": "Помощь",
     "valueOverWalletBalance": "Ценность над балансом вашего кошелька",
     "valueOverPoolBalance": "Ценность над балансом пула",
-    "errorNumberIsTooBig": "Номер слишком большой"
+    "errorNumberIsTooBig": "Номер слишком большой",
+    "priceImpact": "Влияние на цену"
   },
   "about": {
     "title": "О evodex"
   }
-}
+}

src/language/zh/zh.json

@@ -121,7 +121,8 @@
     "pool": "池",
     "help": "帮帮我",
     "valueOverWalletBalance": "钱包余额中的价值",
-    "valueOverPoolBalance": "价值超过总资产余额"
+    "valueOverPoolBalance": "价值超过总资产余额",
+    "priceImpact": "价格影响"
   },
   "about": {
     "title": "关于 evodex"

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" />

src/routes/Evodex/FrontLayer/RicardianContract/RicardianContract.js

@@ -7,6 +7,8 @@ import Tab from '@material-ui/core/Tab'
 import AppBar from '@material-ui/core/AppBar'
 import { RicardianContract } from '@eoscostarica/eoscr-components'
 
+import { ualConfig } from '../../../../config'
+
 const useStyles = makeStyles((theme) => ({
   wrapper: {
     overflow: 'hidden',
@@ -81,7 +83,7 @@ const TermsOfUse = ({ isMobile }) => {
             value={tab}
             onChange={(event, newValue) => setTab(newValue)}
             classes={{ indicator: classes.selectorTab }}
-            variant={isMobile ? 'fullWidth' : ''}
+            variant={isMobile ? 'fullWidth' : 'standard'}
           >
             <Tab label="evolutiondex" />
             <Tab label="wevotethefee" />
@@ -91,7 +93,7 @@ const TermsOfUse = ({ isMobile }) => {
           <Box className={classes.wrapper}>
             <RicardianContract
               contractName="evolutiondex"
-              httpEndpoint="https://jungle.eosio.cr"
+              httpEndpoint={ualConfig.endpoint}
               LinearProgressOverrideClasses={{
                 barColorPrimary: classes.overrideFrontLinearColor,
                 colorPrimary: classes.overrideLinearColor
@@ -104,7 +106,7 @@ const TermsOfUse = ({ isMobile }) => {
           <Box className={classes.wrapper}>
             <RicardianContract
               contractName="wevotethefee"
-              httpEndpoint="https://jungle.eosio.cr"
+              httpEndpoint={ualConfig.endpoint}
               LinearProgressOverrideClasses={{
                 barColorPrimary: classes.overrideFrontLinearColor,
                 colorPrimary: classes.overrideLinearColor

src/ual.js

@@ -3,12 +3,24 @@ import { Anchor } from 'ual-anchor'
 
 import { ualConfig } from './config'
 
+const timeout = (ms, promise) => {
+  return new Promise(function (resolve, reject) {
+    setTimeout(function () {
+      reject(new Error('timeout'))
+    }, ms)
+    promise.then(resolve, reject)
+  })
+}
+
 export default {
   useFailover: false,
   init: async function () {
     try {
-      const response = await fetch(
-        `${ualConfig.api.protocol}://${ualConfig.api.host}/v1/chain/get_info`
+      const response = await timeout(
+        ualConfig.timeout,
+        fetch(
+          `${ualConfig.api.protocol}://${ualConfig.api.host}/v1/chain/get_info`
+        )
       )
       this.useFailover = response.status !== 200
     } catch (error) {