fix: separate BrowserProvider from RpcProvider

apps/main/src/dao/store/createAnalyticsSlice.ts

@@ -18,6 +18,7 @@ import {
   TopHoldersSortBy,
   AllHoldersSortBy,
 } from '@dao/types/dao.types'
+import type { ContractRunner } from 'ethers/lib.commonjs/providers'
 
 type StateKey = keyof typeof DEFAULT_STATE
 
@@ -67,7 +68,7 @@ export type AnalyticsSlice = {
     getVeCrvHolders(): Promise<void>
     setTopHoldersSortBy(sortBy: TopHoldersSortBy): void
     setAllHoldersSortBy(sortBy: AllHoldersSortBy): void
-    getVeCrvData(provider: any): Promise<void>
+    getVeCrvData(provider: ContractRunner): Promise<void>
     // helpers
     setStateByActiveKey<T>(key: StateKey, activeKey: string, value: T): void
     setStateByKey<T>(key: StateKey, value: T): void
@@ -308,7 +309,7 @@ const createAnalyticsSlice = (set: SetState<State>, get: GetState<State>): Analy
         )
       }
     },
-    getVeCrvData: async (provider: any) => {
+    getVeCrvData: async (provider) => {
       get()[sliceKey].setStateByKey('veCrvData', {
         totalVeCrv: 0,
         totalLockedCrv: 0,

packages/curve-ui-kit/src/features/connect-wallet/store.ts

@@ -4,10 +4,14 @@ import { BrowserProvider } from 'ethers'
 import type { NotificationType } from '@web3-onboard/core/dist/types'
 import { initOnboard } from './lib/init'
 import { devtools } from 'zustand/middleware'
+import type { Address } from 'abitype'
+import type { EIP1193Provider } from '@web3-onboard/common'
+import { logSuccess } from '@ui-kit/lib'
 
 type WalletState = {
   onboard: OnboardAPI | null
   provider: BrowserProvider | null
+  rpcProvider: EIP1193Provider | null
   wallet: Wallet | null
 }
 
@@ -30,6 +34,7 @@ export type WalletStore = WalletState & WalletActions
 const DEFAULT_STATE: WalletState = {
   onboard: null,
   provider: null,
+  rpcProvider: null,
   wallet: null,
 }
 
@@ -51,31 +56,38 @@ const walletStore: StateCreator<WalletStore> = (set, get): WalletStore => ({
     return wallet && new BrowserProvider(wallet.provider)
   },
   chooseWallet: async (wallet: Wallet | null) => {
-    const storedProvider = get().provider
-    const newProvider = wallet ? getWalletProvider(wallet) : null
-    if (storedProvider) await storedProvider.removeAllListeners()
-    return set({
-      wallet,
-      provider: newProvider,
-    })
+    const { provider, chooseWallet } = get()
+    await provider?.removeAllListeners()
+    return set(createProvider(wallet, chooseWallet))
   },
-  initialize: (locale, themeType, networks) => {
+  initialize: async (locale, themeType, networks) => {
+    const { chooseWallet } = get()
     const onboard = initOnboard(locale, themeType, networks)
-    const wallet = get().onboard?.state.get().wallets?.[0]
-    const provider = wallet && new BrowserProvider(wallet.provider)
-    return set({ onboard, wallet, provider })
+    const wallet = onboard.state.get().wallets?.[0]
+    return set({ onboard, ...createProvider(wallet, chooseWallet) })
   },
 })
 
 export const useWalletStore =
   process.env.NODE_ENV === 'development' ? create(devtools(walletStore)) : create(walletStore)
 
-function getWalletProvider(wallet: Wallet) {
-  if ('isTrustWallet' in wallet.provider) {
+function getRpcProvider(wallet: Wallet): EIP1193Provider {
+  if ('isTrustWallet' in wallet.provider && window.ethereum) {
     // unable to connect to curvejs with wallet.provider
-    return window.ethereum
-  } else if ('isExodus' in wallet.provider && typeof window.exodus.ethereum !== 'undefined') {
+    return window.ethereum as any // todo: why do we need any here?
+  }
+  if ('isExodus' in wallet.provider && typeof window.exodus.ethereum !== 'undefined') {
     return window.exodus.ethereum
   }
   return wallet.provider
 }
+
+function createProvider(wallet: Wallet | null | undefined, chooseWallet: (wallet: Wallet | null) => Promise<void>) {
+  if (!wallet) return { rpcProvider: null, wallet: null, provider: null }
+  const rpcProvider = getRpcProvider(wallet)
+  rpcProvider.on('accountsChanged', (newAccounts: Address[]) => {
+    logSuccess('accountsChanged', newAccounts)
+    return chooseWallet(newAccounts.length === 0 ? null : wallet)
+  })
+  return { rpcProvider, wallet, provider: new BrowserProvider(wallet.provider) }
+}

packages/curve-ui-kit/src/lib/logging.ts

@@ -55,7 +55,9 @@ function argToString(i: unknown, max = 200, trailing = 3) {
   return str.replaceAll('%', '%%')
 }
 
-export function log(key: string | QueryKey | MutationKey | string[], status?: LogStatus | unknown, ...args: unknown[]) {
+type LogKey = string | QueryKey | MutationKey | string[]
+
+export function log(key: LogKey, status?: LogStatus | unknown, ...args: unknown[]) {
   if (process.env.NODE_ENV !== 'development') return
 
   const timestamp = new Date().toISOString()
@@ -109,7 +111,7 @@ export function log(key: string | QueryKey | MutationKey | string[], status?: Lo
   logMethod(status)(format, ...styles)
 }
 
-export const logQuery = (key: QueryKey, ...args: unknown[]) => log(key, LogStatus.QUERY, ...args)
-export const logMutation = (key: MutationKey, ...args: unknown[]) => log(key, LogStatus.MUTATION, ...args)
-export const logError = (key: QueryKey | MutationKey, ...args: unknown[]) => log(key, LogStatus.ERROR, ...args)
-export const logSuccess = (key: QueryKey | MutationKey, ...args: unknown[]) => log(key, LogStatus.SUCCESS, ...args)
+export const logQuery = (key: LogKey, ...args: unknown[]) => log(key, LogStatus.QUERY, ...args)
+export const logMutation = (key: LogKey, ...args: unknown[]) => log(key, LogStatus.MUTATION, ...args)
+export const logError = (key: LogKey, ...args: unknown[]) => log(key, LogStatus.ERROR, ...args)
+export const logSuccess = (key: LogKey, ...args: unknown[]) => log(key, LogStatus.SUCCESS, ...args)