From f4adf02fca4005d31935d57606e2570638c391df Mon Sep 17 00:00:00 2001
From: Jonathan Huamani <jonathan.huamani@iovlabs.org>
Date: Fri, 10 Dec 2021 19:02:33 -0500
Subject: [PATCH 1/6] feat: Added menu component

Signed-off-by: Jonathan Huamani <jonathan.huamani@iovlabs.org>
---
 src/components/layouts/Menu.vue | 114 ++++++++++++++++++++++++++++++++
 1 file changed, 114 insertions(+)
 create mode 100644 src/components/layouts/Menu.vue

diff --git a/src/components/layouts/Menu.vue b/src/components/layouts/Menu.vue
new file mode 100644
index 00000000..780ea312
--- /dev/null
+++ b/src/components/layouts/Menu.vue
@@ -0,0 +1,114 @@
+<template>
+  <ul class="menu">
+    <li
+      v-for="menuItem in menuItems"
+      :key="menuItem.path"
+      class="menu-item"
+      :class="{ 'menu-item-active': activePath === menuItem.path }"
+    >
+      <router-link :to="menuItem.path">
+        <span v-if="menuItem.icon" :class="`fa ${menuItem.icon} mr-2`"></span>
+        <span>{{ menuItem.title }}</span>
+      </router-link>
+    </li>
+  </ul>
+</template>
+
+<script>
+export default {
+  name: 'Menu',
+  data() {
+    return {
+      selectedMenu: null,
+      menuActiveClassName: 'menu-item-active',
+      menuItems: [
+        {
+          path: '/',
+          title: 'Cross',
+          icon: null,
+        },
+        {
+          path: '/transactions',
+          title: 'Transactions',
+          icon: null,
+        },
+        {
+          path: '/network-info',
+          title: 'Network Info',
+          icon: null,
+        },
+        {
+          path: '/token-list',
+          title: 'Token List',
+          icon: null,
+        },
+      ],
+    }
+  },
+  computed: {
+    activePath() {
+      return this.$router.currentRoute.value.fullPath
+    },
+  },
+}
+</script>
+
+<style scoped>
+.menu {
+  width: 100%;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  text-align: left;
+  list-style: none;
+  transition: background 0.3s, width 0.3s cubic-bezier(0.2, 0, 0, 1) 0s;
+}
+
+.menu:before {
+  display: table;
+  content: '';
+}
+
+.menu-item {
+  width: 100%;
+  left: 0;
+  margin-bottom: 8px;
+  margin-left: 0;
+  margin-top: 4px;
+  padding: 0 16px;
+  border-right: 0;
+  display: flex;
+  align-items: center;
+  transition: border-color 0.3s, background 0.3s, padding 0.1s cubic-bezier(0.215, 0.61, 0.355, 1);
+  height: 40px;
+  line-height: 40px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  position: relative;
+  white-space: nowrap;
+  color: var(--primary);
+  font-size: 12px;
+  cursor: pointer;
+  background-color: rgba(255, 255, 255, 0.3);
+}
+
+.menu-item:hover {
+  opacity: 0.7;
+}
+
+.menu-item:after {
+  transform: scaleY(1);
+  opacity: 1;
+  transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1),
+    opacity 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+
+.menu-item.menu-item-active {
+  border-bottom: 2px solid var(--primary);
+}
+
+.menu-item > * {
+  width: 100%;
+  color: var(--primary) !important;
+}
+</style>

From e0b826030ae3f1190cbda6c9643ec4b467aae856 Mon Sep 17 00:00:00 2001
From: Jonathan Huamani <jonathan.huamani@iovlabs.org>
Date: Fri, 10 Dec 2021 19:03:06 -0500
Subject: [PATCH 2/6] feat: Added sider Component to contain menu and logo in
 left side

Signed-off-by: Jonathan Huamani <jonathan.huamani@iovlabs.org>
---
 src/components/layouts/Sider.vue | 45 ++++++++++++++++++++++++++++++++
 1 file changed, 45 insertions(+)
 create mode 100644 src/components/layouts/Sider.vue

diff --git a/src/components/layouts/Sider.vue b/src/components/layouts/Sider.vue
new file mode 100644
index 00000000..dc3a5d80
--- /dev/null
+++ b/src/components/layouts/Sider.vue
@@ -0,0 +1,45 @@
+<template>
+  <aside class="sider">
+    <div class="h-100">
+      <div class="sider-logo">
+        <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>
+      <Menu />
+    </div>
+    <div class="fixed-bottom w-100 m-4">
+      <a id="help" class="text-primary" href="https://developers.rsk.co/slack/">
+        Do you need help?
+      </a>
+    </div>
+  </aside>
+</template>
+
+<script>
+import Menu from '@/components/layouts/Menu'
+
+export default {
+  name: 'Sider',
+  components: { Menu },
+}
+</script>
+
+<style scoped>
+.sider {
+  width: 200px;
+  background-color: #ecf0f1;
+  height: 100vh;
+  position: sticky;
+  flex: 0 0 200px;
+  top: 0;
+}
+.sider-logo {
+  text-align: center;
+}
+</style>

From 19b6e91ab780e6644754b1ebcb3f1184758fbf34 Mon Sep 17 00:00:00 2001
From: Jonathan Huamani <jonathan.huamani@iovlabs.org>
Date: Fri, 10 Dec 2021 19:04:30 -0500
Subject: [PATCH 3/6] feat: Added sider component to App component

Signed-off-by: Jonathan Huamani <jonathan.huamani@iovlabs.org>
---
 src/App.vue | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 0e1d5431..ee1cc770 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,8 +1,13 @@
 <template>
   <div id="main">
-    <NavBar />
-    <router-view />
-    <Footer />
+    <section class="d-flex">
+      <Sider />
+      <section class="d-flex flex-column w-100 justify-content-between">
+        <NavBar />
+        <router-view />
+        <Footer />
+      </section>
+    </section>
     <WrapperModal ref="wrapperModal" />
   </div>
 </template>
@@ -12,6 +17,7 @@ import { provide, ref } from 'vue'
 // import Connection from '@/components/commons/Connection.vue'
 import NavBar from '@/components/layouts/NavBar.vue'
 import Footer from '@/components/layouts/Footer.vue'
+import Sider from '@/components/layouts/Sider'
 import WrapperModal from '@/components/commons/Modals/WrapperModal'
 
 export default {
@@ -20,6 +26,7 @@ export default {
     NavBar,
     Footer,
     WrapperModal,
+    Sider,
   },
   setup() {
     const wrapperModal = ref(null)

From f31b5c0b1387eb4090a4ca1d330662a3dd441ba1 Mon Sep 17 00:00:00 2001
From: Jonathan Huamani <jonathan.huamani@iovlabs.org>
Date: Fri, 10 Dec 2021 19:05:44 -0500
Subject: [PATCH 4/6] feat: moving logic from home to shared store feat: create
 new pages for each section

Signed-off-by: Jonathan Huamani <jonathan.huamani@iovlabs.org>
---
 src/store.js                   |  61 +++++++++++
 src/views/Home.vue             | 187 ++++++---------------------------
 src/views/NetworkInfoPage.vue  |  47 +++++++++
 src/views/TokenListPage.vue    |  37 +++++++
 src/views/TransactionsPage.vue |  34 ++++++
 5 files changed, 211 insertions(+), 155 deletions(-)
 create mode 100644 src/views/NetworkInfoPage.vue
 create mode 100644 src/views/TokenListPage.vue
 create mode 100644 src/views/TransactionsPage.vue

diff --git a/src/store.js b/src/store.js
index dde3b982..c1eb1967 100644
--- a/src/store.js
+++ b/src/store.js
@@ -9,6 +9,9 @@ import { getNetworksAvailable, getNetworksConf } from '@/constants/networks.js'
 
 import { ALL_RPC } from '@/constants/rpc.js'
 import { convertToNumber } from '@/utils/text-helpers'
+import SideNetwork from '@/modules/networks/SideNetwork'
+import HostNetwork from '@/modules/networks/HostNetwork'
+import { blocksToTime } from '@/utils'
 
 export const store = {
   state: reactive({
@@ -28,6 +31,19 @@ export const store = {
     connectionError: '',
     networksAvailable: [],
     preSettingsEnabled: false,
+    networkSettings: {
+      typesLimits: [],
+      rskFee: 0,
+      sideFee: 0,
+      rskFeeNft: 0,
+      sideFeeNft: 0,
+      rskConfirmations: {},
+      sideConfirmations: {},
+      rskConfirmationsNft: {},
+      sideConfirmationsNft: {},
+      rskFedMembers: [],
+      sideFedMembers: [],
+    },
   }),
   accountsChanged(accounts) {
     if (accounts.length === 0) {
@@ -36,6 +52,50 @@ export const store = {
     }
     store.state.accountAddress = accounts[0]
   },
+  async initNetworkSettings() {
+    const rskWeb3 = store.state.rskWeb3
+    const rskConfig = store.state.rskConfig
+    const sideWeb3 = store.state.sideWeb3
+    const sideConfig = store.state.sideConfig
+
+    const sideNetwork = new SideNetwork(sideConfig, sideWeb3)
+    const hostNetwork = new HostNetwork(rskConfig, rskWeb3)
+    const networkSettings = {}
+    networkSettings.rskFee = await hostNetwork.getFeePercentage()
+
+    networkSettings.sideFee = await sideNetwork.getFeePercentage()
+    // We have the premice that the limits will be equal in Side and in RSK
+    // And the tokens wil have the same type on both networks
+    const { limits, confirmations } = await hostNetwork.allowTokensActions()
+    networkSettings.typesLimits = limits
+    networkSettings.rskConfirmations = confirmations
+    networkSettings.rskFedMembers = await hostNetwork.getMembers()
+
+    const { confirmations: sideConfirmations } = await sideNetwork.allowTokensActions()
+    networkSettings.sideConfirmations = sideConfirmations
+
+    networkSettings.sideFedMembers = await sideNetwork.getMembers()
+
+    // NFT
+    if (!rskConfig.nftBridge || !sideConfig.nftBridge) {
+      return
+    }
+    networkSettings.rskFeeNft = await hostNetwork.getFixedFee()
+
+    networkSettings.sideFeeNft = await sideNetwork.getFixedFee()
+
+    const NFT_FIXED_CONFIRMATIONS_BLOCK = 3 // maybe we are going to define it into the nft bridge contract
+
+    networkSettings.rskConfirmationsNft = {
+      confirmations: NFT_FIXED_CONFIRMATIONS_BLOCK,
+      time: blocksToTime(NFT_FIXED_CONFIRMATIONS_BLOCK, rskConfig.secondsPerBlock),
+    }
+    networkSettings.sideConfirmationsNft = {
+      confirmations: NFT_FIXED_CONFIRMATIONS_BLOCK,
+      time: blocksToTime(NFT_FIXED_CONFIRMATIONS_BLOCK, sideConfig.secondsPerBlock),
+    }
+    this.networkSettings = networkSettings
+  },
   async initMainSettings(chainId, rskConfig, sideConfig) {
     const state = store.state
     state.chainId = chainId
@@ -57,6 +117,7 @@ export const store = {
     if (state.web3) {
       const accounts = await state.web3.eth.getAccounts()
       store.accountsChanged(accounts)
+      await this.initNetworkSettings()
     }
   },
   async chainChanged(chainId) {
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 5cb8e771..ad0f0c4b 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,189 +1,66 @@
 <template>
-  <div>
-    <section id="home">
-      <div class="container">
-        <Title />
-        <FormWrapper
-          :types-limits="typesLimits"
-          :rsk-fee="rskFee"
-          :side-fee="sideFee"
-          :rsk-confirmations="rskConfirmations"
-          :side-confirmations="sideConfirmations"
-          @new-transaction="newTransaction = $event"
-        />
-
-        <Transactions
-          :types-limits="typesLimits"
-          :rsk-confirmations="rskConfirmations"
-          :side-confirmations="sideConfirmations"
-          :rsk-fed-members="rskFedMembers"
-          :side-fed-members="sideFedMembers"
-          :new-transaction="newTransaction"
-        />
-
-        <ImportantDetailsErc20
-          v-if="globalState.currentTokenType === tokenTypeErc20"
-          :rsk-fee="rskFee"
-          :side-fee="sideFee"
-          :rsk-confirmations="rskConfirmations"
-          :side-confirmations="sideConfirmations"
-          :rsk-fed-members="rskFedMembers"
-          :side-fed-members="sideFedMembers"
-        />
-        <ImportantDetailsErc721
-          v-else
-          :rsk-fee-nft="rskFeeNft"
-          :side-fee-nft="sideFeeNft"
-          :rsk-confirmations-nft="rskConfirmationsNft"
-          :side-confirmations-nft="sideConfirmationsNft"
-          :rsk-fed-members="rskFedMembers"
-          :side-fed-members="sideFedMembers"
-        />
-
-        <TokenList
-          v-if="
-            globalState.currentTokenType === tokenTypeErc20 &&
-              sharedState.rskConfig?.tokens.length > 0
-          "
-          :types-limits="typesLimits"
-        />
-      </div>
-      <!--- End Tab Content -->
-    </section>
-  </div>
+  <section id="home" class="container">
+    <Title />
+    <FormWrapper
+      :types-limits="settings.typesLimits"
+      :rsk-fee="settings.rskFee"
+      :side-fee="settings.sideFee"
+      :rsk-confirmations="settings.rskConfirmations"
+      :side-confirmations="settings.sideConfirmations"
+      @new-transaction="newTransaction = $event"
+    />
+  </section>
 </template>
 
 <script>
 // --------- import TOKENS and network CONFIG --------------
 
-import { TOKEN_TYPE_ERC_20 } from '@/constants/tokenType.js'
-
 import 'popper.js'
 import 'bootstrap'
 
-import { blocksToTime } from '@/utils'
-
 import Title from '@/components/title/Title.vue'
-import Transactions from '@/components/transactions/Transactions.vue'
-import ImportantDetailsErc20 from '@/components/importantDetails/ImportantDetailsErc20.vue'
-import ImportantDetailsErc721 from '@/components/importantDetails/ImportantDetailsErc721.vue'
-import TokenList from '@/components/tokenList/TokenList.vue'
 import { store } from '@/store.js'
 import globalStore from '@/stores/global.store'
 import FormWrapper from '@/components/formWrapper/FormWrapper'
-import HostNetwork from '@/modules/networks/HostNetwork'
-import SideNetwork from '@/modules/networks/SideNetwork'
-import { isEmpty } from '@/utils/helpers'
-
 export default {
   name: 'Home',
   components: {
     FormWrapper,
     Title,
-    ImportantDetailsErc20,
-    ImportantDetailsErc721,
-    TokenList,
-    Transactions,
   },
   data() {
     return {
       sharedState: store.state,
-      typesLimits: [],
-      rskFee: 0,
-      sideFee: 0,
-      rskFeeNft: 0,
-      sideFeeNft: 0,
-      rskConfirmations: {},
-      sideConfirmations: {},
-      rskConfirmationsNft: {},
-      sideConfirmationsNft: {},
-      rskFedMembers: [],
-      sideFedMembers: [],
       newTransaction: null,
       globalState: globalStore.state,
-      tokenTypeErc20: TOKEN_TYPE_ERC_20,
-      needPreSettings: false,
-      networks: [],
     }
   },
   computed: {
     isConnected() {
       return this.sharedState.isConnected && !this.sharedState.preSettingsEnabled
     },
-    isLoadedAllInfo() {
-      return [
-        this.typesLimits,
-        this.rskFedMembers,
-        this.sideFedMembers,
-        this.rskConfirmations,
-        this.sideConfirmations,
-      ].every(entry => !isEmpty(entry))
-    },
-  },
-  created() {
-    this.$watch(
-      () => this.sharedState.chainId,
-      (chainId, prevChainId) => {
-        if (chainId && this.sharedState.isConnected && !this.sharedState.preSettingsEnabled) {
-          this.initMainSettings()
-        }
-      },
-    )
-    this.$watch(
-      () => this.sharedState.preSettingsEnabled,
-      (preSettingsEnabled, preSettingsEnabledPrev) => {
-        if (preSettingsEnabled) {
-          this.needPreSettings = preSettingsEnabled
-          this.networks = this.sharedState.networksAvailable
-        }
-      },
-    )
-  },
-  methods: {
-    async initMainSettings() {
-      const data = this
-      const rskWeb3 = this.sharedState.rskWeb3
-      const rskConfig = this.sharedState.rskConfig
-      const sideWeb3 = this.sharedState.sideWeb3
-      const sideConfig = this.sharedState.sideConfig
-
-      const sideNetwork = new SideNetwork(sideConfig, sideWeb3)
-      const hostNetwork = new HostNetwork(rskConfig, rskWeb3)
-
-      data.rskFee = await hostNetwork.getFeePercentage()
-
-      data.sideFee = await sideNetwork.getFeePercentage()
-      // We have the premice that the limits will be equal in Side and in RSK
-      // And the tokens wil have the same type on both networks
-      const { limits, confirmations } = await hostNetwork.allowTokensActions()
-      data.typesLimits = limits
-      data.rskConfirmations = confirmations
-      data.rskFedMembers = await hostNetwork.getMembers()
-
-      const { confirmations: sideConfirmations } = await sideNetwork.allowTokensActions()
-      data.sideConfirmations = sideConfirmations
-
-      data.sideFedMembers = await sideNetwork.getMembers()
-
-      // NFT
-      if (!rskConfig.nftBridge || !sideConfig.nftBridge) {
-        return
-      }
-      data.rskFeeNft = await hostNetwork.getFixedFee()
-
-      data.sideFeeNft = await sideNetwork.getFixedFee()
-
-      const NFT_FIXED_CONFIRMATIONS_BLOCK = 3 // maybe we are going to define it into the nft bridge contract
-
-      data.rskConfirmationsNft = {
-        confirmations: NFT_FIXED_CONFIRMATIONS_BLOCK,
-        time: blocksToTime(NFT_FIXED_CONFIRMATIONS_BLOCK, rskConfig.secondsPerBlock),
-      }
-      data.sideConfirmationsNft = {
-        confirmations: NFT_FIXED_CONFIRMATIONS_BLOCK,
-        time: blocksToTime(NFT_FIXED_CONFIRMATIONS_BLOCK, sideConfig.secondsPerBlock),
-      }
+    settings() {
+      return this.sharedState.networkSettings
     },
   },
+  // created() {
+  //   this.$watch(
+  //     () => this.sharedState.chainId,
+  //     (chainId, prevChainId) => {
+  //       if (chainId && this.sharedState.isConnected && !this.sharedState.preSettingsEnabled) {
+  //         this.initMainSettings()
+  //       }
+  //     },
+  //   )
+  //   this.$watch(
+  //     () => this.sharedState.preSettingsEnabled,
+  //     (preSettingsEnabled, preSettingsEnabledPrev) => {
+  //       if (preSettingsEnabled) {
+  //         this.needPreSettings = preSettingsEnabled
+  //         this.networks = this.sharedState.networksAvailable
+  //       }
+  //     },
+  //   )
+  // },
 }
 </script>
diff --git a/src/views/NetworkInfoPage.vue b/src/views/NetworkInfoPage.vue
new file mode 100644
index 00000000..7ffcfea2
--- /dev/null
+++ b/src/views/NetworkInfoPage.vue
@@ -0,0 +1,47 @@
+<template>
+  <ImportantDetailsErc20
+    v-if="globalState.currentTokenType === tokenTypeErc20"
+    :rsk-fee="settings.rskFee"
+    :side-fee="settings.sideFee"
+    :rsk-confirmations="settings.rskConfirmations"
+    :side-confirmations="settings.sideConfirmations"
+    :rsk-fed-members="settings.rskFedMembers"
+    :side-fed-members="settings.sideFedMembers"
+  />
+  <ImportantDetailsErc721
+    v-else
+    :rsk-fee-nft="settings.rskFeeNft"
+    :side-fee-nft="settings.sideFeeNft"
+    :rsk-confirmations-nft="settings.rskConfirmationsNft"
+    :side-confirmations-nft="settings.sideConfirmationsNft"
+    :rsk-fed-members="settings.rskFedMembers"
+    :side-fed-members="settings.sideFedMembers"
+  />
+</template>
+
+<script>
+import ImportantDetailsErc20 from '@/components/importantDetails/ImportantDetailsErc20'
+import ImportantDetailsErc721 from '@/components/importantDetails/ImportantDetailsErc721'
+import { store } from '@/store'
+import { TOKEN_TYPE_ERC_20 } from '@/constants/tokenType'
+import globalStore from '@/stores/global.store'
+
+export default {
+  name: 'NetworkInfoPage',
+  components: { ImportantDetailsErc721, ImportantDetailsErc20 },
+  data() {
+    return {
+      sharedState: store.state,
+      globalState: globalStore.state,
+      tokenTypeErc20: TOKEN_TYPE_ERC_20,
+    }
+  },
+  computed: {
+    settings() {
+      return this.sharedState.networkSettings
+    },
+  },
+}
+</script>
+
+<style scoped></style>
diff --git a/src/views/TokenListPage.vue b/src/views/TokenListPage.vue
new file mode 100644
index 00000000..8a7cbfd6
--- /dev/null
+++ b/src/views/TokenListPage.vue
@@ -0,0 +1,37 @@
+<template>
+  <TokenList v-if="displayList" :types-limits="settings.typesLimits" />
+  <div v-else>
+    <h5 class="subtitle">No active account, please connect your wallet</h5>
+  </div>
+</template>
+
+<script>
+import TokenList from '@/components/tokenList/TokenList'
+import { store } from '@/store'
+import globalStore from '@/stores/global.store'
+import { TOKEN_TYPE_ERC_20 } from '@/constants/tokenType'
+
+export default {
+  name: 'TokenListPage',
+  components: { TokenList },
+  data() {
+    return {
+      globalState: globalStore.state,
+      sharedState: store.state,
+    }
+  },
+  computed: {
+    settings() {
+      return this.sharedState.networkSettings
+    },
+    displayList() {
+      return (
+        this.globalState.currentTokenType === TOKEN_TYPE_ERC_20 &&
+        this.sharedState.rskConfig?.tokens.length > 0
+      )
+    },
+  },
+}
+</script>
+
+<style scoped></style>
diff --git a/src/views/TransactionsPage.vue b/src/views/TransactionsPage.vue
new file mode 100644
index 00000000..c7435b77
--- /dev/null
+++ b/src/views/TransactionsPage.vue
@@ -0,0 +1,34 @@
+<template>
+  <Transactions
+    :types-limits="settings.typesLimits"
+    :rsk-confirmations="settings.rskConfirmations"
+    :side-confirmations="settings.sideConfirmations"
+    :rsk-fed-members="settings.rskFedMembers"
+    :side-fed-members="settings.sideFedMembers"
+    :new-transaction="newTransaction"
+  />
+</template>
+
+<script>
+import Transactions from '@/components/transactions/Transactions'
+import { store } from '@/store'
+
+export default {
+  name: 'TransactionsPage',
+  components: {
+    Transactions,
+  },
+  data() {
+    return {
+      sharedState: store.state,
+    }
+  },
+  computed: {
+    settings() {
+      return this.sharedState.networkSettings
+    },
+  },
+}
+</script>
+
+<style scoped></style>

From 366a01102013846e7bf2e4535b55d88700103ae7 Mon Sep 17 00:00:00 2001
From: Jonathan Huamani <jonathan.huamani@iovlabs.org>
Date: Fri, 10 Dec 2021 19:06:09 -0500
Subject: [PATCH 5/6] feat: added new routes to view router

Signed-off-by: Jonathan Huamani <jonathan.huamani@iovlabs.org>
---
 src/App.vue   |  1 -
 src/router.js | 15 +++++++++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/App.vue b/src/App.vue
index ee1cc770..053bffaa 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -14,7 +14,6 @@
 
 <script>
 import { provide, ref } from 'vue'
-// import Connection from '@/components/commons/Connection.vue'
 import NavBar from '@/components/layouts/NavBar.vue'
 import Footer from '@/components/layouts/Footer.vue'
 import Sider from '@/components/layouts/Sider'
diff --git a/src/router.js b/src/router.js
index 635265c3..d6d80be9 100644
--- a/src/router.js
+++ b/src/router.js
@@ -3,6 +3,9 @@ import { createWebHistory, createRouter } from 'vue-router'
 // 1. Define route components.
 // These can be imported from other files
 import Home from '@/views/Home.vue'
+import TransactionsPage from '@/views/TransactionsPage'
+import TokenListPage from '@/views/TokenListPage'
+import NetworkInfoPage from '@/views/NetworkInfoPage'
 
 // 2. Define some routes
 // Each route should map to a component.
@@ -13,6 +16,18 @@ const routes = [
     name: 'Home',
     component: Home,
   },
+  {
+    path: '/transactions',
+    component: TransactionsPage,
+  },
+  {
+    path: '/network-info',
+    component: NetworkInfoPage,
+  },
+  {
+    path: '/token-list',
+    component: TokenListPage,
+  },
 ]
 
 // 3. Create the router instance and pass the `routes` option

From 33f5d1921ab7019ce0776698ac418c8601124a25 Mon Sep 17 00:00:00 2001
From: Jonathan Huamani <jonathan.huamani@iovlabs.org>
Date: Fri, 10 Dec 2021 19:07:01 -0500
Subject: [PATCH 6/6] feat: reskinning navbar component and removing
 unnecessary logic

Signed-off-by: Jonathan Huamani <jonathan.huamani@iovlabs.org>
---
 src/components/layouts/NavBar.vue | 164 +++++++-----------------------
 1 file changed, 36 insertions(+), 128 deletions(-)

diff --git a/src/components/layouts/NavBar.vue b/src/components/layouts/NavBar.vue
index a586bfe3..1da1c5c8 100644
--- a/src/components/layouts/NavBar.vue
+++ b/src/components/layouts/NavBar.vue
@@ -1,96 +1,50 @@
 <template>
-  <!-- Navigation -->
-  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
-    <div class="container">
-      <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>
-      </div>
-      <button
-        class="navbar-toggler collapsed"
-        type="button"
-        data-toggle="collapse"
-        data-target="#navbarResponsive"
-        aria-controls="navbarResponsive"
-        aria-expanded="false"
-        aria-label="Toggle navigation"
-      >
-        <span class="navbar-toggler-icon"></span>
-      </button>
-      <div id="navbarResponsive" class="navbar-collapse collapse">
-        <div
-          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="isConnected" class="d-flex align-items-center navbar-item">
-          <span class="input-group-text mr-2 bg-transparent text-primary border-0">
-            <i class="fas fa-long-arrow-alt-right"></i>
-          </span>
-          <select
-            v-if="networks.length > 0"
-            id="networks"
-            v-model="sideConfig"
-            name="networks"
-            class="form-control select-networks"
-            @change="changeSideNetwork"
-          >
-            <option value="" selected disabled>Destination network</option>
-            <option
-              v-for="network in networks"
-              :key="network.crossToNetwork.networkId"
-              :value="network.crossToNetwork"
+  <header>
+    <!-- Navigation -->
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+      <div class="w-100">
+        <div class="row w-100">
+          <div class="col-4 offset-8 d-flex justify-content-end">
+            <div
+              v-if="isConnected"
+              class="wallet-status navbar-item indicator badge-outline badge-pill"
             >
-              {{ network.crossToNetwork.name }}
-            </option>
-          </select>
-          <div v-else class="wallet-status indicator badge-outline badge-pill">
-            {{ sharedState.currentConfig.crossToNetwork.name }}
+              <span aria-describedby="tooltip-status" class="fromNetwork">
+                {{ sharedState.currentConfig.name }}
+              </span>
+            </div>
+            <div
+              v-if="isConnected"
+              class="wallet-status navbar-item badge-pill text-truncate"
+              style="width: 155px;"
+            >
+              <span id="address">{{ sharedState.accountAddress }}</span>
+            </div>
           </div>
-          <button
-            type="button"
-            v-if="isMetaMask"
-            class="btn btn-link btn-sm text-primary"
-            @click="handleSwitchNetwork"
-          >
-            Switch Network
-          </button>
-        </div>
-        <div class="navbar-item ml-auto">
-          <button
+          <div
             v-if="!sharedState.isConnected"
-            id="logIn"
-            type="button"
-            class="btn btn-primary badge-pill"
-            @click="connectWalletClick"
+            id="navbarResponsive"
+            class="navbar-collapse collapse"
           >
-            Connect wallet
-          </button>
-          <a v-if="isConnected" id="help" href="https://developers.rsk.co/slack/">
-            Do you need help?
-          </a>
+            <div class="navbar-item ml-auto">
+              <button
+                id="logIn"
+                type="button"
+                class="btn btn-primary badge-pill"
+                @click="connectWalletClick"
+              >
+                Connect wallet
+              </button>
+            </div>
+          </div>
         </div>
       </div>
-    </div>
-  </nav>
+    </nav>
+  </header>
 </template>
 
 <script>
 import { store } from '@/store.js'
-import { numToHex } from '@/utils/helpers'
 
 export default {
   name: 'NavBar',
@@ -115,57 +69,11 @@ export default {
     isConnected() {
       return this.sharedState.isConnected && !this.sharedState.preSettingsEnabled
     },
-    isMetaMask() {
-      return window.ethereum.isMetaMask
-    },
   },
   methods: {
     connectWalletClick() {
       return store.handleLogin()
     },
-    async handleAddNetwork(networkConfig) {
-      try {
-        const chainId = numToHex(networkConfig.networkId)
-        await window.ethereum.request({
-          method: 'wallet_addEthereumChain',
-          params: [
-            {
-              chainId,
-              chainName: networkConfig.name,
-              nativeCurrency: {
-                name: networkConfig.mainToken.name,
-                symbol: networkConfig.mainToken.symbol,
-                decimals: networkConfig.mainToken.decimals,
-              },
-              rpcUrls: [networkConfig.rpc],
-            },
-          ],
-        })
-      } catch (error) {
-        console.error(error)
-      }
-    },
-    async handleSwitchNetwork() {
-      try {
-        const chainId = numToHex(this.sharedState.currentConfig.crossToNetwork.networkId)
-        await window.ethereum.request({
-          method: 'wallet_switchEthereumChain',
-          params: [{ chainId }],
-        })
-      } catch (error) {
-        if (error.code === 4902) {
-          await this.handleAddNetwork(this.sharedState.currentConfig.crossToNetwork)
-        }
-      }
-    },
-    changeSideNetwork() {
-      const { crossToNetwork: hostNetwork } = this.sideNetworkConfig
-      store.state.isConnected = false
-      const rskConfig = this.sideNetworkConfig.isRsk ? this.sideNetworkConfig : hostNetwork
-      const sideConfig = this.sideNetworkConfig.isRsk ? hostNetwork : this.sideNetworkConfig
-
-      store.initMainSettings(hostNetwork.networkId, rskConfig, sideConfig)
-    },
   },
 }
 </script>