Transaction Signing

Transaction Signing

#Overview

Magic offers out-of-the-box UI 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. The user will then be presented with a confirmation page in a new tab where they can accept the transaction.

#Compatibility

  • For Dedicated Wallet, the transaction modal is disabled by default and can be enabled within the developer dashboard in Customization -> Widget UI.
  • For Universal Wallet, the transaction modal is enabled by default and cannot be turned off.

#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 transaction for signature request: ⁠

Web3.js
Ethers.js
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