{"size": 2236, "ext": "js", "max_stars_repo_path": "example/src/App.js", "max_stars_repo_name": "AndreyBubnov/use-metamask", "max_stars_repo_stars_event_min_datetime": "2020-12-28T21:09:48.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-23T07:48:10.000Z", "max_issues_repo_path": "example/src/App.js", "max_issues_repo_name": "AndreyBubnov/use-metamask", "max_issues_repo_issues_event_min_datetime": "2021-01-01T16:59:34.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-26T20:59:23.000Z", "max_forks_repo_path": "example/src/App.js", "max_forks_repo_name": "AndreyBubnov/use-metamask", "max_forks_repo_forks_event_min_datetime": "2021-01-24T23:15:26.000Z", "max_forks_repo_forks_event_max_datetime": "2022-03-08T06:31:03.000Z"}
{"max_stars_count": 116, "max_issues_count": 21, "max_forks_count": 29, "avg_line_length": 30.2162162162, "max_line_length": 98, "alphanum_fraction": 0.5165474061}
import { useEffect, useState } from "react";
import { useMetamask }         from "use-metamask";
import { ethers }              from "ethers";
import Web3                    from "web3";

import Info                    from "./Info";
import logo                    from "./assets/logo.svg";
import styles                  from "./App.module.css";

function App() {
  const { connect, metaState }              = useMetamask();
  const [ web3interface, setWeb3Interface ] = useState("ethers");

  useEffect(() => {
    if (metaState.isAvailable && !metaState.isConnected) {
      (async () => {
        try {
          if (web3interface === "ethers")
            await connect(ethers.providers.Web3Provider, "any");
          else if (web3interface === "web3")
            await connect(Web3);
          else 
            throw Error(`Unknown web3 interface: ${web3interface}`);
        } catch (error) {
          console.log(error);
        }
      })();
    }
  }, [metaState.isAvailable, web3interface]);

  const handleWeb3Selector = (event) => setWeb3Interface(event.target.value);

  return (
    <div className={styles.App}>
      <h3>
        <code>
          const {"{"}
          <span className={styles.codeObject}>{"connect, metaState"}</span>
          {"}"} = <span className={styles.codeFunction}>useMetamask();</span>
        </code>
      </h3>
      <div className={styles.logo}>
        <img src={logo} alt="useMetamask" />
      </div>
      {
        metaState.isAvailable
        ? <Info state={metaState} web3Handler={handleWeb3Selector}/>
        : <div>
          <p>You don't have Metamask installed</p>
          <p>But wait, what is Metamask?</p>
          <p>
            <code>
              <a href="https://metamask.io/">https://metamask.io</a>
            </code>
          </p>
        </div>
      }
      
      <div className={styles.footer}>
        I am developed by{" "}
        <code>
        <a href="https://github.com/mdtanrikulu">mdt.</a>
        </code>{" "}
        &nbsp;&nbsp;|&nbsp;&nbsp; Here is my{" "}
        <code>
          <a href="https://github.com/mdtanrikulu/use-metamask/tree/main/example">source code.</a>
        </code>
      </div>
    </div>
  );
}

export default App;
