feat(week-04): complete week-04 assignment

[sweatbuckets]

과제 제출 정보

주차: Week <04>

과제 유형:

• 이론 (Theory Quiz)
• 개발 (Dev Assignment)

---

구현 내용

• wagmi를 활용하여 지갑 연동 Web3 프론트엔드 개발
• useReadContract, useWriteContract 훅을 활용하여 이더리움 노드와 통신하고 컨트랙트 제어
• usePublicClient, useWatchContractEvent 훅을 이용한 컨트랙트 이벤트 추적 구현
• 선택 과제의 토큰 잔액 표시 컴포넌트 개발에서 wagmi로 연동한 체인(sepolia)과 관계없이 메인넷의 ERC20 정보를 고정으로 추적하도록 wagmi의 usePublicClient가 아닌 viem의 createPublicClient를 사용
• dev/README.md에 따른 동작 스크린샷

---

배운 점 (What I Learned)

이번 주에 배운 것 (2-3가지)

1. wagmi의 여러 훅(useAccount, useBalance)을 활용하여 Web3 계정 연동 기능을 손쉽게 구현할 수 있다.
2. 컨트랙트의 함수 인터페이스를 ABI로 정의한 후 useReadContract, useWriteContract 훅을 통해 컨트랙트와 상호작용할 수 있다.
3. usePublicClient 훅을 통해 viem Public Client를 가져온 후 getBlockNumber, getLogs, watchContractEvent 등의 메서드를 호출하여 Sepolia RPC provider로부터 데이터를 조회하고 이벤트 리스너를 구현할 수 있다.

어려웠던 점과 해결 방법

어려웠던 점:
트랜잭션 히스토리 표시 기능을 위해 컨트랙트의 이벤트를 실시간으로 조회하는 코드 구현이 어려웠다.

해결 방법:
codex를 활용하여 구현

컨트랙트의 이벤트 시그니처를 ABI에 정의한 후, usePublicClient를 통해 가져온 viem Public Client의 watchContractEvent 메서드를 사용하여 해당 이벤트를 구독했다. RPC로부터 수신한 로그 데이터는 정의한 ABI를 기반으로 자동 디코딩되며 이 데이터를 활용하여 트랜잭션 히스토리를 상태로 관리하고 화면에 반영하였다.

질문 사항

• 없습니다.

---

체크리스트

테스트

• forge build 성공
• forge test 모든 테스트 통과

제출 규칙

• 브랜치명이 {username}/week-{XX} 형식
• .env 파일이 커밋에 포함되지 않음
• 커밋 메시지가 규칙을 따름

---