+
+
+
+
diff --git a/docs/src/lib/components/FeatureCard.svelte b/docs/src/lib/components/FeatureCard.svelte
new file mode 100644
index 000000000..c501fb30f
--- /dev/null
+++ b/docs/src/lib/components/FeatureCard.svelte
@@ -0,0 +1,59 @@
+
+
+
+
+
+
diff --git a/docs/src/lib/components/FeaturesSection.svelte b/docs/src/lib/components/FeaturesSection.svelte
new file mode 100644
index 000000000..f25aef7f3
--- /dev/null
+++ b/docs/src/lib/components/FeaturesSection.svelte
@@ -0,0 +1,185 @@
+
+
+{title}
+ {text}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {"Web3-Onboard"}
+
+ {"Open-source, framework-agnostic JavaScript library to onboard users to web3 apps. Help your users transact with ease by enabling wallet connection, real-time transaction states, and more."}
+
+
+
+ {'npm i @web3-onboard/core @web3-onboard/injected-wallets'}
+
+
+
+
+
+
+
diff --git a/docs/src/lib/components/NavBar.svelte b/docs/src/lib/components/NavBar.svelte
new file mode 100644
index 000000000..ff339c1d8
--- /dev/null
+++ b/docs/src/lib/components/NavBar.svelte
@@ -0,0 +1,39 @@
+
+
+
+
+
diff --git a/docs/src/lib/components/SEO/OpenGraph.svelte b/docs/src/lib/components/SEO/OpenGraph.svelte
new file mode 100644
index 000000000..525a12cd8
--- /dev/null
+++ b/docs/src/lib/components/SEO/OpenGraph.svelte
@@ -0,0 +1,21 @@
+
+
+
+
+
++ {"Who's using web3-onboard?"} +
+
+ 
+
+
+
+
+
diff --git a/docs/src/lib/components/ThemeCustomizer.svelte b/docs/src/lib/components/ThemeCustomizer.svelte
new file mode 100644
index 000000000..23e7c052e
--- /dev/null
+++ b/docs/src/lib/components/ThemeCustomizer.svelte
@@ -0,0 +1,511 @@
+
+
+{title}
+ {subtitle}
+ {text}
+
+
+
+
+
+ +
+ {#each Object.keys(defaultStyling) as target}
+
+
+
+ {/each}
+
+ updateTheme(e, target)}
+ />
+
+ {target} : {defaultStyling[target]}
+
+
+
+
+ +
+
+ Disabled Backdrop for Styling
+
+
+
+
+
+
+
+
+
+ Drag and drop an image here to preview
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/src/lib/components/base/ScrollContainer.svelte b/docs/src/lib/components/base/ScrollContainer.svelte
new file mode 100644
index 000000000..b9ecdd65e
--- /dev/null
+++ b/docs/src/lib/components/base/ScrollContainer.svelte
@@ -0,0 +1,20 @@
+
+
+
+
diff --git a/docs/src/lib/components/examples/connect-wallet/ConnectWallet.svelte b/docs/src/lib/components/examples/connect-wallet/ConnectWallet.svelte
new file mode 100644
index 000000000..5317fbcc9
--- /dev/null
+++ b/docs/src/lib/components/examples/connect-wallet/ConnectWallet.svelte
@@ -0,0 +1,17 @@
+
+
+
+
diff --git a/docs/src/lib/components/examples/connect-wallet/ReactConnectWallet.md b/docs/src/lib/components/examples/connect-wallet/ReactConnectWallet.md
new file mode 100644
index 000000000..be9c1d57d
--- /dev/null
+++ b/docs/src/lib/components/examples/connect-wallet/ReactConnectWallet.md
@@ -0,0 +1,233 @@
+
+## Step 1: Import + Configure
+
+Import the libraries and any wallets you would like to use. For this example, we are going to use the injected wallets module. You can easily add more wallet support to your dapp via our other wallet modules. Additionally, we'll setup web3-onboard to support 2 chains: Ethereum mainnet and Polygon mainnet.
+
+```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 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 = [
+ {
+ 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',
+ icon: '',
+ description: 'Example showcasing how to connect a wallet.',
+ recommendedInjectedWallets: [
+ { name: 'MetaMask', url: 'https://metamask.io' },
+ { name: 'Coinbase', url: 'https://wallet.coinbase.com/' }
+ ]
+}
+
+const web3Onboard = init({
+ wallets,
+ chains
+ appMetadata
+})
+
+function App() {
+ return (
+
+
+
+ )
+}
+```
+
+## Step 3: Display account information
+
+Now that we have our wallet connected, let's display some basic information, such as the connected wallet's address, ENS name, and avatar.
+
+```js title="ConnectWallet.tsx"|copy{8,10-19,28-37}
+import { useEffect } from 'react'
+import { useConnectWallet } from '@web3-onboard/react'
+import { ethers } from 'ethers'
+
+export default function ConnectWallet() {
+ const [{ wallet, connecting }, connect, disconnect] = useConnectWallet()
+ const [ethersProvider, setProvider] = useState
+ 
+
+ )
+ }
+
+ return (
+ { ens?.name ? ens.name : address }
+ Connected to {wallet.label}
+
+
+
+
+ )
+}
+```
+
diff --git a/docs/src/lib/components/examples/connect-wallet/SvelteConnectWallet.md b/docs/src/lib/components/examples/connect-wallet/SvelteConnectWallet.md
new file mode 100644
index 000000000..1c2179345
--- /dev/null
+++ b/docs/src/lib/components/examples/connect-wallet/SvelteConnectWallet.md
@@ -0,0 +1,197 @@
+## Step 1: Import + Configure
+
+Import the libraries and any wallets you would like to use. For this example, we are going to use the injected wallets module. You can easily add more wallet support to your dapp via our other wallet modules. Additionally, we'll setup web3-onboard to support 2 chains: Ethereum mainnet and Polygon mainnet.
+
+```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 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 = [
+ {
+ 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',
+ icon: '',
+ description: 'Example showcasing how to connect a wallet.',
+ recommendedInjectedWallets: [
+ { name: 'MetaMask', url: 'https://metamask.io' },
+ { name: 'Coinbase', url: 'https://wallet.coinbase.com/' }
+ ]
+}
+
+const onboard = Onboard({
+ wallets,
+ chains,
+ appMetadata
+})
+
+export default onboard
+```
+
+## Step 2: Display the connect wallet button
+
+In main `App.svelte` file we'll import our previously initialized web3-onboard instance and then display our connect wallet button.
+
+```svelte title="App.svelte"|copy
+
+
+
+
+
+```
+
+## Step 3: Display account information
+
+Now that we have our wallet connected, let's display some basic information, such as the connected wallet's address, ENS name, and avatar.
+
+```svelte title="App.svelte"|copy
+
+
+{#if $wallets$?.[0]?.provider}
+
+
+
+{:else}
+ { ens?.name ? ens.name : address }
+ Connected to {wallet.label}
+
+
+
+
+{/if}
+```
diff --git a/docs/src/lib/components/examples/index.ts b/docs/src/lib/components/examples/index.ts
new file mode 100644
index 000000000..da992af9e
--- /dev/null
+++ b/docs/src/lib/components/examples/index.ts
@@ -0,0 +1,3 @@
+export { default as ConnectWallet } from './connect-wallet/ConnectWallet.svelte'
+export { default as ReactConnectWallet } from './connect-wallet/ReactConnectWallet.md'
+export { default as SvelteConnectWallet } from './connect-wallet/SvelteConnectWallet.md'
diff --git a/docs/src/lib/components/gas/Gas.svelte b/docs/src/lib/components/gas/Gas.svelte
new file mode 100644
index 000000000..0497d8951
--- /dev/null
+++ b/docs/src/lib/components/gas/Gas.svelte
@@ -0,0 +1,89 @@
+
+
+
+
diff --git a/docs/src/lib/components/gas/GasCard.svelte b/docs/src/lib/components/gas/GasCard.svelte
new file mode 100644
index 000000000..11992a7ac
--- /dev/null
+++ b/docs/src/lib/components/gas/GasCard.svelte
@@ -0,0 +1,70 @@
+
+
+
+ MORE LIKELY
+
+ LESS LIKELY
+
+ .
+
+ {#each ($ethMainnetGasBlockPrices && $ethMainnetGasBlockPrices[0]?.blockPrices[0]?.estimatedPrices) || GAS_DATA_DEFAULT.estimatedPrices as gasData}
+
+
+
+
+ {#if gasPriceFrom === 'bn'}
+
diff --git a/docs/src/lib/components/gas/index.ts b/docs/src/lib/components/gas/index.ts
new file mode 100644
index 000000000..afd3cb0f4
--- /dev/null
+++ b/docs/src/lib/components/gas/index.ts
@@ -0,0 +1 @@
+export { default as Gas } from './Gas.svelte'
\ No newline at end of file
diff --git a/docs/src/lib/components/gas/types.ts b/docs/src/lib/components/gas/types.ts
new file mode 100644
index 000000000..f31016936
--- /dev/null
+++ b/docs/src/lib/components/gas/types.ts
@@ -0,0 +1,28 @@
+export type GasPrice = {
+ confidence: number
+ price: number | null
+ maxFeePerGas: number | null
+ maxPriorityFeePerGas: number | null
+}
+
+export type RPCGasPrice = {
+ price: string
+ maxFeePerGas: string
+ maxPriorityFeePerGas: string
+}
+
+export interface GasData {
+ estimatedPrices: GasPrice[]
+ baseFeePerGas: number| null
+ blockNumber: number | null
+ maxPrice: number | null
+ estimatedTransactionCount: number | null
+ seconds: number | null
+ estimatedBaseFees?: [EstimatedBaseFee]
+ isTrendingUp?: boolean
+}
+
+export interface EstimatedBaseFee {
+ confidence: number
+ baseFee: number
+}
\ No newline at end of file
diff --git a/docs/src/lib/components/getting-started-guide.md b/docs/src/lib/components/getting-started-guide.md
new file mode 100644
index 000000000..3c5bc558c
--- /dev/null
+++ b/docs/src/lib/components/getting-started-guide.md
@@ -0,0 +1,55 @@
+# Getting Started
+
+## Installation
+
+Install the core Onboard library and the injected wallets module to support browser extension and mobile wallets:
+
+```bash copy
+npm i @web3-onboard/core @web3-onboard/injected-wallets
+```
+
+## Quick Start
+
+Then initialize in your app:
+
+```js copy lineNumbers
+import Onboard from '@web3-onboard/core'
+import injectedModule from '@web3-onboard/injected-wallets'
+import { ethers } from 'ethers'
+
+const MAINNET_RPC_URL = 'https://mainnet.infura.io/v3/BN Gas
+ {:else}
+ Ethers.js Gas
+ {/if}
+ priority fee
+
+ {#key gasData}
+
+ {gasData?.maxPriorityFeePerGas || '...'}
+
+ {/key}
+
+ max fee
+ {#key gasData}
+
+ {gasData?.maxFeePerGas ? Math.round(Number(gasData.maxFeePerGas)) : '...'}
+
+ {/key}
+
+ {#if gasPriceFrom === 'bn'}
+
+ {(gasData && gasData?.confidence) ? `${gasData.confidence}% probability` : '...'}
+
+
+ {rpcGasForDiff ? `${gasDiff(gasData)?.toFixed(2)} gwei saved` : '...'}
+
+ {/if}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+```
+
+## `init`
+
+The `init` function must be called before any hooks can be used. The `init` function just initializes `web3-onboard` and makes it available for all hooks to use. For reference check out the [initialization docs for `@web3-onboard/core`](./core.md#initialization)
+
+## `useConnectWallet`
+
+This hook allows you to connect the user's wallet and track the state of the connection status and the wallet that is connected.
+
+```ts
+import { useConnectWallet } from '@web3-onboard/react'
+
+type UseConnectWallet = (): [
+ { wallet: WalletState | null; connecting: boolean },
+ (options: ConnectOptions) => Promise
+ Label: {{wallet.label}}
+
+
+```
+
+### `lastConnectedTimestamp`
+
+Readonly ref that contains the last time that the user connected a wallet in milliseconds
+
+### Example usage
+
+```
+vue
+
+
+
+ Your last connection timestamp was: {{ lastConnectedTimestamp }}
+
+```
+
+
+## Build Environments
+
+Many of the wallet modules require dependencies that are not normally included in browser builds (namely the node builtin modules such as `crypto`, `buffer`, `util` etc). If you are having build issues you can try the following bundler configs to resolve these dependency issues:
+
+### Webpack 4
+
+Node built-ins are automatically bundled in v4 so that portion is handled automatically.
+
+**web3auth** and **torus** will require a Babel to compile from es6 if not already supported. See config for Babel and Webpack4 as follows
+
+`npm i --save-dev @babel/cli @babel/core @babel/node @babel/plugin-proposal-nullish-coalescing-operator @babel/plugin-proposal-optional-chaining @babel/plugin-syntax-bigint @babel/register`
+**AND**
+`npm i babel-loader`
+
+**babel.config.js**
+
+```javascript
+module.exports = (api) => {
+ api.cache(true)
+ const plugins = [
+ '@babel/plugin-proposal-optional-chaining',
+ '@babel/plugin-proposal-nullish-coalescing-operator',
+ '@babel/plugin-syntax-bigint'
+ ]
+ return { plugins }
+}
+```
+
+**webpack.config.js**
+
+```javascript
+config.module.rules = [
+ ...otherModuleRules,
+ {
+ test: /\.js$/,
+ exclude: (_) => !/node_modules\/(@web3auth|@ethereumjs)/.test(_),
+ loader: 'babel-loader'
+ }
+]
+```
+
+### Webpack 5
+
+You'll need to add some dev dependencies with the following command:
+
+`npm i --save-dev assert buffer crypto-browserify stream-http https-browserify os-browserify process stream-browserify util path-browserify`
+
+Then add the following to your `webpack.config.js` file:
+
+```javascript
+const webpack = require('webpack')
+
+module.exports = {
+ resolve: {
+ fallback: {
+ path: require.resolve('path-browserify')
+ },
+ alias: {
+ assert: 'assert',
+ buffer: 'buffer',
+ crypto: 'crypto-browserify',
+ http: 'stream-http',
+ https: 'https-browserify',
+ os: 'os-browserify/browser',
+ process: 'process/browser',
+ stream: 'stream-browserify',
+ util: 'util'
+ }
+ },
+ experiments: {
+ asyncWebAssembly: true
+ },
+ plugins: [
+ new webpack.ProvidePlugin({
+ process: 'process/browser',
+ Buffer: ['buffer', 'Buffer']
+ })
+ ]
+}
+```
+
+### Vite
+
+Add the following dev dependencies:
+
+`npm i --save-dev rollup-plugin-polyfill-node`
+
+Then add the following to your `vite.config.js` file:
+
+```javascript
+import nodePolyfills from 'rollup-plugin-polyfill-node'
+
+const MODE = process.env.NODE_ENV
+const development = MODE === 'development'
+
+export default {
+ // other config options
+ plugins: [
+ development &&
+ nodePolyfills({
+ include: ['node_modules/**/*.js', new RegExp('node_modules/.vite/.*js')],
+ http: true,
+ crypto: true
+ })
+ ],
+ resolve: {
+ alias: {
+ crypto: 'crypto-browserify',
+ stream: 'stream-browserify',
+ assert: 'assert'
+ }
+ },
+ build: {
+ rollupOptions: {
+ plugins: [nodePolyfills({ crypto: true, http: true })]
+ },
+ commonjsOptions: {
+ transformMixedEsModules: true
+ }
+ }
+}
+```
+
+### Nuxt.js
+
+Add the following to your `nuxt.config.js`:
+
+```javascript
+build: {
+ standalone: true,
+}
+```
diff --git a/docs/src/routes/docs/[...4]wallets/coinbase.md b/docs/src/routes/docs/[...4]wallets/coinbase.md
new file mode 100644
index 000000000..31935a384
--- /dev/null
+++ b/docs/src/routes/docs/[...4]wallets/coinbase.md
@@ -0,0 +1,56 @@
+# Coinbase
+
+Wallet module for connecting Coinbase Wallet SDK to web3-onboard. Check out the [Coinbase Wallet Developer Docs](https://docs.cloud.coinbase.com/wallet-sdk/docs) for more information.
+## Install
+
+