feat(week-05): RainbowKit 지갑 연결 및 ETH 전송

[AvoChang]

구현 내용

• RainbowKit ConnectButton으로 지갑 연결 UI 구현
• useSendTransaction + useWaitForTransactionReceipt으로 ETH 전송 구현
• 트랜잭션 상태 표시 (서명 대기 / 블록 확인 중 / 전송 완료)
• Sepolia 테스트넷 설정

배운 점

• RainbowKit이 wagmi 위에서 지갑 연결 UI만 담당하는 구조 이해
• getDefaultConfig로 WalletConnect + wagmi 통합 설정 방법

어려웠던 점

• RainbowKit Provider 중첩 순서 설정
• parseEther 입력값 검증 처리

[ahwlsqja]

개발 과제
Vite + React로 ETH Transfer dApp 구현했어요.

App.jsx에서 SendEth 컴포넌트가 잘 구성되어 있어요:

• isAddress로 주소 유효성 검증 + 금액 0 이하 체크 + validationError 상태 관리
• useSendTransaction + useWaitForTransactionReceipt로 전송 처리
• txStatus 함수로 상태별 메시지를 한 곳에서 관리하는 건 깔끔한 접근이에요
• sendError에서 shortMessage를 먼저 시도하고 없으면 message로 fallback하는 것도 좋아요
• isSuccess일 때 "다시 전송" 버튼으로 reset() 호출하는 UX도 좋아요
• Etherscan 링크도 있고요

main.jsx에서 Provider 순서(WagmiProvider > QueryClientProvider > RainbowKitProvider) 정확하고, getDefaultConfig로 설정한 것도 맞아요.

한 가지, wagmi.js에 WalletConnect Project ID가 하드코딩되어 있어요. 이건 .env에 넣고 환경변수로 관리하는 게 좋아요.

RainbowKit Provider 중첩 순서 설정이 어려웠다
parseEther 입력값 검증 처리

Provider 순서 중요하죠. 잘 맞추셨어요.

퀴즈
W5 퀴즈가 안 보여요. 퀴즈도 같이 제출해주세요!

제출 형식

• PR body가 깔끔하게 잘 작성되어 있어요