NFT purchases for users using web3auth

[studiokanvas]

Hello,

I have successfully set up web3auth for my users. However, I have a smart contract/ABI where users can mint the NFT. Typically, this was done via MetaMask and so the onchain activity would take place there. But with web3auth, when the user authenticates with OpenLogin (Google/Apple), that process is a little abstracted. I don’t understand how they are able to interact with a smart contract.

Is there any 3rd party plugin you recommend, or is there a Web2 credit card solution they can utilize, so if they pay by credit card, the transaction is done under the hood and the NFT is transferred to their Google/Apple account?

[studiokanvas]

I just need to know, how is the web3auth users supposed to communicate with a smart contract/ABI? This is typically done with MetaMask, which handles both the authentication and reading of the smart contracts. How can I do the same with web3auth Google/Apple/Open Login?

[vjgee]

@studiokanvas Thanks for your question.

Your request has been forwarded to our Dev team and we will get back with further updates once more information becomes available.

[shahbaz]

Hi @studiokanvas, the interaction with the smart contract can be done similarly to another provider. Please check out Integrate Web3Auth with the Ethereum Blockchain in Javascript | Documentation | Web3Auth to learn more about interacting with smart contracts when using web3auth.

[studiokanvas]

Hi Shahbaz. I have followed the instructions in the documentation but I am getting extremely high gas fees ($600) for trying a simple mint interaction. I am using web3auth.provider as the provider within ethers.js, and I am reading from the contract correctly, but the gas fee is unusually high. The same exact function works fine if I use MetaMask (window.ethereum). However, MM is not an option because these users are using Google/Apple and does not have MM installed. This is my code:

        const [web3Auth, setWeb3Auth] = useState<Web3AuthNoModal>()
        const auth = new Web3AuthNoModal({
            clientId: process.env.NEXT_PUBLIC_WEB3AUTH_CLIENT_ID,
            chainConfig,
        })

        const privateKeyProvider = new EthereumPrivateKeyProvider({ config: { chainConfig } })
        const openloginProvider = new OpenloginAdapter({
            privateKeyProvider,
            adapterSettings: {
                uxMode: "redirect",
            },
            web3AuthNetwork: chainNetwork,
        })

        auth.configureAdapter(openloginProvider)
        if (window.ethereum) auth.configureAdapter(metamaskAdapter)

        metamaskAdapter.setAdapterSettings({
            sessionTime: 86400, // 1 day in seconds
            chainConfig: {
                chainNamespace: CHAIN_NAMESPACES.EIP155,
                chainId,
                rpcTarget: process.env.NEXT_PUBLIC_INFURA_KEY!,
            },
            web3AuthNetwork: chainNetwork,
        })
        setWeb3Auth(auth)

        //...web3Auth is now set in useState

        const provider = new ethers.providers.Web3Provider(web3Auth.provider!)
        const signer = await provider.getSigner()
        const contract = new ethers.Contract(CONTRACT_ADDRESS, prodABI, signer)
        const address = await signer.getAddress()
        const gasPrice = (await provider.getGasPrice()).toNumber()
        const nonce = await provider.getTransactionCount(address)
        const gasFeeData = await provider.getFeeData()
        const tx = await contract.mint(1, {
            value: weiValue,
            maxFeePerGas: gasFeeData.maxFeePerGas,
            maxPriorityFeePerGas: gasFeeData.maxPriorityFeePerGas,
        })
        const receipt = await tx.wait()
        if (receipt) {
            const tokenId = receipt.events[0].args[2].toString()
            console.log("tokenId: ", tokenId)
            return tokenId
        }

[studiokanvas]

This is the response I receive:

{"jsonrpc":"2.0","id":"oxif5qn61w","error":{"code":-32000,"message":"gas required exceeds allowance (5845)"}}