Skip to content

Commit b9846ab

Browse files
yashovardhanyashovardhan
committed
Add vue composables no modal quick start
1 parent 302f39a commit b9846ab

File tree

15 files changed

+1154
-1570
lines changed

15 files changed

+1154
-1570
lines changed

‎web-no-modal-sdk/quick-starts/vue-no-modal-quick-start/package-lock.json‎

Lines changed: 606 additions & 1199 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎web-no-modal-sdk/quick-starts/vue-no-modal-quick-start/package.json‎

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,21 +9,16 @@
99
},
1010
"//IMP START": "IMP START - Web3Auth Installation",
1111
"dependencies": {
12-
"@babel/plugin-transform-private-methods": "^7.24.7",
13-
"@web3auth/auth-adapter": "^9.7.0",
14-
"@web3auth/base": "^9.7.0",
15-
"@web3auth/default-evm-adapter": "^9.7.0",
16-
"@web3auth/ethereum-provider": "^9.7.0",
12+
"@ethersproject/units": "^5.8.0",
13+
"@tanstack/vue-query": "^5.74.6",
14+
"@wagmi/vue": "^0.1.16",
1715
"@web3auth/no-modal": "^10.0.0-beta.9",
18-
"@web3auth/no-modal-vue-composables": "^9.7.0",
1916
"core-js": "^3.38.0",
20-
"ethers": "^6.13.4",
21-
"viem": "^2.21.45",
22-
"vue": "^3.4.36",
23-
"web3": "^4.15.0"
17+
"vue": "^3.4.36"
2418
},
2519
"//IMP END": "IMP END - Web3Auth Installation",
2620
"devDependencies": {
21+
"@babel/plugin-transform-private-methods": "^7.24.7",
2722
"@typescript-eslint/eslint-plugin": "^5.46.1",
2823
"@typescript-eslint/parser": "^5.46.1",
2924
"@vue/cli-plugin-babel": "~5.0.8",

‎web-no-modal-sdk/quick-starts/vue-no-modal-quick-start/src/App.vue‎

Lines changed: 8 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,21 @@
11
<script setup lang="ts">
22
import Home from "./Home.vue";
33
// IMP START - Setup Web3Auth Provider
4-
import { Web3AuthProvider } from "@web3auth/no-modal-vue-composables"
5-
import web3AuthContextConfig from "./web3authContext";
4+
import { Web3AuthProvider } from "@web3auth/no-modal/vue";
65
// IMP END - Setup Web3Auth Provider
6+
import { WagmiProvider } from "@web3auth/no-modal/vue/wagmi";
7+
import web3AuthContextConfig from "./web3authContext";
8+
79
</script>
810

911
<template>
1012
<div class="min-h-screen flex flex-col">
1113
<!-- IMP START - Setup Web3Auth Provider -->
1214
<Web3AuthProvider :config="web3AuthContextConfig">
13-
<component :is="Home" />
15+
<WagmiProvider>
16+
<Home />
17+
</WagmiProvider>
1418
</Web3AuthProvider>
1519
<!-- IMP END - Setup Web3Auth Provider -->
1620
</div>
17-
</template>
18-
19-
<style>
20-
:root {
21-
--primary-color: #0070f3;
22-
--primary-hover: #0051a8;
23-
--bg-color: #ffffff;
24-
--bg-light: #f9fafb;
25-
--bg-hover: #f1f5f9;
26-
--border-color: #e2e8f0;
27-
--text-color: #1e293b;
28-
--text-muted: #64748b;
29-
--radius: 8px;
30-
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
31-
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
32-
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
33-
}
34-
35-
* {
36-
box-sizing: border-box;
37-
margin: 0;
38-
padding: 0;
39-
}
40-
41-
body {
42-
font-family: var(--font-sans);
43-
color: var(--text-color);
44-
background-color: var(--bg-color);
45-
line-height: 1.6;
46-
}
47-
48-
#app {
49-
-webkit-font-smoothing: antialiased;
50-
-moz-osx-font-smoothing: grayscale;
51-
}
52-
</style>
21+
</template>

‎web-no-modal-sdk/quick-starts/vue-no-modal-quick-start/src/Home.vue‎

Lines changed: 46 additions & 229 deletions
Original file line numberDiff line numberDiff line change
@@ -9,44 +9,36 @@
99
Vue Composables No Modal Quick Start
1010
</h2>
1111

12-
<button v-if="status !== ADAPTER_STATUS.CONNECTED" class="card" @click="login">
13-
Login
14-
</button>
12+
<div v-if="!isConnected" class="card-container">
13+
<button class="card" @click="connect(WALLET_CONNECTORS.AUTH, { authConnection: AUTH_CONNECTION.GOOGLE })">
14+
Login
15+
</button>
16+
<div v-if="connectLoading" class="loading">Connecting...</div>
17+
<div v-if="connectError" class="error">{{ connectError.message }}</div>
18+
</div>
1519

16-
<div v-if="status === ADAPTER_STATUS.CONNECTED" class="flex-col">
20+
<div v-if="isConnected" class="flex-col">
21+
<h2>Connected to {{ connectorName }}</h2>
1722
<div class="grid" style="grid-template-columns: repeat(auto-fill, minmax(150px, 1fr))">
1823
<div>
19-
<button class="card" @click="getUserInfo">
24+
<button class="card" @click="uiConsole(userInfo)">
2025
Get User Info
2126
</button>
2227
</div>
2328
<div>
24-
<button class="card" @click="getAccounts">
25-
Get Accounts
26-
</button>
27-
</div>
28-
<div>
29-
<button class="card" @click="getBalance">
30-
Get Balance
31-
</button>
32-
</div>
33-
<div>
34-
<button class="card" @click="signMessage">
35-
Sign Message
36-
</button>
37-
</div>
38-
<div>
39-
<button class="card" @click="sendTransaction">
40-
Send Transaction
41-
</button>
42-
</div>
43-
<div>
44-
<button class="card" @click="logout()">
45-
Logout
29+
<button class="card" @click="disconnect()">
30+
Log Out
4631
</button>
32+
<div v-if="disconnectLoading" class="loading">Disconnecting...</div>
33+
<div v-if="disconnectError" class="error">{{ disconnectError.message }}</div>
4734
</div>
4835
</div>
4936
</div>
37+
<Account v-if="isConnected" />
38+
<SendTransaction v-if="isConnected" />
39+
<Balance v-if="isConnected" />
40+
<SwitchNetwork v-if="isConnected" />
41+
5042
<div id="console">
5143
<p></p>
5244
</div>
@@ -56,216 +48,41 @@
5648
target="_blank" rel="noopener noreferrer">
5749
Source code
5850
</a>
59-
<a
60-
href="https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FWeb3Auth%2Fweb3auth-pnp-examples%2Ftree%2Fmain%2Fweb-no-modal-sdk%2Fquick-starts%2Fvue-composables-no-modal-quick-start&project-name=w3a-vue-modal&repository-name=w3a-vue-modal">
61-
<img src="https://vercel.com/button" alt="Deploy with Vercel" />
62-
</a>
6351
</footer>
6452
</main>
6553
</div>
6654
</template>
6755

6856
<script setup lang="ts">
69-
import { useWeb3Auth } from "@web3auth/no-modal-vue-composables";
70-
import { ADAPTER_STATUS, WALLET_ADAPTERS } from "@web3auth/base";
71-
const { status, connectTo, userInfo, provider, logout } = useWeb3Auth();
72-
73-
const login = async () => {
74-
// IMP START - Login
75-
await connectTo(WALLET_ADAPTERS.AUTH, {
76-
loginProvider: "google",
77-
});
78-
// IMP END - Login
79-
};
80-
81-
const getUserInfo = async () => {
82-
// IMP START - Get User Information
83-
uiConsole(userInfo.value);
84-
// IMP END - Get User Information
85-
};
86-
87-
// IMP START - Blockchain Calls
88-
const getAccounts = async () => {
89-
if (!provider) {
90-
uiConsole("provider not initialized yet");
91-
return;
92-
}
93-
const address = await RPC.getAccounts(provider.value!);
94-
uiConsole(address);
95-
};
96-
97-
const getBalance = async () => {
98-
if (!provider) {
99-
uiConsole("provider not initialized yet");
100-
return;
101-
}
102-
const balance = await RPC.getBalance(provider.value!);
103-
uiConsole(balance);
104-
};
105-
106-
const signMessage = async () => {
107-
if (!provider) {
108-
uiConsole("provider not initialized yet");
109-
return;
110-
}
111-
const signedMessage = await RPC.signMessage(provider.value!);
112-
uiConsole(signedMessage);
113-
};
114-
115-
116-
const sendTransaction = async () => {
117-
if (!provider) {
118-
uiConsole("provider not initialized yet");
119-
return;
120-
}
121-
uiConsole("Sending Transaction...");
122-
const transactionReceipt = await RPC.sendTransaction(provider.value!);
123-
uiConsole(transactionReceipt);
124-
};
125-
// IMP END - Blockchain Calls
126-
127-
function uiConsole(...args: any[]): void {
57+
import { useWeb3AuthConnect, useWeb3AuthDisconnect, useWeb3AuthUser } from "@web3auth/no-modal/vue";
58+
import { WALLET_CONNECTORS, AUTH_CONNECTION } from "@web3auth/no-modal";
59+
import Account from './components/Account.vue';
60+
import SendTransaction from './components/SendTransaction.vue';
61+
import Balance from './components/Balance.vue';
62+
import SwitchNetwork from './components/SwitchNetwork.vue';
63+
// Web3Auth hooks (direct from library)
64+
const {
65+
connect,
66+
isConnected,
67+
connectorName,
68+
loading: connectLoading,
69+
error: connectError
70+
} = useWeb3AuthConnect();
71+
72+
const {
73+
disconnect,
74+
loading: disconnectLoading,
75+
error: disconnectError
76+
} = useWeb3AuthDisconnect();
77+
78+
const { userInfo } = useWeb3AuthUser();
79+
80+
// Helper function for logging
81+
const uiConsole = (...args: any[]): void => {
12882
const el = document.querySelector("#console>p");
12983
if (el) {
13084
el.innerHTML = JSON.stringify(args || {}, null, 2);
85+
console.log(...args);
13186
}
132-
console.log(...args);
133-
}
87+
};
13488
</script>
135-
136-
<style scoped>
137-
/* Container layout */
138-
.container {
139-
width: 100%;
140-
padding: 0 1rem;
141-
margin: 0 auto;
142-
}
143-
144-
.main {
145-
min-height: 100vh;
146-
padding: 2rem 0;
147-
display: flex;
148-
flex-direction: column;
149-
align-items: center;
150-
}
151-
152-
/* Typography */
153-
.title {
154-
font-size: 1.75rem;
155-
text-align: center;
156-
margin: 1.5rem 0;
157-
line-height: 1.2;
158-
font-weight: 600;
159-
}
160-
161-
.title a {
162-
color: var(--primary-color);
163-
text-decoration: none;
164-
}
165-
166-
/* Buttons and Cards */
167-
button, .card {
168-
display: inline-flex;
169-
align-items: center;
170-
justify-content: center;
171-
padding: 0.75rem 1.25rem;
172-
background-color: var(--bg-light);
173-
border: 1px solid var(--border-color);
174-
border-radius: var(--radius);
175-
color: var(--text-color);
176-
font-weight: 500;
177-
font-size: 0.875rem;
178-
cursor: pointer;
179-
transition: all 0.2s ease;
180-
box-shadow: var(--shadow-sm);
181-
width: 100%;
182-
margin: 0.5rem 0;
183-
text-align: center;
184-
}
185-
186-
button:hover, .card:hover {
187-
background-color: var(--bg-hover);
188-
box-shadow: var(--shadow-md);
189-
transform: translateY(-1px);
190-
}
191-
192-
/* Utils */
193-
.flex-row {
194-
display: flex;
195-
flex-wrap: wrap;
196-
gap: 0.75rem;
197-
width: 100%;
198-
}
199-
200-
.flex-col {
201-
display: flex;
202-
flex-direction: column;
203-
gap: 0.75rem;
204-
width: 100%;
205-
}
206-
207-
.grid {
208-
display: grid;
209-
gap: 1rem;
210-
width: 100%;
211-
}
212-
213-
/* Console output */
214-
#console {
215-
width: 100%;
216-
max-height: 250px;
217-
overflow: auto;
218-
word-wrap: break-word;
219-
font-family: monospace;
220-
font-size: 0.85rem;
221-
padding: 1rem;
222-
margin: 1.5rem 0;
223-
background-color: var(--bg-light);
224-
border-radius: var(--radius);
225-
border: 1px solid var(--border-color);
226-
text-align: left;
227-
}
228-
229-
/* Footer */
230-
.footer {
231-
width: 100%;
232-
padding: 2rem 0;
233-
border-top: 1px solid var(--border-color);
234-
display: flex;
235-
justify-content: center;
236-
align-items: center;
237-
gap: 1.5rem;
238-
margin-top: 3rem;
239-
flex-wrap: wrap;
240-
}
241-
242-
.footer a {
243-
color: var(--text-muted);
244-
text-decoration: none;
245-
font-size: 0.875rem;
246-
transition: color 0.2s ease;
247-
}
248-
249-
.footer a:hover {
250-
color: var(--primary-color);
251-
}
252-
253-
/* Responsive */
254-
@media (min-width: 640px) {
255-
.container {
256-
max-width: 640px;
257-
}
258-
}
259-
260-
@media (min-width: 768px) {
261-
.container {
262-
max-width: 768px;
263-
}
264-
}
265-
266-
@media (min-width: 1024px) {
267-
.container {
268-
max-width: 1024px;
269-
}
270-
}
271-
</style>

0 commit comments

Comments
 (0)