thirdweb sendCalls

App.tsx

import { useState } from 'react'
import { useSendCalls, ConnectButton, useActiveWallet } from "thirdweb/react";
import { createThirdwebClient, type ThirdwebClient, prepareTransaction } from "thirdweb";
import { CHAIN, CLIENT_ID } from './config';

console.log(CHAIN, CLIENT_ID);

const client: ThirdwebClient = createThirdwebClient({
  clientId: CLIENT_ID,
});

function App() {
  const { mutate: sendCalls, data: bundleId } = useSendCalls();
  const [transactionStatus, setTransactionStatus] = useState<string>("");
  const activeWallet = useActiveWallet();
  
  const transactions = [
    {
      to: "0x0000000000000000000000000000000000000000",
      value: "0",
      data: "0x00" as `0x${string}`
    },
    {
      to: "0x0000000000000000000000000000000000000000",
      value: "0",
      data: "0x00" as `0x${string}`
    }
  ];

  const handleSendCalls = async () => {
    if (!activeWallet) {
      setTransactionStatus("Please connect your wallet first");
      return;
    }

    try {
      // Prepare the transactions
      const tx1 = await prepareTransaction({
        client,
        chain: CHAIN,
        to: transactions[0].to,
        value: BigInt(0),
        data: transactions[0].data,
      });
      
      const tx2 = await prepareTransaction({
        client,
        chain: CHAIN,
        to: transactions[1].to,
        value: BigInt(0),
        data: transactions[1].data,
      });

      await sendCalls({
        calls: [tx1, tx2],
        capabilities: {
          paymasterService: {
            url: `https://${CHAIN.id}.bundler.thirdweb.com/${client.clientId}`,
          },
        },
      });
      setTransactionStatus("Transaction sent successfully!");
      console.log("Bundle ID:", bundleId);
    } catch (error) {
      setTransactionStatus("Error sending transaction");
      console.error("Error sending calls:", error);
    }
  };

  return (
    <div className="App">
      <h1>Thirdweb EIP-7702 Example</h1>
      <ConnectButton client={client} />
      
      <div style={{ margin: '20px 0', padding: '20px', border: '1px solid #ccc', borderRadius: '8px' }}>
        <h3>Batched Transactions:</h3>
        {transactions.map((tx, index) => (
          <div key={index} style={{ margin: '10px 0', padding: '10px', backgroundColor: '#f5f5f5', borderRadius: '4px' }}>
            <p><strong>Transaction {index + 1}:</strong></p>
            <p>To: {tx.to}</p>
            <p>Value: {tx.value} ETH</p>
            <p>Data: {tx.data}</p>
          </div>
        ))}
      </div>

      <button 
        onClick={handleSendCalls}
        disabled={!activeWallet}
        style={{ 
          padding: '10px 20px',
          fontSize: '16px',
          backgroundColor: !activeWallet ? '#ccc' : '#4CAF50',
          color: 'white',
          border: 'none',
          borderRadius: '4px',
          cursor: !activeWallet ? 'not-allowed' : 'pointer'
        }}
      >
        Send Batched Transactions
      </button>
      
      {transactionStatus && (
        <p style={{ 
          margin: '20px 0',
          padding: '10px',
          backgroundColor: transactionStatus.includes('Error') ? '#ffebee' : '#e8f5e9',
          borderRadius: '4px'
        }}>
          {transactionStatus}
        </p>
      )}
    </div>
  )
}

export default App