OKX DEX API Essentials: Pertukaran Tunggal dan Cross-Chain pada Avalanche C-Chain

Bersedia untuk menyepadukan pengagregatan DEX dan pertukaran rantai silang ke dalam DApp EVM anda? Tutorial ini menunjukkan kepada anda cara berinteraksi dengan API OKX DEX untuk melakukan pertukaran token dalam satu rantaian dan merentasi rantaian blok yang berbeza daripada Avalanche C-Chain. Pelaksanaan anda akan menggunakan Web3.js dan OKX DEX API untuk membuat pengendalian yang mantap bagi sebut harga, kelulusan dan pelaksanaan pertukaran. Secara lalai, pelaksanaan ini menunjukkan:

• Pertukaran rantaian tunggal: AVAX kepada WAVAX pada Avalanche C-Chain
• Pertukaran rentas rantai: AVAX pada Avalanche C-Chain kepada POL pada Poligon

Struktur Fail

Tutorial ini memfokuskan pada pelaksanaan dexUtils.js, fail utiliti yang mengandungi semua fungsi yang diperlukan untuk berinteraksi dengan API OKX DEX. Fail ini mengendalikan:

• Konfigurasi rangkaian dan token
• Pembinaan tajuk
• Pembinaan titik akhir API dan panggilan
• Pendapatan petikan
• Kelulusan token
• Pertukaran rantaian tunggal
• Pertukaran silang rantai

Prasyarat

Sebelum bermula, anda perlu:

• Node.js dipasang (v20 atau lebih baru)
• Pengetahuan asas tentang Web3 dan konsep blockchain
• Alamat dompet dan kunci peribadi
• Kelayakan API OKX (Kunci API, Kunci Rahsia dan Frasa Laluan) daripada Portal Pembangun OKX
• ID Projek daripada Portal Pembangun OKX
• Git dipasang pada mesin anda

Persediaan

Anda mempunyai dua pilihan untuk bermula:

Pilihan 1: Pembangunan Tempatan

1. Klon repositori dan tukar ke cawangan demo:

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

1. Pasang kebergantungan:

npm install

1. Sediakan pembolehubah persekitaran anda:

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

Pilihan 2: Menggunakan Replit

1. Fork the Replit project:
   OKX OS Avalanche Swap App

2. Tambahkan pembolehubah persekitaran anda dalam tab Rahsia Replit (terletak dalam panel Alat):

   • Klik pada "Rahsia"
   • Tambahkan setiap pembolehubah persekitaran:
     • 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. Klik "Jalankan" untuk memulakan persekitaran pembangunan anda

Konfigurasi Awal

Bahagian ini menunjukkan cara untuk menyediakan konfigurasi rangkaian dan alamat token anda yang diperlukan untuk berinteraksi dengan OKX DEX pada 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()
    );
}

Mendapatkan Sebut Harga Token

Fungsi sebut harga mendapatkan semula harga semasa dan laluan pertukaran. Inilah pelaksanaannya:

Menjana Pengepala

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

Memanggil API

npm install

Kelulusan Token

Laksanakan fungsi kelulusan ini untuk token ERC20 sebelum bertukar:

Menjana Pengepala

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

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

Pertukaran Rantaian Tunggal

Pelaksanaan berikut menunjukkan pelaksanaan pertukaran dalam rantaian yang sama, khususnya daripada AVAX kepada WAVAX pada Rantaian C Avalanche:

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

Pertukaran Rentas Rantaian

Pelaksanaan berikut menunjukkan cara untuk melaksanakan pertukaran rantaian silang daripada AVAX (Rantai C-Avalanche) kepada MATIC (Polygon), termasuk perolehan sebut harga dan pelaksanaan transaksi:

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

Menandatangani dan Menghantar Transaksi

Kaedah sendSignedTransaction menandatangani dan menghantar transaksi menggunakan kunci peribadi dompet pengguna

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

Menggunakan Fungsi

Fleksibiliti aplikasi ditunjukkan melalui objek Params, swapParams dan quoteParams. Objek ini bertindak sebagai titik konfigurasi, membolehkan pengguna menyesuaikan permintaan sebut harga dan pertukaran berdasarkan keperluan khusus mereka.

Sebagai contoh, dalam objek swapParams, anda akan menemui sifat berikut:

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



<p>Di sini, anda boleh menentukan chainId (rangkaian blockchain yang anda mahu gunakan), fromTokenAddress dan toTokenAddress (token yang anda ingin tukar), jumlah token yang anda ingin tukar, peratusan slippage yang boleh diterima dan anda sendiri userWalletAddress.</p>

<p>PetikanParams dalam objek dexUtils.js membolehkan anda mengkonfigurasi sumber dan menyasarkan rangkaian blok:<br>
</p>

<pre class="brush:php;toolbar:false">
/**
 * 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);
}
</object></object>

Dalam contoh ini, anda boleh menentukan fromChainId (rangkaian blockchain yang anda mulakan) dan toChainId (rangkaian blockchain yang anda ingin tukar), serta fromTokenAddress dan toTokenAddress. Ini membolehkan anda mengalihkan token anda dengan mudah merentasi ekosistem blok yang berbeza, seperti dari Avalanche ke Poligon.

Selain itu, anda boleh menetapkan receiveAddress untuk menetapkan tempat token yang ditukar harus dihantar, melaraskan toleransi kegelinciran dan juga mengkonfigurasi priceImpactProtectionPercentage untuk melindungi daripada pergerakan harga yang tidak menguntungkan.

Dengan mendedahkan pilihan konfigurasi ini, aplikasi menjadi sangat mudah disesuaikan, membolehkan pembina menyesuaikan apl dengan keperluan khusus pengguna mereka.

Anda boleh mendapatkan contoh yang berfungsi tentang cara fungsi ini dilaksanakan dalam komponen dan disepadukan ke dalam apl dengan melihat contoh aplikasi React.

Kesimpulan

Terima kasih kerana meluangkan masa untuk melihat tutorial ini! Saya harap maklumat yang diberikan telah membantu dalam memahami cara memanfaatkan kuasa OKX DEX Aggregator API dalam projek anda sendiri.

Sumber Tambahan

• Dokumentasi API OKX DEX
• Dokumentasi Web3.js
• Dokumentasi Rantaian C Avalanche

---

Temui ini membantu? Jangan lupa untuk menyemak sumber pada permulaan artikel, termasuk kod boilerplate dan dokumentasi. Sertai Komuniti OS OKX untuk berhubung dengan pembangun lain, dan ikuti Julian di Twitter untuk lebih banyak kandungan pembangunan Web3!

---

Kandungan ini disediakan untuk tujuan maklumat sahaja dan mungkin meliputi produk yang tidak tersedia di rantau anda. Ia mewakili pandangan pengarang dan ia tidak mewakili pandangan OKX. Ia tidak bertujuan untuk memberikan (i) nasihat pelaburan atau cadangan pelaburan; (ii) tawaran atau permintaan untuk membeli, menjual atau memegang aset digital, atau (iii) nasihat kewangan, perakaunan, undang-undang atau cukai. Pegangan aset digital, termasuk stablecoin dan NFT, melibatkan tahap risiko yang tinggi dan boleh berubah-ubah dengan banyaknya. Anda harus mempertimbangkan dengan teliti sama ada berdagang atau memegang aset digital sesuai untuk anda berdasarkan keadaan kewangan anda. Sila rujuk profesional undang-undang/cukai/pelaburan anda untuk pertanyaan tentang keadaan khusus anda. Maklumat (termasuk data pasaran dan maklumat statistik, jika ada) yang dipaparkan dalam siaran ini adalah untuk tujuan maklumat am sahaja. Walaupun semua penjagaan yang munasabah telah diambil dalam menyediakan data dan graf ini, tiada tanggungjawab atau liabiliti diterima untuk sebarang kesilapan fakta atau peninggalan yang dinyatakan di sini. Kedua-dua OKX Web3 Wallet dan OKX NFT Marketplace tertakluk kepada syarat perkhidmatan yang berasingan di www.okx.com.

© 2024 OKX. Artikel ini boleh diterbitkan semula atau diedarkan secara keseluruhannya, atau petikan 100 patah perkataan atau kurang daripada artikel ini boleh digunakan, dengan syarat penggunaan tersebut bukan komersial. Sebarang pengeluaran semula atau pengedaran keseluruhan artikel juga mesti menyatakan dengan jelas: "Artikel ini adalah © 2024 OKX dan digunakan dengan kebenaran." Petikan yang dibenarkan mesti memetik nama artikel dan menyertakan atribusi, contohnya "Sepadukan Widget OKX DEX dalam Hanya 30 Minit, Julian Martinez, © 2024 OKX." Tiada karya terbitan atau penggunaan lain artikel ini dibenarkan.

Atas ialah kandungan terperinci OKX DEX API Essentials: Pertukaran Tunggal dan Cross-Chain pada Avalanche C-Chain. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!