From 493648a7181a8df4eb600726e2c3ecb60ba29ed4 Mon Sep 17 00:00:00 2001 From: Johnson Chen Date: Thu, 2 May 2024 09:58:58 +0800 Subject: [PATCH 1/3] feat(core): listeners return unwatch, and add watchWalletUpdated --- packages/core/src/services/listeners.ts | 47 +++++++++++++++++++------ 1 file changed, 37 insertions(+), 10 deletions(-) diff --git a/packages/core/src/services/listeners.ts b/packages/core/src/services/listeners.ts index e0aab78..4350030 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,39 +16,68 @@ 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() + } + } + return { onConnected, onAccountOrChainIdChanged, onWalletUpdated, onDisconnected, + watchWalletUpdated, } } From 0b3944327bdd6e084fead80dbdfcbe561d3b86ac Mon Sep 17 00:00:00 2001 From: Johnson Chen Date: Thu, 2 May 2024 10:08:29 +0800 Subject: [PATCH 2/3] feat(core): listeners add watchDisconnect --- packages/core/src/services/listeners.ts | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/packages/core/src/services/listeners.ts b/packages/core/src/services/listeners.ts index 4350030..33a9c7d 100644 --- a/packages/core/src/services/listeners.ts +++ b/packages/core/src/services/listeners.ts @@ -73,11 +73,20 @@ export function useListeners(pinia?: any) { } } + function watchDisconnect(callback: OnDisconnectedCB) { + return watch(isConnected, (val, oldVal) => { + if (!val && oldVal) { + callback && callback() + } + }) + } + return { onConnected, onAccountOrChainIdChanged, - onWalletUpdated, - onDisconnected, + onWalletUpdated, // will be deprecated + onDisconnected, // will be deprecated watchWalletUpdated, + watchDisconnect, } } From 1af8bfcd427430ef598b7cb1ac554f75b38c79cc Mon Sep 17 00:00:00 2001 From: Johnson Chen Date: Thu, 2 May 2024 10:13:24 +0800 Subject: [PATCH 3/3] feat(app): using watchWalletUpdated and watchDisconnect --- app/app.vue | 15 +++++++++----- app/components/content/Multicall.vue | 29 +++++++++------------------- app/pages/index.vue | 22 +++++++++------------ 3 files changed, 28 insertions(+), 38 deletions(-) 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() })