import { useState } from "react";
import { parseEther } from "viem";
import { useAccount, useSendCalls, useSendCalls, useCallsStatus, useCapabilities } from "wagmi";
/**
* The burn address (0x0000000000000000000000000000000000000000)
*/
const BURN_ADDRESS = "0x0000000000000000000000000000000000000000" as const;
/**
* The amount to send in ETH (0.00001 ETH)
*/
const AMOUNT_TO_SEND = "0.00001";
/**
* SendCalls component that allows users with Smart Accounts to send ETH to the burn address
*
* @returns JSX element with transaction sending functionality
*/
export function WagmiSendCalls() {
const { address, isConnected } = useAccount();
const { data: userOpHash, sendCalls, isPending, error } = useSendCalls();
// Check the status of a sent user operation
const { isLoading: isConfirming, isSuccess } = useCallsStatus({
id: userOpHash as Hex,
query: {
enabled: !!userOpHash,
},
});
const chainId = useChainId();
const { data: walletCapabilities } = useCapabilities({
chainId,
});
// Check the capabilities of the wallet to determine if you can use user operations
const isSendCallsSupported = useMemo(() => {
return walletCapabilities?.atomic?.status === "supported";
}, [walletCapabilities]);
const handleSendCalls = async () => {
if (!isConnected || !address) return;
try {
sendCalls(
{
calls: [
{
to: BURN_ADDRESS,
value: parseEther(AMOUNT_TO_SEND),
},
],
}
);
} catch (err) {
console.log("Failed to send user operation: ", err)
}
};
if (!isSendCallsSupported) {
return (
<div>
<p>
This wallet does not support sending calls on chain {chainId}. Ensure your wallet has a
smart account, and is on a supported chain.
</p>
</div>
);
}
return (
<div>
<div>
<p>
⚠️ Warning: This will send {AMOUNT_TO_SEND} ETH to the burn address (0x0000...0000).
This operation cannot be reversed and the ETH will be permanently lost.
</p>
</div>
<div>
<div>
<div>Amount: {AMOUNT_TO_SEND} ETH</div>
<div>To (Burn Address): {BURN_ADDRESS.slice(0, 6)}...{BURN_ADDRESS.slice(-4)}</div>
<div>From: {address?.slice(0, 6)}...{address?.slice(-4)}</div>
</div>
</div>
{error && (
<div>
<strong>Error:</strong> {error.message}
</div>
)}
{!userOpHash && !isPending && (
<button disabled={!address} onClick={handleSendCalls}>
Send {AMOUNT_TO_SEND} ETH to Burn Address
</button>
)}
{(isPending || isConfirming) && (
<div>
<div>Sending transaction...</div>
{hash && (
<div>
Hash: {hash.slice(0, 10)}...{hash.slice(-8)}
</div>
)}
</div>
)}
{isSuccess && userOpHash && (
<div>
<div>
<div>✅</div>
</div>
<div>
<div>Operation Sent!</div>
<div>Your operation has been successfully sent to the burn address</div>
</div>
<div>
<div>Amount: {AMOUNT_TO_SEND} ETH</div>
<div>To: {BURN_ADDRESS.slice(0, 6)}...{BURN_ADDRESS.slice(-4)}</div>
<div>
Block Explorer:{" "}
<a
href={`https://sepolia.basescan.org/tx/${userOpHash}`}
target="_blank"
rel="noopener noreferrer"
>
{hash.slice(0, 10)}...{hash.slice(-8)}
</a>
</div>
</div>
<button onClick={handleReset}>
Send Another Operation →
</button>
</div>
)}
</div>
);
}
