Merge pull request #180 from vu3th/feat/watch-wallet-updated

Feat/watch wallet updated

Author: johnson86tw

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()
 })
 

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: [] }
 })
 

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()
 })

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,
 	}
 }