From 45a139d17b0233d9db1d07d44af9c8b90fa4cb7a Mon Sep 17 00:00:00 2001
From: jake <bozi.chinese@gmail.com>
Date: Wed, 1 Dec 2021 10:16:01 +0800
Subject: [PATCH] completed the Frontend

---
 fronend/nft-visualizer/src/App.js     | 63 ++++++++++-----------------
 fronend/nft-visualizer/src/helpers.js | 22 ++++++++++
 2 files changed, 44 insertions(+), 41 deletions(-)
 create mode 100644 fronend/nft-visualizer/src/helpers.js

diff --git a/fronend/nft-visualizer/src/App.js b/fronend/nft-visualizer/src/App.js
index 8e3d4dc..72603ff 100644
--- a/fronend/nft-visualizer/src/App.js
+++ b/fronend/nft-visualizer/src/App.js
@@ -2,57 +2,38 @@ import React from "react";
 import styled from "styled-components";
 import { NFTCard, NftPhoto } from "./components/NFTCard";
 import { NFTModal } from "./components/NFTModal";
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { ethers } from 'ethers';
+import { connect } from "./helpers";
 
 const axios = require('axios');
 
 function App() {
+  
+  let initialNfts = [
+    { name: "Mario", symbol: "SMWC", copies: 10, image: "https://via.placeholder.com/150" },
+    { name: "Luigi", symbol: "SMWC", copies: 10, image: "https://via.placeholder.com/150" },
+    { name: "Yoshi", symbol: "SMWC", copies: 10, image: "https://via.placeholder.com/150" },
+    { name: "Donkey Kong", symbol: "SMWC", copies: 10, image: "https://via.placeholder.com/150" },
+    { name: "Mario", symbol: "SMWC", copies: 10, image: "https://via.placeholder.com/150" },
+    { name: "Luigi", symbol: "SMWC", copies: 10, image: "https://via.placeholder.com/150" },
+    { name: "Yoshi", symbol: "SMWC", copies: 10, image: "https://via.placeholder.com/150" },
+    { name: "Donkey Kong", symbol: "SMWC", copies: 10, image: "https://via.placeholder.com/150" },
+  ];
 
   const [showModal, setShowModal] = useState(false);
   const [selectedNft, setSelectedNft] = useState();
   const [nfts, setNfts] = useState(initialNfts);
-  // let nft = { name: "Mario", symbol: "SMWC", copies: 10, image: "https://nftimage.com/XXX/" };
 
 
-  let initialNfts = [
-    {
-      name: "Mario",
-      symbol: "SMWC",
-      copies: 10,
-      image: "https://nftimage.com/XXX/",
-    },
-    {
-      name: "Luigi",
-      symbol: "SMWC",
-      copies: 10,
-      image: "https://nftimage.com/XXX/",
-    },
-    {
-      name: "Yoshi",
-      symbol: "SMWC",
-      copies: 10,
-      image: "https://nftimage.com/XXX/",
-    },
-    {
-      name: "Donkey Kong",
-      symbol: "SMWC",
-      copies: 10,
-      image: "https://nftimage.com/XXX/",
-    },
-    {
-      name: "Yoshi",
-      symbol: "SMWC",
-      copies: 10,
-      image: "https://nftimage.com/XXX/",
-    },
-    {
-      name: "Donkey Kong",
-      symbol: "SMWC",
-      copies: 10,
-      image: "https://nftimage.com/XXX/",
-    },
-  ];
+  useEffect( () => {
+     ( async () => {
+        const address = await connect();
+        if (address) {
+          getNfts(address)
+        }
+      })()
+    }, []);
 
   const toggleModal = (i) => {
     if(i >= 0) {
@@ -72,7 +53,7 @@ function App() {
     
     let abi = [
       "function symbol() public view returns(string memory)",
-      "function tokenCount() public view returns(uiint256)",
+      "function tokenCount() public view returns(uint256)",
       "function uri(uint256 _tokenId) public view returns(string memory)",
       "function balanceOfBatch(address[], accounts, uint256[] ids) public view returns(uint256 array)"
     ];
diff --git a/fronend/nft-visualizer/src/helpers.js b/fronend/nft-visualizer/src/helpers.js
new file mode 100644
index 0000000..3b3a78e
--- /dev/null
+++ b/fronend/nft-visualizer/src/helpers.js
@@ -0,0 +1,22 @@
+export async function connect() {
+    try {
+        const accounts = await window.ethereum.request( { method: 'eth_requestAccounts' } );
+        const account = handleAccountsChanged(accounts);
+        return account;
+    } catch (error) {
+        if (error.code === 4001) {
+            alert("Please connect to Metamask to continue.");
+        } else {
+            console.error(error);
+        }
+    }
+}
+
+export function handleAccountsChanged(accounts) {
+    if (accounts.length === 0) {
+        console.log("Please connect to Metamask.");
+    } else {
+        window.ethereum.on("accountsChanged", () => { window.location.reload() });
+        return accounts[0];
+    }
+}
\ No newline at end of file