Merge pull request #591 from hermeznetwork/develop

Develop

.env.example

@@ -5,6 +5,8 @@ REACT_APP_ENABLE_AIRDROP=true
 REACT_APP_AIRDROP_API_URL=http://63.32.111.74:8092
 REACT_APP_AIRDROP_ID=8
 REACT_APP_ACCUMULATED_AIRDROP_IDS="1,2,3"
+# Enables token swap feature
+REACT_APP_ENABLE_TOKEN_SWAP=false
 # Exchange rates API Key
 REACT_APP_EXCHANGE_RATES_API_KEY=example
 # Infura API Key

package.json

@@ -1,6 +1,6 @@
 {
   "name": "wallet-ui",
-  "version": "v1.1.6",
+  "version": "v1.1.7",
   "private": true,
   "scripts": {
     "start:dev": "react-scripts start",

src/routing/routes.jsx

@@ -8,6 +8,7 @@ import MyAccount from '../views/my-account/my-account.view'
 import AccountDetails from '../views/account-details/account-details.view'
 import TransactionDetails from '../views/transaction-details/transaction-details.view'
 import MyCode from '../views/my-code/my-code.view'
+import TokenSwap from '../views/token-swap/token-swap.view'
 
 const routes = [
   {
@@ -54,6 +55,11 @@ const routes = [
   {
     path: '/accounts/:accountIndex/transactions/:transactionId',
     render: () => <TransactionDetails />
+  },
+  {
+    path: '/token-swap',
+    render: () => <TokenSwap />,
+    isHidden: process.env.REACT_APP_ENABLE_TOKEN_SWAP !== 'true'
   }
 ]
 

src/store/index.js

@@ -10,6 +10,7 @@ import accountDetailsReducer from './account-details/account-details.reducer'
 import transactionDetailsReducer from './transaction-details/transaction-details.reducer'
 import transactionReducer from './transaction/transaction.reducer'
 import loginReducer from './login/login.reducer'
+import tokenSwapReducer from './token-swap/token-swap.reducer'
 
 /**
  * Creates the Redux store root reducer combining all the reducers used in the app
@@ -25,7 +26,8 @@ function createRootReducer (history) {
     myAccount: myAccountReducer,
     transactionDetails: transactionDetailsReducer,
     transaction: transactionReducer,
-    login: loginReducer
+    login: loginReducer,
+    tokenSwapReducer: tokenSwapReducer
   })
 }
 

src/store/token-swap/token-swap.actions.js

@@ -0,0 +1,13 @@
+export const tokenSwapActionTypes = {
+  RESET_STATE: '[TOKEN SWAP] RESET STATE'
+}
+
+function resetState () {
+  return {
+    type: tokenSwapActionTypes.RESET_STATE
+  }
+}
+
+export {
+  resetState
+}

src/store/token-swap/token-swap.reducer.js

@@ -0,0 +1,16 @@
+import { tokenSwapActionTypes } from './token-swap.actions'
+
+const initialTokenSwapState = {}
+
+function tokenSwapReducer (state = initialTokenSwapState, action) {
+  switch (action.type) {
+    case tokenSwapActionTypes.RESET_STATE: {
+      return { ...initialTokenSwapState }
+    }
+    default: {
+      return state
+    }
+  }
+}
+
+export default tokenSwapReducer

src/views/account-details/account-details.view.jsx

@@ -185,6 +185,7 @@ function AccountDetails ({
             accountIndex={accountIndex}
             tokenId={accountTask.data?.token.id}
             hideDeposit={l1TokenBalanceTask.status !== 'successful'}
+            hideSwap
           />
         </section>
       </Container>

src/views/app.view.jsx

@@ -56,7 +56,7 @@ function App ({
   }, [hermezStatusTask, onSetHermezEnvironment, onLoadFiatExchangeRates])
 
   React.useEffect(() => {
-    if (process.env.REACT_APP_ENABLE_AIRDROP) {
+    if (process.env.REACT_APP_ENABLE_AIRDROP === 'true') {
       onLoadReward()
     }
   }, [])
@@ -118,27 +118,29 @@ function App ({
     <Layout>
       <Switch>
         <>
-          {routes.map((route) => (
-            route.isPublic
-              ? (
-                <Route
-                  exact
-                  key={route.path}
-                  path={route.path}
-                  render={route.render}
-                />
-                )
-              : (
-                <PrivateRoute
-                  key={route.path}
-                  isUserLoggedIn={wallet !== undefined}
-                  route={route}
-                  onChangeRedirectRoute={onChangeRedirectRoute}
-                />
-                )
-          ))}
+          {routes
+            .filter(route => !route.isHidden)
+            .map((route) => (
+              route.isPublic
+                ? (
+                  <Route
+                    exact
+                    key={route.path}
+                    path={route.path}
+                    render={route.render}
+                  />
+                  )
+                : (
+                  <PrivateRoute
+                    key={route.path}
+                    isUserLoggedIn={wallet !== undefined}
+                    route={route}
+                    onChangeRedirectRoute={onChangeRedirectRoute}
+                  />
+                  )
+            ))}
+          <Redirect to='/login' />
         </>
-        <Redirect to='/' />
       </Switch>
     </Layout>
   )

src/views/shared/exit/exit.view.jsx

@@ -104,11 +104,21 @@ function Exit ({
   }
 
   /**
-   * Converts the withdraw delay from seconds to days
-   * @returns {Number} - Withdrawal delay in days
+   * Converts the withdraw delay from seconds to hours or minutes
+   * @returns {Number} - Withdrawal delay in hours or minutes
    */
   function getWithdrawalDelayerTime () {
-    return Math.round(coordinatorState?.withdrawalDelayer.withdrawalDelay / 60 / 60)
+    // Extracts the hours and minutes from the withdrawalDelay time stamp
+    const hours = coordinatorState?.withdrawalDelayer.withdrawalDelay / 60 / 60
+    const hoursFixed = Math.floor(hours)
+    // Minutes are in a value between 0-1, so we need to convert to 0-59
+    const minutes = Math.round((hours - hoursFixed) * 59)
+
+    if (hours < 1) {
+      return `${minutes}m`
+    } else {
+      return `${Math.round(hours)}h`
+    }
   }
 
   /**
@@ -141,10 +151,14 @@ function Exit ({
         // Extracts the hours and minutes from the remaining difference
         const hours = remainingDifference / 1000 / 60 / 60
         const hoursFixed = Math.floor(hours)
-        // Minutes are in a value between 0-1, so we need to convert to 0-60
-        const minutes = Math.round((hours - hoursFixed) * 60)
+        // Minutes are in a value between 0-1, so we need to convert to 0-59
+        const minutes = Math.round((hours - hoursFixed) * 59)
 
-        return `${hoursFixed}h ${minutes}m`
+        if (hoursFixed < 1) {
+          return `${minutes}m`
+        } else {
+          return `${hoursFixed}h ${minutes}m`
+        }
       }
     }
   }
@@ -264,7 +278,7 @@ function Exit ({
                 </div>
                 <div className={classes.withdrawDelayedButtons}>
                   <button className={`${classes.withdrawButton} ${classes.withdrawDelayerInstantButton}`} onClick={onCheckAvailabilityClick}>Check availability in 10m</button>
-                  <button className={`${classes.withdrawButton} ${classes.withdrawDelayerButton}`} onClick={onWithdrawDelayedClick}>Withdraw in {getWithdrawalDelayerTime()} {getWithdrawalDelayerTime() === 1 ? 'hour' : 'hours'}</button>
+                  <button className={`${classes.withdrawButton} ${classes.withdrawDelayerButton}`} onClick={onWithdrawDelayedClick}>Withdraw in {getWithdrawalDelayerTime()}</button>
                 </div>
               </div>
             )

src/views/shared/page-header/page-header.styles.js

@@ -1,15 +1,15 @@
 import { createUseStyles } from 'react-jss'
 
-const usePageHeaderStyles = createUseStyles(theme => ({
-  root: {
+const usePageHeaderStyles = createUseStyles((theme) => ({
+  root: ({ hasSubtitle }) => ({
     width: '100%',
     position: 'absolute',
     height: theme.headerHeight,
     display: 'flex',
-    alignItems: 'flex-end',
+    alignItems: hasSubtitle ? 'flex-end' : 'center',
     zIndex: 998,
     background: 'transparent'
-  },
+  }),
   headerWrapper: {
     width: '100%',
     display: 'flex',

src/views/shared/page-header/page-header.view.jsx

@@ -15,7 +15,7 @@ function PageHeader ({
   onGoBack,
   onClose
 }) {
-  const classes = usePageHeaderStyles()
+  const classes = usePageHeaderStyles({ hasSubtitle: subtitle !== undefined })
 
   return (
     <header className={classes.root}>

src/views/shared/transaction-actions/transaction-actions.view.jsx

@@ -6,8 +6,9 @@ import useTransactionActionsStyles from './transaction-actions.styles'
 import { ReactComponent as SendIcon } from '../../../images/icons/send.svg'
 import { ReactComponent as DepositIcon } from '../../../images/icons/deposit.svg'
 import { ReactComponent as WithdrawIcon } from '../../../images/icons/withdraw.svg'
+import { ReactComponent as TokenSwapIcon } from '../../../images/icons/token-swap.svg'
 
-function TransactionActions ({ hideWithdraw, hideSend, hideDeposit, accountIndex, tokenId }) {
+function TransactionActions ({ hideWithdraw, hideSend, hideDeposit, hideSwap, accountIndex, tokenId }) {
   const classes = useTransactionActionsStyles()
   const baseQueryString = accountIndex !== undefined ? `?accountIndex=${accountIndex}` : ''
   const depositQueryString = tokenId !== undefined ? `?accountIndex=${accountIndex}&tokenId=${tokenId}` : ''
@@ -50,6 +51,16 @@ function TransactionActions ({ hideWithdraw, hideSend, hideDeposit, accountIndex
             </div>
             )
       }
+      {hideSwap || process.env.REACT_APP_ENABLE_TOKEN_SWAP !== 'true'
+        ? <></>
+        : (
+          <div className={classes.action}>
+            <Link to='/token-swap' className={classes.button}>
+              <TokenSwapIcon className={classes.buttonIcon} />
+            </Link>
+            <p className={classes.buttonText}>Swap</p>
+          </div>
+          )}
     </div>
   )
 }

src/views/shared/transaction-info/transaction-info.view.jsx

@@ -87,7 +87,7 @@ function TransactionInfo ({
               value: getPartiallyHiddenHermezAddress(txData.fromHezEthereumAddress)
             }}
             to={{
-              subtitle: txData.toHezEthereumAddress.toLowerCase() === INTERNAL_ACCOUNT_ETH_ADDR.toLowerCase()
+              subtitle: txData.toHezEthereumAddress?.toLowerCase() === INTERNAL_ACCOUNT_ETH_ADDR.toLowerCase()
                 ? getPartiallyHiddenHermezAddress(txData.toBjj || txData.toBJJ)
                 : getPartiallyHiddenHermezAddress(txData.toHezEthereumAddress)
             }}

src/views/token-swap/token-swap.styles.js

@@ -0,0 +1,11 @@
+import { createUseStyles } from 'react-jss'
+
+const useTokenSwapStyles = createUseStyles(() => ({
+  root: {
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'column'
+  }
+}))
+
+export default useTokenSwapStyles

src/views/token-swap/token-swap.view.jsx

@@ -0,0 +1,42 @@
+import { push } from 'connected-react-router'
+import React from 'react'
+import { connect } from 'react-redux'
+
+import useTokenSwapStyles from './token-swap.styles'
+import * as globalActions from '../../store/global/global.actions'
+import * as tokenSwapActions from '../../store/token-swap/token-swap.actions'
+import Container from '../shared/container/container.view'
+
+function TokenSwap ({ onChangeHeader, onCleanup }) {
+  const classes = useTokenSwapStyles()
+
+  React.useEffect(() => {
+    onChangeHeader()
+  }, [])
+
+  React.useEffect(() => onCleanup, [onCleanup])
+
+  return (
+    <div className={classes.root}>
+      <Container addHeaderPadding disableTopGutter>
+        <p>It works</p>
+      </Container>
+    </div>
+  )
+}
+
+const mapDispatchToProps = (dispatch) => ({
+  onChangeHeader: () =>
+    dispatch(
+      globalActions.changeHeader({
+        type: 'page',
+        data: {
+          title: 'Swap',
+          closeAction: push('/')
+        }
+      })
+    ),
+  onCleanup: () => dispatch(tokenSwapActions.resetState())
+})
+
+export default connect(null, mapDispatchToProps)(TokenSwap)

src/views/transaction/components/fee/fee.view.jsx

@@ -15,18 +15,19 @@ function Fee ({
   estimatedWithdrawFee,
   token,
   preferredCurrency,
-  fiatExchangeRates
+  fiatExchangeRates,
+  showInFiat
 }) {
   const [isWithdrawFeeExpanded, setIsWithdrawFeeExpanded] = React.useState(false)
   const classes = useFeeStyles({ isWithdrawFeeExpanded })
+  const l2RealFee = getRealFee(amount, token, l2Fee)
+  const l2FeeInFiat = getTokenAmountInPreferredCurrency(l2RealFee, token.USD, preferredCurrency, fiatExchangeRates)
 
   function getTotalEstimatedWithdrawFee () {
     if (!estimatedWithdrawFee) {
       return '--'
     }
 
-    const l2RealFee = getRealFee(amount, token, l2Fee)
-    const l2FeeInFiat = getTokenAmountInPreferredCurrency(l2RealFee, token.USD, preferredCurrency, fiatExchangeRates)
     const estimatedWithdrawFeeInFiat = getAmountInPreferredCurrency(estimatedWithdrawFee.USD, preferredCurrency, fiatExchangeRates)
 
     return (l2FeeInFiat + estimatedWithdrawFeeInFiat).toFixed(2)
@@ -44,7 +45,9 @@ function Fee ({
     return (
       <div className={classes.feeWrapper}>
         <p className={classes.fee}>
-          Fee {`${Number(getRealFee(amount, token, l2Fee).toFixed(MAX_TOKEN_DECIMALS))} ${token.symbol}`}
+          Fee&nbsp;
+          <span>{showInFiat ? Number(l2FeeInFiat) : Number(l2RealFee.toFixed(MAX_TOKEN_DECIMALS))} </span>
+          <span>{(showInFiat) ? preferredCurrency : token.symbol}</span>
         </p>
       </div>
     )