Skip to content

Commit d9ee5ee

Browse files
lnbc1QWFyb24lnbc1QWFyb24
authored
Merge pull request #1212 from blocknative/release/2.7.0
Release 2.7.0
2 parents d453081 + a599d05 commit d9ee5ee

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

80 files changed

+7608
-268
lines changed

‎README.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
# Web3-Onboard
2+
23
**easy way to connect users to dapps**
34

45
## Features
@@ -68,6 +69,10 @@ if (wallets[0]) {
6869
}
6970
```
7071

72+
**Onboard v1 migration guide**
73+
74+
If you're coming from v1, we've created a [migration guide for you](https://docs.blocknative.com/onboard/migration-guide).
75+
7176
## Documentation
7277

7378
For full documentation, check out the README.md for each package:

‎examples/with-ledger/.eslintrc.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"extends": "next/core-web-vitals"
3+
}

‎examples/with-ledger/.gitignore

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# next.js
12+
/.next/
13+
/out/
14+
15+
# production
16+
/build
17+
18+
# misc
19+
.DS_Store
20+
*.pem
21+
22+
# debug
23+
npm-debug.log*
24+
yarn-debug.log*
25+
yarn-error.log*
26+
.pnpm-debug.log*
27+
28+
# local env files
29+
.env*.local
30+
31+
# vercel
32+
.vercel

‎examples/with-ledger/README.md

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
This is a sample [Web3Onboard](https://github.com/blocknative/web3-onboard) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) showing how to integrate the Ledger wallet into your web3 dApp.
2+
3+
## Getting Started
4+
5+
Clone this repo
6+
7+
```
8+
https://github.com/blocknative/web3-onboard.git
9+
```
10+
11+
Navigate to the project directory:
12+
13+
```
14+
cd examples
15+
```
16+
17+
Install the dependencies:
18+
19+
```
20+
yarn
21+
```
22+
23+
Run the development server:
24+
25+
```bash
26+
npm run dev
27+
# or
28+
yarn dev
29+
```
30+
31+
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
32+
33+
## Learn More
34+
35+
To learn more about how you can use web3Onboard to integrate Ledger and other popular web3 wallets into your dApps, take a look at our documentation: [Web3Onboard Documentation](https://docs.blocknative.com/onboard) for more details.

‎examples/with-ledger/next.config.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
/** @type {import('next').NextConfig} */
2+
const nextConfig = {
3+
reactStrictMode: true,
4+
swcMinify: true,
5+
}
6+
7+
module.exports = nextConfig

‎examples/with-ledger/package.json

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"name": "with-ledger",
3+
"version": "0.1.0",
4+
"private": true,
5+
"scripts": {
6+
"dev": "next dev",
7+
"build": "next build",
8+
"start": "next start",
9+
"lint": "next lint"
10+
},
11+
"dependencies": {
12+
"@web3-onboard/ledger": "^2.1.6",
13+
"@web3-onboard/react": "^2.2.4",
14+
"next": "12.2.3",
15+
"react": "18.2.0",
16+
"react-dom": "18.2.0"
17+
},
18+
"devDependencies": {
19+
"eslint": "8.20.0",
20+
"eslint-config-next": "12.2.3"
21+
}
22+
}

‎examples/with-ledger/pages/_app.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import '../styles/globals.css'
2+
3+
function MyApp({ Component, pageProps }) {
4+
return <Component {...pageProps} />
5+
}
6+
7+
export default MyApp

‎examples/with-ledger/pages/api/hello.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
2+
3+
export default function handler(req, res) {
4+
res.status(200).json({ name: 'John Doe' })
5+
}

‎examples/with-ledger/pages/index.js

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
import Head from 'next/head'
2+
import { init, useConnectWallet } from '@web3-onboard/react'
3+
import ledgerModule from '@web3-onboard/ledger'
4+
import styles from '../styles/Home.module.css'
5+
6+
const buttonStyles = {
7+
borderRadius: '6px',
8+
background: '#111827',
9+
border: 'none',
10+
fontSize: '18px',
11+
fontWeight: '600',
12+
cursor: 'pointer',
13+
color: 'white',
14+
padding: '14px 12px',
15+
marginTop: '40px',
16+
fontFamily: 'inherit'
17+
}
18+
19+
20+
const INFURA__KEY = 'cf540cb0b3b643d399e59aef4f5ac179'
21+
const ledger = ledgerModule()
22+
23+
// initialize Onboard
24+
init({
25+
wallets: [ledger],
26+
chains: [
27+
{
28+
id: '0x1',
29+
token: 'ETH',
30+
label: 'Ethereum',
31+
rpcUrl: `https://mainnet.infura.io/v3/${INFURA__KEY}`
32+
},
33+
{
34+
id: '0x3',
35+
token: 'tROP',
36+
label: 'Ropsten',
37+
rpcUrl: `https://ropsten.infura.io/v3/${INFURA__KEY}`
38+
},
39+
{
40+
id: '0x4',
41+
token: 'rETH',
42+
label: 'Rinkeby',
43+
rpcUrl: `https://rinkeby.infura.io/v3/${INFURA__KEY}`
44+
},
45+
{
46+
id: '0x38',
47+
token: 'BNB',
48+
label: 'Binance',
49+
rpcUrl: 'https://bsc-dataseed.binance.org/'
50+
},
51+
{
52+
id: '0x89',
53+
token: 'MATIC',
54+
label: 'Polygon',
55+
rpcUrl: 'https://matic-mainnet.chainstacklabs.com'
56+
},
57+
{
58+
id: '0xfa',
59+
token: 'FTM',
60+
label: 'Fantom',
61+
rpcUrl: 'https://rpc.ftm.tools/'
62+
}
63+
],
64+
appMetadata: {
65+
name: "Web3-Onboard Demo",
66+
icon: '<svg>My App Icon</svg>',
67+
description: "A demo of Web3-Onboard with Ledger."
68+
},
69+
accountCenter: {
70+
desktop: {
71+
position: 'topRight',
72+
enabled: true,
73+
minimal: false
74+
}
75+
}
76+
})
77+
78+
79+
80+
export default function Home() {
81+
const [{ wallet, connecting }, connect, disconnect] = useConnectWallet()
82+
83+
return (
84+
<div className={styles.container}>
85+
<Head>
86+
<title>Web3-Onboard + Ledger Demo</title>
87+
<meta
88+
name="description"
89+
content="Web3-Onboard Example with Ledger Hardware Wallet"
90+
/>
91+
<link rel="icon" href="/favicon.ico" />
92+
</Head>
93+
94+
<main className={styles.main}>
95+
<h1 className={styles.title}>
96+
Welcome to a demo of
97+
<a href="https://github.com/blocknative/web3-onboard">
98+
{' '}
99+
Web3-Onboard + Ledger
100+
</a>
101+
!
102+
</h1>
103+
<button
104+
style={buttonStyles}
105+
disabled={connecting}
106+
onClick={() => (wallet ? disconnect(wallet) : connect())}
107+
>
108+
{connecting ? 'connecting' : wallet ? 'disconnect' : 'connect'}
109+
</button>
110+
</main>
111+
</div>
112+
)
113+
}

‎examples/with-ledger/styles/Home.module.css

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
.container {
2+
padding: 0 2rem;
3+
}
4+
5+
.main {
6+
min-height: 100vh;
7+
padding: 4rem 0;
8+
flex: 1;
9+
display: flex;
10+
flex-direction: column;
11+
justify-content: center;
12+
align-items: center;
13+
}
14+
15+
.footer {
16+
display: flex;
17+
flex: 1;
18+
padding: 2rem 0;
19+
border-top: 1px solid #eaeaea;
20+
justify-content: center;
21+
align-items: center;
22+
}
23+
24+
.footer a {
25+
display: flex;
26+
justify-content: center;
27+
align-items: center;
28+
flex-grow: 1;
29+
}
30+
31+
.title a {
32+
color: #0070f3;
33+
text-decoration: none;
34+
}
35+
36+
.title a:hover,
37+
.title a:focus,
38+
.title a:active {
39+
text-decoration: underline;
40+
}
41+
42+
.title {
43+
margin: 0;
44+
line-height: 1.15;
45+
font-size: 4rem;
46+
}
47+
48+
.title,
49+
.description {
50+
text-align: center;
51+
}
52+
53+
.description {
54+
margin: 4rem 0;
55+
line-height: 1.5;
56+
font-size: 1.5rem;
57+
}
58+
59+
.code {
60+
background: #fafafa;
61+
border-radius: 5px;
62+
padding: 0.75rem;
63+
font-size: 1.1rem;
64+
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
65+
Bitstream Vera Sans Mono, Courier New, monospace;
66+
}
67+
68+
.grid {
69+
display: flex;
70+
align-items: center;
71+
justify-content: center;
72+
flex-wrap: wrap;
73+
max-width: 800px;
74+
}
75+
76+
.card {
77+
margin: 1rem;
78+
padding: 1.5rem;
79+
text-align: left;
80+
color: inherit;
81+
text-decoration: none;
82+
border: 1px solid #eaeaea;
83+
border-radius: 10px;
84+
transition: color 0.15s ease, border-color 0.15s ease;
85+
max-width: 300px;
86+
}
87+
88+
.card:hover,
89+
.card:focus,
90+
.card:active {
91+
color: #0070f3;
92+
border-color: #0070f3;
93+
}
94+
95+
.card h2 {
96+
margin: 0 0 1rem 0;
97+
font-size: 1.5rem;
98+
}
99+
100+
.card p {
101+
margin: 0;
102+
font-size: 1.25rem;
103+
line-height: 1.5;
104+
}
105+
106+
.logo {
107+
height: 1em;
108+
margin-left: 0.5rem;
109+
}
110+
111+
@media (max-width: 600px) {
112+
.grid {
113+
width: 100%;
114+
flex-direction: column;
115+
}
116+
}
117+
118+
@media (prefers-color-scheme: dark) {
119+
.card,
120+
.footer {
121+
border-color: #222;
122+
}
123+
.code {
124+
background: #111;
125+
}
126+
.logo img {
127+
filter: invert(1);
128+
}
129+
}

0 commit comments

Comments
 (0)