# Installation

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

## Install

```bash
npm install @joeywallet/wallet-sdk
```

```bash
pnpm add @joeywallet/wallet-sdk
```

```bash
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](https://github.com/Joey-Wallet/joey-wallet-sdk); 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](/docs/browser-extension/react) 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:

```ts
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:

```ts
import type { Payment } from 'xrpl'

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