Solana DeFi: Jupiter Swap UI(2023)
소개
Jupiter는 다양한 DEX와 AMM을 통합하는 애그리게이터로, 여러 거래소에서 가장 효율적인 스왑을 찾아줍니다. 다른 DEX와 AMM을 비교해 최적 가격의 스왑 경로를 찾아주므로 가장 유리한 가격에 거래할 수 있습니다. 스테이블코인으로 간단히 스왑하거나 선호하는 DeFi 게임의 토큰과 상호작용하려면 Jupiter 연동이 필수입니다.
Jupiter Swap UI: 개요
이 짧은 가이드에서 Jupiter와 프로그래밍 방식으로 상호작용하는 방법을 알아보세요. Jupiter API로 가격 견적을 가져오고 사용자 입력에 따라 SOL을 USDC로 스왑하는 dApp을 만들어 봅니다. 실시간 가격 견적 조회와 사용자가 서명하는 스왑 트랜잭션 등 유용한 기능을 구현합니다. 이 글을 따라가면서 완성된 코드가 담긴 다음 저장소를 자유롭게 참고하세요.
완성된 저장소는 다음과 같습니다: GitHub - Tidelaw/jup-ui
사전 요구 사항
다음 항목이 설치되어 있는지 확인하세요:
- Node.js
- Next.js
- Tailwind(Next.js에 포함될 수 있음)
종속성
사용자가 지갑을 연결하고 스왑 트랜잭션에 서명할 수 있도록 contexts 폴더를 올바르게 설정하려면 Connect Wallet 글을 따라 진행하는 것이 좋습니다.
프로젝트를 처음 생성하고 Connect Wallet 글을 따라 설치한 항목 외에 필요한 종속성은 @project-serum/anchor와 axios 패키지뿐입니다. 이 package.json을 그대로 복사한 다음 npm i를 실행해 모든 패키지를 한 번에 설치하는 것이 좋습니다.
Swap.tsx
먼저 입력한 SOL 수량에 따라 예상되는 USDC 수령액을 반환하는 가격 견적 기능을 구현합니다. Jupiter를 사용하면 간단합니다. 토큰의 입력 및 출력 민트 주소와 교환할 수량만 제공하면 됩니다.
사용자가 스왑하려는 SOL 수량을 저장할 상태 변수가 필요합니다. 먼저 입력 요소를 설정합니다. 아래 코드에는 DaisyUI 슬라이더와 텍스트 입력이 모두 포함되어 있지만(둘 다 <input> 태그), 하나만 사용해도 됩니다. 입력 태그에는 상태 변수를 지속적으로 업데이트할 수 있도록 value와 onChange 속성이 필요합니다.
이제 사용자가 변환할 SOL 값을 새로 입력할 때마다 Jupiter에 요청을 보내 사용자가 지정한 수량의 견적 가격을 가져오는 useEffect 훅을 만들 수 있습니다.
Quote.tsx
이제 src/api/ 폴더로 이동해 quote.tsx라는 새 파일을 만듭니다. 여기에서 Jupiter에 견적 수량을 요청합니다. 내부적으로 요청을 받으려면 POST 요청만 허용하는 handler 함수를 설정해야 합니다. 프런트엔드에서 사용자가 스왑하려는 수량이 포함된 요청을 받으면 config의 URL을 req.body.amount로 변경하고 Jupiter에 요청하면 됩니다.
다음은 반환된 페이로드의 예시입니다. 이 객체를 프런트엔드로 다시 전달한 후, 스왑을 실행할 다른 엔드포인트로 보냅니다.
data.data 속성에 접근하는 { data } 추상화에 주목하세요. 이를 사용하면 res.status(200).json(data)를 통해 data를 프런트엔드로 직접 반환할 수 있습니다.
이제 return 함수에서 견적 상태 변수를 업데이트하고, 내부 API가 위 데이터로 응답하면 해당 값을 갱신합니다. 그런 다음 USDC의 정확한 속성에 접근할 수 있습니다. 올바른 USD 금액을 표시하려면 이 값을 100만으로 나누고 소수점 둘째 자리까지 반올림해야 합니다. 네이티브 SOL이 Lamports 단위로 표시되어 10억으로 나눠야 하는 방식과 비슷합니다.
이제 이 값을 HTML에 삽입하면 프런트엔드에 표시됩니다.
Jupiter UI: 스왑 실행하기
이제 시뮬레이션된 견적 객체가 있으므로 스왑을 실행하고 API 엔드포인트에 요청을 보내는 새 함수를 만들 수 있습니다.
이제 src/api/swap 파일 경로에 이 요청을 받을 API 엔드포인트를 만들 수 있습니다. 이 예시에서는 정적으로 지정된 지갑 주소를 사용하지만, 대신 useWallet 훅을 사용해 해당 값을 엔드포인트로 전달할 수도 있습니다. 견적 객체와 함께 swap 엔드포인트에 요청하면 직렬화된 트랜잭션을 받으며, 이제 프런트엔드에서 서명하기만 하면 됩니다. 이 객체를 콘솔에 로깅해 자유롭게 테스트해 보세요.
백엔드에서 직렬화된 트랜잭션을 받으면 전송 준비를 시작할 수 있습니다. 먼저 트랜잭션 버퍼를 가져온 다음, 서명할 수 있도록 역직렬화해야 합니다. 앞서 소개한 Connect Wallet 가이드를 따랐다면 wallet.signTransaction으로 이 트랜잭션에 바로 서명할 수 있습니다. 서명 후 트랜잭션을 다시 직렬화하고 sendRawTransaction 함수를 사용해 전송합니다.
실제 jup.ag 사이트처럼 트랜잭션 서명을 표시하는 추가 기능도 구현할 수 있습니다. 현재는 브라우저 콘솔에만 기록되지만 기술 사용자라면 여전히 확인할 수 있습니다.
결론: Helius 시작하기
이 가이드에서는 Jupiter API를 사용해 가격 견적을 가져오고 사용자 입력에 따라 SOL을 USDC로 스왑하는 dApp을 만들어 보았습니다. 앞으로도 이 가이드가 유용한 참고 자료가 되길 바랍니다. 궁금한 점은 언제든 Helius Discord에서 질문하세요. 무료 Helius RPC를 사용해 연결을 설정할 수도 있습니다. 이 프로젝트를 더 확장할 아이디어는 아래에서 확인하세요. Jupiter API와 연동해 가격 견적과 스왑을 처리하는 dApp의 작동 원리를 이해했다면, 다음 단계로 Helius의 강력한 모니터링 및 분석 기능을 활용해 보세요. Jupiter는 여러 DEX와 AMM에서 최적의 스왑 경로를 찾는 애그리게이터이므로, 이를 통해 흐르는 데이터는 시장 역학을 이해하는 데 매우 풍부하고 가치가 높습니다.
다음 단계
- 견적 객체를 swap.ts 엔드포인트로 보낼 때 페이로드에 속성 추가
- 트랜잭션 서명 표시
- 다른 토큰을 포함하거나 USDC와 SOL 간 스왑 방향 전환
- 지갑이 연결되지 않았을 때 오류 및 반응형 처리
- RPC를 숨기기 위해 백엔드에서 TX를 역직렬화하고 전송할까요?
사용한 자료
Helius 구독하기
최신 Solana 개발 소식을 확인하고 새 게시물 알림을 받아보세요