[TIL] 2023-07-06 DAY72

---

Project

GIT 주소
https://github.com/dowoo303/SOLIDITY
https://github.com/dowoo303/hardhat

---

오늘 배운것들

1. NFT 세일페이지(react-ts) 마무리
2. DB-prisma

각종 팁

1. 메타마스크로 받아오는 지갑주소는 소문자인 반면, SDK로 받아오는 지갑주소는 대문자이다.

회고

---

💻 Solidity 코딩

✅ NFT Sale 페이지 만들기

프론트엔드 개발자면 리덕스를 자주 사용 => 비슷한 함수로는 useContext가 있고 이를 이용하여 하위 컴포넌트에서 내려받은 변수를 사용한다 => 모든 컴포넌트에서 사용하고 싶은 변수가 있을 때 최상위에서 export const AppContext = createContext<any>(null);를 사용하여 <AppContext.Provider value={{ account, setAccount }}>프로바이더를 통해 내려준다.

SaleNftCard에서 NFTCard뿌리기 및 가격 표시, 내 NFT 표시

🟥 코드

import { FC, useContext, useEffect, useState } from "react";
import NftCard from "./NftCard";
import { mintNftContract, saleNftContract, web3 } from "@/lib/web3.config";
import { AppContext } from "@/app/layout";

interface SaleNftCardProps {
  tokenId: number;
  getSaleNfts: () => Promise<void>;
}

const SaleNftCard: FC<SaleNftCardProps> = ({ tokenId, getSaleNfts }) => {
  const [salePrice, setSalePrice] = useState<number>(0);
  const [isMyNft, setIsMyNft] = useState<boolean>(false);

  const { account } = useContext(AppContext);

  const getIsMyNft = async () => {
    try {
      const response: string = await mintNftContract.methods
        .ownerOf(tokenId)
        .call();

      setIsMyNft(response.toLowerCase() === account);
    } catch (error) {
      console.error(error);
    }
  };

  const getSalePrice = async () => {
    try {
      const response = await saleNftContract.methods
        .getNftPrice(tokenId)
        .call();

      setSalePrice(Number(web3.utils.fromWei(response, "ether")));
    } catch (error) {
      console.error(error);
    }
  };

  const onClickPurchase = async () => {
    try {
      const response = await saleNftContract.methods
        .purchaseNft(tokenId)
        .send({ from: account, value: web3.utils.toWei(salePrice, "ether") });

      if (Number(response.status) === 1) {
        getSaleNfts();
      }
    } catch (error) {
      console.error(error);
    }
  };

  useEffect(() => {
    getSalePrice();
  }, []);

  useEffect(() => {
    getIsMyNft();
  }, [account]);

  return (
    <div>
      <div>{salePrice}Matic</div>
      {isMyNft ? (
        <div>(My NFT)</div>
      ) : (
        account && (
          <div>
            <button onClick={onClickPurchase}>구매하기</button>
          </div>
        )
      )}
      <NftCard tokenId={tokenId} />
    </div>
  );
};

export default SaleNftCard;

---

✅ my-dapp(DB-prisma)

설명서
https://nextjs.org/docs/app/building-your-application/routing/router-handlers

npx create-next-app@latest my-dapp
npm run dev

프리즈마(ORM)
npm i -D prisma: 프리즈마 개발자모드로 설치
npm i @prisma/client: DB 조회 기능
npx prisma init: prisma 폴더 생성 및 .env 생성
-> schema.prisma에 db에 넣을 정보들 planetScale 형태에 맞게 입력
-> .env에 DATABASE_URL수정

planetScale

https://planetscale.com/
pscale auth login
pscale connect web3 : 로컬이랑 클라우드 연결(터널링)
npx prisma db push
npx prisma studio

---

🟥 더미데이터 코드

import { NextPage } from "next";
import Dummy from "@/dummyData.json";

const Home: NextPage = () => {
  return (
    <div>
      {Dummy.map((v, i) => {
        return (
          <div key={i}>
            {v.name}
            {v.age}
          </div>
        );
      })}
    </div>
  );
};

export default Home;

---