개요 (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
•
사전 준비
◦
해당 레포 클론: 
XRPL_Wallet_Integration
XRPL_Wallet_Integration◦
.env 파일에 mainnet/devnet 선택해 입력 (기본값은 테스트넷이라 테스트넷에서 실행하려면 .env 파일 생성할 필요 없음)
XRPL_NETWORK=testnet # 또는 mainnet / devnet
Plain Text
복사
•
실행
1.
의존성 설치: yarn
2.
개발 서버 실행: yarn dev
3.
브라우저에서 http://localhost:3000 접속
4.
Connect Wallet 클릭 → Approve wallet connection? 팝업에서 Approve 버튼 클릭
5.
Destination/Amount 입력 후 Submit → 나타난 Transaction Sign 버튼을 눌러 서명/전송
Step-by-Step
1.
XRPL_Wallet_Integration을 본인의 개발환경으로 클론2.
의존성 설치
yarn
PowerShell
복사
3.
로컬 서버 실행
yarn dev
PowerShell
복사
4.
브라우저에서 http://localhost:3000 접속
5.
Web UI에 따라 Payment 트랜잭션 제출 + 서명하기
How-To Guide (이미지 첨부)
프로그램 디렉토리 구조
XRPL_Wallet_Guideline/
├─ ... # 공통 설정/환경 파일들 (생략)
├─ .env # 네트워크 선택(메인넷/테스트넷/데브넷)- 필요 시 생성
├─ app/
│ ├─ layout.tsx # 전역 레이아웃 및 메타데이터
│ ├─ page.tsx # 지갑 연결/결제 UI·모달 승인 로직
│ └─ api/
│ └─ wallet/
│ ├─ connect/
│ │ └─ route.ts # approve 여부를 바디로 받아 연결 승인 처리
│ ├─ disconnect/
│ │ └─ route.ts # approve 여부를 바디로 받아 세션 종료 처리
│ └─ payment/
│ └─ route.ts # XRPL 결제 트랜잭션 생성·전송
├─ components/
│ └─ ui/
│ ├─ button.tsx # 공용 버튼 컴포넌트
│ └─ input.tsx # 공용 입력 필드
├─ lib/
│ ├─ utils.ts # Tailwind 클래스 머지 헬퍼
│ └─ server/
│ ├─ network.ts # XRPL 네트워크 설정/엔드포인트 결정
│ └─ wallet-store.ts # 서버 측 지갑·네트워크·연결 상태 보관
├─ public/ # 로고 이미지
├─ styles/
│ └─ globals.css # 테일윈드 전역 스타일 및 컬러 변수
├─ .next/ # 빌드 결과물
└─ node_modules/ # 설치된 의존성
PowerShell
복사
해당 Demo를 본인의 프로젝트에 붙이려고 할 때:
Frontend
•
React 기반
◦
app/page.tsx의 상태 흐름(Connect / Submit / Sign)과 API 호출을 그대로 복사하고, 스타일만 프로젝트 디자인에 맞게 조정하면 됩니다.
◦
다른 XRPL 메서드가 필요하면 app/api/wallet/payment를 참고해 요청 기능과 UI 컴포넌트를 추가하세요.
•
다른 프레임워크
◦
백엔드에서는 동일하게 xrpl Client로 autofill → sign → submitAndWait를 구현하고, 프론트엔드는 해당 프레임워크 UI로 버튼만 구성하면 됩니다.
Backend
•
app/api/wallet/connect: Wallet.generate()로 만든 XRPL 지갑을 단 한 번의 팝업 버튼 클릭으로 연결 /해제합니다. 프로젝트에선 이 흐름을 복사해 운영 정책에 맞는 인증/승인 방식으로 교체하면 됩니다.
◦
ex) Wallet.generate로 생성한 여러 지갑의 시드를 로컬에 저장한 뒤
user1.address = Wallet.fromSeed()로 가져와 연결하는 방식
◦
XRPL에는 Wallet.generate() 이외의 여러 가지 지갑 Load 방식이 있습니다. 참고자료 : Wallet | xrpl
•
app/api/wallet/payment: xrpl 클라이언트 1회 생성 → client.autofill → wallet.sign → client.submitAndWait 순서로 테스트넷에 Broadcast합니다.
◦
실사용 시엔 네트워크/시퀀스/수수료 정책에 맞춰 예외 처리와 로깅을 추가하고, 필요하다면 서명 전에 서비스 자체 커스텀 검증 로직을 끼워 넣는 방식으로 사용하실 수 있습니다.
데모의 구성 요소는 실제 프로젝트에 바로 적용하기 쉽도록 모듈화되어 있습니다.
•
app/page.tsx— Connect/Disconnect/Submit/Sign 흐름을 모두 담은 메인 화면
•
app/api/wallet/connect — Wallet.generate()로 만든 지갑을 터미널 승인 후 세션으로 노출
•
app/api/wallet/payment — xrpl.js Client를 이용해 autofill → sign → submitAndWait까지 처리
•
lib/server/wallet-store.ts — 지갑·네트워크 상태와 터미널 로그 관리