TYPESCRIPT

ethers.js calling smart contract

import { ethers } from 'ethers';
(async () => {
  //calling smart contract which contains bigNumber
let bigNumber = await stakeContract.totalBalanceGrowRich();
 let number = ethers.utils.formatEther(bigNumber);
      setStakeInfo(prev => {
        return { ...prev, staked: Number(number).toLocaleString('en-US') };
  });
  //which return non big Number
 let currentTime = await stakeContract.getCurrentTime();
  setStakeInfo(prev => {
    return { ...prev, currentTime: Number(currentTime) };
   });
  
})()

Contract in ethers.js

Provider:
A Provider (in ethers) is a class which provides an abstraction for a connection to the Ethereum Network. 
It provides read-only access to the Blockchain and its status.

import { ethers } from "ethers";
const provider = new ethers.providers.Web3Provider(window.ethereum)

Signer:
A Signer is a class which (usually) in some way directly or indirectly has access to a private key,
which can sign messages and transactions to authorize the network to charge your account ether to perform operations.

const signer = provider.getSigner()

Contract:
A Contract is an abstraction which represents a connection to a specific contract on the Ethereum Network,
so that applications can use it like a normal JavaScript object.

calling contract in ether.js

import { ethers, BigNumber } from 'ethers'


  const [contract, setContract] = useState<any>(undefined)
  const [count, setCount] = useState(BigNumber.from(0))

  useEffect(() => {
    // @ts-ignore
    const provider = new ethers.providers.Web3Provider(window.ethereum)
    setContract(
      new ethers.Contract(
        String(process.env.NEXT_PUBLIC_CONTRACT_ADDRESS),
        contractAbi,
        provider
      )
    )
  }, [])

return (
     <main>
        <button
          className="px-4 bg-red-500"
          onClick={async () => {setCount(await contract.count())}}
        >
          Count
        </button>
        <p>{count.toString()}</p>
      </main>
)