web3 Crowdfunding2

thirdweb을 통해서 디플로이된 컨트랙트 주소를 가지고 프론트에 연결 시켜보겠습니다.

컨트랙트 주소는 thirdWeb에서 얼마든지 확인할수 있으며 심지어 이더스캔에서도 verified 된 형태로 볼수 있기 때문에 매우 편리합니다.

npm install @thirdweb-dev/react @thirdweb-dev/sdk ethers@^5

thirdweb 공식문서 참조
web3 연결을 위해 설치해야할 라이브러리들이다.

<ThirdwebProvider activeChain={Sepolia}>

영상이랑 다른 버전의 라이브러리라 그런지 desiredchain을 사용하던데 지금 공식문서에서는 activeChain을 사용한다.

sdk를 사용하기 위해서는 앱을 ThirdwebProvider로 wrap해야 한다.

리액트에서 context를 사용해서 내가 디플로이한 컨트랙트 주소에 대한 정보 및 지갑주소를 담아서 여러 컴포넌트에서 사용해보겠습니다.

import { useAddress, useContract, useMetamask, useContractWrite } from '@thirdweb-dev/react';

1. useAddress 연결되어있는 지갑주소 불러오기
2. useContract 내가 배포한 컨트랙트 주소에 대한 정보 불러오기
3. useMetamask 메타마스크 호출
4. useContractWrite

  const { contract } = useContract('내가 배포한 컨트랙트주소');

콘솔에 찍힌 contract 는 밑 사진

abi에 총 6개의 함수가 들어있는 걸 볼 수 있다.
확실한지 thirdweb 에서도 살펴보면

contract가 잘 불려오는 것 같다.

ThirdwebProvider 가 제대로 작동하지 않으면 useContract에서 컨트랙트 정보를 불러오지 못하는 이슈가 있었다.

const campaigns = await contract.call('getCampaigns');

contract 주소를 제대로 불러오면 call 함수를 호출해서 해당 컨트랙트의 함수를 호출해서 사용할수 있다.

프론트에서 contract에서 가져온 함수들을 이용해서 캠페인을 만들고 조회해보았다.

useContractWrite

const { mutateAsync: createCampaign2 } = useContractWrite(contract, 'createCampaign');

contract는 주로 useContract를 통해서 가져온 객체.
createCampaign: 호출할 계약 함수의 이름.

netlify 배포

정적 웹사이트를 호스팅하는데 특화된 서비스이다. (html, css, javascript)
vite 폴더 빌드시 dist 라는 폴더가 생성되고 빌드 내용은 dist에 담긴다.
netlify는 dist 폴더만 전달해주면 누구든지 접속할 수 있는 url을 준다.

vite build 중 이러한 에러가 나왔다. 결론은 모듈을 external로 rollup에서 처리해줘야 한다는 뜻이다
https://gauztech.com/blog/test

https://64c33c58e3215d26d2a02394--astounding-hummingbird-937563.netlify.app/