Fix/Invalid-network-modal (#35)

* draft: removed invalid-network-modal

* added chain selecting to forms

---------

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

src/App.vue

@@ -10,37 +10,24 @@
           </transition>
         </router-view>
       </div>
-      <invalid-network-modal v-model:is-shown="isShownInvalidNetworkModal" />
     </div>
   </transition>
 </template>
 
 <script lang="ts" setup>
-import { AppNavbar, AppNavbarMobile, InvalidNetworkModal } from '@/common'
+import { AppNavbar, AppNavbarMobile } from '@/common'
 import { useNotifications } from '@/composables'
 import { bus, BUS_EVENTS, ErrorHandler } from '@/helpers'
 import { useWeb3ProvidersStore } from '@/store'
 import { type NotificationPayload } from '@/types'
 import { config } from '@config'
-import { ref, watch } from 'vue'
+import { ref } from 'vue'
 
 const isAppInitialized = ref(false)
-const isShownInvalidNetworkModal = ref(false)
 
 const { showToast } = useNotifications()
 const web3ProvidersStore = useWeb3ProvidersStore()
 
-watch(
-  [
-    () => web3ProvidersStore.isValidChain,
-    () => web3ProvidersStore.provider.isConnected,
-    () => isAppInitialized.value,
-  ],
-  ([isValidChain, isConnected]) => {
-    if (isConnected) isShownInvalidNetworkModal.value = !isValidChain
-  },
-)
-
 const initNotifications = () => {
   bus.on(BUS_EVENTS.success, payload =>
     showToast('success', payload as NotificationPayload),

src/common/modals/compositions/index.ts

@@ -1,4 +1,3 @@
 export { default as ClaimModal } from './ClaimModal.vue'
 export { default as DepositModal } from './DepositModal.vue'
-export { default as InvalidNetworkModal } from './InvalidNetworkModal.vue'
 export { default as WithdrawModal } from './WithdrawModal.vue'

src/composables/use-provider.ts

@@ -85,6 +85,8 @@ export const useProvider = (): IUseProvider => {
 
   const isChainSelecting: I['isChainSelecting'] = ref(false)
   const selectChain: I['selectChain'] = async chainId => {
+    if (_providerReactiveState.chainId === chainId) return
+
     isChainSelecting.value = true
 
     try {
@@ -124,6 +126,7 @@ export const useProvider = (): IUseProvider => {
         '--w3m-font-family': 'var(--app-font-family)',
         '--w3m-accent': 'var(--primary-main)',
         '--w3m-border-radius-master': '0',
+        '--w3m-z-index': 1500,
       },
     })
 

src/enums/icon-names.enum.ts

@@ -1,10 +1,8 @@
 export enum ICON_NAMES {
-  arbitrumAlt1 = 'arbitrum-alt-1',
   arbitrum = 'arbitrum',
   checkCircle = 'check-circle',
   chevronDown = 'chevron-down',
   copy = 'copy',
-  ethereumAlt1 = 'ethereum-alt-1',
   ethereum = 'ethereum',
   exclamationCircle = 'exclamation-circle',
   externalLink = 'external-link',

src/forms/ClaimForm.vue

@@ -57,15 +57,16 @@ const { getFieldErrorMessage, isFieldsValid, isFormValid, touchField } =
 
 const { t } = useI18n()
 
-const { endpointContract, erc1967ProxyContract, networkId } = storeToRefs(
-  useWeb3ProvidersStore(),
-)
+const { endpointContract, erc1967ProxyContract, networkId, provider } =
+  storeToRefs(useWeb3ProvidersStore())
 
 const submit = async (): Promise<void> => {
   if (!isFormValid()) return
   isSubmitting.value = true
 
   try {
+    await provider.value.selectChain(config.networks[networkId.value].chainId)
+
     const fees = await endpointContract.value.providerBased.value.estimateFees(
       config.networks[networkId.value].extendedChainLayerZeroEndpoint,
       await erc1967ProxyContract.value.providerBased.value.l1Sender(),

src/forms/DepositForm.vue

@@ -212,6 +212,10 @@ const submit = async (action: ACTIONS): Promise<void> => {
   isSubmitting.value = true
 
   try {
+    await web3ProvidersStore.provider.selectChain(
+      config.networks[web3ProvidersStore.networkId].chainId,
+    )
+
     let tx
     if (action === ACTIONS.approve && balanceOfForm.value) {
       tx = await approveByCurrency(balanceOfForm.value.value.currency)

src/forms/WithdrawForm.vue

@@ -77,6 +77,10 @@ const submit = async (): Promise<void> => {
   isSubmitting.value = true
 
   try {
+    await web3ProvidersStore.provider.selectChain(
+      config.networks[web3ProvidersStore.networkId].chainId,
+    )
+
     const tx =
       await web3ProvidersStore.erc1967ProxyContract.signerBased.value.withdraw(
         props.poolId,

src/localization/resources/en.json

@@ -81,11 +81,6 @@
     "status--public": "Automated",
     "status--private": "Non-Automated"
   },
-  "invalid-network-modal": {
-    "title": "Invalid Network",
-    "subtitle": "Your wallet is connected to an unsupported chain. Please, switch to another network:",
-    "switch-btn": "Switch Network"
-  },
   "network-switch": {
     "mainnet": "Ethereum Mainnet",
     "testnet": "Ethereum Sepolia"