DEV Community: Julian Martinez

Building a multi-agent Kalshi algotrader with Sentient Foundation's ROMA SDK

Julian Martinez — Thu, 26 Feb 2026 06:56:33 +0000

I spent a weekend building a paper trading system for Kalshi's 15-minute BTC binary prediction markets. The hook was Sentient Foundation's roma-dspy Python package — their ROMA (Recursive Open Meta-Agent) framework — which I wanted to actually use for something real-ish rather than run the hello-world example and close the tab.

This post is about what that looks like in practice: the architecture, the places ROMA genuinely helped, the places it caused problems, and how the whole thing actually behaved.

🔗 Code: github.com/Julian-dev28/sentient-market-reader

What KXBTC15M is

Kalshi runs a market called KXBTC15M. Every 15 minutes a new binary contract opens: will BTC's price be higher at the end of this window than it was at the start? You bet YES or NO in cents (0–99¢), which maps directly to the market's implied probability. A 38¢ YES ask means the crowd thinks there's roughly a 38% chance BTC ends the window above the strike.

The ticker format is KXBTC15M-{YY}{MON}{DD}{HHMM}-{NN} in US Eastern Time. The floor_strike field on the market object is the BTC price to beat, set when the window opens. These markets are only live during certain hours — worth knowing before you try to test against a live environment.

Architecture overview

Two processes, one purpose:

Next.js 16 (port 3000)          Python FastAPI (port 8001)
─────────────────────           ──────────────────────────
API routes (proxy)              /analyze  → roma-dspy solve()
6-agent TypeScript pipeline  ←→ /reset   → circuit breaker reset
useMarketTick (2s poll)         /health
usePipeline  (5m cycle)

The Next.js app owns the UI, the Kalshi API calls, the price feed, and the orchestration. The Python service does exactly one thing: accept a goal + context string, run it through Sentient's roma-dspy solve(), and return the result as JSON.

The service supports four LLM providers out of the box: Grok, Anthropic, OpenAI, and OpenRouter. OpenRouter is worth highlighting — it gives you access to any model through a single API key and pay-per-use pricing, which is useful when you're hitting per-provider rate limits (more on that shortly).

The pipeline DAG

Six agents, run in sequence:

MarketDiscovery ──┐
PriceFeed ─────────┼──► SentimentAgent (ROMA) ──► ProbabilityModel (ROMA) ──► RiskManager ──► Execution
Orderbook ─────────┘

// lib/agents/index.ts — abbreviated
export async function runAgentPipeline(...): Promise<PipelineState> {
  const mdResult   = await runMarketDiscovery(markets)         // rule-based
  const pfResult   = runPriceFeed(quote, strike)               // rule-based

  const sentResult = await runSentiment(...)                   // ROMA

  await new Promise(r => setTimeout(r, 8_000))  // rate-limit breathing room

  const probResult = await runProbabilityModel(...)            // ROMA

  const riskResult = runRiskManager(...)                       // rule-based
  const execResult = runExecution(...)                         // rule-based
}

The design decision I'm most confident about: only the two judgment agents use ROMA. MarketDiscovery, PriceFeed, RiskManager, and Execution are all deterministic. Putting LLM reasoning in the risk manager felt like a bad idea — you want that layer to be predictable, auditable, and fast.

How the Python ROMA service works

# python-service/main.py
from roma_dspy.core.engine.solve import solve, ROMAConfig

@app.post("/analyze")
def analyze(req: AnalyzeRequest):
    config = build_roma_config(_llm_config)
    result = solve(full_prompt, max_depth=req.max_depth, config=config)
    ...

That's the whole thing. solve() runs the Atomizer → Planner → parallel Executors → Aggregator flow internally — the core of what Sentient Foundation built with ROMA. At max_depth=1 it tends to solve atomically — one LLM call, no decomposition — which is what I want here. Decomposing "assess BTC sentiment" into parallel calls on a rate-limited key was the source of most of my problems.

The /reset endpoint exists for a specific reason: ROMA has internal circuit breakers. If enough LLM calls fail (429s, timeouts), the breaker opens and every subsequent call fails immediately. That's sensible in a long-running service, but frustrating when you've fixed the underlying issue and the service is stuck refusing all requests until restart. The TypeScript client detects the error message and auto-resets before retrying:

if (text.includes('Circuit breaker is open')) {
  await resetCircuitBreakers()  // POST /reset, best-effort
}

Both agents have rule-based fallbacks. The UI shows which path ran — SentimentAgent (roma-dspy · grok) vs SentimentAgent (rule-based · roma-dspy unavailable). The pipeline keeps running either way.

The rate-limit problem

ROMA's Planner decomposes a goal into N parallel executor tasks and fires them concurrently. At max_depth=2, a single /analyze call can generate 4–6 simultaneous LLM requests. Two ROMA agents per cycle means 10–12 LLM calls within a few seconds. With a rate-limited API key that reliably produces a 429 cascade, which trips the circuit breaker, which makes the second agent fail before it even tries.

Two fixes: max_depth=1 (atomic solve, one LLM call instead of six) and an 8-second pause between the two agents in the orchestrator. Neither is elegant. Both work.

If you're running this seriously, OpenRouter is the move here. Set AI_PROVIDER=openrouter and you can route to Claude, Grok, Gemini, or any other model through one key with generous shared rate limits — much better than hammering a single provider's per-minute cap with parallel executor calls.

What the two ROMA agents actually do

SentimentAgent receives live BTC price, 1h/24h changes, strike distance, minutes until close, and top-5 orderbook levels on each side. ROMA returns natural language reasoning. A separate structured extraction call pulls out { score, label, momentum, orderbookSkew, signals }.

ProbabilityModelAgent receives the sentiment score and signals, plus the market-implied probability (yes_ask / 100). It asks ROMA to estimate true P(YES) and whether the model edge justifies a trade.

A real output from a working cycle:

SentimentAgent: neutral (0.01)
  — strong 24h momentum offset by bearish orderbook skew

ProbabilityModelAgent: P(model)=32% vs P(market)=31%, edge +1%
  → NO_TRADE — edge below 3% threshold

RiskManager: REJECTED — edge 1.0% below minimum (3%)

That's the system working correctly. Thin edge, no trade. Right call.

Limitations, honestly

It's paper trading by default. Live mode exists behind a confirmation modal, but I haven't run enough live cycles to have any opinion on whether the edge estimates are real.

KXBTC15M markets are illiquid most of the time. Outside certain hours there's often no active market. The pipeline handles this gracefully but it limits how much live testing you can actually do.

The 3% minimum edge is conservative by design. Given that the probability estimates come from an LLM reasoning over 1h/24h momentum and orderbook depth — not a trained model — that conservatism seems right.

What I actually think about using ROMA here

ROMA externalizes the "how do I break this problem down" question from application code. I write a goal; the framework decides whether to decompose it. For a focused single-topic analysis, that decomposition turns out to be unnecessary — atomic solve works fine. Where it could be genuinely valuable is for broader goals that benefit from parallel investigation across multiple dimensions simultaneously.

The pattern I'd take from this into other projects: accept that ROMA returns natural language, and put a thin structured extraction layer at the boundary to get typed outputs. Keeps the two concerns separate. Works well.

Full code at github.com/Julian-dev28/sentient-market-reader. If you're curious about the Kalshi auth (RSA-PSS signed headers), the circuit breaker handling, or the TS/Python boundary — drop a reply.

Introducing Auto Slippage: Making The OKX DEX API Smarter

Julian Martinez — Tue, 07 Jan 2025 03:17:14 +0000

Months into the bull market have brought with it new highs in prices but also in trading volume. Millions of trades are happening daily on DEXs, and if you're building trading interfaces or DEX aggregators, you're probably dealing with a flood of support tickets regarding transactions.

The Problem

Whether you're an established DEX or building a new trading interface, you've likely tried:

The tradeoff between safe, default product settings and missed trading opportunities
Traders struggling to understand and adjust slippage settings
Time spent fine-tuning parameters as market conditions change

Let's solve this properly.

A Better Way

We've added automatic slippage calculation to our DEX API. By analyzing real-time market data, the API calculates optimal slippage values within your platform's preferred parameters.

Parameters

autoSlippage (Boolean)
- Enables automatic slippage calculation
- Default: false
- When true, API calculates optimal slippage based on current market data
slippage (String)
- The standard slippage parameter
- Used as fallback when autoSlippage is disabled
- Example: "0.1"
maxAutoSlippageBps (String)
- Sets the upper limit for automatic slippage calculations
- Only applies when autoSlippage is true
- Recommended for risk management
- Example: "150" (1.5%)

Example Integration

Here's a code snippet of a swap data request for from ETH to USDT with automatic slippage:

const params = {
    // Chain and token parameters
    chainId: '1',                // Ethereum mainnet
    amount: '10000000000000000000', // 10 ETH
    fromTokenAddress: '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE', // Native ETH
    toTokenAddress: '0xdAC17F958D2ee523a2206206994597C13D831ec7', // USDT
      userWalletAddress: "0x9163756d2a83a334de2cc0c3aa1df9a5fc21369d",
    // Slippage settings
    slippage: '0.1',            // Default slippage
    autoSlippage: true,         // Enable dynamic optimization
    maxAutoSlippageBps: "150"   // Maximum allowed slippage (1.5%)
};

See our API documentation for the complete list of parameters.

The API returns:

{
...
  "slippage": "0.005",
}

What This Means For Your Product

Give your traders the confidence of dynamic slippage optimization, backed by real-time market data
Focus on building features that matter while the API handles complex slippage calculations
Users may still set slippage limit with maxAutoSlippageBps
Simplify your trading interface without sacrificing sophistication

Try It Yourself

Prerequisites

Node v20.17.0 or higher
git
a Web3 wallet (e.g., OKX Wallet Extension) for API key generation

Setup

Clone the repository:

git clone https://github.com/okx/dex-api-library.git
cd dex-api-library

Install dependencies:

npm install

Obtain your project ID, API key, secret key, and passphrase from the OKX Developer Portal
Create .env file:

OKX_PROJECT_ID=YOUR_PROJECT_ID
OKX_API_KEY=YOUR_API_KEY
OKX_SECRET_KEY=YOUR_API_SECRET_KEY
OKX_API_PASSPHRASE=YOUR_API_PASSPHRASE

Run the example:

npm run swap-data:solana

You should see the auto-calculated slippage value along with the quote details!

Looking Forward

Check the docs for full implementation details and hit us up @OKXDevs if you have any questions.

Found this helpful? Don't forget to check out the boilerplate code and documentation linked above. Building something interesting with this? We'd love to hear about it. Join the OKX OS Community to connect with other developers, and follow Julian on Twitter for more developer content!

This content is provided for informational purposes only and may cover products that are not available in your region. It represents the views of the author(s) and it does not represent the views of OKX. It is not intended to provide (i) investment advice or an investment recommendation; (ii) an offer or solicitation to buy, sell, or hold digital assets, or (iii) financial, accounting, legal, or tax advice. Digital asset holdings, including stablecoins and NFTs, involve a high degree of risk and can fluctuate greatly. You should carefully consider whether trading or holding digital assets is suitable for you in light of your financial condition. Please consult your legal/tax/investment professional for questions about your specific circumstances. Information (including market data and statistical information, if any) appearing in this post is for general information purposes only. While all reasonable care has been taken in preparing this data and graphs, no responsibility or liability is accepted for any errors of fact or omission expressed herein. Both OKX Web3 Wallet and OKX NFT Marketplace are subject to separate terms of service at www.okx.com.

© 2025 OKX. This article may be reproduced or distributed in its entirety, or excerpts of 100 words or less of this article may be used, provided such use is non-commercial. Any reproduction or distribution of the entire article must also prominently state: “This article is © 2025 OKX and is used with permission.” Permitted excerpts must cite to the name of the article and include attribution, for example “Integrate the OKX DEX Widget in Just 30 Minutes, Julian Martinez, © 2025 OKX.” No derivative works or other uses of this article are permitted.

OKX DEX API Guide: Building a Solana Token Swap Interface

Julian Martinez — Mon, 09 Dec 2024 01:38:13 +0000

Ready to integrate DEX aggregation into your Solana DApp? This tutorial shows you how to interact with the OKX DEX API to perform token swaps on the Solana blockchain. Your implementation will use Web3.js and the OKX DEX API to create robust handling of quotes and swap execution. By default, this implementation demonstrates:

Single-chain swaps: SOL to USDC on Solana
Cross-chain capabilities: SOL to MATIC (Polygon)

DEX API Utility File Overview

This tutorial focuses on implementing dexUtils.js, a utility file that contains all the necessary functions for interacting with the OKX DEX API on Solana. This file handles:

Network and token configurations
Header construction
API endpoint and call construction
Quote retrieval
Single-chain swaps
Cross-chain quotes

Prerequisites

Before beginning, you need:

Node.js installed (v16 or later)
Basic knowledge of Solana development
A Solana wallet address and private key
OKX API credentials (API Key, Secret Key, and Passphrase) from the OKX Developer Portal
A Project ID from the OKX Developer Portal
Git installed on your machine
RPC API credentials (API Key, dedicated Solana endpoint) from a node provider like like Quicknode

Setup

You have two options to get started:

Option 1: Local Development

Clone the repository and switch to the Solana branch:

git clone https://github.com/Julian-dev28/okx-os-evm-swap-app.git
cd okx-os-evm-swap-app
git checkout solana-cross-chain-swap

Install the dependencies:

npm install

Set up your environment variables:

REACT_APP_API_KEY=your_api_key
REACT_APP_SECRET_KEY=your_secret_key
REACT_APP_API_PASSPHRASE=your_passphrase
REACT_APP_PROJECT_ID=your_project_id
REACT_APP_USER_ADDRESS=your_wallet_address
REACT_APP_PRIVATE_KEY=your_private_key

Option 2: Using Replit

Fork the Replit project:
OKX Solana Swap App
Add your environment variables in the Replit Secrets tab (located in the Tools panel):
- Click on "Secrets"
- Add each environment variable listed above
Click "Run" to start your development environment

Initial Configuration

Let's set up our configuration for interacting with Solana:

import { Connection } from "@solana/web3.js";
import base58 from "bs58";
import cryptoJS from "crypto-js";

// Constants for tokens and chain
export const NATIVE_SOL = "11111111111111111111111111111111";
export const WRAPPED_SOL = "So11111111111111111111111111111111111111112";
export const USDC_SOL = "EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v";
export const SOLANA_CHAIN_ID = "501";

// Initialize Solana connection
export const connection = new Connection("https://mainnet.helius-rpc.com/?api-key=<API_KEY>", {
    confirmTransactionInitialTimeout: 5000,
    wsEndpoint: "wss://mainnet.helius-rpc.com/?api-key=<API_KEY>",
});

// Environment variables for API authentication
const apiKey = process.env.REACT_APP_API_KEY;
const secretKey = process.env.REACT_APP_SECRET_KEY;
const apiPassphrase = process.env.REACT_APP_API_PASSPHRASE;
const projectId = process.env.REACT_APP_PROJECT_ID;

// Base URL for API requests
const apiBaseUrl = "https://www.okx.com/api/v5/dex";

Getting Swap Quotes

Before executing a swap, we need to get a quote. Here's how to implement the quote functionality:

/**
 * Gets swap data and optimal route from the OKX DEX API
 * Note: Requires API credentials from OKX Developer Portal
 * 
 * @param {Object} params 
 * @param {string} params.chainId - "501" for Solana
 * @param {string} params.amount - Amount in lamports (1 SOL = 1e9 lamports)
 * @param {string} params.fromTokenAddress - Source token (e.g., NATIVE_SOL)
 * @param {string} params.toTokenAddress - Destination token (e.g., USDC_SOL)
 * @param {string} params.slippage - Slippage tolerance ("0.5" for 0.5%)
 * @param {string} params.userWalletAddress - Solana wallet address
 * @returns {Promise<Object>} Contains routerResult.toTokenAmount and transaction data
 */
export async function getSingleChainSwap(params) {
    if (!apiKey || !secretKey || !apiPassphrase || !projectId) {
        throw new Error("Missing API credentials");
    }

    const timestamp = new Date().toISOString();
    const requestPath = "/api/v5/dex/aggregator/swap";
    const queryString = "?" + new URLSearchParams(params).toString();
    const headers = getHeaders(timestamp, "GET", requestPath, queryString);

    console.log("Requesting swap quote with params:", params);

    const response = await fetch(
        `https://www.okx.com${requestPath}${queryString}`,
        { method: "GET", headers }
    );

    const data = await response.json();
    if (data.code !== "0") {
        throw new Error(`API Error: ${data.msg}`);
    }

    if (!data.data?.[0]?.routerResult?.toTokenAmount) {
        throw new Error("Invalid or missing output amount");
    }

    return data.data[0];
}

Executing Transactions

Here's the implementation for executing swap transactions on Solana:

/**
 * Executes a Solana transaction with retry logic and compute budget
 * @param {Object} txData - Transaction data from the API
 * @returns {Promise<Object>} Transaction result with explorer URL
 */
export async function executeTransaction(txData) {
    if (!userPrivateKey) {
        throw new Error("Private key not found");
    }

    try {
        // Get recent blockhash for transaction validity
        const recentBlockHash = await connection.getLatestBlockhash();
        const decodedTransaction = base58.decode(txData.data);

        // Create transaction object
        const tx = solanaWeb3.Transaction.from(decodedTransaction);
        tx.recentBlockhash = recentBlockHash.blockhash;

        // Create and add keypair for signing
        const feePayer = solanaWeb3.Keypair.fromSecretKey(
            base58.decode(userPrivateKey)
        );
        tx.partialSign(feePayer);

        // Send transaction with retry options
        const txId = await connection.sendRawTransaction(tx.serialize(), {
            skipPreflight: false,
            maxRetries: 5
        });

        // Wait for confirmation
        const confirmation = await connection.confirmTransaction({
            signature: txId,
            blockhash: recentBlockHash.blockhash,
            lastValidBlockHeight: recentBlockHash.lastValidBlockHeight
        }, 'confirmed');

        return {
            success: true,
            transactionId: txId,
            explorerUrl: `https://solscan.io/tx/${txId}`,
            confirmation
        };
    } catch (error) {
        console.error("Transaction failed:", error);
        throw error;
    }
}

React Component Implementation

The SolanaSwapTransaction component demonstrates how to implement the DEX API calls in a React interface:

/**
 * React component for Solana token swaps using OKX DEX API
 * Requires environment variables for API keys and wallet info
 * Handles SOL -> wSOL and SOL -> USDC swaps
 */
const SolanaSwapTransaction = () => {
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState(null);
    const [result, setResult] = useState(null);
    const [amount, setAmount] = useState("");
    const [toToken, setToToken] = useState(WRAPPED_SOL);

    /**
     * Converts SOL amount to lamports (1 SOL = 1e9 lamports)
     * Throws error if amount is invalid or <= 0
     */
    const convertToLamports = useCallback((solAmount) => {
        try {
            if (!solAmount || isNaN(solAmount)) throw new Error("Invalid amount");
            const sol = parseFloat(solAmount);
            if (sol <= 0) throw new Error("Amount must be greater than 0");
            return new BN(sol * 1e9).toString();
        } catch (err) {
            console.error("Amount conversion error:", err);
            throw new Error("Invalid amount format");
        }
    }, []);

    /**
     * Main swap function:
     * 1. Converts input SOL to lamports
     * 2. Gets swap route and data from API
     * 3. Executes the swap transaction
     * 4. Updates UI with result and Solscan link
     */
    const handleSwap = async () => {
        try {
            setLoading(true);
            setError(null);

            if (!userPrivateKey) throw new Error("Private key not found");
            const lamports = convertToLamports(amount);

            const swapData = await getSingleChainSwap({
                chainId: SOLANA_CHAIN_ID,
                amount: lamports,
                fromTokenAddress: NATIVE_SOL,
                toTokenAddress: toToken,
                slippage: "0.5",
                userWalletAddress: userAddress,
            });

            const swapResult = await executeSingleChainTransaction(swapData);

            setResult({
                inputAmount: amount,
                outputAmount: (parseFloat(swapData.routerResult.toTokenAmount) / 1e9).toFixed(6),
                txHash: swapResult.transactionId,
                explorerUrl: swapResult.explorerUrl,
                confirmation: swapResult.confirmation,
            });
        } catch (error) {
            console.error("Swap failed:", error);
            setError(error.message);
        } finally {
            setLoading(false);
        }
    };

    // UI Rendering
    return (
        <div className="swap-container">
            <h2>Solana Token Swap</h2>

            {/* SOL Input */}
            <div className="input-container">
                <label>From (SOL):</label>
                <input
                    type="number"
                    value={amount}
                    onChange={e => {
                        setAmount(e.target.value);
                        setError(null);
                    }}
                    placeholder="Enter amount in SOL"
                    step="0.000000001"
                    min="0"
                    className="swap-input"
                />
            </div>

            {/* Target Token Selection */}
            <div className="input-container">
                <label>To Token:</label>
                <select 
                    value={toToken} 
                    onChange={e => {
                        setToToken(e.target.value);
                        setError(null);
                    }}
                >
                    <option value={WRAPPED_SOL}>Wrapped SOL</option>
                    <option value={USDC_SOL}>USDC</option>
                </select>
            </div>

            {/* Status Display */}
            {loading ? (
                <p>Processing swap...</p>
            ) : error ? (
                <p className="error-message">Error: {error}</p>
            ) : (
                <>
                    <button onClick={handleSwap} disabled={!amount || loading}>
                        Swap
                    </button>

                    {/* Transaction Result */}
                    {result && (
                        <div className="swap-result">
                            <h3>Swap Result</h3>
                            <div className="result-details">
                                <p>Input: {result.inputAmount} SOL</p>
                                <p>Output: {result.outputAmount} {toToken === WRAPPED_SOL ? "wSOL" : "USDC"}</p>
                                <p>Transaction ID: {result.txHash}</p>
                                <a href={result.explorerUrl} target="_blank" rel="noopener noreferrer">
                                    View on Solscan
                                </a>
                            </div>
                        </div>
                    )}
                </>
            )}
        </div>
    );
};

export default SolanaSwapTransaction;

Additional Resources

Found this helpful? Don't forget to check out the boilerplate code and documentation linked above. Join the OKX OS Community to connect with other developers, and follow Julian on Twitter for more Solana development content!

© 2024 OKX. This article may be reproduced or distributed in its entirety, or excerpts of 100 words or less of this article may be used, provided such use is non-commercial. Any reproduction or distribution of the entire article must also prominently state: “This article is © 2024 OKX and is used with permission.” Permitted excerpts must cite to the name of the article and include attribution, for example “Integrate the OKX DEX Widget in Just 30 Minutes, Julian Martinez, © 2024 OKX.” No derivative works or other uses of this article are permitted.

OKX DEX API Essentials: Single and Cross-Chain Swaps on Avalanche C-Chain

Julian Martinez — Tue, 26 Nov 2024 22:32:33 +0000

Ready to integrate DEX aggregation and cross-chain swaps into your EVM DApp? This tutorial shows you how to interact with the OKX DEX API to perform token swaps both within a single chain and across different blockchains from the Avalanche C-Chain. Your implementation will use Web3.js and the OKX DEX API to create robust handling of quotes, approvals, and swap execution. By default, this implementation demonstrates:

Single-chain swaps: AVAX to WAVAX on Avalanche C-Chain
Cross-chain swaps: AVAX on Avalanche C-Chain to POL on Polygon

DEX API Utility File Overview

This tutorial focuses on implementing dexUtils.js, a utility file that contains all the necessary functions for interacting with the OKX DEX API. This file handles:

Network and token configurations
Header construction
API endpoint and call construction
Quote retrieval
Token approvals
Single-chain swaps
Cross-chain swaps

Prerequisites

Before beginning, you need:

Node.js installed (v20 or later)
Basic knowledge of Web3 and blockchain concepts
A wallet address and private key
OKX API credentials (API Key, Secret Key, and Passphrase) from the OKX Developer Portal
A Project ID from the OKX Developer Portal
Git installed on your machine

Setup

You have two options to get started:

Option 1: Local Development

Clone the repository and switch to the demo branch:

git clone https://github.com/Julian-dev28/okx-os-evm-swap-app.git
cd okx-os-evm-swap-app
git checkout avalanche-demo

Install the dependencies:

npm install

Set up your environment variables:

REACT_APP_API_KEY=your_api_key
REACT_APP_SECRET_KEY=your_secret_key
REACT_APP_API_PASSPHRASE=your_passphrase
REACT_APP_PROJECT_ID=your_project_id
REACT_APP_USER_ADDRESS=your_wallet_address
REACT_APP_PRIVATE_KEY=your_private_key

Option 2: Using Replit

Fork the Replit project:
OKX OS Avalanche Swap App
Add your environment variables in the Replit Secrets tab (located in the Tools panel):
- Click on "Secrets"
- Add each environment variable:
  - REACT_APP_API_KEY
  - REACT_APP_SECRET_KEY
  - REACT_APP_API_PASSPHRASE
  - REACT_APP_PROJECT_ID
  - REACT_APP_USER_ADDRESS
  - REACT_APP_PRIVATE_KEY
Click "Run" to start your development environment

Initial Configuration

This section shows how to set up your network configurations and token addresses needed for interacting with the OKX DEX on the Avalanche C-Chain:

import Web3 from "web3";
import cryptoJS from "crypto-js";

// RPC endpoint for Avalanche C-Chain
const avalancheCMainnet = "https://avalanche-c-chain-rpc.publicnode.com";

// OKX DEX contract address on Avalanche
// Used to show token allowance
const okxDexAddress = "0x40aA958dd87FC8305b97f2BA922CDdCa374bcD7f";

// Standard token addresses
// baseTokenAddress represents the native token (ETH/AVAX) across chains
const baseTokenAddress = "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE";
// WAVAX token address on Avalanche
const wavaxTokenAddress = "0xb31f66aa3c1e785363f0875a1b74e27b85fd66c7";

// Environment variables
export const chainId = targetChainId;
export const fromTokenAddress = wavaxTokenAddress;
export const toTokenAddress = baseTokenAddress;
export const ratio = BigInt(3) / BigInt(2);
export const user = process.env.REACT_APP_USER_ADDRESS;
export const privateKey = process.env.REACT_APP_PRIVATE_KEY;
export const spenderAddress = okxDexAddress;

const apiKey = process.env.REACT_APP_API_KEY;
const secretKey = process.env.REACT_APP_SECRET_KEY;
const apiPassphrase = process.env.REACT_APP_API_PASSPHRASE;
const projectId = process.env.REACT_APP_PROJECT_ID;

// Initialize Web3 instance with Avalanche RPC
const web3 = new Web3(avalancheCMainnet);

// Base URL for API requests
const apiBaseUrl = "https://www.okx.com/api/v5/dex/aggregator";

/**
 * Helper function for constructing API URLs
 * @param {string} methodName - API endpoint path
 * @param {Object} queryParams - URL parameters
 * @returns {string} Complete API URL
 */
export function getAggregatorRequestUrl(methodName, queryParams) {
    return (
        apiBaseUrl +
        methodName +
        "?" +
        new URLSearchParams(queryParams).toString()
    );
}

Getting Token Quotes

The quote functionality retrieves current prices and swap routes. Here's the implementation:

Generating Headers

/**
 * Generates headers required for OKX DEX quote API calls
 * Headers include timestamp, signature, and API credentials
 * 
 * @param {Object} quoteParams - Parameters for the quote request
 * @returns {Object} Headers object with required authentication
 */
export function getQuoteHeaders(quoteParams) {
    const date = new Date();
    const timestamp = date.toISOString();

    // Create signature string following OKX API requirements
    const stringToSign =
        timestamp +
        "GET" +
        "/api/v5/dex/aggregator/quote?" +
        new URLSearchParams(quoteParams).toString();

    // Return headers with HMAC signature
    return {
        "Content-Type": "application/json",
        "OK-ACCESS-KEY": apiKey,
        "OK-ACCESS-SIGN": cryptoJS.enc.Base64.stringify(
            cryptoJS.HmacSHA256(stringToSign, secretKey)
        ),
        "OK-ACCESS-TIMESTAMP": timestamp,
        "OK-ACCESS-PASSPHRASE": apiPassphrase,
    };
}

Calling the API

/**
 * Fetches a quote from the OKX DEX Aggregator
 * Used to get current prices and optimal swap routes
 * 
 * @param {Object} quoteParams - Parameters including tokens, amount, and chain
 * @returns {Promise<Object>} Quote data including price and route information
 */
export async function getQuote(quoteParams) {
    const apiRequestUrl = `${apiBaseUrl}/quote?${new URLSearchParams(quoteParams)}`;
    const response = await fetch(apiRequestUrl, {
        method: "GET",
        headers: getQuoteHeaders(quoteParams),
    });

    if (!response.ok) {
        throw new Error("Network response was not ok");
    }

    return response.json();
}

Token Approvals

Implement these approval functions for ERC20 tokens before swapping:

Generating Headers

/**
* Generates headers required for OKX DEX approve transaction API calls
* Headers include timestamp, signature, and API credentials
* 
* @param {Object} params - Parameters for the approve transaction
* @returns {Promise<Object>} Headers object with required authentication
*/
export function getApproveTransactionHeaders(params) {
   const date = new Date();
   const timestamp = date.toISOString();
   const stringToSign =
       timestamp +
       "GET" +
       "/api/v5/dex/aggregator/approve-transaction?" +
       new URLSearchParams(params).toString();

   // Check if required environment variables are present
   if (!projectId || !apiKey || !secretKey || !apiPassphrase) {
       throw new Error(
           "Missing required environment variables for API authentication"
       );
   }

   return {
       "Content-Type": "application/json",
       "OK-PROJECT-ID": projectId,
       "OK-ACCESS-KEY": apiKey,
       "OK-ACCESS-SIGN": cryptoJS.enc.Base64.stringify(
           cryptoJS.HmacSHA256(stringToSign, secretKey)
       ),
       "OK-ACCESS-TIMESTAMP": timestamp,
       "OK-ACCESS-PASSPHRASE": apiPassphrase,
   };
}

Calling the API


// ABI for ERC20 token allowance function
// This minimal ABI only includes the allowance function needed for checking token approvals
// Full ERC20 ABI not needed since we're only checking allowances
const tokenABI = [
    {
        constant: true,
        inputs: [
            {
                name: "_owner",
                type: "address",
            },
            {
                name: "_spender",
                type: "address",
            },
        ],
        name: "allowance",
        outputs: [
            {
                name: "",
                type: "uint256",
            },
        ],
        payable: false,
        stateMutability: "view",
        type: "function",
    },
];

/**
 * Checks the current allowance for a token
 * Used to determine if approval is needed before swap
 * 
 * @param {string} ownerAddress - Address of token owner
 * @param {string} spenderAddress - Address of spender (DEX contract)
 * @param {string} tokenAddress - Address of token contract
 * @returns {Promise<number>} Current allowance amount
 */
export async function getAllowance(ownerAddress, spenderAddress, tokenAddress) {
    const tokenContract = new web3.eth.Contract(tokenABI, tokenAddress);
    try {
        const allowance = await tokenContract.methods
            .allowance(ownerAddress, spenderAddress)
            .call();
        return parseFloat(allowance);
    } catch (error) {
        console.error("Failed to query allowance:", error);
        throw error;
    }
}


/**
 * Gets approval transaction data from the API
 * 
 * @param {string} chainId - Network chain ID
 * @param {string} tokenContractAddress - Token to approve
 * @param {string} approveAmount - Amount to approve
 * @returns {Promise<Object>} Approval transaction data
 */
export async function approveTransaction(chainId, tokenContractAddress, approveAmount) {
    if (!chainId || !tokenContractAddress || !approveAmount) {
        throw new Error("Missing required parameters for approval");
    }

    const params = { chainId, tokenContractAddress, approveAmount };
    const apiRequestUrl = getAggregatorRequestUrl("/approve-transaction", params);
    const headersParams = getApproveTransactionHeaders(params);

    try {
        const response = await fetch(apiRequestUrl, {
            method: "GET",
            headers: headersParams,
        });

        if (!response.ok) {
            const errorData = await response.json().catch(() => null);
            throw new Error(
                `API request failed: ${response.status} ${response.statusText}${
                    errorData ? ` - ${JSON.stringify(errorData)}` : ""
                }`
            );
        }

        const data = await response.json();

        // Validate the response data
        if (!data || !data.data || !Array.isArray(data.data) || data.data.length === 0) {
            throw new Error("Invalid response format from approval API");
        }

        return data;
    } catch (error) {
        console.error("Approval request failed:", error);
        throw error;
    }
}

/**
 * Handles the approval transaction if needed
 * Checks current allowance and submits approval transaction if necessary
 * 
 * @param {string} approveAmount - Amount to approve for spending
 * @returns {Promise<Object|null>} Transaction receipt or null if approval not needed
 */
export async function sendApproveTx(approveAmount) {
    // Skip approval for native tokens (ETH/AVAX)
    if (fromTokenAddress.toLowerCase() === baseTokenAddress.toLowerCase()) {
        return null;
    }

    const allowanceAmount = await getAllowance(
        user,
        spenderAddress,
        fromTokenAddress
    );

    // Only approve if current allowance is insufficient
    if (BigInt(allowanceAmount) < BigInt(approveAmount)) {
        const approvalResult = await approveTransaction(
            chainId,
            fromTokenAddress,
            approveAmount
        );

        // Prepare approval transaction with safety margins for gas
        const txObject = {
            nonce: await web3.eth.getTransactionCount(user),
            to: fromTokenAddress,
            gasLimit: BigInt(approvalResult.data[0].gasLimit) * BigInt(2),
            gasPrice: (BigInt(await web3.eth.getGasPrice()) * BigInt(3)) / BigInt(2),
            data: approvalResult.data[0].data,
            value: "0",
        };

        return sendSignedTransaction(txObject);
    }

    return null;
}

Single-Chain Swaps

The following implementation demonstrates executing swaps within the same chain, specifically from AVAX to WAVAX on Avalanche C-Chain:


/**
 * Helper function to get headers for swap API calls
 * @param {Object} swapParams - Swap parameters
 * @returns {Object} Headers with authentication
 */
export function getSwapHeaders(swapParams) {
    const date = new Date();
    const timestamp = date.toISOString();
    const stringToSign = 
        timestamp + 
        "GET" + 
        "/api/v5/dex/aggregator/swap?" + 
        new URLSearchParams(swapParams).toString();

    return {
        "Content-Type": "application/json",
        "OK-ACCESS-KEY": apiKey,
        "OK-ACCESS-SIGN": cryptoJS.enc.Base64.stringify(
            cryptoJS.HmacSHA256(stringToSign, secretKey)
        ),
        "OK-ACCESS-TIMESTAMP": timestamp,
        "OK-ACCESS-PASSPHRASE": apiPassphrase,
    };
}

/**
 * Helper function to get swap data from API
 * @param {Object} swapParams - Swap parameters
 * @returns {Promise<Object>} Swap transaction data
 */
export async function getSwapData(swapParams) {
    const apiRequestUrl = getAggregatorRequestUrl("/swap", swapParams);
    const response = await fetch(apiRequestUrl, {
        method: "GET",
        headers: getSwapHeaders(swapParams),
    });

    if (!response.ok) {
        throw new Error("Network response was not ok");
    }

    return response.json();
}

/**
 * Executes a single-chain token swap
 * Handles the main swap transaction after approval
 * 
 * @param {Object} swapParams - Parameters for the swap
 * @returns {Promise<Object>} Transaction receipt
 */
export async function sendSwapTx(swapParams) {
    // Get swap transaction data from API
    const { data: swapData } = await getSwapData(swapParams);

    // Validate swap data
    if (!swapData || swapData.length === 0 || !swapData[0].tx) {
        throw new Error("Invalid swap data received");
    }

    const swapDataTxInfo = swapData[0].tx;
    const nonce = await web3.eth.getTransactionCount(user, "latest");

    // Prepare transaction with adjusted gas parameters for safety
    const signTransactionParams = {
        data: swapDataTxInfo.data,
        gasPrice: BigInt(swapDataTxInfo.gasPrice) * BigInt(ratio),
        to: swapDataTxInfo.to,
        value: swapDataTxInfo.value,
        gas: BigInt(swapDataTxInfo.gas) * BigInt(ratio),
        nonce,
    };

    return sendSignedTransaction(signTransactionParams);
}

Cross-Chain Swaps

The following implementation demonstrates how to execute cross-chain swaps from AVAX (Avalanche C-Chain) to MATIC (Polygon), including quote retrieval and transaction execution:


/**
 * Helper function to get headers for cross-chain quote API calls
 * @param {Object} params - Quote parameters
 * @returns {Object} Headers with authentication
 */
export function getCrossChainQuoteHeaders(params) {
    const date = new Date();
    const timestamp = date.toISOString();
    const stringToSign = 
        timestamp + 
        "GET" + 
        "/api/v5/dex/cross-chain/quote?" + 
        new URLSearchParams(params).toString();

    return {
        "Content-Type": "application/json",
        "OK-PROJECT-ID": projectId,
        "OK-ACCESS-KEY": apiKey,
        "OK-ACCESS-SIGN": cryptoJS.enc.Base64.stringify(
            cryptoJS.HmacSHA256(stringToSign, secretKey)
        ),
        "OK-ACCESS-TIMESTAMP": timestamp,
        "OK-ACCESS-PASSPHRASE": apiPassphrase,
    };
}

/**
 * Helper function to get headers for cross-chain swap API calls
 * @param {Object} params - Swap parameters
 * @returns {Object} Headers with authentication
 */
export function getCrossChainQuoteSwapHeaders(params) {
    const date = new Date();
    const timestamp = date.toISOString();
    const stringToSign = 
        timestamp + 
        "GET" + 
        "/api/v5/dex/cross-chain/build-tx?" + 
        new URLSearchParams(params).toString();

    return {
        "Content-Type": "application/json",
        "OK-PROJECT-ID": projectId,
        "OK-ACCESS-KEY": apiKey,
        "OK-ACCESS-SIGN": cryptoJS.enc.Base64.stringify(
            cryptoJS.HmacSHA256(stringToSign, secretKey)
        ),
        "OK-ACCESS-TIMESTAMP": timestamp,
        "OK-ACCESS-PASSPHRASE": apiPassphrase,
    };
}

/**
 * Gets a quote for cross-chain swaps
 * Used to estimate costs and routes across different networks
 * 
 * @param {string} amount - Amount to swap
 * @returns {Promise<Object>} Quote data for cross-chain swap
 */
export async function getCrossChainQuote(amount) {
    // Define parameters for cross-chain quote
    const quoteParams = {
        fromChainId: targetChainId,
        toChainId: 137, // Example: Polygon
        fromTokenAddress: baseTokenAddress,
        toTokenAddress: baseTokenAddress,
        amount: amount,
        slippage: "0.01", // 1% slippage tolerance
    };

    const response = await fetch(
        `${apiBaseUrl}/cross-chain/quote?${new URLSearchParams(quoteParams)}`,
        {
            method: "GET",
            headers: getCrossChainQuoteHeaders(quoteParams),
        }
    );

    return response.json();
}

/**
 * Executes a cross-chain swap transaction
 * Handles the complete cross-chain swap process
 * 
 * @param {string} amount - Amount to swap
 * @returns {Promise<Object>} Transaction receipt
 */
export async function sendCrossChainSwap(amount) {
    // Define parameters for cross-chain swap
    const quoteParams = {
        fromChainId: targetChainId,
        toChainId: 137, // Target chain (e.g., Polygon)
        fromTokenAddress: baseTokenAddress,
        toTokenAddress: baseTokenAddress,
        receiveAddress: user,
        amount: amount,
        slippage: "0.5", // Higher slippage for cross-chain
        userWalletAddress: user,
        sort: 0,
        priceImpactProtectionPercentage: "1.0", // Price impact protection
    };

    // Get swap transaction data
    const swapData = await fetch(
        `${apiBaseUrl}/cross-chain/build-tx?${new URLSearchParams(quoteParams)}`,
        {
            method: "GET",
            headers: getCrossChainQuoteSwapHeaders(quoteParams),
        }
    ).then(res => res.json());

    const swapDataTxInfo = swapData.data[0].tx;

    // Prepare transaction parameters with safety margins
    const signTransactionParams = {
        from: user,
        data: swapDataTxInfo.data,
        to: swapDataTxInfo.to,
        value: swapDataTxInfo.value,
        nonce: await web3.eth.getTransactionCount(user, "latest"),
        gasPrice: BigInt(swapDataTxInfo.gasPrice) * BigInt(ratio),
        gas: BigInt(swapDataTxInfo.gasLimit) * BigInt(ratio),
    };

    return sendSignedTransaction(signTransactionParams);
}

Signing and Sending Transactions

The sendSignedTransaction method signs and sends transactions using the user's wallet private key

/**
 * Signs and sends a transaction to the network
 * 
 * @param {Object} txObject - Transaction parameters
 * @returns {Promise<Object>} Transaction receipt
 */
export async function sendSignedTransaction(txObject) {
    const { rawTransaction } = await web3.eth.accounts.signTransaction(
        txObject,
        privateKey,
    );
    const result = await web3.eth.sendSignedTransaction(rawTransaction);
    return result;
}

Using the Functions

The flexibility of the application is demonstrated through the Params objects, swapParams, and quoteParams. These objects act as configuration points, enabling users to customize the quote requests and swaps based on their specific requirements.

For example, within the swapParams object, you'll find the following properties:

// Example params used to build tx data for single-chain swaps
const swapParams = {
  chainId: chainId,
  fromTokenAddress: fromTokenAddress,
  toTokenAddress: toTokenAddress,
  amount: amountInTokenUnits,
  slippage: '0.5',
  userWalletAddress: user
};

Here, you can specify the chainId (the blockchain network you want to use), the fromTokenAddress and toTokenAddress (the tokens you want to swap), the amount of tokens you want to swap, the acceptable slippage percentage, and your own userWalletAddress.

The quoteParams in dexUtils.js object allows you to configure the source and target blockchain networks:

// Example params used to build tx data for cross-chain swaps
  const quoteParams = {
        fromChainId: targetChainId,
        toChainId: 137,
        fromTokenAddress: baseTokenAddress,
        toTokenAddress: baseTokenAddress,
        receiveAddress: "0x85032bb06a9e5c96e3a1bb5e2475719fd6d4796e",
        amount: amount,
        slippage: "0.5",
        userWalletAddress: user,
        sort: 0,
        priceImpactProtectionPercentage: "1.0",
};

In this example, you can specify the fromChainId (the blockchain network you're starting from) and the toChainId (the blockchain network you want to swap to), as well as the fromTokenAddress and toTokenAddress. This allows you to easily move your tokens across different blockchain ecosystems, such as from Avalanche to Polygon.

Additionally, you can set the receiveAddress to designate where the swapped tokens should be sent, adjust the slippage tolerance, and even configure the priceImpactProtectionPercentage to safeguard against unfavorable price movements.

By exposing these configuration options, the application becomes highly adaptable, enabling builders to tailor the app to their users' specific needs.

You can find a working example of how these functions are implemented in components and integrated into an app by checking out the example React application.

Conclusion

Thank you for taking the time to check out this tutorial! I hope the information provided has been helpful in understanding how to leverage the power of the OKX DEX Aggregator API within your own projects.

Additional Resources

Found this helpful? Don't forget to check out the resources at the beginning of the article, including the boilerplate code and documentation. Join the OKX OS Community to connect with other developers, and follow Julian on Twitter for more Web3 development content!

Building with Fractal Bitcoin: OKX OS Integration Guide

Julian Martinez — Tue, 29 Oct 2024 23:37:00 +0000

Introduction

In this guide, you'll walk through building a Bitcoin Ordinals explorer using the OKX OS APIs. The application will be built with React and TypeScript, following the code examples provided in the official documentation. This will allow users to:

By the end of this tutorial, you'll have a fully functional Ordinals explorer that integrates with the OKX platform. The code will be available on Repl and GitHub for your reference.

Let's get started!

Quick Links 🔗

Project Setup 🛠️

Prerequisites

Node.js v20+
npm
OKX OS API credentials

Installation

# Clone repository
git clone https://github.com/Julian-dev28/ordinals-react-app-ts.git

# Install dependencies
npm install

# Configure environment variables
OKX_API_KEY=your_key
OKX_API_SECRET=your_secret
OKX_API_PASSPHRASE=your_passphrase

# Start the proxy server
node ordinals-server.cjs

# Run the app
npm run dev

Project Structure 📁

./
├── ordinals-server.cjs           # Proxy server for OKX API
├── src/
│   ├── components/              
│   │   ├── OrdinalsFetcher.tsx   # Collections explorer
│   │   ├── RetrieveInscriptions  # Inscriptions viewer 
│   │   └── TradeHistory.tsx      # Trade history tracker
│   └── services/
│       └── okxServices.ts        # API service layer

Implementation Guide 📚

1. Proxy Server (ordinals-server.cjs)

This server handles authentication and signing of requests to OKX API. It exposes three main endpoints:

// Get Collections
// Actual API endpoint: https://www.okx.com/api/v5/mktplace/nft/fractal-ordinals/collections
GET /api/ordinals
{
    "limit": "20",      // default: 20
    "slug": "string",   // optional
    "isBrc20": false    // default: false
}

// Get Inscriptions
// Actual API endpoint: https://www.okx.com/api/v5/mktplace/nft/fractal-ordinals/get-valid-inscriptions
POST /api/inscriptions
{
    "slug": "string",
    "walletAddress": "string",
    "limit": "10",         // default: 10
    "isBrc20": false,      // optional
    "cursor": "string",    // optional
    "sort": "string"       // optional
}

// Get Trade History
// Actual API endpoint: https://www.okx.com/api/v5/mktplace/nft/fractal-ordinals/trade-history
POST /api/trade-history
{
    "slug": "string",
    "limit": "10",                    // default: 10
    "sort": "desc",                   // default: desc
    "isBrc20": true,                  // default: true
    "cursor": "string",               // optional
    "tradeWalletAddress": "string",   // optional
    "type": "string",                 // optional
    "orderSource": "string"           // optional
}

2. Service Layer (okxServices.ts)

The service layer handles API calls to our proxy server:

// Example service implementation
class OKXService {
    // Get collections
   // Actual API endpoint: https://www.okx.com/api/v5/mktplace/nft/fractal-ordinals/collections
    async getOrdinals(params: OrdinalParams = {}) {
        return axios.get('/api/ordinals', { params });
    }

    // Get inscriptions
   // Actual API endpoint: https://www.okx.com/api/v5/mktplace/nft/fractal-ordinals/get-valid-inscriptions
    async getInscriptions(params: InscriptionParams) {
        return axios.post('/api/inscriptions', params);
    }

    // Get trade history
   // Actual API endpoint: https://www.okx.com/api/v5/mktplace/nft/fractal-ordinals/trade-history
    async getTradeHistory(params: TradeHistoryParams) {
        return axios.post('/api/trade-history', params);
    }
}

3. React Components

The app uses three main components:

Collections Explorer (OrdinalsFetcher.tsx)

// Displays Ordinals collections with filters for:
// - Collection slug
// - Limit
// - BRC-20 status

Inscriptions Viewer (RetrieveInscriptions.tsx)

// Shows inscriptions for a wallet with:
// - Collection filtering
// - BRC-20 filtering
// - Sort options

Trade History (TradeHistory.tsx)

// Displays trading activity with:
// - Transaction type filtering
// - Wallet address filtering
// - Sort options
// - BRC-20 filtering
// - Collection filtering

Security Features 🔒

CORS (Cross-Origin Resource Sharing) enabled:

The server-side code (ordinals-server.cjs) implements CORS by using the cors middleware:

const cors = require('cors');
app.use(cors());

This allows the React application to make requests to the server from a different domain.

Request signing with CryptoJS:

The okxService.ts file doesn't directly handle the request signing, but it sends the necessary parameters to the server.
The server-side code (ordinals-server.cjs) contains the implementation of request signing using CryptoJS:

function preHash(timestamp, method, path, body) {
  const bodyStr = body ? JSON.stringify(body) : '';
  const message = `${timestamp}${method}${path}${bodyStr}`;
  return message;
}

function sign(message, secret) {
  return cryptoJS.enc.Base64.stringify(
    cryptoJS.HmacSHA256(message, secret)
  );
}

The preHash function creates a message by combining the timestamp, HTTP method, request path, and request body (if present).
The sign function generates a signature by applying the HMAC-SHA256 algorithm to the pre-hash message using the API secret key.
The signature is then included in the request headers to ensure the integrity and authenticity of the request.

Environment variables for sensitive data:

The server-side code (ordinals-server.cjs) loads environment variables using the dotenv package:

require('dotenv').config();

Sensitive information such as the API key, API secret, and API passphrase are stored as environment variables and accessed using process.env:

process.env.OKX_API_KEY
process.env.OKX_API_SECRET
process.env.OKX_API_PASSPHRASE

This ensures that sensitive data is not exposed in the codebase and can be securely managed through environment configuration.

Error handling and logging:

The okxService.ts and ordinals-server.cjs files include error handling and logging for the API requests
Each API request is wrapped in a try-catch block to catch any errors that may occur.

Quick Tips ⚡

Always use environment variables for API credentials
Monitor API response codes in console
Handle pagination for large datasets
Implement proper error handling

Conclusion

Congratulations! You've successfully built a Bitcoin Ordinals explorer using the OKX OS APIs and React with TypeScript. Throughout this guide, we covered:

Setting up the project structure and dependencies
Integrating the Collections, Inscriptions, and Trade History APIs
Implementing features like filtering, sorting, and pagination
Applying security best practices such as CORS, request signing, and environment variables
Handling errors and edge cases for a smooth user experience

Community & Support 🤝

© 2024 OKX. This article may be reproduced or distributed in its entirety, or excerpts of 100 words or less of this article may be used, provided such use is non-commercial. Any reproduction or distribution of the entire article must also prominently state: “This article is © 2024 OKX and is used with permission.” Permitted excerpts must cite to the name of the article and include attribution, for example “Building with Fractal Bitcoin: OKX OS Integration Guide, Julian Martinez, © 2024 OKX.” No derivative works or other uses of this article are permitted.

Integrate the OKX DEX Widget in Just 30 Minutes

Julian Martinez — Wed, 16 Oct 2024 00:01:07 +0000

Integrating OKX DEX Widget in Your React App: A Step-by-Step Guide

Hey there, fellow developers! 👋 Ready to supercharge your React app with some serious DEX functionality? Today, we're walking through integrating the OKX DEX Widget into a React application. But before we dive in, here are some resources you'll find helpful:

Resources
What We're Building
Setting Up Our Project
Creating Our Components
- 1. Navigation Component
- 2. Landing Page Component
- 3. Widget Page Component
OKX DEX Widget Configuration Parameters
Additional Information
Simple Styling Guide for OKX DEX Widget Application
Putting It All Together
Running Our App
Wrapping Up

Resources

📚 OKX DEX Widget Documentation

🛠️ Boilerplate on Replit (Fork and Run)

📂 GitHub Repository (Clone and Customize)

🤝 Join the OKX OS Community

🐦 Follow Julian on Twitter for more Web3 dev content

Now, let's get started!

What We're Building

We'll create a simple React app with a landing page and a dedicated page for the DEX widget. By the end of this tutorial, you'll have:

A responsive navigation bar
A welcoming landing page
A fully functional DEX widget with multi-chain support

Sounds exciting? Let's dive in! 🚀

Setting Up Our Project

First things first, let's create our React project and install the necessary dependencies:

npx create-react-app okx-dex-app --template typescript
cd okx-dex-app
npm install @okxweb3/dex-widget react-router-dom

Great! Now we have a fresh React project with TypeScript support and the OKX DEX Widget ready to go.

Creating Our Components

We'll need to create three main components for our app. Let's break them down:

1. Navigation Component

This will be our app's navigation bar. Create a file called Navigation.tsx in your src folder and add the following code:

import React, { useState } from "react";
import { Link, useLocation } from "react-router-dom";

const Navigation: React.FC = () => {
    const location = useLocation();
    const [hoverIndex, setHoverIndex] = useState<number | null>(null);

    const navItems = [
        { path: "/", label: "Home" },
        { path: "/widget", label: "DEX Widget" },
    ];

    return (
        <nav className="cool-nav">
            <div className="nav-background">
                <div className="nav-blob"></div>
            </div>
            <ul className="nav-list">
                {navItems.map((item, index) => (
                    <li
                        key={item.path}
                        onMouseEnter={() => setHoverIndex(index)}
                        onMouseLeave={() => setHoverIndex(null)}
                    >
                        <Link
                            to={item.path}
                            className={location.pathname === item.path ? "active" : ""}
                        >
                            {item.label}
                            {(hoverIndex === index || location.pathname === item.path) && (
                                <span className="nav-indicator" />
                            )}
                        </Link>
                    </li>
                ))}
            </ul>
        </nav>
    );
};

export default Navigation;

This navigation component uses React Router for navigation and includes a cool hover effect. Feel free to customize the navItems array to add more pages to your app!

2. Landing Page Component

Next, let's create a simple landing page. Create LandingPage.tsx in your src folder:

import React from 'react';
import { Link } from 'react-router-dom';

const LandingPage: React.FC = () => {
  return (
    <div className="landing-page">
      <h2>Welcome to Our DEX Application</h2>
      <p>Experience seamless trading with our integrated OKX DEX Widget.</p>
      <Link to="/widget">
        <button>Go to DEX Widget</button>
      </Link>
    </div>
  );
};

export default LandingPage;

Simple and welcoming! This page introduces users to our app and provides a clear call-to-action to visit the DEX widget page.

3. Widget Page Component

Now for the star of the show - our DEX widget page. Create WidgetPage.tsx:

import React, { useRef, useEffect } from 'react';
import {
    createOkxSwapWidget,
    ProviderType,
    OkxSwapWidgetProps,
    OkxEvents,
    OkxEventHandler,
    IWidgetConfig,
    TradeType,
    THEME,
} from '@okxweb3/dex-widget';

declare global {
    interface Window {
        ethereum?: any;
        solana?: any;
    }
}
const WidgetPage: React.FC = () => {
    const widgetRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
        if (!widgetRef.current) return;

        const params: OkxSwapWidgetProps['params'] = {
            width: 450,
            theme: THEME.DARK,
            lang: 'en_us',
            providerType: ProviderType.EVM,
            tradeType: TradeType.AUTO,
            chainIds: ["1", "196", "8453"], // Ethereum, X Layer, and Base
      tokenPair: {
        fromChain: 196, //X Layer
        toChain: 196, // X Layer
        fromToken: "0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee", // OKB
        toToken: "0x74b7f16337b8972027f6196a17a631ac6de26d22", // USDC
      },
      bridgeTokenPar: {
        fromChain: 8453, // BASE
        toChain: 196, // X Layer
        fromToken: "0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee", // OKB
        toToken: "0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee", // USDC
      },
            feeConfig: {
                1: { // Ethereum
                    feePercent: 2,
                    referrerAddress: '0x1234...5678', // Replace with your ETH address
                },
                196: { // X Layer
                    feePercent: 1,
                    referrerAddress: '0x9876...5432', // Replace with your X Layer address
                },
                8453: { // BASE
                    feePercent: 2,
                    referrerAddress: '0x9876...5432', // Replace with your X Layer address
                },
            },
        };

        const provider = window.ethereum;

        const listeners: IWidgetConfig['listeners'] = [
            {
                event: OkxEvents.ON_CONNECT_WALLET,
                handler: (() => {
                    provider?.enable();
                }) as OkxEventHandler<OkxEvents.ON_CONNECT_WALLET>,
            },
        ];

        const widgetProps: IWidgetConfig = {
            params,
            provider,
            listeners,
        };

        const instance = createOkxSwapWidget(widgetRef.current, widgetProps);

        return () => {
            instance.destroy();
        };
    }, []);

    return (
        <div className="widget-page">
            <h2>OKX DEX Widget</h2>
            <div ref={widgetRef} />
        </div>
    );
};

export default WidgetPage;

Let's break down what's happening here:

We're setting up the widget with a width of 450px and a dark theme.
The language is set to English.
We're using the EVM provider type for Ethereum-compatible chains.
The trade type is set to AUTO, allowing both swaps and cross-chain bridges.
We've enabled trading on Ethereum, X Layer, and Base.
There's a default token pair set up for a cross-chain swap from ETH on Ethereum to USDC on X Layer.
We've implemented different fee structures for Ethereum (0.2%), Base (0.2%), and X Layer (0.1%).

OKX DEX Widget Configuration Parameters

You can set the following parameters to configure your widget's default settings:

Parameter	Type	Default	Description
width	number	450	The width of the widget in CSS pixels (px). If not set: - 450px when screen width > 767px - 100% when screen width < 768px - 375px when screen width < 375px
theme	THEME	light	The widget theme. Options: - THEME.LIGHT - THEME.DARK
lang	string	en_us	The widget language. See Multilanguage section for available options.
tradeType	TradeType	auto	The type of transaction: - TradeType.SWAP - TradeType.BRIDGE - TradeType.AUTO (includes both swap and bridge)
chainIds	Array	[]	IDs of blockchains for single-chain swaps. See ChainId config section for supported networks.
feeConfig	IFeeConfig	{}	Enable fees for transactions. See Fee customization section for details.
tokenPair	ITokenPair	{}	Set default token pairs. See tokenPair config section for details.
providerType	ProviderType	' '	Type of provider. Options: - ProviderType.EVM - ProviderType.SOLANA - ProviderType.WALLET_CONNECT

Pretty cool, right? This configuration gives your users a lot of flexibility right out of the box!

Additional Information

Theme: The swap widget provides a default light theme and a dark theme as options.
Language: The widget language is adjustable. Check the Multilanguage section for more details.
ChainIds: Refer to the ChainId config section for all supported networks.
FeeConfig: You can enable a fee for all transactions in the widget. See the Fee customization section for more details.
TokenPair: Use this when you want to set default tokens from the default token lists.

Remember to import the necessary types and enums (THEME, TradeType, ProviderType) from the OKX DEX Widget package when using these parameters in your code.

Simple Styling Guide for OKX DEX Widget Application

To style your application, follow these steps:

Create a file named styles.css in your src directory.
Copy and paste the following CSS into styles.css:

:root {
  --primary-color: #ADFF2F;
  --background-color: #000000;
  --surface-color: #111111;
  --text-color: #FFFFFF;
  --error-color: #FF4500;
  --disabled-color: #4D7F00;
  --hover-color: #8BFF00;
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
  font-family: 'Roboto', sans-serif;
  line-height: 1.6;
  margin: 0;
  padding-top: 80px;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

h2 {
  color: var(--primary-color);
  font-size: 2.5rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 30px;
  text-align: center;
}

button {
  background: linear-gradient(45deg, var(--primary-color), var(--hover-color));
  color: var(--background-color);
  border: none;
  padding: 12px 24px;
  cursor: pointer;
  font-weight: bold;
  border-radius: 30px;
  font-size: 1rem;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 4px 6px rgba(173, 255, 47, 0.1);
}

button:hover {
  background: linear-gradient(45deg, var(--hover-color), var(--primary-color));
  transform: translateY(-2px);
  box-shadow: 0 6px 8px rgba(173, 255, 47, 0.2);
}

button:disabled {
  background: var(--disabled-color);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.cool-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 20px;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
}

.nav-list {
  display: flex;
  justify-content: center;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.nav-list li {
  margin: 0 20px;
}

.nav-list a {
  color: var(--text-color);
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: bold;
}

.landing-page,
.widget-page {
  text-align: center;
}

.widget-page > div {
  display: inline-block;
  margin-top: 30px;
}

Import the CSS in your App.tsx file:

import React from 'react';
import './styles.css';
// ... rest of your imports

const App: React.FC = () => {
  // ... your component code
};

export default App;

To customize the OKX DEX Widget appearance, use these parameters in your configuration:

const params = {
  // ... other params
  width: 600, // Adjust as needed
  theme: THEME.DARK, // or THEME.LIGHT
};

That's it! Your application now has a basic style that complements the OKX DEX Widget.

Putting It All Together

Finally, let's update our App.tsx to bring all these components together:

import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Navigation from './Navigation';
import LandingPage from './LandingPage';
import WidgetPage from './WidgetPage';
import './styles.css';

const App: React.FC = () => {
  return (
    <Router>
      <div className="App container">
        <Navigation />
        <Routes>
          <Route path="/" element={<LandingPage />} />
          <Route path="/widget" element={<WidgetPage />} />
        </Routes>
      </div>
    </Router>
  );
};

export default App;

This sets up our routing and ensures the navigation is present on all pages.

Running Our App

Now for the moment of truth! Run your app with:

npm start

Visit http://localhost:3000 in your browser, and voilà! You should see your landing page with a navigation bar. Click on "DEX Widget" to see your fully functional OKX DEX Widget in action!

Wrapping Up

And there you have it, folks! We've successfully integrated the OKX DEX Widget into a React application. We've set up multi-chain support, custom fee structures, and a sleek UI to boot.

Remember, this is just the beginning. You can further customize the widget, add more pages to your app, or implement additional features like error handling and loading states.

The OKX DEX Widget opens up a world of possibilities for your DeFi applications. Whether you're building a portfolio tracker, a trading platform, or something entirely new, this widget can help you provide powerful DEX functionality to your users with minimal effort.

Happy coding, and may your trades always be in the green! 💚

Building dApps on Stellar

Julian Martinez — Fri, 02 Aug 2024 14:40:35 +0000

This is part of a series of livestreams designed to help the community participate in the Build Better on Stellar: Smart Contract Challenge:

Join Us For The First Community Smart Contract Challenge With $50,000 In Prizes!

dev.to staff for The DEV Team ・ Jul 10 '24

#devchallenge #stellarchallenge #web3 #blockchain

In this video, we build a full-stack crowdfunding dApp using Stellar smart contracts. The session covers the following topics:

Configuring the development environment
Initializing and setting up a project using example templates
Integrating Freighter wallets for user authentication and interaction
Minting tokens
Making deposits and more!

Upcoming Streams

Looking for some live support? Join our next stream. All sessions start at 12pm EDT.

8/1: Intro to Passkeys
8/6: Migrating from Web2 to Web3
8/8: Stellar Community Fund

Intro to Stellar: Get Started in Rust, Set Up Your Development Environment, and Write Your First Smart Contract

Julian Martinez — Thu, 25 Jul 2024 15:51:01 +0000

Hello! This is the first in a series of five livestreams designed to help the community participate in the Build Better on Stellar: Smart Contract Challenge:

Join Us For The First Community Smart Contract Challenge With $50,000 In Prizes!

dev.to staff for The DEV Team ・ Jul 10 '24

#devchallenge #stellarchallenge #web3 #blockchain

In this video, we cover the basics of Rust smart contract development, which includes:

Setting up Okashi, a smart contract playground for Soroban
Key concepts such as data types, storage management, functions, and the Stellar CLI
Deploying on Stellar testnet and more!

Additional Resources:

Julian-dev28 / consensus-hackathon-c2defi

everything you need to know about the consensus hackathon

Consensus Hackathon Cash to DeFi

Welcome to the Consensus Hackathon Cash to DeFi track! This README serves as your comprehensive guide to everything you need to know about the hackathon, from the workshop overview to important resources and judging criteria.

Workshop Overview

This hackathon track is based on the Consensus Workshop: Cash to DeFi Track. The workshop aims to onboard developers to the Stellar ecosystem and provide guidance on building decentralized finance (DeFi) applications using Rust and smart contracts.

Workshop

Introduction to Rust and the Development Environment
Building Defi Smart Contracts
Building Defi Dapp Frontend
Conclusion

Workshop Resources

The concepts behind the Staking Workshop are designed to help you understand the basics of Rust and smart contract development on the Stellar network.

The following resources cover the concepts behind the staking example and provide a foundation for building more complex applications.

Introduction to Rust and the Development Environment

Stellar Docs:…

View on GitHub

Upcoming Streams

Looking for some live support? Join our next stream. All sessions start at 12pm EDT.

7/30: Build a dApp
8/1: Intro to Passkeys
8/6: Migrating from Web2 to Web3
8/8: Stellar Community Fund

Building Hello World Smart Contracts: Solidity vs. Soroban Rust SDK - A Step-by-Step Guide

Julian Martinez — Tue, 09 Jul 2024 13:17:25 +0000

How to migrate smart contracts from Ethereum’s Solidity to Soroban Rust
In this tutorial, we'll explore the intricacies of two major smart contract programming environments: Ethereum's Solidity and Soroban’s Rust SDK and why should consider migrating your smart contracts to Rust

Why would a blockchain developer choose Rust over Solidity?

In the blockchain and smart contract realm, Rust is a standout choice for developers, and here's why:

Speed & Efficiency: Rust whizzes through tasks like a sports car in style. It is super fast, even outpacing C++ when it comes to speed and efficiency so that your blockchain operations are not just quick but also smart, saving on resources.
Type Safety: Picture Rust's type system as a meticulous inspector, who is watching each bit of your code at compile time. This means fewer errors and a safer environment for your smart contracts.
Memory Safety Without the Overhead: Rust boasts top-shelf memory safety, acting as an invisible shield against vulnerabilities critical in the blockchain world. And it does this leanly without needing a garbage collector, keeping your projects lean and fortified.
Conquering Concurrency with Ease: In blockchain, handling simultaneous transactions is like juggling fireballs. Rust excels in managing multiple operations seamlessly, preventing the common complications seen in other languages. This leads to faster, safer processing of transactions, enhancing the overall performance of your smart contracts. Rust combines speed, safety, and execution efficiency making it an ideal language for blockchain development where such qualities are demanded. So how does Rust stack up against Solidity?

What’s the difference between EVM and Soroban?

What is the EVM?

The Ethereum Virtual Machine (EVM) is a core component of the Ethereum blockchain network. It is a virtual environment that allows for the execution of smart contracts and decentralized applications (dApps). While Ethereum is the primary network utilizing the EVM, other blockchain platforms have adopted or created compatible versions of the EVM. For instance:

Avalanche has its own virtual machine, the Avalanche Virtual Machine (AVM), but it also supports the EVM through its C-Chain, enabling compatibility with Ethereum-based applications.
Optimism and Polygon are Layer 2 solutions built on top of the Ethereum blockchain. They use Optimistic Rollups and Polygon's own technology, respectively, but are compatible with the EVM. This means they can run Ethereum smart contracts and dApps.

Each blockchain network can have its own consensus mechanisms, underlying architecture, and protocol implementations. Geth (Go Ethereum, an implementation of an Ethereum node in the Go programming language) is specifically an Ethereum client, and while other networks might draw inspiration or use aspects of Ethereum's technology, they often have distinct core protocols and implementations.

In EVM Land, Solidity is the go-to language for developing smart contracts. Here's a quick rundown for my fellow builders:

Object-Oriented Approach: Just like other OOP languages, Solidity organizes code around data and objects, not just functions and logic.
High-Level Language: It abstracts away from the nitty-gritty of computer hardware, making development smoother and more intuitive.
Statically-Typed: Solidity checks your code for errors and type mismatches at compile time, saving you from a lot of headaches later.

What makes Solidity stand out is its role in powering decentralized transactions and managing blockchain accounts. Plus, if you're comfortable with JavaScript, C++, and Python you'll find Solidity's syntax familiar.

What is Soroban?

Soroban is a smart contracts platform with sensibility, built-to-scale, batteries-included and developer-friendly wants.

While it works great with Stellar being that it shares the blockchain's values of scale and sensibility, it neither depends nor requires Stellar at all and can be used by any transaction processor, including other blockchains, L2s, and permissioned ledgers.

Currently, Soroban is available as a part of the v20 of Stellar protocol stable release. The package for the module consists of - smart contracts environment, a Rust SDK, A CLI, and an RPC server. Writing and testing of the contracts can be carried out on developers' local machines or deployed to Testnet.

Which programming language is used for Stellar smart contracts?

Introduced in 2022, the Soroban Rust SDK is a suite of tools specifically for writing smart contracts on the Soroban platform. Built on Rust, it enables developers to create decentralized finance applications, automated market makers, and tokenized assets, while also leveraging some of Stellar's core functionalities.

How to Build a Hello World Smart Contract

We will create two "Hello World" contracts: first in Solidity, then using the Soroban Rust SDK.

Here is the video if you want to follow along:

Solidity Version

Open the remix-ide in your browser by navigating to: https://remix.ethereum.org/

Click on the “create new file” icon in the "File Explorer" tab:

Type the file name “HelloWorld.sol” and enter the following code into the ide:

// SPDX-License-Identifier: MIT
// compiler version must be greater than or equal to 0.8.20 and less than 0.9.0
pragma solidity >=0.7.0 <0.9.0;

contract HelloWorld {
    function hello(string memory to) public pure returns(string memory){
        string memory greeting = string(abi.encodePacked("hello ", to));
        return greeting;
    }
}

Let's take a quick intermission to break down the code:

// SPDX-License-Identifier: MIT

This comment indicates the license under which the code is released (MIT License).

pragma solidity >=0.7.0 <0.9.0;

This line specifies that this code is compatible with Solidity compiler versions greater than or equal to 0.7.0 and less than 0.9.0. It sets compiler version boundaries to ensure code compatibility and expected behavior.

contract HelloWorld {

Here, we declare a Solidity contract named "HelloWorld."

function hello(string memory to) public pure returns(string memory){

This line defines a function named "hello."

It takes one argument, a string named "to," which represents the name of the person you want to greet.
The function is marked as "public," which means it can be called externally.
The "pure" keyword indicates that this function does not modify the contract's state.

string memory greeting = string(abi.encodePacked("hello ", to));

Inside the "hello" function, a new string variable "greeting" is declared.

It is constructed by concatenating "hello" with the provided name using the abi.encodePacked function.
The result is stored in the "greeting" variable.

return greeting;

Finally, the function returns the "greeting" string as the result of the function call.

Now back to our regularly scheduled programming(🥁)

Once the code is in Remix, click the "Solidity Compiler" icon below the “File Explorer” icon.

Then, click “Compile HelloWorld.sol” or simply press cmd+s

Once compiled successfully click the icon below “Solidity Compiler” that is “Deploy & Run Transactions”.

Without changing any of the values as shown above just click the “Deploy” button to deploy your smart contract. Once deployed you will find your smart contract just below in “Deployed Contracts” heading.

Click “>” before your contract you will see a button “hello” below as our contract has a hello function variable that returns a string composed of “hello” + the value you passed in for the to argument.

Define an value for to and then click the “hello” button to return the greeting:

Nicely done! Now for the real Mccoy!

Soroban Rust SDK Version

Open the smart contract playground built for Soroban, okashi, in your browser by navigating to: https://okashi.dev/

Start a new project and name it HelloWorld.

Enter the following code into the IDE:

#![no_std]
use soroban_sdk::{contract, contractimpl, symbol_short, vec, Env, Symbol, Vec};

#[contract]
pub struct Contract;

#[contractimpl]
impl Contract {
    /// Say Hello to someone or something.
    /// Returns a length-2 vector/array containing 'Hello' and then the value passed as `to`.
    pub fn hello(env: Env, to: Symbol) -> Vec<Symbol> {
        vec![&env, symbol_short!("Hello"), to]
    }
}

Time for another commercial break already!?!

Don't worry this one is going to help you polish up on your Rust(🥁)

#![no_std]

This directive is used at the beginning of the Rust code to specify that the standard library (std) should not be included in the build. In Soroban contracts, the standard library is excluded because it's large and not suitable for deployment on blockchains.

use soroban_sdk::{contract, contractimpl, symbol_short, vec, Env, Symbol, Vec};

The use keyword is used to import external dependencies or modules into the current Rust code.
soroban_sdk: This is the crate/module that provides the necessary functionalities and types for Soroban contracts.
{contract, contractimpl, symbol_short, vec, Env, Symbol, Vec}: These are the specific items being imported from the soroban_sdk module, including attributes, macros (contract, contractimpl, symbol_short!), and data types (Env, Symbol, Vec).

#[contract]
pub struct Contract;

#[contract] is an attribute applied to the Contract struct, designating it as the type to which contract functions are associated. It implies that this struct will have contract functions implemented for it.
pub struct Contract; defines a public struct named Contract. In Soroban contracts, contract functions are associated with this struct.

#[contractimpl]
impl Contract {
    pub fn hello(env: Env, to: Symbol) -> Vec<Symbol> {
        vec![&env, symbol_short!("Hello"), to]
    }
}

#[contractimpl] is an attribute that is applied to the impl block for the Contract struct, indicating that this block contains the implementation of contract functions.
impl Contract { ... }: This is the implementation block for the Contract struct, where contract functions are defined.
pub fn hello(env: Env, to: Symbol) -> Vec { ... }: This line defines a public function named hello. It takes two arguments, env of type Env and "to" of type Symbol(in this case, a string of up to 8 characters). It also specifies the return type as Vec
{ vec![&env, symbol_short!("Hello"), to] }: This block of code is where a length-2 vector/array containing "Hello" and then the value passed as "to" is constructed and returned.

That's all the breaks we have for today. Don't get crabby on me!(🥁)

Now that the code is in the editor, compile it by clicking the compile button or pushing “cmd+k”

Open the contract tab and push the hello() button

Pass in an value for to and click the “call” button

The "Console" tab should open and you should see your message!

Comparison and Conclusion

Both Solidity and Soroban provide the functionality to declare public functions. However, their approaches to data handling and state management differ, influenced by their core languages – JavaScript for Solidity and Rust for Soroban. Solidity is ideal for those familiar with JavaScript, while Soroban's Rust foundation offers advantages in concurrency and safety.

Additional Resources

For developers interested in transitioning from EVM to Soroban, we have comprehensive documentation that covers everything from the basics of the Soroban Rust SDK compared to Solidity, up to deploying your own smart contracts with Rust. Learn more about migrating from EVM here.
If you’re looking for more tools and want to learn more about the sdk, you can check out the official Soroban docs here.

Stay tuned for more insights and tutorials in this series, and happy coding in the world of smart contracts!

Build Better With Stellar Smart Contract Challenge: A Companion Guide

Julian Martinez — Tue, 09 Jul 2024 13:16:16 +0000

Interested in our web3 challenge but not sure where to start? In this post, we'll share an overview of web3 and blockchain technology and set you up with all the information you need to learn about Stellar and the Soroban smart contracts platform.

A Quick Primer on Web3

What is web3 and blockchain?

Blockchain provides a way for people around the world to collectively maintain a database without relying on a central authority. It's a model for sharing and reconciling information, designed for our interconnected, global future. Read Blockchain Basics.

How does crypto relate to this?

The blockchain, the core technology behind cryptocurrencies, is replicated across all computers in the network. New data is added to this chain using cryptographic methods that make it simple to detect even the smallest alteration to any previous transaction. Each time a new block of data is added, the entire network effectively verifies the integrity of all earlier data. This process is known as reaching consensus.

Why are people skeptical of crypto/blockchain?

Critics of cryptocurrency and blockchain technology often make three main arguments:

Crypto and blockchain lack practical applications.
Traditional technologies outperform blockchain for similar functions.
The industry faces significant regulatory uncertainty.

By participating in the Stellar ecosystem and this hackathon, we aim to challenge at least the first two points. Our goal is to show that you can:

Contribute to innovative decentralized finance solutions.
Help provide financial access to billions of people.

While regulatory uncertainty remains a concern, it’s important to remember that most emerging technologies experience regulatory uncertainty, and we encourage developers to explore these technologies responsibly. Our hope is to bridge traditional and decentralized finance in a compliant manner.

What are Smart Contracts?

Smart contracts are programs stored on a blockchain that run automatically when predetermined conditions are met. However, a platform that only allows developers to write code to a blockchain is not enough. To create robust, practical, and sustainable products and services, additional features are necessary to ensure safe and efficient execution. Learn about smart contract basics.

Why are dApps interesting?

Decentralized Applications (dApps) are programs that operate on blockchain networks, enabling direct peer-to-peer services. This eliminates the need for centralized intermediaries, effectively decentralizing various processes.

A common example of a dApp is a decentralized exchange (DEX). On a DEX, users can trade assets directly with each other using a transparent, peer-to-peer order book. This removes the need for a broker or other middleman. Decentralized apps have the potential to improve efficiency and transparency across various applications. They are particularly useful for:

Lending and borrowing
Exchanging value

By removing intermediaries, dApps can offer these services more directly and often at lower costs than traditional centralized systems.

DeFi Glossary

Decentralized Finance (DeFi): A movement that leverages decentralized networks to transform traditional financial products into trustless and transparent protocols.

Wallets: Used to store digital assets like tokens or NFTs, associated with an account. Must be funded on both testnet and mainnet.Learn more about connecting wallets to a dApp here.
Testnet: Sandbox blockchain environment for building and prototyping.
Mainnet: Production blockchain environment for real assets/transactions.
Tokens: These are assets that can be created or are already on the network. They can be tied to real-world value (ex. Stablecoins are pegged to real fiat currency like the dollar), they can be representative of a real-world asset, or they can simply be made unrelated to anything in the real world (ex. memecoin)
Staking: Staking is the process of putting digital assets to productive use within a blockchain network. In decentralized finance (DeFi) applications, users can 'stake' their assets, allowing them to be used by the network in various ways. This often generates rewards for the asset holder in the form of earned interest.
Liquidity Pools: Liquidity pools are collections of funds locked in smart contracts, enabling decentralized trading, lending, and more. Users contribute assets and receive Liquidity Provider (LP) tokens, representing their share. These pools ensure liquidity for traders, reducing slippage and improving market efficiency. Liquidity providers earn rewards through transaction fees and additional incentives from DeFi platforms.

An Overview of Web3 Development

Web3 development introduces new paradigms for creating decentralized applications. This section covers key aspects of the Web3 development process:

Local Development: Local development involves using specialized tools and frameworks that allow you to write, compile, and test smart contracts locally. Stellar's new smart contract platform, Soroban, uses Rust for writing smart contracts. For local development, you'll use the Soroban CLI, which allows you to set up a local network, compile Rust contracts, and deploy them. The Stellar SDK is still used for interacting with the Stellar network, and it's available in multiple languages including JavaScript, Python, and others. Tools like the Stellar Laboratory remain useful for testing operations, and the Stellar Core can be used for running a local network for testing purposes.
App Hosting: Stellar apps usually have a traditional web front-end that can be hosted on standard web servers like Vercel. The backend interacts with the Stellar network through Horizon API. Smart contracts on Stellar, called Stellar Core Contracts, are deployed directly to the Stellar network. Users interact with your app through Stellar-compatible wallets or interfaces you create using the Stellar SDK.
Compute and Storage: Computation happens on the Stellar network when transactions or operations are processed. For data storage, Stellar offers limited on-chain storage through account data entries. For larger data needs, developers often use off-chain solutions and store references or hashes on the Stellar blockchain. Payments for network usage are made in Lumens (XLM), Stellar's native currency.

For more in-depth information about the Stellar tech stack, visit our dev docs.

Learn How to Build dApps

Learn how to build dApps with an example built by PaltaLabs illustrating the implementation of a full-stack dApp using a simple greeting contract. Check out the Create Soroban DApp repository for a practical guide on developing decentralized applications on the Stellar network:

paltalabs / create-soroban-dapp

Boilerplate for Soroban dApps in ReactJS

@create-soroban-dapp

@create-soroban-dapp is both an npx script and a boilerplate dApp for kickstarting any of your ideas for a Soroban-based DApp.

Largely inspired by the ink!athon project by Scio Labs and by @create-t3-app by T3 Open Source for the script mechanisms.

Check the LIVE VERSION of the dApp utilizing already deployed testnet contracts!

Read the docs here 📚📚

Introduction

@create-soroban-dapp is composed of two key components:

A boilerplate dApp utilizing the @soroban-react library.
An npx script allowing any developer to quickly start their project via the command line using npx create-soroban-dapp.

Usage

To create a new Soroban dApp project, simply use one of the following commands:

npx create-soroban-dapp@latest

npm create soroban-dapp@latest

After the script completes, navigate into your newly created project directory:

cd your-project-name

Troubleshooting

If the `npm create` Script Malfunctions

The script, in its early stage, might not function perfectly on every OS and configuration. If it…

View on GitHub

DEV Community: Julian Martinez

Building a multi-agent Kalshi algotrader with Sentient Foundation's ROMA SDK

What KXBTC15M is

Architecture overview

The pipeline DAG

How the Python ROMA service works

The rate-limit problem

What the two ROMA agents actually do

Limitations, honestly

What I actually think about using ROMA here

Introducing Auto Slippage: Making The OKX DEX API Smarter

The Problem

A Better Way

Parameters

Example Integration

What This Means For Your Product

Try It Yourself

Prerequisites

Setup

Looking Forward

OKX DEX API Guide: Building a Solana Token Swap Interface

DEX API Utility File Overview

Prerequisites

Setup

Option 1: Local Development

Option 2: Using Replit

Initial Configuration

Getting Swap Quotes

Executing Transactions

React Component Implementation

Additional Resources

OKX DEX API Essentials: Single and Cross-Chain Swaps on Avalanche C-Chain

DEX API Utility File Overview

Prerequisites

Setup

Option 1: Local Development

Option 2: Using Replit

Initial Configuration

Getting Token Quotes

Generating Headers

Calling the API

Token Approvals

Generating Headers

Calling the API

Single-Chain Swaps

Cross-Chain Swaps

Signing and Sending Transactions

Using the Functions

Conclusion

Additional Resources

Building with Fractal Bitcoin: OKX OS Integration Guide

Introduction

Quick Links 🔗

Project Setup 🛠️

Prerequisites

Installation

Project Structure 📁

Implementation Guide 📚

1. Proxy Server (ordinals-server.cjs)

2. Service Layer (okxServices.ts)

3. React Components

Collections Explorer (OrdinalsFetcher.tsx)

Inscriptions Viewer (RetrieveInscriptions.tsx)

Trade History (TradeHistory.tsx)

Security Features 🔒

Quick Tips ⚡

Conclusion

Community & Support 🤝

Integrate the OKX DEX Widget in Just 30 Minutes

Integrating OKX DEX Widget in Your React App: A Step-by-Step Guide

Table of Contents

Resources

What We're Building

Setting Up Our Project

Creating Our Components

1. Navigation Component

2. Landing Page Component

3. Widget Page Component

OKX DEX Widget Configuration Parameters

Additional Information

If the `npm create` Script Malfunctions