Enviar una transacción patrocinada

En este tutorial, aprenderemos cómo enviar transacciones patrocinadas usando Web SDK.

1. Configurar Web SDK

   Asegúrese de haber completado la guía de Primeros Pasos.

2. Configure su Gas Tank (solo para Mainnet)

   Si planea enviar transacciones en mainnet, necesita configurar su gas tank. Vaya a Gas Sponsorhip para aprender cómo configurarlo.

   Todas las transacciones de smart wallet de Sequence están patrocinadas por defecto en testnets.

3. Enviar una transacción patrocinada

   A continuación, crearemos un componente sencillo para enviar una transacción patrocinada.

   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>
       )
   }
   

¡Felicidades! Acaba de aprender cómo enviar una transacción patrocinada usando Web SDK.