Skip to content

Commit cf3f094

Browse files
taylorjdawsontaylorjdawson
authored
Merge pull request #1262 from blocknative/feature/vue2-example
 adds vue 2 example
2 parents 01937e8 + d55685d commit cf3f094

File tree

12 files changed

+255
-1
lines changed

12 files changed

+255
-1
lines changed

‎.gitignore

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,5 @@ dist/
44
package-lock.json
55
.rpt2_cache
66
.vscode
7-
yarn-error.log
7+
yarn-error.log
8+
.env

‎examples/with-vuejs-v2/.env.example

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
VITE_INFURA_KEY=<your-key>

‎examples/with-vuejs-v2/README.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# vite-vue2-starter
2+
3+
A simple start for using vue2 with vite, using [underfin's vite-plugin-vue2](https://github.com/underfin/vite-plugin-vue2).
4+
5+
## Scripts
6+
7+
```bash
8+
npm run dev # start dev server
9+
npm run build # build for production
10+
npm run serve # locally preview production build
11+
```

‎examples/with-vuejs-v2/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" href="/favicon.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite App</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/main.js"></script>
12+
</body>
13+
</html>

‎examples/with-vuejs-v2/package.json

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "vue2-vite",
3+
"version": "0.0.0",
4+
"scripts": {
5+
"dev": "vite",
6+
"build": "vite build",
7+
"serve": "vite preview"
8+
},
9+
"dependencies": {
10+
"@web3-onboard/injected-wallets": "^2.2.0",
11+
"@web3-onboard/vue": "^2.2.1",
12+
"vue": "^2.6.12",
13+
"vue-template-compiler": "^2.7.10"
14+
},
15+
"devDependencies": {
16+
"vite": "^2.0.5",
17+
"vite-plugin-vue2": "^2.0.1"
18+
}
19+
}

‎examples/with-vuejs-v2/public/favicon.ico

4.19 KB
Binary file not shown.

‎examples/with-vuejs-v2/src/App.vue

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<template>
2+
<div id="app">
3+
<img alt="Vue logo" src="./assets/logo.png" />
4+
<HelloWorld msg="Web3-Onboard Vue 2 Demo" />
5+
</div>
6+
</template>
7+
8+
<script>
9+
import HelloWorld from './components/HelloWorld.vue';
10+
export default {
11+
components: {
12+
HelloWorld,
13+
},
14+
};
15+
</script>
16+
17+
<style>
18+
:root {
19+
--vt-c-brand: #42b883;
20+
--vt-c-brand-dark: #33a06f;
21+
--vt-c-text-1: rgba(255, 255, 255, 0.87);
22+
--vt-c-divider: rgba(84, 84, 84, 0.65);
23+
--vt-c-black: #1a1a1a;
24+
--vt-c-bg-soft: #242424;
25+
}
26+
#app {
27+
font-family: Avenir, Helvetica, Arial, sans-serif;
28+
-webkit-font-smoothing: antialiased;
29+
-moz-osx-font-smoothing: grayscale;
30+
text-align: center;
31+
color: rgba(255, 255, 255, 0.87);
32+
margin-top: 60px;
33+
}
34+
html {
35+
background-color: var(--vt-c-black);
36+
}
37+
</style>

‎examples/with-vuejs-v2/src/assets/logo.png

6.69 KB
Loading

‎examples/with-vuejs-v2/src/components/HelloWorld.vue

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
<template>
2+
<div>
3+
<h1>{{ msg }}</h1>
4+
5+
<div class="container">
6+
<div class="wallet" v-if="connectedWallet">
7+
<div class="avatar" />
8+
<div class="details">
9+
<div v-if="ens">{{ ens.name }}</div>
10+
<div v-if="address">{{ address }}</div>
11+
12+
<span>Connected Wallet: {{ connectedWallet.label }}</span>
13+
</div>
14+
<button type="button" @click="disconnect">Disconnect</button>
15+
</div>
16+
<div v-else>
17+
<button type="button" @click="connect">Connect Wallet</button>
18+
</div>
19+
</div>
20+
</div>
21+
</template>
22+
23+
<script>
24+
import { init, useOnboard } from '@web3-onboard/vue';
25+
import injectedModule from '@web3-onboard/injected-wallets';
26+
27+
const injected = injectedModule();
28+
// With vite
29+
const infuraKey = import.meta.env.VITE_INFURA_KEY;
30+
31+
// Without vite
32+
//const infuraKey = process.env.INFURA_KEY;
33+
34+
const rpcUrl = `https://mainnet.infura.io/v3/${infuraKey}`;
35+
36+
const web3Onboard = init({
37+
wallets: [injected],
38+
chains: [
39+
{
40+
id: '0x1',
41+
token: 'ETH',
42+
label: 'Ethereum Mainnet',
43+
rpcUrl,
44+
},
45+
],
46+
});
47+
48+
const { wallets, connectWallet, disconnectConnectedWallet, connectedWallet } =
49+
useOnboard();
50+
51+
const trunc = (address) =>
52+
!!address ? address.slice(0, 6) + '...' + address.slice(-6) : null;
53+
54+
export default {
55+
props: {
56+
msg: String,
57+
},
58+
data() {
59+
return {
60+
connectedWallet,
61+
count: 0,
62+
};
63+
},
64+
methods: {
65+
connect: () => connectWallet(),
66+
disconnect: () => disconnectConnectedWallet(),
67+
},
68+
computed: {
69+
address: function () {
70+
if (
71+
this.connectedWallet.accounts &&
72+
this.connectedWallet.accounts[0].address
73+
) {
74+
console.log(this.connectedWallet.accounts[0].address);
75+
return trunc(this.connectedWallet.accounts[0].address);
76+
}
77+
},
78+
ens: function () {
79+
if (
80+
this.connectedWallet.accounts &&
81+
this.connectedWallet.accounts[0].ens?.name
82+
) {
83+
return trunc(this.connectedWallet.accounts[0].ens);
84+
}
85+
},
86+
},
87+
};
88+
</script>
89+
90+
<style scoped>
91+
a {
92+
color: var(--vt-c-brand);
93+
text-decoration: none;
94+
}
95+
96+
button {
97+
border: none;
98+
border-radius: 4px;
99+
padding: 0 12px;
100+
letter-spacing: 0.8px;
101+
line-height: 36px;
102+
font-size: 13px;
103+
font-weight: 500;
104+
color: rgba(255, 255, 255, 0.87);
105+
background-color: var(--vt-c-brand);
106+
transition: background-color 0.25s;
107+
cursor: pointer;
108+
}
109+
110+
button:hover {
111+
background-color: var(--vt-c-brand-dark);
112+
}
113+
114+
.container {
115+
max-width: 64vw;
116+
margin: auto;
117+
}
118+
119+
.wallet {
120+
display: inline-flex;
121+
align-items: center;
122+
justify-content: space-between;
123+
border-radius: 8px;
124+
padding: 0.5rem 0.75rem;
125+
font-size: 16px;
126+
width: 100%;
127+
transition: border-color 0.25s, background-color 0.25s;
128+
margin: 28px 0;
129+
border-radius: 8px;
130+
overflow-x: auto;
131+
transition: color 0.5s, background-color 0.5s;
132+
position: relative;
133+
font-size: 14px;
134+
line-height: 1.6;
135+
font-weight: 500;
136+
background-color: var(--vt-c-bg-soft);
137+
}
138+
139+
.avatar {
140+
height: 36px;
141+
width: 36px;
142+
border-radius: 100%;
143+
background-image: linear-gradient(
144+
to right,
145+
rgb(6, 182, 212),
146+
rgb(59, 130, 246)
147+
);
148+
}
149+
150+
.details {
151+
display: flex;
152+
flex-flow: column;
153+
align-items: flex-start;
154+
margin-right: auto;
155+
margin-left: 12px;
156+
text-align: left;
157+
}
158+
</style>

‎examples/with-vuejs-v2/src/main.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import Vue from 'vue';
2+
import App from './App.vue';
3+
4+
new Vue({
5+
render: (h) => h(App),
6+
}).$mount('#app');

0 commit comments

Comments
 (0)