Contract Call

We now look to read data from the contract we have added to our app.

A contract call is read-only RPC request to fetch data from a smart contract. Fetching an ERC20 token balance with balanceOf(address) is a contract call for example. Under the hood, Web3-Redux uses the web3.eth.Contract.methods.myMethod.call API.

In this example we will do a simple balanceOf(address) contract calls on the USDC token contract:

React

The easiest way make a contract is using the useContractCall hook. This combines dispatching a redux action and using a selector to return the updated result.

src/App.tsx

import { Abi, Contract, Network } from '@owlprotocol/web3-redux';

const defaultNetwork = { web3Rpc: 'ws://localhost:8545' };
const defaultContract = { abi: Abi.IERC20.abi };
const USDC = '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48';
const VITALIK = '0xab5801a7d398351b8be11c439e05c5b3259aec9b';

const App = () => {
    const [network] = Network.hooks.useNetwork('1', defaultNetwork)
    const [contract] = Contract.hooks.useContract('1', USDC, defaultContract);
    const [balance] = Contract.hooks.useContractCall('1', USDC, 'balanceOf', [VITALIK]);

    return <>{balance}</>
};

tip

Here our hook implicitly uses "ifnull" as the default sync parameter to instruct the hook to dispatch an eth call only if no value is currently cached. For more info on complex sync strategies, see the Advanced/Contract Call Sync

Redux

Under the hood, the useContractCall selector to read the result from the state.

src/createContractCall.ts

import { createStore, Contract, Network, EthCall, TestData } from '@owlprotocol/web3-redux';

const store = createStore();
const networkId = '1'
const USDC = '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48';
const VITALIK = '0xab5801a7d398351b8be11c439e05c5b3259aec9b';

//Make contract call
store.dispatch(Contract.actions.call({
    networkId,
    address: USDC,
    method: 'balanceOf',
    args: [VITALIK],
}));
const balance = await EthCall.db.get({
    networkId,
    to: USDC,
    methodName: method as string,
    argsHash: JSON.stringify([VITALIK]),
})