​
Overview

Magic offers out-of-the-box UI for Transaction Signing. This UI will be presented to the user whenever the sendTransaction EVM RPC method is called with a web3 provider library such as ethers.js.
image-8
Once the method is invoked, Magic will provide information about the transaction, and the cost including estimated gas fees.
image-6

​
Compatibility

  • Transaction Signing UI is disabled by default and can be enabled within the developer dashboard in Customization -> Widget UI. Magic also offers Sign Confirmation, a feature that secures users from front-end attacks, by prompting them to confirm the transaction in a Magic-hosted tab after clicking “Send”.

​
Use Cases

​
Usage

⁠Once you have verified the correct setup of the Magic SDK and successfully authenticated the user, you can proceed to send a request that invokes the Transaction Signature UI: ⁠ 
import { ethers } from 'ethers';
import { Magic } from 'magic-sdk';

const magic = new Magic('YOUR_PUBLISHABLE_API_KEY');
const provider = new ethers.BrowserProvider(magic.rpcProvider);

const signer = await provider.getSigner();

const txnParams = {
  to: toAddress,
  value: ethers.parseUnits('0.001', 'ether'),
};

const tx = await signer.sendTransaction(txnParams);

console.log(tx);

​
Configuration

See how to brand this experience with your own logo and colors in the customization section.

​
Resources