Magic Wallet

@web3-onboard/magic

Wallet module for connecting Magic wallets to Onboard V2

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

npm i @web3-onboard/magic
Head over to https://magic.link/ and signup to get an API key

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 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.
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

Building

There is a known build issue when building with the magic-sdk package and is outlined here as a github issue. There error only occurs in env with CI=true and looks something like
The prop value with an expression type of ChainExpression could not be resolved. Please file issue to get this fixed immediately.
Compiled with warnings.
./node_modules/magic-sdk/dist/es/index.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
A fix for react projects can be found in our reactDemo using CRACO as a bundle configurer and the configuration can be seen here
const path = require("path");
module.exports = {
reactScriptsVersion: "react-scripts" /* (default value) */,
webpack: {
alias: {
"magic-sdk": path.resolve(
__dirname,
"node_modules/magic-sdk/dist/cjs/index.js"
),
},
},
};
Copy link
On this page
@web3-onboard/magic
Wallet module for connecting Magic wallets to Onboard V2
Options
Usage
Building