Merge pull request #586 from hermeznetwork/develop

Develop

package.json

@@ -1,6 +1,6 @@
 {
   "name": "wallet-ui",
-  "version": "v1.1.5",
+  "version": "v1.1.6",
   "private": true,
   "scripts": {
     "start:dev": "react-scripts start",
@@ -12,7 +12,7 @@
     "lint:fix": "standard --fix"
   },
   "dependencies": {
-    "@hermeznetwork/hermezjs": "1.1.6",
+    "@hermeznetwork/hermezjs": "1.1.7",
     "@walletconnect/web3-provider": "^1.4.1",
     "axios": "^0.21.1",
     "big-integer": "^1.6.48",

src/constants.js

@@ -35,9 +35,11 @@ export const PRIVACY_POLICY_URL = 'https://hermez.io/privacy-policy'
 
 export const TERMS_OF_SERVICE_URL = 'https://hermez.io/terms-of-service'
 
-export const AUTO_REFRESH_RATE = 60000 // 1min
+export const AUTO_REFRESH_RATE = 60_000 // 1min
 
-export const RETRY_POOL_TXS_RATE = 60000 // 10min
+export const RETRY_POOL_TXS_RATE = 6000_000 // 10min
+
+export const COORDINATOR_STATE_REFRESH_RATE = 30_000 // 30s
 
 export const STORAGE_VERSION_KEY = 'hermezWalletStorageVersion'
 
@@ -49,10 +51,12 @@ export const HERMEZ_HELP_CENTER_URL = 'https://docs.hermez.io/#/faq/end-users'
 
 export const HERMEZ_WEB_URL = 'https://hermez.io'
 
-export const DEPOSIT_TX_TIMEOUT = 86400000 // 24h
+export const DEPOSIT_TX_TIMEOUT = 8_640_0000 // 24h
 
 export const AIRDROP_MORE_INFO_URL = 'https://blog.hermez.io/hermez-community-rewards'
 
 export const HEZ_TOKEN_ID = 1
 
 export const METAMASK_UPDATE_HELP_LINK = 'https://twitter.com/hermez_network/status/1405812176053538817'
+
+export const DELAY_TO_NEXT_FORGER = 30_000 // 30s

src/routing/routes.jsx

@@ -2,11 +2,11 @@ import React from 'react'
 import { TxType } from '@hermeznetwork/hermezjs/src/enums'
 
 import Home from '../views/home/home.view'
+import Login from '../views/login/login.view'
 import Transaction from '../views/transaction/transaction.view'
 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 Login from '../views/login/login.view'
 import MyCode from '../views/my-code/my-code.view'
 
 const routes = [
@@ -16,6 +16,7 @@ const routes = [
   },
   {
     path: '/login',
+    isPublic: true,
     render: () => <Login />
   },
   {

src/store/global/global.reducer.js

@@ -40,7 +40,6 @@ function getInitialGlobalState () {
     pendingDepositsCheckTask: {
       status: 'pending'
     },
-    nextForgers: [],
     coordinatorStateTask: {
       status: 'pending'
     },
@@ -417,10 +416,8 @@ function globalReducer (state = getInitialGlobalState(), action) {
       }
     }
     case globalActionTypes.LOAD_COORDINATOR_STATE_SUCCESS: {
-      const nextForgers = [...new Set(action.coordinatorState.network.nextForgers.map((nextForger) => nextForger.coordinator.URL))]
       return {
         ...state,
-        nextForgers,
         coordinatorStateTask: {
           status: 'successful',
           data: action.coordinatorState

src/store/global/global.thunks.js

@@ -14,6 +14,8 @@ import * as airdropApi from '../../apis/rewards'
 import * as storage from '../../utils/storage'
 import * as constants from '../../constants'
 import { isTxMined, hasTxBeenReverted, isTxCanceled, isTxExpectedToFail } from '../../utils/ethereum'
+import { CurrencySymbol } from '../../utils/currencies'
+import { getNextForgerUrls } from '../../utils/coordinator'
 
 /**
  * Sets the environment to use in hermezjs. If the chainId is supported will pick it up
@@ -84,8 +86,12 @@ function changeRedirectRoute (redirectRoute) {
  * @param {string[]} symbols - ISO 4217 currency codes
  * @returns {void}
  */
-function fetchFiatExchangeRates (symbols) {
+function fetchFiatExchangeRates () {
   return (dispatch) => {
+    const symbols = Object.values(CurrencySymbol)
+      .filter(currency => currency.code !== CurrencySymbol.USD.code)
+      .map((currency) => currency.code)
+
     dispatch(globalActions.loadFiatExchangeRates())
 
     return fiatExchangeRatesApi.getFiatExchangeRates(symbols)
@@ -502,7 +508,8 @@ function checkPendingDeposits () {
 
 function checkPendingTransactions () {
   return (_, getState) => {
-    const { global: { wallet, nextForgers } } = getState()
+    const { global: { wallet, coordinatorStateTask } } = getState()
+    const nextForgerUrls = getNextForgerUrls(coordinatorStateTask.data)
 
     hermezjs.TxPool.getPoolTransactions(undefined, wallet.publicKeyCompressedHex)
       .then((poolTransactions) => {
@@ -533,7 +540,7 @@ function checkPendingTransactions () {
               fee: transaction.fee
             }
 
-            return Tx.generateAndSendL2Tx(txData, wallet, transaction.token, nextForgers, false)
+            return Tx.generateAndSendL2Tx(txData, wallet, transaction.token, nextForgerUrls, false)
               .catch(() => {})
           })
 

src/store/login/login.thunks.js

@@ -11,6 +11,7 @@ import { buildEthereumBIP44Path } from '../../utils/hw-wallets'
 import { HttpStatusCode } from '../../utils/http'
 import { STEP_NAME } from './login.reducer'
 import { WalletName } from '../../views/login/login.view'
+import { getNextForgerUrls } from '../../utils/coordinator'
 
 async function getSignerData (provider, walletName, accountData) {
   switch (walletName) {
@@ -148,8 +149,9 @@ function postCreateAccountAuthorization (wallet) {
   return (dispatch, getState) => {
     const {
       login: { accountAuthSignatures },
-      global: { redirectRoute, ethereumNetworkTask, nextForgers }
+      global: { redirectRoute, ethereumNetworkTask, coordinatorStateTask }
     } = getState()
+    const nextForgerUrls = getNextForgerUrls(coordinatorStateTask.data)
 
     const chainIdSignatures = accountAuthSignatures[ethereumNetworkTask.data.chainId] || {}
     const currentSignature = chainIdSignatures[wallet.hermezEthereumAddress]
@@ -165,7 +167,7 @@ function postCreateAccountAuthorization (wallet) {
           wallet.hermezEthereumAddress,
           wallet.publicKeyBase64,
           signature,
-          nextForgers
+          nextForgerUrls
         ).catch((error) => {
           // If the coordinators already have the CreateAccountsAuth signature,
           // we ignore the error

src/store/transaction/transaction.thunks.js

@@ -11,6 +11,7 @@ import { getFixedTokenAmount, getTokenAmountInPreferredCurrency } from '../../ut
 import { getProvider } from '@hermeznetwork/hermezjs/src/providers'
 import { ETHER_TOKEN_ID } from '@hermeznetwork/hermezjs/src/constants'
 import { getEthereumAddress } from '@hermeznetwork/hermezjs/src/addresses'
+import { getNextBestForger, getNextForgerUrls } from '../../utils/coordinator'
 
 /**
  * Fetches the account details for a token id in an Ethereum wallet.
@@ -196,10 +197,13 @@ function fetchAccountBalance () {
  * @returns {void}
  */
 function fetchFees () {
-  return function (dispatch) {
+  return function (dispatch, getState) {
+    const { global: { coordinatorStateTask } } = getState()
+    const nextForger = getNextBestForger(coordinatorStateTask.data)
+
     dispatch(transactionActions.loadFees())
 
-    return CoordinatorAPI.getState()
+    return CoordinatorAPI.getState({}, nextForger.coordinator.URL)
       .then(res => dispatch(transactionActions.loadFeesSuccess(res.recommendedFee)))
       .catch(err => dispatch(transactionActions.loadFeesFailure(err)))
   }
@@ -374,15 +378,16 @@ function forceExit (amount, account) {
 
 function exit (amount, account, fee) {
   return (dispatch, getState) => {
-    const { global: { wallet, nextForgers } } = getState()
+    const { global: { wallet, coordinatorStateTask } } = getState()
+    const nextForgerUrls = getNextForgerUrls(coordinatorStateTask.data)
     const txData = {
       type: TxType.Exit,
       from: account.accountIndex,
       amount: HermezCompressedAmount.compressAmount(amount),
       fee
     }
 
-    return Tx.generateAndSendL2Tx(txData, wallet, account.token, nextForgers)
+    return Tx.generateAndSendL2Tx(txData, wallet, account.token, nextForgerUrls)
       .then(() => dispatch(transactionActions.goToFinishTransactionStep()))
       .catch((error) => {
         console.error(error)
@@ -394,16 +399,16 @@ function exit (amount, account, fee) {
 
 function transfer (amount, from, to, fee) {
   return (dispatch, getState) => {
-    const { global: { wallet, nextForgers } } = getState()
-
+    const { global: { wallet, coordinatorStateTask } } = getState()
+    const nextForgerUrls = getNextForgerUrls(coordinatorStateTask.data)
     const txData = {
       from: from.accountIndex,
       to: to.accountIndex || to.hezEthereumAddress || to.hezBjjAddress,
       amount: HermezCompressedAmount.compressAmount(amount),
       fee
     }
 
-    return Tx.generateAndSendL2Tx(txData, wallet, from.token, nextForgers)
+    return Tx.generateAndSendL2Tx(txData, wallet, from.token, nextForgerUrls)
       .then(() => dispatch(transactionActions.goToFinishTransactionStep()))
       .catch((error) => {
         console.error(error)

src/styles/theme.js

@@ -43,7 +43,7 @@ const theme = {
     upSm: '@media (min-width: 576px)'
   },
   spacing: (value) => value * 8,
-  headerHeight: 80,
+  headerHeight: 84,
   sidenavWidth: 295
 }
 

src/utils/coordinator.js

@@ -0,0 +1,67 @@
+import { DELAY_TO_NEXT_FORGER } from '../constants'
+
+/**
+ * Extracts the next forgers without duplicates from the coordinator state returned by
+ * the Hermez API
+ * @param {Object} coordinatorState - Coordinator state returned by the Hermez API
+ * @returns Next forgers
+ */
+function getNextForgers (coordinatorState) {
+  return coordinatorState.network.nextForgers.reduce((acc, curr) => {
+    const doesItemExist = acc.find(elem => elem.coordinator.forgerAddr === curr.coordinator.forgerAddr)
+
+    return doesItemExist
+      ? acc
+      : [...acc, curr]
+  }, [])
+}
+
+/**
+ * Extracts the nextForgerUrls without duplicates from the coordinator state returned by
+ * the Hermez API
+ * @param {Object} coordinatorState - Coordinator state returned by the Hermez API
+ * @returns URL's of the next forgers
+ */
+function getNextForgerUrls (coordinatorState) {
+  const nextForgerUrls = getNextForgers(coordinatorState)
+    .map((nextForger) => nextForger.coordinator.URL)
+
+  return nextForgerUrls
+}
+
+/**
+ * Returns the next best forger of the network. The next best forger is the one which will
+ * be forging for at least enough time to pick the transaction that we are going to send
+ * afterwards. If it's about to finish forging, the next forger matching this criteria
+ * will be picked up
+ * @param {Object} coordinatorState - Coordinator state returned by the Hermez API
+ * @returns Next best forger
+ */
+function getNextBestForger (coordinatorState) {
+  const nextForgers = getNextForgers(coordinatorState)
+
+  if (nextForgers.length === 0) {
+    return undefined
+  }
+
+  if (nextForgers.length === 1) {
+    return nextForgers[0]
+  }
+
+  const bestNextForgers = nextForgers.filter((forger) => {
+    const toTimestamp = new Date(forger.period.toTimestamp).getTime()
+    const expectedMinTime = Date.now() + DELAY_TO_NEXT_FORGER
+
+    return expectedMinTime <= toTimestamp
+  })
+
+  return bestNextForgers.length === 0
+    ? nextForgers[1]
+    : bestNextForgers[0]
+}
+
+export {
+  getNextForgers,
+  getNextForgerUrls,
+  getNextBestForger
+}

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

@@ -11,7 +11,6 @@ import * as globalThunks from '../../store/global/global.thunks'
 import * as accountDetailsThunks from '../../store/account-details/account-details.thunks'
 import Spinner from '../shared/spinner/spinner.view'
 import TransactionList from './components/transaction-list/transaction-list.view'
-import withAuthGuard from '../shared/with-auth-guard/with-auth-guard.view'
 import { getFixedTokenAmount, getTokenAmountInPreferredCurrency } from '../../utils/currencies'
 import Container from '../shared/container/container.view'
 import { changeHeader } from '../../store/global/global.actions'
@@ -49,7 +48,6 @@ function AccountDetails ({
   onCheckPendingDeposits,
   onAddPendingDelayedWithdraw,
   onRemovePendingDelayedWithdraw,
-  onLoadCoordinatorState,
   onCheckPendingDelayedWithdrawals,
   onCheckPendingWithdrawals,
   onNavigateToTransactionDetails,
@@ -78,10 +76,6 @@ function AccountDetails ({
     onChangeHeader(accountTask.data?.token.name)
   }, [accountTask, onChangeHeader])
 
-  React.useEffect(() => {
-    onLoadCoordinatorState()
-  }, [])
-
   React.useEffect(() => {
     const loadInitialData = () => {
       onCheckPendingDeposits()
@@ -366,7 +360,6 @@ const mapDispatchToProps = (dispatch) => ({
     dispatch(globalThunks.addPendingDelayedWithdraw(pendingDelayedWithdraw)),
   onRemovePendingDelayedWithdraw: (pendingDelayedWithdrawId) =>
     dispatch(globalThunks.removePendingDelayedWithdraw(pendingDelayedWithdrawId)),
-  onLoadCoordinatorState: () => dispatch(globalThunks.fetchCoordinatorState()),
   onCheckPendingWithdrawals: () =>
     dispatch(globalThunks.checkPendingWithdrawals()),
   onCheckPendingDelayedWithdrawals: () =>
@@ -377,4 +370,4 @@ const mapDispatchToProps = (dispatch) => ({
     dispatch(resetState())
 })
 
-export default withAuthGuard(connect(mapStateToProps, mapDispatchToProps)(AccountDetails))
+export default connect(mapStateToProps, mapDispatchToProps)(AccountDetails)