Getting weird error when calling smart contract function using social wallets

[andrey1]

When asking for help in this category, please make sure to provide the following details:

• SDK Version(package.json): 8.6.2
• Platform: Mac OS
• Browser Console Screenshots:

Also, kindly provide the Web3Auth initialization and login code snippet below. This will help us better understand your issue and provide you with the necessary assistance.

https://gist.github.com/andreyluiz/0fbbac5e1dd3368f1171f22c38264215

Hello everyone.

I’m using Web3Auth Modal SDK on my website and I’ve been trying to make the social login wallets work, with no success.

The login itself works, I get a provider and I can get the balance, the address, etc.

But I get the error in the screenshot above when calling a smart contract function. The smart contract function received a BigInt value, and I’m providing it. When debugging the call, I can’t see any value that is 0xNaN. All the values seem to be passed correctly.

I set up the verifiers for Facebook and Discord, but I’m not sure if they are required. Even with them, the call to the smart contract still fails.

Check the gist above to have a glimpse of how I’m setting up the initialization.

I’m sure I’m missing something. Could anyone point me to what?

Thanks.

[vjgee]

@andrey1 Welcome Aboard!

Your issue is under review and we will get back with an update.

[vjgee]

@andrey1 Please provide your package.json file along with dev dependenciess. Specifically, which version of web3.js are you using?

[andrey1]

Hello @vjgee.

Here’s the package.json.

{
  "name": "...",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "dev": "vite dev",
    "build": "vite build",
    "preview": "vite preview",
    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
    "ts-check": "tsc --noEmit",
    "lint": "prettier --check . && eslint . && tsc --noEmit",
    "format": "prettier --write .",
    "generate-types": "typechain --target=ethers-v5 'src/lib/abi/contracts/**/*.json' --out-dir 'src/lib/contracts'"
  },
  "devDependencies": {
    "@iconify-json/mdi": "^1.1.66",
    "@sveltejs/adapter-auto": "^3.0.0",
    "@sveltejs/adapter-vercel": "^5.3.1",
    "@sveltejs/kit": "^2.0.0",
    "@sveltejs/vite-plugin-svelte": "^3.0.0",
    "@typechain/ethers-v5": "^11.1.2",
    "@types/elliptic": "^6.4.18",
    "@types/eslint": "^8.56.0",
    "@types/node": "^20.12.10",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "@types/uuid": "^9.0.8",
    "@typescript-eslint/eslint-plugin": "^7.0.0",
    "@typescript-eslint/parser": "^7.0.0",
    "autoprefixer": "^10.4.19",
    "buffer": "^6.0.3",
    "eslint": "^8.56.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-svelte": "^2.35.1",
    "postcss": "^8.4.38",
    "prettier": "^3.1.1",
    "prettier-plugin-svelte": "^3.1.2",
    "process": "^0.11.10",
    "stream-browserify": "^3.0.0",
    "svelte": "^4.2.7",
    "svelte-check": "^3.6.0",
    "tailwindcss": "^3.4.3",
    "tslib": "^2.4.1",
    "typescript": "^5.0.0",
    "unplugin-icons": "^0.18.5",
    "vite": "^5.0.3",
    "vite-plugin-node-polyfills": "^0.22.0"
  },
  "type": "module",
  "dependencies": {
    "@walletconnect/client": "^1.8.0",
    "@web3auth/base": "^8.6.2",
    "@web3auth/ethereum-provider": "^8.6.2",
    "@web3auth/metamask-adapter": "^8.6.2",
    "@web3auth/modal": "^8.6.2",
    "@web3auth/openlogin-adapter": "^8.6.2",
    "classnames": "^2.5.1",
    "ethers": "^5.7.2",
    "http-status-codes": "^2.3.0",
    "mongodb": "^6.6.1",
    "phaser": "^3.80.1",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "svelte-french-toast": "^1.2.0",
    "uuid": "^9.0.1"
  },
  "resolutions": {
    "svelte-i18n": "3.7.5-alpha.1",
    "rpc-websockets": "7.11.0"
  },
  "packageManager": "yarn@4.2.2"
}

The web3auth version is 8.6.2.

Thanks.

[TomTom]

hi @andrey1

I hope you are doing well. Please check our EVM example with ethers to get the balance-> web3auth-pnp-examples/web-modal-sdk/blockchain-connection-examples/evm-modal-example/src/ethersRPC.ts at main · Web3Auth/web3auth-pnp-examples · GitHub

(Also you can check in the same directory examples with viem and web3.js)

In case you are using the last version of ethers, i think the only different is when you are creating the provider. Please check this line → web3auth-pnp-examples/web-modal-sdk/blockchain-connection-examples/evm-modal-example/src/ethersRPC.ts at 04493743ca1b8e45a3a4a56798e7ce059101ebcf · Web3Auth/web3auth-pnp-examples · GitHub

[andrey1]

Hello @TomTom.

Getting the balance is not an issue. This part works fine.

And the example you sent is pretty much the same thing I’m doing. Check this gist: Web3Auth initialization · GitHub.

My problem is that I’m not able to call a smart contract function because I get an exception. Check my main message to see the console error.

Thanks.

[TomTom]

hi @andrey1

Great! To assist you better, we require additional information about the project.
Perhaps you could share more code from import wallet from './store/wallet';

[andrey1]

Sure thing, @TomTom.

This one is pretty simple:

import { ethers } from 'ethers';
import { writable } from 'svelte/store';

export interface WalletState {
  provider: ethers.providers.Web3Provider | null;
}

const wallet = writable<WalletState>({
  provider: null
});

export default wallet;

Most of the web3auth logic is made on the gist I sent above. This svelte store only stores the instance of the web3 provider.

Where is the class EthereumRpc instantiated in your example?

Thanks.

[TomTom]

For example in this line

Web3Auth/web3auth-pnp-examples/blob/04493743ca1b8e45a3a4a56798e7ce059101ebcf/web-modal-sdk/blockchain-connection-examples/evm-modal-example/src/App.tsx#L88

[andrey1]

The only difference is that you’re storing the provider as an instance attribute, and I’m using the Svelte store. I will also try to store it in a raw instance to see if something changes.

[TomTom]

Please try that and connect with us if you need further assistance.

[andrey1]

Alright, so I tried to do the following:

• I instantiate web3auth through web3auth.initModal (remember that I’m using the modal API);
• The web3auth variable is exported from my module;
• When clicking on the connect button, I call web3auth.connect;
• After logging in with Facebook, I store the user signer address just for UI display purposes;
• The account balance console.log is returning the correct balance;
• When calling the smart contract function (staking, in this case), I’m building the web3 provider using the exported web3auth provider (web3auth.provider)
• So in short, I’m using straight away the provider returned by web3auth. I’m not storing anything;

But I still see the same error. The contract call fails with Error: Cannot convert string to Uint8Array. toBytes only supports 0x-prefixed hex strings and this string was given: 0xNaN.

[andrey1]

I debugged a little bit and found the transaction JSON:

{
  "method": "eth_sendTransaction",
  "params": [
    {
      "gas": "0x18fde",
      "value": "0xde0b6b3a7640000",
      "from": "0x3c74bdf559a8cd7de8f78d0eeb2d59abbfaf7a14",
      "to": "0x8d6277af9cbbe3c8bde4dd0ed6f8b091042fa3f4",
      "data": "0x3a4b66f1"
    }
  ],
  "id": "u1gjkt125x9",
  "jsonrpc": "2.0"
}

I also analyzed the other RPC calls with parameters (estimate gas, etc), and all of them also look good.

So in short, I have no idea where this error is coming from.

[TomTom]

hi @andrey1

Did you try sending ETH like in this example ?

Web3Auth/web3auth-pnp-examples/blob/04493743ca1b8e45a3a4a56798e7ce059101ebcf/web-modal-sdk/blockchain-connection-examples/evm-modal-example/src/web3RPC.ts#L56

[andrey1]

So, I tried this:

const provider = new ethers.providers.Web3Provider(
    web3auth.provider as ethers.providers.ExternalProvider
);
const signer = provider.getSigner();
const amount = ethers.utils.parseEther(amountStr);

const fromAddress = await signer.getAddress();
const toAddress = fromAddress;

const transaction = {
    from: fromAddress,
    to: toAddress,
    data: '0x',
    nonce: await provider.getTransactionCount(fromAddress),
    value: amount
};

const gas = await provider.estimateGas(transaction as any);

console.log('sending transaction', gas.toString());
const tx = await signer.sendTransaction(transaction);

console.log(tx.hash);

await tx.wait();

Got the same thing:

> sending transaction 21000
> errors.ts:256 Uncaught (in promise) Error: Cannot convert string to Uint8Array. toBytes only supports 0x-prefixed hex strings and this string was given: 0xNaN
    at getJsonRpcError (errors.ts:256:10)
    at Object.internal (errors.ts:71:8)
    at provider.sendAsync (openloginJrpc.esm.js:777:23)
    at async provider.request (openloginJrpc.esm.js:798:17)

Notice that the console log about the transaction hash is not printed, so the transaction call has failed before, likely on the JavaScript level. On the network tab, I can’t see the transaction request.

I will double-check if this is an issue with the RPC.

[andrey1]

Hello again guys.

I’ve been experimenting a lot to try to find something. And it seems that the problem lies somewhere between web3auth open login and ethers.js.

I tested the simple transaction and my staking function with Web3.js, and it works fine on DevNet. I tried using ethers v6 to see if it changes something, but it seems a dependency of web3auth required ethers v5.

Any idea why?

Thanks.

[TomTom]

hi @andrey1

Please check our examples … we are using "ethers": "^6.12.1",

package → web3auth-pnp-examples/web-modal-sdk/blockchain-connection-examples/evm-modal-example/package.json at 04493743ca1b8e45a3a4a56798e7ce059101ebcf · Web3Auth/web3auth-pnp-examples · GitHub

ethers code → web3auth-pnp-examples/web-modal-sdk/blockchain-connection-examples/evm-modal-example/src/ethersRPC.ts at 04493743ca1b8e45a3a4a56798e7ce059101ebcf · Web3Auth/web3auth-pnp-examples · GitHub

Also in the same directory you can see the viemRPC file to try the Viem Library.

[andrey1]

Hello @TomTom.

I tried with ethers v6, and I still get an error. But this time it’s a more well-explained error.

Error: could not coalesce error (error={ "code": -32603, "data": { "cause": { "message": "Cannot convert string to Uint8Array. toBytes only supports 0x-prefixed hex strings and this string was given: 0xNaN", "stack": "Stack trace is not available." } }, "message": "Cannot convert string to Uint8Array. toBytes only supports 0x-prefixed hex strings and this string was given: 0xNaN" }, payload={ "id": 6, "jsonrpc": "2.0", "method": "eth_sendTransaction", "params": [ { "data": "0x3a4b66f1", "from": "0x3c74bdf559a8cd7de8f78d0eeb2d59abbfaf7a14", "gas": "0x14cce", "to": "0x8d6277af9cbbe3c8bde4dd0ed6f8b091042fa3f4", "value": "0xde0b6b3a7640000" } ] }, code=UNKNOWN_ERROR, version=6.13.0)

However, it still doesn’t explain where this 0xNaN is being found. The payload that is printed in the error has all the values set.

I’ll check viem and report back.

[andrey1]

Hey guys. I forgot to report here.

I managed to get this working using Web3.js. I won’t invest time into learning why Ethers.js fails (at least for now).

Thanks for your support.