Search

커스텀 훅 구현

문제 상황

배경지식 설명

[Web3의 지갑 연결 = Web2의 로그인]
Web3에서 지갑을 연결하는 행위는 Web2에서 로그인하는 것과 거의 같다고 보시면 됩니다. 마치, 구글이나 카카오로 로그인하여 Web2 서비스를 이용하는 것처럼 블록체인 플랫폼에서는 지갑을 연결함으로써 Web3 서비스를 이용하게 됩니다.
[Keplr Wallet = Cosmos 블록체인의 대표 지갑]
현재, 여러 블록체인 플랫폼이 있습니다. 가장 유명한 이더리움부터 솔라나, 코스모스, 앱토스 등이 있죠.
Supernova 프로젝트는 Cosmos 블록체인의 앱체인 중 하나이므로 Cosmos 계열의 대표적인 지갑인 Keplr Wallet(케플러 지갑)을 사용했습니다.
[클라이언트 역할]
클라이언트가 있어야 트랜잭션을 쏘거나 쿼리를 날릴 수 있습니다.
Supernova에서 모든 기능은 트랜잭션과 쿼리로 이루어져 있기에 클라이언트는 거의 모든 페이지에서 필요한 객체입니다.
트랜잭션과 쿼리에 필요한 클라이언트 생성하고 저장하기 (Feat. useChains)

문제 상황

Swap 기능을 위한 블록체인 트랜잭션 로직을 구현이 필요했습니다.

해결 과정

블록체인 트랜잭션을 발생시키는 로직을 최대한 추상화하여 각 페이지에서 일관되게 사용하도록 커스텀 훅으로 구현할 필요가 있었습니다.

어떻게 구현할까?

우선, 블록체인에 트랜잭션이 발생되는 원리부터 정리했습니다.
트랜잭션이 발생되기 위해서는 크게 이를 쏘는 객체인 client와 protobuf 타입의 message가 필요합니다.
[지갑 연결 시, 생성된 client 활용]
client는 사용자가 지갑을 연결할 때, 생성되어 Recoil의 atom에 전역 상태로 저장됩니다. Recoil의 useRecoilValue를 사용해서 wasmClient를 불러옵니다.
블록체인 트랜잭션 발생시키는 로직 구현하기 (Feat. useSwap)
(썸네일)

문제 상황

배경지식 설명

문제 개요

해결 과정

어떻게 구현할까?

해결 결과

아쉬웠던 점

스마트 컨트랙트에 쿼리 날리자 (Feat. useLiquidity)
useInput 코드 활용
•
무슨 문제? (어떤 불편함?)
•
지금은 어떻게 개선?
입력창 상태 관리를 하나로 통일하기 (Feat. useInput)