Skip to content

Commit c10a522

Browse files
johnson86twjohnson86tw
authored
Merge pull request #170 from vu3th/issue/165
Issue/165
2 parents 7bc0f77 + ce4b42e commit c10a522

File tree

14 files changed

+315
-59
lines changed

14 files changed

+315
-59
lines changed

‎app/app.vue

+16-3
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,14 @@ import '@vue-dapp/modal/dist/style.css'
55
// import { WalletConnectConnector } from '@vue-dapp/walletconnect'
66
// import { CoinbaseWalletConnector } from '@vue-dapp/coinbase'
77
8-
import { lightTheme } from 'naive-ui'
8+
import { darkTheme, lightTheme, type GlobalThemeOverrides } from 'naive-ui'
9+
10+
const lightThemeOverrides: GlobalThemeOverrides = {
11+
common: {
12+
primaryColor: darkTheme.common.primaryColor,
13+
successColor: darkTheme.common.successColor,
14+
},
15+
}
916
1017
useHead({
1118
titleTemplate: title => {
@@ -49,16 +56,22 @@ onWalletUpdated(async (wallet: ConnWallet) => {
4956
onDisconnected(() => {
5057
resetWallet()
5158
})
59+
60+
const hideConnectingModal = computed(() => {
61+
const route = useRoute()
62+
if (route.path === '/eip-6963') return true
63+
return false
64+
})
5265
</script>
5366

5467
<template>
55-
<n-config-provider :theme="lightTheme">
68+
<n-config-provider :theme="lightTheme" :theme-overrides="lightThemeOverrides">
5669
<NuxtLayout>
5770
<NuxtLoadingIndicator />
5871

5972
<NuxtPage />
6073

61-
<VueDappModal autoConnect />
74+
<VueDappModal autoConnect :hideConnectingModal="hideConnectingModal" />
6275
</NuxtLayout>
6376
</n-config-provider>
6477
</template>

‎app/components/button/ConnectButton.vue

+1-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import { useVueDapp, shortenAddress } from '@vue-dapp/core'
33
import { useVueDappModal } from '@vue-dapp/modal'
44
5-
const { address, status, error, disconnect } = useVueDapp()
5+
const { address, status, disconnect } = useVueDapp()
66
77
function onClickConnectButton() {
88
if (status.value === 'connected') {
@@ -27,7 +27,6 @@ function onClickConnectButton() {
2727
<div v-if="status === 'connected'">Disconnect</div>
2828
</n-button>
2929
<div v-if="address">{{ shortenAddress(address) }}</div>
30-
<div v-if="error">{{ error }}</div>
3130
</div>
3231
</template>
3332

‎app/components/content/Contract.vue

+10-1
Original file line numberDiff line numberDiff line change
@@ -172,7 +172,16 @@ const isReady = computed(() => isConnected.value && !showSwitchButton.value)
172172
<p>Events</p>
173173

174174
<n-skeleton v-if="eventLoading && !displayEvents.length" text :repeat="3" />
175-
<div v-else-if="!displayEvents.length" class="text-gray-500">No event found.</div>
175+
<div v-else-if="!displayEvents.length" class="text-gray-500">
176+
<div>No event found in the last 40,000 blocks.</div>
177+
<NuxtLink
178+
external
179+
target="_blank"
180+
to="https://sepolia.arbiscan.io/address/0x4022Be091550EFB5dB2E5Ba93457ee69BF6e1aDA#events"
181+
>
182+
More on explorer
183+
</NuxtLink>
184+
</div>
176185

177186
<n-list v-else class="p-0" hoverable bordered>
178187
<TransitionGroup name="list">

‎app/components/content/Eip6963.client.vue

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<script setup lang="ts">
2+
import { useVueDapp, shortenAddress, type ConnectorName, RDNS } from '@vue-dapp/core'
3+
import { useVueDappModal } from '@vue-dapp/modal'
4+
5+
const { providerDetails, wallet, address, status, connectTo, disconnect, error, isConnected } = useVueDapp()
6+
7+
const providerList = computed(() => {
8+
return providerDetails.value.slice().sort((a, b) => {
9+
if (a.info.rdns === RDNS.rabby) return -1
10+
if (b.info.rdns === RDNS.rabby) return 1
11+
if (a.info.rdns === RDNS.metamask) return -1
12+
if (b.info.rdns === RDNS.metamask) return 1
13+
return 0
14+
})
15+
})
16+
17+
async function onClickWallet(connName: ConnectorName, rdns?: RDNS | string) {
18+
useVueDappModal().close()
19+
await connectTo(connName, { rdns })
20+
}
21+
</script>
22+
23+
<template>
24+
<div class="flex flex-col gap-2">
25+
<div class="flex flex-wrap gap-2">
26+
<n-button
27+
v-for="detail in providerList"
28+
:key="detail.info.uuid"
29+
@click="onClickWallet('BrowserWallet', detail.info.rdns)"
30+
size="medium"
31+
:disabled="status === 'connecting' || wallet.providerInfo?.rdns === detail.info.rdns"
32+
>
33+
<div>{{ detail.info.name }}</div>
34+
</n-button>
35+
<p v-if="!providerList.length">No provider was found in this browser.</p>
36+
</div>
37+
38+
<div
39+
:class="{
40+
'h-[200px]': status !== 'idle',
41+
}"
42+
>
43+
<div class="flex flex-col gap-1">
44+
<div v-if="status === 'connecting'">Connecting...</div>
45+
<div v-if="isConnected" class="flex flex-col gap-1">
46+
<div>uuid: {{ wallet.providerInfo?.uuid }}</div>
47+
<div>name: {{ wallet.providerInfo?.name }}</div>
48+
49+
<div class="flex items-center gap-2">
50+
<span class="">icon:</span>
51+
<img
52+
class="w-5 h-5 m-0 p-0"
53+
:src="wallet.providerInfo?.icon"
54+
:alt="wallet.providerInfo?.name"
55+
/>
56+
</div>
57+
<div>rdns: {{ wallet.providerInfo?.rdns }}</div>
58+
59+
<div class="mt-5 flex items-center gap-2">
60+
<n-button @click="disconnect">Disconnect</n-button>
61+
<div>{{ shortenAddress(address || '') }}</div>
62+
</div>
63+
</div>
64+
</div>
65+
66+
<p class="text-red-500">{{ error }}</p>
67+
</div>
68+
</div>
69+
</template>
70+
71+
<style lang="scss"></style>

‎app/content/eip-6963.md

+86-2
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,91 @@ head:
66
content: ''
77
---
88

9-
# EIP-6963
9+
# EIP-6963 Multi Injected Provider Discovery
1010

11-
Decentralize injected wallet providers
11+
Using window events to announce [EIP-1193](https://eips.ethereum.org/EIPS/eip-1193){:target="_blank"} providers instead of `window.ethereum`.
1212

13+
14+
- [EIP-6963](https://eips.ethereum.org/EIPS/eip-6963){:target="_blank"}
15+
16+
17+
## Provider details
18+
19+
20+
::Eip6963
21+
::
22+
23+
24+
## Source code
25+
26+
```ts [setup script]
27+
import { useVueDapp, shortenAddress, type ConnectorName, RDNS } from '@vue-dapp/core'
28+
import { useVueDappModal } from '@vue-dapp/modal'
29+
30+
const { providerDetails, wallet, address, status, connectTo, disconnect, error, isConnected } = useVueDapp()
31+
32+
const providerList = computed(() => {
33+
return providerDetails.value.slice().sort((a, b) => {
34+
if (a.info.rdns === RDNS.rabby) return -1
35+
if (b.info.rdns === RDNS.rabby) return 1
36+
if (a.info.rdns === RDNS.metamask) return -1
37+
if (b.info.rdns === RDNS.metamask) return 1
38+
return 0
39+
})
40+
})
41+
42+
async function onClickWallet(connName: ConnectorName, rdns?: RDNS | string) {
43+
useVueDappModal().close()
44+
await connectTo(connName, { rdns })
45+
}
46+
```
47+
48+
```vue [template]
49+
<template>
50+
<div class="flex flex-col gap-2">
51+
<div class="flex flex-wrap gap-2">
52+
<n-button
53+
v-for="detail in providerList"
54+
:key="detail.info.uuid"
55+
@click="onClickWallet('BrowserWallet', detail.info.rdns)"
56+
size="medium"
57+
:disabled="status === 'connecting' || wallet.providerInfo?.rdns === detail.info.rdns"
58+
>
59+
<div>{{ detail.info.name }}</div>
60+
</n-button>
61+
<p v-if="!providerList.length">No provider was found in this browser.</p>
62+
</div>
63+
64+
<div
65+
:class="{
66+
'h-[200px]': status !== 'idle',
67+
}"
68+
>
69+
<div class="flex flex-col gap-1">
70+
<div v-if="status === 'connecting'">Connecting...</div>
71+
<div v-if="isConnected" class="flex flex-col gap-1">
72+
<div>uuid: {{ wallet.providerInfo?.uuid }}</div>
73+
<div>name: {{ wallet.providerInfo?.name }}</div>
74+
75+
<div class="flex items-center gap-2">
76+
<span class="">icon:</span>
77+
<img
78+
class="w-5 h-5 m-0 p-0"
79+
:src="wallet.providerInfo?.icon"
80+
:alt="wallet.providerInfo?.name"
81+
/>
82+
</div>
83+
<div>rdns: {{ wallet.providerInfo?.rdns }}</div>
84+
85+
<div class="mt-5 flex items-center gap-2">
86+
<n-button @click="disconnect">Disconnect</n-button>
87+
<div>{{ shortenAddress(address || '') }}</div>
88+
</div>
89+
</div>
90+
</div>
91+
92+
<p class="text-red-500">{{ error }}</p>
93+
</div>
94+
</div>
95+
</template>
96+
```

‎app/content/eips.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ head:
88

99
# EIPs
1010

11-
Collect the EIPs related to Vue Dapp
11+
Collect the EIPs related to DApp development, especially in frontend.
12+
1213

1314
## EIP-1193
1415
- [EIP-1193: Ethereum Provider JavaScript API](https://eips.ethereum.org/EIPS/eip-1193){:target="_blank"}

‎app/content/overview.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ head:
1313

1414
## Wallet & isConnected
1515

16-
These two states will be frequently used in dapp development.
16+
These two states will be frequently used in development.
1717

1818
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"}.
1919

@@ -34,7 +34,7 @@ if(isConnected.value) {
3434
}
3535
```
3636

37-
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"}.
37+
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"}.
3838

3939
```ts
4040
const { error, chainId } = useVueDapp()

‎app/core/sidebar.ts

+22
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,28 @@ export const sidebarMenu = [
6060
),
6161
key: '/examples/multicall',
6262
},
63+
{
64+
label: () =>
65+
h(
66+
NuxtLink,
67+
{
68+
to: '/examples/meta-transactions',
69+
},
70+
{ default: () => 'Meta Transactions' },
71+
),
72+
key: '/examples/meta-transactions',
73+
},
74+
{
75+
label: () =>
76+
h(
77+
NuxtLink,
78+
{
79+
to: '/examples/siwe',
80+
},
81+
{ default: () => 'Sign-In with Ethereum' },
82+
),
83+
key: '/examples/siwe',
84+
},
6385
],
6486
},
6587
{

‎app/stores/useEthers.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export const useEthers = defineStore('useEthers', () => {
77
const signer = ref<ethers.JsonRpcSigner | null>(null)
88

99
async function setWallet(p: EIP1193Provider) {
10-
provider.value = new ethers.BrowserProvider(p)
10+
provider.value = markRaw(new ethers.BrowserProvider(p))
1111
signer.value = markRaw(await provider.value.getSigner())
1212
}
1313

0 commit comments

Comments
 (0)