OKX DEX API Guide: Building a Solana Token Swap Interface

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

npm install

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

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";

/**
 * 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];
}

/**
 * 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 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;