DOCSEARCHbyAlgolia
Submit Docs

Web3-Onboard Documentation

repository·develop·Indexed 21 days ago

https://github.com/thirdweb-dev/web3-onboard

A framework-agnostic library for connecting Ethereum hardware and software wallets to dapps. It features standardized spec-compliant web3 providers, multi-chain and multi-account support, reactive wallet state subscriptions, and real-time transaction notifications. The library supports integration with Next.js, SolidJS, SvelteKit, Vue 2/3, and vanilla JavaScript.

Tokens
156.7K
Snippets
544
Records
614
Agent score
74%

What's inside Web3-Onboard

  1. Overview of Web3 Onboard features

    develop

    Web3 Onboard provides a unified interface for multi-wallet and multi-chain connectivity:

    • Minimal Dependencies: Wallet dependencies are isolated in separate packages.
    • Multi Wallet/Chain Support: Users can connect multiple wallets and accounts simultaneously and switch between networks.
    • Account Center: A built-in UI to manage connections and networks.
    • Themable: Supports custom styling or pre-made themes.
    • Unified Provider Interface: All modules expose a provider compliant with EIP-1193, EIP-1102, EIP-3085, EIP-3326, and EIP-6963.
    • Dynamic Imports: Wallet dependencies are only loaded when a user selects a specific wallet to save bandwidth.
    • Framework Agnostic: Works with any framework, with official helpers for React and Vue.

  3. Configure preferredAuthType in Particle Network

    develop

    The preferredAuthType option allows you to specify which authentication method should be prioritized or displayed.

    It accepts either a raw AuthTypes string or a PreferredAuthType object for more granular control.

    Supported AuthTypes: email | phone | google | apple | twitter | facebook | microsoft | linkedin | github | twitch | discord

    PreferredAuthType Object:

    • type: The AuthTypes to use.
    • setAsDisplay: A boolean indicating whether this type should be displayed within the UI.

  4. Understand Cede.store Vaults and CEX connections

    develop

    Vaults

    Vaults are bundles of CEX (Centralized Exchange) accounts. Users can create multiple vaults to manage different levels of access (e.g., a 'tracking' vault with read-only access vs. a 'trading' vault with full access). This allows users to grant dApps varying degrees of trust.

    Data Types

    Requests are categorized into two types:

    • Public requests: Data like prices, volumes, and historical data collected from various exchanges.
    • Private requests: Data like user balances, trades, and open positions, which are fetched directly from cede.store from the user's machine.

    All exchange requests and API key storage are handled securely by cede.store.

  5. Request data via cede.store provider

    develop

    Data requests through the cede.store extension are categorized into:

    • Public requests: Real-time streaming of prices, volumes, and historical data from various exchanges.
    • Private requests: User-specific data like balances, trades, and open positions, which are fetched directly from cede.store via the user's machine.

    Use provider.request({ method, params }) to interact with these data types.

  7. Access connected account and ENS information

    develop

    Once a wallet is connected, you can access account details through the wallets state. The state returns an array of connected wallets. For the first connected wallet, you can drill down into accounts[0] to find:

    • address: The wallet address.
    • ens: An object containing name and avatar if the user has an ENS name registered.

    Example pattern for extracting the primary account:

    const wallets$ = onboard.state.select('wallets')
const connectedAccount = $wallets$?.[0]?.accounts?.[0]
const address = connectedAccount?.address
const ensName = connectedAccount?.ens?.name
    <script lang="js">
  import onboard from './onboard.js'

  const wallets$ = onboard.state.select('wallets')

  // Reactive derivation of the connected account
  $: connectedAccount = $wallets$?.[0]?.accounts?.[0]
  $: address = connectedAccount?.address
  $: ensName = connectedAccount?.ens?.name
</script>

<div>
  {ensName ? ensName : address}
</div>

  8. Access wagmiConfig and wagmiConnector from onboard state

    develop

    Once initialized, the WAGMI module populates the onboard state with necessary configuration and connector objects:

    • wagmiConfig: Available at onboard.state.get().wagmiConfig. This object must be passed as the first argument to most @wagmi/core methods.
    • wagmiConnector: Available on individual wallet objects within the state (e.g., onboard.state.get().wallets[0].wagmiConnector). This allows you to target specific wallets for transactions or interactions.

  9. Configure preferred authentication types

    develop

    When using preferredAuthType in ParticleAuthModuleOptions, you can either provide a single AuthTypes value or a PreferredAuthType object to control UI display.

    Supported AuthTypes: email, phone, google, apple, twitter, facebook, microsoft, linkedin, github, twitch, discord.

    PreferredAuthType Object:

    • type: The AuthTypes value to use.
    • setAsDisplay: A boolean indicating whether this type should be displayed within the UI.
    interface PreferredAuthType {
  type: AuthTypes;
  setAsDisplay: boolean;
}

  10. Smart Wallet support in @web3-onboard/coinbase

    develop

    Starting from version 2.3.0, the Coinbase module supports Smart Wallets.

    Smart wallets reside in the browser and do not require extensions or app installs. They utilize passkeys for signing, providing enterprise-grade security without seed phrases. They work across major L2s and onchain applications. You can control whether to show only smart wallets using the supportedWalletType: 'smartWalletOnly' option.

  11. Framework-specific modules for React and Vue

    develop

    While Web3 Onboard is framework-agnostic, specialized modules are available for better integration:

    • @web3-onboard/react: Provides React Hooks to manage user connections and state within React applications.
    • @web3-onboard/vue: Provides reusable functions for Vue 3 projects (also compatible with Vue 2 using the Composition API).

  12. Understand cede.store Vaults and account management

    develop

    Vaults are bundles of CEX (Centralized Exchange) accounts. Users can create multiple vaults to provide dApps with varying levels of access (e.g., a 'tracking' vault with read-only access vs. a 'trading' vault with full access).

    Key characteristics:

    • Storage: API keys and vault data are stored in the browser's Local Storage.
    • Access Control: Allows users to limit dApp permissions based on trust levels.
    • Non-EIP-1193: Unlike traditional wallets, cede.store does not have a specific associated chain or a hex address.