[core] - Account Center

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)