React runContractFunction error codes

Technical Issue Reporting
#21

reading that error now, it looks like something related to types, are you using simple react?

#22

Thank you very much for still with me. I was just playing with your example project and modified the code from this file directly (https://github.com/MoralisWeb3/demo-apps/blob/main/react-moralis-examples/src/modules/Web3Api.tsx) It looks like you guys had typescript enabled for this react project. So the fact that the project is complaining about types probably implies something under the hood isn’t 100%. thank you again.

#23

Hi, just want to check in to find out if you guys get a chance to look into why typescript is complaining about types in your demo app. thank you.

#24

Hi @junkseeker could you please share your ready code/repo?

#25

Hello @Yomoo,

Thanks for reaching out. I am starting from one of your demos.

git clone https://github.com/MoralisWeb3/demo-apps.git
cd demo-apps/react-moralis-examples/
yarn

server version: 0.0.288
replace src/modules/Web3Api.tsx with the following:

import React from "react";
import { Stack, Button, HStack, VStack, Divider } from "@chakra-ui/react";
import { CodeBlock } from "../components/CodeBlock";
import { useMoralisWeb3Api, useMoralisWeb3ApiCall } from "react-moralis";

export const Web3Api = () => {
  const ERC20_ABI = [
    {
      constant: true,
      inputs: [],
      name: "totalSupply",
      outputs: [{ name: "", type: "uint256" }],
      payable: false,
      stateMutability: "view",
      type: "function",
    },
  ];

  const {
    native: { runContractFunction },
  } = useMoralisWeb3Api();

  const wethAddress = "0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2";

  const getTotalSupply = useMoralisWeb3ApiCall(runContractFunction, {
    chain: "eth",
    address: wethAddress,
    function_name: "totalSupply",
    abi: ERC20_ABI,
  });

  return (
    <VStack spacing={6} alignItems="stretch" divider={<Divider />}>
      <Stack spacing={3}>
        <HStack>
          <Button onClick={() => getTotalSupply.fetch()}>
            get total supply
          </Button>
        </HStack>
        <CodeBlock>{JSON.stringify(getTotalSupply, null, 2)}</CodeBlock>
      </Stack>
    </VStack>
  );
};

There’s a type check error on the following ine: “abi: ERC20_ABI,”

The code works fine if I were to skip the type check with // @ts-ignore:next-line

I am just saying it’s better to get it working 100% with type checks fully functional.

Thanks again

1 Like
#26

I see. Thank you! We will update the types