Display a presale

Paste this into an HTML page and replace YOUR_VAULT_ADDRESS. It displays precommitted funds, deposits and dates, and refreshes every 15 seconds. No API key or SDK needed.

<div id="presale">Loading presale…</div>
<p id="presale-status"></p>

<script type="module">
  const vault = 'YOUR_VAULT_ADDRESS';
  const output = document.querySelector('#presale');
  const status = document.querySelector('#presale-status');

  // Format token amounts without losing precision.
  function tokens(atoms, decimals) {
    const digits = BigInt(atoms)
      .toString()
      .padStart(decimals + 1, '0');
    if (decimals === 0) return digits;
    const fraction = digits.slice(-decimals).replace(/0+$/, '');
    return digits.slice(0, -decimals) + (fraction ? '.' + fraction : '');
  }
  const date = (seconds) =>
    seconds == null ? 'Not scheduled' : new Date(seconds * 1000).toLocaleString();

  async function refresh() {
    try {
      const response = await fetch(
        `https://indexer.star.fun/api/vaults/${encodeURIComponent(vault)}/fundraise`,
        { cache: 'no-store' },
      );
      if (!response.ok) throw new Error('Could not load presale');
      const data = await response.json();
      output.replaceChildren(
        ...[
          `Phase: ${data.on_chain_phase}`,
          `Precommitted: ${tokens(data.amounts.precommit_locked, data.quote_decimals)}`,
          `Deposited: ${tokens(data.amounts.deposited, data.quote_decimals)}`,
          `Starts: ${date(data.start_time_seconds)}`,
          `Ends: ${date(data.end_time_seconds)}`,
        ].map((text) => {
          const line = document.createElement('p');
          line.textContent = text;
          return line;
        }),
      );
      status.textContent = data.freshness.status === 'healthy' ? '' : 'Updates delayed';
    } catch {
      status.textContent = 'Updates unavailable. Retrying…';
    } finally {
      setTimeout(refresh, 15_000);
    }
  }
  refresh();
</script>

Amounts are in the contribution token (quote_mint). Label them with that token’s symbol in your UI.

Fields you need

Field	Meaning
`amounts.precommit_locked`	Funds still held in precommit escrow
`amounts.deposited`	Deposits credited to the raise, including converted precommits, after fees
`quote_decimals`	Decimal places used to display amounts
`on_chain_phase`	`precommit_active` before the raise; `active` during fundraising
`start_time_seconds`, `end_time_seconds`	Unix seconds; `null` before the raise starts

Keep precommits and deposits separate. An active phase can remain after the end time; check the deadline before enabling deposits. To let users contribute, follow the presale SDK guide.

Optional: WebSocket updates

Connect to wss://indexer.star.fun/ws. It broadcasts all vaults automatically; there is no subscribe message. Match the network, program and vault from your initial snapshot:

async function fetchFundraise(vaultAddress: string) {
  const response = await fetch(
    `https://indexer.star.fun/api/vaults/${encodeURIComponent(vaultAddress)}/fundraise`,
    { cache: 'no-store' },
  );
  if (!response.ok) throw new Error(`Snapshot unavailable: ${response.status}`);
  return response.json();
}
let snapshot = await fetchFundraise(VAULT_ADDRESS);
const expected = snapshot;
const socket = new WebSocket('wss://indexer.star.fun/ws');
let refreshing = false;

async function refresh() {
  if (refreshing) return;
  refreshing = true;
  try {
    const next = await fetchFundraise(expected.vault_address);
    if (
      next.genesis_hash !== expected.genesis_hash ||
      next.program_id !== expected.program_id ||
      next.vault_address !== expected.vault_address
    )
      return;
    if (BigInt(next.revision) >= BigInt(snapshot.revision)) {
      snapshot = next; // Update your component's state here.
    }
  } catch {
    // Keep the last values and show that updates are unavailable.
  } finally {
    refreshing = false;
  }
}

socket.addEventListener('open', refresh);
socket.addEventListener('message', ({ data }) => {
  let event;
  try {
    event = JSON.parse(data);
  } catch {
    return;
  }
  if (
    event?.type === 'fundraise_snapshot_updated' &&
    event.schema_version === 1 &&
    event.genesis_hash === expected.genesis_hash &&
    event.program_id === expected.program_id &&
    event.vault_address === expected.vault_address
  )
    void refresh();
});
const timer = setInterval(refresh, 15_000);
// On unmount: clearInterval(timer); socket.close();

Notifications are refresh signals, not balances or transaction receipts. Keep polling, refresh after confirmed transactions, and reconnect with backoff. Debounce notifications and discard late responses when switching vaults.Snapshots reflect finalized state and can lag a confirmed transaction. Accept equal revisions: freshness can improve without a balance change. Show stale or unknown visibly and preserve the last values on errors. A 503 means the snapshot is unavailable, not zero; retry after the supplied Retry-After delay. Back off on 429 rate limits.

Start

Your token

Your raise

After the raise

Developers

Reference

About

Fields you need

​Fields you need

Fields you need