HTML Sample MiniApp

Complete examples of building MiniApps with vanilla JavaScript/TypeScript and HTML.

Basic Price Monitor
Simple Trading Bot
Position Tracker
Complete Trading Interface

Basic Price Monitor

A simple MiniApp that displays real-time prices for multiple symbols.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Price Monitor</title>
  <style>
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      margin: 0;
      padding: 20px;
      background: #0a0a0a;
      color: #ffffff;
    }
    .container {
      max-width: 800px;
      margin: 0 auto;
    }
    .status {
      padding: 10px;
      background: #1a1a1a;
      border-radius: 8px;
      margin-bottom: 20px;
    }
    .status.connected {
      border-left: 4px solid #00ff88;
    }
    .price-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 15px;
    }
    .price-card {
      background: #1a1a1a;
      padding: 20px;
      border-radius: 12px;
      border: 1px solid #333;
    }
    .price-card .symbol {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 10px;
    }
    .price-card .price {
      font-size: 32px;
      color: #00ff88;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Price Monitor</h1>
    <div id="status" class="status">Connecting...</div>
    <div id="prices" class="price-grid"></div>
  </div>
  <script type="module" src="./app.js"></script>
</body>
</html>

JavaScript

// app.js
import { MiniAppSDK } from '@basedone/miniapp-sdk';

// Initialize SDK
const client = new MiniAppSDK({
  appId: 'price-monitor',
  debug: true,
  autoConnect: true
});

const statusEl = document.getElementById('status');
const pricesEl = document.getElementById('prices');
const symbols = ['ETH', 'BTC', 'SOL', 'AVAX'];

// Handle connection
client.on('connected', async ({ sessionId }) => {
  statusEl.textContent = `Connected (${sessionId})`;
  statusEl.classList.add('connected');

  // Request permissions
  await client.requestPermissions(['read_market_data']);

  // Subscribe to market data
  await client.subscribeToMarkets(symbols);
});

// Handle market data updates
client.on('market.bbo', (data) => {
  updatePrice(data.symbol, data.price);
});

function updatePrice(symbol, price) {
  let card = document.querySelector(`[data-symbol="${symbol}"]`);

  if (!card) {
    card = document.createElement('div');
    card.className = 'price-card';
    card.setAttribute('data-symbol', symbol);
    card.innerHTML = `
      <div class="symbol">${symbol}</div>
      <div class="price">$${price.toFixed(2)}</div>
    `;
    pricesEl.appendChild(card);
  } else {
    card.querySelector('.price').textContent = `$${price.toFixed(2)}`;
  }
}

Simple Trading Bot

A trading bot that places orders when certain conditions are met.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Trading Bot</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      font-family: monospace;
      background: #0a0a0a;
      color: #00ff88;
      padding: 20px;
    }
    .controls {
      background: #1a1a1a;
      padding: 20px;
      border-radius: 8px;
      margin-bottom: 20px;
    }
    .controls label {
      display: block;
      margin: 10px 0 5px;
    }
    .controls input {
      width: 100%;
      padding: 8px;
      background: #000;
      border: 1px solid #333;
      color: #00ff88;
      border-radius: 4px;
    }
    .controls button {
      margin-top: 15px;
      padding: 10px 20px;
      background: #00ff88;
      color: #000;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-weight: bold;
    }
    .controls button:disabled {
      background: #333;
      color: #666;
      cursor: not-allowed;
    }
    .log {
      background: #000;
      padding: 15px;
      border-radius: 8px;
      max-height: 400px;
      overflow-y: auto;
      font-size: 12px;
    }
    .log-entry {
      margin: 5px 0;
    }
    .log-entry.success { color: #00ff88; }
    .log-entry.error { color: #ff4444; }
  </style>
</head>
<body>
  <h1>Trading Bot</h1>

  <div class="controls">
    <label>Symbol:</label>
    <input type="text" id="symbol" value="ETH">

    <label>Buy Threshold Price:</label>
    <input type="number" id="threshold" value="2500">

    <label>Order Size:</label>
    <input type="number" id="size" value="0.01" step="0.01">

    <button id="startBtn">Start Bot</button>
    <button id="stopBtn" disabled>Stop Bot</button>
  </div>

  <h3>Activity Log</h3>
  <div id="log" class="log"></div>

  <script type="module" src="./bot.js"></script>
</body>
</html>

JavaScript

// bot.js
import { MiniAppSDK } from '@basedone/miniapp-sdk';

const client = new MiniAppSDK({
  appId: 'trading-bot',
  permissions: ['read_market_data', 'place_orders'],
  debug: true,
  autoConnect: true
});

let botRunning = false;
let currentPrice = 0;

const symbolInput = document.getElementById('symbol');
const thresholdInput = document.getElementById('threshold');
const sizeInput = document.getElementById('size');
const startBtn = document.getElementById('startBtn');
const stopBtn = document.getElementById('stopBtn');
const logEl = document.getElementById('log');

// Connection handling
client.on('connected', async ({ sessionId }) => {
  log(`Connected: ${sessionId}`, 'success');

  // Request permissions
  const granted = await client.requestPermissions([
    'read_market_data',
    'place_orders'
  ]);
  log(`Permissions granted: ${granted.join(', ')}`, 'success');
});

// Market data handler
client.on('market.bbo', (data) => {
  if (data.symbol === symbolInput.value) {
    currentPrice = data.price;
    checkConditions();
  }
});

// Start/stop bot
startBtn.addEventListener('click', startBot);
stopBtn.addEventListener('click', stopBot);

async function startBot() {
  botRunning = true;
  startBtn.disabled = true;
  stopBtn.disabled = false;

  const symbol = symbolInput.value;
  log(`Bot started for ${symbol}`, 'success');

  // Subscribe to market data
  await client.subscribeToMarkets([symbol]);
}

function stopBot() {
  botRunning = false;
  startBtn.disabled = false;
  stopBtn.disabled = true;
  log('Bot stopped', 'error');
}

async function checkConditions() {
  if (!botRunning) return;

  const threshold = parseFloat(thresholdInput.value);
  const size = parseFloat(sizeInput.value);

  if (currentPrice < threshold) {
    log(`Price ${currentPrice} below threshold ${threshold} - Placing order`, 'success');

    try {
      const response = await client.placeOrder({
        symbol: symbolInput.value,
        side: 'buy',
        orderType: 'market',
        size: size,
        tpsl: {
          tpPrice: threshold * 1.05,  // 5% profit target
          slPrice: threshold * 0.98   // 2% stop loss
        }
      });

      if (response.success) {
        log('Order placed successfully!', 'success');
        // Stop bot after order
        stopBot();
      }
    } catch (error) {
      log(`Order failed: ${error.message}`, 'error');
    }
  }
}

function log(message, type = '') {
  const entry = document.createElement('div');
  entry.className = `log-entry ${type}`;
  entry.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
  logEl.appendChild(entry);
  logEl.scrollTop = logEl.scrollHeight;
}

Position Tracker

Track and display current positions with PnL.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Position Tracker</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #0a0a0a;
      color: #fff;
      padding: 20px;
    }
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }
    .wallet-info {
      background: #1a1a1a;
      padding: 10px 20px;
      border-radius: 8px;
      font-size: 14px;
    }
    table {
      width: 100%;
      background: #1a1a1a;
      border-radius: 8px;
      overflow: hidden;
      border-collapse: collapse;
    }
    th, td {
      padding: 15px;
      text-align: left;
    }
    th {
      background: #000;
      font-weight: bold;
    }
    tr:nth-child(even) {
      background: #151515;
    }
    .positive { color: #00ff88; }
    .negative { color: #ff4444; }
    button {
      padding: 8px 16px;
      background: #00ff88;
      color: #000;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-weight: bold;
    }
    button:hover {
      background: #00dd77;
    }
  </style>
</head>
<body>
  <div class="header">
    <h1>Position Tracker</h1>
    <div class="wallet-info">
      <div>Wallet: <span id="walletAddress">Loading...</span></div>
    </div>
  </div>

  <button onclick="refreshPositions()">Refresh Positions</button>

  <table id="positionsTable">
    <thead>
      <tr>
        <th>Symbol</th>
        <th>Size</th>
        <th>Entry Price</th>
        <th>Current Price</th>
        <th>Unrealized PnL</th>
        <th>PnL %</th>
      </tr>
    </thead>
    <tbody id="positionsBody">
      <tr>
        <td colspan="6" style="text-align: center; padding: 40px;">
          Loading positions...
        </td>
      </tr>
    </tbody>
  </table>

  <script type="module" src="./positions.js"></script>
</body>
</html>

JavaScript

// positions.js
import { MiniAppSDK } from '@basedone/miniapp-sdk';

const client = new MiniAppSDK({
  appId: 'position-tracker',
  permissions: ['read_positions', 'read_market_data', 'read_balance'],
  debug: true,
  autoConnect: true
});

const walletAddressEl = document.getElementById('walletAddress');
const positionsBody = document.getElementById('positionsBody');

// Connection handling
client.on('connected', async () => {
  console.log('Connected to terminal');

  // Request permissions
  await client.requestPermissions([
    'read_positions',
    'read_market_data',
    'read_balance'
  ]);

  // Get wallet address
  try {
    const address = await client.getWalletAddress();
    walletAddressEl.textContent = `${address.slice(0, 6)}...${address.slice(-4)}`;
  } catch (error) {
    walletAddressEl.textContent = 'Not available';
  }

  // Load initial positions
  await refreshPositions();
});

// Listen for position updates
client.on('position.update', (position) => {
  console.log('Position updated:', position);
  refreshPositions();
});

// Refresh positions
window.refreshPositions = async function() {
  try {
    const response = await client.getPositions();

    if (response.success && response.data) {
      displayPositions(response.data.positions);
    }
  } catch (error) {
    console.error('Failed to fetch positions:', error);
  }
};

function displayPositions(positions) {
  if (positions.length === 0) {
    positionsBody.innerHTML = `
      <tr>
        <td colspan="6" style="text-align: center; padding: 40px;">
          No open positions
        </td>
      </tr>
    `;
    return;
  }

  positionsBody.innerHTML = positions.map(pos => {
    const pnl = pos.unrealizedPnl || 0;
    const pnlPercent = pos.unrealizedPnlPercent || 0;
    const pnlClass = pnl >= 0 ? 'positive' : 'negative';

    return `
      <tr>
        <td><strong>${pos.symbol}</strong></td>
        <td>${pos.size}</td>
        <td>$${pos.entryPrice.toFixed(2)}</td>
        <td>$${pos.markPrice.toFixed(2)}</td>
        <td class="${pnlClass}">$${pnl.toFixed(2)}</td>
        <td class="${pnlClass}">${pnlPercent >= 0 ? '+' : ''}${pnlPercent.toFixed(2)}%</td>
      </tr>
    `;
  }).join('');
}

Complete Trading Interface

A comprehensive trading interface with order placement, position tracking, and order history.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Trading Terminal</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      background: #0a0a0a;
      color: #fff;
      padding: 20px;
    }
    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      max-width: 1400px;
      margin: 0 auto;
    }
    .panel {
      background: #1a1a1a;
      border-radius: 12px;
      padding: 20px;
      border: 1px solid #333;
    }
    .panel h2 {
      margin-bottom: 15px;
      color: #00ff88;
    }
    .form-group {
      margin-bottom: 15px;
    }
    .form-group label {
      display: block;
      margin-bottom: 5px;
      color: #ccc;
    }
    .form-group input,
    .form-group select {
      width: 100%;
      padding: 10px;
      background: #000;
      border: 1px solid #333;
      border-radius: 4px;
      color: #fff;
    }
    .form-group input:focus,
    .form-group select:focus {
      outline: none;
      border-color: #00ff88;
    }
    .button-group {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    .button {
      padding: 12px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-weight: bold;
      font-size: 14px;
    }
    .button.buy {
      background: #00ff88;
      color: #000;
    }
    .button.sell {
      background: #ff4444;
      color: #fff;
    }
    .button:disabled {
      background: #333;
      color: #666;
      cursor: not-allowed;
    }
    .price-display {
      font-size: 36px;
      font-weight: bold;
      color: #00ff88;
      margin: 20px 0;
    }
    .orders-list {
      max-height: 400px;
      overflow-y: auto;
    }
    .order-item {
      background: #000;
      padding: 12px;
      margin: 8px 0;
      border-radius: 4px;
      border-left: 3px solid #00ff88;
    }
    .order-item.sell {
      border-left-color: #ff4444;
    }
  </style>
</head>
<body>
  <h1 style="text-align: center; margin-bottom: 30px;">Trading Terminal</h1>

  <div class="grid">
    <!-- Market Data Panel -->
    <div class="panel">
      <h2>Market Data</h2>
      <select id="symbolSelect" onchange="changeSymbol()">
        <option value="ETH">ETH</option>
        <option value="BTC">BTC</option>
        <option value="SOL">SOL</option>
      </select>
      <div class="price-display" id="price">--</div>
    </div>

    <!-- Order Form Panel -->
    <div class="panel">
      <h2>Place Order</h2>
      <div class="form-group">
        <label>Order Type</label>
        <select id="orderType">
          <option value="market">Market</option>
          <option value="limit">Limit</option>
        </select>
      </div>
      <div class="form-group">
        <label>Size</label>
        <input type="number" id="orderSize" value="0.1" step="0.01">
      </div>
      <div class="form-group" id="priceGroup" style="display: none;">
        <label>Limit Price</label>
        <input type="number" id="limitPrice" step="0.01">
      </div>
      <div class="button-group">
        <button class="button buy" onclick="placeOrder('buy')">Buy</button>
        <button class="button sell" onclick="placeOrder('sell')">Sell</button>
      </div>
    </div>

    <!-- Open Orders Panel -->
    <div class="panel">
      <h2>Open Orders</h2>
      <button class="button buy" onclick="refreshOrders()" style="width: 100%; margin-bottom: 15px;">
        Refresh
      </button>
      <div class="orders-list" id="ordersList">
        <div style="text-align: center; padding: 40px; color: #666;">
          No open orders
        </div>
      </div>
    </div>

    <!-- Positions Panel -->
    <div class="panel">
      <h2>Positions</h2>
      <button class="button buy" onclick="refreshPositions()" style="width: 100%; margin-bottom: 15px;">
        Refresh
      </button>
      <div class="orders-list" id="positionsList">
        <div style="text-align: center; padding: 40px; color: #666;">
          No open positions
        </div>
      </div>
    </div>
  </div>

  <script type="module" src="./terminal.js"></script>
</body>
</html>

JavaScript

// terminal.js
import { MiniAppSDK } from '@basedone/miniapp-sdk';

const client = new MiniAppSDK({
  appId: 'trading-terminal',
  permissions: [
    'read_market_data',
    'place_orders',
    'cancel_orders',
    'read_orders',
    'read_positions'
  ],
  debug: true,
  autoConnect: true
});

let currentSymbol = 'ETH';
let currentPrice = 0;

// DOM elements
const priceEl = document.getElementById('price');
const symbolSelect = document.getElementById('symbolSelect');
const orderType = document.getElementById('orderType');
const orderSize = document.getElementById('orderSize');
const limitPrice = document.getElementById('limitPrice');
const priceGroup = document.getElementById('priceGroup');
const ordersListEl = document.getElementById('ordersList');
const positionsListEl = document.getElementById('positionsList');

// Initialize
client.on('connected', async () => {
  console.log('Connected to terminal');

  // Request all needed permissions
  await client.requestPermissions([
    'read_market_data',
    'place_orders',
    'cancel_orders',
    'read_orders',
    'read_positions'
  ]);

  // Subscribe to initial symbol
  await client.subscribeToMarkets([currentSymbol]);

  // Load initial data
  await refreshOrders();
  await refreshPositions();
});

// Market data updates
client.on('market.bbo', (data) => {
  if (data.symbol === currentSymbol) {
    currentPrice = data.price;
    priceEl.textContent = `$${data.price.toFixed(2)}`;
  }
});

// Order type change handler
orderType.addEventListener('change', (e) => {
  priceGroup.style.display = e.target.value === 'limit' ? 'block' : 'none';
});

// Change symbol
window.changeSymbol = async function() {
  currentSymbol = symbolSelect.value;
  await client.subscribeToMarkets([currentSymbol]);
};

// Place order
window.placeOrder = async function(side) {
  const size = parseFloat(orderSize.value);
  const type = orderType.value;

  if (!size || size <= 0) {
    alert('Please enter a valid size');
    return;
  }

  const orderData = {
    symbol: currentSymbol,
    side: side,
    orderType: type,
    size: size
  };

  if (type === 'limit') {
    const price = parseFloat(limitPrice.value);
    if (!price || price <= 0) {
      alert('Please enter a valid limit price');
      return;
    }
    orderData.price = price;
  }

  try {
    const response = await client.placeOrder(orderData);

    if (response.success) {
      alert('Order placed successfully!');
      await refreshOrders();
    }
  } catch (error) {
    alert(`Order failed: ${error.message}`);
  }
};

// Refresh orders
window.refreshOrders = async function() {
  try {
    const response = await client.getOrders(undefined, 'open');

    if (response.success && response.data) {
      displayOrders(response.data.orders);
    }
  } catch (error) {
    console.error('Failed to fetch orders:', error);
  }
};

// Refresh positions
window.refreshPositions = async function() {
  try {
    const response = await client.getPositions();

    if (response.success && response.data) {
      displayPositions(response.data.positions);
    }
  } catch (error) {
    console.error('Failed to fetch positions:', error);
  }
};

// Display orders
function displayOrders(orders) {
  if (orders.length === 0) {
    ordersListEl.innerHTML = `
      <div style="text-align: center; padding: 40px; color: #666;">
        No open orders
      </div>
    `;
    return;
  }

  ordersListEl.innerHTML = orders.map(order => `
    <div class="order-item ${order.side}">
      <div style="display: flex; justify-content: space-between;">
        <strong>${order.symbol}</strong>
        <span>${order.side.toUpperCase()}</span>
      </div>
      <div>Size: ${order.size} @ ${order.price ? `$${order.price}` : 'Market'}</div>
      <div style="margin-top: 8px;">
        <button class="button sell" onclick="cancelOrder('${order.orderId}', '${order.symbol}')"
                style="padding: 6px 12px; font-size: 12px;">
          Cancel
        </button>
      </div>
    </div>
  `).join('');
}

// Display positions
function displayPositions(positions) {
  if (positions.length === 0) {
    positionsListEl.innerHTML = `
      <div style="text-align: center; padding: 40px; color: #666;">
        No open positions
      </div>
    `;
    return;
  }

  positionsListEl.innerHTML = positions.map(pos => {
    const pnl = pos.unrealizedPnl || 0;
    const pnlColor = pnl >= 0 ? '#00ff88' : '#ff4444';

    return `
      <div class="order-item">
        <div style="display: flex; justify-content: space-between;">
          <strong>${pos.symbol}</strong>
          <span>Size: ${pos.size}</span>
        </div>
        <div>Entry: $${pos.entryPrice.toFixed(2)}</div>
        <div style="color: ${pnlColor}; font-weight: bold; margin-top: 8px;">
          PnL: $${pnl.toFixed(2)}
        </div>
      </div>
    `;
  }).join('');
}

// Cancel order
window.cancelOrder = async function(orderId, symbol) {
  try {
    await client.cancelOrder(orderId, symbol);
    alert('Order cancelled');
    await refreshOrders();
  } catch (error) {
    alert(`Cancel failed: ${error.message}`);
  }
};

Next: Sample React

PreviousSample Apps NextReact Sample MiniApp

Last updated 8 days ago

Table of Contents

Basic Price Monitor

HTML

JavaScript

Simple Trading Bot

HTML

JavaScript

Position Tracker

HTML

JavaScript

Complete Trading Interface

HTML

JavaScript