Browser Extension

Installation

Install @joeywallet/wallet-sdk and set it up for TypeScript, React, Next.js and server-side rendering.

Install

npm install @joeywallet/wallet-sdk

pnpm add @joeywallet/wallet-sdk

yarn add @joeywallet/wallet-sdk
  • Current version: 0.5.0. The SDK is pre-1.0, so a breaking change ships as a minor version.
  • License: MIT. Source on GitHub; published with npm provenance.
  • Dependencies: none at runtime. React 18 or later is an optional peer dependency, only needed for the React entry point.
  • Format: ESM only, tree-shakeable ("sideEffects": false).

Entry points

Import Contents
@joeywallet/wallet-sdk Detection, the Joey client, errors, constants, types and chain helpers
@joeywallet/wallet-sdk/react JoeyProvider, useJoey and mutation hooks such as useSignAndSubmit
@joeywallet/wallet-sdk/vanilla createJoeySession and bindConnectButton for apps without a framework

See React and vanilla for the framework helpers.

Server-side rendering and Next.js

  • Importing is safe on the server. Detection reads globalThis, so on the server getJoey() returns null, isJoeyAvailable() returns false, and waitForJoey() rejects.
  • Next.js App Router: the React entry point doesn't include a 'use client' directive. Put JoeyProvider, and any component that calls the hooks, inside your own 'use client' component.

TypeScript

The SDK doesn't declare window.joey globally, so it won't clash with other wallet SDKs. If you want to reference it directly, declare it yourself:

import type { JoeyInjectedProvider } from '@joeywallet/wallet-sdk'

declare global {
  interface Window {
    joey?: JoeyInjectedProvider
  }
}

Using xrpl.js types

The SDK doesn't depend on xrpl, but every signing method accepts any transaction shape. If you use xrpl.js, annotate your transactions to keep full type checking:

import type { Payment } from 'xrpl'

const payment: Payment = {
  TransactionType: 'Payment',
  Account: address,
  Destination: 'rPT1Sjq2YGrBMTttX4GZHjKu9dyfzbpAYe',
  Amount: '1000000',
}
await joey.signAndSubmitTransaction({ tx_json: payment })
PreviousOverviewNext Quick Start