How do I use react-moralis useWeb3ExecuteFunction to call a function in my smart contract?

Moralis General
#1

Hello.

How to use useWeb3ExecuteFunction?

This example not work.

const ShowUniswapObserveValues = () => {
  const { data, error, fetch, isFetching, isLoading } = useWeb3ExecuteFunction();
  
 	const options = {
		abi,
		contractAddress: '0xF28c3e812cFE316cA099978C8e4cB53d81b41acF',
		functionName: 'getFullName',
		params: {
			_list: 0,
			_name: '0x7465737400000000000000000000000000000000000000000000000000000000'
		}
	}

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

ABI

ABI 
const abi = [
	{
		inputs: [],
		stateMutability: 'nonpayable',
		type: 'constructor',
	},
	{
		anonymous: false,
		inputs: [
			{
				indexed: true,
				internalType: 'bytes',
				name: 'full_name',
				type: 'bytes',
			},
			{
				indexed: true,
				internalType: 'bytes32',
				name: 'name',
				type: 'bytes32',
			},
			{
				indexed: true,
				internalType: 'address',
				name: 'owner',
				type: 'address',
			},
			{
				indexed: false,
				internalType: 'uint256',
				name: 'created',
				type: 'uint256',
			},
			{
				indexed: false,
				internalType: 'uint256',
				name: 'deleted',
				type: 'uint256',
			},
		],
		name: 'Register',
		type: 'event',
	},
	{
		inputs: [],
		name: '_owner',
		outputs: [
			{
				internalType: 'address payable',
				name: '',
				type: 'address',
			},
		],
		stateMutability: 'view',
		type: 'function',
	},
	{
		inputs: [
			{
				internalType: 'bytes32',
				name: '_bytes32',
				type: 'bytes32',
			},
		],
		name: 'bytes32ToString',
		outputs: [
			{
				internalType: 'string',
				name: '',
				type: 'string',
			},
		],
		stateMutability: 'pure',
		type: 'function',
	},
	{
		inputs: [
			{
				internalType: 'uint256',
				name: '',
				type: 'uint256',
			},
		],
		name: 'data',
		outputs: [
			{
				internalType: 'enum Example.List',
				name: 'list',
				type: 'uint8',
			},
			{
				internalType: 'bytes32',
				name: 'name',
				type: 'bytes32',
			},
			{
				internalType: 'address',
				name: 'owner',
				type: 'address',
			},
			{
				internalType: 'uint256',
				name: 'created_at',
				type: 'uint256',
			},
			{
				internalType: 'uint256',
				name: 'deleted_at',
				type: 'uint256',
			},
		],
		stateMutability: 'view',
		type: 'function',
	},
	{
		inputs: [],
		name: 'data_id',
		outputs: [
			{
				internalType: 'uint256',
				name: '',
				type: 'uint256',
			},
		],
		stateMutability: 'view',
		type: 'function',
	},
	{
		inputs: [
			{
				internalType: 'enum Example.List',
				name: '_list',
				type: 'uint8',
			},
			{
				internalType: 'bytes32',
				name: '_name',
				type: 'bytes32',
			},
		],
		name: 'getFullName',
		outputs: [
			{
				internalType: 'address',
				name: '',
				type: 'address',
			},
		],
		stateMutability: 'view',
		type: 'function',
	},
	{
		inputs: [
			{
				internalType: 'enum Example.List',
				name: '_list',
				type: 'uint8',
			},
			{
				internalType: 'bytes32',
				name: '_name',
				type: 'bytes32',
			},
		],
		name: 'register',
		outputs: [
			{
				internalType: 'bool',
				name: 'success',
				type: 'bool',
			},
		],
		stateMutability: 'payable',
		type: 'function',
	},
]

Contract: https://testnet.snowtrace.io/address/0xf28c3e812cfe316ca099978c8e4cb53d81b41acf

Remix:

image

#2

ethers js the code works without errors.

    import { ethers } from 'ethers'

	const provider = new ethers.providers.JsonRpcProvider(
		'https://speedy-nodes-nyc.moralis.io/KEY/avalanche/testnet'
	 )

	const daiContract = new ethers.Contract(
		'0xF28c3e812cFE316cA099978C8e4cB53d81b41acF',
		abi,
		provider
	);

    await daiContract.getFullName(
        0,
        '0x7465737400000000000000000000000000000000000000000000000000000000'
    );

How to do the same in react-moralis?

#3

try to use “0” instead of 0 in case that you are not using latest sdk version

#4

Thanks for your reply.

Please tell me, I only need to get a string from the contract function.

How do I activate enableWeb3 without connecting to Metamask? I need it to work through JSON-RPC Moralis, not through Infura Metamask.

#5

If you only need to call a read only function than you don’t need to enable web3, you can use runContractFunction from web3api or the equivalent from react

#6

I would love to use react-moralis :red_circle: but as I showed above, I can’t.

At the same time ethers :green_circle: works without errors.

Full code ethers 
import React, { useState } from 'react'
import { ethers } from 'ethers'

const abi = [
	{
		inputs: [],
		stateMutability: 'nonpayable',
		type: 'constructor',
	},
	{
		anonymous: false,
		inputs: [
			{
				indexed: true,
				internalType: 'bytes',
				name: 'full_name',
				type: 'bytes',
			},
			{
				indexed: true,
				internalType: 'bytes32',
				name: 'name',
				type: 'bytes32',
			},
			{
				indexed: true,
				internalType: 'string',
				name: 'fullname',
				type: 'string',
			},
			{
				indexed: false,
				internalType: 'uint256',
				name: 'created',
				type: 'uint256',
			},
			{
				indexed: false,
				internalType: 'uint256',
				name: 'deleted',
				type: 'uint256',
			},
		],
		name: 'Register',
		type: 'event',
	},
	{
		inputs: [],
		name: '_owner',
		outputs: [
			{
				internalType: 'address payable',
				name: '',
				type: 'address',
			},
		],
		stateMutability: 'view',
		type: 'function',
	},
	{
		inputs: [
			{
				internalType: 'bytes32',
				name: '_bytes32',
				type: 'bytes32',
			},
		],
		name: 'bytes32ToString',
		outputs: [
			{
				internalType: 'string',
				name: '',
				type: 'string',
			},
		],
		stateMutability: 'pure',
		type: 'function',
	},
	{
		inputs: [
			{
				internalType: 'uint256',
				name: '',
				type: 'uint256',
			},
		],
		name: 'data',
		outputs: [
			{
				internalType: 'enum Example.List',
				name: 'list',
				type: 'uint8',
			},
			{
				internalType: 'bytes32',
				name: 'name',
				type: 'bytes32',
			},
			{
				internalType: 'address',
				name: 'owner',
				type: 'address',
			},
			{
				internalType: 'string',
				name: 'fullname',
				type: 'string',
			},
			{
				internalType: 'uint256',
				name: 'created_at',
				type: 'uint256',
			},
			{
				internalType: 'uint256',
				name: 'deleted_at',
				type: 'uint256',
			},
		],
		stateMutability: 'view',
		type: 'function',
	},
	{
		inputs: [],
		name: 'data_id',
		outputs: [
			{
				internalType: 'uint256',
				name: '',
				type: 'uint256',
			},
		],
		stateMutability: 'view',
		type: 'function',
	},
	{
		inputs: [
			{
				internalType: 'enum Example.List',
				name: '_list',
				type: 'uint8',
			},
			{
				internalType: 'bytes32',
				name: '_name',
				type: 'bytes32',
			},
		],
		name: 'getFullName',
		outputs: [
			{
				internalType: 'string',
				name: '',
				type: 'string',
			},
		],
		stateMutability: 'view',
		type: 'function',
	},
	{
		inputs: [
			{
				internalType: 'enum Example.List',
				name: '_list',
				type: 'uint8',
			},
			{
				internalType: 'bytes32',
				name: '_name',
				type: 'bytes32',
			},
		],
		name: 'register',
		outputs: [
			{
				internalType: 'bool',
				name: 'success',
				type: 'bool',
			},
		],
		stateMutability: 'payable',
		type: 'function',
	},
]

function App() {
	const [name, setName] = useState('')

	const provider = new ethers.providers.JsonRpcProvider(
		'https://speedy-nodes-nyc.moralis.io/KEY/avalanche/testnet'
	)

	const daiContract = new ethers.Contract(
		'0x35F11F64df1af49CC47C0277225cA758e7adea7b',
		abi,
		provider
	)

	async function Fetch() {
		setName(
			await daiContract.getFullName(
				1,
				'0x7465737400000000000000000000000000000000000000000000000000000000'
			)
		)
	}

	return (
		<div>
			<button
				type='button'
				onClick={() => {
					Fetch()
				}}
			>
				Fetch data
			</button>
			{name && <pre>{JSON.stringify(name)}</pre>}
		</div>
	)
}

export default App
Full code react-moralis 
import React, { useEffect } from 'react'
import { useWeb3ExecuteFunction, useMoralis } from 'react-moralis'

const abi = [
	{
		inputs: [],
		stateMutability: 'nonpayable',
		type: 'constructor',
	},
	{
		anonymous: false,
		inputs: [
			{
				indexed: true,
				internalType: 'bytes',
				name: 'full_name',
				type: 'bytes',
			},
			{
				indexed: true,
				internalType: 'bytes32',
				name: 'name',
				type: 'bytes32',
			},
			{
				indexed: true,
				internalType: 'string',
				name: 'fullname',
				type: 'string',
			},
			{
				indexed: false,
				internalType: 'uint256',
				name: 'created',
				type: 'uint256',
			},
			{
				indexed: false,
				internalType: 'uint256',
				name: 'deleted',
				type: 'uint256',
			},
		],
		name: 'Register',
		type: 'event',
	},
	{
		inputs: [],
		name: '_owner',
		outputs: [
			{
				internalType: 'address payable',
				name: '',
				type: 'address',
			},
		],
		stateMutability: 'view',
		type: 'function',
	},
	{
		inputs: [
			{
				internalType: 'bytes32',
				name: '_bytes32',
				type: 'bytes32',
			},
		],
		name: 'bytes32ToString',
		outputs: [
			{
				internalType: 'string',
				name: '',
				type: 'string',
			},
		],
		stateMutability: 'pure',
		type: 'function',
	},
	{
		inputs: [
			{
				internalType: 'uint256',
				name: '',
				type: 'uint256',
			},
		],
		name: 'data',
		outputs: [
			{
				internalType: 'enum Example.List',
				name: 'list',
				type: 'uint8',
			},
			{
				internalType: 'bytes32',
				name: 'name',
				type: 'bytes32',
			},
			{
				internalType: 'address',
				name: 'owner',
				type: 'address',
			},
			{
				internalType: 'string',
				name: 'fullname',
				type: 'string',
			},
			{
				internalType: 'uint256',
				name: 'created_at',
				type: 'uint256',
			},
			{
				internalType: 'uint256',
				name: 'deleted_at',
				type: 'uint256',
			},
		],
		stateMutability: 'view',
		type: 'function',
	},
	{
		inputs: [],
		name: 'data_id',
		outputs: [
			{
				internalType: 'uint256',
				name: '',
				type: 'uint256',
			},
		],
		stateMutability: 'view',
		type: 'function',
	},
	{
		inputs: [
			{
				internalType: 'enum Example.List',
				name: '_list',
				type: 'uint8',
			},
			{
				internalType: 'bytes32',
				name: '_name',
				type: 'bytes32',
			},
		],
		name: 'getFullName',
		outputs: [
			{
				internalType: 'string',
				name: '',
				type: 'string',
			},
		],
		stateMutability: 'view',
		type: 'function',
	},
	{
		inputs: [
			{
				internalType: 'enum Example.List',
				name: '_list',
				type: 'uint8',
			},
			{
				internalType: 'bytes32',
				name: '_name',
				type: 'bytes32',
			},
		],
		name: 'register',
		outputs: [
			{
				internalType: 'bool',
				name: 'success',
				type: 'bool',
			},
		],
		stateMutability: 'payable',
		type: 'function',
	},
]

function App() {
	const { isWeb3Enabled, isWeb3EnableLoading, enableWeb3 } = useMoralis()
	const { data, fetch, error } = useWeb3ExecuteFunction()

	const options = {
		abi,
		contractAddress: '0x35F11F64df1af49CC47C0277225cA758e7adea7b',
		functionName: 'getFullName',
		providerUrl:
			'https://speedy-nodes-nyc.moralis.io/KEY/avalanche/testnet',
		chain: 'avalanche testnet',
		params: {
			_list: 1,
			_name: '0x7465737400000000000000000000000000000000000000000000000000000000',
		},
	}

	useEffect(() => {
		if (!isWeb3Enabled && !isWeb3EnableLoading) {
			enableWeb3()
		}
	}, [isWeb3Enabled, isWeb3EnableLoading])

	async function Fetch() {
		fetch({ params: options })
		console.log(error)
	}

	return (
		<div>
			<button
				type='button'
				onClick={() => {
					Fetch()
				}}
			>
				Fetch data
			</button>
			{data && <pre>{JSON.stringify(data)}</pre>}
		</div>
	)
}

export default App


Error: Missing web3 instance, make sure to call Moralis.enableWeb3() or Moralis.authenticate()

But I don’t want to connect to Metamask. I want to get the data from the contract and that’s it.

#7

you mean that you want to use a read only function from a contract? in that case you don’t need executeFunction

#8

Please tell me how can I read the data from the contract without installing Metamask using react-moralis?

Ethers.js copes with this perfectly.

#9

you can try this: https://github.com/MoralisWeb3/react-moralis#useapicontract

1 Like
#10

Yeah, thank you.

image

useApiContract 
import React from 'react'
import { useApiContract } from 'react-moralis'

const abi = [
	{
		inputs: [],
		stateMutability: 'nonpayable',
		type: 'constructor',
	},
	{
		anonymous: false,
		inputs: [
			{
				indexed: true,
				internalType: 'bytes',
				name: 'full_name',
				type: 'bytes',
			},
			{
				indexed: true,
				internalType: 'bytes32',
				name: 'name',
				type: 'bytes32',
			},
			{
				indexed: true,
				internalType: 'string',
				name: 'fullname',
				type: 'string',
			},
			{
				indexed: false,
				internalType: 'uint256',
				name: 'created',
				type: 'uint256',
			},
			{
				indexed: false,
				internalType: 'uint256',
				name: 'deleted',
				type: 'uint256',
			},
		],
		name: 'Register',
		type: 'event',
	},
	{
		inputs: [],
		name: '_owner',
		outputs: [
			{
				internalType: 'address payable',
				name: '',
				type: 'address',
			},
		],
		stateMutability: 'view',
		type: 'function',
	},
	{
		inputs: [
			{
				internalType: 'bytes32',
				name: '_bytes32',
				type: 'bytes32',
			},
		],
		name: 'bytes32ToString',
		outputs: [
			{
				internalType: 'string',
				name: '',
				type: 'string',
			},
		],
		stateMutability: 'pure',
		type: 'function',
	},
	{
		inputs: [
			{
				internalType: 'uint256',
				name: '',
				type: 'uint256',
			},
		],
		name: 'data',
		outputs: [
			{
				internalType: 'enum Example.List',
				name: 'list',
				type: 'uint8',
			},
			{
				internalType: 'bytes32',
				name: 'name',
				type: 'bytes32',
			},
			{
				internalType: 'address',
				name: 'owner',
				type: 'address',
			},
			{
				internalType: 'string',
				name: 'fullname',
				type: 'string',
			},
			{
				internalType: 'uint256',
				name: 'created_at',
				type: 'uint256',
			},
			{
				internalType: 'uint256',
				name: 'deleted_at',
				type: 'uint256',
			},
		],
		stateMutability: 'view',
		type: 'function',
	},
	{
		inputs: [],
		name: 'data_id',
		outputs: [
			{
				internalType: 'uint256',
				name: '',
				type: 'uint256',
			},
		],
		stateMutability: 'view',
		type: 'function',
	},
	{
		inputs: [
			{
				internalType: 'enum Example.List',
				name: '_list',
				type: 'uint8',
			},
			{
				internalType: 'bytes32',
				name: '_name',
				type: 'bytes32',
			},
		],
		name: 'getFullName',
		outputs: [
			{
				internalType: 'string',
				name: '',
				type: 'string',
			},
		],
		stateMutability: 'view',
		type: 'function',
	},
	{
		inputs: [
			{
				internalType: 'enum Example.List',
				name: '_list',
				type: 'uint8',
			},
			{
				internalType: 'bytes32',
				name: '_name',
				type: 'bytes32',
			},
		],
		name: 'register',
		outputs: [
			{
				internalType: 'bool',
				name: 'success',
				type: 'bool',
			},
		],
		stateMutability: 'payable',
		type: 'function',
	},
]

function App() {
	const { runContractFunction, data } = useApiContract({
		address: '0x35F11F64df1af49CC47C0277225cA758e7adea7b',
		functionName: 'getFullName',
		chain: 'avalanche testnet',
		abi,
		params: {
			_list: 1,
			_name: '0x7465737400000000000000000000000000000000000000000000000000000000',
		},
	})

	async function Fetch() {
		runContractFunction()
	}

	return (
		<div>
			<button
				type='button'
				onClick={() => {
					Fetch()
				}}
			>
				Fetch data
			</button>
			{data && <pre>{JSON.stringify(data)}</pre>}
		</div>
	)
}

export default App
1 Like