スポンサー取引を送信する

import React from 'react';
import { useAccount, useSendTransaction } from 'wagmi';

export const SponsoredTransactionExample = () => {
    const { address } = useAccount();

    const {
        sendTransaction,
        isPending,
        isSuccess,
        data: txHash
    } = useSendTransaction();

    const sendSponsoredTx = () => {
        if (!address) return;
        // Sending a dummy tx
        sendTransaction({
            to: address,
            value: BigInt(0),
            gas: null
        });
    };

    return (
        <div className="space-y-6">
            <div className="bg-gray-700/30 p-4 rounded-lg">
                <p className="text-sm text-gray-400 mb-1">Your Wallet Address</p>
                <p className="font-mono text-gray-200 break-all">
                    {address || 'Not connected'}
                </p>
            </div>

            <button
                onClick={sendSponsoredTx}
                disabled={!address || isPending}
                className={`w-full px-4 py-3 rounded-lg font-semibold transition-all duration-200 ${
                    !address || isPending
                        ? 'bg-gray-600 cursor-not-allowed'
                        : 'bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 hover:scale-[1.02]'
                }`}
            >
                {isPending ? (
                    <div className="flex items-center justify-center gap-2">
                        <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
                        <span>Sending Transaction...</span>
                    </div>
                ) : (
                    'Send Sponsored Transaction'
                )}
            </button>

            {isSuccess && (
                <div className="bg-green-900/30 border border-green-800 p-4 rounded-lg">
                    <div className="flex items-center gap-2 text-green-400 mb-2">
                        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                        </svg>
                        <span className="font-semibold">Transaction Successful!</span>
                    </div>
                    <p className="text-sm text-gray-300">Transaction Hash:</p>
                    <p className="font-mono text-sm text-gray-400 break-all">
                        {txHash}
                    </p>
                </div>
            )}
        </div>
    )
}