diff --git a/apps/main/src/dao/store/createAnalyticsSlice.ts b/apps/main/src/dao/store/createAnalyticsSlice.ts index 9a8c65acb..58bf2e831 100644 --- a/apps/main/src/dao/store/createAnalyticsSlice.ts +++ b/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 setTopHoldersSortBy(sortBy: TopHoldersSortBy): void setAllHoldersSortBy(sortBy: AllHoldersSortBy): void - getVeCrvData(provider: any): Promise + getVeCrvData(provider: ContractRunner): Promise // helpers setStateByActiveKey(key: StateKey, activeKey: string, value: T): void setStateByKey(key: StateKey, value: T): void @@ -308,7 +309,7 @@ const createAnalyticsSlice = (set: SetState, get: GetState): Analy ) } }, - getVeCrvData: async (provider: any) => { + getVeCrvData: async (provider) => { get()[sliceKey].setStateByKey('veCrvData', { totalVeCrv: 0, totalLockedCrv: 0, diff --git a/packages/curve-ui-kit/src/features/connect-wallet/store.ts b/packages/curve-ui-kit/src/features/connect-wallet/store.ts index ef9c0ce66..765ce2050 100644 --- a/packages/curve-ui-kit/src/features/connect-wallet/store.ts +++ b/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 = (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) { + 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) } +} diff --git a/packages/curve-ui-kit/src/lib/logging.ts b/packages/curve-ui-kit/src/lib/logging.ts index 9484f55d1..05307bcbe 100644 --- a/packages/curve-ui-kit/src/lib/logging.ts +++ b/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)