Skip to main content

​
소개

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

​
최종 결과

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

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

​
설정

시작하기 전에, Claude Code용 Helius Claude Code 플러그인을 설치하십시오:
또는 Claude Code 내의 Helius 마켓플레이스에서 설치하십시오:
이 가이드에서는 모델로 Opus 4.6을 사용합니다. 필요 시 전환하세요.
이 가이드는 데모 목적으로 제공됩니다. 대형 언어 모델(LLM) 출력은 본질적으로 무작위적이기 때문에, 이 가이드의 프롬프트를 정확히 사용하더라도 결과가 다를 수 있습니다.

​
초기 프롬프트

한 번에 전체 UI와 동작을 정의하려면 이 프롬프트를 사용하세요:

Prompt

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를 사용하여 앱을 시작했습니다.
앱의 초기 버전

앱의 초기 버전

​
누락된 최근 쌍

지갑을 연결한 후, 최근 쌍 패널에 최근 거래한 일부 거래 쌍이 누락된 것을 발견했습니다. 그래서 에이전트에게 조사해달라고 요청했습니다:

Prompt

최근 스왑에도 불구하고 Bonk / SOL이 최근 쌍으로 표시되지 않습니다. 왜 그런지 확인해 줄 수 있나요?2BnyMbNYLjYorNwbPjhUBHSQBTbCTjuqouQwZiYY6auh
이 문제를 해결하려면 에이전트가 주어진 지갑의 거래 이력을 알아야 했습니다. 우리는 지갑의 주소만 제공했기 때문에, 두 개의 Helius MCP 도구를 사용하여 정보를 직접 얻기로 결정했습니다: getTransactionHistory 및 parseTransactions. 이를 통해 버그를 빠르게 식별할 수 있었습니다:
코드가 실제 토큰 전송을 분석하지 않고 events.swap에만 의존합니다.
스왑 기록 추출을 수정하여 tokenTransfers 및 nativeTransfers를 직접 사용하겠습니다.
지갑에서의 토큰 입출금을 확인하여 거래 쌍을 감지하는 방식으로 문제를 해결했습니다. 이제 모든 거래 쌍이 앱에 표시됩니다:
모든 거래 쌍 표시

모든 거래 쌍 표시

​
UI 개선

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

Prompt

토큰 선택 상자의 디자인을 개선하십시오:토큰 선택기를 오른쪽에 배치합니다.입력 필드의 너비를 유연하게 만들어 상자에 깔끔하게 맞추십시오.
에이전트는 즉시 이러한 UI 변경을 구현했습니다:
토큰 선택 상자의 새로운 레이아웃

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

​
견적 표시

현재 스왑 UI의 토큰 양은 수동으로 설정해야 합니다. 즉, 사용자가 반환받을 토큰 수를 보지 못합니다. 최근 DFlow 견적으로 토큰 양 필드를 자동으로 채우는 것이 유용할 것입니다.

Prompt

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

입금 필드에 출력량을 보여주는 견적 미리보기

​
스왑 정보 추가

스왑이 완료되면 사용자가 체인에서 검증할 수 없습니다. 이를 UI에 추가해 보겠습니다:

Prompt

스왑이 성공하면 전체 거래 서명을 출력해 주세요. 또한 탐색기로 연결해 주세요.
테스트를 위해 샘플 스왑을 수행합니다:
스왑 서명 중 지갑 확인 팝업

스왑 서명 중 지갑 확인 팝업

이제 정보가 UI에 표시됩니다:
완전한 서명과 탐색기 링크가 포함된 성공한 스왑 출력

완전한 서명과 탐색기 링크가 포함된 성공한 스왑 출력