Issue in getting total supply of homes

[sahilbansal123-lang]

Denying load of chrome-extension://iadokddofjgcgjpjlfhngclhpmaelnli/src/assets/styles.css. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.

I'm getting this issue while getting total supply of homes from ipfs

``` error
Error loading blockchain data: Error: call revert exception [ See: https://links.ethers.org/v5-errors-CALL_EXCEPTION ] (method="totalSupply()", data="0x", errorArgs=null, errorName=null, errorSignature=null, reason=null, code=CALL_EXCEPTION, version=abi/5.7.0)
    at Logger.makeError (index.ts:269:1)
    at Logger.throwError (index.ts:281:1)
    at Interface.decodeFunctionResult (interface.ts:427:1)
    at Contract.<anonymous> (index.ts:400:1)
    at Generator.next (<anonymous>)
    at fulfilled (index.ts:1:1)

App.js:61 Error loading blockchain data: Error: call revert exception [ See: https://links.ethers.org/v5-errors-CALL_EXCEPTION ] (method="totalSupply()", data="0x", errorArgs=null, errorName=null, errorSignature=null, reason=null, code=CALL_EXCEPTION, version=abi/5.7.0)
    at Logger.makeError (index.ts:269:1)
    at Logger.throwError (index.ts:281:1)
    at Interface.decodeFunctionResult (interface.ts:427:1)
    at Contract.<anonymous> (index.ts:400:1)
    at Generator.next (<anonymous>)
    at fulfilled (index.ts:1:1)

Here's my javascript code the app.js

import { useEffect, useState } from 'react';
import { ethers } from 'ethers';

// Components
import Navigation from './components/Navigation';
import Search from './components/Search';
import Home from './components/Home';

// ABIs
import RealEstate from './abis/RealEstate.json'
import Escrow from './abis/Escrow.json'

// Config
import config from './config.json';

function App() {
  const [provider, setProvider] = useState(null)
  const [escrow, setEscrow] = useState(null)

  const [account, setAccount] = useState(null)

  const [homes, setHomes] = useState([])
  const [home, setHome] = useState({})
  const [toggle, setToggle] = useState(false);

  const loadBlockchainData = async () => {
    try {
    const provider = new ethers.providers.Web3Provider(window.ethereum);
    setProvider(provider);
    
      const network = await provider.getNetwork();
      const chainId = network.chainId;
    
      const contractAddresses = config[chainId];
      if (!contractAddresses) {
        throw new Error(`No contract addresses found for chainId ${chainId}`);
      }
    
      const realEstate = new ethers.Contract(contractAddresses.realEstate.address, RealEstate, provider);
      const totalSupply = await realEstate.totalSupply();
      const homes = [];
    
      for (var i = 1; i <= totalSupply; i++) {
        const uri = await realEstate.tokenURI(i);
        const response = await fetch(uri);
        const metadata = await response.json();
        homes.push(metadata);
      }
    
      setHomes(homes)
    
      const escrow = new ethers.Contract(contractAddresses.escrow.address, Escrow, provider);
      setEscrow(escrow);
    
      window.ethereum.on('accountsChanged', async () => {
        const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
        const account = ethers.utils.getAddress(accounts[0])
        setAccount(account);
      });
    } catch (error) {
      console.error("Error loading blockchain data:", error);
    }
    };

  useEffect(() => {
    loadBlockchainData()
  }, [])

  const togglePop = (home) => {
    setHome(home)
    toggle ? setToggle(false) : setToggle(true);
  }

  return (
    <div>
      <Navigation account={account} setAccount={setAccount} />
      <Search />

      <div className='cards__section'>

        <h3>Homes For You</h3>

        <hr />

        <div className='cards'>
          {homes.map((home, index) => (
            <div className='card' key={index} onClick={() => togglePop(home)}>
              <div className='card__image'>
                <img src={home.image} alt="Home" />
              </div>
              <div className='card__info'>
                <h4>{home.attributes[0].value} ETH</h4>
                <p>
                  <strong>{home.attributes[2].value}</strong> bds |
                  <strong>{home.attributes[3].value}</strong> ba |
                  <strong>{home.attributes[4].value}</strong> sqft
                </p>
                <p>{home.address}</p>
              </div>
            </div>
          ))}
        </div>

      </div>

      {toggle && (
        <Home home={home} provider={provider} account={account} escrow={escrow} togglePop={togglePop} />
      )}

    </div>
  );
}

export default App;

[f-bahesna]

hey I got this error too, have you try to re-deploy the contract?

[Anjali0048]

Is this issue solved?

[xyc717]

maybe you forget to deply the contract

 npx hardhat run .\scripts\deploy.js --network localhost