@thru/wallet

View as Markdown

@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

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.

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.

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:

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:

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.

const context = await wallet.getSigningContext();

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