개요 (Overview)

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

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

1. 지갑 연결 (WalletConnect QR 모달)
2. 네트워크 선택 (XRPL Mainnet / Testnet)
3. 결제(Payment) 요청 및 결과 확인

Quickstart

• 사전 준비

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

  • cloud.reown.com에서 WalletConnect Project ID 발급

  • 프로젝트 루트에 .env 생성 후 아래처럼 설정

    NEXT_PUBLIC_PROJECT_ID=YOUR_PROJECT_ID
    

• 실행

  1. 의존성 설치: yarn
  2. 개발 서버 실행: yarn dev
  3. 브라우저에서 http://localhost:3000 접속
  4. 화면의 QR 모달을 Girin Wallet으로 스캔 → 승인
  5. 네트워크(XRPL Testnet/Mainnet) 선택 후 Payment 요청 실행