1. Wallets
  2. Magic

Wallets

Magic

Wallet module for connecting Magic wallets to Web3 Onboard.

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*

Install

Options

        type MagicInitOptions = {
  apiKey: string
  userEmail?: string // optional - if user has already logged in and/or session is still active a login modal will not appear
}

      

Usage

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

const magic = magicModule({
  apiKey: 'API_KEY',
  userEmail: localStorage.getItem('magicUserEmail')
})

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

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

      

Accessing the Magic Wallet configuration

When a Magic wallet is connected 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. The user's email can be set in local storage and passed through the MagicInitOptions to avoid a user having to login again if they are returning to the dapp within the set user session time. Magic has a default time of 7 days and this can be configured through your Magic API Key settings.

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

      

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

Custom Styling

The Magic Wallet Login styles can customized via CSS variables. The following properties and their default properties can be customized by adding these variables to the :root in your CSS file. If they are not specified they will fall back on the style variables prefixed with --onboard and beyond that to the styles developed by Web3 Onboard:

        :root {
  /* *if not set will fallback to variables with `--onboard` prefix shown above */
  /* CUSTOMIZE THE COLOR  PALLETTE */
  --login-modal-white: white;
  --login-modal-black: black;
  --login-modal-primary-300: #b1b8f2;
  --login-modal-primary-500: #6370e5;
  --login-modal-gray-200: #c2c4c9;
  --login-modal-gray-500: #33394b;
  --login-modal-danger-500: #ff4f4f;

  /* FONTS */
  --login-modal-font-family-normal: Inter, sans-serif;
  --login-modal-font-size-5: 1rem;
  --login-modal-font-line-height-1: 24px;

  /* SPACING */
  --login-modal-margin-4: 1rem;
  --login-modal-margin-5: 0.5rem;

  /* MAGIC WALLET MODAL POSITIONING */
  --onboard-login-modal-z-index
  --onboard-login-modal-top
  --onboard-login-modal-bottom
  --onboard-login-modal-right
  --onboard-login-modal-left

}

      

Build Environments

For build env configurations and setups please see the Build Env section here