OKX DEX API Essentials : échanges de chaînes simples et inter-chaînes sur la chaîne C d'Avalanche

Prêt à intégrer l'agrégation DEX et les échanges inter-chaînes dans votre DApp EVM ? Ce didacticiel vous montre comment interagir avec l'API OKX DEX pour effectuer des échanges de jetons à la fois au sein d'une seule chaîne et entre différentes blockchains de l'Avalanche C-Chain. Votre implémentation utilisera Web3.js et l'API OKX DEX pour créer une gestion robuste des devis, des approbations et de l'exécution des swaps. Par défaut, cette implémentation démontre :

• Échanges de chaîne unique : AVAX vers WAVAX sur Avalanche C-Chain
• Échanges inter-chaînes : AVAX sur Avalanche C-Chain vers POL sur Polygon

Structure du fichier

Ce tutoriel se concentre sur l'implémentation dexUtils.js, un fichier utilitaire qui contient toutes les fonctions nécessaires pour interagir avec l'API OKX DEX. Ce fichier gère :

• Configurations réseau et jetons
• Construction d'en-tête
• Point de terminaison de l'API et construction d'appels
• Récupération de devis
• Approbations des jetons
• Échanges à chaîne unique
• Échanges entre chaînes

Conditions préalables

Avant de commencer, vous avez besoin de :

• Node.js installé (v20 ou version ultérieure)
• Connaissance de base des concepts Web3 et blockchain
• Une adresse de portefeuille et une clé privée
• Identifiants de l'API OKX (clé API, clé secrète et phrase secrète) du portail des développeurs OKX
• Un ID de projet du portail des développeurs OKX
• Git installé sur votre machine

Installation

Vous avez deux options pour commencer :

Option 1 : Développement local

1. Clonez le dépôt et passez à la branche démo :

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

1. Installez les dépendances :

npm install

1. Configurez vos variables d'environnement :

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 : Utiliser Répliquer

1. Fork le projet Replit :
   Application d'échange d'avalanche OKX OS

2. Ajoutez vos variables d'environnement dans l'onglet Replit Secrets (situé dans le panneau Outils) :

   • Cliquez sur "Secrets"
   • Ajoutez chaque variable d'environnement :
     • 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. Cliquez sur "Exécuter" pour démarrer votre environnement de développement

Configuration initiale

Cette section montre comment configurer vos configurations réseau et les adresses de jetons nécessaires pour interagir avec OKX DEX sur l'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";

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

Obtenir des devis de jetons

La fonctionnalité de devis récupère les prix actuels et les itinéraires d'échange. Voici la mise en œuvre :

Générer des en-têtes

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

Appel de l'API

npm install

Approbations de jetons

Implémentez ces fonctions d'approbation pour les jetons ERC20 avant de les échanger :

Générer des en-têtes

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

Appel de l'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()
    );
}

Swaps à chaîne unique

L'implémentation suivante montre l'exécution de swaps au sein de la même chaîne, en particulier d'AVAX vers WAVAX sur 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,
    };
}

Échanges entre chaînes

L'implémentation suivante montre comment exécuter des échanges inter-chaînes d'AVAX (Avalanche C-Chain) vers MATIC (Polygon), y compris la récupération de cotations et l'exécution de transactions :

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

Signature et envoi de transactions

La méthode sendSignedTransaction signe et envoie des transactions à l'aide de la clé privée du portefeuille de l'utilisateur

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

Utiliser les fonctions

La flexibilité de l'application est démontrée à travers les objets Params, swapParams et quoteParams. Ces objets agissent comme des points de configuration, permettant aux utilisateurs de personnaliser les demandes de devis et les échanges en fonction de leurs besoins spécifiques.

Par exemple, au sein de l'objet swapParams, vous trouverez les propriétés suivantes :

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

Ici, vous pouvez spécifier le chainId (le réseau blockchain que vous souhaitez utiliser), le fromTokenAddress et le toTokenAddress (les jetons que vous souhaitez échanger), le nombre de jetons que vous souhaitez échanger, le pourcentage de glissement acceptable et le vôtre. userWalletAddress.

L'objet quoteParams dans dexUtils.js permet de configurer les réseaux blockchain source et cible :

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

Dans cet exemple, vous pouvez spécifier le fromChainId (le réseau blockchain à partir duquel vous partez) et le toChainId (le réseau blockchain vers lequel vous souhaitez basculer), ainsi que fromTokenAddress et toTokenAddress. Cela vous permet de déplacer facilement vos jetons à travers différents écosystèmes blockchain, comme d'Avalanche à Polygon.

De plus, vous pouvez définir le containAddress pour désigner l'endroit où les jetons échangés doivent être envoyés, ajuster la tolérance de glissement et même configurer le priceImpactProtectionPercentage pour vous protéger contre les mouvements de prix défavorables.

En exposant ces options de configuration, l'application devient hautement adaptable, permettant aux constructeurs d'adapter l'application aux besoins spécifiques de leurs utilisateurs.

Vous pouvez trouver un exemple concret de la façon dont ces fonctions sont implémentées dans des composants et intégrées dans une application en consultant l'exemple d'application React.

Conclusion

Merci d'avoir pris le temps de consulter ce tutoriel ! J'espère que les informations fournies vous ont été utiles pour comprendre comment exploiter la puissance de l'API OKX DEX Aggregator dans vos propres projets.

Ressources supplémentaires

• Documentation de l'API OKX DEX
• Documentation Web3.js
• Documentation de la chaîne C d'avalanche

---

Vous avez trouvé cela utile ? N'oubliez pas de consulter les ressources au début de l'article, y compris le code passe-partout et la documentation. Rejoignez la communauté OKX OS pour vous connecter avec d'autres développeurs et suivez Julian sur Twitter pour plus de contenu sur le développement Web3 !

---

Ce contenu est fourni à titre informatif uniquement et peut couvrir des produits qui ne sont pas disponibles dans votre région. Il représente le point de vue du ou des auteurs et ne représente pas le point de vue d’OKX. Il n’est pas destiné à fournir (i) des conseils en investissement ou une recommandation d’investissement ; (ii) une offre ou une sollicitation d'achat, de vente ou de détention d'actifs numériques, ou (iii) des conseils financiers, comptables, juridiques ou fiscaux. Les avoirs en actifs numériques, y compris les pièces stables et les NFT, comportent un degré de risque élevé et peuvent fluctuer considérablement. Vous devez soigneusement déterminer si le trading ou la détention d’actifs numériques vous convient, compte tenu de votre situation financière. Veuillez consulter votre professionnel du droit/fiscalité/investissement pour toute question concernant votre situation spécifique. Les informations (y compris les données de marché et les informations statistiques, le cas échéant) apparaissant dans cet article sont uniquement fournies à des fins d'information générale. Bien que tous les soins raisonnables aient été apportés à la préparation de ces données et graphiques, aucune responsabilité n'est acceptée pour toute erreur de fait ou omission exprimée dans le présent document. OKX Web3 Wallet et OKX NFT Marketplace sont soumis à des conditions de service distinctes sur www.okx.com.

© 2024 OKX. Cet article peut être reproduit ou distribué dans son intégralité, ou des extraits de 100 mots ou moins de cet article peuvent être utilisés, à condition qu'une telle utilisation soit non commerciale. Toute reproduction ou distribution de l'intégralité de l'article doit également indiquer clairement : « Cet article est © 2024 OKX et est utilisé avec autorisation. » Les extraits autorisés doivent citer le nom de l'article et inclure l'attribution, par exemple « Intégrez le widget OKX DEX en seulement 30 minutes, Julian Martinez, © 2024 OKX. » Aucune œuvre dérivée ou autre utilisation de cet article n'est autorisée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!