---
title: "@thru/wallet"
description: Embedded wallet SDK for browser, React, React UI, and native wallet
  integrations.
source_url:
  html: https://thru.org/docs/sdks/web-packages/wallet/
  md: https://thru.org/docs/sdks/web-packages/wallet.md
---

# @thru/wallet

`@thru/wallet` is the public wallet integration package. It combines the browser iframe SDK, shared wallet protocol/types, React hooks, prebuilt React UI, and React Native entrypoints behind one package.

## Install

```bash
npm install @thru/wallet @thru/sdk
```

React Native and Expo apps also need the peer dependencies required by their native wallet surface, such as `react-native-webview`, `react-native-svg`, and the Expo modules used by the app.

## Entry Points

| Import | What it provides |
| - | - |
| `@thru/wallet` | Browser SDK, wallet protocol exports, wallet account types, connection helpers, and signing-context types. |
| `@thru/wallet/react` | `ThruProvider`, `useWallet`, `useAccounts`, `useThru`, and related React types. |
| `@thru/wallet/react-ui` | `ThruAccountSwitcher` prebuilt React wallet control. |
| `@thru/wallet/native` | Native wallet SDK/provider primitives. |
| `@thru/wallet/native/react` | Native React provider, hooks, and wallet sheet components. |
| `@thru/wallet/native/plugin` | Expo config plugin. |

## Browser SDK

Use the root entrypoint when you want direct control of the embedded wallet iframe and wallet lifecycle.

```ts
import { BrowserSDK } from "@thru/wallet";

const wallet = new BrowserSDK({
  iframeUrl: "https://wallet.thru.org/embedded",
  rpcUrl: "https://grpc-web.alphanet.thruput.org",
});

await wallet.initialize();

wallet.on("connect", ({ accounts }) => {
  console.log("Connected accounts", accounts);
});

const result = await wallet.connect({
  metadata: {
    appId: window.location.origin,
    appName: "My Thru App",
    appUrl: window.location.origin,
  },
});

const thru = wallet.getThru();
const account = await thru.accounts.get(result.accounts[0].address);
```

The root package also exports wallet protocol types such as `WalletAccount`, `ConnectResult`, `ThruSigningContext`, `ThruTransactionEncoding`, and `ErrorCode`.

## React

Use `@thru/wallet/react` for React apps that want provider state and hooks.

```tsx
import { ThruProvider, useWallet } from "@thru/wallet/react";

export function App({ children }: { children: React.ReactNode }) {
  return (
    <ThruProvider
      config={{
        iframeUrl: "https://wallet.thru.org/embedded",
        rpcUrl: "https://grpc-web.alphanet.thruput.org",
      }}
    >
      {children}
    </ThruProvider>
  );
}

export function ConnectButton() {
  const { connect, isConnected, isConnecting } = useWallet();

  return (
    <button onClick={() => connect()} disabled={isConnected || isConnecting}>
      {isConnected ? "Connected" : "Connect wallet"}
    </button>
  );
}
```

Use `@thru/wallet/react-ui` when you want the prebuilt account switcher:

```tsx
import { ThruProvider } from "@thru/wallet/react";
import { ThruAccountSwitcher } from "@thru/wallet/react-ui";

export function Header() {
  return <ThruAccountSwitcher />;
}
```

## Native

React Native apps use the native entrypoints from the same package:

```tsx
import { ThruProvider, ThruWalletSheet } from "@thru/wallet/native/react";

export default function Root() {
  return (
    <ThruProvider config={{ walletUrl: "https://wallet.thru.org/embedded" }}>
      <App />
      <ThruWalletSheet />
    </ThruProvider>
  );
}
```

Expo apps should add the config plugin from `@thru/wallet/native/plugin`.

## Signing Context

Call `getSigningContext()` before building transactions that depend on signer or fee-payer identity. The selected managed account can differ from the public key that signs and pays for network submission.

```ts
const context = await wallet.getSigningContext();

console.log(context.selectedAccountPublicKey);
console.log(context.feePayerPublicKey);
console.log(context.signerPublicKey);
```

## Related

- [Wallet Integration](https://thru.org/docs/wallet/overview.md)
- [Embedded Wallet Integration](https://thru.org/docs/wallet/embedded-wallet-integration.md)
- [Approval and Signing](https://thru.org/docs/wallet/approval-and-signing.md)
- [`@thru/sdk`](https://thru.org/docs/sdks/web-packages/sdk.md)