프로그래밍/solidity40 [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. 메타마스크를 뭄바이 테스트 서버와 연결하기 / 테스트 코인 받기 메타마스크에 접속 후, 보기/숨기기 클릭 테스트 네트워크 켜기 네트워크로 돌아가 네트워크 추가 클릭 https://faucet.polygon.technology/ 뭄바이 테스트 네트워크 사이트에 들어가면 각각에 해당하는 정보가 있다. 보면서 입력 nft 등록을 지원하는 폴리곤 MATIC토큰 사이트 https://faucet.polygon.technology/ 한국어로 번역하면 수도꼭진데.. 그냥 지원 사이트라고 하겠음. nft 등록할때 발생하는 소량의 MATIC을 지원해준다. 자신의 지갑 주소를 복사한 후, Wallet Address에 등록하면 지원코인을 줌. 현재 스무번째 시도중인데 연결이 안됨. 뭐지.. 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. [220516] nft 구매기능 만들기 SaleAnimalToken.sol // SPDX-License-Identifier: MIT -> 라이센스 pragma solidity ^0.8.0; // 컴파일러 명시 import "MintAnimalToken.sol"; contract SaleAnimalToken { MintAnimalToken public mintAnimalTokenAddress; constructor (address _mintAnimalTokenAddress) { mintAnimalTokenAddress = MintAnimalToken(_mintAnimalTokenAddress); } mapping(uint256 => uint256) public animalTokenPrices; uint256[] public onSaleAnima.. 2022. 5. 16. [220516] nft 판매등록하기 / 오픈제플린, 솔리디티 SaleAnimalToken.sol // SPDX-License-Identifier: MIT -> 라이센스 pragma solidity ^0.8.0; // 컴파일러 명시 import "MintAnimalToken.sol"; contract SaleAnimalToken { // mintAnimal을 디플로이하면 나오는 주소값을 저장함 MintAnimalToken public mintAnimalTokenAddress; constructor (address _mintAnimalTokenAddress) { mintAnimalTokenAddress = MintAnimalToken(_mintAnimalTokenAddress); } // 가격을 관리하는 매핑 mapping(uint256 => uint256) publ.. 2022. 5. 16. [220516] 민팅에 type을 랜덤으로 생성하기 MintAnimalToken.js // SPDX-License-Identifier: MIT pragma solidity ^0.8.0; import "@openzeppelin/contracts/token/ERC721/extensions/ERC721Enumerable.sol"; contract MintAnimalToken is ERC721Enumerable { constructor() ERC721("h662Animals", "HAS") {} mapping(uint256 => uint256) public animalTypes; // 앞에있는 uint256 = animalTokenId // 뒤에있는 uint256 = animalTypes // 즉, animalTokenId를 입력하면 animalTypes이 나오.. 2022. 5. 16. [220516] Remix와 연결해서 민팅하는 방법 / 오픈제플린, 솔리디티 민팅하는법 솔리디티(Solidity) : 이더리움 등 블록체인 플랫폼에서 스마트 계약 작성과 구현에 사용되는 계약 지향 프로그래밍 언어 차크라(Chakra) : Microsoft가 자체적으로 사용하고 있던 JavaScript 엔진. 오픈제플린(oz) : 솔리디티 기반의 스마트 컨트렉트를 개발하는 표준 프레임워크. truffle과 유사하지만, truffle 보다 기능이 다양함. // 제플린 설치 $ npm i @openzeppelin/contracts // remix 라이브러리 설치 $ npm install -g @remix-project/remixd // remix 실행 $ remixd -s . --remix-ide https://remix.ethereum.org // remix 삭제 $ npm unin.. 2022. 5. 16. 이전 1 2 3 4 다음
