setup.ts

###SETUP
// config/index.tsx

import { defaultWagmiConfig } from "@web3modal/wagmi/react/config";

import { cookieStorage, createStorage, http } from "wagmi";
import { mainnet, sepolia } from "wagmi/chains";
// Your WalletConnect Cloud project ID
export const projectId = "8283a687dc64c79ec2996ba017e7cb5e";

// Create a metadata object
const metadata = {
  name: "seree-live",
  description: "Web3Modal Example",
  url: "https://web3modal.com", // origin must match your domain & subdomain
  icons: ["https://avatars.githubusercontent.com/u/37784886"],
};
// Create wagmiConfig
const chains = [mainnet, sepolia] as const;
export const config = defaultWagmiConfig({
  chains,
  projectId,
  metadata,
  ssr: true,
  transports: {
    [mainnet.id]: http(
      `https://${chains[0].id == 1 && "eth-mainnet"}.g.alchemy.com/v2/${
        process.env.NEXT_PUBLIC_ALCHEMY_API_KEY
      }`
    ),
    [sepolia.id]: http(
      `https://${chains[1].id == 11155111 && "eth-sepolia"}.g.alchemy.com/v2/${
        process.env.NEXT_PUBLIC_ALCHEMY_API_KEY
      }`
    ),
  },
  storage: createStorage({
    storage: cookieStorage,
  }),
  // Optional - Override createConfig parameters
});


### Execution of hook:

"use client";

import React, { useState } from "react";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "./input";
import { Currency } from "../currency";
import CurrencyAPI from "@everapi/currencyapi-js";
import { Label } from "./label";
import { Bank } from "../banks";

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import { useAccount, useConfig, usePublicClient, useWriteContract } from "wagmi";
import abi from "@/abi/pay.json";
import { CONTRACT_ADDRESS } from "@/utils/helper";
import { Address, formatEther, parseEther } from "viem";
import { v4 as uuidv4 } from "uuid";

export default function Try() {
  const [payAmount, setPayAmount] = useState("");
  const [accountNumber, setAccountNumber] = useState("");
  // const [exchangeRate, setExchangeRate] = useState(0);
  // const [isConfirmClicked, setIsConfirmClicked] = useState(false);
  const { data: hash, isPending, writeContract } = useWriteContract();
  const {isConnected} = useAccount()
  // const currencyApi = new CurrencyAPI(process.env.NEXT_PUBLIC_CURRENCY_API_KEY);




  const handlePayTransaction = async () => {
    if (payAmount.trim() === "" || accountNumber.trim() === "") {
      alert("Input fields cannot be empty");
      return;
    }
    
  
    try {
      if(isConnected){
        let uuid = uuidv4();
        let formattedAmount = parseEther(payAmount);
         writeContract({
          address: "0x10846782C728a193102A7cf3a7c40E2071Ebc958",
          abi,
          functionName: "placeOrder",
          args: [uuid, formattedAmount, accountNumber],
        });
    
      }else{
        console.error("not connected")
      }
    } catch (error) {
      console.error("Transaction error:", error);
      alert("An error occurred while processing the transaction. Please try again.");
    }
  };

  return (
    <Card className="w-full md:w-1/3 mt-8 mx-auto md:ml-96 space-y-6">
      <CardHeader className="pb-3">
        <CardTitle>Pay Anytime, Anywhere</CardTitle>
        <CardDescription className="max-w-lg text-balance leading-relaxed">
          You Pay
        </CardDescription>
      </CardHeader>
      <CardContent>
        <div className="flex flex-col md:flex-row w-full max-w-sm items-center space-x-2 space-y-2 md:space-y-0">
          <Input
            type="number"
            value={payAmount}
            onChange={(e) => setPayAmount(e.target.value)}
            placeholder="Pay Amount"
            className="w-full md:w-auto"
          />
          {/* <Currency /> */}
        </div>
      </CardContent>
      <CardDescription className="max-w-lg text-balance leading-relaxed ml-7">
        To:
      </CardDescription>
      <CardContent>
        <div className="flex flex-col md:flex-row w-full max-w-sm items-center space-x-2 space-y-2 md:space-y-0">
          {/* <Bank /> */}
          <Input
            type="text"
            value={accountNumber}
            onChange={(e) => setAccountNumber(e.target.value)}
            placeholder="Phone Number"
            className="w-full md:w-auto"
          />
        </div>
      </CardContent>
      <CardFooter>
        <div className="flex justify-between items-center mt-2">
          <button className="bg-gray-200 px-2 rounded-lg" disabled={isPending} onClick={handlePayTransaction}>{isPending? 'Submitting': 'Pay'}</button>
        </div>
      </CardFooter>

    </Card>
  );
}

try this:

let placeOrder = await writeContract(config, {
address: "0x10846782C728a193102A7cf3a7c40E2071Ebc958",
abi,
functionName: "placeOrder",
args: [uuid, formattedAmount, accountNumber],
});

import { http, createConfig } from '@wagmi/core'
export const config = createConfig({
chains: [chain imported from "wagmi/chains"],
transports: {
["chain id"]: http(),
},
ssr: true,
})

When i specify config, it returns the error below:
Argument of type 'Config<readonly [{ blockExplorers: { readonly default: { readonly name: "Etherscan"; readonly url: "https://etherscan.io"; readonly apiUrl: "https://api.etherscan.io/api"; }; }; contracts: { readonly ensRegistry: { ...; }; readonly ensUniversalResolver: { ...; }; readonly multicall3: { ...; }; }; ... 9 more ...; ser...' is not assignable to parameter of type '{ abi: Abi | readonly unknown[]; functionName: string; args?: readonly unknown[] | undefined; address: 0x${string}; chain?: Chain | null | undefined; account?: 0x${string} | Account | undefined; value?: undefined; ... 15 more ...; __mode?: "prepared" | undefined; } | { ...; } | { ...; } | { ...; }'.ts(2345)