ERC20 토큰 스테이킹 서비스

프로젝트 설명

MetaMask 연동 및 Avalanche C-Chain(EVM) 기반 ERC20 토큰 스테이킹 서비스

담당 및 구현

• ▸MetaMask 지갑 연동 로그인 및 토큰 입금 로직 구현
• ▸스마트 컨트랙트 호출 및 트랜잭션 상태 관리 구현
• ▸Avalanche EVM 기반 스테이킹 서비스의 프론트엔드 구현

MetaMask 지갑 연결 및 서비스 인증 흐름 개선

• ▸문제
  • MetaMask 계정만 연결된 상태에서도 스테이킹 기능이 활성화되어, 인증 토큰이나 사용자 정보가 없는 경우 보호 API 요청이 401로 실패했습니다.
  • 모바일 일반 브라우저에서는 데스크톱의 확장 프로그램과 같은 방식으로 MetaMask 연결을 이어갈 수 없었습니다.
• ▸판단
  • 지갑 연결과 서비스 인증은 별개의 상태이며, 데스크톱과 모바일은 MetaMask에 접근하는 방식도 달랐습니다. 따라서 인증 상태를 명확히 분리하고 실행 환경에 따라 지갑 연결 흐름을 다르게 구성해야 했습니다.
• ▸해결
  • useMetamask 훅과 Zustand로 지갑 연결·nonce 서명 인증·트랜잭션 상태를 관리했습니다. 금액 검증 → parseUnits 변환 → transfer 요청·tx hash 저장 → tx.wait() 컨펌 → 잔액·서버 기록·캐시 갱신 순으로 처리하고, 네트워크 오류와 서명 거부를 구분해 안내했습니다.
  • 모바일에서는 딥링크를 통해 서비스 페이지를 MetaMask 앱 내 브라우저로 전환해 지갑 연결을 이어갈 수 있도록 구현했습니다.
• ▸결과
  • 불완전한 인증 상태에서 보호 기능에 접근하는 문제를 방지하고, 데스크톱과 모바일 환경에 맞는 MetaMask 연결·인증 흐름을 구성했습니다.

관련 링크