Skip to content

Commit c1e36fd

Browse files
kolirtkolirt
committed
example with vue-cli-service
1 parent a844375 commit c1e36fd

File tree

11 files changed

+8336
-0
lines changed

11 files changed

+8336
-0
lines changed

‎examples/vue-cli-service/.gitignore‎

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

‎examples/vue-cli-service/.prettierrc‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"bracketSpacing": true,
3+
"trailingComma": "none",
4+
"tabWidth": 2,
5+
"printWidth": 120,
6+
"semi": false,
7+
"singleQuote": true,
8+
"endOfLine": "auto",
9+
"plugins": [
10+
"@trivago/prettier-plugin-sort-imports",
11+
"prettier-plugin-tailwindcss"
12+
],
13+
"importOrder": [
14+
"<THIRD_PARTY_MODULES>",
15+
"^[./]"
16+
],
17+
"importOrderSeparation": true,
18+
"importOrderSortSpecifiers": true
19+
}

‎examples/vue-cli-service/README.md‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# hello-world
2+
3+
## Project setup
4+
```
5+
yarn install
6+
```
7+
8+
### Compiles and hot-reloads for development
9+
```
10+
yarn serve
11+
```
12+
13+
### Compiles and minifies for production
14+
```
15+
yarn build
16+
```
17+
18+
### Lints and fixes files
19+
```
20+
yarn lint
21+
```
22+
23+
### Customize configuration
24+
See [Configuration Reference](https://cli.vuejs.org/config/).

‎examples/vue-cli-service/babel.config.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
presets: [
3+
'@vue/cli-plugin-babel/preset'
4+
]
5+
}

‎examples/vue-cli-service/jsconfig.json‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"compilerOptions": {
3+
"target": "es5",
4+
"module": "esnext",
5+
"baseUrl": "./",
6+
"moduleResolution": "node",
7+
"paths": {
8+
"@/*": [
9+
"src/*"
10+
]
11+
},
12+
"lib": [
13+
"esnext",
14+
"dom",
15+
"dom.iterable",
16+
"scripthost"
17+
]
18+
}
19+
}

‎examples/vue-cli-service/package.json‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
{
2+
"name": "hello-world",
3+
"version": "0.1.0",
4+
"private": true,
5+
"scripts": {
6+
"serve": "vue-cli-service serve",
7+
"build": "vue-cli-service build",
8+
"lint": "vue-cli-service lint",
9+
"format": "prettier --write src/"
10+
},
11+
"dependencies": {
12+
"@kolirt/vue-web3-auth": "^0.1.4",
13+
"core-js": "^3.8.3",
14+
"vue": "^3.2.13"
15+
},
16+
"devDependencies": {
17+
"@babel/core": "^7.12.16",
18+
"@babel/eslint-parser": "^7.12.16",
19+
"@trivago/prettier-plugin-sort-imports": "^4.2.0",
20+
"@vue/cli-plugin-babel": "~5.0.0",
21+
"@vue/cli-plugin-eslint": "~5.0.0",
22+
"@vue/cli-service": "~5.0.0",
23+
"eslint": "^7.32.0",
24+
"eslint-plugin-vue": "^8.0.3",
25+
"prettier": "3.0.3",
26+
"prettier-plugin-tailwindcss": "^0.5.5"
27+
},
28+
"eslintConfig": {
29+
"root": true,
30+
"env": {
31+
"node": true
32+
},
33+
"extends": [
34+
"plugin:vue/vue3-essential",
35+
"eslint:recommended"
36+
],
37+
"parserOptions": {
38+
"parser": "@babel/eslint-parser"
39+
},
40+
"rules": {}
41+
},
42+
"browserslist": [
43+
"> 1%",
44+
"last 2 versions",
45+
"not dead",
46+
"not ie 11"
47+
]
48+
}

‎examples/vue-cli-service/public/index.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html lang="">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width,initial-scale=1.0">
7+
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
8+
<title><%= htmlWebpackPlugin.options.title %></title>
9+
</head>
10+
<body>
11+
<noscript>
12+
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13+
</noscript>
14+
<div id="app"></div>
15+
<!-- built files will be auto injected -->
16+
</body>
17+
</html>

‎examples/vue-cli-service/src/App.vue‎

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

‎examples/vue-cli-service/src/main.js‎

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

‎examples/vue-cli-service/vue.config.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
const { defineConfig } = require('@vue/cli-service')
2+
module.exports = defineConfig({
3+
transpileDependencies: true
4+
})

0 commit comments

Comments
 (0)