Transaction Signing

Transaction Signing

#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 web3.js or ethers.js.

Once the method is invoked, Magic will provide information about the transaction, and the cost including estimated gas fees.

#Compatibility

  • For Dedicated Wallet, 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".
  • For Universal Wallet, Transaction Signing UI and Sign Confirmation are enabled by default and cannot be turned off
restricted availability

Universal wallets will soon be merged with Dedicated Wallets into a single product line. Universal apps created before February 7, 2024 will work as expected with no change. See our blog post to learn more.

#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: ⁠

Web3.js
Ethers (v6)
Ethers (v5)
01import Web3 from 'web3';
02import { Magic } from 'magic-sdk';
03
04const magic = new Magic('YOUR_API_KEY', {
05  network: "goerli", // Ethereum testnet
06});
07
08const web3 = new Web3(magic.rpcProvider);
09
10const txnParams = {
11    from: account,
12    to: toAddress,
13    value: web3.utils.toWei(amount, "ether"),
14    gas: 21000
15};
16
17web3.eth
18    .sendTransaction(txnParams)
19    .on("transactionHash", (hash) => {
20        console.log("Transaction hash:", hash);
21    })
22    .then((receipt) => {
23        console.log("Transaction receipt:", receipt);
24    })
25    .catch((error) => {
26        console.error(error);
27    });

#Configuration

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

#Resources