Add fix for duplicate mintToken function on index.js

app/.gitignore

@@ -22,3 +22,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.vercel

app/package.json

@@ -10,6 +10,7 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "lodash": "^4.17.21",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
@@ -38,5 +39,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "prettier": "2.5.1"
   }
 }

app/src/App.js

@@ -1,19 +1,77 @@
-import React from 'react';
-import './App.css';
-import twitterLogo from './assets/twitter-logo.svg';
+import React, { useEffect, useState } from "react";
+import "./App.css";
+import twitterLogo from "./assets/twitter-logo.svg";
+import _ from "lodash";
+import CandyMachine from "./CandyMachine";
 
 // Constants
-const TWITTER_HANDLE = '_buildspace';
+const TWITTER_HANDLE = "_buildspace";
 const TWITTER_LINK = `https://twitter.com/${TWITTER_HANDLE}`;
 
 const App = () => {
+  const [walletAddress, setWalletAddress] = useState(null);
+
+  const checkWalletConnection = async () => {
+    try {
+      const { solana } = window;
+      if (solana) {
+        if (solana.isPhantom) {
+          console.log("Phantom wallet found!");
+
+          const response = await solana.connect({ onlyIfTrusted: true });
+          console.log(
+            `Connected with public key: ${response.publicKey.toString()}`
+          );
+
+          setWalletAddress(response.publicKey.toString());
+        }
+      } else {
+        console.log("Solana is not on your browser, get a Phantom Wallet! 👻");
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  const connectWallet = async () => {
+    const { solana } = window;
+
+    if (solana) {
+      const response = await solana.connect();
+      console.log(
+        `Connected with public key: ${response.publicKey.toString()}`
+      );
+      setWalletAddress(response.publicKey.toString());
+    }
+  };
+
+  const renderConnectButton = () => (
+    <button
+      className="cta-button connect-wallet-button"
+      onClick={connectWallet}
+    >
+      Connect wallet
+    </button>
+  );
+
+  useEffect(() => {
+    const onLoad = async () => {
+      await checkWalletConnection();
+    };
+
+    window.addEventListener("load", onLoad);
+    return () => window.removeEventListener("load", onLoad);
+  }, []);
+
   return (
     <div className="App">
       <div className="container">
         <div className="header-container">
           <p className="header">🍭 Candy Drop</p>
           <p className="sub-text">NFT drop machine with fair mint</p>
+          {_.isNull(walletAddress) && renderConnectButton()}
         </div>
+        {walletAddress && <CandyMachine walletAddress={window.solana} />}
         <div className="footer-container">
           <img alt="Twitter Logo" className="twitter-logo" src={twitterLogo} />
           <a

app/src/CandyMachine/CandyMachine.css

@@ -1,6 +1,7 @@
 .machine-container {
   display: flex;
   flex-direction: column;
+  align-items: center;
 }
 
 .gif-container {