index.vue

<script setup lang="ts">
import pkg from '~/package.json'
import { shortenAddress, useVueDapp } from '@vue-dapp/core'
import { useVueDappModal } from '@vue-dapp/modal'
import type { ConnWallet } from '@vue-dapp/core'
import { ethers, formatEther } from 'ethers'
import type { Header, Item } from 'vue3-easy-data-table'

useHead({
	title: '', // must add to prevent from redirecting from Overview to Vue Dapp but the tab is still Overview
})

const defaultProvider = new ethers.JsonRpcProvider('https://ethereum-rpc.publicnode.com')

const { wallet, isConnected, disconnect, onWalletUpdated, onDisconnected } = useVueDapp()

const ensName = ref('')
async function fetchENSName(address: string) {
	ensName.value = (await defaultProvider.lookupAddress(address)) ?? ''
}

const balance = ref(0)
async function fetchBalance(wallet: ConnWallet) {
	const provider = new ethers.BrowserProvider(wallet.provider)
	balance.value = Number(formatEther(await provider.getBalance(wallet.address)))
}

onMounted(() => {
	if (isConnected.value) {
		fetchENSName(wallet.address!)
		fetchBalance(wallet as ConnWallet)
	}
})

onWalletUpdated((wallet: ConnWallet) => {
	fetchENSName(wallet.address)
	fetchBalance(wallet)
})

onDisconnected(() => {
	ensName.value = ''
	balance.value = 0
})

function onClickConnectButton() {
	if (wallet.status === 'connected') {
		disconnect()
		return
	}
	const { open } = useVueDappModal()
	open()
}

const headers: Header[] = [
	{ text: 'Name', value: 'name' },
	{ text: 'Value', value: 'value' },
]

const items = computed<Item[]>(() => [
	{
		name: 'Chain ID',
		value: wallet.chainId ?? 'N/A',
	},
	{
		name: 'Address',
		value: wallet.address ? shortenAddress(wallet.address) : 'N/A',
	},
	{
		name: 'Balance',
		value: isConnected.value ? balance.value : 'N/A',
	},
	{
		name: 'ENS',
		value: ensName.value || 'N/A',
	},
])
</script>

<template>
	<div class="pb-14">
		<!-- banner -->
		<div class="mt-5 flex flex-col items-center justify-center">
			<img class="w-90" src="/logo.png" alt="logo" />
			<p class="bold text-md md:text-xl px-4 text-gray-500 text-center">{{ $t('subtitle') }}</p>
		</div>

		<div class="mt-10 px-10 flex flex-col items-center justify-center gap-5">
			<n-button
				size="medium"
				:loading="wallet.status === 'connecting'"
				:disabled="wallet.status === 'connecting'"
				@click="onClickConnectButton"
			>
				<p v-if="wallet.status === 'idle'">Connect Wallet</p>
				<p v-else-if="wallet.status === 'connecting'">Connecting...</p>
				<p v-if="wallet.status === 'connected'">Disconnect</p>
			</n-button>

			<p class="text-red-500 text-center" v-if="wallet.error">{{ wallet.error }}</p>

			<ClientOnly>
				<Vue3EasyDataTable
					class="min-w-[240px]"
					hide-rows-per-page
					hide-footer
					:headers="headers"
					:items="items"
				>
				</Vue3EasyDataTable>
			</ClientOnly>
		</div>
	</div>
</template>

<style lang="scss" scoped>
.wallet-table {
	min-width: 240px;
}
</style>