Skip to content

Commit 8f5d155

Browse files
lnbc1QWFyb24lnbc1QWFyb24
authored
[docs]: Simplify Quickstart (#1095)
* Simplify quickstarts * Add detailed install instructions * Fix typo * Add if statement * Update package links
1 parent 8b84d1c commit 8f5d155

File tree

4 files changed

+144
-314
lines changed

4 files changed

+144
-314
lines changed

‎README.md

Lines changed: 34 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -12,17 +12,20 @@
1212

1313
## Quickstart
1414

15-
Install the core Onboard library and the injected wallets module to support browser extension and mobile wallets:
15+
Install the core Onboard library, the injected wallets module and optionally ethers js to support browser extension and mobile wallets:
1616

17-
`npm i @web3-onboard/core @web3-onboard/injected-wallets`
17+
**NPM**
18+
`npm i @web3-onboard/core @web3-onboard/injected-wallets ethers`
1819

19-
- [@web3-onboard/core Official NPM Documentation](https://www.npmjs.com/package/@web3-onboard/core)
20+
**Yarn**
21+
`yarn add @web3-onboard/core @web3-onboard/injected-wallets ethers`
2022

2123
Then initialize in your app:
2224

2325
```javascript
2426
import Onboard from '@web3-onboard/core'
2527
import injectedModule from '@web3-onboard/injected-wallets'
28+
import { ethers } from 'ethers'
2629

2730
const MAINNET_RPC_URL = 'https://mainnet.infura.io/v3/<INFURA_KEY>'
2831

@@ -37,17 +40,31 @@ const onboard = Onboard({
3740
label: 'Ethereum Mainnet',
3841
rpcUrl: MAINNET_RPC_URL
3942
}
40-
],
41-
appMetadata: {
42-
name: 'My App',
43-
icon: '<SVG_ICON_STRING>',
44-
description: 'My app using Onboard'
45-
}
43+
]
4644
})
4745

4846
const wallets = await onboard.connectWallet()
4947

5048
console.log(wallets)
49+
50+
if (wallets[0]) {
51+
// create an ethers provider with the last connected wallet provider
52+
const ethersProvider = new ethers.providers.Web3Provider(
53+
wallets[0].provider,
54+
'any'
55+
)
56+
57+
const signer = ethersProvider.getSigner()
58+
59+
// send a transaction with the ethers provider
60+
const txn = await signer.sendTransaction({
61+
to: '0x',
62+
value: 100000000000000
63+
})
64+
65+
const receipt = await txn.wait()
66+
console.log(receipt)
67+
}
5168
```
5269

5370
## Documentation
@@ -64,22 +81,23 @@ For full documentation, check out the README.md for each package:
6481

6582
**SDK Wallets**
6683

67-
- [Fortmatic](packages/fortmatic/README.md)
84+
- [Coinbase](packages/coinbase/README.md)
85+
- [WalletConnect](packages/walletconnect/README.md)
6886
- [Gnosis](packages/gnosis/README.md)
69-
- [MEW](packages/mew/README.md)
87+
- [Magic](packages/magic/README.md)
88+
- [Fortmatic](packages/fortmatic/README.md)
7089
- [Portis](packages/portis/README.md)
71-
- [Torus](packages/torus/README.md)
72-
- [WalletConnect](packages/walletconnect/README.md)
73-
- [WalletLink](packages/walletlink/README.md)
74-
- Magic (in active development)
90+
- [MEW](packages/mew/README.md)
91+
- [Web3Auth](packages/web3auth/README.md)
7592

7693
**Hardware Wallets**
7794

78-
- [KeepKey](packages/keepkey/README.md)
7995
- [Ledger](packages/ledger/README.md)
8096
- [Trezor](packages/trezor/README.md)
8197
- [Keystone](packages/keystone/README.md)
98+
- [KeepKey](packages/keepkey/README.md)
8299
- [D'CENT](packages/dcent/README.md)
100+
83101
**Frameworks**
84102

85103
- [React](packages/react/README.md)

‎packages/core/README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ Note:
1717
- MEW wallet currently fails to install on M1 macs
1818
- All wallet modules (except for `injected-wallets`) require extra dependencies and may require polyfilling the node built in modules for the browser. See the [Build Environments](#build-environments) section for more info
1919
- **If using React** you may be interested in checking out the React Hooks package here - https://www.npmjs.com/package/@web3-onboard/react
20+
- **If using Vue** you may be interested in checking out the Vue package here - https://www.npmjs.com/package/@web3-onboard/vue
2021

2122
## Initialization
2223

‎packages/react/README.md

Lines changed: 31 additions & 214 deletions
Original file line numberDiff line numberDiff line change
@@ -2,249 +2,66 @@
22

33
A collection of React hooks for implementing web3-onboard in to a React project
44

5-
## Install
5+
## Quickstart with Injected Wallets and Ethers Provider
66

7-
`npm i @web3-onboard/react`
7+
### Install Modules
88

9-
## Example Usage
9+
**NPM**
10+
`npm i @web3-onboard/react @web3-onboard/injected-wallets ethers`
11+
12+
**Yarn**
13+
`yarn add @web3-onboard/react @web3-onboard/injected-wallets ethers`
14+
15+
### Add Code
1016

1117
```javascript
1218
import React from 'react'
13-
import { ethers } from 'ethers'
14-
import {
15-
init,
16-
useConnectWallet,
17-
useSetChain,
18-
useWallets
19-
} from '@web3-onboard/react'
19+
import { init, useConnectWallet } from '@web3-onboard/react'
2020
import injectedModule from '@web3-onboard/injected-wallets'
21-
import coinbaseModule from '@web3-onboard/coinbase'
22-
import trezorModule from '@web3-onboard/trezor'
23-
import ledgerModule from '@web3-onboard/ledger'
24-
import walletConnectModule from '@web3-onboard/walletconnect'
25-
import portisModule from '@web3-onboard/portis'
26-
import fortmaticModule from '@web3-onboard/fortmatic'
27-
import torusModule from '@web3-onboard/torus'
28-
import keepkeyModule from '@web3-onboard/keepkey'
29-
import dcentModule from '@web3-onboard/dcent'
21+
import { ethers } from 'ethers'
3022

3123
// Sign up to get your free API key at https://explorer.blocknative.com/?signup=true
3224
const dappId = '1730eff0-9d50-4382-a3fe-89f0d34a2070'
3325

3426
const injected = injectedModule()
35-
const coinbase = coinbaseModule()
36-
const walletConnect = walletConnectModule()
3727

38-
const portis = portisModule({
39-
apiKey: 'b2b7586f-2b1e-4c30-a7fb-c2d1533b153b'
40-
})
28+
const infuraKey = '<INFURA_KEY>'
29+
const rpcUrl = `https://mainnet.infura.io/v3/${infuraKey}`
4130

42-
const fortmatic = fortmaticModule({
43-
apiKey: 'pk_test_886ADCAB855632AA'
44-
})
45-
46-
const torus = torusModule()
47-
const ledger = ledgerModule()
48-
const keepkey = keepkeyModule()
49-
50-
const trezorOptions = {
51-
email: 'test@test.com',
52-
appUrl: 'https://www.blocknative.com'
53-
}
54-
55-
const trezor = trezorModule(trezorOptions)
56-
57-
const dcent = dcentModule()
58-
59-
const magic = magicModule({
60-
// Example api key, may need to be updated when max hits reached
61-
// Get one to test with for free from https://magic.link/
62-
apiKey: 'pk_live_02207D744E81C2BA',
63-
userEmail: localStorage.getItem('magicUserEmail')
64-
})
65-
66-
const web3auth = web3authModule({
67-
clientId:
68-
'DJuUOKvmNnlzy6ruVgeWYWIMKLRyYtjYa9Y10VCeJzWZcygDlrYLyXsBQjpJ2hxlBO9dnl8t9GmAC2qOP5vnIGo'
69-
})
70-
71-
const web3Onboard = init({
72-
wallets: [
73-
injected,
74-
coinbase,
75-
ledger,
76-
trezor,
77-
walletConnect,
78-
keepkey,
79-
web3auth,
80-
magic,
81-
portis,
82-
torus,
83-
dcent
84-
],
31+
// initialize Onboard
32+
init({
33+
wallets: [injected],
8534
chains: [
8635
{
8736
id: '0x1',
8837
token: 'ETH',
8938
label: 'Ethereum Mainnet',
90-
rpcUrl: 'https://mainnet.infura.io/v3/ababf9851fd845d0a167825f97eeb12b'
91-
},
92-
{
93-
id: '0x3',
94-
token: 'tROP',
95-
label: 'Ethereum Ropsten Testnet',
96-
rpcUrl: 'https://ropsten.infura.io/v3/ababf9851fd845d0a167825f97eeb12b'
97-
},
98-
{
99-
id: '0x4',
100-
token: 'rETH',
101-
label: 'Ethereum Rinkeby Testnet',
102-
rpcUrl: 'https://rinkeby.infura.io/v3/ababf9851fd845d0a167825f97eeb12b'
103-
},
104-
{
105-
id: '0x89',
106-
token: 'MATIC',
107-
label: 'Matic Mainnet',
108-
rpcUrl: 'https://matic-mainnet.chainstacklabs.com'
109-
}
110-
],
111-
appMetadata: {
112-
name: 'Blocknative',
113-
icon: '<svg><svg/>',
114-
description: 'Demo app for Onboard V2',
115-
recommendedInjectedWallets: [
116-
{ name: 'MetaMask', url: 'https://metamask.io' },
117-
{ name: 'Coinbase', url: 'https://wallet.coinbase.com/' }
118-
]
119-
},
120-
apiKey: 'xxx387fb-bxx1-4xxc-a0x3-9d37e426xxxx'
121-
notify: {
122-
enabled: true,
123-
transactionHandler: transaction => {
124-
console.log({ transaction })
125-
}
126-
},
127-
accountCenter: {
128-
desktop: {
129-
position: 'topRight',
130-
enabled: true,
131-
minimal: true
132-
},
133-
mobile: {
134-
position: 'topRight',
135-
enabled: true,
136-
minimal: true
137-
}
138-
},
139-
apiKey: dappId,
140-
notify: {
141-
enabled: true,
142-
transactionHandler: transaction => {
143-
console.log({ transaction })
144-
if (transaction.eventCode === 'txPool') {
145-
return {
146-
// autoDismiss set to `0` will persist the notification until the user excuses it
147-
autoDismiss: 0,
148-
// message: `Your transaction is pending, click <a href="https://rinkeby.etherscan.io/tx/${transaction.hash}">here</a> for more info.`,
149-
// or you could use onClick for when someone clicks on the notification itself
150-
onClick: () =>
151-
window.open(`https://rinkeby.etherscan.io/tx/${transaction.hash}`)
152-
}
153-
}
39+
rpcUrl
15440
}
155-
}
156-
i18n: {
157-
en: {
158-
connect: {
159-
selectingWallet: {
160-
header: 'custom text header'
161-
}
162-
},
163-
notify: {
164-
transaction: {
165-
txStuck: 'custom text for this notification event'
166-
}
167-
}
168-
},
169-
es: {
170-
transaction: {
171-
txRequest: 'Su transacción está esperando que confirme'
172-
}
173-
}
174-
}
41+
]
17542
})
17643

17744
function App() {
178-
const [{ wallet, connecting }, connect, disconnect, updateBalances, setWalletModules] =
179-
useConnectWallet()
180-
const [{ chains, connectedChain, settingChain }, setChain] = useSetChain()
181-
const [notifications, customNotification, updateNotify] = useNotifications()
182-
const connectedWallets = useWallets()
183-
const updateAccountCenter = useAccountCenter()
184-
const updateLocale = useSetLocale()
185-
186-
let provider
187-
188-
useEffect(() => {
189-
if (!wallet?.provider) {
190-
provider = null
191-
} else {
192-
provider = new ethers.providers.Web3Provider(wallet.provider, 'any')
193-
}
194-
}, [wallet]
45+
const [{ wallet, connecting }, connect, disconnect] = useConnectWallet()
46+
47+
// create an ethers provider
48+
let ethersProvider
49+
50+
if (wallet) {
51+
ethersProvider = new ethers.providers.Web3Provider(wallet.provider, 'any')
52+
}
19553

19654
return (
19755
<div>
198-
<button onClick={() => connect()}>
199-
{connecting ? 'connecting' : 'connect'}
56+
<button
57+
disabled={connecting}
58+
onClick={() => (wallet ? disconnect() : connect())}
59+
>
60+
{connecting ? 'connecting' : wallet ? 'disconnect' : 'connect'}
20061
</button>
201-
{wallet && (
202-
<div>
203-
<label>Switch Chain</label>
204-
{settingChain ? (
205-
<span>Switching chain...</span>
206-
) : (
207-
<select
208-
onChange={({ target: { value } }) =>
209-
console.log('onChange called') || setChain({ chainId: value })
210-
}
211-
value={connectedChain.id}
212-
>
213-
{chains.map(({ id, label }) => {
214-
return <option value={id}>{label}</option>
215-
})}
216-
</select>
217-
)}
218-
<button onClick={() => disconnect(wallet)}>Disconnect Wallet</button>
219-
</div>
220-
<button
221-
className="bn-demo-button"
222-
onClick={() => {
223-
// Default position of AccountCenter it top right
224-
updateAccountCenter({
225-
position: 'bottomLeft',
226-
enabled: true,
227-
minimal: true
228-
})
229-
}}
230-
>
231-
Account Center to Bottom Left
232-
</button>
233-
)}
234-
235-
{connectedWallets.map(({ label, accounts }) => {
236-
return (
237-
<div>
238-
<div>{label}</div>
239-
<div>Accounts: {JSON.stringify(accounts, null, 2)}</div>
240-
</div>
241-
)
242-
})}
24362
</div>
24463
)
24564
}
246-
247-
export default App
24865
```
24966

25067
## `init`

0 commit comments

Comments
 (0)