OKX DEX API Essentials: Einzel- und Cross-Chain-Swaps auf der Avalanche C-Chain

Bereit, DEX-Aggregation und Cross-Chain-Swaps in Ihre EVM-DApp zu integrieren? Dieses Tutorial zeigt Ihnen, wie Sie mit der OKX DEX-API interagieren, um Token-Austausche sowohl innerhalb einer einzelnen Kette als auch über verschiedene Blockchains der Avalanche C-Chain hinweg durchzuführen. Ihre Implementierung verwendet Web3.js und die OKX DEX-API, um eine robuste Handhabung von Angeboten, Genehmigungen und Swap-Ausführungen zu schaffen. Standardmäßig zeigt diese Implementierung Folgendes:

• Single-Chain-Swaps: AVAX zu WAVAX auf Avalanche C-Chain
• Cross-Chain-Swaps: AVAX auf Avalanche C-Chain zu POL auf Polygon

Dateistruktur

Dieses Tutorial konzentriert sich auf die Implementierung von dexUtils.js, einer Dienstprogrammdatei, die alle notwendigen Funktionen für die Interaktion mit der OKX DEX API enthält. Diese Datei behandelt:

• Netzwerk- und Token-Konfigurationen
• Header-Konstruktion
• API-Endpunkt- und Aufrufkonstruktion
• Angebotsabfrage
• Token-Genehmigungen
• Single-Chain-Swaps
• Cross-Chain-Swaps

Voraussetzungen

Bevor Sie beginnen, benötigen Sie:

• Node.js installiert (v20 oder höher)
• Grundkenntnisse über Web3- und Blockchain-Konzepte
• Eine Wallet-Adresse und ein privater Schlüssel
• OKX-API-Anmeldeinformationen (API-Schlüssel, geheimer Schlüssel und Passphrase) aus dem OKX-Entwicklerportal
• Eine Projekt-ID aus dem OKX Developer Portal
• Git auf Ihrem Computer installiert

Aufstellen

Sie haben zwei Möglichkeiten, um loszulegen:

Option 1: Lokale Entwicklung

1. Klonen Sie das Repository und wechseln Sie zum Demo-Zweig:

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

1. Installieren Sie die Abhängigkeiten:

npm install

1. Richten Sie Ihre Umgebungsvariablen ein:

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: Verwenden von Replit

1. Forken Sie das Replit-Projekt:
   OKX OS Avalanche Swap App

2. Fügen Sie Ihre Umgebungsvariablen auf der Registerkarte Replit Secrets (im Bedienfeld „Tools“) hinzu:

   • Klicken Sie auf „Geheimnisse“
   • Fügen Sie jede Umgebungsvariable hinzu:
     • REACT_APP_API_KEY
     • REACT_APP_SECRET_KEY
     • REACT_APP_API_PASSPHRASE
     • REACT_APP_PROJECT_ID
     • REACT_APP_USER_ADDRESS
     • REACT_APP_PRIVATE_KEY

3. Klicken Sie auf „Ausführen“, um Ihre Entwicklungsumgebung zu starten

Erstkonfiguration

In diesem Abschnitt wird gezeigt, wie Sie Ihre Netzwerkkonfigurationen und Token-Adressen einrichten, die für die Interaktion mit dem OKX DEX auf der Avalanche C-Chain erforderlich sind:

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

// 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
 */
function getAggregatorRequestUrl(methodName, queryParams) {
    return (
        apiBaseUrl +
        methodName +
        "?" +
        new URLSearchParams(queryParams).toString()
    );
}

Token-Angebote einholen

Die Angebotsfunktion ruft aktuelle Preise und Tauschrouten ab. Hier ist die Umsetzung:

Header generieren

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

Aufruf der API

npm install

Token-Genehmigungen

Implementieren Sie diese Genehmigungsfunktionen für ERC20-Token vor dem Tausch:

Header generieren

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

Aufruf der API

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

// 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
 */
function getAggregatorRequestUrl(methodName, queryParams) {
    return (
        apiBaseUrl +
        methodName +
        "?" +
        new URLSearchParams(queryParams).toString()
    );
}

Single-Chain-Swaps

Die folgende Implementierung demonstriert die Ausführung von Swaps innerhalb derselben Kette, insbesondere von AVAX zu WAVAX auf der Avalanche C-Chain:

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

Cross-Chain-Swaps

Die folgende Implementierung zeigt, wie kettenübergreifende Swaps von AVAX (Avalanche C-Chain) zu MATIC (Polygon) ausgeführt werden, einschließlich Angebotsabruf und Transaktionsausführung:

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

Transaktionen signieren und senden

Die sendSignedTransaction-Methode signiert und sendet Transaktionen mit dem privaten Wallet-Schlüssel des Benutzers

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

Verwendung der Funktionen

Die Flexibilität der Anwendung wird durch die Params-Objekte swapParams und quoteParams demonstriert. Diese Objekte fungieren als Konfigurationspunkte und ermöglichen es Benutzern, die Angebotsanfragen und Swaps entsprechend ihren spezifischen Anforderungen anzupassen.

Im swapParams-Objekt finden Sie beispielsweise die folgenden Eigenschaften:

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

Hier können Sie die ChainId (das Blockchain-Netzwerk, das Sie verwenden möchten), die fromTokenAddress und toTokenAddress (die Token, die Sie tauschen möchten), die Anzahl der Token, die Sie tauschen möchten, den akzeptablen Slippage-Prozentsatz und Ihren eigenen angeben userWalletAddress.

Mit dem quoteParams-Objekt im dexUtils.js können Sie die Quell- und Ziel-Blockchain-Netzwerke konfigurieren:

/**
 * Helper function to get headers for swap API calls
 * @param {Object} swapParams - Swap parameters
 * @returns {Object} Headers with authentication
 */
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
 */
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
 */
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);
}

In diesem Beispiel können Sie die fromChainId (das Blockchain-Netzwerk, von dem Sie ausgehen) und die toChainId (das Blockchain-Netzwerk, zu dem Sie wechseln möchten) sowie die fromTokenAddress und toTokenAddress angeben. Dadurch können Sie Ihre Token problemlos über verschiedene Blockchain-Ökosysteme hinweg verschieben, beispielsweise von Avalanche zu Polygon.

Darüber hinaus können Sie die Empfangsadresse festlegen, um anzugeben, wohin die ausgetauschten Token gesendet werden sollen, die Slippage-Toleranz anpassen und sogar den PriceImpactProtectionPercentage konfigurieren, um sich vor ungünstigen Preisbewegungen zu schützen.

Durch die Bereitstellung dieser Konfigurationsoptionen wird die Anwendung äußerst anpassungsfähig, sodass Entwickler die App an die spezifischen Bedürfnisse ihrer Benutzer anpassen können.

Ein funktionierendes Beispiel dafür, wie diese Funktionen in Komponenten implementiert und in eine App integriert werden, finden Sie in der Beispiel-React-Anwendung.

Abschluss

Vielen Dank, dass Sie sich die Zeit genommen haben, sich dieses Tutorial anzusehen! Ich hoffe, dass die bereitgestellten Informationen hilfreich waren, um zu verstehen, wie Sie die Leistungsfähigkeit der OKX DEX Aggregator API in Ihren eigenen Projekten nutzen können.

Zusätzliche Ressourcen

• OKX DEX API-Dokumentation
• Web3.js-Dokumentation
• Avalanche C-Chain-Dokumentation

---

Fanden Sie das hilfreich? Vergessen Sie nicht, sich die Ressourcen am Anfang des Artikels anzusehen, einschließlich des Standardcodes und der Dokumentation. Treten Sie der OKX OS-Community bei, um mit anderen Entwicklern in Kontakt zu treten, und folgen Sie Julian auf Twitter, um weitere Web3-Entwicklungsinhalte zu erhalten!

---

Dieser Inhalt dient nur zu Informationszwecken und deckt möglicherweise Produkte ab, die in Ihrer Region nicht verfügbar sind. Es repräsentiert die Ansichten des Autors/der Autoren und nicht die Ansichten von OKX. Es ist nicht beabsichtigt, (i) eine Anlageberatung oder Anlageempfehlung bereitzustellen; (ii) ein Angebot oder eine Aufforderung zum Kauf, Verkauf oder Besitz digitaler Vermögenswerte oder (iii) Finanz-, Buchhaltungs-, Rechts- oder Steuerberatung. Der Besitz digitaler Vermögenswerte, einschließlich Stablecoins und NFTs, birgt ein hohes Risiko und kann stark schwanken. Sie sollten sorgfältig abwägen, ob der Handel oder das Halten digitaler Vermögenswerte angesichts Ihrer finanziellen Situation für Sie geeignet ist. Bei Fragen zu Ihren spezifischen Umständen wenden Sie sich bitte an Ihren Rechts-/Steuer-/Investmentexperten. Die in diesem Beitrag enthaltenen Informationen (einschließlich Marktdaten und statistischer Informationen, sofern vorhanden) dienen ausschließlich allgemeinen Informationszwecken. Obwohl bei der Erstellung dieser Daten und Grafiken die größtmögliche Sorgfalt angewendet wurde, wird keine Verantwortung oder Haftung für etwaige darin enthaltene Sachfehler oder Auslassungen übernommen. Sowohl OKX Web3 Wallet als auch OKX NFT Marketplace unterliegen separaten Nutzungsbedingungen unter www.okx.com.

© 2024 OKX. Dieser Artikel darf in seiner Gesamtheit reproduziert oder verbreitet werden, oder es dürfen Auszüge von 100 Wörtern oder weniger dieses Artikels verwendet werden, sofern diese Verwendung nicht kommerziell ist. Bei jeder Vervielfältigung oder Verbreitung des gesamten Artikels muss außerdem deutlich sichtbar sein: „Dieser Artikel ist © 2024 OKX und wird mit Genehmigung verwendet.“ Zulässige Auszüge müssen auf den Namen des Artikels verweisen und eine Quellenangabe enthalten, zum Beispiel „Integrieren Sie das OKX DEX Widget in nur 30 Minuten, Julian Martinez, © 2024 OKX.“ Es sind keine abgeleiteten Werke oder andere Verwendungen dieses Artikels gestattet.

Das obige ist der detaillierte Inhalt vonOKX DEX API Essentials: Einzel- und Cross-Chain-Swaps auf der Avalanche C-Chain. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!