Defi-Minimal: Error: resolver or addr is not configured for ENS name

[raymondfam]

import { useWeb3Contract } from "react-moralis"
import { achieverAbi, wethAbi, wethAddress, achieverAddress, mutualsAbi, mutualsAddress } from "../constants"
import { Form } from "web3uikit"
import { ethers } from "ethers"

export default function SwapForm() {
    const { runContractFunction } = useWeb3Contract()
    let approveOptions = {
        abi: achieverAbi,
        contractAddress: achieverAddress,
        functionName: "approve",
    }
    let stakeOptions = {
        abi: mutualsAbi,
        contractAddress: mutualsAddress,
        functionName: "swap",
    }

    async function handleStakeSubmit(data) {
        const amountToApprove = data.data[0].inputResult
        approveOptions.params = {
            spender: ethers.utils.parseUnits(amountToApprove, "ether").toString(),
            amount: mutualsAddress,
        }
        console.log("Approving...")
        const tx = await runContractFunction({
            params: approveOptions,
            onError: (error) => console.log(error),
            onSuccess: () => {
                handleApproveSuccess(approveOptions.params.amount)
            },
        })
    }

    async function handleApproveSuccess(amountToStakeFormatted) {
        stakeOptions.params = {
            amount: amountToStakeFormatted,
        }
        console.log(`Staking ${stakeOptions.params.amount} WETH Token...`)
        const tx = await runContractFunction({
            params: stakeOptions,
            onError: (error) => console.log(error),
        })
        await tx.wait(1)
        console.log("Transaction has been confirmed by 1 block")
    }

    return (
        <div>
            <Form
                onSubmit={handleStakeSubmit}
                data={[
                    {
                        inputWidth: "50%",
                        name: "Amount to stake (in ACH)",
                        type: "number",
                        value: "",
                        key: "amountToStake",
                    },
                ]}
                title="Let's Swap!"
            ></Form>
        </div>
    )
}

I ran into the following error (as extracted from my frontend console) when submitting the form on Rinkeby network. It works fine on localhost though. Could anyone help look into this issue? Thanks.

Error: resolver or addr is not configured for ENS name (argument=“name”, value=“1000000000000000000”, code=INVALID_ARGUMENT, version=contracts/5.6.0)
at Logger.makeError (index.js?dd68:219:1)
at Logger.throwError (index.js?dd68:228:1)
at Logger.throwArgumentError (index.js?dd68:231:1)
at eval (index.js?b70c:50:1)
at Generator.next ()
at fulfilled (index.js?b70c:5:43)

[alymurtazamemon]

@raymondfam Please follow this guide next time when you ask a question. How to Ask Question Guide

[krakxn]

That's awesome! Best of luck!!

By the way, I would recommend replying to yourself with the solution and marking it as answer for others to refer to.

[raymondfam]

Just swap the spender and the amount. That's what has been causing the invalid arguments.

I am trying to build a minimally viable DEX. Does anybody know of any frontend sample codes on github that would feature something similar to Uniswap? Thanks

[krakxn]

I do not know if they have it but it is worth it checking their (Uniswap's) GitHub repo - it is active.

[raymondfam]

No worries. I am planning to go the hard way just to see how much I could build it on my own to strengthen my coding muscles. :)

[krakxn]

That's great, I would recommend going through their projects to see how it is actually like though - even if you do not want to review the logic. All the best!