abracu/index.js

## index.js
import Head from 'next/head'
import Image from 'next/image'
import styles from '@/styles/Home.module.css'
import { Contract, providers, utils } from 'ethers'
import React, { useEffect, useRef, useState } from 'react'
import web3Modal from 'web3Modal'
import {ABI, NFT_CONTRANCT_ADDRESS} from '../constanst'


export default function Home() {

  const [walletConnected, setWalletConnected] = useState(false)
  const [provider, setProvider] = useState(null)
  const [userLogged, setUserLogged] = useState(null)
  const [showUI, setShowUI] = useState(false)

  const wab3ModalRef = useRef()

  const getProviderOrSigner = async ( needSigner = false) => {

    const provider = await wab3ModalRef.current.connect();
    const web3Provider = new providers.Web3Provider(provider);

    const { chainId } = await web3Provider.getNetwork();
    // if (chainId !== 5) {
    //   console.log("Incorrect network");
    //   throw new Error('Please connect to mainnet');
    // }

    if (needSigner) {
      const signer = web3Provider.getSigner();
      return signer;
    }

    return web3Provider;
  }

  const connectWallet = async () => {
    try {
      const provider = await getProviderOrSigner();
      setProvider(provider);
      setWalletConnected(true);
    } catch (error) {
      console.log(error)
    }

  }

  const readyWallet = async () => {
    await connectWallet();

    window.ethereum.on('accountsChanged', async function (accounts){
      if(accounts[0]) {
        const currentAccount = utils.getAddress(accounts[0]);
        const role = await getUserRole(currentAccount);
        setUserLogged(role);
      } else {
        setWalletConnected(false);
        setUserLogged(null);
        setShowUI(false);
      }
    });
  }

  const getUserRole = async (currentAccount) => {
    try {
      const provider = await getProviderOrSigner();
      const transparency = new Contract(NFT_CONTRANCT_ADDRESS, ABI, provider);

      if (await transparency.owner() == currentAccount) {
        return 3;
      } else {
        const role = await transparency.getUserRole(currentAccount);
        console.log('Role ----> ', role);
        return role;
      }
    } catch (error) {
      console.log(error);
    }
  }

  const readyAccount = async () => {
    try {
      const accounts = await provider.send('eth_requestAccounts', []);
      const currentAccount = utils.getAddress(accounts[0]);
      const role = await getUserRole(currentAccount);
      setUserLogged(role);
    } catch (error) {
      console.log(error);
    }
  }

  useEffect(() => {
    async function fetchProvider() {
     if (!walletConnected) {
      wab3ModalRef.current = new web3Modal({
        network: 'hardhat',
        providerOptions: {},
        disableInjectedProvider: false,
      })
      await readyWallet();

     }
    }
    console.log('---> abtiene el fetchProvider');
    fetchProvider();
  }, [])

  useEffect(() => {
    if (provider) {
      async function fetchRole() {
        await readyAccount();
      }
      console.log('---> abtiene el fetchRole');
      fetchRole();
    }
  }, [provider])

  useEffect(() => {
    if (userLogged != null) {
      setShowUI(true);
    }
  }, [userLogged])

  console.log('---userLogged---->', userLogged);

  const showUserUI = () => {
    switch (userLogged) {
      case 0:
        return (<h3>Hola, eres un usuario Farmer</h3>)
      case 1:
        return (<h3>Hola, eres un usuario Baker</h3>)
      case 2:
        return (<h3>Hola, eres un usuario Customer</h3>)
      case 3:
        return (<h3>Hola, eres el owner</h3>)
    }

  }

  return (
    <div className={styles.container}>
      <Head>
        <title>Bravo Transparency</title>
      </Head>
      <div>
        {
          showUI ?
          showUserUI(userLogged)
          :
          <h3>coneting to a wallet...</h3>
        }
      </div>

    </div>
  )
}
	import Head from 'next/head'
	import Image from 'next/image'
	import styles from '@/styles/Home.module.css'
	import { Contract, providers, utils } from 'ethers'
	import React, { useEffect, useRef, useState } from 'react'
	import web3Modal from 'web3Modal'
	import {ABI, NFT_CONTRANCT_ADDRESS} from '../constanst'


	export default function Home() {

	const [walletConnected, setWalletConnected] = useState(false)
	const [provider, setProvider] = useState(null)
	const [userLogged, setUserLogged] = useState(null)
	const [showUI, setShowUI] = useState(false)

	const wab3ModalRef = useRef()

	const getProviderOrSigner = async ( needSigner = false) => {

	const provider = await wab3ModalRef.current.connect();
	const web3Provider = new providers.Web3Provider(provider);

	const { chainId } = await web3Provider.getNetwork();
	// if (chainId !== 5) {
	// console.log("Incorrect network");
	// throw new Error('Please connect to mainnet');
	// }

	if (needSigner) {
	const signer = web3Provider.getSigner();
	return signer;
	}

	return web3Provider;
	}

	const connectWallet = async () => {
	try {
	const provider = await getProviderOrSigner();
	setProvider(provider);
	setWalletConnected(true);
	} catch (error) {
	console.log(error)
	}

	}

	const readyWallet = async () => {
	await connectWallet();

	window.ethereum.on('accountsChanged', async function (accounts){
	if(accounts[0]) {
	const currentAccount = utils.getAddress(accounts[0]);
	const role = await getUserRole(currentAccount);
	setUserLogged(role);
	} else {
	setWalletConnected(false);
	setUserLogged(null);
	setShowUI(false);
	}
	});
	}

	const getUserRole = async (currentAccount) => {
	try {
	const provider = await getProviderOrSigner();
	const transparency = new Contract(NFT_CONTRANCT_ADDRESS, ABI, provider);

	if (await transparency.owner() == currentAccount) {
	return 3;
	} else {
	const role = await transparency.getUserRole(currentAccount);
	console.log('Role ----> ', role);
	return role;
	}
	} catch (error) {
	console.log(error);
	}
	}

	const readyAccount = async () => {
	try {
	const accounts = await provider.send('eth_requestAccounts', []);
	const currentAccount = utils.getAddress(accounts[0]);
	const role = await getUserRole(currentAccount);
	setUserLogged(role);
	} catch (error) {
	console.log(error);
	}
	}

	useEffect(() => {
	async function fetchProvider() {
	if (!walletConnected) {
	wab3ModalRef.current = new web3Modal({
	network: 'hardhat',
	providerOptions: {},
	disableInjectedProvider: false,
	})
	await readyWallet();

	}
	}
	console.log('---> abtiene el fetchProvider');
	fetchProvider();
	}, [])

	useEffect(() => {
	if (provider) {
	async function fetchRole() {
	await readyAccount();
	}
	console.log('---> abtiene el fetchRole');
	fetchRole();
	}
	}, [provider])

	useEffect(() => {
	if (userLogged != null) {
	setShowUI(true);
	}
	}, [userLogged])

	console.log('---userLogged---->', userLogged);

	const showUserUI = () => {
	switch (userLogged) {
	case 0:
	return (<h3>Hola, eres un usuario Farmer</h3>)
	case 1:
	return (<h3>Hola, eres un usuario Baker</h3>)
	case 2:
	return (<h3>Hola, eres un usuario Customer</h3>)
	case 3:
	return (<h3>Hola, eres el owner</h3>)
	}

	}

	return (
	<div className={styles.container}>
	<Head>
	<title>Bravo Transparency</title>
	</Head>
	<div>
	{
	showUI ?
	showUserUI(userLogged)
	:
	<h3>coneting to a wallet...</h3>
	}
	</div>

	</div>
	)
	}