개요 (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
•
사전 준비
◦
해당 레포 클론: 
XRPL_Wallet_Integration_Girin
XRPL_Wallet_Integration_Girin◦
◦
프로젝트 루트에 .env 생성 후 아래처럼 설정
NEXT_PUBLIC_PROJECT_ID=YOUR_PROJECT_ID
Plain Text
복사
•
실행
1.
의존성 설치: yarn
2.
개발 서버 실행: yarn dev
3.
브라우저에서 http://localhost:3000 접속
4.
화면의 QR 모달을 Girin Wallet으로 스캔 → 승인
5.
네트워크(XRPL Testnet/Mainnet) 선택 후 Payment 요청 실행
Step-by-Step
XRPL_Wallet_Integration_Girin 을 본인의 개발환경으로 클론1.
Reown에서 Project ID를 발급받아 환경변수에 입력
지갑 연동에 필요한 Project ID를 발급받는 방법
2.
의존성 설치
yarn
PowerShell
복사
4.
로컬 서버 실행
yarn dev
PowerShell
복사
5.
브라우저에서 http://localhost:3000 접속
6.
Web UI에 따라 Girin Wallet 연결하기
How-To Guide (이미지 첨부)
프로그램 디렉토리 구조
girin-walletconnect-example/
├─ ... # 설정 파일들(생략)
├─ .env # 환경 변수(Project ID 입력)
├─ app/
│ ├─ favicon.ico
│ ├─ layout.tsx # 공통 레이아웃 컴포넌트
│ └─ page.tsx # 메인 페이지
├─ components/
│ ├─ connect.tsx # 지갑 연결 UI
│ ├─ disconnect.tsx # 지갑 연결 해제 UI
│ ├─ send.tsx # 전송 폼 컴포넌트
│ └─ ui/
│ ├─ button.tsx # 공용 버튼 컴포넌트
│ └─ input.tsx # 공용 입력 필드
├─ docs/ # 이미지
├─ lib/
│ ├─ network.ts # 네트워크 관련 유틸
│ └─ utils.ts # 공용 함수 모음
├─ public/
│ └─ logo.svg # 로고 이미지
├─ styles/
│ ├─ globals.css # 전역 스타일
│ └─ fonts/
│ └─ poppins.ts # 웹폰트 로더
├─ .next/ # 빌드 결과물
└─ node_modules/ # 설치된 의존성
PowerShell
복사
해당 Demo를 본인의 프로젝트에 붙이려고 할 때:
•
React 기반
◦
components/connect.tsx, components/disconnect.tsx,components/send.tsx, WalletConnectModalSign, 그리고 useSession 흐름을 그대로 복사해 사용하면 됩니다.
◦
결제 외 다른 메서드를 추가하려면 components/send.tsx와 동일한 패턴으로 useRequest 훅에 원하는 메서드/파라미터를 전달하는 컴포넌트를 추가하세요.
•
다른 프레임워크
◦
WalletConnect SDK의 해당 프레임워크 버전(예: Vue/Svelte/Vanilla용)을 이용해 QR 모달과 세션 로직을 구현하면 동일한 구조로 요청을 만들 수 있습니다.
◦
xrpl_signTransaction 요청 형식만 동일하게 유지하면 됩니다.
데모의 구성 요소는 실제 프로젝트에 바로 적용하기 쉽도록 모듈화되어 있습니다.
•
components/connect.tsx — QR 모달을 띄워 지갑과 세션을 맺습니다.
•
components/disconnect.tsx — 현재 세션을 안전하게 종료합니다.
•
components/send.tsx — 입력한 계정/금액/목적지를 기준으로 xrpl_signTransaction (Payment) 요청을 보내고 결과를 표시합니다.
•
lib/network.ts — 체인 ID 
라벨 매핑을 중앙에서 관리해 UI/요청 간 일관성을 보장합니다.
라벨 매핑을 중앙에서 관리해 UI/요청 간 일관성을 보장합니다.◦
XRPL Mainnet → xrpl:0
◦
XRPL Testnet → xrpl:1