Styling on web3uikit Form disabled upon refreshing web page

raymondfam · August 11, 2022, 3:13am

My landing page will have all the Form styling disabled upon loading:

https://raymondfam.github.io/defi-nft-marketplace/

But if you were to click on other shortcut link on the header and then click on the Home page again, it would display everything properly. I notice all pages, Home, Mint, and Sell NFT, using web3uikit Form run into this problem whenever you visit the link externally or refresh the page.

Here’s the typical code link for the mint page:

github.com

raymondfam/defi-nft-marketplace/blob/main/pages/mint.js

import { Form, useNotification } from "web3uikit"
import { useWeb3Contract } from "react-moralis"
import { nftAbi, achieverAbi, nftAddress, achieverAddress } from "../constants"
import { useEffect, useState } from "react"

export default function Mint() {
    const { runContractFunction } = useWeb3Contract()
    const dispatch = useNotification()

    const approveOptions = {
        abi: achieverAbi,
        contractAddress: achieverAddress,
        functionName: "approve",
    }

    const mintOptions = {
        abi: nftAbi,
        contractAddress: nftAddress,
        functionName: "mint",
    }

This file has been truncated. show original

Could anyone help look into this issue? Thanks.

johnversus · August 11, 2022, 3:30am

You could use the isDisabled property of form to enable or disable form when required.

Does this resolve your issue?

raymondfam · August 12, 2022, 4:36am

Thanks for your suggestion. It doesn’t resolve the issue unfortunately.

The web3uikit is midway replaced by material ui and this has so far been rendering flawlessly.

alex · August 12, 2022, 8:20pm

Might have been an issue with your project or another dependency. Your original issue as you described it doesn’t/shouldn’t happen by default.

raymondfam · August 12, 2022, 8:35pm

It’s difficult to debug though. This is another example of disparity between a localhost and the actual network not to be taken granted for. But I am grateful a lot of knowledge has been gained along this coding journey.