feat(app): using watchWalletUpdated and watchDisconnect

Author: johnson86tw

Diff for: 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 for: 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 for: 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()
 })