Skip to content

Commit e60f6e6

Browse files
shahbaz17shahbaz17
authored
Merge pull request #836 from Web3Auth/add-nuxt-example-modal-evm
Add nuxt example modal and no-modal for EVM
2 parents 4041ec7 + 0fb19be commit e60f6e6

File tree

23 files changed

+28156
-39
lines changed

23 files changed

+28156
-39
lines changed

‎.gitignore

+8
Original file line numberDiff line numberDiff line change
@@ -98,3 +98,11 @@ tests/cases/user/prettier/prettier
9898
.eslintcache
9999
.expo
100100
build
101+
102+
# Nuxt dev/build outputs
103+
.output
104+
.data
105+
.nuxt
106+
.nitro
107+
.cache
108+
dist

‎web-modal-sdk/quick-starts/nuxt-modal-quick-start/.gitignore

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Nuxt dev/build outputs
2+
.output
3+
.data
4+
.nuxt
5+
.nitro
6+
.cache
7+
dist
8+
9+
# Node dependencies
10+
node_modules
11+
12+
# Logs
13+
logs
14+
*.log
15+
16+
# Misc
17+
.DS_Store
18+
.fleet
19+
.idea
20+
21+
# Local env files
22+
.env
23+
.env.*
24+
!.env.example

‎web-modal-sdk/quick-starts/nuxt-modal-quick-start/README.md

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
# Web3Auth (`@web3auth/modal`) x EVM x Nuxt
2+
3+
[![Web3Auth](https://img.shields.io/badge/Web3Auth-SDK-blue)](https://web3auth.io/docs/sdk/pnp/web/modal)
4+
[![Web3Auth](https://img.shields.io/badge/Web3Auth-Community-cyan)](https://community.web3auth.io)
5+
6+
[Join our Community Portal](https://community.web3auth.io/) to get support and stay up to date with the latest news and updates.
7+
8+
This example demonstrates how to use Web3Auth with EVM in Nuxt
9+
10+
## How to Use
11+
12+
### Download Manually
13+
14+
```bash
15+
npx degit Web3Auth/web3auth-pnp-examples/web-modal-sdk/quick-starts/nuxt-modal-quick-start w3a-example
16+
```
17+
18+
Install & Run:
19+
20+
```bash
21+
cd w3a-example
22+
npm install
23+
npm run serve
24+
# or
25+
cd w3a-example
26+
yarn
27+
yarn serve
28+
```
29+
30+
## Important Links
31+
32+
- [Website](https://web3auth.io)
33+
- [Docs](https://web3auth.io/docs)
34+
- [Guides](https://web3auth.io/docs/content-hub?type=guides)
35+
- [SDK / API References](https://web3auth.io/docs/sdk)
36+
- [Pricing](https://web3auth.io/pricing.html)
37+
- [Community Portal](https://community.web3auth.io)

‎web-modal-sdk/quick-starts/nuxt-modal-quick-start/app.vue

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<script setup lang="ts">
2+
import Home from "./components/Home.vue";
3+
</script>
4+
<template>
5+
<Home />
6+
</template>

‎web-modal-sdk/quick-starts/nuxt-modal-quick-start/components/Home.vue

+270
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,270 @@
1+
<template>
2+
<div id="app">
3+
<h2>
4+
<a target="_blank" href="https://web3auth.io/docs/sdk/pnp/web/modal" rel="noreferrer"> Web3Auth </a>
5+
Nuxt Quick Start
6+
</h2>
7+
8+
<button v-if="!loggedIn" class="card" @click="login" style="cursor: pointer">Login</button>
9+
10+
<div v-if="loggedIn">
11+
<div class="flex-container">
12+
<div>
13+
<button class="card" @click="getUserInfo" style="cursor: pointer">Get User Info</button>
14+
</div>
15+
<div>
16+
<button class="card" @click="getAccounts" style="cursor: pointer">Get Accounts</button>
17+
</div>
18+
<div>
19+
<button class="card" @click="getBalance" style="cursor: pointer">Get Balance</button>
20+
</div>
21+
<div>
22+
<button class="card" @click="signMessage" style="cursor: pointer">Sign Message</button>
23+
</div>
24+
<div>
25+
<button class="card" @click="logout" style="cursor: pointer">Logout</button>
26+
</div>
27+
</div>
28+
</div>
29+
<div id="console" style="white-space: pre-line">
30+
<p style="white-space: pre-line"></p>
31+
</div>
32+
33+
<footer class="footer">
34+
<a
35+
href="https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-modal-sdk/quick-starts/nuxt-modal-quick-start"
36+
target="_blank"
37+
rel="noopener noreferrer"
38+
>
39+
Source code
40+
</a>
41+
</footer>
42+
</div>
43+
</template>
44+
45+
<script lang="ts">
46+
import { ref, onMounted } from "vue";
47+
// IMP START - Quick Start
48+
import { Web3Auth } from "@web3auth/modal";
49+
import { CHAIN_NAMESPACES } from "@web3auth/base";
50+
import type { IProvider } from "@web3auth/base";
51+
// IMP END - Quick Start
52+
import Web3 from "web3";
53+
54+
export default defineComponent({
55+
name: "Home",
56+
setup() {
57+
// IMP START - SDK Initialization
58+
// IMP START - Dashboard Registration
59+
const clientId = "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ"; // get from https://dashboard.web3auth.io
60+
// IMP END - Dashboard Registration
61+
62+
const chainConfig = {
63+
chainNamespace: CHAIN_NAMESPACES.EIP155,
64+
chainId: "0xaa36a7", // Please use 0x1 for Mainnet, 11155111(0xaa36a7) for Sepolia Testnet
65+
rpcTarget: "https://rpc.ankr.com/eth_sepolia",
66+
displayName: "Sepolia Testnet",
67+
blockExplorer: "https://sepolia.etherscan.io/",
68+
ticker: "ETH",
69+
tickerName: "Ethereum",
70+
};
71+
72+
const web3auth = new Web3Auth({
73+
clientId,
74+
chainConfig,
75+
web3AuthNetwork: "sapphire_mainnet",
76+
});
77+
78+
const loggedIn = ref<boolean>(false);
79+
let provider = <IProvider | null>null;
80+
// IMP END - SDK Initialization
81+
82+
onMounted(async () => {
83+
const init = async () => {
84+
try {
85+
// IMP START - SDK Initialization
86+
await web3auth.initModal();
87+
// IMP END - SDK Initialization
88+
provider = web3auth.provider;
89+
90+
if (web3auth.connected) {
91+
loggedIn.value = true;
92+
}
93+
} catch (error) {
94+
console.error(error);
95+
}
96+
};
97+
98+
init();
99+
});
100+
101+
const login = async () => {
102+
// IMP START - Login
103+
provider = await web3auth.connect();
104+
// IMP END - Login
105+
if (web3auth.connected) {
106+
loggedIn.value = true;
107+
}
108+
};
109+
110+
const getUserInfo = async () => {
111+
// IMP START - Get User Information
112+
const user = await web3auth.getUserInfo();
113+
// IMP END - Get User Information
114+
uiConsole(user);
115+
};
116+
117+
const logout = async () => {
118+
// IMP START - Logout
119+
await web3auth.logout();
120+
// IMP END - Logout
121+
provider = null;
122+
loggedIn.value = false;
123+
uiConsole("logged out");
124+
};
125+
126+
// IMP START - Blockchain Calls
127+
const getAccounts = async () => {
128+
if (!provider) {
129+
uiConsole("provider not initialized yet");
130+
return;
131+
}
132+
const web3 = new Web3(provider as any);
133+
134+
// Get user's Ethereum public address
135+
const address = await web3.eth.getAccounts();
136+
uiConsole(address);
137+
};
138+
139+
const getBalance = async () => {
140+
if (!provider) {
141+
uiConsole("provider not initialized yet");
142+
return;
143+
}
144+
const web3 = new Web3(provider as any);
145+
146+
// Get user's Ethereum public address
147+
const address = (await web3.eth.getAccounts())[0];
148+
149+
// Get user's balance in ether
150+
const balance = web3.utils.fromWei(
151+
await web3.eth.getBalance(address), // Balance is in wei
152+
"ether"
153+
);
154+
uiConsole(balance);
155+
};
156+
157+
const signMessage = async () => {
158+
if (!provider) {
159+
uiConsole("provider not initialized yet");
160+
return;
161+
}
162+
const web3 = new Web3(provider as any);
163+
164+
// Get user's Ethereum public address
165+
const fromAddress = (await web3.eth.getAccounts())[0];
166+
167+
const originalMessage = "YOUR_MESSAGE";
168+
169+
// Sign the message
170+
const signedMessage = await web3.eth.personal.sign(
171+
originalMessage,
172+
fromAddress,
173+
"test password!" // configure your own password here.
174+
);
175+
uiConsole(signedMessage);
176+
};
177+
// IMP END - Blockchain Calls
178+
179+
function uiConsole(...args: any[]): void {
180+
const el = document.querySelector("#console>p");
181+
if (el) {
182+
el.innerHTML = JSON.stringify(args || {}, null, 2);
183+
}
184+
console.log(...args);
185+
}
186+
187+
return {
188+
loggedIn,
189+
provider,
190+
web3auth,
191+
login,
192+
logout,
193+
getUserInfo,
194+
getAccounts,
195+
getBalance,
196+
signMessage,
197+
};
198+
},
199+
});
200+
</script>
201+
202+
<!-- Add "scoped" attribute to limit CSS to this component only -->
203+
<style scoped>
204+
#app {
205+
width: 80%;
206+
margin: auto;
207+
padding: 0 2rem;
208+
}
209+
210+
h3 {
211+
margin: 40px 0 0;
212+
}
213+
214+
ul {
215+
list-style-type: none;
216+
padding: 0;
217+
}
218+
219+
li {
220+
display: inline-block;
221+
margin: 0 10px;
222+
}
223+
224+
a {
225+
color: #42b983;
226+
}
227+
228+
.card {
229+
margin: 0.5rem;
230+
padding: 0.7rem;
231+
text-align: center;
232+
color: #0070f3;
233+
background-color: #fafafa;
234+
text-decoration: none;
235+
border: 1px solid #0070f3;
236+
border-radius: 10px;
237+
transition: color 0.15s ease, border-color 0.15s ease;
238+
width: 100%;
239+
}
240+
241+
.card:hover,
242+
.card:focus,
243+
.card:active {
244+
cursor: pointer;
245+
background-color: #f1f1f1;
246+
}
247+
248+
.flex-container {
249+
display: flex;
250+
flex-flow: row wrap;
251+
}
252+
253+
.flex-container > div {
254+
width: 100px;
255+
margin: 10px;
256+
text-align: center;
257+
line-height: 75px;
258+
font-size: 30px;
259+
}
260+
261+
#console {
262+
width: 100%;
263+
height: 100%;
264+
overflow: auto;
265+
word-wrap: break-word;
266+
font-size: 16px;
267+
font-family: monospace;
268+
text-align: left;
269+
}
270+
</style>

‎web-modal-sdk/quick-starts/nuxt-modal-quick-start/nuxt.config.ts

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
// https://nuxt.com/docs/api/configuration/nuxt-config
2+
3+
import { nodePolyfills } from "vite-plugin-node-polyfills";
4+
5+
export default defineNuxtConfig({
6+
devtools: { enabled: true },
7+
// IMP START - Bundler Issues
8+
ssr: false,
9+
vite: {
10+
plugins: [
11+
nodePolyfills({
12+
globals: {
13+
Buffer: true,
14+
global: true,
15+
},
16+
}),
17+
],
18+
},
19+
// IMP END - Bundler Issues
20+
});

0 commit comments

Comments
 (0)