### Install Dependencies

Source: https://github.com/thirdweb-dev/web3-onboard/blob/develop/examples/with-ledger/README.md

Command to install project dependencies using yarn.

```bash
yarn
```

--------------------------------

### Start the development server

Source: https://github.com/thirdweb-dev/web3-onboard/blob/develop/examples/with-sveltekit/README.md

Commands to start the SvelteKit development server, with an option to open the app in a new browser tab.

```bash
npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open
```

--------------------------------

### Quickstart

Source: https://github.com/thirdweb-dev/web3-onboard/blob/develop/packages/vue/README.md

A quickstart example demonstrating how to initialize web3-onboard in a Vue project, including setting up wallets and chains, and using the composables.

```typescript
import { init } from '@web3-onboard/vue'
import injectedModule from '@web3-onboard/injected-wallets'

const injected = injectedModule()

// Only one RPC endpoint required per chain
const rpcAPIKey = '<INFURA_KEY>' || '<ALCHEMY_KEY>'
const rpcUrl =
  `https://eth-mainnet.g.alchemy.com/v2/${rpcAPIKey}` ||
  `https://mainnet.infura.io/v3/${rpcAPIKey}`

const web3Onboard = init({
  wallets: [injected],
  chains: [
    {
      id: '0x1',
      token: 'ETH',
      label: 'Ethereum Mainnet',
      rpcUrl
    },
    {
      id: '0x2105',
      token: 'ETH',
      label: 'Base',
      rpcUrl: 'https://mainnet.base.org'
    }
  ]
})

const { wallets, connectWallet, disconnectConnectedWallet, connectedWallet } = useOnboard()

if (connectedWallet) {
  // if using ethers v6 this is:
  // ethersProvider = new ethers.BrowserProvider(wallet.provider, 'any')
  const ethersProvider = new ethers.providers.Web3Provider(
    connectedWallet.provider,
    'any'
  )
  // ..... do stuff with the provider
}
```

--------------------------------

### Install core and wallet modules

Source: https://github.com/thirdweb-dev/web3-onboard/blob/develop/docs/src/routes/docs/[...1]overview/[...3]onboard.js-migration-guide/+page.md

Example of installing the core web3-onboard package along with specific wallet modules like injected-wallets and coinbase.

```bash
npm i @web3-onboard/core @web3-onboard/injected-wallets @web3-onboard/coinbase
```

--------------------------------

### Install Dependencies

Source: https://github.com/thirdweb-dev/web3-onboard/blob/develop/examples/with-solidjs/README.md

Command to install project dependencies using npm, pnpm, or yarn.

```bash
$ npm install # or pnpm install or yarn install
```

--------------------------------

### Install Dependencies (NPM)

Source: https://github.com/thirdweb-dev/web3-onboard/blob/develop/docs/src/routes/examples/[...1]connect-wallet/+page.md

Install the necessary dependencies for the React framework using NPM.

```sh
npm install @web3-onboard/react @web3-onboard/injected-wallets @web3-onboard/infinity-wallet @web3-onboard/fortmatic @web3-onboard/gnosis @web3-onboard/keepkey @web3-onboard/keystone @web3-onboard/ledger @web3-onboard/portis @web3-onboard/trezor @web3-onboard/walletconnect @web3-onboard/coinbase @web3-onboard/magic @web3-onboard/dcent @web3-onboard/sequence @web3-onboard/taho @web3-onboard/trust @web3-onboard/frontier @web3-onboard/okx
```

--------------------------------

### Import and Setup

Source: https://github.com/thirdweb-dev/web3-onboard/blob/develop/examples/with-nextjs-13/README.md

This snippet demonstrates importing and setting up the useConnectWallet hook in index.tsx, including creating an ethers provider.

```ts
// ...
export default function Home() {
  const [{ wallet, connecting }, connect, disconnect] = useConnectWallet()

  // create an ethers provider
  let ethersProvider

  if (wallet) {
    ethersProvider = new ethers.providers.Web3Provider(wallet.provider, 'any')
  }
  
  return (/* ... */)
```

--------------------------------

### Install Dependencies

Source: https://github.com/thirdweb-dev/web3-onboard/blob/develop/examples/with-vuejs/README.md

Installs the necessary project dependencies.

```sh
npm install
```

--------------------------------

### Quickstart with Injected Wallets and Ethers Provider

Source: https://github.com/thirdweb-dev/web3-onboard/blob/develop/docs/src/routes/docs/[...3]modules/[...4]solid/+page.md

A comprehensive example demonstrating the initialization of web3-onboard with injected wallets and setting up an Ethers provider in a Solid.js application.

```typescript
import { init } from '@web3-onboard/solid'
import injectedModule from '@web3-onboard/injected-wallets'

const injected = injectedModule()

// Only one RPC endpoint required per chain
const rpcAPIKey = '<INFURA_KEY>' || '<ALCHEMY_KEY>'
const rpcUrl =
  `https://eth-mainnet.g.alchemy.com/v2/${rpcAPIKey}` ||
  `https://mainnet.infura.io/v3/${rpcAPIKey}`

const web3Onboard = init({
  wallets: [injected],
  chains: [
    {
      id: '0x1',
      token: 'ETH',
      label: 'Ethereum Mainnet',
      rpcUrl
    },
    {
      id: '0x2105',
      token: 'ETH',
      label: 'Base',
      rpcUrl: 'https://mainnet.base.org'
    }
  ]
})

const { wallets, connectWallet, disconnectConnectedWallet, connectedWallet } =
  useOnboard()

if (connectedWallet) {
  // if using ethers v6 this is:
  // ethersProvider = new ethers.BrowserProvider(wallet.provider, 'any')
  const ethersProvider = new ethers.providers.Web3Provider(
    connectedWallet.provider,
    'any'
  )
  // ..... do stuff with the provider
}
```

--------------------------------

### Install Dependencies (Yarn)

Source: https://github.com/thirdweb-dev/web3-onboard/blob/develop/docs/src/routes/examples/[...1]connect-wallet/+page.md

Install the necessary dependencies for the React framework using Yarn.

```sh
yarn add @web3-onboard/react @web3-onboard/injected-wallets @web3-onboard/infinity-wallet @web3-onboard/fortmatic @web3-onboard/gnosis @web3-onboard/keepkey @web3-onboard/keystone @web3-onboard/ledger @web3-onboard/portis @web3-onboard/trezor @web3-onboard/walletconnect @web3-onboard/coinbase @web3-onboard/magic @web3-onboard/dcent @web3-onboard/sequence @web3-onboard/taho @web3-onboard/trust @web3-onboard/frontier @web3-onboard/okx
```

--------------------------------

### Initialize Onboard with wallets and chains

Source: https://github.com/thirdweb-dev/web3-onboard/blob/develop/docs/src/routes/docs/[...1]overview/[...3]onboard.js-migration-guide/+page.md

Example of initializing Web3 Onboard with a list of wallet modules and supported EVM chains.

```javascript
const onboard = Onboard({
 wallets: [injected, coinbase],
 chains: [
   {
     id: '0x1',
     token: 'ETH',
     label: 'Ethereum Mainnet',
     rpcUrl: MAINNET_RPC_URL
   }
 ]
})
```

--------------------------------

### Running docs server locally

Source: https://github.com/thirdweb-dev/web3-onboard/blob/develop/docs/README.md

Command to install dependencies and start the local documentation server.

```shell
yarn && yarn dev
```

--------------------------------

### Example usage

Source: https://github.com/thirdweb-dev/web3-onboard/blob/develop/packages/vue/README.md

Demonstrates how to use the `useOnboard` hook to get chain information for a specific wallet.

```vue
<script setup>
import { useOnboard } from '@web3-onboard/vue'

const { getChain } = useOnboard()
</script>

<template>
  <span>MetaMask is connected to: {{ getChain('MetaMask') }}</span>
</template>
```

--------------------------------

### Install Modules

Source: https://github.com/thirdweb-dev/web3-onboard/blob/develop/packages/solid/README.md

Install the necessary packages for @web3-onboard/solid.

```bash
npm i @web3-onboard/solid @web3-onboard/injected-wallets ethers

pnpm i @web3-onboard/solid @web3-onboard/injected-wallets ethers
```

--------------------------------

### Install

Source: https://github.com/thirdweb-dev/web3-onboard/blob/develop/packages/xdefi/README.md

Install the @web3-onboard/xdefi package.

```bash
npm i @web3-onboard/xdefi
```

--------------------------------

### Install

Source: https://github.com/thirdweb-dev/web3-onboard/blob/develop/packages/ledger/README.md

Install the @web3-onboard/core and @web3-onboard/ledger packages.

```bash
npm i @web3-onboard/core @web3-onboard/ledger
```

--------------------------------

### Install

Source: https://github.com/thirdweb-dev/web3-onboard/blob/develop/packages/arcana-auth/README.md

Install the necessary packages for @web3-onboard/arcana-auth.

```bash
npm install @web3-onboard/core @web3-onboard/arcana-auth
```

--------------------------------

### Install

Source: https://github.com/thirdweb-dev/web3-onboard/blob/develop/packages/phantom/README.md

Install the core and phantom modules for Web3-Onboard.

```bash
npm i @web3-onboard/core @web3-onboard/phantom
```

--------------------------------

### Install NPM

Source: https://github.com/thirdweb-dev/web3-onboard/blob/develop/packages/frontier/README.md

Install the core and frontier packages using NPM.

```bash
npm i @web3-onboard/core @web3-onboard/frontier
```

--------------------------------

### Install Core Module

Source: https://github.com/thirdweb-dev/web3-onboard/blob/develop/packages/core/README.md

Install the core module using npm.

```bash
npm i @web3-onboard/core
```

--------------------------------

### Install

Source: https://github.com/thirdweb-dev/web3-onboard/blob/develop/packages/particle-network/README.md

Install the @web3-onboard/core and @web3-onboard/particle-network packages.

```bash
npm i @web3-onboard/core @web3-onboard/particle-network
```

--------------------------------

### Install

Source: https://github.com/thirdweb-dev/web3-onboard/blob/develop/packages/zeal/README.md

Install the @web3-onboard/core and @web3-onboard/zeal packages.

```bash
npm i @web3-onboard/core @web3-onboard/zeal
```

--------------------------------

### Install NPM

Source: https://github.com/thirdweb-dev/web3-onboard/blob/develop/packages/okx/README.md

Install the OKX Wallet SDK module using NPM.

```bash
npm i @web3-onboard/core @web3-onboard/okx
```

--------------------------------

### Install Core and Injected Wallets

Source: https://github.com/thirdweb-dev/web3-onboard/blob/develop/docs/src/routes/docs/[...2]getting-started/[...1]installation/+page.md

Install the core Web3 Onboard library and the injected wallets module to support browser extension and mobile wallets.

```sh
yarn add @web3-onboard/core @web3-onboard/injected-wallets
```

```sh
npm install @web3-onboard/core @web3-onboard/injected-wallets
```

--------------------------------

### Install NPM

Source: https://github.com/thirdweb-dev/web3-onboard/blob/develop/packages/bitget/README.md

Install the Bitget Wallet SDK module using NPM.

```bash
npm i @web3-onboard/core @web3-onboard/bitget
```

--------------------------------

### Usage Example

Source: https://github.com/thirdweb-dev/web3-onboard/blob/develop/packages/infinity-wallet/README.md

Example of how to integrate the Infinity Wallet module with web3-onboard.

```typescript
import Onboard from '@web3-onboard/core'
import infinityWalletModule from '@web3-onboard/infinity-wallet'

const infinityWallet = infinityWalletModule()

const onboard = Onboard({
  // ... other Onboard options
  wallets: [
    infinityWallet
    //... other wallets
  ]
})

const connectedWallets = await onboard.connectWallet()
console.log(connectedWallets)
```

--------------------------------

### Usage Example

Source: https://github.com/thirdweb-dev/web3-onboard/blob/develop/packages/walletconnect/README.md

Example of how to initialize and use the WalletConnect module with web3-onboard.

```typescript
import Onboard from '@web3-onboard/core'
import walletConnectModule from '@web3-onboard/walletconnect'

const wcInitOptions = {
  /**
   * Project ID associated with [WalletConnect account](https://cloud.walletconnect.com)
   */
  projectId: 'abc123...',
  /**
   * Chains required to be supported by all wallets connecting to your DApp
   */
  requiredChains: [1],
  /**
   * Chains required to be supported by all wallets connecting to your DApp
   */
  optionalChains: [42161, 8453, 10, 137, 56],
  /**
   * Defaults to `appMetadata.explore` that is supplied to the web3-onboard init
   * Strongly recommended to provide atleast one URL as it is required by some wallets (i.e. MetaMask)
   * To connect with WalletConnect
   */
  dappUrl: 'http://YourAwesomeDapp.com'
}

// initialize the module with options
const walletConnect = walletConnectModule(wcInitOptions)

// can also initialize with no options...

const onboard = Onboard({
  // ... other Onboard options
  wallets: [
    walletConnect
    //... other wallets
  ]
})

const connectedWallets = await onboard.connectWallet()

// Assuming only wallet connect is connected, index 0
// `instance` will give insight into the WalletConnect info
// such as namespaces, methods, chains, etc per wallet connected
const { instance } = connectedWallets[0]

console.log(connectedWallets)
```

--------------------------------

### useOnboard composable example usage

Source: https://github.com/thirdweb-dev/web3-onboard/blob/develop/packages/solid/README.md

Example usage of the useOnboard composable.

```typescript
import { useOnboard } from '@web3-onboard/solid'
// Use the composable
const onboard = useOnboard()
// Or destructure it
const { 
  wallets, 
  connectedWallet, 
  connectedChain, 
  connectWallet, 
  disconnectConnectedWallet 
} = useOnboard()
// do stuff
```

--------------------------------

### Install Yarn

Source: https://github.com/thirdweb-dev/web3-onboard/blob/develop/packages/okx/README.md

Install the OKX Wallet SDK module using Yarn.

```bash
yarn add @web3-onboard/core @web3-onboard/okx
```

--------------------------------

### Navigate to Project Directory

Source: https://github.com/thirdweb-dev/web3-onboard/blob/develop/examples/with-ledger/README.md

Command to navigate into the examples directory.

```bash
cd examples
```

--------------------------------

### Initialization Example

Source: https://github.com/thirdweb-dev/web3-onboard/blob/develop/packages/core/README.md

Putting it all together, here is an example initialization with the injected wallet modules:

```javascript
import Onboard from '@web3-onboard/core'
import injectedModule from '@web3-onboard/injected-wallets'

const injected = injectedModule()

// Only one RPC endpoint required per chain
const ETH_MAINNET_RPC = `https://mainnet.infura.io/v3/${INFURA_KEY}` || `https://eth-mainnet.g.alchemy.com/v2/${ALCHEMY_KEY}`

const onboard = Onboard({
  // This javascript object is unordered meaning props do not require a certain order
  wallets: [injected],
  chains: [
    {
      id: '0x1',
      token: 'ETH',
      label: 'Ethereum Mainnet',
      rpcUrl: ETH_MAINNET_RPC
    },
    {
      id: 11155111,
      token: 'ETH',
      label: 'Sepolia',
      rpcUrl: 'https://rpc.sepolia.org/'
    },
    {
      id: 42161,
      token: 'ARB-ETH',
      label: 'Arbitrum One',
      rpcUrl: 'https://rpc.ankr.com/arbitrum'
    },
    {
      id: '0xa4ba',
      token: 'ARB',
      label: 'Arbitrum Nova',
      rpcUrl: 'https://nova.arbitrum.io/rpc'
    },
    {
      id: '0x2105',
      token: 'ETH',
      label: 'Base',
      rpcUrl: 'https://mainnet.base.org'
    },
    {
      id: '0x38',
      token: 'BNB',
      label: 'Binance Smart Chain',
      rpcUrl: 'https://bsc-dataseed.binance.org/'
    },
    {
      id: '0x89',
      token: 'MATIC',
      label: 'Matic Mainnet',
      rpcUrl: 'https://matic-mainnet.chainstacklabs.com'
    },
    {
      id: '0xfa',
      token: 'FTM',
      label: 'Fantom Mainnet',
      rpcUrl: 'https://rpc.ftm.tools/'
    },
    {
      id: 666666666,
      token: 'DEGEN',
      label: 'Degen',
      rpcUrl: 'https://rpc.degen.tips'
    }
  ],
  appMetadata: {
    name: 'Token Swap',
    icon: myIcon, // svg string icon
    logo: myLogo, // svg string logo
    description: 'Swap tokens for other tokens',
    recommendedInjectedWallets: [
      { name: 'MetaMask', url: 'https://metamask.io' },
      { name: 'Coinbase', url: 'https://wallet.coinbase.com/' }
    ]
  },
  notify: {
    desktop: {
      enabled: true,
      position: 'bottomLeft'
    },
    mobile: {
      enabled: true,
      position: 'topRight'
    }
  },
  accountCenter: {
    desktop: {
      position: 'topRight',
      enabled: true,
      minimal: true
    },
    mobile: {
      position: 'topRight',
      enabled: true,
      minimal: true
    }
  },
  i18n: {
    en: {
      connect: {
        selectingWallet: {
          header: 'custom text header'
        }
      },
      notify: {
        transaction: {
          txStuck: 'custom text for this notification event'
        },
        watched: {
          // Any words in brackets can be re-ordered or removed to fit your dapps desired verbiage
          "txPool": "Your account is {verb} {formattedValue} {asset} {preposition} {counterpartyShortened}"
        }
      }
    },
    es: {
      transaction: {
        txRequest: 'Su transacción está esperando que confirme'
      }
    }
  }
})

```

--------------------------------

### Standalone Setup

Source: https://github.com/thirdweb-dev/web3-onboard/blob/develop/docs/src/routes/docs/[...3]modules/[...2]gas/+page.md

Setup the gas module to stream or get gas price estimates.

```typescript
import gas from '@web3-onboard/gas'

// subscribe to a single chain for estimates using the default poll rate of 5 secs
const ethMainnetGasBlockPrices = gas.stream({
  chains: ['0x1'],
  endpoint: 'blockPrices'
})

const { unsubscribe: ethGasUnsub } = ethMainnetGasBlockPrices.subscribe(
  estimates => console.log(estimates)
)

// ....
sometime later, unsubscribe to stop polling
setTimeout(ethGasUnsub, 10000)

// OR you can subscribe to multiple chains at once:
const gasBlockPrices = gas.stream({
  chains: ['0x1', '0x89'],
  apiKey: '<OPTIONAL_API_KEY>',
  endpoint: 'blockPrices',
  // can override default poll rate as well
  poll: 1000
})

const { unsubscribe } = gasBlockPrices.subscribe(estimates =>
  console.log(estimates)
  console.log(estimates[0].blockPrices[0].estimatedPrice)
  // block inclusion confidence options: 70, 80, 90, 95, 99
  console.log(bnGasPrices.find(gas => gas.confidence === 90))
)

// ....
sometime later, unsubscribe to stop polling
setTimeout(unsubscribe, 10000)

// Can also just do a one time get rather than a stream
const gasBlockPrices = await gas.get({
  chains: ['0x1', '0x89'],
  apiKey: '<OPTIONAL_API_API_KEY>',
  endpoint: 'blockPrices'
})
```

--------------------------------

### Get Chain

Source: https://github.com/thirdweb-dev/web3-onboard/blob/develop/docs/src/routes/docs/[...3]modules/[...7]vue/+page.md

Example of how to get the current chain a wallet is connected to using the `getChain` composable.

```html
<script>
  import { useOnboard } from '@web3-onboard/vue'
  export default {
    setup() {
      const { getChain } = useOnboard()
      return { getChain }
    }
  }
</script>

<template>
  <span>MetaMask is connected to: {{ getChain('MetaMask') }}</span>
</template>
```

--------------------------------

### Quick Start

Source: https://github.com/thirdweb-dev/web3-onboard/blob/develop/docs/src/routes/+page.md

Initialize web3-onboard in your app.

```js
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/<INFURA_KEY>'

const injected = injectedModule()

const onboard = Onboard({
  wallets: [injected],
  chains: [
    {
      id: '0x1',
      token: 'ETH',
      label: 'Ethereum Mainnet',
      rpcUrl: MAINNET_RPC_URL
    },
    {
      id: '0x2105',
      token: 'ETH',
      label: 'Base',
      rpcUrl: 'https://mainnet.base.org'
    }
  ]
})

const wallets = await onboard.connectWallet()

console.log(wallets)

if (wallets[0]) {
  // create an ethers provider with the last connected wallet provider
  const ethersProvider = new ethers.providers.Web3Provider(wallets[0].provider, 'any')
  // if using ethers v6 this is:
  // ethersProvider = new ethers.BrowserProvider(wallet.provider, 'any')

  const signer = ethersProvider.getSigner()

  // send a transaction with the ethers provider
  const txn = await signer.sendTransaction({
    to: '0x',
    value: 100000000000000
  })

  const receipt = await txn.wait()
  console.log(receipt)
}
```

--------------------------------

### App.js

Source: https://github.com/thirdweb-dev/web3-onboard/blob/develop/packages/react/README.md

Quickstart with Injected Wallets and Ethers Provider.

```javascript
import React from 'react'
import { init, useConnectWallet } from '@web3-onboard/react'
import injectedModule from '@web3-onboard/injected-wallets'
import { ethers } from 'ethers'

const injected = injectedModule()

const infuraKey = '<INFURA_KEY>'
const rpcUrl = `https://mainnet.infura.io/v3/${infuraKey}`

// initialize Onboard
init({
  // This javascript object is unordered meaning props do not require a certain order
  wallets: [injected],
  chains: [
    {
      id: '0x1',
      token: 'ETH',
      label: 'Ethereum Mainnet',
      rpcUrl
    },
    {
      id: '0x2105',
      token: 'ETH',
      label: 'Base',
      rpcUrl: 'https://mainnet.base.org'
    }
  ]
})

function App() {
  const [{ wallet, connecting }, connect, disconnect] = useConnectWallet()

  // create an ethers provider
  let ethersProvider

  if (wallet) {
    // if using ethers v6 this is:
    // ethersProvider = new ethers.BrowserProvider(wallet.provider, 'any')
    ethersProvider = new ethers.providers.Web3Provider(wallet.provider, 'any')
  }

  return (
    <div>
      <button
        disabled={connecting}
        onClick={() => (wallet ? disconnect(wallet) : connect())}
      >
        {connecting ? 'connecting' : wallet ? 'disconnect' : 'connect'}
      </button>
    </div>
  )
}

export default App
```

--------------------------------

### CRACO Webpack 5 Configuration Example

Source: https://github.com/thirdweb-dev/web3-onboard/blob/develop/docs/src/routes/docs/[...3]modules/[...1]core/+page.md

Example of how to integrate the Webpack 5 fallback and alias configuration into a CRACO setup for Create React App.

```javascript
const webpack = require('webpack')
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
const path = require('path')

module.exports = function override(config) {
  const fallback = config.resolve.fallback || {}
  Object.assign(fallback, {
    assert: require.resolve('assert'),
    buffer: require.resolve('buffer'),
    crypto: require.resolve('crypto-browserify'),
    http: require.resolve('stream-http'),
    https: require.resolve('https-browserify'),
    os: require.resolve('os-browserify/browser'),
    path: require.resolve('path-browserify'),
    path: require.resolve('browserify-zlib'),
    process: require.resolve('process/browser'),
    stream: require.resolve('stream-browserify'),
    url: require.resolve('url'),
    util: require.resolve('util'),
    zlib: require.resolve('browserify-zlib')
  })
  config.resolve.fallback = fallback
  config.resolve.alias = {
    ...config.resolve.alias,
    'bn.js': path.resolve(__dirname, 'node_modules/bn.js'),
    lodash: path.resolve(__dirname, 'node_modules/lodash'),
    'magic-sdk': path.resolve(__dirname, 'node_modules/magic-sdk/dist/cjs/index.js')
  }
  config.plugins = (config.plugins || []).concat([
    new webpack.ProvidePlugin({
      process: 'process/browser',
      Buffer: ['buffer', 'Buffer']
    }),
    new webpack.IgnorePlugin({
      resourceRegExp: /genesisStates\/[a-z]*\.json$/,
      contextRegExp: /@ethereumjs\/common/
    }),
    new BundleAnalyzerPlugin({
      analyzerMode: 'disabled'
    })
  ])
  config.ignoreWarnings = [/Failed to parse source map/]
  config.module.rules.push({
    test: /\.(js|mjs|jsx)$/,
    enforce: 'pre',
    loader: require.resolve('source-map-loader'),
    resolve: {
      fullySpecified: false
    }
  })
  return config
}
```

--------------------------------

### Quickstart

Source: https://github.com/thirdweb-dev/web3-onboard/blob/develop/docs/src/routes/docs/[...3]modules/[...7]vue/+page.md

Initialize Web3 Onboard with Vue, including wallet and chain configurations.

```typescript
import { init } from '@web3-onboard/vue'
import injectedModule from '@web3-onboard/injected-wallets'

const injected = injectedModule()
const infuraKey = '<INFURA_KEY>'
const rpcUrl = `https://mainnet.infura.io/v3/${infuraKey}`

const web3Onboard = init({
  wallets: [injected],
  chains: [
    {
      id: '0x1',
      token: 'ETH',
      label: 'Ethereum Mainnet',
      rpcUrl
    },
    {
      id: 42161,
      token: 'ARB-ETH',
      label: 'Arbitrum One',
      rpcUrl: 'https://rpc.ankr.com/arbitrum'
    },
    {
      id: '0xa4ba',
      token: 'ARB',
      label: 'Arbitrum Nova',
      rpcUrl: 'https://nova.arbitrum.io/rpc'
    },
    {
      id: '0x2105',
      token: 'ETH',
      label: 'Base',
      rpcUrl: 'https://mainnet.base.org'
    }
  ]
})

const { wallets, connectWallet, disconnectConnectedWallet, connectedWallet } = useOnboard()

if (connectedWallet) {
  // if using ethers v6 this is:
  // ethersProvider = new ethers.BrowserProvider(wallet.provider, 'any')
  const ethersProvider = new ethers.providers.Web3Provider(connectedWallet.provider, 'any')
  // ..... do stuff with the provider
}
```

--------------------------------

### Create a new SvelteKit project

Source: https://github.com/thirdweb-dev/web3-onboard/blob/develop/examples/with-sveltekit/README.md

Commands to create a new SvelteKit project, either in the current directory or a specified subdirectory.

```bash
npm create svelte@latest

# create a new project in my-app
npm create svelte@latest my-app
```

--------------------------------

### Package Versioning Example: Bug fix within the core package

Source: https://github.com/thirdweb-dev/web3-onboard/blob/develop/docs/src/routes/docs/[...1]overview/[...2]contribution-guide/+page.md

Example of updating the version in the package.json for the 'core' package for a bug fix, including incrementing the alpha version tag.

```json
"version": "2.9.1-alpha.1",
```

```json
"version": "2.9.1-alpha.2",
```

--------------------------------

### Development Server

Source: https://github.com/thirdweb-dev/web3-onboard/blob/develop/examples/with-solidjs/README.md

Command to run the application in development mode.

```bash
npm run dev
```

--------------------------------

### Package Versioning Example: Adding a new injected wallet

Source: https://github.com/thirdweb-dev/web3-onboard/blob/develop/docs/src/routes/docs/[...1]overview/[...2]contribution-guide/+page.md

Example of updating the version in the package.json for the 'injected' package when adding a new wallet, including adding an alpha version tag.

```json
"version": "2.2.4",
```

```json
"version": "2.3.0-alpha.1",
```

--------------------------------

### Run Development Server

Source: https://github.com/thirdweb-dev/web3-onboard/blob/develop/examples/with-ledger/README.md

Commands to run the development server using npm or yarn.

```bash
npm run dev
# or
yarn dev
```

--------------------------------

### Initialize Web3 Onboard

Source: https://github.com/thirdweb-dev/web3-onboard/blob/develop/docs/src/routes/docs/[...1]overview/[...1]introduction/+page.md

Initialize Web3 Onboard with supported wallets and chains.

```ts
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/<INFURA_KEY>'

const injected = injectedModule()

const onboard = Onboard({
  // This javascript object is unordered meaning props do not require a certain order
  wallets: [injected],
  chains: [
    {
      id: '0x1',
      token: 'ETH',
      label: 'Ethereum Mainnet',
      rpcUrl: MAINNET_RPC_URL
    },
    {
      id: 42161,
      token: 'ARB-ETH',
      label: 'Arbitrum One',
      rpcUrl: 'https://rpc.ankr.com/arbitrum'
    },
    {
      id: '0xa4ba',
      token: 'ARB',
      label: 'Arbitrum Nova',
      rpcUrl: 'https://nova.arbitrum.io/rpc'
    },
    {
      id: '0x2105',
      token: 'ETH',
      label: 'Base',
      rpcUrl: 'https://mainnet.base.org'
    },
    {
      id: '0xa4ec',
      token: 'ETH',
      label: 'Celo',
      rpcUrl: 'https://1rpc.io/celo'
    },
    {
      id: 666666666,
      token: 'DEGEN',
      label: 'Degen',
      rpcUrl: 'https://rpc.degen.tips'
    },
    {
      id: 2192,
      token: 'SNAXETH',
      label: 'SNAX Chain',
      rpcUrl: 'https://mainnet.snaxchain.io'
    }
  ]
})

const wallets = await onboard.connectWallet()

console.log(wallets)

if (wallets[0]) {
  // create an ethers provider with the last connected wallet provider
  // if using ethers v6 this is:
  // ethersProvider = new ethers.BrowserProvider(wallet.provider, 'any')
  const ethersProvider = new ethers.providers.Web3Provider(wallets[0].provider, 'any')

  const signer = ethersProvider.getSigner()

  // send a transaction with the ethers provider
  const txn = await signer.sendTransaction({
    to: '0x',
    value: 100000000000000
  })

  const receipt = await txn.wait()
  console.log(receipt)
}
```

--------------------------------

### Accessing Magic Wallet Configuration

Source: https://github.com/thirdweb-dev/web3-onboard/blob/develop/docs/src/routes/docs/[...4]wallets/[...18]magic/+page.md

Example of accessing Magic wallet instance to get user metadata and store email.

```typescript
const [magicWallet] = await onboard.connectWallet()

try {
  const { email, publicAddress } = await magicWallet.instance.user.getMetadata()
  localStorage.setItem('magicUserEmail', email)
  // This email can then be passed through the MagicInitOptions to continue the users session and avoid having to login again
} catch {
  // Handle errors if required!
}
```

--------------------------------

### Initialization Example

Source: https://github.com/thirdweb-dev/web3-onboard/blob/develop/docs/src/routes/docs/[...3]modules/[...4]solid/+page.md

Example of initializing web3-onboard with injected wallets and a specific RPC URL for Ethereum Mainnet.

```typescript
import { init } from '@web3-onboard/solid'
import injectedModule from '@web3-onboard/injected-wallets'

const injected = injectedModule()
const infuraKey = '<INFURA_KEY>'
const rpcUrl = `https://mainnet.infura.io/v3/${infuraKey}`

const web3Onboard = init({
  wallets: [injected],
  chains: [
    {
      id: '0x1',
      token: 'ETH',
      label: 'Ethereum Mainnet',
      rpcUrl
    }
  ]
})
```

--------------------------------

### Initialize Onboard

Source: https://github.com/thirdweb-dev/web3-onboard/blob/develop/docs/src/routes/docs/[...2]getting-started/[...1]installation/+page.md

Initialize the Web3 Onboard instance with the configured wallets, chains, and app metadata.

```ts
const onboard = Onboard({
  // This javascript object is unordered meaning props do not require a certain order
  wallets,
  chains,
  appMetadata
})
```

--------------------------------

### Example of a workflow (fetch user's balances and transactions)

Source: https://github.com/thirdweb-dev/web3-onboard/blob/develop/packages/cede-store/README.md

Demonstrates how to get vault previews, fetch user balances from specific exchanges, and fetch user transactions.

```typescript
// Get available vaults and accounts
const { vaultPreview } = provider.getVaultPreviews()
console.log(vaultPreview)

// Fetch user's balances from Binance and Coinbase
const vaultId = vaultPreview[0].id
await provider.request({
  method: 'balances',
  params: {
    vaultId,
    accountNames: ['Binance 1', 'Coinbase 1']
  }
})

// Fetch user's transactions
await provider.request({
  method: 'transactions',
  params: {
    vaultId
  }
})
```

--------------------------------

### Webpack 5 Fallback and Provide Plugin Configuration

Source: https://github.com/thirdweb-dev/web3-onboard/blob/develop/docs/src/routes/docs/[...3]modules/[...1]core/+page.md

Installation command for necessary dev dependencies and webpack.config.js example for Webpack 5 to polyfill Node.js built-in modules.

```bash
npm i --save-dev assert buffer crypto-browserify stream-http https-browserify os-browserify process stream-browserify util path-browserify browserify-zlib
```

```javascript
const webpack = require('webpack')

module.exports = {
  resolve: {
    fallback: {
      path: require.resolve('path-browserify'),
      path: require.resolve('browserify-zlib')
    },
    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',
      zlib: 'browserify-zlib'
    }
  },
  experiments: {
    asyncWebAssembly: true
  },
  plugins: [
    new webpack.ProvidePlugin({
      process: 'process/browser',
      Buffer: ['buffer', 'Buffer']
    })
  ]
}
```

--------------------------------

### Build the production version

Source: https://github.com/thirdweb-dev/web3-onboard/blob/develop/examples/with-sveltekit/README.md

Command to build a production version of the SvelteKit application.

```bash
npm run build
```

--------------------------------

### CRACO Configuration for Create React App

Source: https://github.com/thirdweb-dev/web3-onboard/blob/develop/packages/core/README.md

Example of how to use the Webpack 5 configuration within a CRACO setup for Create React App projects, including additional dev dependencies.

```bash
yarn add rollup-plugin-polyfill-node webpack-bundle-analyzer browserify-zlib -D
```

```javascript
const webpack = require('webpack')
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
const path = require('path')

module.exports = function override(config) {
  const fallback = config.resolve.fallback || {}
  Object.assign(fallback, {
    assert: require.resolve('assert'),
    buffer: require.resolve('buffer'),
    crypto: require.resolve('crypto-browserify'),
    http: require.resolve('stream-http'),
    https: require.resolve('https-browserify'),
    os: require.resolve('os-browserify/browser'),
    path: require.resolve('path-browserify'),
    zlib: require.resolve('browserify-zlib'),
    process: require.resolve('process/browser'),
    stream: require.resolve('stream-browserify'),
    url: require.resolve('url'),
    util: require.resolve('util')
  })
  config.resolve.fallback = fallback
  config.resolve.alias = {
    ...config.resolve.alias,
    'bn.js': path.resolve(__dirname, 'node_modules/bn.js'),
    lodash: path.resolve(__dirname, 'node_modules/lodash'),
    'magic-sdk': path.resolve(
      __dirname,
      'node_modules/magic-sdk/dist/cjs/index.js'
    )
  }
  config.plugins = (config.plugins || []).concat([
    new webpack.ProvidePlugin({
      process: 'process/browser',
      Buffer: ['buffer', 'Buffer']
    }),
    new webpack.IgnorePlugin({
      resourceRegExp: /genesisStates\/[a-z]*\.json$/,
      contextRegExp: /@ethereumjs\/common/
    }),
    new BundleAnalyzerPlugin({
      analyzerMode: 'disabled'
    })
  ])
  config.ignoreWarnings = [/Failed to parse source map/]
  config.module.rules.push({
    test: /\.(js|mjs|jsx)$/,
    enforce: 'pre',
    loader: require.resolve('source-map-loader'),
    resolve: {
      fullySpecified: false
    }
  })
  return config
}
```

--------------------------------

### Install Dependencies

Source: https://github.com/thirdweb-dev/web3-onboard/blob/develop/docs/src/routes/docs/[...1]overview/[...1]introduction/+page.md

Install the core web3-onboard library, the injected wallets module, and optionally ethers.js to support browser extension and mobile wallets.

```sh
yarn add @web3-onboard/core @web3-onboard/injected-wallets ethers
```

```sh
npm i @web3-onboard/core @web3-onboard/injected-wallets ethers
```

--------------------------------

### Webpack 4 Babel and Webpack Configuration

Source: https://github.com/thirdweb-dev/web3-onboard/blob/develop/docs/src/routes/docs/[...3]modules/[...1]core/+page.md

Installation commands for Babel and Babel loader, along with babel.config.js and webpack.config.js examples for Webpack 4 to handle ES6 compilation and node built-ins.

```bash
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
npm i babel-loader
```

```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 }
}
```

```javascript
config.module.rules = [
  ...otherModuleRules,
  {
    test: /\.js$/,
    exclude: (_) => !/node_modules\/(@web3auth|@ethereumjs)/.test(_),
    loader: 'babel-loader'
  }
]
```

--------------------------------

### CSS Customizations

Source: https://github.com/thirdweb-dev/web3-onboard/blob/develop/docs/src/routes/docs/[...1]overview/[...3]onboard.js-migration-guide/+page.md

Example of applying Web3 Onboard CSS customizations using :root pseudo-class for various elements like color palette, account center, shared modal, connect modal, and positioning.

```css
:root {
 /* CUSTOMIZE THE COLOR  PALETTE */
 --onboard-success-100: #d1fae3;
 /* CUSTOMIZE ACCOUNT CENTER*/
 --account-center-z-index: 30
/* CUSTOMIZE THE SHARED MODAL */
 --onboard-modal-color: #ffe5e6;
 /* CUSTOMIZE THE CONNECT MODAL */
 --onboard-font-size-1: 3rem;
 /* HD WALLET ACCOUNT SELECT MODAL POSITIONING */
 --onboard-account-select-modal-z-index : 1;
/* COLORS */
 --account-select-modal-primary-100: #eff1fc;
 /* SPACING */
 --account-select-modal-margin-5: 0.5rem;
/* AND MANY MORE ALLOWING COMPLETE CUSTOMIZATION OF YOUR ONBOARDING EXPERIENCE */
}
```

--------------------------------

### onboard.js

Source: https://github.com/thirdweb-dev/web3-onboard/blob/develop/docs/src/routes/examples/[...1]connect-wallet/+page.md

Imports necessary libraries and configures Web3 Onboard with supported wallets and chains.

```javascript
import Onboard from '@web3-onboard/core'
import injectedModule from '@web3-onboard/injected-wallets'
import infinityWalletModule from '@web3-onboard/infinity-wallet'
import fortmaticModule from '@web3-onboard/fortmatic'
import safeModule from '@web3-onboard/gnosis'
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 tahoModule from '@web3-onboard/taho'
import trustModule from '@web3-onboard/trust'
import okxModule from '@web3-onboard/okx'
import frontierModule from '@web3-onboard/frontier'

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 infinityWallet = infinityWalletModule()
const ledger = ledgerModule()
const keystone = keystoneModule()
const keepkey = keepkeyModule()
const safe = safeModule()
const sequence = sequenceModule()
const taho = tahoModule() // Previously named Tally Ho wallet
const trust = trustModule()
const okx = okxModule()
const frontier = frontierModule()

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 = [
  infinityWallet,
  keepkey,
  sequence,
  injected,
  taho,
  ledger,
  coinbase,
  dcent,
  trust,
  okx,
  frontier,
  trezor,
  walletConnect,
  enkrypt,
  mewWallet,
  safe,
  magic,
  fortmatic,
  keystone,
  portis
]

const chains = [
  {
    id: '0x1',
    token: 'ETH',
    label: 'Ethereum Mainnet',
    rpcUrl: `https://mainnet.infura.io/v3/${INFURA_ID}`
  },
  {
    id: 11155111,
    token: 'ETH',
    label: 'Sepolia',
    rpcUrl: 'https://rpc.sepolia.org/'
  },
  {
    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: 'OP Mainnet',
    rpcUrl: 'https://mainnet.optimism.io'
  },
  {
    id: '0xA4B1',
    token: 'ARB-ETH',
    label: 'Arbitrum',
    rpcUrl: 'https://rpc.ankr.com/arbitrum'
  },
  {
    id: '0xa4ec',
    token: 'ETH',
    label: 'Celo',
    rpcUrl: 'https://1rpc.io/celo'
  },
  {
    id: 666666666,
    token: 'DEGEN',
    label: 'Degen',
    rpcUrl: 'https://rpc.degen.tips'
  },
  {
    id: 2192,
    token: 'SNAXETH',
    label: 'SNAX Chain',
    rpcUrl: 'https://mainnet.snaxchain.io'
  }
]

const appMetadata = {
  name: 'Connect Wallet Example',
  icon: '<svg>My App Icon</svg>',
  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
```

--------------------------------

### Clone the repo

Source: https://github.com/thirdweb-dev/web3-onboard/blob/develop/docs/src/routes/docs/[...1]overview/[...1]introduction/+page.md

Commands to clone the web3-onboard repository.

```bash
git clone git@github.com:blocknative/web3-onboard.git
cd web3-onboard
git checkout main
yarn
yarn dev
```

--------------------------------

### Implementation

Source: https://github.com/thirdweb-dev/web3-onboard/blob/develop/packages/para/README.md

Example of how to initialize the Para client, the Para module, and web3-onboard, and then connect a wallet.

```typescript
import Onboard from '@web3-onboard/core'
import Para, { Environment } from '@getpara/react-sdk'
import paraModule from '@web3-onboard/para'

// Initialize Para client
const para = new Para(
  Environment.BETA, // Use Environment.PROD for production
  'YOUR_API_KEY' // Your API key from developer.getpara.com
)

// Initialize the Para module
const paraWallet = paraModule(para)

// Initialize web3-onboard
const onboard = Onboard({
  // ... other Onboard options
  wallets: [
    paraWallet
    //... other wallets
  ]
})

// Connect wallet
const connectedWallets = await onboard.connectWallet()
console.log(connectedWallets)
```

--------------------------------

### Install

Source: https://github.com/thirdweb-dev/web3-onboard/blob/develop/packages/passport/README.md

Install the @web3-onboard/passport package and its dependencies.

```bash
pnpm install @web3-onboard/passport @0xpass/webauthn-signer
# OR
yarn add @web3-onboard/passport @0xpass/webauthn-signer
# OR
npm install @web3-onboard/passport @0xpass/webauthn-signer
```