diff --git a/app/app.vue b/app/app.vue index 1a0579d..26ec198 100644 --- a/app/app.vue +++ b/app/app.vue @@ -21,7 +21,7 @@ useHead({ }, }) -const { addConnectors, onWalletUpdated, onDisconnected } = useVueDapp() +const { addConnectors, watchWalletUpdated, watchDisconnect } = useVueDapp() if (process.client) { addConnectors([ new BrowserWalletConnector(), @@ -49,11 +49,16 @@ if (process.client) { const { setWallet, resetWallet } = useEthers() -onWalletUpdated(async (wallet: ConnWallet) => { - setWallet(wallet.provider) -}) +watchWalletUpdated( + async (wallet: ConnWallet) => { + setWallet(wallet.provider) + }, + { + immediate: true, + }, +) -onDisconnected(() => { +watchDisconnect(() => { resetWallet() }) diff --git a/app/components/content/Multicall.vue b/app/components/content/Multicall.vue index 7828105..20ba747 100644 --- a/app/components/content/Multicall.vue +++ b/app/components/content/Multicall.vue @@ -77,10 +77,10 @@ const tokenList = computed(() => { const balances = ref<{ mainnet: number[]; arbitrum: number[] }>({ mainnet: [], arbitrum: [] }) -const { isConnected, wallet, onWalletUpdated, onDisconnected } = useVueDapp() +const { watchWalletUpdated, watchDisconnect } = useVueDapp() -onMounted(async () => { - if (isConnected.value) { +watchWalletUpdated( + async (wallet: ConnWallet) => { const mainnetBalance = await Promise.all([ mainnetDai.balanceOf(wallet.address), mainnetUsdc.balanceOf(wallet.address), @@ -92,24 +92,13 @@ onMounted(async () => { arbitrumAusdc.balanceOf(wallet.address), ]) balances.value = { mainnet: mainnetBalance, arbitrum: arbitrumBalance } - } -}) - -onWalletUpdated(async (wallet: ConnWallet) => { - const mainnetBalance = await Promise.all([ - mainnetDai.balanceOf(wallet.address), - mainnetUsdc.balanceOf(wallet.address), - mainnetAusdc.balanceOf(wallet.address), - ]) - const arbitrumBalance = await Promise.all([ - arbitrumDai.balanceOf(wallet.address), - arbitrumUsdc.balanceOf(wallet.address), - arbitrumAusdc.balanceOf(wallet.address), - ]) - balances.value = { mainnet: mainnetBalance, arbitrum: arbitrumBalance } -}) + }, + { + immediate: true, + }, +) -onDisconnected(() => { +watchDisconnect(() => { balances.value = { mainnet: [], arbitrum: [] } }) diff --git a/app/pages/index.vue b/app/pages/index.vue index 2b3fe5e..24ffd1b 100644 --- a/app/pages/index.vue +++ b/app/pages/index.vue @@ -11,7 +11,7 @@ useHead({ const defaultProvider = new ethers.JsonRpcProvider('https://ethereum-rpc.publicnode.com') -const { wallet, isConnected, disconnect, onWalletUpdated, onDisconnected } = useVueDapp() +const { wallet, isConnected, disconnect, watchWalletUpdated, watchDisconnect } = useVueDapp() const { ensName, @@ -27,19 +27,15 @@ const { ignorePreviousFetch: ignorePreviousFetchBalance, } = useBalance(defaultProvider) -onMounted(() => { - if (isConnected.value) { - fetchEnsName(wallet.address!) - fetchBalance(wallet.address!) - } -}) - -onWalletUpdated((wallet: ConnWallet) => { - fetchEnsName(wallet.address) - fetchBalance(wallet.address) -}) +watchWalletUpdated( + (wallet: ConnWallet) => { + fetchEnsName(wallet.address) + fetchBalance(wallet.address) + }, + { immediate: true }, +) -onDisconnected(() => { +watchDisconnect(() => { ignorePreviousFetchEnsName() ignorePreviousFetchBalance() }) diff --git a/packages/core/src/services/listeners.ts b/packages/core/src/services/listeners.ts index e0aab78..33a9c7d 100644 --- a/packages/core/src/services/listeners.ts +++ b/packages/core/src/services/listeners.ts @@ -1,15 +1,13 @@ -import { watch, toRaw } from 'vue' +import { watch, toRaw, onMounted } from 'vue' import { OnConnectedCB, OnAccountOrChainIdChangedCB, OnWalletUpdatedCB, OnDisconnectedCB } from '../types' import { useConnect } from './connect' import { assertConnected } from '../utils/assert' -// TODO: should return unwatch handler - export function useListeners(pinia?: any) { const { isConnected, address, chainId, wallet } = useConnect(pinia) function onConnected(callback: OnConnectedCB) { - watch(isConnected, (val, oldVal) => { + return watch(isConnected, (val, oldVal) => { if (val && !oldVal) { assertConnected(wallet, 'useListeners - onConnected') callback && callback(toRaw(wallet)) @@ -18,29 +16,65 @@ export function useListeners(pinia?: any) { } function onAccountOrChainIdChanged(callback: OnAccountOrChainIdChangedCB) { - // TODO: make sure this works - watch(address, (val, oldVal) => { + const unwatchAddress = watch(address, (val, oldVal) => { if (oldVal && val) { assertConnected(wallet, 'useListeners - onAccountOrChainIdChanged - address') callback && callback(toRaw(wallet)) } }) - watch(chainId, (val, oldVal) => { + const unwatchChainId = watch(chainId, (val, oldVal) => { if (val && oldVal) { assertConnected(wallet, 'useListeners - onAccountOrChainIdChanged - chainId') callback && callback(toRaw(wallet)) } }) + + return () => { + unwatchAddress() + unwatchChainId() + } } function onWalletUpdated(callback: OnWalletUpdatedCB) { - onConnected(callback) - onAccountOrChainIdChanged(callback) + const unwatchConnected = onConnected(callback) + const unwatchAccountOrChainId = onAccountOrChainIdChanged(callback) + + return () => { + unwatchConnected() + unwatchAccountOrChainId() + } } function onDisconnected(callback: OnDisconnectedCB) { - watch(isConnected, (val, oldVal) => { + return watch(isConnected, (val, oldVal) => { + if (!val && oldVal) { + callback && callback() + } + }) + } + + function watchWalletUpdated(callback: OnWalletUpdatedCB, options?: { immediate: boolean }) { + if (options?.immediate) { + onMounted(() => { + if (isConnected.value) { + assertConnected(wallet, 'useListeners - watchWalletUpdated - immediate') + callback && callback(toRaw(wallet)) + } + }) + } + + const unwatchConnected = onConnected(callback) + const unwatchAccountOrChainId = onAccountOrChainIdChanged(callback) + + return () => { + unwatchConnected() + unwatchAccountOrChainId() + } + } + + function watchDisconnect(callback: OnDisconnectedCB) { + return watch(isConnected, (val, oldVal) => { if (!val && oldVal) { callback && callback() } @@ -50,7 +84,9 @@ export function useListeners(pinia?: any) { return { onConnected, onAccountOrChainIdChanged, - onWalletUpdated, - onDisconnected, + onWalletUpdated, // will be deprecated + onDisconnected, // will be deprecated + watchWalletUpdated, + watchDisconnect, } }