Skip to main content

​
소개

이 가이드는 Solana에서 토큰 스왑 UI를 구축하기 위한 AI 지원 개발 흐름을 안내합니다. 주요 기능은 사용자가 가장 자주 거래하는 페어를 보여주고 한 번의 클릭으로 선택할 수 있는 패널입니다. 이를 통해 개인화된 경험을 제공합니다. 각 섹션에서는 사용된 정확한 프롬프트, 모델이 생성한 출력, 그리고 우리가 Helius AI 툴킷을 어떻게 사용했는지를 보여줍니다. 이 가이드는 다음 기술을 보여줍니다:

​
최종 결과

최근 페어 패널이 있는 개인화된 스왑 UI

최근 페어 패널이 있는 개인화된 스왑 UI

​
설정

시작하기 전에 Helius Claude Code 플러그인을 설치하세요. Claude Code 내부에서 다음을 두 개의 별도 명령어로 실행하세요:
이 가이드에서는 Opus 4.6 모델을 사용할 것입니다. 필요시 전환하세요.
이 가이드는 데모용입니다. 대규모 언어 모델 (LLM) 출력은 본질적으로 무작위이므로, 이 가이드와 동일한 프롬프트를 사용하더라도 결과는 다를 수 있습니다.

​
초기 프롬프트

다음 프롬프트로 전체 UI와 동작을 한 번에 정의하세요:

프롬프트

Solana를 위한 개인화된 토큰 스왑 인터페이스를 구축하세요.가운데 상자에 두 개의 토큰 선택기와 스왑 버튼이 있는 일반 스타일의 토큰 스왑 UI를 추가하세요.오른쪽에는 사용자가 직접 선택할 수 있는 토큰 페어 리스트를 표시하세요. 각 토큰의 로고와 이름을 함께 표시하세요.리스트를 계산하려면 다음을 수행합니다: 사용자가 지갑을 연결한 후, 그들의 스왑 기록을 보고 최근에 사용된 10개의 거래 페어를 추출하세요. 스왑 빈도로 정렬합니다.
이 프롬프트는 다음을 설정합니다:
  • 핵심 레이아웃 (스왑 박스 + 최근 페어 레일)
  • 개인화 규칙 (지갑 기록)
  • 랭킹 전략 (최근 사용 빈도)
우리의 경우, 모델이 다음을 제안했습니다:
프로젝트를 설계하겠습니다. Vite + React + TypeScript 앱을 Phantom 지갑 연결, Helius Sender를 통한 DFlow 스왑, Helius Wallet API에서 가져온 스왑 기록과 함께 생성할 것입니다.
이것은 합리적인 스택입니다:
  • 현대적이고 타입 안전한 UI를 위한 Vite + React + TypeScript
  • 지갑 연결 및 서명을 위한 Phantom
  • 최고의 견적을 위한 DFlow
  • 지갑 기록을 위한 Helius API
  • 거래 전송을 위한 Helius Sender
모델은 Helius API 키와 함께 .env 파일을 추가하라고 지시했습니다. 그렇게 한 후, 우리는 npm run dev로 앱을 시작했습니다.
앱의 초기 버전

앱의 초기 버전

​
누락된 최근 페어

우리의 지갑을 연결한 후, 최근 페어 패널이 우리가 최근에 스왑한 일부 거래 페어를 놓치고 있음을 관찰했습니다. 그래서 에이전트에게 조사해 달라고 요청했습니다:

프롬프트

최근에 스왑이 있었지만 최근 페어로 Bonk / SOL이 표시되지 않습니다. 왜 그런지 확인해 주시겠습니까?2BnyMbNYLjYorNwbPjhUBHSQBTbCTjuqouQwZiYY6auh
이 문제를 해결하기 위해 에이전트는 주어진 지갑의 거래 내역을 알아야 했습니다. 우리는 지갑 주소만 제공했기 때문에, 그것은 직접 Helius MCP 도구 두 개를 사용하여 해당 정보를 얻기로 결정했습니다: getTransactionHistory 및 parseTransactions. 이는 버그를 빠르게 식별할 수 있게 했습니다:
코드는 실제 토큰 전송을 분석하는 대신 events.swap에만 의존하고 있습니다.
스왑 기록 추출을 tokenTransfers 및 nativeTransfers를 직접 사용하도록 수정하겠습니다.
그래서 우리는 거래 페어를 감지하는 방법을 변경하여 문제를 해결했습니다: 이제 우리는 단순히 지갑에서 입출력된 토큰을 어떤 거래에서 확인합니다. 이제 우리는 앱에서 모든 거래 페어를 볼 수 있습니다:
모든 거래 페어 표시

모든 거래 페어 표시

​
UI 정제

앱의 전반적인 디자인은 이미 좋지만, 스왑 UI의 레이아웃은 여전히 일부 정제가 필요합니다:

프롬프트

토큰 선택 상자의 디자인을 수정하세요:토큰 선택기를 오른쪽에 배치하세요.상자에 깔끔하게 맞도록 수량 입력 필드의 너비를 유연하게 만드세요.
에이전트는 신속하게 이러한 UI 변경을 구현했습니다:
토큰 선택 상자의 새로운 레이아웃

토큰 선택 상자의 새로운 레이아웃

​
견적 표시

현재 스왑 UI에서 토큰 양은 수동으로 설정해야 합니다. 이는 사용자가 반환받을 토큰 수량을 볼 수 없음을 의미합니다. 최근 DFlow 견적에 의해 토큰 금액 필드를 자동으로 채우는 것이 유용할 것입니다.

프롬프트

사용자가 하나의 토큰에 대한 수량을 입력하면 견적을 얻고 다른 토큰에 대한 출력 양을 표시하세요.
이를 구현하기 위해, 에이전트는 DFlow 스킬을 사용하여 견적을 가져오는 올바른 엔드포인트를 찾았습니다. 스왑 UI는 이제 동적으로 견적 출력 양을 가져와서 표시합니다:
수신 필드에 출력량을 표시하는 견적 미리 보기

수신 필드에 출력량을 표시하는 견적 미리 보기

​
스왑 정보 추가

스왑 완료 후, 사용자는 체인에서 이를 확인할 방법이 없습니다. UI에 이를 추가해 봅시다:

프롬프트

스왑이 성공하면 전체 거래 서명을 출력하세요. 그리고 탐색기로 링크하세요.
테스트를 위해, 샘플 스왑을 진행합니다:
스왑 서명 중 지갑 확인 팝업

스왑 서명 중 지갑 확인 팝업

이제 UI에 정보가 표시됩니다:
전체 서명과 탐색기 링크가 있는 성공적인 스왑 출력

전체 서명과 탐색기 링크가 있는 성공적인 스왑 출력