1
Web SDKのセットアップ
はじめにガイドを完了してください。
2
ガスタンクのセットアップ（メインネットのみ）
メインネットで取引を送信する場合は、ガスタンクのセットアップが必要です。Gas Sponsorhipでガスタンクのセットアップ方法をご確認ください。
すべてのSequenceスマートウォレット取引は、テストネットではデフォルトでスポンサーされています。
3
スポンサー取引を送信する
次に、スポンサー取引を送信するシンプルなコンポーネントを作成します。
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>
)
}