abstract testnet call mainnet rpc when executes `eth_call`

[howdyfrom2019]

Hi there.
I'm trying to sendTransaction method using thirdweb and AGW in abstract testnet.
But i find out the fact that chainId mismatch error occurs when after I connect AGW wallet with thirdweb, and send transaction to contract.

Issue description

After connecting agw in abstract testnet with thirdweb auth, I'm trying the interaction with thirdweb contract. but I faced chainid is mismatch in agw typed signature error through viem BaseError.

Suspected Cause

Through chrome developer tools inspection, I founded the rpc of eth_call method is api.mainnet.abs.xyz, even though I connected with abstractTestnet. like below:

cURL for `eth_call`

curl 'https://api.mainnet.abs.xyz/' \
  -H 'accept: */*' \
  -H 'accept-language: ko-KR,ko;q=0.9,en-US;q=0.8,en;q=0.7' \
  -H 'content-type: application/json' \
  -H 'origin: http://localhost:3000' \
  -H 'priority: u=1, i' \
  -H 'referer: http://localhost:3000/' \
  -H 'sec-ch-ua: "Not(A:Brand";v="99", "Google Chrome";v="133", "Chromium";v="133"' \
  -H 'sec-ch-ua-mobile: ?0' \
  -H 'sec-ch-ua-platform: "macOS"' \
  -H 'sec-fetch-dest: empty' \
  -H 'sec-fetch-mode: cors' \
  -H 'sec-fetch-site: cross-site' \
  -H 'user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36' \
  --data-raw '{"jsonrpc":"2.0","id":1,"method":"eth_call","params":[{"data":"0x7603cc8627c052c995b045cda1fc166ae8b37f64ce54cf250193db7205548917ea2feb7e","to":"0x9B947df68D35281C972511B3E7BC875926f26C1A"},"latest"]}'

Steps to reproduce

1. Set up wallet connection through agw with thirdweb (related reference: Making signature has an issue when using abstract wallet #6357)
2. Send transaction with smart contract.
3. Check the chainId error occurs or not.

Code Snippet

import {
  type Chain,
  getContract,
  sendTransaction,
  ThirdwebContract,
  waitForReceipt,
} from 'thirdweb';
import { abstractTestnet } from 'thirdweb/chains';
import { claimTo } from 'thirdweb/extensions/erc721';

interface Params {
  contractAddress: `0x${string}`;
  supportedChain?: Chain;
}
export default function useNFTClaim({ contracrtAddress, supportedChain }: Params) {
  const account = useActiveAccount();

  const contract: ThirdwebContract = getContract({
    client,
    address: contractAddress,
    chain: abstractTestnet,
  });


const claimNFT = async (count = 1n) => {
    try {
      const transaction = claimTo({
        contract,
        to: account?.address!,
        quantity: count,
      });

      const { transactionHash } = await sendTransaction({ // < error occurs in here
        transaction,
        account: account!,
      });

      const recipt = await waitForReceipt({
        client,
        chain: supportedChain,
        transactionHash: transactionHash,
      });

      return recipt.transactionHash;
    } catch (e) {
     console.log(e);
    }
  };

  return { claimNFT };
}

Environment

• Node.js version: v22.12.0
• package

"@abstract-foundation/agw-client": "^1.4.2",
"@abstract-foundation/agw-react": "^1.5.4",
"viem": "^2.23.5",
"wagmi": "^2.14.12",
"thirdweb": "^5.88.7",

[linear]

TOOL-3634 abstract testnet call mainnet rpc when executes `eth_call`

[joaquim-verges]

@howdyfrom2019 the issue is likely that you're not switching chains before sending the transaction.

Try using the useSendTransaction hook instead of the raw sendTransaction function. The react hook handle chain switching for you under the hood, whereas for the raw function you have to do it yourself.

[howdyfrom2019]

@joaquim-verges I changed sendTransaction to useSendTransaction but nothing changed.
In my guess, the bundler API path shows the correct chainId(testnet of abstract chain) info. but very next the bundler api response recieved, the rpc is calling mainnet of absctract chain. I wonder that theeth_call API request part is hndled by AGW side? or thirdweb side?

`11124.bundler.thirdweb.com/v2` cURL

curl 'https://11124.bundler.thirdweb.com/v2' \
  -H 'accept: */*' \
  -H 'accept-language: ko-KR,ko;q=0.9,en-US;q=0.8,en;q=0.7' \
  -H 'content-type: application/json' \
  -H 'origin: http://localhost:3000' \
  -H 'priority: u=1, i' \
  -H 'referer: http://localhost:3000/' \
  -H 'sec-ch-ua: "Not(A:Brand";v="99", "Google Chrome";v="133", "Chromium";v="133"' \
  -H 'sec-ch-ua-mobile: ?0' \
  -H 'sec-ch-ua-platform: "macOS"' \
  -H 'sec-fetch-dest: empty' \
  -H 'sec-fetch-mode: cors' \
  -H 'sec-fetch-site: cross-site' \
  -H 'user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36' \
  -H 'x-client-id: 5abd87e20f3ed3426c27c2f6ee605746' \
  -H 'x-sdk-name: unified-sdk' \
  -H 'x-sdk-os: mac' \
  -H 'x-sdk-platform: browser' \
  -H 'x-sdk-version: 5.88.7' \
  --data-raw '{"jsonrpc":"2.0","id":1,"method":"zk_paymasterData","params":[{"to":"0x3d8b8d0905008eba937f1f3bbeb7AE6171b30c7f","chainId":11124,"data":"0x84bb1e42000000000000000000000000e8098fe0ea00e9ef093aa239860ef2692dd9dfa70000000000000000000000000000000000000000000000000000000000000001000000000000000000000000eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000c0000000000000000000000000000000000000000000000000000000000000016000000000000000000000000000000000000000000000000000000000000000800000000000000000000000000000000000000000000000000000000000000000ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000","gas":"11273884","nonce":0,"value":"0","maxFeePerGas":"50000000","maxPriorityFeePerGas":"1","gasPerPubdata":"50000","from":"0xE8098FE0ea00E9EF093aA239860ef2692dD9DfA7"}]}'

`api.mainnet.abs.xyz` cURL

curl 'https://api.mainnet.abs.xyz/' \
  -H 'accept: */*' \
  -H 'accept-language: ko-KR,ko;q=0.9,en-US;q=0.8,en;q=0.7' \
  -H 'content-type: application/json' \
  -H 'origin: http://localhost:3000' \
  -H 'priority: u=1, i' \
  -H 'referer: http://localhost:3000/' \
  -H 'sec-ch-ua: "Not(A:Brand";v="99", "Google Chrome";v="133", "Chromium";v="133"' \
  -H 'sec-ch-ua-mobile: ?0' \
  -H 'sec-ch-ua-platform: "macOS"' \
  -H 'sec-fetch-dest: empty' \
  -H 'sec-fetch-mode: cors' \
  -H 'sec-fetch-site: cross-site' \
  -H 'user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36' \
  --data-raw '{"jsonrpc":"2.0","id":2,"method":"eth_call","params":[{"data":"0x7603cc8627c052c995b045cda1fc166ae8b37f64ce54cf250193db7205548917ea2feb7e","to":"0x9B947df68D35281C972511B3E7BC875926f26C1A"},"latest"]}'

[joaquim-verges]

Can you share the full code to reproduce this? From us you should only see RPC calls from 1124.rpc.thirdweb.com, unless you've explicitly overriden the RPC in the chain definition

[howdyfrom2019]

sure, my code snippet is like below

// nft-claim-button.tsx
import { useTicketContract } from '@/lib/blockchain/hooks'
export const ABSTRACT_TEST_CONTRACT_ADDRESS = '0x3d8b8d0905008eba937f1f3bbeb7AE6171b30c7f';

export default function NFTMintTest() {
  const { cliamNFT, isSubmitting } = useTicketContract({
    contractAddress: ABSTRACT_TEST_CONTRACT_ADDRESS,
  });

const handleClickClaimBtn = () => {
  try {
      const txHash = await claimNFT(); // error occurs here.
      console.log(txHash);
      if (!txHash) return;
      const tokenId = await getTokenIdAfterMint(txHash);
      toast({
        description: (
          <div>
            [Mint Success]:{' '}
            <Link href={`${explorerHost}${txHash}`} target={'_blank'}>
              Token #${tokenId}
              txHash
            </Link>
          </div>
        ),
      });
    } catch (error) {
      if (error instanceof Error) {
        toast({ variant: 'destructive', description: error.message });
      }
    }
}

return <button onclick={handleClickClaimBtn}>Claim A NFT</button>
}

// use-ticket-contract.ts
'use client';

import { createThirdwebClient } from 'thirdweb';
import { useToast } from '@/components/ui';
import { useState } from 'react';
import {
  Chain,
  getContract,
  prepareContractCall,
  readContract,
  ThirdwebContract,
  waitForReceipt,
} from 'thirdweb';
import { claimTo } from 'thirdweb/extensions/erc721';
import {
  useActiveAccount,
  useActiveWalletChain,
  useSendTransaction,
  useSwitchActiveWalletChain,
} from 'thirdweb/react';
import { abstract, abstractTestnet } from 'thirdweb/chains';

export interface TicketContractParams {
  contractAddress: `0x${string}`;
  supportedChain?: Chain;
}

const supportedChain =
  process.env.NEXT_PUBLIC_APP_ENV === 'DEV' ? abstractTestnet : abstract;

const clientId = process.env.NEXT_PUBLIC_THIRDWEB_CLIENT_ID!;
const secretKey = process.env.THIRDWEB_SECRET_KEY;

export const client = createThirdwebClient(
  secretKey
    ? { secretKey }
    : {
        clientId,
      }
);


export default function useTicketContract(params: TicketContractParams) {
  // 임시로 작성. 추후 타 컨트랙트 추가 시 수정 필요.
  const { contractAddress,  supportedChain = supportedChainconfig } = params ?? {};
  const [isSubmitting, setIsSubmitting] = useState(false);

  const { toast } = useToast();
  const switchChain = useSwitchActiveWalletChain();
  const account = useActiveAccount();
  const chain = useActiveWalletChain();
  const { mutateAsync: sendTransaction, data: transactionResult } = useSendTransaction();

  const contract: ThirdwebContract = getContract({
    client,
    address: contractAddress,
    chain: abstractTestnet,
  });

  const verifyBeforeInteraction = async () => {
    // step 1. check if the user is connected to the wallet
    if (!account?.address) {
      toast({
        variant: 'destructive',
        description: 'Please connect your wallet first.',
      });
      return false;
    }

    // step 2. check if the user registered wallet address is the same as the connected wallet address
   // if (session?.address.toLowerCase() !== account.address.toLowerCase()) {
     // toast({
        variant: 'destructive',
        description: 'Please connect with the registered wallet address.',
      });
      //return false;
    //}

    // step 3. check if the user is connected to the correct chain
    if (chain?.id !== supportedChain.id) {
      await switchChain(supportedChain);
    }
    return true;
  };


  /**
   *
   * @returns transactionHash: `0x${string}` 
   */
  const claimNFT = async (count = 1n) => {
    setIsSubmitting(true);
    try {
      const isValid = await verifyBeforeInteraction();
      if (!isValid) throw new Error('Invalid connection');

      const transaction = claimTo({
        contract,
        to: account?.address!,
        quantity: count,
      });

      const { transactionHash } = await sendTransaction(transaction);

      const receipt = await waitForReceipt({
        client,
        chain: supportedChain,
        transactionHash: transactionHash,
      });

      return receipt.transactionHash;
    } catch (e) {
      const error = e as { code: number; message: string; data?: string };
      // Error occurs because the user isn't listed in WL.
      if (error.code === 3) {
        toast({
          variant: 'destructive',
          description: `[${error.message}] You might be not eligible for this condition.`,
        });
        return;
      }

      // User canceled before wallet interaction.
      if (error.code === 4001) {
        toast({
          variant: 'destructive',
          description: `[${error.message}]`,
        });
        return;
      }

      toast({
        variant: 'destructive',
        description: `[${error.message}]`,
      });

      return Promise.reject(error);
    } finally {
      setIsSubmitting(false);
    }
  };


  return {
    contract,
    claimNFT,
    isSubmitting,
  };
}

[joaquim-verges]

any reason why you're initializing the contract with abstractTestnet but everywhere else you're using supportedChain ? would also double check the env var and supportedChain prop matches what you expect

[howdyfrom2019]

@joaquim-verges supportedChain is indicating abstractTestnet and abstract

Here is the snippet of supportedChain

export const supportedChain =
  process.env.NEXT_PUBLIC_APP_ENV === 'DEV' ? abstractTestnet : abstract;

[joaquim-verges]

yes that's why im asking why you're not that same supportedChain variable here:

 const contract: ThirdwebContract = getContract({
    client,
    address: contractAddress,
    chain: abstractTestnet, <-- hardcoded to abstractTestnet instead of supportedChain ?
  });

also, it's pretty tough for me to reproduce with this code. Any chance you could provide a minimal repro?

[howdyfrom2019]

@joaquim-verges As for reproducing the issue, I’ve set up the repo here: GitHub Repo, and you can check the demo at Live Demo. Let me know if you need any additional details!

[joaquim-verges]

hey @howdyfrom2019 thank you for the repo. finally got time to dig into this.

I solved one issue here: #6506

but now it throws another error for me inside the AGW sdk. I've contacted the team about this and will let you know what i find.

[joaquim-verges]

@howdyfrom2019 actually i think the error i was seeing was from my local environment, im gonna release that fix in #6506 - try it out and let me know if it works for you

[howdyfrom2019]

@joaquim-verges yes i've just tried before, the problem has also solved for my local. Thanks for supporting!

[joaquim-verges]

No, thank YOU for the report and repo 😁