Skip to content

Commit 92b7911

Browse files
Adamj1232Adamj1232
authored
Docs Release - Transaction Preview docs, Expanded build env documentation, Connect wallet btn and latest W3O packages (#1417)
* Update mewwallet path (#1387) * Update mew-wallet name * Feature - Add docs for Transaction Preview (#1395) * Add docs for TransactionPreview * Rename file with hyphen * Add linking to api key info * Add wallet connect btn to navbar of Docs (#1396) * Working with the exception of a few wallets * Checking uauth issue * Updated uauath wallet usage but still needs joi fix * Committing with a couple of issues * Connect example with icon * Add o2 service for consistency when wallet is connected * Refactor to simplify * Add gas to optimizeDeps arr * Add ga package back into deps * Update versions to latest * Everything working except torus * All packages working, sveltekit config updated, w3o packages updated * Add more build infor for create react app projects * Add falsback to webpack config * Add build env links to wallet modules and build env info to module docs * Add build info to TP docs * reorder onboard wallet mods
1 parent 037fe2d commit 92b7911

33 files changed

+6418
-288
lines changed

‎docs/package.json‎

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@
4343
"prettier-plugin-svelte": "^2.7.0",
4444
"react": "^18.2.0",
4545
"react-dom": "^18.2.0",
46+
"rollup-plugin-polyfill-node": "^0.11.0",
4647
"shiki": "^0.10.1",
4748
"svelte": "^3.44.0",
4849
"svelte-check": "^2.7.1",
@@ -53,11 +54,28 @@
5354
},
5455
"type": "module",
5556
"dependencies": {
56-
"@web3-onboard/core": "^2.8.4",
57+
"@web3-onboard/coinbase": "^2.1.4",
58+
"@web3-onboard/core": "^2.11.1-alpha.1",
59+
"@web3-onboard/dcent": "^2.2.2",
60+
"@web3-onboard/enkrypt": "^2.0.0",
61+
"@web3-onboard/fortmatic": "^2.0.14",
5762
"@web3-onboard/gas": "^2.1.4",
58-
"@web3-onboard/injected-wallets": "^2.2.3",
63+
"@web3-onboard/gnosis": "^2.1.5",
64+
"@web3-onboard/injected-wallets": "^2.4.0",
65+
"@web3-onboard/keepkey": "^2.3.2",
66+
"@web3-onboard/keystone": "^2.3.2",
67+
"@web3-onboard/ledger": "^2.3.2",
68+
"@web3-onboard/magic": "^2.1.3",
69+
"@web3-onboard/mew-wallet": "^2.0.0",
70+
"@web3-onboard/portis": "^2.1.3",
71+
"@web3-onboard/sequence": "^2.0.4",
72+
"@web3-onboard/tallyho": "^2.0.1",
73+
"@web3-onboard/torus": "^2.2.0-alpha.1",
74+
"@web3-onboard/trezor": "^2.3.2",
75+
"@web3-onboard/uauth": "^2.0.1-alpha.1",
76+
"@web3-onboard/web3auth": "^2.1.4-alpha.1",
77+
"@web3-onboard/walletconnect": "^2.2.1",
5978
"animejs": "^3.2.1",
60-
"ethers": "^5.7.0",
61-
"rollup-plugin-polyfill-node": "^0.10.2"
79+
"ethers": "^5.7.0"
6280
}
6381
}

‎docs/src/lib/components/ConnectWalletButton.svelte‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<script lang="ts">
2+
import { onMount } from 'svelte'
3+
import type { OnboardAPI, WalletState } from '@web3-onboard/core'
4+
import getOnboard from '$lib/services/onboard.js'
5+
let onboard: OnboardAPI
6+
let connectedWallets: WalletState[]
7+
let buttonText = 'Connect'
8+
9+
async function connectWallet() {
10+
if (onboard && onboard.state.get().wallets.length) {
11+
onboard.disconnectWallet({ label: onboard.state.get().wallets[0].label })
12+
buttonText = 'Connect'
13+
return
14+
}
15+
if (onboard) {
16+
await onboard.connectWallet()
17+
}
18+
}
19+
20+
onMount(async () => {
21+
if (!onboard) {
22+
onboard = await getOnboard()
23+
}
24+
const sub = onboard.state.select('wallets').subscribe((wallets) => {
25+
connectedWallets = wallets
26+
buttonText = wallets.length ? 'Disconnect' : (buttonText = 'Connect')
27+
})
28+
buttonText = onboard.state.get().wallets.length ? 'Disconnect' : (buttonText = 'Connect')
29+
})
30+
</script>
31+
32+
<button
33+
class="rounded-lg bg-gray-inverse hover:bg-gray-hover hover:text-gray-inverse transition-all px-4 h-10 text-base text-gray-current"
34+
on:click={() => connectWallet()}
35+
>
36+
{buttonText}
37+
</button>

‎docs/src/lib/components/examples/connect-wallet/ConnectWallet.svelte‎

Lines changed: 9 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -1,104 +1,17 @@
11
<script lang="ts">
2-
import { Chip } from '@svelteness/kit-docs'
2+
import { onMount } from 'svelte'
33
4-
import Onboard from '@web3-onboard/core'
5-
import injectedModule from '@web3-onboard/injected-wallets'
4+
import getOnboard from '$lib/services/onboard.js'
5+
import ConnectWalletButton from '../../ConnectWalletButton.svelte'
6+
let onboard: OnboardAPI
67
7-
const INFURA_ID = '8b60d52405694345a99bcb82e722e0af'
8-
9-
const injected = injectedModule()
10-
11-
const onboard = Onboard({
12-
wallets: [injected],
13-
chains: [
14-
{
15-
id: '0x1',
16-
token: 'ETH',
17-
label: 'Ethereum Mainnet',
18-
rpcUrl: `https://mainnet.infura.io/v3/${INFURA_ID}`
19-
},
20-
{
21-
id: '0x3',
22-
token: 'tROP',
23-
label: 'Ethereum Ropsten Testnet',
24-
rpcUrl: `https://ropsten.infura.io/v3/${INFURA_ID}`
25-
}
26-
],
27-
appMetadata: {
28-
name: 'Documentation',
29-
icon: '<svg></svg>',
30-
description: 'Example showcasing how to connect a wallet.',
31-
recommendedInjectedWallets: [
32-
{ name: 'MetaMask', url: 'https://metamask.io' },
33-
{ name: 'Coinbase', url: 'https://wallet.coinbase.com/' }
34-
]
35-
},
36-
accountCenter: { desktop: { enabled: false }, mobile: { enabled: false } }
37-
})
38-
39-
const trunc = (address: string) =>
40-
address ? address.slice(0, 6) + '...' + address.slice(-6) : null
41-
42-
let connecting = false
43-
44-
// Subscribe to wallet updates
45-
const wallets$ = onboard.state.select('wallets')
46-
47-
// The first wallet in the array of connected wallets
48-
$: connectedAccount = $wallets$?.[0]?.accounts?.[0]
49-
50-
async function connectWallet() {
51-
if ($wallets$?.[0]?.provider) {
52-
onboard.disconnectWallet({ label: $wallets$?.[0]?.label })
53-
} else {
54-
connecting = true
55-
await onboard.connectWallet()
56-
connecting = false
8+
onMount(async () => {
9+
if (!onboard) {
10+
onboard = await getOnboard()
5711
}
58-
}
59-
60-
$: buttonText = $wallets$?.[0]?.provider ? 'Disconnect' : connecting ? 'Connecting' : 'Connect'
61-
62-
$: account = connectedAccount?.ens?.name
63-
? {
64-
ens: connectedAccount?.ens,
65-
address: trunc(connectedAccount?.address)
66-
}
67-
: { address: trunc(connectedAccount?.address) }
12+
})
6813
</script>
6914

7015
<div class="flex items-center justify-center border-gray-divider border rounded-md h-40 p-4">
71-
{#if $wallets$?.[0]?.provider}
72-
<div
73-
class="flex items-center w-full px-3 py-2 border border-gray-divider bg-gray-elevate text-gray-inverse rounded-md"
74-
>
75-
<div class="w-9 h-9 rounded-full overflow-hidden mr-2">
76-
{#if account?.ens?.avatar?.url}
77-
<img src={account?.ens?.avatar?.url} alt="" />
78-
{:else}
79-
<div class="bg-gradient-to-r from-cyan-500 to-blue-500 w-full h-full" />
80-
{/if}
81-
</div>
82-
<div>
83-
<div class="">
84-
{account?.ens ? `${account?.ens?.name} (${account?.address})` : `${account?.address}`}
85-
</div>
86-
<div class=" text-sm">Connected to <Chip>{$wallets$?.[0]?.label}</Chip></div>
87-
</div>
88-
89-
<button
90-
class="ml-auto rounded-lg bg-gray-inverse hover:bg-gray-hover hover:text-gray-inverse transition-all px-4 h-10 text-base text-gray-current"
91-
on:click={connectWallet}
92-
>
93-
{buttonText}
94-
</button>
95-
</div>
96-
{:else}
97-
<button
98-
class=" rounded-lg bg-gray-inverse hover:bg-gray-hover hover:text-gray-inverse transition-all px-4 h-10 text-base text-gray-current"
99-
on:click={connectWallet}
100-
>
101-
{buttonText}
102-
</button>
103-
{/if}
16+
<ConnectWalletButton />
10417
</div>

‎docs/src/lib/components/examples/connect-wallet/ReactConnectWallet.md‎

Lines changed: 103 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -6,26 +6,116 @@ Import the libraries and any wallets you would like to use. For this example, we
66
```js title="App.tsx"|copy
77
import { Web3OnboardProvider, init } from '@web3-onboard/react'
88
import injectedModule from '@web3-onboard/injected-wallets'
9+
import fortmaticModule from '@web3-onboard/fortmatic'
10+
import gnosisModule from '@web3-onboard/gnosis'
11+
import injectedModule from '@web3-onboard/injected-wallets'
12+
import keepkeyModule from '@web3-onboard/keepkey'
13+
import keystoneModule from '@web3-onboard/keystone'
14+
import ledgerModule from '@web3-onboard/ledger'
15+
import portisModule from '@web3-onboard/portis'
16+
import torusModule from '@web3-onboard/torus'
17+
import trezorModule from '@web3-onboard/trezor'
18+
import walletConnectModule from '@web3-onboard/walletconnect'
19+
import coinbaseModule from '@web3-onboard/coinbase'
20+
import magicModule from '@web3-onboard/magic'
21+
import web3authModule from '@web3-onboard/web3auth'
22+
import dcentModule from '@web3-onboard/dcent'
23+
import sequenceModule from '@web3-onboard/sequence'
24+
import tallyHoModule from '@web3-onboard/tallyho'
925

1026
const INFURA_KEY = ''
1127

12-
const ethereumRopsten = {
13-
id: '0x3',
14-
token: 'rETH',
15-
label: 'Ethereum Ropsten',
16-
rpcUrl: `https://ropsten.infura.io/v3/${INFURA_KEY}`
17-
}
28+
const injected = injectedModule()
29+
const coinbase = coinbaseModule()
30+
const dcent = dcentModule()
31+
const walletConnect = walletConnectModule()
32+
33+
const portis = portisModule({
34+
apiKey: 'apiKey'
35+
})
36+
37+
const fortmatic = fortmaticModule({
38+
apiKey: 'apiKey'
39+
})
40+
41+
const ledger = ledgerModule()
42+
const keystone = keystoneModule()
43+
const keepkey = keepkeyModule()
44+
const gnosis = gnosisModule()
45+
const sequence = sequenceModule()
46+
const tally = tallyModule()
1847

19-
const polygonMainnet = {
20-
id: '0x89',
21-
token: 'MATIC',
22-
label: 'Polygon',
23-
rpcUrl: 'https://matic-mainnet.chainstacklabs.com'
48+
const trezorOptions = {
49+
email: '[email protected]',
50+
appUrl: 'https://www.blocknative.com'
2451
}
2552

26-
const chains = [ethereumRopsten, polygonMainnet]
53+
const trezor = trezorModule(trezorOptions)
2754

28-
const wallets = [injectedModule()]
55+
const magic = magicModule({
56+
apiKey: 'apiKey'
57+
})
58+
59+
const enkrypt = enkryptModule()
60+
const mewWallet = mewWalletModule()
61+
62+
const wallets = [
63+
keepkey,
64+
sequence,
65+
injected,
66+
tally,
67+
ledger,
68+
coinbase,
69+
dcent,
70+
trezor,
71+
walletConnect,
72+
enkrypt,
73+
mewWallet,
74+
gnosis,
75+
magic,
76+
fortmatic,
77+
keystone,
78+
portis
79+
]
80+
81+
const chains = [
82+
{
83+
id: '0x1',
84+
token: 'ETH',
85+
label: 'Ethereum Mainnet',
86+
rpcUrl: `https://mainnet.infura.io/v3/${INFURA_ID}`
87+
},
88+
{
89+
id: '0x5',
90+
token: 'ETH',
91+
label: 'Goerli',
92+
rpcUrl: `https://goerli.infura.io/v3/${INFURA_ID}`
93+
},
94+
{
95+
id: '0x13881',
96+
token: 'MATIC',
97+
label: 'Polygon - Mumbai',
98+
rpcUrl: 'https://matic-mumbai.chainstacklabs.com'
99+
},
100+
{
101+
id: '0x38',
102+
token: 'BNB',
103+
label: 'Binance',
104+
rpcUrl: 'https://bsc-dataseed.binance.org/'
105+
},
106+
{
107+
id: '0xA',
108+
token: 'OETH',
109+
label: 'Optimism',
110+
rpcUrl: 'https://mainnet.optimism.io'
111+
},
112+
{
113+
id: '0xA4B1',
114+
token: 'ARB-ETH',
115+
label: 'Arbitrum',
116+
rpcUrl: 'https://rpc.ankr.com/arbitrum'
117+
}
118+
]
29119

30120
const appMetadata = {
31121
name: 'Connect Wallet Example',

0 commit comments

Comments
 (0)