Merge pull request #10762 from hassnian/issue-10747

fix: Make sure that EVM connectors work properly

composables/useModalIsOpenTracker.ts

@@ -18,7 +18,7 @@ export default ({
 }) => {
   watch([isOpen, () => and], ([isOpen, and]) => {
     if (!isOpen === onClose && and.every(Boolean)) {
-      ;(onClose ? onModalAnimation(onChange) : onChange)()
+      onClose ? onModalAnimation(onChange) : onChange()
     }
   })
 }

composables/useViem.ts

@@ -1,21 +1,43 @@
 import { createPublicClient, createWalletClient, custom, http } from 'viem'
 import type { Prefix } from '@kodadot1/static'
 
+const provider = reactive<{ value: any, fetching: boolean }>({ value: undefined, fetching: false })
+
 export default function (prefix: Prefix) {
+  const walletStore = useWalletStore()
+  const { connector } = useWagmi()
+
   const publicClient = createPublicClient({
     chain: PREFIX_TO_CHAIN[prefix],
     transport: http(),
   })
 
   const getWalletClient = () => {
-    if (window.ethereum) {
+    if (provider.value) {
       return createWalletClient({
         chain: PREFIX_TO_CHAIN[prefix],
-        transport: custom(window.ethereum),
+        transport: custom(provider.value),
       })
     }
   }
 
+  watch(connector, async (connector) => {
+    if (provider.fetching) {
+      return
+    }
+
+    if (connector?.getProvider && !provider.value) {
+      provider.fetching = true
+      provider.value = await connector.getProvider()
+      provider.fetching = false
+      console.log('[VIEM::PROVIDER] Using', provider.value)
+    }
+    else if (!connector && provider.value) {
+      provider.value = undefined
+      console.log('[VIEM::PROVIDER] Cleared')
+    }
+  }, { immediate: Boolean(walletStore.selected && walletStore.getIsEvm) })
+
   return {
     publicClient,
     getWalletClient,

composables/useWagmi.ts

@@ -1,10 +1,9 @@
 import { defaultWagmiConfig } from '@web3modal/wagmi/vue'
 import { base, immutableZkEvm, mantle } from 'viem/chains'
-import { reconnect as reconnectWagmi } from '@wagmi/core'
 import { useAccount, useDisconnect } from 'use-wagmi'
 import type { DisconnectMutateAsync } from 'use-wagmi/query'
 
-const buildWagmiConfig = () => {
+export const buildWagmiConfig = () => {
   const metadata = {
     name: 'KodaDot',
     description: 'KodaDot - Generative Art Marketplace',
@@ -21,29 +20,20 @@ const buildWagmiConfig = () => {
   })
 }
 
-const config = buildWagmiConfig() as any
-
 export default (
-  { reconnect }: { reconnect: boolean } = { reconnect: false },
 ) => {
-  if (reconnect) {
-    reconnectWagmi(config)
-  }
+  const { $wagmiConfig: config } = useNuxtApp()
 
-  const { isConnected, address, isConnecting, chainId } = useAccount({
-    config,
+  const account = useAccount({
+    config: config as any,
   })
 
   const disconnect = useNuxtApp().runWithContext(
-    () => useDisconnect({ config }).disconnectAsync,
+    () => useDisconnect({ config: config as any }).disconnectAsync,
   ) as Promise<DisconnectMutateAsync>
 
   return {
-    config,
-    isConnected,
-    isConnecting,
-    address,
+    ...account,
     disconnect,
-    chainId,
   }
 }

composables/useWallet.ts

@@ -1,18 +1,25 @@
+const PERSISTED_STORES = ['preferences', 'wallet']
+
 export default function () {
   const { disconnect: disconnectWeb3Modal } = useWagmi()
   const shoppingCartStore = useShoppingCartStore()
   const walletStore = useWalletStore()
   const identityStore = useIdentityStore()
 
   const logout = async () => {
+    const isEvm = walletStore.getIsEvm
+
     identityStore.resetAuth()
     sessionStorage.clear()
-    localStorage.clear()
+    // don't use localStorage.clear(), web3modal uses localstorage to save data
+    // there's no way to regerate those values unless hard reload is made
+    PERSISTED_STORES.forEach(store => localStorage.removeItem(store))
     shoppingCartStore.clear()
 
     walletStore.setDisconnecting(true)
     walletStore.clear()
-    if (walletStore.getIsEvm) {
+
+    if (isEvm) {
       await disconnectWeb3Modal().catch((error) => {
         console.warn('[WEB3MODAL::CONNECTION] Failed disconnecting', error)
       })

composables/useWeb3Modal.ts

@@ -1,19 +1,18 @@
-import { createWeb3Modal, useWeb3Modal } from '@web3modal/wagmi/vue'
+import { createWeb3Modal } from '@web3modal/wagmi/vue'
+import type { Web3Modal } from '@web3modal/wagmi'
 
-const modal = ref()
+const modal = ref<Web3Modal>()
 
 export default () => {
-  const { config } = useWagmi()
   const { urlPrefix } = usePrefix()
-
-  createWeb3Modal({
-    wagmiConfig: config,
-    projectId: useRuntimeConfig().public.walletConnectProjectId,
-    defaultChain: PREFIX_TO_CHAIN[urlPrefix.value],
-  })
+  const { $wagmiConfig } = useNuxtApp()
 
   if (!modal.value) {
-    modal.value = useWeb3Modal()
+    modal.value = createWeb3Modal({
+      wagmiConfig: $wagmiConfig as any,
+      projectId: useRuntimeConfig().public.walletConnectProjectId,
+      defaultChain: PREFIX_TO_CHAIN[urlPrefix.value],
+    })
   }
 
   return {

plugins/wagmi.client.ts

@@ -0,0 +1,14 @@
+import { reconnect } from '@wagmi/core'
+
+export default defineNuxtPlugin(() => {
+  const config = buildWagmiConfig()
+
+  reconnect(config)
+
+  return {
+    provide: {
+      // important use same config across the app
+      wagmiConfig: config,
+    },
+  }
+})

types/nuxt.d.ts

@@ -0,0 +1,7 @@
+import type { Config } from '@wagmi/core'
+
+declare module '#app' {
+  interface NuxtApp {
+    $wagmiConfig: Config
+  }
+}