Skip to content

Commit afd4f7e

Browse files
kolirtkolirt
committed
update examples
1 parent 6d39c65 commit afd4f7e

File tree

22 files changed

+3611
-227
lines changed

22 files changed

+3611
-227
lines changed

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -440,15 +440,15 @@ const {
440440
441441
# Example
442442
443-
[Example here](https://github.com/kolirt/vue-web3-auth/blob/master/src).
443+
[Example here](https://github.com/kolirt/vue-web3-auth/tree/master/examples).
444444
445445
# FAQ
446446
447447
Check closed [issues](https://github.com/kolirt/vue-web3-auth/issues) with `FAQ` label to get answers for most asked questions.
448448
449449
# License
450450
451-
[MIT](https://github.com/kolirt/vue-web3-auth/blob/master/LICENSE).
451+
[MIT](https://github.com/kolirt/vue-web3-auth/tree/master/LICENSE).
452452
453453
# Other projects
454454

‎examples/vite/.gitignore‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎examples/vite/.vscode/extensions.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
3+
}

‎examples/vite/README.md‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
# Vue 3 + TypeScript + Vite
2+
3+
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
4+
5+
## Recommended IDE Setup
6+
7+
- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
8+
9+
## Type Support For `.vue` Imports in TS
10+
11+
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
12+
13+
If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
14+
15+
1. Disable the built-in TypeScript Extension
16+
1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
17+
2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
18+
2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.

‎examples/vite/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite + Vue + TS</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/main.ts"></script>
12+
</body>
13+
</html>

‎examples/vite/package.json‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"name": "vite",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "vue-tsc && vite build",
9+
"preview": "vite preview"
10+
},
11+
"dependencies": {
12+
"@kolirt/vue-web3-auth": "^0.1.4",
13+
"bootstrap": "^5.3.2",
14+
"vue": "^3.3.8"
15+
},
16+
"devDependencies": {
17+
"@vitejs/plugin-vue": "^4.5.0",
18+
"typescript": "^5.2.2",
19+
"vite": "^5.0.0",
20+
"vue-tsc": "^1.8.22"
21+
}
22+
}

‎examples/vite/public/vite.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎examples/vite/src/App.vue‎

Lines changed: 198 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,198 @@
1+
<script setup lang="ts">
2+
import type { Chain } from '@kolirt/vue-web3-auth'
3+
import {
4+
$off,
5+
$on,
6+
Events,
7+
account,
8+
accountDetails,
9+
chain,
10+
getAvailableChains,
11+
connect as masterConnect,
12+
disconnect as masterDisconnect,
13+
switchChain as masterSwitchChain,
14+
selectChain
15+
} from '@kolirt/vue-web3-auth'
16+
import { computed, reactive } from 'vue'
17+
18+
const loading = reactive({
19+
connecting: false,
20+
connectingTo: {} as any,
21+
switchingTo: {} as any,
22+
logouting: false
23+
})
24+
25+
async function connect(chain?: Chain) {
26+
const handler = (state: boolean) => {
27+
if (!state) {
28+
if (chain) {
29+
loading.connectingTo[chain.id] = false
30+
} else {
31+
loading.connecting = false
32+
}
33+
34+
$off(Events.ModalStateChanged, handler)
35+
}
36+
}
37+
38+
$on(Events.ModalStateChanged, handler)
39+
40+
if (chain) {
41+
loading.connectingTo[chain.id] = true
42+
} else {
43+
loading.connecting = true
44+
}
45+
46+
await masterConnect(chain)
47+
}
48+
49+
async function disconnect() {
50+
loading.logouting = true
51+
52+
const handler = () => {
53+
loading.logouting = false
54+
$off(Events.Disconnected, handler)
55+
}
56+
57+
$on(Events.Disconnected, handler)
58+
59+
await masterDisconnect().catch(() => {
60+
loading.logouting = false
61+
$off(Events.Disconnected, handler)
62+
})
63+
}
64+
65+
async function switchChain(chain: Chain) {
66+
if (!loading.switchingTo[chain.id]) {
67+
loading.switchingTo[chain.id] = true
68+
await masterSwitchChain(chain).finally(() => {
69+
loading.switchingTo[chain.id] = false
70+
})
71+
}
72+
}
73+
74+
async function reconnect(newChain: Chain) {
75+
if (chain.value.id !== newChain.id) {
76+
await masterDisconnect()
77+
await masterConnect(newChain)
78+
}
79+
}
80+
81+
const chains = getAvailableChains()
82+
const availableChains = computed(() => {
83+
return chains.filter((item) => item.id !== chain.value.id)
84+
})
85+
</script>
86+
87+
<template>
88+
<div class="container py-5">
89+
<div class="bg-body-secondary rounded p-5">
90+
<div class="d-grid d-sm-flex mb-3 gap-2">
91+
<img
92+
src="https://img.shields.io/static/v1?label=Made%20with&message=VueJS&color=limegreen&style=for-the-badge&logo=vue.js"
93+
alt="vuejs"
94+
/>
95+
<img src="https://img.shields.io/badge/Made%20for-Dapps-orange?style=for-the-badge&logo=ethereum" alt="dapp" />
96+
</div>
97+
98+
<iframe
99+
src="https://ghbtns.com/github-btn.html?user=kolirt&repo=vue-web3-auth&type=star&count=true&size=large"
100+
frameborder="0"
101+
scrolling="0"
102+
width="170"
103+
height="30"
104+
title="GitHub"
105+
class="mb-3"
106+
>
107+
</iframe>
108+
109+
<div class="d-grid d-sm-flex mb-3 gap-2">
110+
<a href="https://github.com/kolirt/vue-web3-auth" target="_blank">Github</a>
111+
<a href="https://www.npmjs.com/package/@kolirt/vue-web3-auth" target="_blank">Npmjs</a>
112+
<a href="https://github.com/kolirt/vue-web3-auth/tree/master/README.md" target="_blank">Docs</a>
113+
<a href="https://github.com/kolirt/vue-web3-auth/tree/master/examples" target="_blank">Example</a>
114+
</div>
115+
116+
<h1>Web3 authentication for Vue3 apps</h1>
117+
<p class="lead">Simple WalletConnect v2 integration package for Vue3 dApps</p>
118+
119+
<template v-if="account.connected">
120+
<ul>
121+
<li class="mb-2">
122+
<span>Wallet info:</span>
123+
<ul>
124+
<li>Connected: {{ account.connected }}</li>
125+
<li>Address: {{ account.address }}</li>
126+
<li>Short address: {{ account.shortAddress }}</li>
127+
</ul>
128+
</li>
129+
<li>
130+
<span>Chain info:</span>
131+
<ul>
132+
<li>ID: {{ chain.id }}</li>
133+
<li>Network: {{ chain.network }}</li>
134+
<li>Name: {{ chain.name }}</li>
135+
<li>Native currency: {{ chain.nativeCurrency.symbol }}</li>
136+
<li>
137+
Explorer:
138+
<a :href="chain.blockExplorers?.default.url" target="_blank">
139+
{{ chain.blockExplorers?.default.name }}
140+
</a>
141+
</li>
142+
</ul>
143+
</li>
144+
</ul>
145+
146+
<hr />
147+
148+
<div class="d-grid d-sm-flex mb-3 gap-2">
149+
<button @click="accountDetails" class="btn btn-primary">Account details</button>
150+
</div>
151+
152+
<div class="d-grid d-sm-flex mb-3 gap-2">
153+
<button @click="selectChain" class="btn btn-primary">Select chain via the wc modal</button>
154+
</div>
155+
156+
<div class="d-grid d-sm-flex mb-3 gap-2">
157+
<button
158+
v-for="item in availableChains"
159+
@click="switchChain(item)"
160+
:key="item.id"
161+
class="btn btn-outline-primary"
162+
>
163+
{{ loading.switchingTo[item.id] ? `Switching chain to ${item.name}...` : `Switch chain to ${item.name}` }}
164+
</button>
165+
</div>
166+
167+
<div class="d-grid d-sm-flex mb-3 gap-2">
168+
<button
169+
v-for="item in availableChains"
170+
@click="reconnect(item)"
171+
:key="item.id"
172+
class="btn btn-outline-primary"
173+
>
174+
Reconnect to {{ item.name }}
175+
</button>
176+
</div>
177+
178+
<hr />
179+
180+
<button @click="disconnect" class="btn btn-danger">
181+
{{ loading.logouting ? 'Logouting...' : 'Logout' }}
182+
</button>
183+
</template>
184+
185+
<div v-else class="d-grid d-sm-flex mb-3 gap-2">
186+
<button @click="connect()" class="btn btn-primary">
187+
{{ loading.connecting ? 'Connecting...' : 'Connect wallet' }}
188+
</button>
189+
190+
<button v-for="item in chains" @click="connect(item)" :key="item.id" class="btn btn-outline-primary">
191+
{{ loading.connectingTo[item.id] ? `Connecting to ${item.name}...` : `Connect to ${item.name}` }}
192+
</button>
193+
</div>
194+
</div>
195+
</div>
196+
</template>
197+
198+
<style scoped></style>

‎examples/vite/src/main.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import App from './App.vue'
2+
3+
import { Chains, createWeb3Auth } from '@kolirt/vue-web3-auth'
4+
import 'bootstrap/dist/css/bootstrap.min.css'
5+
import { createApp } from 'vue'
6+
7+
const app = createApp(App)
8+
9+
app.use(
10+
createWeb3Auth({
11+
projectId: '3c5c8069ff37304cc62e07ae8cb592a8', // generate here https://cloud.walletconnect.com/ and turn on 'Supports Sign v2'
12+
chains: [Chains.bsc, Chains.mainnet, Chains.polygon]
13+
})
14+
)
15+
16+
app.mount('#app')

‎examples/vite/src/vite-env.d.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
/// <reference types="vite/client" />
2+
3+
declare module '*.vue' {
4+
import type { DefineComponent } from 'vue'
5+
const component: DefineComponent<{}, {}, any>
6+
export default component
7+
}

0 commit comments

Comments
 (0)