app.js

import abi from "./abi.js";
import openTab from "./tab.js";
const { ethers: etherjs } = ethers;

const rpcUrl = "https://goerli.infura.io/v3/ba80361523fe423bb149026a490266f0";
const signerProvider = new etherjs.providers.Web3Provider(window.ethereum);

const provider = new etherjs.providers.JsonRpcProvider(rpcUrl);

const signer = signerProvider.getSigner();
const tokenAddress = "0xC770d227Eb937D7D3A327e68180772571C24525F";
const addresses = ["0x681AB532e47595b36bcF5574b0f204052a9Ad32b", "0xAd2d0BF222cb55E5dB5820D966E905a0850F3308", "0x134Aca5E2f9767c02207dFbD03dD68ad1230E8B9", "0xEcb710E7C52D9D38626f30A0eaF572f1A8a6F118", "0x1cDbDE6B1BfD6F9C92ED067543b306ec712E9bF3"]

const useContract = async (address, abi, isSigner = false) => {
  const providerSigner = new etherjs.providers.Web3Provider(window.ethereum);
  const signer = providerSigner.getSigner();
  const provider = new etherjs.providers.JsonRpcProvider(rpcUrl);
  const newProvider = isSigner ? signer : provider;
  return new ethers.Contract(address, abi, newProvider);
};

// view functions
// new ethers.Contract(address, abi, provider)

//state  mutating functions
// new ethers.Contract(address, abi, signer)

const connectWallet = async () => {
  await signerProvider.send("eth_requestAccounts");
  await getUserWallet();
};

const getUserWallet = async () => {
  let userAddress = await signer.getAddress();
  //   connectedWallet = userAddress;
  updateUserAddress(userAddress);
  //   console.log(connectedWallet, "connected wallet");
};

export default {
  openTab,
};

// elements
// const button = document.getElementById("connectBtn");
// const userAddress = document.getElementById("userAddress");

// Event Listeners
connectBtn.addEventListener("click", connectWallet);

function updateUserAddress(address) {
  userAddress.innerText = address;
}

function tokenTemplateUpdate(name, symbol, totalSupply, usrbal) {
  return `
  <div class="flex justify-between items-center">
    <div>
        <div class="flex items-center">
            <div class="p-2 token-thumbnail w-10 h-10"> 
                <img src="https://bafybeiekvvr4iu4bqxm6de5tzxa3yfwqptmsg3ixpjr4edk5rkp3ddadaq.ipfs.dweb.link/" alt="token-img" />  </div>
            <div>
                <p class="font-semibold">${name} - ${symbol} </p>
                <p>Total Supply:${totalSupply}</p>
            </div>
        </div>
    </div>
    <div>${usrbal}</div>
</div>`;
}

async function getTokenDetails(address, abis) {
  loader.innerText = "Loading...";
  try {
      let token = await useContract(address, abis);
      const [name, symbol, totalSupply, usrbal] = await Promise.all([
        token.name(),
        token.symbol(),
        token.totalSupply(),
        token.balanceOf(signer.getAddress())
      ]);
      return { name, symbol, totalSupply: Number(totalSupply), usrbal };
    // }
    // return token;
    
  } catch (error) {
    errored.innerText = "Error Occurred!";
    console.log("error occurred", error);
  } finally {
    loader.innerText = "";
  }
}

async function InitData() {
  // const { name, symbol, totalSupply, usrbal } = await getTokenDetails();

  // console.log(name,symbol,totalSupply, usrbal, "na")
  for (let i = 0; i < addresses.length; i++) {
    const result = await getTokenDetails(addresses[i], abi);
    const {name, symbol, totalSupply, usrbal} = result;
    const template = tokenTemplateUpdate(name, symbol, totalSupply, usrbal);
    token.innerHTML += template;
  }

}

InitData();