feat(week-04): Uniswap V3 프론트엔드 구현 및 퀴즈 풀이

[summersurf0452]

wagmi + RainbowKit 기반 dApp 구현 (지갑 연결, 토큰 잔액 조회,
풀 생성, 유동성 추가, 스왑) 및 week-04 퀴즈 답안 작성

과제 제출 정보

주차: Week 04

과제 유형:

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

---

구현 내용

• Sepolia 테스트넷에서 wagmi와 RainbowKit를 활용해 Uniswap V3 연동 프론트엔드를 구현하였습니다
• 지갑 연결, 토큰 잔액 조회, 풀 생성/유동성 추가/스왑 기능을 구현하였습니다
• BayToken, StarToken 배포 후 컨트랙트 ABI 연동 및 트랜잭션 상태 UI 표시를 구현하였습니다.

스크린샷

지갑 연결

연결 전	연결 후

풀 생성

MetaMask 서명	생성 완료

유동성 추가 (3단계 flow)

1단계: BAY 허가	2단계: STAR 허가

Token A approve 서명	2단계 진행

3단계: 유동성 공급

스왑

approve + 서명
스왑 완료
---

---

배운 점 (What I Learned)

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

1. wagmi hooks로 블록체인과 통신하는 방법

   • useAccount로 지갑 연결 상태를 감지하고, useBalance로 ETH 잔액을 조회하였습니다
   • useReadContract로 온체인 데이터인 토큰 잔액을 읽고, useWriteContract로 트랜잭션을 보내는
     읽기,쓰기 패턴을 배웠습니다

2. ERC20 토큰의 approve-execute 패턴

   • 컨트랙트가 내 토큰을 대신 사용하려면 먼저 approve로 허가를 줘야 한다는 것을 알게되었습니다
   • 유동성 추가 시 BAY approve → STAR approve → mint 호출까지
     3단계를 순서대로 처리해야 해서, step state와 useWaitForTransactionReceipt를
     조합해 각 트랜잭션 완료를 감지하고 다음 단계로 넘어가도록 구현해야한다는 흐름을 배웠습니다.

3. 컨트랙트 ABI의 역할

   • ABI가 프론트엔드와 스마트 컨트랙트 사이의 통역사 역할을 한다는 것을 알게되었습니다.
     함수 이름, 파라미터 타입, 리턴 타입을 ABI에서 읽어서 wagmi가 자동으로 트랜잭션 데이터를 인코딩해준다는 걸 새로 배웠습니다

어려웠던 점과 해결 방법

어려웠던 점:

Uniswap V3에서 token0 < token1 정렬 규칙과 Next.js의 서버/클라이언트 컴포넌트 구분이 어려웠습니다.
처음에는 토큰 순서가 왜 중요한지 잘 이해가 안돼서 잘 모르는 상태로 풀 생성을 구현했던 것 같습니다

해결 방법:
LiquidityProvider의 토큰 자동 정렬 로직을 보고, 토큰 쌍의 순서까지 포함함으로써 중복 풀 방지용 약속을 만들어 풀을 유일하게 식별한다는 것을 이해했습니다.
그리고 wagmi hooks는 브라우저 지갑을 써야 해서 서버 컴포넌트에서는 동작하지 않는다는 점을 알게 되었습니다. 메타마스크나 팬텀같은 브라우저 지갑 기능을 쓰려면 use client를 써야한다는 것을 새로 배웠습니다

질문 사항

-없습니다 감사합니다!!

---

체크리스트

테스트

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

제출 규칙

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

---