My social login wallet contract interaction is not working

[dilshercareers]

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

• SDK Version(package.json): “@web3auth/modal”: “^7.1.1”,
• Platform: DualMint
• Browser Console Screenshots:
• If the issue is related to Custom Authentication, please include the following information (optional):
  • Verifier Name:
  • JWKS Endpoint:
  • Sample idToken (JWT):

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.

I am facing issues for a few days now. We are currently going to go live soon. However, all our social login wallet connection contract interactions fail. The exact same wallet when I import its private key to metamask, works perfectly. I have a feeling it might be an issue related to the way gas is calculated from your end. Can you please help with this as we are going live soon and are also on a growth plan. I dont mind getting on call if this issue is not resolved on text.

• SDK Version(package.json): “@web3auth/modal”: “^7.1.1”,

• Platform: DualMint

  const web3auth = new Web3Auth({
  clientId: process.env.NEXT_PUBLIC_WEB3AUTH_CLIENTID,
  web3AuthNetwork: process.env.NEXT_PUBLIC_WEB3AUTH_NETWORK, // mainnet, aqua, celeste, cyan or testnet
  chainConfig: {
  chainNamespace: ‘eip155’,
  chainId: chainConfig.properties.chainId,
  rpcTarget: chainConfig.properties.rpcTarget, //“Build on Goerli Testnet With Instant RPC Endpoint”,
  // displayName: chainConfig.properties.displayName,
  // blockExplorer: chainConfig.properties.blockExplorer,
  // ticker: “ETH”,
  // tickerName: “Ethereum”,
  },

            uiConfig: {
                appName: 'Dualmint',
                mode: 'dark',
                appLogo: '/LogoDark.png', // Your App Logo Here
                logoLight: '/LogoDark.png',
                logoDark: '/LogoDark.png',
            },
        });
  

Simple transactions like this:
const approvalTransaction = await stableContract.approve(
** projectContractAddress,**
** price**
** );**
** await approvalTransaction.wait();**
Here the stable contract signer is also correct and this same exact transaction works on metamask but not when I connect with social logins. This is where I need help with a developer to explain this.

[vjgee]

@dilshercareers Welcome Aboard!

Could you share the console logs at the steps where the contract interaction fails? What framework are you using? Do you have the code snippet where you specify the gas fees?

[dilshercareers]

The follow is the code snippet:

console.log(‘SIGNER IS’, signer);
console.log(‘USER ADDRESS IS’, userAddress);

            const approvalTransaction = await stableContract.approve(
                projectContractAddress,
                price
            );
            await approvalTransaction.wait();
           console.log("Reached here")

The console result is this :

However we are not reaching the console statement “Reached here”. Something is going wrong. If possible can I get on call with someone in the development team to help with this as we need this working asap

[dilshercareers]

I have just checked all our other contract functions are working but the ones where we are using USDT stable contract are not working. This is the error. Error in minting NFT Error: Internal JSON-RPC error.
at getJsonRpcError (errors.js:176:12)
at Object.internal (errors.js:42:24)
at provider.sendAsync (openloginJrpc.esm.js:792:73)
at async provider.request (openloginJrpc.esm.js:813:17)

When I run it locally it doesnt work but it works when deployed to my website

[vjgee]

@dilshercareers What version of Web3.js are you using? Could you try version 1.8.0?

Also, have you specified the following parameters? :

gasPrice: ‘20000000000’, // 20 Gwei
gas: ‘21000’, // 21,000 Gwei

[dilshercareers]

I am using “ethers”: “^5.6.9”, Also we dont specify gas parameters.

[vjgee]

@dilshercareers

Also we dont specify gas parameters.

Are you using Gasless transactions then in your implementation? Please share your complete package.json file as well

[dilshercareers]

No the user pays for the gas but we dont specify hardcoded gas parameters, if thats what youre asking.

Package.json:
{
“name”: “dualmint-nft-marketplace”,
“version”: “0.1.0”,
“description”: “DualMint NFT Marketplace”,
“engines”: {
“node”: “>=16”
},
“private”: true,
“scripts”: {
“dev”: “next dev”,
“build”: “next build”,
“start”: “next start”,
“poststart”: “node ./node_modules/pm2/bin/pm2 logs”,
“lint”: “next lint”
},
“dependencies”: {
“@emotion/react”: “^11.11.1”,
“@emotion/styled”: “^11.11.0”,
“@ethereumjs/util”: “^9.0.0”,
“@mui/icons-material”: “^5.14.11”,
“@mui/lab”: “^5.0.0-alpha.146”,
“@mui/material”: “^5.14.11”,
“@mui/styles”: “^5.14.11”,
“@mui/system”: “^5.14.11”,
“@mui/x-date-pickers”: “^6.15.0”,
“@paytweed/frontend-sdk”: “^2.0.11”,
“@paytweed/frontend-sdk-react”: “^2.0.11”,
“@pinata/sdk”: “^2.1.0”,
“@transak/transak-sdk”: “^1.4.1”,
“@walletconnect/sign-client”: “^2.10.4”,
“@walletconnect/web3-provider”: “^1.7.8”,
“@web3auth/modal”: “^7.1.1”,
“@wert-io/module-react-component”: “^1.0.0”,
“alchemy-sdk”: “2.10.1”,
“axios”: “^0.24.0”,
“date-fns”: “^2.30.0”,
“env-cmd”: “^10.1.0”,
“ethers”: “^5.6.9”,
“form-data”: “^4.0.0”,
“i18next”: “^23.5.1”,
“i18next-chained-backend”: “^4.5.0”,
“i18next-localstorage-backend”: “^4.2.0”,
“i18next-locize-backend”: “^6.2.3”,
“lodash”: “^4.17.21”,
“magic-sdk”: “^20.0.2”,
“moment”: “^2.29.4”,
“mongodb”: “^6.1.0”,
“multer”: “^1.4.5-lts.1”,
“next”: “^14.0.0”,
“next-connect”: “1.0.0”,
“next-i18next”: “^14.0.3”,
“next-qrcode”: “^2.5.1”,
“next-share”: “^0.25.0”,
“react”: “^18.2.0”,
“react-datepicker”: “^4.18.0”,
“react-dom”: “^18.2.0”,
“react-fast-marquee”: “^1.6.1”,
“react-ga”: “^3.3.1”,
“react-hook-form”: “^7.46.2”,
“react-hot-toast”: “^2.4.1”,
“react-i18next”: “^13.2.2”,
“react-joyride”: “^2.5.5”,
“react-multi-carousel”: “^2.8.4”,
“react-number-format”: “^5.3.1”,
“react-player”: “^2.13.0”,
“recharts”: “^2.8.0”,
“recoil”: “^0.7.7”,
“recoil-nexus”: “^0.5.0”,
“sharp”: “^0.32.6”,
“url-loader”: “^4.1.1”,
“uuid”: “^9.0.1”,
“web3”: “4.1.2”,
“webpack”: “^5.88.2”,
“xtypejs”: “^0.7.1”
},
“devDependencies”: {
“@babel/core”: “^7.23.0”,
“@babel/runtime”: “^7.23.1”,
“electron”: “^26.2.3”,
“encoding”: “^0.1.13”,
“eslint”: “8.50.0”,
“eslint-config-next”: “^14.0.0”,
“file-loader”: “^6.2.0”
}
}

Also wanted to specify this. Its working when deployed to our domain but when running the application locally, it doesnt work. Do we also have to whitelist our localhost to make it work? I tried whitelisting localhost but still local host constanlty gives JSON RPC error

[vjgee]

@dilshercareers

“web3”: “4.1.2”,

Can you downgrade Web3.js to version 1.8.0 and check?

[dilshercareers]

The problem is that by downgrading, other features of my application wont work. My question is why is it working when deployed?

[vjgee]

Our team will have to review this . On which web3auth network are you deploying your app? Mainnet, Sapphire Mainet, Aqua, etc. ?

[dilshercareers]

Currently we are on testnet branch for testing. We are going live on sapphire mainnet next week. Please let me know. So basically when we deploy the testnet version on our platform it works but doesnt work locally. Thanks

[vjgee]

Ok, can you share your Github repo so our team can check this on local environment to recreate the issue ? If you wish to share it privately, you can navigate to the left hand side Menu . Scroll down to find Messages > Inbox > New Message and respond to my DM.

[vjgee]

@dilshercareers As discussed over DM, your code implementation is working on Test environment and since you are unable to share the code./github repo to check on local environment, you can deploy it to Production enviornment and it should work fine.

If you face any issues, you can always reach out to us anytime.