본문 바로가기

Solidity16

[220713] 스마트 컨트랙트 구현하기 - 2) 백엔드에서 요청보내기 React로 프런트 구조 짜기 트랜잭션을 일으키려면 개인키(privateKey)가 필요하다. 하지만 프런트에서 직접적으로 개인키를 사용하기엔 보안이 위험하다. 집적적으로 사용하지 않기 위해 메타마스크(월렛)를 사용해 서명 처리를 할 것이다. 따라서 화면 -> 메타마스크 -> 이더리움 네트워크 이렇게 거쳐가도록 구성을 짤 것이다. React로 메타마스크와 web3 연결하기 메타마스크와 연결해서 계정 정보를 가져오고 web3를 연결하는 코드를 작성한다. // react/src/hooks/useWeb3/jsx import React,{useEffect, useState} from 'react' import Web3 from "web3/dist/web3.min" const useWeb3 = () => { con.. 2022. 7. 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] 판매자 정보 가져오기 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] 판매 버튼 만들기 입력창에 가격을 입력하고 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.
[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.

티스토리툴바