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