[TIL] 2023-07-11 DAY75

---

Project

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

---

오늘 배운것들

1. front+back+MMSDK

각종 팁

회고

---

💻 Solidity 코딩

✅ frontend+backend+MMSDK

prisma/schema.prisma에서 코드를 바꾼 후 명령어를 통해서 database를 업데이트 해줘야한다.
npx prisma db push

route.ts에서 get요청 구성
page.tsx에서 요청

프론트엔드로 스마트 컨트랙트 배포하기

MINT_NFT_ABI와 MINT_NFT_BYTECODE를 이용하여 배포(lib)
page.tsx에서 코드 구성

🟥 코드

"use client";

import axios from "axios";
import { NextPage } from "next";
import { FormEventHandler, useState } from "react";
import { v4 as uuidv4 } from "uuid";
import { ethereum, personal, web3 } from "./lib/client";
import MINT_NFT_ABI from "./lib/MINT_NFT_ABI.json";
import MINT_NFT_BYTECODE from "./lib/MINT_NFT_BYTECODE";

const Home: NextPage = () => {
  const [email, setEmail] = useState<string>("");
  const [name, setName] = useState<string>("");
  const [symbol, setSymbol] = useState<string>("");
  const [account, setAccount] = useState<string>("");

  const onSubmitMetamask: FormEventHandler = async (e) => {
    try {
      e.preventDefault();

      if (!email) return;

      const accounts: any = await ethereum?.request({
        method: "eth_requestAccounts",
      });

      if (accounts) {
        setAccount(accounts[0]);

        const signedToken = await personal.sign(
          `Welcome!\n\n\n${uuidv4()}`,
          accounts[0],
          "Pass"
        );

        await axios.post(`${process.env.NEXT_PUBLIC_URL}/api/user`, {
          account: accounts[0],
          email,
          signedToken,
        });

        localStorage.setItem("signedToken", signedToken);
      }
    } catch (error) {
      console.error(error);
    }
  };

  const onSubmitDeploy: FormEventHandler = async (e) => {
    try {
      e.preventDefault();

      if (!account || !name || !symbol) return;

      const signedToken = localStorage.getItem("signedToken");

      const userCheckRes = await axios.get(
        `${process.env.NEXT_PUBLIC_URL}/api/user?signed-token=${signedToken}`
      );

      if (userCheckRes.data.ok) {
        const contract = new web3.eth.Contract(MINT_NFT_ABI);

        const deployRes = await contract
          .deploy({
            data: MINT_NFT_BYTECODE,
            arguments: [
              name,
              symbol,
              "https://olbm.mypinata.cloud/ipfs/QmU52T5t4bXtoUqQYStgx39DdXy3gLQq7KDuF1F9g3E9Qy",
              1000,
            ],
          })
          .send({ from: account });
        console.log(deployRes);
      }
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <div className="bg-red-100 min-h-screen p-24">
      <div>
        <form onSubmit={onSubmitMetamask}>
          <input
            type="text"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          />
          <input
            className="ml-2 px-2 py-1 border-2 border-black rounded-md"
            type="submit"
            value="메타마스크로그인"
          />
        </form>
        <form className="mt-2" onSubmit={onSubmitDeploy}>
          <input
            type="text"
            value={name}
            onChange={(e) => setName(e.target.value)}
          />
          <input
            className="ml-2"
            type="text"
            value={symbol}
            onChange={(e) => setSymbol(e.target.value)}
          />
          <input
            className="ml-2 px-2 py-1 border-2 border-black rounded-md"
            type="submit"
            value="스마트 컨트랙트배포"
          />
        </form>
      </div>
    </div>
  );
};

export default Home;

---