개요 (Overview)

• 이 문서는 Next.js + TypeScript 기반 dApp이 백엔드에서 생성한 XRPL 지갑을 활용해 결제 트랜잭션을 준비·서명·전송하는 과정을 End-to-end로 보여주는 데모 가이드라인입니다.
• 데모 프로그램은 서버에서 메인넷/테스트넷 선택 후 생성된 내부 지갑을 앱에 연결·해제하고, Payment 트랜잭션을 전송할 수 있는 기능을 제공합니다.
• 이 문서를 통해 코드로 생성한 XRPL 지갑을 디앱에 붙이는 방법을 파악하고, 로그인·계정확인·트랜잭션 서명 흐름까지 구현 아이디어를 얻을 수 있습니다. (샘플 코드 복사/재사용 가능)
• Quickstart는 필요 명령어와 최소 절차만 제시해 데모 프로그램을 즉시 실행 후 테스트할 수 있는 가이드입니다.
• Step-by-Step은 상세 스크린샷과 입력 예시를 제공하여 누구나 그대로 따라 할 수 있도록 설계되었습니다. 먼저 Quickstart로 동작을 확인한 뒤, 자세한 절차는 Step-by-Step을 확인하세요.

프로그램을 실행하면, 하나의 화면에서 다음 단계를 순차적으로 확인할 수 있습니다.

1. 지갑 연결
   • 웹에서 Connect Wallet 버튼을 누르면 xrpl의 wallet.generate() 함수가 호출되어 지갑이 생성된 후 연결 승인 여부를 묻는 창이 팝업됩니다. 승인 시 연결된 지갑의 정보가 출력됩니다.
2. 결제 요청 준비
   • Destination / Amount / Destination Tag(옵션) 입력 후 Submit을 누르면 트랜잭션이 준비되고, 같은 줄에 Transaction Sign 버튼이 나타납니다.
3. 트랜잭션 서명 및 제출

• Transaction Sign 버튼을 누르면 추가 입력 없이 XRPL 테스트넷으로 바로 전송되고 결과가 화면에 표시됩니다.

Quickstart

• 사전 준비

  • 해당 레포 클론: https://github.com/xrplkorea/XRPL_Wallet_Integration

  • .env 파일에 mainnet/devnet 선택해 입력 (기본값은 테스트넷이라 테스트넷에서 실행하려면 .env 파일 생성할 필요 없음)

    XRPL_NETWORK=testnet   # 또는 mainnet / devnet
    

• 실행

  1. 의존성 설치: yarn
  2. 개발 서버 실행: yarn dev
  3. 브라우저에서 http://localhost:3000 접속
  4. Connect Wallet 클릭 →  Approve wallet connection? 팝업에서 Approve 버튼 클릭
  5. Destination/Amount 입력 후 Submit → 나타난 Transaction Sign 버튼을 눌러 서명/전송