Thirdweb

import {
  ConnectButton,
  TransactionButton,
  useActiveAccount,
  useReadContract,
} from "thirdweb/react";
import { inAppWallet } from "thirdweb/wallets";
import { client } from "./client";
import { getContract } from "thirdweb";
import { defineChain } from "thirdweb/chains";
import { prepareContractCall, sendAndConfirmTransaction } from "thirdweb";

const THIRDWEB_API_KEY = import.meta.env.VITE_TEMPLATE_CLIENT_ID;

// Configure Sei network
const rpc = `https://1329.rpc.thirdweb.com/${THIRDWEB_API_KEY}`;
const seiChain = defineChain({
  id: 1329,
  rpc,
});

// Your deployed Storage contract address
const storageContract = getContract({
  client,
  chain: seiChain,
  address: "0xYourContractAddressHere", // Replace with your contract address
});

// Configure wallet options
const wallets = [
  inAppWallet({
    auth: {
      options: [
        "google",
        "x",
        "apple",
        "discord",
        "facebook",
        "farcaster",
        "telegram",
        "email",
        "phone",
        "passkey",
        "guest",
      ],
    },
  }),
];

// Store custom value function
async function handleStore(account: any, value: string) {
  if (!account) return;

  const transaction = prepareContractCall({
    contract: storageContract,
    method: "function store(uint256 num)",
    params: [BigInt(value)],
  });

  try {
    const txResult = await sendAndConfirmTransaction({
      transaction,
      account,
    });
    console.log("Transaction successful:", txResult.transactionHash);
    alert(`Stored ${value} successfully!`);
    return txResult.transactionHash;
  } catch (error) {
    console.error("Transaction failed:", error);
    alert("Transaction failed. Check console for details.");
  }
}

function App() {
  const account = useActiveAccount();

  // Read the stored value (free RPC call — no transaction needed)
  const { data: storedValue, refetch: refetchStoredValue } = useReadContract({
    contract: storageContract,
    method: "function retrieve() view returns (uint256)",
  });

  return (
    <div className="min-h-screen bg-gray-100 py-8">
      <div className="max-w-4xl mx-auto px-4">
        <h1 className="text-3xl font-bold text-center mb-8">
          Sei x thirdweb Account Abstraction
        </h1>

        <div className="bg-white  shadow-md p-6 mb-6">
          <h2 className="text-xl font-semibold mb-4">Connect Wallet</h2>
          <ConnectButton
            client={client}
            wallets={wallets}
            accountAbstraction={{
              chain: seiChain,
              sponsorGas: true,
            }}
            connectButton={{
              label: "Connect to Sei Network",
            }}
          />
        </div>

        {account && (
          <div className="bg-white  shadow-md p-6">
            <h3 className="text-xl font-semibold mb-4">
              Storage Contract Interactions
            </h3>
            <p className="text-gray-600 mb-6">
              Connected: {account.address}
            </p>

            <div className="space-y-4">
              <div>
                <h4 className="font-medium mb-2">Store Number 37</h4>
                <TransactionButton
                  transaction={() =>
                    prepareContractCall({
                      contract: storageContract,
                      method: "function store(uint256 num)",
                      params: [BigInt(37)],
                    })
                  }
                  onTransactionConfirmed={(result) => {
                    console.log("Confirmed:", result);
                    alert("Number 37 stored!");
                  }}
                  onError={(error) => {
                    console.error("Error:", error);
                    alert("Transaction failed.");
                  }}
                >
                  Store Number 37
                </TransactionButton>
              </div>

              <div>
                <h4 className="font-medium mb-2">Store Custom Number</h4>
                <button
                  onClick={() => {
                    const value = prompt("Enter a number:");
                    if (value && !isNaN(Number(value))) {
                      handleStore(account, value);
                    } else if (value) {
                      alert("Please enter a valid number");
                    }
                  }}
                  className="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600"
                >
                  Store Custom Number
                </button>
              </div>

              <div>
                <h4 className="font-medium mb-2">Retrieve Stored Number</h4>
                <p className="text-gray-600 mb-2">
                  Stored value:{" "}
                  {storedValue !== undefined ? storedValue.toString() : "—"}
                </p>
                <button
                  onClick={() => refetchStoredValue()}
                  className="bg-purple-500 text-white px-4 py-2 rounded hover:bg-purple-600"
                >
                  Refresh Number
                </button>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

export default App;