Skip to content

Commit 1988748

Browse files
wonderbeelRazAdamj1232
authored
Feature: Add vue package (#1002)
* feat: @web3-onboard/vue package * chore: fix example code * style: move types in a dedicated file * feat: add link to the vue package in the main readme * Update README.md * feat: updated vue code and documentation * chore: update version * chore: update package version Co-authored-by: Raz <me@raz.works> Co-authored-by: Adam Carpenter <adamcarpenter86@gmail.com>
1 parent 7066f29 commit 1988748

File tree

7 files changed

+756
-1
lines changed

7 files changed

+756
-1
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,7 @@ For full documentation, check out the README.md for each package:
8181
**Frameworks**
8282

8383
- [React](packages/react/README.md)
84+
- [Vue](packages/vue/README.md)
8485

8586
## Test out the demo app
8687

‎packages/vue/README.md

Lines changed: 364 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,364 @@
1+
# @web3-onboard/vue
2+
3+
A collection of composable functions for implementing web3-onboard in to a Vue project; compatible both with Vue 2 + composition-api and Vue 3
4+
5+
## Install
6+
7+
`npm i @web3-onboard/vue`
8+
9+
## Functions
10+
11+
## `init`
12+
13+
The `init` function initializes `web3-onboard` and makes it available to the `useOnboard()` composable. For references check out the [initialization docs for `@web3-onboard/core`](../core/README.md#initialization)
14+
15+
16+
### Example usage
17+
```typescript
18+
import { init } from '@web3-onboard/vue'
19+
import injectedModule from '@web3-onboard/injected-wallets'
20+
import trezorModule from '@web3-onboard/trezor'
21+
import ledgerModule from '@web3-onboard/ledger'
22+
import walletConnectModule from '@web3-onboard/walletconnect'
23+
import walletLinkModule from '@web3-onboard/walletlink'
24+
import portisModule from '@web3-onboard/portis'
25+
import fortmaticModule from '@web3-onboard/fortmatic'
26+
import torusModule from '@web3-onboard/torus'
27+
import keepkeyModule from '@web3-onboard/keepkey'
28+
29+
const injected = injectedModule()
30+
const walletLink = walletLinkModule()
31+
const walletConnect = walletConnectModule()
32+
33+
const portis = portisModule({
34+
apiKey: 'b2b7586f-2b1e-4c30-a7fb-c2d1533b153b'
35+
})
36+
37+
const fortmatic = fortmaticModule({
38+
apiKey: 'pk_test_886ADCAB855632AA'
39+
})
40+
41+
const torus = torusModule()
42+
const ledger = ledgerModule()
43+
const keepkey = keepkeyModule()
44+
45+
const trezorOptions = {
46+
email: 'test@test.com',
47+
appUrl: 'https://www.blocknative.com'
48+
}
49+
50+
const trezor = trezorModule(trezorOptions)
51+
52+
const web3Onboard = init({
53+
wallets: [
54+
ledger,
55+
trezor,
56+
walletConnect,
57+
keepkey,
58+
walletLink,
59+
injected,
60+
fortmatic,
61+
portis,
62+
torus
63+
],
64+
chains: [
65+
{
66+
id: '0x1',
67+
token: 'ETH',
68+
label: 'Ethereum Mainnet',
69+
rpcUrl: 'https://mainnet.infura.io/v3/ababf9851fd845d0a167825f97eeb12b'
70+
},
71+
{
72+
id: '0x3',
73+
token: 'tROP',
74+
label: 'Ethereum Ropsten Testnet',
75+
rpcUrl: 'https://ropsten.infura.io/v3/ababf9851fd845d0a167825f97eeb12b'
76+
},
77+
{
78+
id: '0x4',
79+
token: 'rETH',
80+
label: 'Ethereum Rinkeby Testnet',
81+
rpcUrl: 'https://rinkeby.infura.io/v3/ababf9851fd845d0a167825f97eeb12b'
82+
},
83+
{
84+
id: '0x89',
85+
token: 'MATIC',
86+
label: 'Matic Mainnet',
87+
rpcUrl: 'https://matic-mainnet.chainstacklabs.com'
88+
}
89+
],
90+
appMetadata: {
91+
name: 'Blocknative',
92+
icon: '<svg><svg/>',
93+
description: 'Demo app for Onboard V2',
94+
recommendedInjectedWallets: [
95+
{ name: 'MetaMask', url: 'https://metamask.io' },
96+
{ name: 'Coinbase', url: 'https://wallet.coinbase.com/' }
97+
]
98+
}
99+
})
100+
```
101+
102+
## `useOnboard`
103+
104+
`useOnboard` must be used after the `init` function has been called - it will return an object that can be destructured to obtain the following reactive variables and functions:
105+
106+
### Example usage
107+
```typescript
108+
import { useOnboard } from '@web3-onboard/vue'
109+
// Use the composable
110+
const onboard = useOnboard()
111+
// Or destructure it
112+
const { wallets, connectWallet, disconnectConnectedWallet, connectedWallet } = useOnboard()
113+
// do stuff
114+
```
115+
116+
### `connectWallet`
117+
Function to open the onboard modal and connect to a wallet provider. For reference check out the [connecting a wallet for `@web3-onboard/core`](../core/README.md#connecting-a-wallet)
118+
119+
### Example usage
120+
```vue
121+
<script>
122+
import { useOnboard } from '@web3-onboard/vue'
123+
export default {
124+
setup() {
125+
const { connectWallet } = useOnboard()
126+
const connect = async () => connectWallet()
127+
return { connect }
128+
}
129+
}
130+
</script>
131+
132+
<template>
133+
<button type="button" @click="connect">
134+
Connect to a Wallet
135+
</button>
136+
</template>
137+
```
138+
139+
### `connectedChain`
140+
Computed property that contains the current chain to which `connectedWallet` is connected
141+
142+
### Example usage
143+
```vue
144+
<script>
145+
import { useOnboard } from '@web3-onboard/vue'
146+
export default {
147+
setup() {
148+
const { connectedChain } = useOnboard()
149+
return { connectedChain }
150+
}
151+
}
152+
</script>
153+
154+
<template>
155+
<span>Connected Chain: {{connectedChain.id}}</span>
156+
</template>
157+
```
158+
159+
### `connectedWallet`
160+
Computed property that contains the latest connected wallet
161+
162+
### Example usage
163+
```vue
164+
<script>
165+
import { useOnboard } from '@web3-onboard/vue'
166+
export default {
167+
setup() {
168+
const { connectedWallet } = useOnboard()
169+
return { connectedWallet }
170+
}
171+
}
172+
</script>
173+
174+
<template>
175+
<span>Connected Wallet: {{connectedWallet.label}}</span>
176+
</template>
177+
```
178+
179+
### `connectingWallet`
180+
Readonly boolean ref that tracks the state of the wallet connection status
181+
182+
### Example usage
183+
```vue
184+
<script>
185+
import { useOnboard } from '@web3-onboard/vue'
186+
export default {
187+
setup() {
188+
const { connectingWallet } = useOnboard()
189+
return { connectingWallet }
190+
}
191+
}
192+
</script>
193+
194+
<template>
195+
<span v-if="connectingWallet">Connecting...</span>
196+
</template>
197+
```
198+
199+
### `disconnectWallet`
200+
Function to disconnect a specific wallet
201+
202+
### Example usage
203+
```vue
204+
<script>
205+
import { useOnboard } from '@web3-onboard/vue'
206+
export default {
207+
setup() {
208+
const { disconnectWallet } = useOnboard()
209+
const disconnect = async () => disconnectWallet('MetaMask')
210+
return { disconnect }
211+
}
212+
}
213+
</script>
214+
215+
<template>
216+
<button type="button" @click="disconnect">
217+
Disconnect MetaMask
218+
</button>
219+
</template>
220+
```
221+
222+
### `disconnectConnectedWallet`
223+
Function to disconnect the `connectedWallet`
224+
225+
### Example usage
226+
```vue
227+
<script>
228+
import { useOnboard } from '@web3-onboard/vue'
229+
export default {
230+
setup() {
231+
const { disconnectConnectedWallet } = useOnboard()
232+
return { disconnectConnectedWallet }
233+
}
234+
}
235+
</script>
236+
237+
<template>
238+
<button type="button" @click="disconnectConnectedWallet">
239+
Disconnect connectedWallet
240+
</button>
241+
</template>
242+
```
243+
244+
### `getChain`
245+
Function that returns the current chain a wallet is connected to
246+
247+
### Example usage
248+
```vue
249+
<script>
250+
import { useOnboard } from '@web3-onboard/vue'
251+
export default {
252+
setup() {
253+
const { getChain } = useOnboard()
254+
return { getChain }
255+
}
256+
}
257+
</script>
258+
259+
<template>
260+
<span>MetaMask is connected to: {{getChain('MetaMask')}}</span>
261+
</template>
262+
```
263+
264+
### `setChain`
265+
Function to set the chain of a wallet
266+
267+
### Example usage
268+
```vue
269+
<script>
270+
import { useOnboard } from '@web3-onboard/vue'
271+
export default {
272+
setup() {
273+
const { setChain } = useOnboard()
274+
const set = () => setChain({ wallet: 'MetaMask', chainId: '0x1' })
275+
return { set }
276+
}
277+
}
278+
</script>
279+
280+
<template>
281+
<button type="button" @click="set">
282+
Set MetaMask chain to mainnet
283+
</button>
284+
</template>
285+
```
286+
287+
### `settingChain`
288+
Readonly boolean ref that tracks the status of setting the chain
289+
290+
### Example usage
291+
```vue
292+
<script>
293+
import { useOnboard } from '@web3-onboard/vue'
294+
export default {
295+
setup() {
296+
const { settingChain } = useOnboard()
297+
return { settingChain }
298+
}
299+
}
300+
</script>
301+
302+
<template>
303+
<span v-if="settingChain">Setting chain...</span>
304+
</template>
305+
```
306+
307+
### `wallets`
308+
Readonly ref that contains every wallet that has been connected
309+
310+
### Example usage
311+
```vue
312+
<script>
313+
import { useOnboard } from '@web3-onboard/vue'
314+
export default {
315+
setup() {
316+
const { wallets } = useOnboard()
317+
return { wallets }
318+
}
319+
}
320+
```
321+
322+
### `alreadyConnectedWallets`
323+
Readonly ref that contains every wallet that user connected to in the past; useful to reconnect wallets automatically after a reload
324+
325+
### Example usage
326+
```
327+
vue
328+
<script>
329+
import { useOnboard } from '@web3-onboard/vue'
330+
export default {
331+
setup() {
332+
const { alreadyConnectedWallets } = useOnboard()
333+
return { alreadyConnectedWallets }
334+
}
335+
}
336+
</script>
337+
338+
<template>
339+
<div v-for="wallet in wallets">
340+
<span>Label: {{wallet.label}}</span>
341+
</div>
342+
</template>
343+
```
344+
345+
### `lastConnectedTimestamp`
346+
Readonly ref that contains the last time that the user connected a wallet in milliseconds
347+
348+
### Example usage
349+
```
350+
vue
351+
<script>
352+
import { useOnboard } from '@web3-onboard/vue'
353+
export default {
354+
setup() {
355+
const { lastConnectedTimestamp } = useOnboard()
356+
return { lastConnectedTimestamp }
357+
}
358+
}
359+
</script>
360+
361+
<template>
362+
<span>Your last connection timestamp was: {{ lastConnectedTimestamp }}</span>
363+
</template>
364+
```

0 commit comments

Comments
 (0)