제플린10 [220518] 구매기능 만들기 SaleAnimalCard.tsx import { Box, Button, Text } from "@chakra-ui/react"; import React, { FC, useEffect, useState } from "react"; import { mintAnimalTokenContract, saleAnimalTokenContract, web3, } from "../web3Config"; import AnimalCard from "./AnimalCard"; interface SaleAnimalCardProps { animalType: string; animalPrice: string; animalTokenId: string; account: string; getOnSaleAnimalTokens: () =>.. 2022. 5. 18. [220518] 판매자 정보 가져오기 SaleAnimalCard.tsx import { Box, Button, Text } from "@chakra-ui/react"; import React, { FC, useEffect, useState } from "react"; import { mintAnimalTokenContract, web3 } from "../web3Config"; import AnimalCard from "./AnimalCard"; interface SaleAnimalCardProps { animalType: string; animalPrice: string; animalTokenId: string; // 계정을 확인하기 위해 필요한 정보 account: string; // 계정을 확인하기 위해 필요한 정보 } const Sa.. 2022. 5. 18. [220518] 구매 버튼 만들기 components/SaleAnimalCard.tsx 생성 현재 판매중인 이미지와 텍스트를 가져오는 코드 import { Box, Button, Text } from "@chakra-ui/react"; import React, { FC } from "react"; import { web3 } from "../web3Config"; import AnimalCard from "./AnimalCard"; interface SaleAnimalCardProps { animalType: string; animalPrice: string; } const SaleAnimalCard: FC = ({ animalType, animalPrice, }) => { return ( {web3.utils.fromWei(animal.. 2022. 5. 18. [220518] 민팅했었던 주소로 접속하기 내가 자꾸 까먹어서 작성하는 글 리믹스를 껐다가 다시 켜면 다시 처음부터 진행해야하는데, 민팅을 진행했던 예전 작업으로 돌아가고 싶을때는 예전 주소를 찾아와 진행하면 된다. // 개별적으로 적어놓은 주소 const mintAnimalTokenAddress = "민팅했던 주소"; export const saleAnimalTokenAddress = "판매등록했던 주소"; CONTRACT > MintAnimalToken / SaleAnimalToken 해당하는 목록 선택 At Address에 해당하는 주소를 입력하고, At Address를 클릭하면 개체가 생성된다. 2022. 5. 18. [220517] 민팅한 이미지를 모아보는 마이페이지 만들기 민팅한 이미지를 모아보는 마이페이지 만들기 my-animal.tsx import { Grid } from "@chakra-ui/react"; import React, { FC, useEffect, useState } from "react"; import AnimalCard from "../components/AnimalCard"; import { mintAnimalTokenContract } from "../web3Config"; // props에서 account를 내려줬으니까 interface MyAnimalProps { account: string; } // 내려준 account 받기 const MyAnimal: FC = ({account}) => { // 동물 리스트를 담을 state 생성 // 동.. 2022. 5. 17. [220517] 마이페이지 헤더 만들기 그 전에 다음 두가지 버튼이 있는 헤더를 만들어보자 1) 메인으로 가는 버튼 2) 마이페이지로 가는 버튼 헤더를 이루는 레이아웃 만들기 Layout.tsx import React, {FC} from "react"; import { Stack, Flex, Box, Text, Button } from "@chakra-ui/react"; import { Link } from "react-router-dom"; const Layout: FC = ({children}) => { return( h662-Animals // 홈으로 가는 버튼 Main // 마이페이지로 가능 버튼 My Animal {children} ); }; export default Layout; 마이페이지를 클릭했을때 나오는 화면 my-anima.. 2022. 5. 17. [220517] 민팅한 결과에 맞는 이미지를 가져오기 1. 내가 민팅해서 갖고있는 nft개수 확인하기 nft를 총 1개 갖고있다. 2. 방금 민팅한 tokenId 확인하기 나는 nft를 1개 갖고있으므로 index 상 0번에 해당한다. index[0]에 해당하는 nft의 tokenId는 1이다. 3. tokenId가 갖고있는 값 확인하기 동물을 1~5번으로 나누어놓은 animalTypes에서 3번째 동물이 나온것을 알 수 있다. 민팅한 결과와 맞는 이미지를 가져오는 코드 Main.tsx //typescript 사용하려면 FC import React,{FC, useState} from 'react' import { Box, Text, Flex, Button } from "@chakra-ui/react"; import { mintAnimalTokenContra.. 2022. 5. 17. [220517] 메타마스크에서 민팅하는 버튼 만들기 main.tsx //typescript 사용하려면 FC import React,{FC, useState} from 'react' import { Box, Text, Flex, Button } from "@chakra-ui/react"; import { mintAnimalTokenContract } from "../web3Config"; // typescrips는 이렇게 props를 모두 정해주어야함 interface MainProps { account: string; } const Main: FC = ({account}) => { const [newAnimalCard, setnewAnimalCard] = useState(); const onClickMint = async () => { try { if (.. 2022. 5. 17. [220517] 리액트와 메타마스크 연결하기 web3, web3-utils 설치 $ npm i web web3-utils web3 import 하기 CONTRACT에서 saleAnimalToken, mintAnimalToken을 선택해서 각각 ABI를 복사해 아래 코드에 붙여넣는다. import {AbiItem } from 'web3-utils'; // 인터페이스가 정의된 파일 const mintAnmimalTokenAbi: AbiItem[] = 복사한 Abi 붙여넣기; const saleAnmimalTokenAbi: AbiItem[] = 복사한 Abi 붙여넣기; web3로 로그인 ENVIRONMENT를 Injected Web3로 연결하면, 메타마스크로 자동 연결이 되면서 연결상태로 바뀐다. 리액트에게 ethereum 오브젝트를 인식시키는 코드 r.. 2022. 5. 17. [220517] frontend 설치 / chakra-ui boilerplate web3 실행을 보조해주는 boilerplate를 git으로 다운받아 npm install로 설치 https://github.com/h662/web3-boilerplate git clone https://github.com/h662/web3-boilerplate.git chakra-ui 설치 https://chakra-ui.com/guides/getting-started/cra-guide chakra-ui 공식 홈페이지에 들어가면 다음과 같은 화면이 보인다. 나는 리액트를 사용하므로 리액트를 선택하고, npm을 사용하므로 npm 코드를 복사함. // 설치 코드 $ npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 frame.. 2022. 5. 17. 이전 1 다음
