프로그래밍233 [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. AWS EC2 인스턴스 생성, ssh key.pem으로 서버 접속하기 AWS에 먼저 가입해야 다음 과정을 할 수 있다. ( https://aws.amazon.com/ko/ ) 1) 솔루션 구축 -> 버츄얼머신 런치하기 클릭 2) 인스턴스 시작 - 이름 생성 3) 사용할 어플리케이션 선택 (우분투) 난 우분투환경이 편해서 우분투를 선택했다. AMI는 22.04버젼을 골랐고, 프리 티어 사용 가능한걸 선택하면 된다. 4) 인스턴스 유형 고르기 시간당 요금이 나가므로 잘 보고 선택하자. ( 내가 선택한 요금은 인스턴스 하나당 750시간 무료. ) 보통은 이렇게 2개를 생성해서 필요할때마다 켜서 사용하고 사용하지 않을때는 끈다고 함다. 5) 키페어 선택 원하는 키 페어 이름을 작성하고 생성하기를 누르면 자동적으로 내 서버에 대한 키를 만들어준다 잃어버리면 재생성이나 찾기 기능을 .. 2022. 5. 16. [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 ··· 9 10 11 12 13 14 15 ··· 24 다음
