Trade Service Template App

A demonstration of the Okto Trade Service APIs. This template app showcases core Trade Service functionality—including fetching quotes, retrieving the best transaction routes, managing transaction steps, registering intents, and executing swaps—so you can quickly start building with Okto.

Customize Before Production

Note that this template is for development and testing purposes only. Be sure to customize and secure it before using in production.

Prerequisites

To access the Trade Service APIs, requests must be authenticated using an API key. Please contact the Okto team at [email protected] to request your Trade Service API credentials.
Okto's Trade Service only supports mainnets. For more information on the chains and tokens supported by the Trade Service, check Supported Chains and Tokens documentation.

Trade Service API Template Repository

Live Demo

View on GitHub

Getting Started

Follow the steps below to get your Okto Trade Service Template App running:

Clone the repository:

git clone https://github.com/okto-hq/okto-sdkv2-trade-service-template-app

Install dependencies:

cd okto-sdkv2-trade-service-template-app
npm install

Configure your environment:

To run locally, configure your Vite proxy for sandbox environment:

Update your vite.config.ts:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import tailwindcss from "@tailwindcss/vite";
import { nodePolyfills } from "vite-plugin-node-polyfills";
 
export default defineConfig(() => ({
  plugins: [react(), tailwindcss(), nodePolyfills()],
  server: {
    proxy: {
      "/trade-sandbox-api-proxy": {
        target: "https://sandbox-okto-trade-service-kong.okto.tech/",
        changeOrigin: true,
        secure: false,
        rewrite: (path) => path.replace(/^\/trade-sandbox-api-proxy/, "/v1"),
      },
    },
  },
}));

Update your src/api/client.ts:

  import axios from "axios";
 
  export const tradeServiceSandboxClient = axios.create({
    baseURL: "/trade-sandbox-api-proxy",
    timeout: 30000,
  });
 
  tradeServiceSandboxClient.interceptors.request.use((config) => {
    const storedSecret = localStorage.getItem("TRADE_SERVICE_SECRET");
 
    if (!storedSecret) {
      console.error("Trade Service secret is missing in localStorage!");
      throw new Error("Trade Service secret is missing. Please set it in the app before trading.");
    }
 
    config.headers["X-Api-Key"] = storedSecret;
    console.log("[TradeService] Using X-Api-Key from localStorage:", storedSecret);
    return config;
  });

Before Going Live

Note that you must whitelist your deployed URL with the Okto Trade Service API backend. To do so, contact [email protected] to complete this process.

When deploying your app using sandbox environment, add your trade service API key in .env file and then import in the src/api/const.ts file as follows:

// .env
VITE_TRADE_SERVICE_SANDBOX_API_KEY = <YOUR_TRADE_SERVICE_SANDBOX_API_KEY>
 
// src/api/const.ts
export const TRADE_SERVICE_SANDBOX_API_KEY = import.meta.env.VITE_TRADE_SERVICE_SANDBOX_API_KEY!;

Update your vite.config.ts:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import tailwindcss from "@tailwindcss/vite";
import { nodePolyfills } from "vite-plugin-node-polyfills";
 
export default defineConfig({
  plugins: [react(), tailwindcss(), nodePolyfills()],
});

Update your src/api/client.ts:

  import axios from "axios";
  import {
    TRADE_SERVICE_SANDBOX_API_KEY,
  } from "./consts";
 
  export const tradeServiceSandboxClient = axios.create({
    baseURL: "https://sandbox-okto-trade-service-kong.okto.tech/v1",
    timeout: 30000,
    headers: {
      "X-Api-Key": TRADE_SERVICE_SANDBOX_API_KEY,
    },
  });

Start the development server:

npm run dev

Trade Service Template App

Getting Started

On this page