Native Integration

npm install @abstract-foundation/agw-react @abstract-foundation/agw-client wagmi [email protected] @tanstack/react-query

yarn add @abstract-foundation/agw-react @abstract-foundation/agw-client wagmi [email protected] @tanstack/react-query

pnpm add @abstract-foundation/agw-react @abstract-foundation/agw-client wagmi [email protected] @tanstack/react-query

bun add @abstract-foundation/agw-react @abstract-foundation/agw-client wagmi [email protected] @tanstack/react-query

import { useAbstractClient } from "@abstract-foundation/agw-react";

export default function SendTransactionButton() {
  // Option 1: Access and call methods directly
  const { data: client } = useAbstractClient();

  async function sendTransaction() {
    if (!client) return;

    // Submits a transaction from the connected AGW smart contract wallet.
    const hash = await client.sendTransaction({
      to: "0x273B3527BF5b607dE86F504fED49e1582dD2a1C6",
      data: "0x69",
    });
  }

  return <button onClick={sendTransaction}>Send Transaction</button>;
}

import { useWriteContractSponsored } from "@abstract-foundation/agw-react";
import { parseAbi } from "viem";
import { getGeneralPaymasterInput } from "viem/zksync";

export default function SendTransaction() {
  const { writeContractSponsoredAsync } = useWriteContractSponsored();

  async function sendSponsoredTransaction() {
    const hash = await writeContractSponsoredAsync({
      abi: parseAbi(["function mint(address to, uint256 amount)"]),
      address: "0xC4822AbB9F05646A9Ce44EFa6dDcda0Bf45595AA",
      functionName: "mint",
      args: ["0x273B3527BF5b607dE86F504fED49e1582dD2a1C6", BigInt(1)],
      paymaster: "0x5407B5040dec3D339A9247f3654E59EEccbb6391",
      paymasterInput: getGeneralPaymasterInput({
        innerInput: "0x",
      }),
    });
  }

  return (
    <button onClick={sendSponsoredTransaction}>
      Send Sponsored Transaction
    </button>
  );
}

import { useAccount, useSendTransaction } from "wagmi";

export default function SendTransactionWithWagmi() {
  const { address, status } = useAccount();
  const { sendTransaction, isPending } = useSendTransaction();

  return (
    <button
      onClick={() =>
        sendTransaction({
          to: "0x273B3527BF5b607dE86F504fED49e1582dD2a1C6",
          data: "0x69",
        })
      }
      disabled={isPending || status !== "connected"}
    >
      {isPending ? "Sending..." : "Send Transaction"}
    </button>
  );
}