Merge pull request #170 from vu3th/issue/165

Issue/165

app/app.vue

@@ -5,7 +5,14 @@ import '@vue-dapp/modal/dist/style.css'
 // import { WalletConnectConnector } from '@vue-dapp/walletconnect'
 // import { CoinbaseWalletConnector } from '@vue-dapp/coinbase'
 
-import { lightTheme } from 'naive-ui'
+import { darkTheme, lightTheme, type GlobalThemeOverrides } from 'naive-ui'
+
+const lightThemeOverrides: GlobalThemeOverrides = {
+	common: {
+		primaryColor: darkTheme.common.primaryColor,
+		successColor: darkTheme.common.successColor,
+	},
+}
 
 useHead({
 	titleTemplate: title => {
@@ -49,16 +56,22 @@ onWalletUpdated(async (wallet: ConnWallet) => {
 onDisconnected(() => {
 	resetWallet()
 })
+
+const hideConnectingModal = computed(() => {
+	const route = useRoute()
+	if (route.path === '/eip-6963') return true
+	return false
+})
 </script>
 
 <template>
-	<n-config-provider :theme="lightTheme">
+	<n-config-provider :theme="lightTheme" :theme-overrides="lightThemeOverrides">
 		<NuxtLayout>
 			<NuxtLoadingIndicator />
 
 			<NuxtPage />
 
-			<VueDappModal autoConnect />
+			<VueDappModal autoConnect :hideConnectingModal="hideConnectingModal" />
 		</NuxtLayout>
 	</n-config-provider>
 </template>

app/components/button/ConnectButton.vue

@@ -2,7 +2,7 @@
 import { useVueDapp, shortenAddress } from '@vue-dapp/core'
 import { useVueDappModal } from '@vue-dapp/modal'
 
-const { address, status, error, disconnect } = useVueDapp()
+const { address, status, disconnect } = useVueDapp()
 
 function onClickConnectButton() {
 	if (status.value === 'connected') {
@@ -27,7 +27,6 @@ function onClickConnectButton() {
 			<div v-if="status === 'connected'">Disconnect</div>
 		</n-button>
 		<div v-if="address">{{ shortenAddress(address) }}</div>
-		<div v-if="error">{{ error }}</div>
 	</div>
 </template>
 

app/components/content/Contract.vue

@@ -172,7 +172,16 @@ const isReady = computed(() => isConnected.value && !showSwitchButton.value)
 			<p>Events</p>
 
 			<n-skeleton v-if="eventLoading && !displayEvents.length" text :repeat="3" />
-			<div v-else-if="!displayEvents.length" class="text-gray-500">No event found.</div>
+			<div v-else-if="!displayEvents.length" class="text-gray-500">
+				<div>No event found in the last 40,000 blocks.</div>
+				<NuxtLink
+					external
+					target="_blank"
+					to="https://sepolia.arbiscan.io/address/0x4022Be091550EFB5dB2E5Ba93457ee69BF6e1aDA#events"
+				>
+					More on explorer
+				</NuxtLink>
+			</div>
 
 			<n-list v-else class="p-0" hoverable bordered>
 				<TransitionGroup name="list">

app/components/content/Eip6963.client.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { useVueDapp, shortenAddress, type ConnectorName, RDNS } from '@vue-dapp/core'
+import { useVueDappModal } from '@vue-dapp/modal'
+
+const { providerDetails, wallet, address, status, connectTo, disconnect, error, isConnected } = useVueDapp()
+
+const providerList = computed(() => {
+	return providerDetails.value.slice().sort((a, b) => {
+		if (a.info.rdns === RDNS.rabby) return -1
+		if (b.info.rdns === RDNS.rabby) return 1
+		if (a.info.rdns === RDNS.metamask) return -1
+		if (b.info.rdns === RDNS.metamask) return 1
+		return 0
+	})
+})
+
+async function onClickWallet(connName: ConnectorName, rdns?: RDNS | string) {
+	useVueDappModal().close()
+	await connectTo(connName, { rdns })
+}
+</script>
+
+<template>
+	<div class="flex flex-col gap-2">
+		<div class="flex flex-wrap gap-2">
+			<n-button
+				v-for="detail in providerList"
+				:key="detail.info.uuid"
+				@click="onClickWallet('BrowserWallet', detail.info.rdns)"
+				size="medium"
+				:disabled="status === 'connecting' || wallet.providerInfo?.rdns === detail.info.rdns"
+			>
+				<div>{{ detail.info.name }}</div>
+			</n-button>
+			<p v-if="!providerList.length">No provider was found in this browser.</p>
+		</div>
+
+		<div
+			:class="{
+				'h-[200px]': status !== 'idle',
+			}"
+		>
+			<div class="flex flex-col gap-1">
+				<div v-if="status === 'connecting'">Connecting...</div>
+				<div v-if="isConnected" class="flex flex-col gap-1">
+					<div>uuid: {{ wallet.providerInfo?.uuid }}</div>
+					<div>name: {{ wallet.providerInfo?.name }}</div>
+
+					<div class="flex items-center gap-2">
+						<span class="">icon:</span>
+						<img
+							class="w-5 h-5 m-0 p-0"
+							:src="wallet.providerInfo?.icon"
+							:alt="wallet.providerInfo?.name"
+						/>
+					</div>
+					<div>rdns: {{ wallet.providerInfo?.rdns }}</div>
+
+					<div class="mt-5 flex items-center gap-2">
+						<n-button @click="disconnect">Disconnect</n-button>
+						<div>{{ shortenAddress(address || '') }}</div>
+					</div>
+				</div>
+			</div>
+
+			<p class="text-red-500">{{ error }}</p>
+		</div>
+	</div>
+</template>
+
+<style lang="scss"></style>

app/content/eip-6963.md

@@ -6,7 +6,91 @@ head:
       content: ''
 ---
 
-# EIP-6963
+# EIP-6963 Multi Injected Provider Discovery
 
-Decentralize injected wallet providers
+Using window events to announce [EIP-1193](https://eips.ethereum.org/EIPS/eip-1193){:target="_blank"} providers instead of `window.ethereum`.
 
+
+- [EIP-6963](https://eips.ethereum.org/EIPS/eip-6963){:target="_blank"}
+
+
+## Provider details
+
+
+::Eip6963
+::
+
+
+## Source code
+
+```ts [setup script]
+import { useVueDapp, shortenAddress, type ConnectorName, RDNS } from '@vue-dapp/core'
+import { useVueDappModal } from '@vue-dapp/modal'
+
+const { providerDetails, wallet, address, status, connectTo, disconnect, error, isConnected } = useVueDapp()
+
+const providerList = computed(() => {
+	return providerDetails.value.slice().sort((a, b) => {
+		if (a.info.rdns === RDNS.rabby) return -1
+		if (b.info.rdns === RDNS.rabby) return 1
+		if (a.info.rdns === RDNS.metamask) return -1
+		if (b.info.rdns === RDNS.metamask) return 1
+		return 0
+	})
+})
+
+async function onClickWallet(connName: ConnectorName, rdns?: RDNS | string) {
+	useVueDappModal().close()
+	await connectTo(connName, { rdns })
+}
+```
+
+```vue [template]
+<template>
+	<div class="flex flex-col gap-2">
+		<div class="flex flex-wrap gap-2">
+			<n-button
+				v-for="detail in providerList"
+				:key="detail.info.uuid"
+				@click="onClickWallet('BrowserWallet', detail.info.rdns)"
+				size="medium"
+				:disabled="status === 'connecting' || wallet.providerInfo?.rdns === detail.info.rdns"
+			>
+				<div>{{ detail.info.name }}</div>
+			</n-button>
+			<p v-if="!providerList.length">No provider was found in this browser.</p>
+		</div>
+
+		<div
+			:class="{
+				'h-[200px]': status !== 'idle',
+			}"
+		>
+			<div class="flex flex-col gap-1">
+				<div v-if="status === 'connecting'">Connecting...</div>
+				<div v-if="isConnected" class="flex flex-col gap-1">
+					<div>uuid: {{ wallet.providerInfo?.uuid }}</div>
+					<div>name: {{ wallet.providerInfo?.name }}</div>
+
+					<div class="flex items-center gap-2">
+						<span class="">icon:</span>
+						<img
+							class="w-5 h-5 m-0 p-0"
+							:src="wallet.providerInfo?.icon"
+							:alt="wallet.providerInfo?.name"
+						/>
+					</div>
+					<div>rdns: {{ wallet.providerInfo?.rdns }}</div>
+
+					<div class="mt-5 flex items-center gap-2">
+						<n-button @click="disconnect">Disconnect</n-button>
+						<div>{{ shortenAddress(address || '') }}</div>
+					</div>
+				</div>
+			</div>
+
+			<p class="text-red-500">{{ error }}</p>
+		</div>
+	</div>
+</template>
+```

app/content/eips.md

@@ -8,7 +8,8 @@ head:
 
 # EIPs
 
-Collect the EIPs related to Vue Dapp
+Collect the EIPs related to DApp development, especially in frontend.
+
 
 ## EIP-1193
 - [EIP-1193: Ethereum Provider JavaScript API](https://eips.ethereum.org/EIPS/eip-1193){:target="_blank"}

app/content/overview.md

@@ -13,7 +13,7 @@ head:
 
 ## Wallet & isConnected
 
-These two states will be frequently used in dapp development.
+These two states will be frequently used in development.
 
 The `isConnected` is a [computed](https://vuejs.org/api/reactivity-core.html#computed){:target="_blank"}, and the `wallet` is a [readonly](https://vuejs.org/api/reactivity-core.html#readonly) [reactive](https://vuejs.org/api/reactivity-core.html#reactive){:target="_blank"}.
 
@@ -34,7 +34,7 @@ if(isConnected.value) {
 }
 ```
 
-The wallet comprises 8 properties, each of which can be obtained from the `useVueDapp` as a [computed](https://vuejs.org/api/reactivity-core.html#ref){:target="_blank"}.
+The wallet comprises 8 properties, each of which can be obtained from the `useVueDapp` as a [computed](https://vuejs.org/api/reactivity-core.html#computed){:target="_blank"}.
 
 ```ts
 const { error, chainId } = useVueDapp()

app/core/sidebar.ts

@@ -60,6 +60,28 @@ export const sidebarMenu = [
 					),
 				key: '/examples/multicall',
 			},
+			{
+				label: () =>
+					h(
+						NuxtLink,
+						{
+							to: '/examples/meta-transactions',
+						},
+						{ default: () => 'Meta Transactions' },
+					),
+				key: '/examples/meta-transactions',
+			},
+			{
+				label: () =>
+					h(
+						NuxtLink,
+						{
+							to: '/examples/siwe',
+						},
+						{ default: () => 'Sign-In with Ethereum' },
+					),
+				key: '/examples/siwe',
+			},
 		],
 	},
 	{

app/stores/useEthers.ts

@@ -7,7 +7,7 @@ export const useEthers = defineStore('useEthers', () => {
 	const signer = ref<ethers.JsonRpcSigner | null>(null)
 
 	async function setWallet(p: EIP1193Provider) {
-		provider.value = new ethers.BrowserProvider(p)
+		provider.value = markRaw(new ethers.BrowserProvider(p))
 		signer.value = markRaw(await provider.value.getSigner())
 	}