본문 바로가기

nft14

[220808-0925] NFT마켓 프로젝트 목적 영상이나 음원의 저작권을 거래하는 사이트. 영상이나 음원의 조회수에 따라 사이트는 해당 영상이나 음원 소유자에게 수익금을 분배해준다. 영상과 음원은 각각 토큰으로 만들어져 거래가 된다. 08.08 ~ 08.22 / 담당한 파트를 위한 공부기간 나는 이 중에서 경매사이트를 담당하게 되었다. 리액트는 대충 알아도 솔리디티는 기초만 알고있는 상태. 크립토좀비를 풀어서 기초를 다시 다지고, 다른 사람들의 nft마켓 코드들을 구글링해봐야겠다. 08.12 역시 기초와 실전코딩은 다르다. 크립토좀비만 떼면 될 줄 알았는데 실제로 코딩을 잡아보니 어디부터 손을 대야할지 막막하다. 마침 감사하게도 다른 팀의 nft마켓을 구현한 팀프로젝트 코드를 얻을 수 있어서 우선 그걸 뜯어봐야겠다. 08.20 경매사이트 코드를 .. 2022. 9. 14.
[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] 판매페이지 작성하기 구현하려는 기능 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] 판매 버튼 만들기 입력창에 가격을 입력하고 Sell 버튼을 누르면 가격이 등록되게 만들기 MyAnimalCard.tsx import { Box, Button, Input, InputGroup, InputRightAddon, Text, } from "@chakra-ui/react"; import React, { ChangeEvent, FC, useState } from "react"; import { saleAnimalTokenContract, web3 } from "../web3Config"; import AnimalCard from "./AnimalCard"; export interface IMyAnimalCard { animalTokenId: string; animalType: string; animalPrice: s.. 2022. 5. 18.
[220518] 민팅했었던 주소로 접속하기 내가 자꾸 까먹어서 작성하는 글 리믹스를 껐다가 다시 켜면 다시 처음부터 진행해야하는데, 민팅을 진행했던 예전 작업으로 돌아가고 싶을때는 예전 주소를 찾아와 진행하면 된다. // 개별적으로 적어놓은 주소 const mintAnimalTokenAddress = "민팅했던 주소"; export const saleAnimalTokenAddress = "판매등록했던 주소"; CONTRACT > MintAnimalToken / SaleAnimalToken 해당하는 목록 선택 At Address에 해당하는 주소를 입력하고, At Address를 클릭하면 개체가 생성된다. 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.

티스토리툴바