Merge pull request #23 from SWF2023-HongikIngan:feature/smart-contrac…

…t-func-impl

map , detail, true coin done

packages/nextjs/components/Map.tsx

@@ -1,7 +1,11 @@
-import { useEffect, useRef } from "react";
+import { use, useEffect, useRef } from "react";
 import styled from "@emotion/styled";
 import mapboxgl from "mapbox-gl";
 import type { NextPage } from "next";
+import { useScaffoldContractRead, useScaffoldContractWrite } from "~~/hooks/scaffold-eth";
+import { useContractRead } from "wagmi";
+
+console.log(useScaffoldContractRead)
 
 mapboxgl.accessToken = process.env.NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN;
 
@@ -11,6 +15,24 @@ const Map: NextPage = () => {
   // const [lng, setLng] = useState(127);
   // const [lat, setLat] = useState(37.57);
   // const [zoom, setZoom] = useState(11);
+
+  const { data: totalReports } = useScaffoldContractRead({
+    contractName: "ERC721Token",
+    functionName: "getActiveNFT",
+    args: [],
+  });
+
+  console.log(totalReports)
+
+
+  // const { data, isError, isLoading } = useContractRead({
+  //   address: '0xecb504d39723b0be0e3a9aa33d646642d1051ee1',
+  //   abi: wagmigotchiABI,
+  //   functionName: 'getHunger',
+  // })
+
+  // console.log(data)
+
   const description = `
     <img class="info_image" src="/hole.png"/>
     <div class="info_box">
@@ -21,13 +43,18 @@ const Map: NextPage = () => {
 
   useEffect(() => {
     if (map.current) return; // initialize map only once
+
+
+    // console.log(data)
     map.current = new mapboxgl.Map({
       container: mapContainer.current,
       style: "mapbox://styles/mapbox/streets-v12",
       center: [127, 37.57],
       zoom: 11,
     });
 
+
+
     map.current.on("load", () => {
       map.current.addSource("information", {
         type: "geojson",

packages/nextjs/components/Writer.tsx

@@ -0,0 +1,42 @@
+import styled from "@emotion/styled";
+import { Button } from "@mui/material";
+import { useAccount } from "wagmi";
+import { useScaffoldContractWrite } from "~~/hooks/scaffold-eth";
+
+const FactButton = styled.div`
+  width: 126px;
+  height: 36px;
+  border-radius: 30px;
+  background: #000;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+`;
+
+// export default function Writer({ cid }) {
+export default function Writer({ contractName, functionName, args, text }) {
+  //   const { address, isConnecting, isDisconnected } = useAccount();
+  const { writeAsync, isLoading, isMining } = useScaffoldContractWrite({
+    contractName: contractName,
+    functionName: functionName,
+    args: [...args],
+    // For payable functions, expressed in ETH
+    value: "0",
+    // The number of block confirmations to wait for before considering transaction to be confirmed (default : 1).
+    blockConfirmations: 1,
+    // The callback function to execute when the transaction is confirmed.
+    onBlockConfirmation: txnReceipt => {
+      console.log("Transaction blockHash", txnReceipt.blockHash);
+    },
+  });
+
+  async function Write() {
+    await writeAsync();
+  }
+
+  return <FactButton onClick={Write}>{text}</FactButton>;
+}

packages/nextjs/pages/report/[id].tsx

@@ -2,6 +2,8 @@ import { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
+import Writer from "~~/components/Writer";
+import { useScaffoldContractRead } from "~~/hooks/scaffold-eth";
 
 const DetailPage = () => {
   const {
@@ -17,6 +19,28 @@ const DetailPage = () => {
     image: "/hole.png",
   });
 
+  const { data: report } = useScaffoldContractRead({
+    contractName: "ERC721Token",
+    functionName: "getActiveNFT",
+    args: [],
+  });
+
+  const { data: accountAddress6551 } = useScaffoldContractRead({
+    contractName: "ERC721Token",
+    functionName: "getAccountAddress",
+    args: [id, 0],
+  });
+  console.log("accountAddress6551");
+  console.log(accountAddress6551);
+
+  const { data: trueCoin } = useScaffoldContractRead({
+    contractName: "ERC20Token",
+    functionName: "balanceOf",
+    args: [accountAddress6551],
+  });
+  console.log("trueCoin");
+  console.log(trueCoin);
+
   const formatTimestamp = (timestamp: number): string => {
     const date = new Date(timestamp);
 
@@ -61,9 +85,10 @@ const DetailPage = () => {
       </DetailBox>
       <FactBox>
         <FactStatus>
-          <FactCount>10</FactCount>명이 사실이라 응답했어요.
+          <FactCount>{Number(trueCoin)}</FactCount>명이 사실이라 응답했어요.
         </FactStatus>
-        <FactButton>사실이에요!</FactButton>
+        {/* <FactButton></FactButton> */}
+        <Writer contractName={"ERC20Token"} functionName={"mint"} args={[accountAddress6551]} text={"사실이에요!"} />
       </FactBox>
 
       <BadgeWrapper>

packages/nextjs/pages/report/index.tsx

@@ -1,13 +1,16 @@
-import { CSSProperties, useEffect, useState } from "react";
+import { CSSProperties, useEffect, useRef, useState } from "react";
 import Image from "next/image";
 import { Box, Button, Container, FormControl, InputLabel, MenuItem, Select, TextField, css } from "@mui/material";
 import { styled } from "@mui/system";
 import type { NextPage } from "next";
 import { useDropzone } from "react-dropzone";
 import { useAccount } from "wagmi";
+import Writer from "~~/components/Writer";
 import { useScaffoldContractWrite } from "~~/hooks/scaffold-eth";
 import { ipfsUploadImage, ipfsUploadMetadata } from "~~/utils/ipfsUpload";
 
+let ipfsCid = "bad";
+
 const ExampleUI: NextPage = () => {
   return (
     <>
@@ -36,20 +39,21 @@ function CreateNFTWhenContractExist() {
   const [cid, setCid] = useState("");
 
   const { address, isConnecting, isDisconnected } = useAccount();
-
-  const { writeAsync, isLoading, isMining } = useScaffoldContractWrite({
-    contractName: "ERC721Token",
-    functionName: "mintNFT",
-    args: [address, cid, 0],
-    // For payable functions, expressed in ETH
-    value: "0",
-    // The number of block confirmations to wait for before considering transaction to be confirmed (default : 1).
-    blockConfirmations: 1,
-    // The callback function to execute when the transaction is confirmed.
-    onBlockConfirmation: txnReceipt => {
-      console.log("Transaction blockHash", txnReceipt.blockHash);
-    },
-  });
+  // const cidRef = useRef("");
+
+  // const { writeAsync, isLoading, isMining } = useScaffoldContractWrite({
+  //   contractName: "ERC721Token",
+  //   functionName: "mintNFT",
+  //   args: [address, cidRef.current, 0],
+  //   // For payable functions, expressed in ETH
+  //   value: "0",
+  //   // The number of block confirmations to wait for before considering transaction to be confirmed (default : 1).
+  //   blockConfirmations: 1,
+  //   // The callback function to execute when the transaction is confirmed.
+  //   onBlockConfirmation: txnReceipt => {
+  //     console.log("Transaction blockHash", txnReceipt.blockHash);
+  //   },
+  // });
 
   // const { data: signer, isError, isLoading } = useSigner();
   const { getRootProps, getInputProps, isFocused, isDragAccept, isDragReject } = useDropzone({
@@ -126,10 +130,11 @@ function CreateNFTWhenContractExist() {
     console.log("NFT IPFS upload is completed, NFT is stored at : ", tokenURL);
 
     setCid(tokenURL);
+    // cidRef.current = tokenURL;
+    // ipfsCid = tokenURL;
+    // const result = await writeAsync();
 
-    const result = await writeAsync();
-
-    console.log(result);
+    // console.log(result);
   }
 
   useEffect(() => {
@@ -250,6 +255,7 @@ function CreateNFTWhenContractExist() {
         >
           제보하기
         </Button>
+        <Writer contractName={"ERC721Token"} functionName={"mintNFT"} args={[address, cid, 0]} />
       </form>
       {/* <Button variant='contained' onClick={getTokenId}>getID</Button> */}
     </StyledBox>