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
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
- Requesting signatures from users for any transaction on the supported networks
#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:
01import Web3 from 'web3';
02import { Magic } from 'magic-sdk';
03
04const magic = new Magic('YOUR_API_KEY', {
05 network: "sepolia", // 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.