App.tsx

import { FC } from 'react';
import { useEthers, useEtherBalance, useContractCall, useContractFunction } from '@usedapp/core';
import { formatEther } from '@ethersproject/units';
import { Contract } from '@ethersproject/contracts';
import { ethers } from 'ethers';

// ABI definition of custom methods in JSON syntax
import simpleContractAbi from './ABI.json';

// smart contract deployed address
export const simpleContractAddress = '0xa788C207749F123bE722720b6629F6Ac52A1b8C9';
const simpleContractInterface = new ethers.utils.Interface(simpleContractAbi);

const contract = new Contract(simpleContractAddress, simpleContractInterface);

const App: FC = () => {
    const { activateBrowserWallet, account } = useEthers();
    const etherBalance = useEtherBalance(account);

    const [balance]: any =
        useContractCall({
            abi: simpleContractInterface,
            address: simpleContractAddress,
            method: 'balanceOf',
            args: ['0xEC28e6671Bcb93979DFB1734e5240c0cF52bC152', '1'],
        }) ?? [];

    const { state, send } = useContractFunction(contract, 'safeTransferFrom');

    return (
        <>
            {account ? (
                <div>
                    <p>In your wallet: {etherBalance && parseFloat(formatEther(etherBalance)).toFixed(2)} ETH</p>
                </div>
            ) : (
                <button onClick={() => activateBrowserWallet()}>Connect to a wallet</button>
            )}
            {balance && (
                <div>
                    <p>Balance of your custom smart contract acc: {balance && parseFloat(balance).toFixed(2)} NFT</p>
                </div>
            )}

            <button onClick={() => send()}>Send transaction</button>
            {state && (
                <>
                    <p>Status: {state.status}</p>
                    <p>Error message: {state.errorMessage}</p>
                </>
            )}
        </>
    );
};

export default App;

main.tsx

import { DAppProvider } from '@usedapp/core'

return (
  <DAppProvider config={{}}>
    <App />
  </DAppProvider>
)

RPCcall.tsx

import { useContractCall, useContractFunction } from '@usedapp/core';
import { Contract } from '@ethersproject/contracts';
import { ethers } from 'ethers';

import simpleContractAbi from './ABI.json'; // JSON defined interface of methods

// smart contract deployed address
export const simpleContractAddress = '0xa788C207749F123bE722720b6629F6Ac52A1b8C9';
const simpleContractInterface = new ethers.utils.Interface(simpleContractAbi);

// RPC call - reading interaction
const [balance]: any =
    useContractCall({
      abi: simpleContractInterface,
      address: simpleContractAddress,
      method: 'balanceOf',
      args: [],
    }) ?? [];

transaction.tsx

import { useContractCall, useContractFunction } from '@usedapp/core';
import { Contract } from '@ethersproject/contracts';
import { ethers } from 'ethers';

import simpleContractAbi from './ABI.json'; // JSON defined interface of methods

// smart contract deployed address
export const simpleContractAddress = '0xa788C207749F123bE722720b6629F6Ac52A1b8C9';
const simpleContractInterface = new ethers.utils.Interface(simpleContractAbi);

const contract = new Contract(simpleContractAddress, simpleContractInterface);

// Transaction - modifying interaction
const { state, send } = useContractFunction(contract, 'safeTransferFrom');
send()

wallet.tsx

import { useEthers, useEtherBalance } from '@usedapp/core';
import { formatEther } from '@ethersproject/units';

const { activateBrowserWallet, account } = useEthers();
const etherBalance = useEtherBalance(account);

<p>{parseFloat(formatEther(etherBalance)).toFixed(2)} ETH</p>