help me with useTransactionAsync/useTransaction

[TheGraveyardWarden]

yo
im tryna setup a telegram web app that users can connect to the okx wallet and perform transactions on duckchain network

my code is pretty nasty cuz i just want to see it working and it is not production ready yet
and im using react typescript as front (without vite)

src/index.ts

import ReactDOM from "react-dom/client";
import reportWebVitals from "./reportWebVitals";
import { RouterProvider } from "react-router-dom";
import router from "./router";

import { cookieStorage, createStorage, http } from '@wagmi/core'
import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
import { createAppKit } from '@reown/appkit/react'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { type ReactNode } from 'react'
import { cookieToInitialState, WagmiProvider, type Config } from 'wagmi'

// Get projectId from https://cloud.reown.com
export const projectId = "MY_PROJECT_ID"

if (!projectId) {
  throw new Error('Project ID is not defined')
}

const duckchain = {
  id: 5545,
  name: "DuckChain",
  // network: "duckchain",
  nativeCurrency: {
    name: "DUC",
    symbol: "DUC",
    decimals: 18,
  },
  rpcUrls: {
    default: {
      http: ["https://rpc.duckchain.io"],
    },
  },
  blockExplorers: {
    default: { name: "DuckScan", url: "https://scan.duckchain.io" },
  },
  testnet: false,
};

const duckchain_testnet = {
  id: 202105,
  name: "DuckChain Testnet",
  // network: "duckchain",
  nativeCurrency: {
    name: "DUC",
    symbol: "DUC",
    decimals: 18,
  },
  rpcUrls: {
    default: {
      http: ["https://testnet-rpc.duckchain.io"],
    },
  },
  blockExplorers: {
    default: { name: "DuckScan", url: "https://www.oklink.com/duckchain-testnet " },
  },
  testnet: true,
};

const networks = [duckchain, duckchain_testnet];

//Set up the Wagmi Adapter (Config)
export const wagmiAdapter = new WagmiAdapter({
  storage: createStorage({
    storage: cookieStorage
  }),
  ssr: true,
  networks,
  projectId,
  chains: [duckchain],
  transports: {
    [duckchain.id]: http(),
    [duckchain_testnet.id]: http(),
  }
})

// Set up queryClient
const queryClient = new QueryClient()

if (!projectId) {
  throw new Error('Project ID is not defined')
}

// Set up metadata
const metadata = { //this is optional
  name: "name",
  description: "desc",
  url: "https://t.me/user_bot/webapp", 
  icons: ["https://avatars.githubusercontent.com/u/179229932"]
}

// Create the modal
const modal = createAppKit({
  adapters: [wagmiAdapter],
  projectId,
  networks: [duckchain, duckchain_testnet],
  defaultNetwork: duckchain,
  metadata: metadata,
  features: {
    analytics: true,
    email: false,
    socials: false,
    emailShowWallets: false,
    onramp: false,
  },
  themeMode: 'dark',
  includeWalletIds: ["971e689d0a5be527bac79629b4ee9b925e82208e5168b733496a09c0faed0709"], // okx wallet id
  featuredWalletIds: ["971e689d0a5be527bac79629b4ee9b925e82208e5168b733496a09c0faed0709"], // okx wallet id
  allowUnsupportedChain: true,
})

function ContextProvider({ children, cookies }: { children: ReactNode; cookies: string | null }) {
  const initialState = cookieToInitialState(wagmiAdapter.wagmiConfig as Config, cookies)

  return (
    <WagmiProvider config={wagmiAdapter.wagmiConfig} initialState={initialState}>
      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
    </WagmiProvider>
  )
}

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  // <React.StrictMode>
  <ContextProvider cookies={""}>
    <RouterProvider router={router} />
  </ContextProvider>
  // </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

and this is how i try to send transactions:
components/Transaction.tsx

import { useSendTransaction } from "wagmi";
import { parseEther } from "viem";
import { useState } from "react";

export default function Transaction() {
  const [recipient, setRecipient] = useState("");
  const [amount, setAmount] = useState("");

  // Wagmi Hook for Sending Transactions
  const { data, sendTransactionAsync, isSuccess, isError, error } =
    useSendTransaction();

  // Send Transaction Function
  const handleSendTransaction = async () => {
    if (!recipient || !amount) {
      alert("Enter recipient address and amount.");
      return;
    }

    console.log(recipient as unknown as `0x${string}`, parseEther(amount));

    try {
        let hash = await sendTransactionAsync({
            to: recipient as unknown as `0x${string}`,
            value: parseEther(amount),
            gas: BigInt(21000),
        });

        console.log("hash", hash);
    } catch(err) {
        console.error(err);
    }
  };

  return (
    <div>
      <h2>Send DUC</h2>
      <input
        type="text"
        placeholder="Recipient Address"
        value={recipient}
        onChange={(e) => setRecipient(e.target.value)}
      />
      <input
        type="text"
        placeholder="Amount (DUC)"
        value={amount}
        onChange={(e) => setAmount(e.target.value)}
      />
      <button onClick={handleSendTransaction}>
        Send DUC
      </button>

      {isSuccess && <p>Transaction Sent! Hash: {data}</p>}
      {isError && <p style={{ color: "red" }}>Error: {error?.message}</p>}
    </div>
  );
}

when i try to send some DUC to my other wallet in duckchain testnet network it opens the okx app on my phone.
and that's it. it doesnt do anything else.
and when i close okx and go back to webapp it says:
TransactionExecutionError: An unknown RPC error occurred.
Request Arguments:
from: 0xmywalletaddr
to: 0xotherwalletaddr
value: 0.00099 ETH
gas: 21000
Details:Failed to publish payload, please try again. id:1738530505283886080 tag: 1108
Version: [email protected]

can someone help??
thx in advance

[TheGraveyardWarden]

i found the problem...

let hash = await sendTransactionAsync({
    to: recipient as unknown as `0x${string}`,
    value: parseEther(amount),
    gas: BigInt(50000),
    gasPrice: parseEther("0.1", "gwei"),
    data: "0x",
    chainId: duckchain_testnet.id,
});

this is how it should look like
your developers failed to typecheck this or what
becuase the data field is absolutely required for this to work