# Table of Contents - [Welcome to Joey Wallet! | Joey Wallet](#welcome-to-joey-wallet-joey-wallet) - [Getting Started | Joey Wallet](#getting-started-joey-wallet) - [Add to Existing Project | Joey Wallet](#add-to-existing-project-joey-wallet) - [Actions | Joey Wallet](#actions-joey-wallet) - [XRP Ledger | Joey Wallet](#xrp-ledger-joey-wallet) - [Disconnect | Joey Wallet](#disconnect-joey-wallet) - [Connect | Joey Wallet](#connect-joey-wallet) - [Methods | Joey Wallet](#methods-joey-wallet) - [Configuration | Joey Wallet](#configuration-joey-wallet) - [Generate | Joey Wallet](#generate-joey-wallet) - [Supported Networks | Joey Wallet](#supported-networks-joey-wallet) - [Events | Joey Wallet](#events-joey-wallet) - [xrpl_signTransaction | Joey Wallet](#xrpl-signtransaction-joey-wallet) - [xrpl_signTransactionFor | Joey Wallet](#xrpl-signtransactionfor-joey-wallet) - [Call-to-Action | Joey Wallet](#call-to-action-joey-wallet) - [Signer-Tool | Joey Wallet](#signer-tool-joey-wallet) - [Install | Joey Wallet](#install-joey-wallet) - [Chains | Joey Wallet](#chains-joey-wallet) - [Reconnect | Joey Wallet](#reconnect-joey-wallet) - [xrpl_signTransactionBulk | Joey Wallet](#xrpl-signtransactionbulk-joey-wallet) - [Quick Start | Joey Wallet](#quick-start-joey-wallet) --- # Welcome to Joey Wallet! | Joey Wallet Joey Wallet is the ultimate self-custodial mobile wallet for the XRP Ledger (XRPL), designed for seamless, secure, and lightning-fast interactions with the blockchain. With support for WalletConnect, Joey Wallet empowers users to manage their XRP and other XRPL tokens, interact with dApps, and take full control of their crypto assets—all from the palm of their hand. ### [hashtag](https://docs.joeywallet.xyz/#why-joey-wallet) Why Joey Wallet? * Self-Custodial Security: You hold your private keys, ensuring full control over your assets with no third-party interference. Joey Wallet uses industry-standard encryption to keep your funds safe. * Lightning-Fast Transactions: Leverage the XRP Ledger’s 3-5 second transaction settlement for instant transfers, swaps, and dApp interactions. * WalletConnect Integration: Seamlessly connect to XRPL-based dApps with QR code scanning, enabling secure and intuitive interactions. * Sleek & Intuitive UI: A clean, user-friendly interface makes managing your portfolio, viewing seed phrases, and transacting effortless. * Privacy First: No tracking, no nonsense—your data stays yours. * Multi-Platform: Available on iOS and Android for managing your assets on the go. > "Joey Wallet isn't just another wallet—it's the future of self-custody on XRPL. Cleanest UI I've ever seen!" —@Cobb\_XRPL ### [hashtag](https://docs.joeywallet.xyz/#get-started-with-joey-wallet) Get Started with Joey Wallet #### [hashtag](https://docs.joeywallet.xyz/#for-users) For Users 1. Download Joey Wallet: Available on [iOSarrow-up-right](https://t.co/OffywzJ1ey) and [Androidarrow-up-right](https://t.co/lRPUfho6nt) . 2. Create or Import a Wallet: Set up a new wallet in ~5-10 seconds or import an existing one using your seed phrase. Unlike other wallets, Joey Wallet lets you view your seed phrase anytime for added convenience. 3. Fund Your Wallet: Transfer XRP or other XRPL tokens from an exchange like Coinbase or another wallet (e.g., Xaman). Follow this [tutorialarrow-up-right](https://t.co/7EvlkGWBgs) for step-by-step guidance. 4. Explore the XRPL: Send, receive, swap, or connect to dApps using WalletConnect. circle-info Note: The XRP Ledger requires a 1 XRP reserve to activate a new account. This ensures your account is verified and ready to transact. #### [hashtag](https://docs.joeywallet.xyz/#for-developers) For Developers Joey Wallet’s open-source API and WalletConnect integration make it easy to connect your dApp to the XRP Ledger. See the Developer Documentation section below for details. [NextGetting Startedchevron-right](https://docs.joeywallet.xyz/overview/getting-started) Last updated 7 months ago * [Why Joey Wallet?](https://docs.joeywallet.xyz/#why-joey-wallet) * [Get Started with Joey Wallet](https://docs.joeywallet.xyz/#get-started-with-joey-wallet) sun-brightdesktopmoon sun-brightdesktopmoon --- # Getting Started | Joey Wallet Joey Wallet’s documentation is designed to help developers integrate the wallet into their dApps quickly and efficiently. Below is a rundown of the key sections in the Joey Wallet Developer Documentation, inspired by resources like [XRPL.orgarrow-up-right](http://xrpl.org/) and Ledger’s Developer Portal. #### [hashtag](https://docs.joeywallet.xyz/overview/getting-started#id-1.-introduction-to-joey-wallet) 1\. Introduction to Joey Wallet * Overview: Learn about Joey Wallet’s core features, including its self-custodial nature, WalletConnect support, and compatibility with the XRP Ledger and Xahau Network. * Why Joey Wallet?: Understand the benefits of integrating with Joey Wallet, such as its seamless UI/UX, fast onboarding, and robust security. * Use Cases: Explore how Joey Wallet supports payments, DeFi, NFT trading, and other XRPL-based applications. #### [hashtag](https://docs.joeywallet.xyz/overview/getting-started#id-2.-getting-started) 2\. Getting Started * Setup Guide: Instructions for setting up a development environment, including required tools (e.g., Node.js, npm) and access to XRPL Testnet credentials for testing. * WalletConnect Integration: A step-by-step guide to connecting Joey Wallet to your dApp using WalletConnect’s open-source protocol. * API Overview: Introduction to Joey Wallet’s API and SDK for signing transactions and interacting with the XRPL. See [here](https://docs.joeywallet.xyz/overview/quick-start) for our quick start, step-by-step guidelines. #### [hashtag](https://docs.joeywallet.xyz/overview/getting-started#id-3.-walletconnect-integration) 3\. WalletConnect Integration * What is WalletConnect?: A protocol for securely connecting mobile wallets to dApps via QR code-based authentication, ensuring private keys remain on the user’s device. * Supported Wallets: Joey Wallet supports WalletConnect for seamless dApp interactions, similar to MetaMask or Trust Wallet for Ethereum-based dApps. * Integration Steps: To get started with the Joey Wallet Provider, follow the steps below: 1. **Install the Package:** Use pnpm to install the package: Copy pnpm install @joey-wallet/wc-client 2. **Initialize the Provider:** Initialize the provider using your credentials provided on the Reown Dashboard. 3. **Manage Connections:** Use provider actions for handling connections: * `connect` * `generate` Utilize the provided `joey-modal` and `joey-button` components for seamless integration. By following these steps, you'll be set up to handle basic interactions with the Joey Wallet efficiently. See [here](https://docs.joeywallet.xyz/integration/install) for our integration guidelines. #### [hashtag](https://docs.joeywallet.xyz/overview/getting-started#id-4.-testing-and-debugging) 4\. Testing and Debugging * Testnet Access: Use XRPL Testnet to develop and test your dApp without risking real funds. Generate Testnet credentials via [XRPL.orgarrow-up-right](http://xrpl.org/) . * Troubleshooting: Common issues and solutions, such as handling WalletConnect connection errors or transaction failures. * Best Practices: Guidelines for optimizing dApp performance and ensuring compatibility with Joey Wallet. #### [hashtag](https://docs.joeywallet.xyz/overview/getting-started#id-5.-tutorials-and-examples) 5\. Tutorials and Examples * Step-by-Step Tutorials: Guides for common tasks, such as sending XRP, swapping tokens, or integrating with XRPL dApps like xrp.cafe. * Sample Projects: Downloadable code examples for building XRPL dApps with Joey Wallet integration. (ie. wc-toolkit.joeywallet.xyz, joey-signer.vercel.app) * Community Resources: Links to the XRPL developer community and forums for additional support. See [herearrow-up-right](https://github.com/Joey-Wallet/wc-client/tree/main/playground) for our playground of a few sample projects. #### [hashtag](https://docs.joeywallet.xyz/overview/getting-started#security-and-best-practices) . Security and Best Practices * Key Management: How Joey Wallet encrypts and stores private keys locally, audited by top firms. * User Privacy: Ensuring no tracking or data collection, aligning with Joey Wallet’s privacy-first ethos. * Secure Development: Tips for building secure dApps, including input validation and secure API calls. [PreviousWelcome to Joey Wallet!chevron-left](https://docs.joeywallet.xyz/) [NextQuick Startchevron-right](https://docs.joeywallet.xyz/overview/quick-start) Last updated 6 months ago sun-brightdesktopmoon sun-brightdesktopmoon --- # Add to Existing Project | Joey Wallet If you already have a project with WalletConnect integration and would like to add support for Joey Wallet, this is the page for you! ### [hashtag](https://docs.joeywallet.xyz/overview/add-to-existing-project#prerequisites) Prerequisites Before we get started... Joey Wallet has been tested using the `latest` recommended packages provided by Reown: * `@walletconnect/universal-provider` (session mgmt and requests) * `@reown/appkit` (modal) circle-exclamation If you are not supporting the latest versions of these packages, or using depreciated packages from `@walletconnect`, Joey Wallet may still work but performance and reliability is not guaranteed. It is recommended that you migrate your project to the dependencies above, and verify that you using the latest published versions. ### [hashtag](https://docs.joeywallet.xyz/overview/add-to-existing-project#integration) Integration * Add Joey Wallet to your preferred wallets list on the Appkit Modal circle-info Joey Wallet ProjectId: `d9f5432e932c6fad8e19a0cea9d4a3372a84aed16e98a52e6655dd2821a63404` * Review the networks supported by Joey Wallet [here](https://docs.joeywallet.xyz/integration/supported-networks) and make sure that your wallet-connect client contains these namespaces. ### [hashtag](https://docs.joeywallet.xyz/overview/add-to-existing-project#other-details) Other Details If you need to add a dedicated Joey button or QR code to your site, some of the information below might be useful. #### [hashtag](https://docs.joeywallet.xyz/overview/add-to-existing-project#supported-qr-code-contents) Supported QR code contents Copy Conventional: `${uri}` Joey-Specific: `${uri}` // wc:60b4991652e56dc0892721711db95886c9f166ced36cb8a60a759b61e89194ae@2?relay-protocol=irn&symKey=6dcd83bed7292707fd03befef27616958a02e574bdff8784937c1cf584fdd206&expiryTimestamp=1753908348 #### [hashtag](https://docs.joeywallet.xyz/overview/add-to-existing-project#supported-deeplinking-syntax) Supported deeplinking syntax [PreviousQuick Startchevron-left](https://docs.joeywallet.xyz/overview/quick-start) [NextInstallchevron-right](https://docs.joeywallet.xyz/integration/install) Last updated 6 months ago * [Prerequisites](https://docs.joeywallet.xyz/overview/add-to-existing-project#prerequisites) * [Integration](https://docs.joeywallet.xyz/overview/add-to-existing-project#integration) * [Other Details](https://docs.joeywallet.xyz/overview/add-to-existing-project#other-details) sun-brightdesktopmoon Copy Universal: `wc://${uri}` Joey-specific: `joey://settings/wc?uri=${encodeURIComponent(uri)}` // joey://settings/wc?uri=wc%3A60b4991652e56dc0892721711db95886c9f166ced36cb8a60a759b61e89194ae%402%3Frelay-protocol%3Dirn%26symKey%3D6dcd83bed7292707fd03befef27616958a02e574bdff8784937c1cf584fdd206%26expiryTimestamp%3D1753908348 sun-brightdesktopmoon --- # Actions | Joey Wallet The `wc-client` abstracts away the complexities of the WalletConnect packages, and boils the interactions down to a handful of `actions` that are accessible in the client and provider. * [connect](https://docs.joeywallet.xyz/integration/actions/connect) * [disconnect](https://docs.joeywallet.xyz/integration/actions/disconnect) * [reconnect](https://docs.joeywallet.xyz/integration/actions/reconnect) * [generate](https://docs.joeywallet.xyz/integration/actions/generate) [PreviousConfigurationchevron-left](https://docs.joeywallet.xyz/integration/configuration) [NextConnectchevron-right](https://docs.joeywallet.xyz/integration/actions/connect) Last updated 6 months ago sun-brightdesktopmoon sun-brightdesktopmoon --- # XRP Ledger | Joey Wallet [hashtag](https://docs.joeywallet.xyz/integration/supported-networks/xrp-ledger#joey-wallet-supports-sign-requests-for-the-xrp-ledger) Joey Wallet supports sign requests for the XRP Ledger. -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Here is an example of the enhanced namespace (XRPL) supported within `Joey Wallet` and the `wc-client`: Copy [\ xrpl,\ {\ chains: [{\ id: 'xrpl:0',\ name: 'XRPL',\ http: ['https://s1.ripple.com:51234/'],\ ws: ['wss://s1.ripple.com/'],\ nativeCurrency: { name: 'XRP', symbol: 'XRP', decimals: 6 },\ explorers: [{ name: 'XRPL Explorer', url: 'https://livenet.xrpl.org/' }],\ isDev: false,\ }],\ events: [],\ methods: ['xrpl_signTransaction','xrpl_signTransactionFor','xrpl_signTransactionBatch','xrpl_signTransactionFee'],\ },\ ], To view all of the supported XRP Ledger namespaces and chains, reference our codebase [herearrow-up-right](https://github.com/Joey-Wallet/wc-client/blob/main/packages/core/src/common/constants/chains/xrpl.ts) . [PreviousSupported Networkschevron-left](https://docs.joeywallet.xyz/integration/supported-networks) [NextChainschevron-right](https://docs.joeywallet.xyz/integration/supported-networks/xrp-ledger/chains) Last updated 6 months ago sun-brightdesktopmoon sun-brightdesktopmoon --- # Disconnect | Joey Wallet The provider comes with a `disconnect` action that disconnects from the active session (if connected). Copy // Some where within your codebase... const { actions, session, accounts } = useProvider(); const response = await actions.disconnect() #### [hashtag](https://docs.joeywallet.xyz/integration/actions/disconnect#example-usage) Example usage: Copy // File: ./src/app/component.tsx 'use client'; import * as React from 'react'; import { useProvider } from './page'; export default function Component() { const { actions, session, accounts } = useProvider(); const handleDisconnect = async () => { await actions.disconnect(); // You have been connected using wallet connect. // Now you can start interacting with the XRP Ledger. // ... }; return (
{session && ( )}
); } [PreviousConnectchevron-left](https://docs.joeywallet.xyz/integration/actions/connect) [NextReconnectchevron-right](https://docs.joeywallet.xyz/integration/actions/reconnect) Last updated 6 months ago sun-brightdesktopmoon sun-brightdesktopmoon --- # Connect | Joey Wallet The provider comes with a `connect` action that establishes a new connection to WalletConnect. Copy // Some where within your codebase... const { actions, session, accounts } = useProvider(); const response = await actions.connect() #### [hashtag](https://docs.joeywallet.xyz/integration/actions/connect#inputs-optional) Inputs (Optional) You can optionally pass in the `chain` , `pairing.topic` , or `openModal` directives. Copy { chain: string; pairing?: { topic: string }; openModal?: boolean; } #### [hashtag](https://docs.joeywallet.xyz/integration/actions/connect#return-type) Return Type The method will resolve with the active session if a connection is established by the user. Copy Promise<{ data: SessionTypes.Struct || null error: Error || null }> #### [hashtag](https://docs.joeywallet.xyz/integration/actions/connect#example-usage) Example usage: [PreviousActionschevron-left](https://docs.joeywallet.xyz/integration/actions) [NextDisconnectchevron-right](https://docs.joeywallet.xyz/integration/actions/disconnect) Last updated 6 months ago sun-brightdesktopmoon Copy // File: ./src/app/component.tsx 'use client'; import * as React from 'react'; import { useProvider } from './page'; export default function Component() { const { actions, session, accounts } = useProvider(); const handleConnect = async () => { const response = await actions.connect(); if (response.error) throw response.error; // You have been connected using wallet connect. // Now you can start interacting with the XRP Ledger. // ... }; return (
{!session && ( )} {session && (
Successfully connected! {accounts && accounts.map((account,index) => (
{account}
) )}
)}
); } sun-brightdesktopmoon --- # Methods | Joey Wallet ### [hashtag](https://docs.joeywallet.xyz/integration/supported-networks/xrp-ledger/methods#supported-methods) Supported Methods For the XRP Ledger, we support the following methods: * [xrpl\_signTransaction](https://docs.joeywallet.xyz/integration/supported-networks/xrp-ledger/methods/xrpl_signtransaction) * [xrpl\_signTransactionFor](https://docs.joeywallet.xyz/integration/supported-networks/xrp-ledger/methods/xrpl_signtransactionfor) * [xrpl\_signTransactionBulk](https://docs.joeywallet.xyz/integration/supported-networks/xrp-ledger/methods/xrpl_signtransactionbulk) circle-info All methods and abstracted functions are included in the `wc-client` ### [hashtag](https://docs.joeywallet.xyz/integration/supported-networks/xrp-ledger/methods#example-using-wc-client) Example (using `wc-client`) Copy import core from '@joey-wallet/wc-client/core'; const methods = core.methods Copy const sign = async () => { try { const response = await methods.signTransaction({ provider, chainId: 'xrpl:0', request: { tx_json: { TransactionType: 'AccountSet', Account: account?.split(':')[2] as string, }, options: { autofill: true, submit: true }, }, }); setResponse(JSON.stringify(response)); } catch (e: any) { console.error(e); if (e.message) setResponse(e.message); console.error(`error: ${e}`); } }; [PreviousChainschevron-left](https://docs.joeywallet.xyz/integration/supported-networks/xrp-ledger/chains) [Nextxrpl\_signTransactionchevron-right](https://docs.joeywallet.xyz/integration/supported-networks/xrp-ledger/methods/xrpl_signtransaction) Last updated 3 months ago * [Supported Methods](https://docs.joeywallet.xyz/integration/supported-networks/xrp-ledger/methods#supported-methods) * [Example (using wc-client)](https://docs.joeywallet.xyz/integration/supported-networks/xrp-ledger/methods#example-using-wc-client) sun-brightdesktopmoon sun-brightdesktopmoon --- # Configuration | Joey Wallet ### [hashtag](https://docs.joeywallet.xyz/integration/configuration#configuration-options) Configuration Options The `wc-client` Provider requires a configuration object to initialize WalletConnect and connect to the XRP Ledger. Below is an example configuration file and a detailed explanation of available options, including the metadata field for WalletConnect project details. Copy // File: ./src/common/wc-config.ts import { Config } from '@joey-wallet/wc-client/react'; import core from '@joey-wallet/wc-client/core'; const chains = core.constants.chains; export default { /** * WalletConnect Project ID from Reown Cloud * @see https://cloud.reown.com */ projectId: 'YOUR_WALLETCONNECT_PROJECT_ID', // Obtain from https://cloud.reown.com /** * Enhanced namespaces for the provider communication * Client needs a little more information for the chain information required by AppKit * Defaults to xrpl namespace */ namespaces: chains.xrplNamespace, /** * Default chain for connection - set to active chain on initialization * If the network is changed, a new chain will need to be set (ie. setActive) * Defaults to first detected chain in namespaces */ defaultChain: chains.xrpl.mainnet.id, /** * Wallet details for the preferred wallets for the modal and other interactions * Client reequired more information for deeplinking optimizations * Joey wallet will be included in this list if not provided */ walletDetails: [{\ name: 'Joey Wallet',\ projectId: 'd9f5432e932c6fad8e19a0cea9d4a3372a84aed16e98a52e6655dd2821a63404',\ deeplinkFormat: 'joey://settings/wc?uri=',\ }], /** * Enable logging for troubleshooting. * @default false */ verbose: true, // Enable debug logging (Optional) /** * Configure session data persistence. * The client uses persists session data using IndexDB * @default undefined */ storage: { enabled: true, // Persist session data custom: null, // Optional: Custom storage implementation }, /** * Project metadata for connection details - shown within the WalletKit * @see https://cloud.reown.com */ metadata: { name: 'Your DApp Name', description: 'A decentralized application for XRP Ledger interactions', url: 'https://your-dapp.com', icons: ['https://your-dapp.com/icon.png'], redirect: 'https://your-dapp.com/wc', // Universal link for web }, } as Config; For the latest configuration options, view within codebase [herearrow-up-right](https://github.com/Joey-Wallet/wc-client/blob/main/packages/core/src/typings/config.ts) . **Next Steps:** After understanding the configuration options, go to the Reown Dashbord to get your projects credentials. A Project ID is required for the WalletConnect integration to work properly with our provider. [PreviousInstallchevron-left](https://docs.joeywallet.xyz/integration/install) [NextActionschevron-right](https://docs.joeywallet.xyz/integration/actions) Last updated 6 months ago sun-brightdesktopmoon sun-brightdesktopmoon --- # Generate | Joey Wallet The provider comes with a `generate` action that creates a connection URI and deeplink for custom wallet buttons and actions. Copy // Some where within your codebase... const { actions } = useProvider(); const response = await actions.generate() #### [hashtag](https://docs.joeywallet.xyz/integration/actions/generate#input-optional) Input (Optional) This action does not require any inputs (similar to the \`connect\` action), but allows for a \`walletId\` parameter which will automatically generate a custom URI and deeplink for a targeted wallet. circle-info The `walletId` passed into the generate action has to match one of the wallet provided in the provider conifuration `walletDetails`. If not, the action will fallback to default wc syntax for the generated uri and deeplink (ie: wc://) Copy { walletId?: string; chain?: string; walletId?: string; pairing?: { topic: string }; openModal?: boolean; } #### [hashtag](https://docs.joeywallet.xyz/integration/actions/generate#return-type) Return Type The method will resolve if a connection is re-established by the user. Copy Promise<{ uri: string; deeplink: string; }> #### [hashtag](https://docs.joeywallet.xyz/integration/actions/generate#example-usage) Example usage: [PreviousReconnectchevron-left](https://docs.joeywallet.xyz/integration/actions/reconnect) [NextSupported Networkschevron-right](https://docs.joeywallet.xyz/integration/supported-networks) Last updated 6 months ago sun-brightdesktopmoon Copy // File: ./src/app/component.tsx 'use client'; import * as React from 'react'; import { useProvider } from './page'; import core from '@joey-wallet/wc-client/core'; const wallets = core.constants.wallets; export default function Component() { const { actions, session, accounts } = useProvider(); const handleGenerate = () => { const generate = await actions.generate({ walletId: wallets.joey.projectId, }); // Get raw uri from generate function and manufacture deeplink for mobile const uri = generate.data?.uri; const deeplink = generate.data?.deeplink; if (isMobile) { const openDeeplink = (link: string) => (window.location.href = link); if (deeplink) openDeeplink(deeplink); } else { openModal && triggerModal(true); } return new Promise((resolve, reject) => { // Listen for connect event to capture session and URI const onConnect = () => { resolve(true); // Clean up listener provider.off('connect', onConnect); }; // Handle provider errors const onError = () => { triggerModal(false); // Close modal on error reject(new Error(`Failed to connect`)); provider.off('error', onError); }; // Register event listeners provider.on('connect', onConnect); provider.on('error', onError); }); }; return (
{session && (
Successfully connected! {accounts && accounts.map((account,index) => (
{account}
) )}
)}
); } sun-brightdesktopmoon --- # Supported Networks | Joey Wallet Joey Wallet currently supports the following networks: * **XRP Ledger**: Mainnet, Testnet, Devnet More networks will be supported in the near future. Stay tuned for updates on expanded network compatibility! [PreviousGeneratechevron-left](https://docs.joeywallet.xyz/integration/actions/generate) [NextXRP Ledgerchevron-right](https://docs.joeywallet.xyz/integration/supported-networks/xrp-ledger) Last updated 6 months ago sun-brightdesktopmoon sun-brightdesktopmoon --- # Events | Joey Wallet [Previousxrpl\_signTransactionBulkchevron-left](https://docs.joeywallet.xyz/integration/supported-networks/xrp-ledger/methods/xrpl_signtransactionbulk) [NextCall-to-Actionchevron-right](https://docs.joeywallet.xyz/call-to-action) sun-brightdesktopmoon sun-brightdesktopmoon --- # xrpl_signTransaction | Joey Wallet #### [hashtag](https://docs.joeywallet.xyz/integration/supported-networks/xrp-ledger/methods/xrpl_signtransaction#request-structure) Request structure: Copy { tx_json: xrpl.Transaction; fee?: xrpl.Payment; includesFee?: boolean; options?: { autofill?: boolean; submit?: boolean }; } #### [hashtag](https://docs.joeywallet.xyz/integration/supported-networks/xrp-ledger/methods/xrpl_signtransaction#usage) Usage: Copy provider.request( { method: 'xrpl_signTransaction', params: { tx_json: {}, // XRP Ledger transaction object options: { autofill: true; submit: true }; }, }, chainId: 'xrpl:0' // xrpl:0, xrpl:1, xrpl:2 ); #### [hashtag](https://docs.joeywallet.xyz/integration/supported-networks/xrp-ledger/methods/xrpl_signtransaction#response) Response #### [hashtag](https://docs.joeywallet.xyz/integration/supported-networks/xrp-ledger/methods/xrpl_signtransaction#example-using-wc-client) Example using `wc-client`: [PreviousMethodschevron-left](https://docs.joeywallet.xyz/integration/supported-networks/xrp-ledger/methods) [Nextxrpl\_signTransactionForchevron-right](https://docs.joeywallet.xyz/integration/supported-networks/xrp-ledger/methods/xrpl_signtransactionfor) Last updated 6 months ago sun-brightdesktopmoon Copy tx_json: xrpl.TransactionAndMetadata; Copy import core from '@joey-wallet/wc-client/core'; const methods = core.methods const response = await methods.signTransaction({ provider, chainId: chain, request: { tx_json: { TransactionType: 'AccountSet', Account: 'rUmoi1vt8apeKsqFYKMRSiMvWixFDMC8Jz', }, options: { autofill: true, submit: true }, }, }); sun-brightdesktopmoon --- # xrpl_signTransactionFor | Joey Wallet #### [hashtag](https://docs.joeywallet.xyz/integration/supported-networks/xrp-ledger/methods/xrpl_signtransactionfor#request-structure) Request structure: Copy { tx_signer: string; tx_json: xrpl.Transaction; options?: { autofill?: boolean; submit?: boolean }; } #### [hashtag](https://docs.joeywallet.xyz/integration/supported-networks/xrp-ledger/methods/xrpl_signtransactionfor#usage) Usage: Copy provider.request( { method: 'xrpl_signTransactionFor', params: { tx_signer: 'r.....', // XRP Address tx_json: {}, // XRP Ledger transaction object options: { autofill: true; submit: true }; }, }, chainId: 'xrpl:0' // xrpl:0, xrpl:1, xrpl:2 ); #### [hashtag](https://docs.joeywallet.xyz/integration/supported-networks/xrp-ledger/methods/xrpl_signtransactionfor#response) Response #### [hashtag](https://docs.joeywallet.xyz/integration/supported-networks/xrp-ledger/methods/xrpl_signtransactionfor#example-using-wc-client) Example using `wc-client`: [Previousxrpl\_signTransactionchevron-left](https://docs.joeywallet.xyz/integration/supported-networks/xrp-ledger/methods/xrpl_signtransaction) [Nextxrpl\_signTransactionBulkchevron-right](https://docs.joeywallet.xyz/integration/supported-networks/xrp-ledger/methods/xrpl_signtransactionbulk) Last updated 6 months ago sun-brightdesktopmoon Copy tx_json: xrpl.TransactionAndMetadata; Copy import core from '@joey-wallet/wc-client/core'; const methods = core.methods const response = await methods.signTransaction({ provider, chainId: chain, request: { tx_signer: 'rUmoi1vt8apeKsqFYKMRSiMvWixFDMC8Jz', tx_json: { TransactionType: 'AccountSet', Account: 'rUmoi1vt8apeKsqFYKMRSiMvWixFDMC8Jz' }, options: { autofill: true, submit: true }, }, }); sun-brightdesktopmoon --- # Call-to-Action | Joey Wallet Join the XRP Ledger Ecosystem Joey Wallet makes it easier than ever to engage with the XRP Ledger’s fast, cost-effective, and decentralized ecosystem. Whether you’re a user looking to manage your XRP or a developer building the next big dApp, Joey Wallet has you covered. * 🦘 Get Joey Wallet Today: [iOSarrow-up-right](https://t.co/OffywzJ1ey) or [Androidarrow-up-right](https://t.co/lRPUfho6nt) * 🧑‍💻 Integrate Joey Wallet into your project: [Here](https://docs.joeywallet.xyz/integration/install) * Community: Join the XRPL developer community at [XRPL.orgarrow-up-right](https://xrpl.org/) or follow [@JoeyWalletarrow-up-right](https://t.co/CHfWZqVriw) on X for updates. > “Joey Wallet is going to onboard the masses. The UI is clean, the setup is smooth, the experience is effortless.” —@echodatruth [PreviousEventschevron-left](https://docs.joeywallet.xyz/integration/supported-networks/xrp-ledger/events) [NextSigner-Toolchevron-right](https://docs.joeywallet.xyz/other-resources/signer-tool) Last updated 6 months ago sun-brightdesktopmoon sun-brightdesktopmoon --- # Signer-Tool | Joey Wallet > Tagline: Securely Sign XRP Ledger Transactions with Joey Wallet > > URL: [joey-signer.vercel.apparrow-up-right](https://joey-signer.vercel.app/) ### [hashtag](https://docs.joeywallet.xyz/other-resources/signer-tool#overview) Overview Joey Signer is a lightweight, secure tool designed for developers to interact with Joey Wallet for signing XRP Ledger (XRPL) transactions. Built to streamline transaction authorization, Joey Signer ensures private keys remain on the user’s device, maintaining the self-custodial ethos of Joey Wallet. Whether you’re building a dApp or integrating payment flows, Joey Signer simplifies transaction signing with a clean API and robust security ### [hashtag](https://docs.joeywallet.xyz/other-resources/signer-tool#key-features) Key Features * Secure Signing: Transactions are signed on-device using Joey Wallet’s encrypted key storage, ensuring private keys never leave the user’s phone. * Broad Transaction Support: Supports all XRPL transaction types, including Payments, Trustlines, Escrows, and AMM interactions. * WalletConnect Integration: Seamlessly connects to dApps via WalletConnect, enabling QR code-based authentication. * Developer-Friendly API: Easy-to-use endpoints for submitting and signing transactions. * Open-Source: Fully transparent codebase, for security and reliability. [PreviousCall-to-Actionchevron-left](https://docs.joeywallet.xyz/call-to-action) Last updated 6 months ago * [Overview](https://docs.joeywallet.xyz/other-resources/signer-tool#overview) * [Key Features](https://docs.joeywallet.xyz/other-resources/signer-tool#key-features) sun-brightdesktopmoon sun-brightdesktopmoon --- # Install | Joey Wallet ### [hashtag](https://docs.joeywallet.xyz/integration/install#installation) Installation To integrate `wc-client` into your decentralized application (DApp), install it using your preferred package manager: pnpm, npm, or yarn. Run one of the following commands in your project directory: Copy # Using pnpm (recommended for faster installs) pnpm add @joey-wallet/wc-client Copy # Using npm npm install @joey-wallet/wc-client Copy # Using yarn yarn add @joey-wallet/wc-client > Note: Ensure your project includes `@walletconnect/universal-provider` as a dependency, as `wc-client` builds on it for WalletConnect functionality. If not already included, you can install it alongside `wc-client` **Next Steps:** After installation, you can initialize `wc-client` in your DApp to connect to the XRP Ledger via WalletConnect. Refer to the Quick Start section for a basic example of setting up the client, or explore the Playground directory for advanced use cases, including session management and transaction handling with Joey Wallet. [PreviousAdd to Existing Projectchevron-left](https://docs.joeywallet.xyz/overview/add-to-existing-project) [NextConfigurationchevron-right](https://docs.joeywallet.xyz/integration/configuration) Last updated 6 months ago sun-brightdesktopmoon sun-brightdesktopmoon --- # Chains | Joey Wallet For the XRP Ledger, we support the Mainnet (xrpl:0), Testnet (xrpl:1) and Devnet (xrpl:2). * **Mainnet** (xrpl:0) Copy const mainnet: typings.ChainDetails = { id: 'xrpl:0', name: 'XRPL', http: ['https://s1.ripple.com:51234/'], ws: ['wss://s1.ripple.com/'], nativeCurrency: { name: 'XRP', symbol: 'XRP', decimals: 6 }, explorers: [{ name: 'XRPL Explorer', url: 'https://livenet.xrpl.org/' }], isDev: false, }; * **Testnet** (xrpl:1) Copy const testnet: typings.ChainDetails = { id: 'xrpl:1', name: 'XRPL Testnet', http: ['https://s.altnet.rippletest.net:51234/'], ws: ['wss://s.altnet.rippletest.net:51234/'], nativeCurrency: { name: 'XRP', symbol: 'XRP', decimals: 6 }, explorers: [{ name: 'XRPL Testnet Explorer', url: 'https://testnet.xrpl.org/' }], isDev: true, }; * **Devnet** (xrpl:2) [PreviousXRP Ledgerchevron-left](https://docs.joeywallet.xyz/integration/supported-networks/xrp-ledger) [NextMethodschevron-right](https://docs.joeywallet.xyz/integration/supported-networks/xrp-ledger/methods) Last updated 6 months ago sun-brightdesktopmoon Copy const devnet: typings.ChainDetails = { id: 'xrpl:2', name: 'XRPL Devnet', http: ['https://s.devnet.rippletest.net:51234/'], ws: ['wss://s.devnet.rippletest.net:51234/'], nativeCurrency: { name: 'XRP', symbol: 'XRP', decimals: 6 }, explorers: [{ name: 'XRPL Devnet Explorer', url: 'https://devnet.xrpl.org/' }], isDev: true, }; sun-brightdesktopmoon --- # Reconnect | Joey Wallet The provider comes with a `reconnect` action that establishes a new connection to WalletConnect (with an existing or stored session). Copy // Some where within your codebase... const { actions } = useProvider(); const response = await actions.reconnect(session) #### [hashtag](https://docs.joeywallet.xyz/integration/actions/reconnect#input) Input This action requires the session to reconnect. Copy session: SessionTypes.Struct // WalletConnect Session #### [hashtag](https://docs.joeywallet.xyz/integration/actions/reconnect#return-type) Return Type The method will resolve if a connection is re-established by the user. Copy Promise #### [hashtag](https://docs.joeywallet.xyz/integration/actions/reconnect#example-usage) Example usage: Copy // File: ./src/app/component.tsx 'use client'; import * as React from 'react'; import { useProvider } from './page'; export default function Component() { const { actions, session, accounts } = useProvider(); const handleReconnect = async () => { const response = await actions.reconnect(session); if (response.error) throw response.error; // You have been connected using wallet connect. // Now you can start interacting with the XRP Ledger. // ... }; return (
{session && (
Successfully connected! {accounts && accounts.map((account,index) => (
{account}
) )}
)}
); } [PreviousDisconnectchevron-left](https://docs.joeywallet.xyz/integration/actions/disconnect) [NextGeneratechevron-right](https://docs.joeywallet.xyz/integration/actions/generate) Last updated 6 months ago sun-brightdesktopmoon sun-brightdesktopmoon --- # xrpl_signTransactionBulk | Joey Wallet #### [hashtag](https://docs.joeywallet.xyz/integration/supported-networks/xrp-ledger/methods/xrpl_signtransactionbulk#request-structure) Request structure: Copy { txns: xrpl.Transaction[]; fee?: xrpl.Payment; includesFee?: boolean; options?: { autofill?: boolean; submit?: boolean }; } #### [hashtag](https://docs.joeywallet.xyz/integration/supported-networks/xrp-ledger/methods/xrpl_signtransactionbulk#usage) Usage: Copy provider.request( { method: 'xrpl_signTransactionBulk', params: { txns: [], // Array of XRPL transaction objects fee: {}, // XRPL Payment Object includesFee: true options: { autofill: true; submit: true }; }, }, chainId: 'xrpl:0' // xrpl:0, xrpl:1, xrpl:2 ); #### [hashtag](https://docs.joeywallet.xyz/integration/supported-networks/xrp-ledger/methods/xrpl_signtransactionbulk#response) Response #### [hashtag](https://docs.joeywallet.xyz/integration/supported-networks/xrp-ledger/methods/xrpl_signtransactionbulk#example-using-wc-client) Example using `wc-client`: [Previousxrpl\_signTransactionForchevron-left](https://docs.joeywallet.xyz/integration/supported-networks/xrp-ledger/methods/xrpl_signtransactionfor) [NextEventschevron-right](https://docs.joeywallet.xyz/integration/supported-networks/xrp-ledger/events) Last updated 3 months ago sun-brightdesktopmoon Copy txns: xrpl.TransactionAndMetadata[]; Copy import core from '@joey-wallet/wc-client/core'; const methods = core.methods const response = await methods.signTransactionBulk({ provider, chainId: chain, request: { txns: [\ {\ TransactionType: 'AccountSet',\ Account: 'rUmoi1vt8apeKsqFYKMRSiMvWixFDMC8Jz',\ },\ {\ TransactionType: 'AccountSet',\ Account:'rUmoi1vt8apeKsqFYKMRSiMvWixFDMC8Jz',\ },\ ], options: { autofill: true, submit: true }, }, }); sun-brightdesktopmoon --- # Quick Start | Joey Wallet Here’s a concise guide to integrating Joey Wallet into your XRPL-based dApp using WalletConnect circle-info Do you have an existing that dapp that already supports WalletConnect? See [here](https://docs.joeywallet.xyz/overview/add-to-existing-project) for details on how to add Joey Wallet. 1. Set Up Your Development Environment: * Install Node.js and npm. ◦ Set up a project with a framework like React, NextJS or plain Typescript/Javascript. circle-exclamation In this example, we will be using NextJS and pnpm * Install our joey provider: Copy pnpm install @joey-wallet/wc-client 1. Obtain your Reown Project Identification: Go to [Reown Dashboardarrow-up-right](https://dashboard.reown.com/) and configure your projects details. Once finished, copy your Reown ProjectId. 1. Configure your Joey `provider`: Create a configuration file for your provider. Copy // File: ./src/app/config.ts import type { Config } from '@joey-wallet/wc-client'; export default { // Required projectId: process.env['NEXT_PUBLIC_PROJECT_ID'], // Optional - Add your projects details metadata: { name: 'Joey Example Project', description: 'A sample project using walletconnect and Joey Wallet.', url: "http://localhost:3000", icons: ['/assets/favicon.ico'], redirect: { universal: "http://localhost:3000", }, }, } as Config View [herearrow-up-right](https://github.com/Joey-Wallet/wc-client/blob/main/packages/core/src/typings/config.ts) for a more thorough explanation for all the acceptable configuration parameters for the provider. 1. Create, import your config file, and include the context provider around your page components: 1. Handling Wallet Events and Actions: The first thing to do - connect to WalletConnect using Joey Wallet! See below for an example using the `connect` action included in the provider: After the `connect` button is clicked, the WalletConnect modal will open and ask for the user to sign-in using Joey Wallet. Once the user approves the interaction, the connection will be complete and you can proceed to issuing transaction request. 1. Interact with the XRP Ledger and Joey Wallet Issue your first sign request! For a complete list of embedded methods, see here: [https://github.com/Joey-Wallet/wc-client/tree/main/packages/core/src/methodsarrow-up-right](https://github.com/Joey-Wallet/wc-client/tree/main/packages/core/src/methods) circle-info Pro Tip: Leverage Joey Wallet’s integration with platforms like [xrp.cafearrow-up-right](http://xrp.cafe/) and [firstledger.netarrow-up-right](http://firstledger.net/) for real-world testing. [PreviousGetting Startedchevron-left](https://docs.joeywallet.xyz/overview/getting-started) [NextAdd to Existing Projectchevron-right](https://docs.joeywallet.xyz/overview/add-to-existing-project) Last updated 6 months ago sun-brightdesktopmoon Copy // File: ./src/app/page.tsx 'use client'; import * as React from 'react'; import { advanced } from '@joey-wallet/wc-client/react'; import config from './config'; const { Provider: WcProvider, useProvider } = advanced.default; export { useProvider }; export const Provider = (props: React.PropsWithChildren) => ( {props.children} ); export default function Page() { return ( {/* Your page components here */} ) } Copy // File: ./src/app/component.tsx 'use client'; import * as React from 'react'; import { useProvider } from './page'; export default function Component() { const { actions, session, accounts } = useProvider(); const handleConnect = async () => { const connect = await actions.connect(); if (connect.error) throw connect.error; // You have been connected using wallet connect. // Now you can start interacting with the XRP Ledger. // ... }; return (
{!session && ( )} {session && (
Successfully connected! {accounts && accounts.map((account,index) => (
{account}
) )}
)}
); } Copy // File: ./src/app/signer.tsx 'use client'; import * as React from 'react'; import xrpl from 'xrpl'; import core from '@joey-wallet/wc-client/core'; import { useProvider } from './page'; export default function Signer() { const { provider, session, chain, accounts } = useProvider(); const [response, setResponse] = React.useState(); const handleSign = async () => { try { if (!provider) throw Error('Provider not ready for request.'); const address = accounts?.map((account) => account.replace(chain, ''))?.[0]; if (!address) throw Error('Could not determine address for request'); const tx_json: xrpl.Payment = { TransactionType: 'Payment', Account: address, Destination: 'ra5nK24KXen9AHvsdFTKHSANinZseWnPcX', Amount: { currency: 'USD', value: '1', issuer: 'rf1BiGeXwwQoi8Z2ueFYTEXSwuJYfV2Jpn', }, Fee: '12', Flags: 2147483648, Sequence: 2, }; const response = await core.methods.signTransaction({ provider, chainId: chain, request: { tx_json, options: { autofill: true, submit: true }, }, }); setResponse(JSON.stringify(response, null, 2)); } catch (e: any) { console.error(e); return new Error(e.message); } }; return (
{session && ( )} {response && (
Received a response from Joey Wallet! {response}
)}
); } sun-brightdesktopmoon ---