Widget UI

Widget UI

#Overview

Get to market faster with our best-in-class, out-of-the-box UI that helps users view their assets and perform common blockchain interactions. You can customize the wallet UI experience by incorporating branding, NFTs, fiat-onramps, and more, allowing you to tailor the perfect web3 experience for your end-users.

The Widget UI currently supports the following blockchains: Ethereum, Polygon, Base, Arbitrum, Optimism, and Flow (no NFT viewer).

#Use Cases

  • Full Wallet Experience: Empower your users with an all-inclusive wallet UI that lets them effortlessly manage, view, send, and receive blockchain assets using just a single line of code
  • Transaction Signing: Utilize our secure transaction confirmation to collect direct confirmation from the user anytime a signature is requested from their wallet
  • Displaying Assets: Show the user just their address, token balances and/or their NFTs
  • Fiat On-Ramps: On-ramp providers allow your users to purchase tokens directly into their Magic wallet. We've partnered with Stripe to provide fiat on-ramp for Dedicated Wallets. Check out their supported blockchains, currencies, and geographies here. If you are interested in supporting other on-ramp providers, check out our Universal Wallet offering.

#Usage

To utilize the UI, you can simply call any of the following methods:

Javascript
01magic.wallet.connectWithUI() // Simple Email OTP login form
02magic.wallet.showUI() // Full end-user wallet experience
03magic.wallet.showAddress()
04magic.wallet.showSendTokensUI()
05magic.wallet.showBalances()
06magic.wallet.showNFTs()
07magic.wallet.showOnRamp()

connectWithUI

Renders a simple login form UI to collect the user's email address and authenticate them passwordlessly using a one-time passcode (OTP) sent to their email address they input.

showUI

Displays the fully navigable wallet to the user that adheres to the toggled configurations on your developer dashboard’s Widget UI tab. ⁠ ⁠This is only supported for users who login with email or Google and not third party wallets such as metamask. User must be signed in for this method to return or else it will throw an error.

showAddress

Displays an iframe with the current user’s wallet address in a QR Code.

showSendTokensUI

Displays an iframe with UI to help the user transfer tokens from their account to another address.

showBalances

Displays an iframe that displays the user’s token balances from the currently connected network.

showNFTs

Displays an iframe that shows the user’s NFTs in both an aggregated and detailed individual view. Supported only on Ethereum and Polygon. Ensure this is enabled in your developer dashboard via the ‘Widget UI’ tab.

showOnRamp

Displays an iframe modal with various on ramp providers for the user to purchase crypto from directly to their wallet.

To use the fiat on ramp for Dedicated Wallet apps, you will need to contact us to KYB with the payment provider prior to use. Once approved, ensure this toggle is enabled in your developer dashboard via the ‘Widget UI’ tab.

#Configuration

The developer dashboard’s "Widget UI" tab contains configurations that allows you to customize the wallet UI with some optional toggles:

  • With the “NFT” toggle, you can hide or show collectibles to your users. This setting will apply across all the UI methods.
  • With transaction signing on, any supported EVM RPC methods that require a signature will trigger a secure end-user confirmation prompt.

Note: Once you enable or disable a toggle, the client will need to be reloaded / refreshed in order to see the changes.

You are also able to customize the branding and theming of the UI through the developer dashboard.

#Resources