viem stuff

import { useAccount, useConnect, useDisconnect, useWriteContract, useConfig } from 'wagmi'
import { parseEther } from 'viem'
import { createPublicClient, http } from 'viem'
import { scrollSepolia } from 'viem/chains'
import { useEffect, useState } from 'react'
import { waitForTransactionReceipt } from '@wagmi/core'

export const publicClient = createPublicClient({
  chain: scrollSepolia,
  transport: http()
})

// Add the contract ABI and address
const counterABI = [
  {
    inputs: [],
    name: "increment",
    outputs: [],
    stateMutability: "nonpayable",
    type: "function",
  },
  {
    inputs: [],
    name: "number",
    outputs: [{ type: "uint256" }],
    stateMutability: "view",
    type: "function",
  },
] as const

const COUNTER_ADDRESS = '0xFAf69d8e1b9B6c1F66dFc5539af03Ce4aA5243Aa'

export const wagmiContractConfig = {
  address: COUNTER_ADDRESS,
  abi: counterABI,
} as const

function App() {
  const account = useAccount()
  const { connectors, connect, status, error } = useConnect()
  const { disconnect } = useDisconnect()
  const [number, setNumber] = useState<bigint | null>(null)
  const config = useConfig()

  // Read the counter value directly using viem
  const fetchNumber = async () => {
    try {
      const result = await publicClient.readContract({
        address: COUNTER_ADDRESS,
        abi: counterABI,
        functionName: 'number',
      })
      setNumber(result)
    } catch (error) {
      console.error('Error reading contract:', error)
    }
  }

  useEffect(() => {
    fetchNumber()
  }, [])

  // Write function to increment
  const { writeContract, isPending: isIncrementing } = useWriteContract()

  const handleTransactionSubmitted = async (txHash: string) => {
    try {
      console.log('Waiting for transaction receipt...', txHash)
      const transactionReceipt = await publicClient.waitForTransactionReceipt({
        hash: txHash as `0x${string}`,
        confirmations: 1,
        timeout: 60_000,
      })
      console.log('Transaction receipt:', transactionReceipt)

      if (transactionReceipt.status === "success") {
        console.log('Transaction successful, fetching new number...')
        fetchNumber()
      } else {
        console.log('Transaction failed:', transactionReceipt)
      }
    } catch (error) {
      console.error('Error waiting for transaction:', error)
    }
  }

  const handleIncrement = () => {
    writeContract({
      ...wagmiContractConfig,
      functionName: 'increment',
    }, {
      onSuccess: handleTransactionSubmitted,
    })
  }

  return (
    <>
      <div>
        <h2>Account</h2>
        <div>
          status: {account.status}
          <br />
          addresses: {JSON.stringify(account.addresses)}
          <br />
          chainId: {account.chainId}
        </div>

        {account.status === 'connected' && (
          <button type="button" onClick={() => disconnect()}>
            Disconnect
          </button>
        )}
      </div>

      <div>
        <h2>Connect</h2>
        {connectors.map((connector) => (
          <button
            key={connector.uid}
            onClick={() => connect({ connector })}
            type="button"
          >
            {connector.name}
          </button>
        ))}
        <div>{status}</div>
        <div>{error?.message}</div>
      </div>

      {/* Add Counter Section */}
      <div>
        <h2>Counter</h2>
        <div>Current number: {number?.toString()}</div>
        {account.status === 'connected' && (
          <button 
            type="button" 
            onClick={handleIncrement}
            disabled={isIncrementing}
            style={{ marginTop: '10px' }}
          >
            {isIncrementing ? 'Incrementing...' : 'Increment'}
          </button>
        )}
      </div>
    </>
  )
}

export default App