fix: fixed display wrong transactions on transaction table

feat: added destinationChainId to identify the destination
feat: moved logic for host and side network to independent classes
feat: added logic to identify if exist most than one network config for host network
feat: Updated indexedDB version storage
feat: the migration from localstorage to indexedDB now save the destinationChainId
fix: fixed error on search transaction component, now display correctly the transaction
feat: new logo
feat: new prev step for connect wallet and choice the destination network

Signed-off-by: Jonathan Huamani <jonathan.huamani@iovlabs.org>

src/components/crossForm/CrossForm.vue

@@ -359,7 +359,7 @@ export default {
       }
     },
     accountConnected() {
-      return `${this.sharedState.chainId} ${this.sharedState.accountAddress}`
+      return `${this.sharedState.chainId} ${this.sharedState.accountAddress} ${this.sharedState.sideConfig.networkId}`
     },
     fee() {
       if (!this.sharedState.currentConfig) return this.rskFee
@@ -400,13 +400,24 @@ export default {
       this.amount = value.replace(',', '.').replace(/[^0-9]\./gi, '')
     },
     accountConnected() {
+      if (this.isMounted) {
+        this.handleOnAccountConnected()
+      }
+    },
+  },
+  mounted() {
+    if (!this.erc20TokenInstance) {
+      this.handleOnAccountConnected()
+    }
+    this.isMounted = true
+  },
+  methods: {
+    handleOnAccountConnected() {
       this.refreshBalanceAndAllowance()
       this.resetForm()
       this.setClaimCost()
       this.initData()
     },
-  },
-  methods: {
     initData() {
       this.erc20TokenInstance = new ERC20TokenTransaction({
         web3: this.sharedState.web3,

src/components/layouts/NavBar.vue

@@ -2,18 +2,17 @@
   <!-- Navigation -->
   <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
     <div class="container">
-      <a class="navbar-brand" href="https://rsk.co">
-        <img
-          id="logo"
-          src="https://developers.rsk.co/assets/img/rsk_logo.svg"
-          class="logo"
-          alt="RSK Token Bridge"
-        />
-      </a>
-      <div
-        v-if="sharedState.isConnected"
-        class="wallet-status navbar-item indicator badge-outline badge-pill"
-      >
+      <div class="col-2">
+        <a class="navbar-brand" href="https://rsk.co">
+          <img
+            id="logo"
+            src="../../assets/img/bridge-logo.png"
+            class="logo"
+            alt="RSK Token Bridge"
+          />
+        </a>
+      </div>
+      <div v-if="isConnected" class="wallet-status navbar-item indicator badge-outline badge-pill">
         <span aria-describedby="tooltip-status" class="fromNetwork">
           {{ sharedState.currentConfig.name }}
         </span>
@@ -31,12 +30,35 @@
       </button>
       <div id="navbarResponsive" class="navbar-collapse collapse">
         <div
-          v-if="sharedState.isConnected"
+          v-if="isConnected"
           class="wallet-status navbar-item badge-pill text-truncate"
           style="width: 85px;"
         >
           <span id="address">{{ sharedState.accountAddress }}</span>
         </div>
+        <div v-if="networks.length > 0">
+          <div v-if="isConnected" class="input-group">
+            <span class="input-group-text mr-2 bg-transparent text-primary border-0">
+              <i class="fas fa-long-arrow-alt-right"></i>
+            </span>
+            <select
+              id="networks"
+              v-model="sideConfig"
+              name="networks"
+              class="form-control"
+              @change="changeSideNetwork"
+            >
+              <option value="" selected disabled>Destination network</option>
+              <option
+                v-for="network in networks"
+                :key="network.crossToNetwork.networkId"
+                :value="network.crossToNetwork"
+              >
+                {{ network.crossToNetwork.name }}
+              </option>
+            </select>
+          </div>
+        </div>
         <div class="navbar-item ml-auto">
           <button
             v-if="!sharedState.isConnected"
@@ -47,7 +69,7 @@
           >
             Connect wallet
           </button>
-          <a v-if="sharedState.isConnected" id="help" href="https://developers.rsk.co/slack/">
+          <a v-if="isConnected" id="help" href="https://developers.rsk.co/slack/">
             Do you need help?
           </a>
         </div>
@@ -64,12 +86,34 @@ export default {
   data() {
     return {
       sharedState: store.state,
+      sideNetworkConfig: null,
     }
   },
+  computed: {
+    sideConfig: {
+      get: function() {
+        return store.state.sideConfig
+      },
+      set: function(value) {
+        this.sideNetworkConfig = value
+      },
+    },
+    networks() {
+      return this.sharedState.networksAvailable
+    },
+    isConnected() {
+      return this.sharedState.isConnected && !this.sharedState.preSettingsEnabled
+    },
+  },
   methods: {
     connectWalletClick() {
       return store.handleLogin()
     },
+    changeSideNetwork() {
+      const { crossToNetwork: hostNetwork } = this.sideNetworkConfig
+      store.state.isConnected = false
+      store.initMainSettings(hostNetwork.networkId, hostNetwork, this.sideNetworkConfig)
+    },
   },
 }
 </script>

src/components/multiChain/MultiChain.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="multi-chain container p-5 mt-5">
+    <div class="row justify-content-center">
+      <template v-if="!sharedState.isConnected">
+        <div class="col-12 text-center">
+          <h4>To cross Token or NFT, is necessary to connect your wallet</h4>
+        </div>
+        <div class="col-12 text-center">
+          <button
+            id="logIn"
+            type="button"
+            class="btn btn-primary badge-pill"
+            @click="connectWalletClick"
+          >
+            Connect Wallet
+          </button>
+        </div>
+      </template>
+      <template v-if="sharedState.preSettingsEnabled">
+        <div class="col-12 text-center">
+          <h4>
+            You are connected with <span class="text-primary">{{ currentNetworkName }}</span>
+          </h4>
+        </div>
+        <div class="col-12 text-center">
+          <h4>Please, choose a destination network</h4>
+        </div>
+        <div class="col-4 text-center">
+          <select id="networks" v-model="sideNetworkConfig" name="networks" class="form-control">
+            <option value="" selected disabled>Please select a network</option>
+            <option
+              v-for="network in networks"
+              :key="network.crossToNetwork.networkId"
+              :value="network.crossToNetwork"
+            >
+              {{ network.crossToNetwork.name }}
+            </option>
+          </select>
+        </div>
+        <div class="col-3">
+          <button class="btn btn-primary" @click="selectSideNetwork">Select Destination</button>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+import { store } from '@/store'
+
+export default {
+  name: 'MultiChain',
+  data() {
+    return {
+      sharedState: store.state,
+      sideNetworkConfig: '',
+    }
+  },
+  computed: {
+    networks() {
+      return this.sharedState.networksAvailable
+    },
+    currentNetworkName() {
+      return this.networks[0].name
+    },
+  },
+  methods: {
+    connectWalletClick() {
+      return store.handleLogin()
+    },
+    selectSideNetwork() {
+      const { crossToNetwork: hostNetwork } = this.sideNetworkConfig
+
+      store.initMainSettings(hostNetwork.networkId, hostNetwork, this.sideNetworkConfig)
+    },
+  },
+}
+</script>
+
+<style scoped>
+.multi-chain {
+  border: 2px solid var(--primary);
+  border-radius: 10px;
+}
+.multi-chain-btn {
+  min-width: 10em;
+}
+</style>

src/components/transactions/SearchTransaction.vue

@@ -223,6 +223,9 @@ export default {
         ...receipt,
       }
 
+      console.log('%cTransaction: ', 'color: white; background-color: purple; font-weight: bold')
+      console.table(transaction)
+
       // save transaction ...
       const accountsAddresses = [decodedEvent._from.toLowerCase()]
       if (decodedEvent._from.toLowerCase() !== decodedEvent._to.toLowerCase()) {

src/components/transactions/Transactions.vue

@@ -110,6 +110,12 @@ export default {
       }.bind(this),
       20_000,
     )
+    this.$watch(
+      () => this.sharedState.sideConfig,
+      (sideConfig, prevSideConfig) => {
+        this.refreshTransactions({ limit: this.limit, offset: 0 })
+      },
+    )
   },
   beforeUnmount() {
     clearInterval(this.pollingBlockNumber)
@@ -151,11 +157,13 @@ export default {
        */
       await this.$services.TransactionService.synchronizeTransactions(
         accountAddress,
-        rskConfig.localStorageName,
+        rskConfig,
+        sideConfig,
       )
       await this.$services.TransactionService.synchronizeTransactions(
         accountAddress,
-        sideConfig.localStorageName,
+        sideConfig,
+        rskConfig,
       )
       /* Synchronization end */
       const tokenTypes = [this.globalState.currentTokenType]

src/components/transactions/mixins/TransactionRowMixin.js

@@ -10,6 +10,7 @@ import { TOKEN_TYPE_ERC_20, TOKEN_TYPE_ERC_721 } from '@/constants/tokenType'
 import ERC20TokenTransaction from '@/modules/transactions/transactionsTypes/ERC20TokenTransaction'
 import ERC721NFTTransaction from '@/modules/transactions/transactionsTypes/ERC721NFTTransaction'
 import { decodeCrossEvent } from '@/utils/decodeEvents'
+import { findNetworkByChainId } from '@/constants/networks'
 
 const DEFAULT_COPY_ICON = 'far fa-clipboard'
 
@@ -80,7 +81,7 @@ export default {
         : this.sharedState.sideConfig
     },
     toNetwork() {
-      return this.fromNetwork.crossToNetwork
+      return findNetworkByChainId(this.transaction.destinationChainId)
     },
     web3() {
       return this.toNetwork.isRsk ? this.sharedState.rskWeb3 : this.sharedState.sideWeb3

src/config/offlineDB.connection.js

@@ -17,9 +17,10 @@ const dbInstance = new Dexie(process.env.VUE_APP_OFFLINE_DB || DB_DEFAULT_NAME)
  *  - receiverAddress: string
  *  - tokenId: number "Added on v4 to support ERC721 transactions"
  *  - tokenType: string "Added on v4 to check the kind of transaction"
+ *  - destinationChainId: number "Destination Chain ID"
  */
-dbInstance.version(4).stores({
-  transactions: `transactionHash, *accountsAddresses, networkId, timestamp, blockNumber, receiveAmount, currentStep, type, senderAddress, receiverAddress, tokenId, tokenType`,
+dbInstance.version(5).stores({
+  transactions: `transactionHash, *accountsAddresses, networkId, timestamp, blockNumber, receiveAmount, currentStep, type, senderAddress, receiverAddress, tokenId, tokenType, destinationChainId`,
 })
 
 export default dbInstance

src/constants/networks.js

@@ -221,47 +221,33 @@ function getTokensWithReceiveToken(mainTokens, sideTokens) {
   }))
 }
 
-export function getRskNetworkConf() {
-  // if it has the side chain set, depends on the side chain
-  switch (sideChainId) {
-    case chainId.TEST_NET_BINANCE:
-      return TEST_NET_RSK_CROSS_BINANCE_CONFIG
-    case chainId.TEST_NET_KOVAN:
-      return TEST_NET_RSK_CROSS_KOVAN_CONFIG
-    case chainId.TEST_NET_RINKEBY:
-      return TEST_NET_RSK_CROSS_RINKEBY_CONFIG
-    // here we can put another conf like for rinkeby
-  }
-
-  return MAIN_NET_RSK_CONFIG
+export function findNetworkByChainId(chainId) {
+  const networks = getNetworksAvailable()
+  return networks.find(net => net.networkId === chainId)
 }
 
 export function getNetworksConf(selectedChainId) {
   const networksAvailable = getNetworksAvailable()
-  const network = networksAvailable.find(net => net.networkId === selectedChainId)
-  if (!network) {
+  const networks = networksAvailable.filter(net => net.networkId === selectedChainId)
+  if (!networks || networks.length === 0) {
     throw new Error(`Network ${selectedChainId} not found`)
   }
 
+  if (networks.length !== 1) {
+    return {
+      rskConfig: null,
+      sideConfig: null,
+      networks,
+    }
+  }
+
+  const [network] = networks
   return {
     rskConfig: network.isRsk ? network : network.crossToNetwork,
     sideConfig: network.isSide ? network : network.crossToNetwork,
   }
 }
 
-export function getSideNetworkConf() {
-  switch (sideChainId) {
-    case chainId.TEST_NET_BINANCE:
-      return TEST_NET_BINANCE_CONFIG
-    case chainId.TEST_NET_KOVAN:
-      return TEST_NET_KOVAN_CONFIG
-    case chainId.TEST_NET_RINKEBY:
-      return TEST_NET_RINKEBY_CONFIG
-  }
-
-  return MAIN_NET_ETH_CONFIG
-}
-
 export function getEnvironmentNetworks() {
   return rskNetworks.filter(network => network.env === process.env.VUE_APP_ENV)
 }

src/modules/networks/HostNetwork.js

@@ -0,0 +1,16 @@
+import Network from '@/modules/networks/Network'
+import { retry3Times } from '@/utils'
+
+export default class HostNetwork extends Network {
+  async getTypesLimits(contract) {
+    try {
+      const limits = await retry3Times(contract.methods.getTypesLimits().call)
+      if (!limits) {
+        throw new Error(`Wrong value for limits ${limits}`)
+      }
+      return limits
+    } catch (error) {
+      throw new Error(`Error in getTypesLimits ${error.message}`)
+    }
+  }
+}