web3-onboard

This release updates the core package to the latest version which includes the new Account Center UI.

Changelog:

• Update packages (#927)

This release includes a new Account Center UI that allows for easy management of connected wallets and accounts. The UI is opt out, so simply upgrading to this version will add the new UI:

Minimized UI:

Maximized UI:

There are some new initialization options for the account center UI that allow for customizing it's position on the page as well as a way to disable the UI if you like:

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

const injected = injectedModule()

const onboard = Onboard({
  wallets: [injected],
  accountCenter: {
    desktop: {
      enabled: true,
      position: 'topRight'
    }
  }
  chains: [
    {
      id: '0x1',
      token: 'ETH',
      label: 'Ethereum Mainnet',
      rpcUrl: `https://mainnet.infura.io/v3/${INFURA_ID}`,
      icon: '<MAINNET_ICON_SVG_STRING>',
      color: '#627EEA'
    }
  ],
  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/' }
    ]
  }
})

The chain object that is passed in to initialization also has two new optional parameters: icon and color. These parameters are used for displaying the connected chain in the account center UI. There are a number of chains that have icons and colors that work out of the box which can be found here. You can override the icon and color for any of those chains or leave them out if you like the defaults.

Changelog:

• Feature: Account Center UI (#917)

This release updates the provider flag that is used to detect Brave wallet.

Changelog:

• fix: update brave wallet identity check (#919)

The WalletLink package is now deprecated in favor of the new Coinbase Wallet SDK package.

Changelog:

• Adds coinbase-wallet-sdk (#904)

This release includes a new package for the Coinbase wallet sdk that replaces the now deprecated WalletLink package. If you are running the WalletLink package, please swap it out for this one.

Thanks to @erin-at-work for the PR.

Changelog:

• Adds coinbase-wallet-sdk (#904)

This release adds a small build change so that the en.json file is copied over to the dist folder to prevent types breaking in some Vite builds. Thanks to @gdixon for the PR!

Changelog:

• fix: exports i18n/en.json to dist #916

A small release to update to the latest core version

Changelog:

• [core-v2.1.0] - Feature: Update Wallets without Re-Initialization (#906)

This release includes a new feature allowing for dynamic updating of the wallet modules that are displayed to the user in the wallet select modal, without needing to re-initialize. To enable this, a new actions object has been added to the state object, exposing a setWalletModules function. Example usage below:

import Onboard from '@web3-onboard/core'
import injectedModule from '@web3-onboard/injected-wallets'
import ledgerModule from '@web3-onboard/ledger'
import trezorModule from '@web3-onboard/trezor'

const injected = injectedModule()
const ledger = ledgerModule()
const trezor = trezorModule({
  email: '<EMAIL_CONTACT>',
  appUrl: '<APP_URL>'
})

// initialize with injected and hardware wallets
const onboard = Onboard({
  wallets: [injected, trezor, ledger],
  chains: [
    {
      id: '0x1',
      token: 'ETH',
      label: 'Ethereum Mainnet',
      rpcUrl: `https://mainnet.infura.io/v3/${INFURA_ID}`
    }
  ]
})

// then after a user action, you may decide to only display hardware wallets on the next call to onboard.connectWallet
onboard.state.actions.setWalletModules([ledger, trezor])

Changelog:

• [core-v2.1.0] - Feature: Update Wallets without Re-Initialization (#906)

This release adds a provider request function that passes on any RPC requests to the RPC URL that are not explicitly patched.

Changelog:

• [fix]: Hardware Wallet Providers Send Transaction (#894)

This release adds a provider request function that passes on any RPC requests to the RPC URL that are not explicitly patched.

Changelog:

• [fix]: Hardware Wallet Providers Send Transaction (#894)

This release adds a provider request function that passes on any RPC requests to the RPC URL that are not explicitly patched.

Changelog:

• [fix]: Hardware Wallet Providers Send Transaction (#894)

The release of the Ledger includes two important bugfixes:

• The Ledger Live derivation path was incorrectly deriving addresses which is now fixed
• The provider was missing a request function to proxy any RPC requests that are not explicitly patched.

Changelog:

• [refactor]: Alternative method of address generation for Ledger (#901)
• [fix]: Hardware Wallet Providers Send Transaction (#894)

This release includes a fix for handling initial state more reliably when components using the hooks render before a wallet is set.

This gives initial state to all the hooks using the web3-onboard api strengthening reliability and uniform functionality throughout your application using the hooks.

This release includes incremented version for the web3-onboard core and common packages in the react hook package.

These updates include a new instance prop in the walletInterface type to allow passing of a wallet instance along with the provider in certain wallet modules.
This is beneficial for wallets that have extra methods built in to the walletInstance that is not standard across wallets.

e.g. Magic wallet has methods userMetaData() and resetEmail() that are exposed through the instance property

type WalletInterface = {
  provider: EIP1193Provider,
  instance?: unknown
}

Changelog:

• web3-onboard/react:v2.0.4: [update] - Update deps for React Package #882

The Magic module provides email login support for the Magic Wallet through web3-onboard.

Install

npm i @web3-onboard/magic

Head over to https://magic.link/ and signup to get an API key for your DApp

Login options

• Email - The Magic module comes with a built in email login modal that is customizable
  in the same fashion that all other web3-onboard UI components are

• note: The Magic Module currently only supports email login but we are open to expand to sms or socials*

Initialization Options

type magicOptions = {
  apiKey: string
}

Usage

import Onboard from '@web3-onboard/core'
import magicModule from '@web3-onboard/magic'

const magic = magicModule({ apiKey: 'API_KEY' })

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

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

Accessing the Magic Wallet Internals

When a Magic wallet is connect the Magic instance is exposed.
This can be used to get information such as user Metadata, update a user's email address or handle the user's token.

const [magicWallet] = await onboard.connectWallet()

try {
  const { email, publicAddress } = await magicWallet.instance.user.getMetadata();
} catch {
  // Handle errors if required!
}

For full documentation and examples please visit Magic's official docs

Changelog:

• web3-onboard/magic:v2.0.0: [feature] - Magic wallet module addition #879

This release includes a bug fix that was not allowing the provider to properly reset and patch after wallet_switchEthereumChain is called

Changelog:

• web3-onboard/fortmatic:v2.0.2: [feature] - Magic wallet module addition #879

Handling of the new instance prop in the walletInterface type to allow for passing of a wallet instance with the provider in certain wallet.
This is beneficial for wallets that have extra methods built in to the walletInstance that is not standard across wallets.

e.g. Magic wallet has methods userMetaData() and resetEmail() that are exposed through the instance property

type WalletInterface = {
  provider: EIP1193Provider,
  instance?: unknown
}

Changelog:

• web3-onboard/core:v2.0.11: [feature] - Magic wallet module addition #879

Addition of the instance prop to walletInterface type to allow for passing of a wallet instance with the provider in certain wallet.
This is beneficial for wallets that have extra methods built in to the walletInstance that are not standard across wallets.

e.g. Magic wallet has methods userMetaData() and resetEmail() that are exposed through the instance property.

type WalletInterface = {
  provider: EIP1193Provider,
  instance?: unknown
}

Changelog:

• web3-onboard/common:v2.0.3: [feature] - Magic wallet module addition #879

A small release that adds a CSS var for all modals z-index property which can be modified via --onboard-modal-z-index: <new value>

Changelog:

• Add modals z-index (#876)

Two small releases for the torus and fortmatic modules which fixes bugs where calls to parseInt with hex string values were incorrectly using a radix of 10.

Changelog:

• [fix] parseInt Calls (#875)