Example App

The example/ directory in the monorepo is a full Next.js app that demonstrates every SDK operation in a real UI. Every SDK call renders a collapsible code panel showing the exact method invoked, its arguments, duration, and success/error status.

Source: github.com/Kaushik2003/taurusSwap/tree/main/example

What It Covers

Tab / Component	SDK calls demonstrated
Swap	`client.quote()`, `client.buildSwapTxns()`
Liquidity	`client.tickParamsFromDepegPrice()`, `client.getCapitalEfficiency()`, `client.buildAddLiquidityTxns()`
Positions	`client.getPosition()`, `client.estimateRemoval()`, `client.buildRemoveLiquidityTxns()`, `client.buildClaimFeesTxns()`
Pool Explorer	`client.getPoolState()`, `client.getAllPrices()`
SDK Log	Live log of every SDK call with method, duration, and status

Running Locally

git clone https://github.com/Kaushik2003/taurusSwap.git
cd taurusSwap/example
npm install
npm run dev

The app connects to Algorand Testnet (pool app ID 758284478). You need testnet ALGO and the five testnet stablecoin ASAs to execute transactions. Get testnet ALGO from the Algorand Testnet Dispenser.

Core Pattern

All SDK state lives in hooks/useTaurus.ts. It creates one TaurusClient, polls pool state every 15 seconds, and exposes typed execute functions to each UI component.

import { TaurusClient } from '@taurusswap/sdk';

const client = new TaurusClient({ poolAppId: 758284478 });

// Pool state polled every 15s
const pool = await client.getPoolState();

// Quote (uses cached pool state)
const quote = await client.quote({ fromIndex: 0, toIndex: 1, amountIn: 10_000_000n });

// Build → sign → submit
const txns       = await client.buildSwapTxns({ sender, fromIndex: 0, toIndex: 1, amountIn: 10_000_000n });
const signedTxns = await pera.signTransaction([txns.map(t => ({ txn: t }))]);
const { txid }   = await client.algod.sendRawTransaction(signedTxns).do();
await algosdk.waitForConfirmation(client.algod, txid, 4);

Project Structure

example/
├── app/
│   ├── layout.tsx          # Root layout, fonts, metadata
│   └── page.tsx            # Main dashboard — tabs + positions panel
├── components/
│   ├── Header.tsx          # Wallet connection (Pera / Defly), token balances
│   ├── SwapCard.tsx        # Swap UI — quote, slippage, SDK call panel
│   ├── LiquidityCard.tsx   # Add liquidity — depeg slider, efficiency calc
│   ├── PoolExplorer.tsx    # TVL, reserves, tick table, curve visualisation
│   ├── PositionsList.tsx   # LP positions, remove liquidity, claim fees
│   ├── SdkActivityLog.tsx  # Real-time log of all SDK calls
│   └── SdkCallPanel.tsx    # Collapsible code + duration + status panel
└── hooks/
    └── useTaurus.ts        # TaurusClient, wallet state, all execute functions

SDK Call Panel

Each UI action renders a SdkCallPanel — a collapsible block that shows the exact SDK code being run, with a syntax-highlighted preview, the call duration in milliseconds, and a colour-coded status badge (idle / loading / success / error). This makes the example useful as a learning tool: you can see exactly what the SDK does for every interaction.

Wallet Support

Pera Wallet — via @perawallet/connect
Defly Wallet — via @blockshake/defly-connect

The wallet session is persisted in localStorage so users stay connected across page reloads.

← API Reference Frontend Overview →