open-index/open-npm huggingface dataset:
npm package: @qubic-labs/react
Description: [![CI](https://github.com/qubic/jskit-react/actions/workflows/ci.yml/badge.svg?branch=main)](https://github.com/qubic/jskit-react/actions/workflows/ci.yml) [![npm](https://img.shields.io/npm/v/@qubic-labs/react)](https://www.npmjs.com/package/@qubic-labs/
Latest version: 1.3.0

# @qubic-labs/react

[![CI](https://github.com/qubic/jskit-react/actions/workflows/ci.yml/badge.svg?branch=main)](https://github.com/qubic/jskit-react/actions/workflows/ci.yml)
[![npm](https://img.shields.io/npm/v/@qubic-labs/react)](https://www.npmjs.com/package/@qubic-labs/react)

React bindings for `@qubic-labs/sdk` built on `@tanstack/react-query`.

## Install

```bash
bun add @qubic-labs/react @qubic-labs/contracts @qubic-labs/sdk @tanstack/react-query react react-dom
```

## Next.js

`@qubic-labs/sdk` (via `@qubic-labs/core`) includes Node-only modules (for example `node:net`). In Next.js, importing it from a Client Component will fail during bundling.

Use it from a Server Component or Route Handler instead, then call it from the client.

## Quick start

```tsx
import { QueryClient } from "@tanstack/react-query";
import { createSdk } from "@qubic-labs/sdk";
import { QubicQueryProvider, SdkProvider, useBalance } from "@qubic-labs/react";

const queryClient = new QueryClient();
const sdk = createSdk({ baseUrl: "https://rpc.qubic.org" });

function BalanceCard({ identity }: { identity: string }) {
  const balance = useBalance(identity, { refetchInterval: 10_000 });
  if (balance.isLoading) return <div>Loading...</div>;
  if (balance.error) return <div>{balance.error.message}</div>;
  return <div>Balance: {balance.data?.balance}</div>;
}

export function App() {
  return (
    <SdkProvider sdk={sdk}>
      <QubicQueryProvider client={queryClient}>
        <BalanceCard identity="..." />
      </QubicQueryProvider>
    </SdkProvider>
  );
}
```

## Docs

- `docs/setup.md`
- `docs/hooks.md`
- `docs/contracts.md`
- `docs/wallets.md`
- `docs/vaults.md`

## Examples

- `examples/basic.tsx`
- `examples/transactions.tsx`
- `examples/contracts.tsx`

## Local development (monorepo)

```bash
# from jskit-react/
bun add @qubic-labs/sdk@file:../jskit-sdk
```
npm package: @qubic.ts/contracts
Description: Generated Qubic contract registries, codecs, and historical contract-version resolution.
Latest version: 1.6.2

# @qubic.ts/contracts

Generated Qubic contract registries, codecs, and historical contract-version resolution.

## See Also

- Workspace overview: [`../../README.md`](../../README.md)
- Core primitives: [`../core/README.md`](../core/README.md)
- SDK workflows: [`../sdk/README.md`](../sdk/README.md)
- React integrations: [`../react/README.md`](../react/README.md)

## Install

```bash
bun add @qubic.ts/contracts
# or
npm install @qubic.ts/contracts
```

## Quickstart

```ts
import {
  coreContractsRegistry,
  coreVersionedContractsRegistry,
  decodeHistoricalTransactionInput,
  resolveContractVersionByEpoch,
} from "@qubic.ts/contracts";

const current = coreContractsRegistry.contracts.find((contract) => contract.contractIndex === 4);
console.log(current?.name);

const historical = resolveContractVersionByEpoch({
  registry: coreVersionedContractsRegistry,
  contractIndex: 2,
  epoch: 200,
});

console.log(historical?.contract.name);

const decoded = decodeHistoricalTransactionInput({
  registry: coreVersionedContractsRegistry,
  contractIndex: 4,
  inputType: 100,
  inputBytes: new Uint8Array(),
  epoch: 204,
});

console.log(decoded.decoded.mode);
```

## What It Covers

- current generated contract registry: `coreContractsRegistry`
- versioned historical registry: `coreVersionedContractsRegistry`
- contract entry input encoding/decoding
- registry validation and normalization
- epoch-aware contract version resolution

## Common Imports

```ts
import {
  coreContractsRegistry,
  coreVersionedContractsRegistry,
  decodeContractEntryInputData,
  decodeHistoricalTransactionInput,
  encodeContractEntryInputData,
  resolveContractVersionByEpoch,
} from "@qubic.ts/contracts";
```

## Browser Runtime

- Use `@qubic.ts/contracts/browser` in browser/client bundles.
- Use `@qubic.ts/contracts` for generator/tooling and Node-oriented flows.

```ts
import {
  coreVersionedContractsRegistry,
  createHistoricalDecoder,
} from "@qubic.ts/contracts/browser";

const decoder = createHistoricalDecoder(coreVersionedContractsRegistry);
```

## Generator Commands

```bash
cd packages/contracts
bun run generate
bun run generate:check
bun run check
```

## Historical Decode Notes

- `coreContractsRegistry` is the current snapshot only.
- `coreVersionedContractsRegistry` includes version timelines per contract.
- Historical decoding falls back to `named` or `raw` when typed metadata is missing or bytes do not match the resolved schema.

## Next Step

Use [`@qubic.ts/sdk`](../sdk/README.md) if you want RPC-driven transaction confirmation and automatic `tick -> epoch` resolution around these registries.
npm package: @qubic.ts/core
Description: Low-level Qubic primitives for identities, seeds, transaction encoding/signing, protocol codecs, and transports.
Latest version: 1.6.2

# @qubic.ts/core

Low-level Qubic primitives for identities, seeds, transaction encoding/signing, protocol codecs, and transports.

## See Also

- Workspace overview: [`../../README.md`](../../README.md)
- Contracts layer: [`../contracts/README.md`](../contracts/README.md)
- SDK layer: [`../sdk/README.md`](../sdk/README.md)
- React layer: [`../react/README.md`](../react/README.md)

## Install

```bash
bun add @qubic.ts/core
# or
npm install @qubic.ts/core
```

## Quickstart

```ts
import {
  buildUnsignedTransaction,
  identityFromSeed,
  transactionId,
} from "@qubic.ts/core";

const sourceIdentity = await identityFromSeed(
  "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
);

const txBytes = buildUnsignedTransaction({
  sourcePublicKey32: new Uint8Array(32),
  destinationPublicKey32: new Uint8Array(32),
  amount: 0n,
  tick: 1,
  inputType: 0,
});

console.log(sourceIdentity, await transactionId(txBytes));
```

## What It Covers

- identity and public-key helpers
- seed-to-key derivation
- transaction building and signing
- binary protocol request/response codecs
- TCP and bridge transports

## Common Imports

```ts
import {
  buildSignedTransaction,
  buildUnsignedTransaction,
  createTcpTransport,
  decodeRespondCurrentTickInfo,
  encodeRequestCurrentTickInfo,
  identityFromSeed,
  publicKeyFromIdentity,
  transactionId,
} from "@qubic.ts/core";
```

## Runtime Notes

- The root export is runtime-neutral.
- Use `@qubic.ts/core/browser` when you need the browser-specific boundary.
- Use `@qubic.ts/core/node` when you need the Node-specific boundary.

## Next Step

If you want higher-level RPC and transaction workflows, move to [`@qubic.ts/sdk`](../sdk/README.md).
npm package: @qubic.ts/sdk
Description: High-level Qubic SDK for RPC access, contract queries, transaction submission, confirmation, decoding, and vault workflows.
Latest version: 1.6.2

# @qubic.ts/sdk

High-level Qubic SDK for RPC access, contract queries, transaction submission, confirmation, decoding, and vault workflows.

## See Also

- Workspace overview: [`../../README.md`](../../README.md)
- Core primitives: [`../core/README.md`](../core/README.md)
- Contracts metadata: [`../contracts/README.md`](../contracts/README.md)
- React bindings: [`../react/README.md`](../react/README.md)

## Install

```bash
bun add @qubic.ts/sdk
# or
npm install @qubic.ts/sdk
```

## Quickstart

```ts
import { createSdk } from "@qubic.ts/sdk";

const sdk = createSdk({
  baseUrl: "https://rpc.qubic.org",
  txQueue: { enabled: false },
});

const tickInfo = await sdk.rpc.live.tickInfo();
const intervals = await sdk.rpc.query.getProcessedTickIntervals();

console.log(tickInfo.tick, intervals.intervals.length);
```

## Contract Query Example

```ts
import { createSdk } from "@qubic.ts/sdk";

const sdk = createSdk({ baseUrl: "https://rpc.qubic.org" });

const response = await sdk.contracts.queryRaw({
  contractIndex: 1,
  inputType: 1,
  inputBytes: new Uint8Array([0]),
});

console.log(response.responseBase64);
```

## Historical Transaction Decode Example

```ts
import { createSdk } from "@qubic.ts/sdk";

const sdk = createSdk({ baseUrl: "https://rpc.qubic.org" });

const decoded = await sdk.tx.decodeTransactionInput({
  transaction: {
    hash: "TX_HASH",
    amount: 0n,
    source: "SOURCE_IDENTITY",
    destination: "DESTINATION_IDENTITY",
    tickNumber: 45693000n,
    timestamp: 0n,
    inputType: 7n,
    inputSize: 2n,
    inputData: "BQk=",
    signature: "SIGNATURE",
  },
  contractIndex: 4,
});

console.log(decoded.decoded.mode);
```

## Vault Helpers

```ts
import { openSeedVault } from "@qubic.ts/sdk/node";

const vault = await openSeedVault({
  path: "./vault.json",
  passphrase: "secret-passphrase",
  create: true,
});

console.log(await vault.listEntries());
```

## What It Covers

- partner RPC client
- BOB client and log streaming
- contract query helpers
- transaction build, send, queue, and confirm helpers
- decoded receipts using historical contract timelines
- node and browser vault helpers

## Runtime Notes

- Root import is the general SDK export.
- Use `@qubic.ts/sdk/browser` for browser-safe vault helpers.
- Use `@qubic.ts/sdk/node` for filesystem vault helpers and Node-only code paths.
- CLI vault binary: `qubic-ts-vault`

## Next Step

Use [`@qubic.ts/react`](../react/README.md) if you want query providers, hooks, and wallet connectors on top of the SDK.