Calling hooks in real world component

Moralis General
#1

these single examples are not real world use caseā€¦
in real appsā€¦ thereā€™s multiple function calls in one component/page

const ShowUniswapObserveValues = () => {
  const { data, error, runContractFunction, isFetching, isLoading } =
    useWeb3Contract();

  const options = {
    abi: usdcEthPoolAbi,
    contractAddress: usdcEthPoolAddress,
    functionName: "observe",
    params: {
      secondsAgos: [0, 10],
    },
  };

  return (
    <div>
      {error && <ErrorMessage error={error} />}
      <button
        onClick={() => runContractFunction({ params: options })}
        disabled={isFetching}
      >
        Fetch data
      </button>
      {data && <pre>{JSON.stringify(data)}</pre>}
    </div>
  );
};

being new to reactā€¦ I donā€™t understand calling hooks

my code

const HomePage = () => {
  const [tab, setTab] = React.useState(2)
  ///other states

  if(user && !_user ){
    setUser(user.get("ethAddress"))
    start()
  }

  async function start(){

    const usernfts_ = await getNFTBalances()
    setCafe(usernfts_)

  }
  function handleClick(value_) {
    if(value_==1 && _user){
      start()
    }
    setTab(value_);
  }

/// other functions

}

now I need to call a hookā€¦ your examples donā€™t show how to call a hook within a component like thisā€¦

how do I call this hook?

  const { data, error, fetch, isFetching, isLoading } = useWeb3ExecuteFunction({
    abi: _nftea,
    contractAddress: '0x636c5AC57F13DdAB170d4064F0A3EB3f2949B885',
    functionName: "mint",
    params: {
      secondsAgos: [0, 10],
    },
  });

within the component above?

I assembled my mint form

  const handleMint = async (event) => {

    event.preventDefault()

    let metaData = new Object()
    metaData.name = event.target.title.value
    metaData.external_url = 'https://nftea.app/cafe/'+_user
    metaData.amount = event.target.amount.value
    metaData.redeems = event.target.redeems.value
    metaData.redeemfrequency = 'every ' + event.target.redeemfrequency.value || 0 + 'days'
    metaData.description = event.target.story.value
    metaData.splitwith = event.target.splitWith.value || _dead
    metaData.animation_url = _media
    metaData.animation_type = _mediaType
    metaData.youtube_url = event.target.youtube.value || null
    metaData.attributes = []
    metaData.created = new Date()
    metaData.image = _image
    metaData.creator = _user
    metaData.contract = 0x636c5AC57F13DdAB170d4064F0A3EB3f2949B885

    const metadata_ = new Moralis.File("metadata.json", {base64 : btoa(JSON.stringify(metaData))});
    await metadata_.saveIPFS();
    const metadataurl_ = await metadata_.ipfs();

    const dataMint_ = {

      title: event.target.title.value,
      amount: event.target.amount.value,
      redeems: event.target.redeems.value,
      redeemfrequency: event.target.redeemfrequency.value || 0,
      payTo: event.target.payTo.value || _user,
      splitwith: event.target.splitWith.value || _dead,
      split: event.target.split.value || 0,
      youtube: event.target.youtube.value || '0',
      story: event.target.story.value,
      image: _image,
      media: _media,
      ipfs:metadataurl_,
      metadataurl_: metadataurl_,
    }

now I need to call ā€œfetchā€ in the useWeb3ExecuteFunctionā€¦

#2 
  useEffect(async()=>{
    
      {data, error, fetch, isFetching}  await useWeb3ExecuteFunction({
          abi: _nftea,
          contractAddress: '0x636c5AC57F13DdAB170d4064F0A3EB3f2949B885',
          functionName: "mint",
          params: {
            secondsAgos: [_mintForm.amount,_mintForm.redeems,_mintForm.metadataurl_.charCodeAt(0),_mintForm.ipfs,_mintForm.payTo,_mintForm.splitwith,_mintForm.split,_mintForm.redeemfrequency],
          },
        });
  },[_mintForm])

Hooks can only be called inside of the body of a function componentā€¦ WTF is this errorā€¦ no matter how to try hooks this comes upā€¦ this is the most frequent error you guys should make a demo on how to call hooks properly

#3

Hooks can only be called inside of the body of a function component

You need to move this useWeb3ExecuteFunction hook to the top of your function component. That is also not correct syntax, read this.

const HomePage = () => { // or whichever component this is for you

  const { data, error, fetch, isFetching } = useWeb3ExecuteFunction({
  ...

}

You can read this on rules of using React hooks.

you guys should make a demo on how to call hooks properly

This issue is not Moralis specific, you can check out React docs or tutorials instead.

#4

itā€™s a moralis functionā€¦

that code doesnā€™t not workā€¦ call fetch and nothing happensā€¦

#5

useWeb3ExecuteFunction works if isWeb3Enabled is true, so you can add isWeb3Enabled to the dependencies of the hook and check if itā€™s true before calling the fetch. Also try log error from the hook to keep track of the execution status

#6

I donā€™t think you all understandā€¦

you are not using real world examples in your docsā€¦

maybe it works if itā€™s just that one function on the page and nothing elseā€¦

it runs that function and returns the resultsā€¦

when you have a bunch of other functions on the the same pageā€¦ as MOST real world applications haveā€¦ it doesnā€™t workā€¦

#7

it shouldnā€™t be this hard to mint an nft

(web3, enableWeb3, isWeb3Enabled} = useMoralis()
your web3 doesnā€™t expose utils, or .eth so runcontactnative web3 doesnā€™t workā€¦

#8

The docs provides basic examples required to get basic things done which can be built upon to get complex things done.
Since youā€™re using react too, react docs explained in similar way ( basic example that can be used to build complex works )

#9
#10

real world examples would be A LOT more helpfulā€¦
most devs arenā€™t going to have a page with one function on it

#11

Real-world examples are showcased in the weekly project series.

#12

Error: Provided address 5.676064741032766e+47 is invalid, the capitalization checksum test failed, or itā€™s an indirect IBAN address which canā€™t be converted.

#13

What are you trying to do ?

#14

just trying to mint an nftā€¦
have tried it this way

  const [_mintForm, setMintForm] = useState(null)

  useEffect(()=>{
    console.log('fetching....')
    const mintnftea = async()=> {
  
    {data_, error_ fetch, isFetching}  await useWeb3ExecuteFunction({
        abi: _nftea,
        contractAddress: '0x636c5AC57F13DdAB170d4064F0A3EB3f2949B885',
        functionName: "mint",
        params: {
          secondsAgos: [_mintForm.amount,_mintForm.redeems,_mintForm.metadataurl_.charCodeAt(0),_mintForm.ipfs,_mintForm.payTo,_mintForm.splitwith,_mintForm.split,_mintForm.redeemfrequency],
        },
      });
    }
  
  
  }, [mintnftea])

form gets submittedā€¦ NFTea gets mintedā€¦

web3, and every other way from your docsā€¦

    const JSONdata = JSON.stringify(dataMint_)
    const endpoint = '/api/mintnftea'
    const options = {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSONdata,
    }
    const response = await fetch(endpoint, options)
    const result = await response.json()

sent it to the back end for the evm to do it

export default async function handler(req, res) {

  const body = req.body

  const functionName = 'mint';

  const chain = EvmChain.GOERLI;
  const params = {quantity_:body.amount,redeems_:body.redeems,data_:body.metadataurl_.charCodeAt(0),ipfs_:body.ipfs,payto_:body.payTo,splitwith_:body.splitwith,splitpercent_:body.split,redeemfrequency_:body.redeemfrequency};
  const address = process.env.NFTEA;

  await Moralis.start({
      apiKey: process.env.MORALIS_API_KEY,
  });

  const response = await Moralis.EvmApi.utils.runContractFunction({
      functionName,
      params,
      address,
      chain,
  });
  console.log(response.result);


    res.status(200).json({
      data: response.result
    });
}

doesnā€™t work and .charCodeAt(0) doesnā€™t work for the hex converstion

#15

this way

      const {data_, error_, fetch, isFetching_}  = useWeb3ExecuteFunction({
        abi: _nftea,
        contractAddress: '0x636c5AC57F13DdAB170d4064F0A3EB3f2949B885',
        functionName: "mint",
        params: {
          secondsAgos: [_mintForm.amount,_mintForm.redeems,_mintForm.metadataurl_.charCodeAt(0),_mintForm.ipfs,_mintForm.payTo,_mintForm.splitwith,_mintForm.split,_mintForm.redeemfrequency],
        },
      });

then call fetch after the images is uploaded and saved to ipfs

fetch({params:dataMint_})

nothing happensā€¦

#16

Regards the first part of the code here, you can get it fixed as Glad mentioned above that hooks should be at the top level.

  const { isWeb3Enabled, enableWeb3 } = useMoralis();
  const [_mintForm, setMintForm] = useState(null);
  const { fetch } = useWeb3ExecuteFunction();

  useEffect(() => {
    const mintnftea = async () => {
      if (!isWeb3Enabled) await enableWeb3();
      
      fetch({
        params: {
          abi: _nftea,
          contractAddress: "0x636c5AC57F13DdAB170d4064F0A3EB3f2949B885",
          functionName: "mint",
          params: {
            secondsAgos: [
              _mintForm.amount,
              _mintForm.redeems,
              _mintForm.metadataurl_.charCodeAt(0),
              _mintForm.ipfs,
              _mintForm.payTo,
              _mintForm.splitwith,
              _mintForm.split,
              _mintForm.redeemfrequency,
            ],
          },
        },
        onSuccess: (res) => console.log(res),
        onError: (err) => console.log(err),
      });
    };
    mintnftea();
  }, []);

You should fix the dependency hook depending on what and when you want it to fire
You can keep track of the process with the logs from onSuccess and onError

#17

As mentioned in the docs, runContractFunction run a given function of a contract abi and retrieve readonly data.

React Moralis - mint NFT using useWeb3ExecuteFunction
#18

almost got it goingā€¦

      const {data, error, fetch, isFetching_}  = useWeb3ExecuteFunction({
        abi: _nftea,
        contractAddress: "0x636c5AC57F13DdAB170d4064F0A3EB3f2949B885",
        functionName: "mint",
        params: {
          quantity_: _mintForm.amount,
          redeems_: _mintForm.redeems,
          data_: _mintForm.metadataurl_.charCodeAt(0),
          ipfs_:  _mintForm.ipfs,
          payto_: _mintForm.payTo,
          splitwith_: _mintForm.splitwith,
          splitpercent_:_mintForm.redeemfrequency,
          redeemfrequency_:_mintForm.split
        },
      });

invalid address or ENS name (argument=ā€œnameā€, value=0, code=INVALID_ARGUMENT, version=contracts/5.6.0)

is there a special way to set addresses in react?
with qoutes, withoutā€¦ doesnā€™t work

#19

Check if the address passed is a valid contract address

You should set it with quotes

#20

invalid address or ENS name (argument=ā€œnameā€, value=0, code=INVALID_ARGUMENT, version=contracts/5.6.0)