이더리움24 [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] 판매페이지 작성하기 구현하려는 기능 onSaleAnimalTokenArray 인덱스 값을 넣었을때 몇번째인지(=tokenId) 값을 알려줌 getAnimalTokenPrice tokenId를 입력하면 가격을 알려줌 (Wei 기준) animalTypes 인덱스 값을 넣었을때 뽑은 카드가 몇번인지 알려줌. animalTokenPrices 뽑은 카드 번호를 입력하면 얼마인지 알려줌. (중복값이 나오는 경우는 어떻게 나오지) 코드 구현 sale-animal.tsx import React, { FC, useEffect, useState } from "react"; import { Grid } from "@chakra-ui/react"; import { IMyAnimalCard } from "../components/MyAnimal.. 2022. 5. 18. [220518] 최적화를 위한 리팩토링하기 MintAnimalToken.tsx // SPDX-License-Identifier: MIT pragma solidity ^0.8.0; import "@openzeppelin/contracts/token/ERC721/extensions/ERC721Enumerable.sol"; import "SaleAnimalToken.sol"; // MintAnimalToken이 SaleAnimalToken보다 먼저 생성되므로 // 자동적으로 가져올 수 없으니 임의로 import 해주기 contract MintAnimalToken is ERC721Enumerable { constructor() ERC721("h662Animals", "HAS") {} SaleAnimalToken public saleAnimalToken;.. 2022. 5. 18. [220518] 민팅했었던 주소로 접속하기 내가 자꾸 까먹어서 작성하는 글 리믹스를 껐다가 다시 켜면 다시 처음부터 진행해야하는데, 민팅을 진행했던 예전 작업으로 돌아가고 싶을때는 예전 주소를 찾아와 진행하면 된다. // 개별적으로 적어놓은 주소 const mintAnimalTokenAddress = "민팅했던 주소"; export const saleAnimalTokenAddress = "판매등록했던 주소"; CONTRACT > MintAnimalToken / SaleAnimalToken 해당하는 목록 선택 At Address에 해당하는 주소를 입력하고, At Address를 클릭하면 개체가 생성된다. 2022. 5. 18. [220518] 가격 등록 하기 my-animal.tsx {animalCardArray && animalCardArray.map((v, i) => { return ; // return 이후를 수정한다. })} components/MyAnimalCard.tsx 생성 import { Box, Button, Input, InputGroup, InputRightAddon, Text, } from "@chakra-ui/react"; import React, { FC } from "react"; import { web3 } from "../web3Config"; import AnimalCard from "./AnimalCard"; // 구조를 만들때 타입스크립트에서 쓰이는 interface export interface IMyAnimalCard .. 2022. 5. 18. [220517] 판매 등록 하기 1. setApprovedForAll에서 판매등록하기 setApprovedForAll 코드로 구현하기 // 판매등록하는 setApprovesForAll 기능 구현 const onClickApproveToggle = async () => { try { if (!account) return; // 계정이 없으면 return const response = await mintAnimalTokenContract.methods .setApprovalForAll(saleAnimalTokenAddress, !saleStatus) .send({ from: account }); // 주의! call이 아니고 transact 기능 구현!! if (response.status) { // 값이 변했다는 신호 setSaleSta.. 2022. 5. 17. [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. 이전 1 2 3 다음
