Feature/Network-switch (#30)

* added network-switch

* updated app-navbar

* fix drop-menu

* updated router and tabs

* updated network-switch

* fix tabs

* updated env keys, config

* refactoring: config.IS_MAINNET -> web3ProvidersStore.isMainnet

* added network-switch to app-navbar-mobile

* updated tabs in home-page

* updated app-navbar

* updated zero-pool-description

* fix deposit-form

* fix wallet-balances

* fix home-page container

* fix app-navbar

* Update actions.yaml

* fix network-switch

* extended links in config

* fixed use-context composable

* refactored isMainnet

* refactoring: network-switch

* updated drop-menu

* updated network-switch

* fix network-id in store

* removed use-context composable

* replaced NETWORKS const to config

* refactoring contract instances

* fix contracts getters

* fix config

* refactoring providers instances

* fix network-switch

* replaced network id watcher to invalid-network-modal

* fix network-switch

* fix connect-wallet-button

* draft: simplify use-contract composable

* draft: simplify use-provider composable

* refactoring web3ProvidersStore

* draft: fix forms and composables

* updated deposit-form

* refactoring store: option api -> composition api

* replaced chain configs to config

* draft: w3p providers

* evert "draft: w3p providers"

This reverts commit 1fa0e89.

* updated @distributedlab packages

* added Provider type

* fix github workflows actions

---------

Co-authored-by: Yehor Podporinov <[email protected]>
Co-authored-by: Oleksandr Varchenko <[email protected]>

.env.example

@@ -1,9 +1,19 @@
+#Development
 VITE_ENVIRONMENT=development
 VITE_PORT=8095
+
+#General
 VITE_APP_NAME='Morpheus Dashboard'
-VITE_APP_ERC1967_PROXY_CONTRACT_ADDRESS='0x0ad2fa5d8f420ff6d87192b32d89faf70466b30b'
-VITE_APP_STETH_CONTRACT_ADDRESS='0x84BE06be19F956dEe06d4870CdDa76AF2e0385f5'
-VITE_APP_MOR_CONTRACT_ADDRESS='0xe6D01D086a844a61641C75f1BCA572e7aa70e154'
-VITE_APP_ENDPOINT_CONTRACT_ADDRESS='0xae92d5aD7583AD66E49A0c67BAd18F6ba52dDDc1'
-#VITE_APP_IS_MAINNET='true'
 #VITE_APP_BUILD_VERSION='1.0.0'
+
+#Testnet
+VITE_APP_ERC1967_PROXY_TESTNET_CONTRACT_ADDRESS='0x0ad2fa5d8f420ff6d87192b32d89faf70466b30b'
+VITE_APP_STETH_TESTNET_CONTRACT_ADDRESS='0x84BE06be19F956dEe06d4870CdDa76AF2e0385f5'
+VITE_APP_MOR_TESTNET_CONTRACT_ADDRESS='0xe6D01D086a844a61641C75f1BCA572e7aa70e154'
+VITE_APP_ENDPOINT_TESTNET_CONTRACT_ADDRESS='0xae92d5aD7583AD66E49A0c67BAd18F6ba52dDDc1'
+
+#Mainnet
+VITE_APP_ERC1967_PROXY_MAINNET_CONTRACT_ADDRESS='0x47176B2Af9885dC6C4575d4eFd63895f7Aaa4790'
+VITE_APP_STETH_MAINNET_CONTRACT_ADDRESS='0xae7ab96520DE3A18E5e111B5EaAb095312D7fE84'
+VITE_APP_MOR_MAINNET_CONTRACT_ADDRESS='0x7431aDa8a591C955a994a21710752EF9b882b8e3'
+VITE_APP_ENDPOINT_MAINNET_CONTRACT_ADDRESS='0x66A71Dcef29A0fFBDBE3c6a460a3B5BC225Cd675'

package.json

@@ -19,8 +19,8 @@
     "generate-ether-types": "typechain --target=ethers-v5 'src/abi/**/*.json' --out-dir src/types/contracts"
   },
   "dependencies": {
-    "@distributedlab/tools": "^0.2.0",
-    "@distributedlab/w3p": "^0.2.0",
+    "@distributedlab/tools": "^1.0.0-rc.13",
+    "@distributedlab/w3p": "^1.0.0-rc.13",
     "@vuelidate/core": "^2.0.0",
     "@vuelidate/validators": "^2.0.0",
     "@vueuse/core": "^10.1.2",

src/common/AppButton.vue

@@ -80,8 +80,8 @@
 
 <script lang="ts" setup>
 import { type ICON_NAMES } from '@/enums'
+import { type Route } from '@/types'
 import { computed, useAttrs, useSlots } from 'vue'
-import { type LocationAsRelativeRaw } from 'vue-router'
 import AppIcon from './AppIcon.vue'
 
 type ButtonType = 'button' | 'submit' | 'reset'
@@ -100,7 +100,7 @@ const props = withDefaults(
       | 'info'
       | 'none'
     size?: 'large' | 'medium' | 'small' | 'x-small' | 'none'
-    route?: LocationAsRelativeRaw
+    route?: Route
     href?: string
     iconLeft?: ICON_NAMES
     iconRight?: ICON_NAMES

src/common/AppNavbar.vue

@@ -7,9 +7,8 @@
         :key="idx"
         :text="link.text"
         :href="link.href"
-        :route="link.route"
-        :target="link.href ? '_blank' : undefined"
-        :rel="link.href ? 'noopener noreferrer' : undefined"
+        target="_blank"
+        rel="noopener noreferrer"
         scheme="link"
         color="none"
         class="app-navbar__link"
@@ -22,6 +21,7 @@
         color="secondary"
       />
       <div v-else class="app-navbar__wallet-info-wrp">
+        <network-switch />
         <wallet-balances />
         <wallet-dashboard />
       </div>
@@ -35,6 +35,7 @@ import { useWeb3ProvidersStore } from '@/store'
 import AppButton from './AppButton.vue'
 import AppLogo from './AppLogo.vue'
 import ConnectWalletButton from './ConnectWalletButton.vue'
+import NetworkSwitch from './NetworkSwitch.vue'
 import WalletBalances from './WalletBalances.vue'
 import WalletDashboard from './WalletDashboard.vue'
 
@@ -51,10 +52,10 @@ $z-index: 1000;
   top: 0;
   height: var(--app-navbar-height);
   width: 100%;
-  display: grid;
+  display: flex;
   align-items: center;
-  grid-template-columns: 1fr max-content 1fr;
-  grid-gap: toRem(24);
+  justify-content: space-between;
+  gap: toRem(24);
   padding: 0 var(--app-padding-right) 0 var(--app-padding-left);
   background: #010201;
   border-bottom: toRem(1) solid #444449;
@@ -80,7 +81,6 @@ $z-index: 1000;
 .app-navbar__wallet-info-wrp {
   display: flex;
   align-items: center;
-  justify-self: right;
   gap: toRem(20);
 }
 </style>

src/common/AppNavbarMobile.vue

@@ -23,9 +23,8 @@
                 :key="idx"
                 :text="link.text"
                 :href="link.href"
-                :route="link.route"
-                :target="link.href ? '_blank' : undefined"
-                :rel="link.href ? 'noopener noreferrer' : undefined"
+                target="_blank"
+                rel="noopener noreferrer"
                 scheme="link"
                 color="none"
                 class="app-navbar-mobile__link"
@@ -39,8 +38,9 @@
                 color="secondary"
               />
               <div v-else class="app-navbar-mobile__wallet-info-wrp">
-                <wallet-dashboard />
+                <network-switch />
                 <wallet-balances />
+                <wallet-dashboard />
               </div>
             </transition>
           </div>
@@ -63,6 +63,7 @@ import AppButton from './AppButton.vue'
 import AppIcon from './AppIcon.vue'
 import AppLogo from './AppLogo.vue'
 import ConnectWalletButton from './ConnectWalletButton.vue'
+import NetworkSwitch from './NetworkSwitch.vue'
 import WalletBalances from './WalletBalances.vue'
 import WalletDashboard from './WalletDashboard.vue'
 
@@ -161,8 +162,8 @@ $z-index: 1000;
   gap: toRem(20);
   margin: toRem(76) auto 0;
 
-  @include respond-to(small) {
-    flex-direction: column-reverse;
+  @include respond-to(medium) {
+    flex-direction: column;
   }
 }
 

src/common/ConnectWalletButton.vue

@@ -9,10 +9,11 @@
 </template>
 
 <script lang="ts" setup>
-import { useContext } from '@/composables'
+import { useI18n } from '@/composables'
 import { isMobile, ErrorHandler } from '@/helpers'
 import { useRoute } from '@/router'
 import { useWeb3ProvidersStore } from '@/store'
+import { config } from '@config'
 import { computed } from 'vue'
 import AppButton from './AppButton.vue'
 
@@ -22,9 +23,7 @@ enum ACTIONS {
   connect = 'connect',
 }
 
-const WALLET_INSTALL_URL = 'https://metamask.io/download/'
-
-const { $t } = useContext()
+const { t } = useI18n()
 const { fullPath } = useRoute()
 
 const web3ProvidersStore = useWeb3ProvidersStore()
@@ -40,16 +39,14 @@ const action = computed<ACTIONS>(() => {
   }
 })
 
-const text = computed<string>(() => {
-  switch (action.value) {
-    case ACTIONS.toApp:
-      return $t('connect-wallet-button.to-app')
-    case ACTIONS.toInstall:
-      return $t('connect-wallet-button.to-install')
-    default:
-      return $t('connect-wallet-button.default')
-  }
-})
+const text = computed<string>(
+  () =>
+    ({
+      [ACTIONS.toApp]: t('connect-wallet-button.to-app'),
+      [ACTIONS.toInstall]: t('connect-wallet-button.to-install'),
+      [ACTIONS.connect]: t('connect-wallet-button.connect'),
+    }[action.value]),
+)
 
 const appUrl = computed<string>(
   () => `https://metamask.app.link/dapp/${window.location.host}${fullPath}`,
@@ -62,7 +59,7 @@ const onClick = async () => {
         window.open(appUrl.value, '_top', 'noreferrer')
         return
       case ACTIONS.toInstall:
-        window.open(WALLET_INSTALL_URL, '_blank', 'noreferrer')
+        window.open(config.WALLET_INSTALL_URL, '_blank', 'noreferrer')
         return
       case ACTIONS.connect:
         if (!web3ProvidersStore.provider.isConnected)

src/common/DropMenu.vue

@@ -13,9 +13,9 @@
 </template>
 
 <script lang="ts" setup>
+import { useRouter } from '@/router'
 import { onClickOutside } from '@vueuse/core'
-import { ref } from 'vue'
-import { onBeforeRouteUpdate } from 'vue-router'
+import { ref, watch } from 'vue'
 
 const emit = defineEmits<{
   (event: 'update:is-shown', value: boolean): void
@@ -38,18 +38,24 @@ const props = withDefaults(
   },
 )
 
-onBeforeRouteUpdate(() => {
-  if (props.isHideOnRouteChange) emit('update:is-shown', false)
-})
+const { currentRoute } = useRouter()
 
 const dropMenuElement = ref<HTMLDivElement | null>(null)
-onClickOutside(dropMenuElement, () => {
-  if (props.isHideOnClickOutside) emit('update:is-shown', false)
-})
 
 const onPointerLeave = () => {
   if (props.isHideOnPointerLeave) emit('update:is-shown', false)
 }
+
+onClickOutside(dropMenuElement, () => {
+  if (props.isHideOnClickOutside) emit('update:is-shown', false)
+})
+
+watch(
+  () => currentRoute.value.fullPath,
+  () => {
+    if (props.isHideOnRouteChange) emit('update:is-shown', false)
+  },
+)
 </script>
 
 <style lang="scss" scoped>
@@ -60,7 +66,7 @@ $z-index: 2;
   flex-direction: column;
   position: absolute;
   overflow: hidden auto;
-  left: 0;
+  right: 0;
   width: 100%;
   min-width: max-content;
   max-height: 500%;