Refactoring

since we are calling these read and write in another pages, why dont we put it as helper.

utils/getContractDetail.jsx

import { ethers } from "ethers";

const newJson ={
//================================GET YOUR ABI JSON FROM ETHERSCAN
}

export const contractABI = JSON.parse(newJson.result);
export const iface = new ethers.utils.Interface(contractABI)
export const FormatTypes = ethers.utils.FormatTypes;
export const contract = iface.format(FormatTypes.minimal);

export const provider = new ethers.providers.Web3Provider(window.ethereum);

export const daiAddress = "0x435F512bB2EA7326C9E309877612e87CcD17E745";

export const daiContract = new ethers.Contract(daiAddress, contract, provider);

export const name =async ()=> (await daiContract.name())
	
export const price =async ()=> (await daiContract.price())

export const maxFreeMintPerWallet = async ()=> (await daiContract.maxFreeMintPerWallet())

export const maxMinting =async ()=> ( await daiContract.maxMinting())

export const maxMintPerWallet = async ()=> (await daiContract.maxMintPerWallet())

export const balanceOf = async (address)=> (await daiContract.balanceOf(address))

export const userOwnedTokens = async(address,id)=>(await daiContract.userOwnedTokens(address,id))

export const get_address_token = async(address,id)=>(await daiContract.get_address_token(address,id))

utils/getWalletAddress.jsx

import { ethers } from 'ethers';
import React from 'react'

export const getWallet = async () => {
    const provider = new ethers.providers.Web3Provider(window.ethereum)
    try {
      const myAddress = await provider.getSigner().getAddress();
      return (myAddress)
    } catch (error) {
      console.log(error)
    }
  }

get ABI from etherscan

export abi to json and copy paste it to your newJson

Calling function from your component

import * as contract from "./Utils/getContractDetail"
import { getWalletAddress } from './Utils/getWalletAddress';

//See ABI in your console.log
console.log(contract.contract)

const myAddress= await getWallet();
console.log(myAddress,'this is wallet')

const tokenIds= await contract.balanceOf(myAddress);
console.log(tokenIds,'this is token Ids')