> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getpara.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Watch Contract Events

> Listen to smart contract events and parse event logs in real-time

export const Link = ({href, label, newTab = false}) => {
  const [isHovered, setIsHovered] = useState(false);
  return <a href={href} target={newTab ? '_blank' : '_self'} rel={newTab ? 'noopener noreferrer' : undefined} className="not-prose inline-block relative text-black font-semibold cursor-pointer border-b-0 no-underline" onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
      {label}
      <span className={`absolute left-0 bottom-0 w-full rounded-sm bg-gradient-to-r from-orange-600 to-purple-600 transition-all duration-300 ${isHovered ? 'h-0.5' : 'h-px'}`} />
    </a>;
};

Subscribe to and filter smart contract events to react to on-chain activity in real-time.

## Prerequisites

You need Web3 libraries configured with Para authentication.

<Card title="Setup Web3 Libraries" description="Configure Ethers.js, Viem, or Wagmi with Para before proceeding" href="/v3/react/guides/web3-operations/evm/setup-libraries" />

## Watch Contract Events

<Tabs>
  <Tab title="Ethers.js">
    ```typescript theme={null}
    import { ethers } from "ethers";

    const ERC20_ABI = [
      "event Transfer(address indexed from, address indexed to, uint256 value)"
    ];

    async function watchTransferEvents(
      provider: ethers.Provider,
      tokenAddress: string
    ) {
      const contract = new ethers.Contract(
        tokenAddress,
        ERC20_ABI,
        provider
      );

      contract.on("Transfer", (from, to, value, event) => {
        console.log(`Transfer Event: ${from} -> ${to}, Value: ${ethers.formatUnits(value, 18)}`);
        console.log("Event details:", event);
      });

      console.log(`Listening for Transfer events on ${tokenAddress}...`);
    }

    async function stopWatchingTransferEvents(
      provider: ethers.Provider,
      tokenAddress: string
    ) {
      const contract = new ethers.Contract(
        tokenAddress,
        ERC20_ABI,
        provider
      );
      contract.off("Transfer");
      console.log(`Stopped listening for Transfer events on ${tokenAddress}.`);
    }
    ```
  </Tab>

  <Tab title="Viem">
    ```typescript theme={null}
    import { createPublicClient, http } from "viem";
    import { mainnet } from "viem/chains";

    const ERC20_ABI = [
      {
        anonymous: false,
        inputs: [
          { indexed: true, name: "from", type: "address" },
          { indexed: true, name: "to", type: "address" },
          { indexed: false, name: "value", type: "uint256" },
        ],
        name: "Transfer",
        type: "event",
      },
    ] as const;

    async function watchTransferEvents(
      publicClient: any,
      tokenAddress: `0x${string}`
    ) {
      const unwatch = publicClient.watchContractEvent({
        address: tokenAddress,
        abi: ERC20_ABI,
        eventName: "Transfer",
        onLogs: (logs) => {
          for (const log of logs) {
            console.log(`Transfer Event: ${log.args.from} -> ${log.args.to}, Value: ${log.args.value}`);
            console.log("Log details:", log);
          }
        },
      });

      console.log(`Listening for Transfer events on ${tokenAddress}...`);
      return unwatch; // Return the unwatch function to stop listening later
    }
    ```
  </Tab>

  <Tab title="Wagmi">
    ```typescript theme={null}
    import { useWatchContractEvent } from "@getpara/react-sdk/wagmi";

    const ERC20_ABI = [
      {
        anonymous: false,
        inputs: [
          { indexed: true, name: "from", type: "address" },
          { indexed: true, name: "to", type: "address" },
          { indexed: false, name: "value", type: "uint256" },
        ],
        name: "Transfer",
        type: "event",
      },
    ] as const;

    function WatchTransferEvents({ tokenAddress }: { tokenAddress: `0x${string}` }) {
      useWatchContractEvent({
        address: tokenAddress,
        abi: ERC20_ABI,
        eventName: "Transfer",
        onLogs: (logs) => {
          for (const log of logs) {
            console.log(`Transfer Event: ${log.args.from} -> ${log.args.to}, Value: ${log.args.value}`);
            console.log("Log details:", log);
          }
        },
      });

      return <div>Listening for Transfer events on {tokenAddress}...</div>;
    }
    ```
  </Tab>
</Tabs>

## Next Steps

<CardGroup cols={3}>
  <Card title="Get Transaction Receipt" description="Fetch and parse transaction receipts" href="/v3/react/guides/web3-operations/evm/get-transaction-receipt" icon="receipt" />

  <Card title="Interact with Contracts" description="Read and write smart contract data" href="/v3/react/guides/web3-operations/evm/interact-with-contracts" icon="file-contract" />

  <Card title="Estimate Gas" description="Calculate gas costs for transactions" href="/v3/react/guides/web3-operations/evm/estimate-gas" icon="gas-pump" />
</CardGroup>