diff --git a/docs/package.json b/docs/package.json
index 6a5be83d3..38ee77212 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -43,6 +43,7 @@
"prettier-plugin-svelte": "^2.7.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
+ "rollup-plugin-polyfill-node": "^0.11.0",
"shiki": "^0.10.1",
"svelte": "^3.44.0",
"svelte-check": "^2.7.1",
@@ -53,11 +54,28 @@
},
"type": "module",
"dependencies": {
- "@web3-onboard/core": "^2.8.4",
+ "@web3-onboard/coinbase": "^2.1.4",
+ "@web3-onboard/core": "^2.11.1-alpha.1",
+ "@web3-onboard/dcent": "^2.2.2",
+ "@web3-onboard/enkrypt": "^2.0.0",
+ "@web3-onboard/fortmatic": "^2.0.14",
"@web3-onboard/gas": "^2.1.4",
- "@web3-onboard/injected-wallets": "^2.2.3",
+ "@web3-onboard/gnosis": "^2.1.5",
+ "@web3-onboard/injected-wallets": "^2.4.0",
+ "@web3-onboard/keepkey": "^2.3.2",
+ "@web3-onboard/keystone": "^2.3.2",
+ "@web3-onboard/ledger": "^2.3.2",
+ "@web3-onboard/magic": "^2.1.3",
+ "@web3-onboard/mew-wallet": "^2.0.0",
+ "@web3-onboard/portis": "^2.1.3",
+ "@web3-onboard/sequence": "^2.0.4",
+ "@web3-onboard/tallyho": "^2.0.1",
+ "@web3-onboard/torus": "^2.2.0-alpha.1",
+ "@web3-onboard/trezor": "^2.3.2",
+ "@web3-onboard/uauth": "^2.0.1-alpha.1",
+ "@web3-onboard/web3auth": "^2.1.4-alpha.1",
+ "@web3-onboard/walletconnect": "^2.2.1",
"animejs": "^3.2.1",
- "ethers": "^5.7.0",
- "rollup-plugin-polyfill-node": "^0.10.2"
+ "ethers": "^5.7.0"
}
}
diff --git a/docs/src/lib/components/ConnectWalletButton.svelte b/docs/src/lib/components/ConnectWalletButton.svelte
new file mode 100644
index 000000000..7bb322997
--- /dev/null
+++ b/docs/src/lib/components/ConnectWalletButton.svelte
@@ -0,0 +1,37 @@
+
+
+
diff --git a/docs/src/lib/components/examples/connect-wallet/ConnectWallet.svelte b/docs/src/lib/components/examples/connect-wallet/ConnectWallet.svelte
index cc7a38d55..5317fbcc9 100644
--- a/docs/src/lib/components/examples/connect-wallet/ConnectWallet.svelte
+++ b/docs/src/lib/components/examples/connect-wallet/ConnectWallet.svelte
@@ -1,104 +1,17 @@
- {#if $wallets$?.[0]?.provider}
-
-
- {#if account?.ens?.avatar?.url}
-

- {:else}
-
- {/if}
-
-
-
- {account?.ens ? `${account?.ens?.name} (${account?.address})` : `${account?.address}`}
-
-
Connected to {$wallets$?.[0]?.label}
-
-
-
-
- {:else}
-
- {/if}
+
diff --git a/docs/src/lib/components/examples/connect-wallet/ReactConnectWallet.md b/docs/src/lib/components/examples/connect-wallet/ReactConnectWallet.md
index 12d9161fb..be9c1d57d 100644
--- a/docs/src/lib/components/examples/connect-wallet/ReactConnectWallet.md
+++ b/docs/src/lib/components/examples/connect-wallet/ReactConnectWallet.md
@@ -6,26 +6,116 @@ Import the libraries and any wallets you would like to use. For this example, we
```js title="App.tsx"|copy
import { Web3OnboardProvider, init } from '@web3-onboard/react'
import injectedModule from '@web3-onboard/injected-wallets'
+import fortmaticModule from '@web3-onboard/fortmatic'
+import gnosisModule from '@web3-onboard/gnosis'
+import injectedModule from '@web3-onboard/injected-wallets'
+import keepkeyModule from '@web3-onboard/keepkey'
+import keystoneModule from '@web3-onboard/keystone'
+import ledgerModule from '@web3-onboard/ledger'
+import portisModule from '@web3-onboard/portis'
+import torusModule from '@web3-onboard/torus'
+import trezorModule from '@web3-onboard/trezor'
+import walletConnectModule from '@web3-onboard/walletconnect'
+import coinbaseModule from '@web3-onboard/coinbase'
+import magicModule from '@web3-onboard/magic'
+import web3authModule from '@web3-onboard/web3auth'
+import dcentModule from '@web3-onboard/dcent'
+import sequenceModule from '@web3-onboard/sequence'
+import tallyHoModule from '@web3-onboard/tallyho'
const INFURA_KEY = ''
-const ethereumRopsten = {
- id: '0x3',
- token: 'rETH',
- label: 'Ethereum Ropsten',
- rpcUrl: `https://ropsten.infura.io/v3/${INFURA_KEY}`
-}
+const injected = injectedModule()
+const coinbase = coinbaseModule()
+const dcent = dcentModule()
+const walletConnect = walletConnectModule()
+
+const portis = portisModule({
+ apiKey: 'apiKey'
+})
+
+const fortmatic = fortmaticModule({
+ apiKey: 'apiKey'
+})
+
+const ledger = ledgerModule()
+const keystone = keystoneModule()
+const keepkey = keepkeyModule()
+const gnosis = gnosisModule()
+const sequence = sequenceModule()
+const tally = tallyModule()
-const polygonMainnet = {
- id: '0x89',
- token: 'MATIC',
- label: 'Polygon',
- rpcUrl: 'https://matic-mainnet.chainstacklabs.com'
+const trezorOptions = {
+ email: 'test@test.com',
+ appUrl: 'https://www.blocknative.com'
}
-const chains = [ethereumRopsten, polygonMainnet]
+const trezor = trezorModule(trezorOptions)
-const wallets = [injectedModule()]
+const magic = magicModule({
+ apiKey: 'apiKey'
+})
+
+const enkrypt = enkryptModule()
+const mewWallet = mewWalletModule()
+
+const wallets = [
+ keepkey,
+ sequence,
+ injected,
+ tally,
+ ledger,
+ coinbase,
+ dcent,
+ trezor,
+ walletConnect,
+ enkrypt,
+ mewWallet,
+ gnosis,
+ magic,
+ fortmatic,
+ keystone,
+ portis
+]
+
+const chains = [
+ {
+ id: '0x1',
+ token: 'ETH',
+ label: 'Ethereum Mainnet',
+ rpcUrl: `https://mainnet.infura.io/v3/${INFURA_ID}`
+ },
+ {
+ id: '0x5',
+ token: 'ETH',
+ label: 'Goerli',
+ rpcUrl: `https://goerli.infura.io/v3/${INFURA_ID}`
+ },
+ {
+ id: '0x13881',
+ token: 'MATIC',
+ label: 'Polygon - Mumbai',
+ rpcUrl: 'https://matic-mumbai.chainstacklabs.com'
+ },
+ {
+ id: '0x38',
+ token: 'BNB',
+ label: 'Binance',
+ rpcUrl: 'https://bsc-dataseed.binance.org/'
+ },
+ {
+ id: '0xA',
+ token: 'OETH',
+ label: 'Optimism',
+ rpcUrl: 'https://mainnet.optimism.io'
+ },
+ {
+ id: '0xA4B1',
+ token: 'ARB-ETH',
+ label: 'Arbitrum',
+ rpcUrl: 'https://rpc.ankr.com/arbitrum'
+ }
+]
const appMetadata = {
name: 'Connect Wallet Example',
diff --git a/docs/src/lib/components/examples/connect-wallet/SvelteConnectWallet.md b/docs/src/lib/components/examples/connect-wallet/SvelteConnectWallet.md
index 6e1a07fd1..1c2179345 100644
--- a/docs/src/lib/components/examples/connect-wallet/SvelteConnectWallet.md
+++ b/docs/src/lib/components/examples/connect-wallet/SvelteConnectWallet.md
@@ -5,10 +5,77 @@ Import the libraries and any wallets you would like to use. For this example, we
```js title="onboard.js"|copy
import Onboard from '@web3-onboard/core'
import injectedModule from '@web3-onboard/injected-wallets'
+import fortmaticModule from '@web3-onboard/fortmatic'
+import gnosisModule from '@web3-onboard/gnosis'
+import injectedModule from '@web3-onboard/injected-wallets'
+import keepkeyModule from '@web3-onboard/keepkey'
+import keystoneModule from '@web3-onboard/keystone'
+import ledgerModule from '@web3-onboard/ledger'
+import portisModule from '@web3-onboard/portis'
+import torusModule from '@web3-onboard/torus'
+import trezorModule from '@web3-onboard/trezor'
+import walletConnectModule from '@web3-onboard/walletconnect'
+import coinbaseModule from '@web3-onboard/coinbase'
+import magicModule from '@web3-onboard/magic'
+import web3authModule from '@web3-onboard/web3auth'
+import dcentModule from '@web3-onboard/dcent'
+import sequenceModule from '@web3-onboard/sequence'
+import tallyHoModule from '@web3-onboard/tallyho'
const INFURA_KEY = ''
-const wallets = [injectedModule()]
+const injected = injectedModule()
+const coinbase = coinbaseModule()
+const dcent = dcentModule()
+const walletConnect = walletConnectModule()
+
+const portis = portisModule({
+ apiKey: 'apiKey'
+})
+
+const fortmatic = fortmaticModule({
+ apiKey: 'apiKey'
+})
+
+const ledger = ledgerModule()
+const keystone = keystoneModule()
+const keepkey = keepkeyModule()
+const gnosis = gnosisModule()
+const sequence = sequenceModule()
+const tally = tallyModule()
+
+const trezorOptions = {
+ email: 'test@test.com',
+ appUrl: 'https://www.blocknative.com'
+}
+
+const trezor = trezorModule(trezorOptions)
+
+const magic = magicModule({
+ apiKey: 'apiKey'
+})
+
+const enkrypt = enkryptModule()
+const mewWallet = mewWalletModule()
+
+const wallets = [
+ keepkey,
+ sequence,
+ injected,
+ tally,
+ ledger,
+ coinbase,
+ dcent,
+ trezor,
+ walletConnect,
+ enkrypt,
+ mewWallet,
+ gnosis,
+ magic,
+ fortmatic,
+ keystone,
+ portis
+]
const chains = [
{
@@ -18,10 +85,34 @@ const chains = [
rpcUrl: `https://mainnet.infura.io/v3/${INFURA_ID}`
},
{
- id: '0x89',
+ id: '0x5',
+ token: 'ETH',
+ label: 'Goerli',
+ rpcUrl: `https://goerli.infura.io/v3/${INFURA_ID}`
+ },
+ {
+ id: '0x13881',
token: 'MATIC',
- label: 'Polygon',
- rpcUrl: 'https://matic-mainnet.chainstacklabs.com'
+ label: 'Polygon - Mumbai',
+ rpcUrl: 'https://matic-mumbai.chainstacklabs.com'
+ },
+ {
+ id: '0x38',
+ token: 'BNB',
+ label: 'Binance',
+ rpcUrl: 'https://bsc-dataseed.binance.org/'
+ },
+ {
+ id: '0xA',
+ token: 'OETH',
+ label: 'Optimism',
+ rpcUrl: 'https://mainnet.optimism.io'
+ },
+ {
+ id: '0xA4B1',
+ token: 'ARB-ETH',
+ label: 'Arbitrum',
+ rpcUrl: 'https://rpc.ankr.com/arbitrum'
}
]
@@ -38,7 +129,7 @@ const appMetadata = {
const onboard = Onboard({
wallets,
chains,
- appMetadata,
+ appMetadata
})
export default onboard
@@ -50,15 +141,11 @@ In main `App.svelte` file we'll import our previously initialized web3-onboard i
```svelte title="App.svelte"|copy
-
+
```
@@ -69,7 +156,7 @@ Now that we have our wallet connected, let's display some basic information, suc
```svelte title="App.svelte"|copy