> ## Documentation Index
> Fetch the complete documentation index at: https://docs.spark.money/llms.txt
> Use this file to discover all available pages before exploring further.

# Wallet Viewer API

> SparkReadonlyClient methods for querying balances, transfers, deposits, and token data.

export const Card = ({icon, iconLight, iconDark, href, title, description, target = "_self"}) => {
  return <div className="spark-card rounded-2xl flex justify-center p-4 hover:scale-[1.02] transition-all duration-300">
      <a href={href} target={target} rel={target === "_blank" ? "noopener noreferrer" : undefined} className="w-full">
        <div className="flex flex-col gap-12 justify-space-between">
          <div className="w-8 h-8">
            {iconLight && iconDark ? <>
                <img src={iconLight} className="icon-light w-full h-full pointer-events-none" alt={title} width={32} height={32} />
                <img src={iconDark} className="icon-dark w-full h-full pointer-events-none" alt={title} width={32} height={32} />
              </> : <img src={icon} className="w-full h-full pointer-events-none" alt={title} width={32} height={32} />}
          </div>
          <div className="flex flex-col gap-2">
            <h2 className="card-title text font-semibold leading-tight">
              {title}
            </h2>
            <p className="card-description text-sm leading-tight">
              {description}
            </p>
          </div>
        </div>
      </a>
    </div>;
};

export const HCard = ({icon, light, dark, href, title, description, target = "_self"}) => {
  return <div className="spark-card rounded-2xl flex justify-center items-center p-4 hover:scale-[1.02] transition-all duration-300">
      <a href={href} target={target} rel={target === "_blank" ? "noopener noreferrer" : undefined} className="w-full">
        <div className="hcard-row" style={{
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    gap: '1rem'
  }}>
          <div className="hcard-icon" style={{
    flexShrink: 0,
    width: '40px',
    height: '40px'
  }}>
            {light && dark ? <>
                <img src={light} className="icon-light pointer-events-none" alt={title} width={40} height={40} style={{
    width: '40px',
    height: '40px',
    margin: 0
  }} />
                <img src={dark} className="icon-dark pointer-events-none" alt={title} width={40} height={40} style={{
    width: '40px',
    height: '40px',
    margin: 0
  }} />
              </> : <img src={icon} className="pointer-events-none" alt={title} width={40} height={40} style={{
    width: '40px',
    height: '40px',
    margin: 0
  }} />}
          </div>
          <div className="hcard-text" style={{
    display: 'flex',
    flexDirection: 'column',
    gap: '0.5rem'
  }}>
            <h2 className="card-title text font-semibold leading-none" style={{
    margin: 0
  }}>
              {title}
            </h2>
            <p className="card-description text-sm leading-none" style={{
    margin: 0
  }}>
              {description}
            </p>
          </div>
        </div>
      </a>
    </div>;
};

The `SparkReadonlyClient` provides read-only access to wallet data on the Spark network. Use it for dashboards, explorers, analytics, or any scenario where you need to query data without full wallet initialization.

Three ways to create a client:

| Factory                                                                   | Auth          | Use case                      |
| ------------------------------------------------------------------------- | ------------- | ----------------------------- |
| [`createPublic()`](/api-reference/readonly/create-public)                 | None          | Query public wallet data      |
| [`createWithMasterKey()`](/api-reference/readonly/create-with-master-key) | Identity key  | Query private wallets you own |
| [`createWithSigner()`](/api-reference/readonly/create-with-signer)        | Custom signer | Partner integrations          |

***

## Installation

<CodeGroup>
  ```bash npm theme={null}
  npm install @buildonspark/spark-sdk
  ```

  ```bash yarn theme={null}
  yarn add @buildonspark/spark-sdk
  ```

  ```bash pnpm theme={null}
  pnpm add @buildonspark/spark-sdk
  ```
</CodeGroup>

***

## Method Categories

<Columns cols={3} className="gap-4">
  <Card icon="https://mintcdn.com/lightspark/QeKlW2AmFua1qq8H/icons/icon-components-red.svg?fit=max&auto=format&n=QeKlW2AmFua1qq8H&q=85&s=3a8999fbce231882d5b624367d9ecff2" href="/api-reference/readonly/create-public" title="Initialization" description="Create a wallet viewer with public, master key, or signer auth" width="16" height="16" data-path="icons/icon-components-red.svg" />

  <Card icon="https://mintcdn.com/lightspark/QeKlW2AmFua1qq8H/icons/icon-coins-blue.svg?fit=max&auto=format&n=QeKlW2AmFua1qq8H&q=85&s=1e1d8a72c41968c2d56c8ea0e4b3652e" href="/api-reference/readonly/get-available-balance" title="Balances" description="Query Bitcoin and token balances for any Spark address" width="16" height="16" data-path="icons/icon-coins-blue.svg" />

  <Card icon="https://mintcdn.com/lightspark/QeKlW2AmFua1qq8H/icons/icon-arrows-greenbright.svg?fit=max&auto=format&n=QeKlW2AmFua1qq8H&q=85&s=03fc3541f924a3ce9d796c9581e133c0" href="/api-reference/readonly/get-transfers" title="Transfers" description="Query transfer history, pending transfers, and specific transfers" width="16" height="16" data-path="icons/icon-arrows-greenbright.svg" />

  <Card icon="https://mintcdn.com/lightspark/QeKlW2AmFua1qq8H/icons/icon-btc.svg?fit=max&auto=format&n=QeKlW2AmFua1qq8H&q=85&s=27e89c1041a9c88eba89bae069f88c65" href="/api-reference/readonly/get-unused-deposit-addresses" title="Deposits" description="Query deposit addresses and UTXOs" width="16" height="16" data-path="icons/icon-btc.svg" />

  <Card icon="https://mintcdn.com/lightspark/QeKlW2AmFua1qq8H/icons/icon-data-blue.svg?fit=max&auto=format&n=QeKlW2AmFua1qq8H&q=85&s=12057bd5b5ae40a41918cf6aca474299" href="/api-reference/readonly/get-spark-invoices" title="Invoices" description="Query Spark invoice statuses" width="16" height="16" data-path="icons/icon-data-blue.svg" />

  <Card icon="https://mintcdn.com/lightspark/QeKlW2AmFua1qq8H/icons/icon-coins-greenbright.svg?fit=max&auto=format&n=QeKlW2AmFua1qq8H&q=85&s=cdb73f14131c80233c85bd0b7f5473a9" href="/api-reference/readonly/get-token-transactions" title="Tokens" description="Query token transaction history with cursor pagination" width="16" height="16" data-path="icons/icon-coins-greenbright.svg" />
</Columns>
