Skip to content

Instantly share code, notes, and snippets.

@baierjak
Created December 15, 2021 15:13
Show Gist options
  • Save baierjak/c1929a20ab2c5b020ab21e8ad1dd889f to your computer and use it in GitHub Desktop.
Save baierjak/c1929a20ab2c5b020ab21e8ad1dd889f to your computer and use it in GitHub Desktop.
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;
import { DAppProvider } from '@usedapp/core'
return (
<DAppProvider config={{}}>
<App />
</DAppProvider>
)
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: [],
}) ?? [];
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()
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment