มาลองทำ Cross-Chain EVM ด้วย Axelar กัน !!

มาทำความรู้จักก่อนว่า Axelar คืออะไร ?

ณ ปัจจุบันเทคโนโลยี Blockchain นั้น แต่ละ Blockchain ยังไม่สามารถสื่อสารข้ามหากันได้ ดังนั้นหากผู้ใช้ต้องการจะโอนสินทรัพย์จาก Chain A ไปยัง Chain B ผู้ใช้ยังต้องพึ่งพาตัวกลาง (Centerlize Exchange) เช่น หากสินทรัพย์ผู้ใช้อยู่ Chain A ผู้ใช้จะต้องส่งสินทรัพย์นั้นเข้าที่ Centerlize Exchange ก่อน จากนั้นจึงค่อยส่งไปยังที่อยู่ของ Chain B หรือ ผู้ใช้สามารถใช้ Bridge Protocal ในการโอนสินทรัพย์ ซึ่งผู้พัฒนาจะต้องเขียน Smart Contract รองรับในทุก ๆ Chain

ดังนั้น Axelar จึงมาแก้ปัญหา เพื่อที่จะสร้าง Network ที่ทำให้การสื่อสาร Cross-Chain นั้นสามารถทำได้อย่างง่าย ซึ่งคุณสมบัติของ Axelar มีความสามารถในการ Plug-And-Play ทำผู้พัฒนานั้นสามารถเชื่อมต่อไปยัง Chain อื่น ๆ ได้อย่างง่ายดายซึ่งหากสนใจศึกษาเพิ่มเติมต่อ สามารถคลิ๊กเข้าไปศึกษาเพิ่มเติมได้

มาเริ่มลงมือกันเลยย

อย่างแรกต้องลงเครื่องมือที่จำเป็นในการใช้งานในเบื้องต้นดังนี้

yarn add ethers
yarn add @web3-react/core @web3-react/injected-connector
yarn add @axelar-network/axelarjs-sdk

ขั้นตอนที่ 1

ผมจะทำการเชื่อม web3 wallet กับ React ก่อน โดยส่วนนี้ผมจะใช้ Metamask Wallet ในการเริ่มต้นในการทำงาน

import { InjectedConnector } from "@web3-react/injected-connector";
export const injected = new InjectedConnector({
supportedChainIds: [1, 4, 3, 42, 5, 56, 97, 1337, 43113],
});

ซึ่งในส่วนนี้ผมจะทำการกำหนด ChainId ที่เราต้องการให้กระเป๋า Metamask ของเรา Support ซึ่งบทความนี้เราใช้เพียงแค่ ChainId 3 คือ Ethereum Ropsten Testnet กับ 43113 Avalanc C-Chain Testnet ก็เพียงพอแล้ว

จากนั้นในไฟล์ App.JS หรือ App.tsx ผมจะ Import Provider ครอบเป็น Parent Component ที่ระดับ App level

import { ethers } from "ethers";
import { Homepage } from "./pages/Homepage";

function getLibrary(provider: any) {
    return new ethers.providers.Web3Provider(provider, "any");
}
function App() {
    return (
        <Web3ReactProvider getLibrary={getLibrary}>
           <Homepage />
        </Web3ReactProvider>
    );
}
export default App;

ซึ่งในส่วนต่อไปจะต้องสร้างในส่วนของปุ่มในการ Connect Metamask ซึ่งผมจะข้ามในส่วนนี้ไป แต่จะให้ Link Git Repository ไว้ในด้านล่างของบนความแทนนะครับ

หน้าตา Cross-Chain ของเราคร่าวๆ ซึ่งไปปรับแต่งกันได้นะครับ 5555555

ขั้นตอนที่ 2

เริ่มต้นการใช้งาน Axelar SDK กันนะครับ ซึ่งเป็นเครื่องที่เราจะใช้ในการทำ Cross-Chain กัน หรือไว้โอน Token ข้ามจาก Chain A ไปยัง Chain B นะครับ

import { AxelarAssetTransfer, Environment } from "@axelar-network/axelarjs-sdk";
const api = new AxelarAssetTransfer({   environment:Environment.TESTNET });
export const getDepositAddress = async (
   fromChain: string = "ethereum",
   toChain: string = "avalanch",
   destinationAddress: string = "0xadxxxx"
   asset: string = "weth-wei",
) => {
const depositAddress = await api.getDepositAddress(
    fromChain,
    toChain,
    destinationAddress,
    asset
);
return depositAddress;
};

โดยในบทความนี้ผมจะใช้ AxelarAssetTransfer ใน Environment Testnet นะครับ เพื่อป้องกันความเสี่ยงเงินหาย

โดย Function getDepositAddress จะทำการรับ parameters ดังนี้

1. fromChain คือ Chain ณ ปัจจุบันที่เราจะเริ่มต้นโอนไป
2. toChain คือ Chain เป้าหมายที่เราจะโอนสินทรัพย์ไป
3. asset คือ asset_common_key ที่ทาง Axelar ได้ Support ณ เวอร์ชั่นของบทความนี้ครับ ซึ่งอนาคต อาจมี asset ใหม่ๆที่เพิ่มเข้ามาให้ลองเล่นกัน
4. destinationAddress คือ address เป้าหมายของเรานะครับ ซึ่งผมแนะนำให้ใช้เลข address เดียวกันกับกระเป๋าที่ใช้งานอยู่

ซึ่ง Function นี้จะ Reture depositAddress เพื่อให้เราไปใช้ต่อในส่วนของ EtherJS โดย depositAddress ที่เราได้นั้น เราจะได้มาจากที่ Axelar ทำการสร้างกระเป๋าให้เรา ซึ่ง depositAddress นี้จะสร้าง 1 ครั้งต่อ 1 การทำธุรกรรม ซึ่งในเบื้องหลังของกระเป๋านั้นจะมี validator ค่อยจัดการโอนสินทรัพย์ไปให้ Chain ที่เราต้องการโดยอัตโนมัติ โดย Function ในบทความนี้ผมจะ Hard Code ลงไปก่อนเพื่อง่ายต่อการใช้งานเบื้องต้น

Chain ที่ Axelar Support ณ ปัจจุบัน

axelarjs-sdk/src/chains at v0.5.0-alpha.9 · axelarnetwork/axelarjs-sdk

Asset ที่ Axelar Support ซึ่งเราสามารถดู asset_common_key ได้ที่นี่

axelarjs-sdk/testnet.assets.ts at v0.5.0-alpha.9 · axelarnetwork/axelarjs-sdk

ขั้นตอนที่ 3

เมื่อเราได้ depositAddress มาแล้ว เราจะมาใช้งานต่อในส่วน EtherJS กัน

import { ethers } from "ethers";
const provider = new ethers.providers.Web3Provider(window.ethereum);
const ERC20_ABI = [
"function transfer(address _to, uint256 _value) public returns (bool success)",
];
const sendToken = async () => {
 let depositAddress = await getDepositAddress();
 const contract = new ethers.Contract(
        "0xc778417E063141139Fce010982780140Aa0cD5Ab",
        ERC20_ABI,
        provider
);
 const tx = await contract.transfer(
      depositAddress,
      ethers.utils.parseEther("0.001"),
   {
     gasLimit: "285000",
   }
);
   await tx.wait();
}

ในส่วนแรกผมจะสร้างตัวแปร ERC20_ABI ซึ่งเป็น Interface ของ Token ประเภท ERC20 นะครับ

จากนั้นมาที่ Function sendToken ในส่วนของตัวแปร getDepositAddress เราจะไม่ส่ง Parameters อะไรเข้าไปเลย เพราะเรา Hard Code ตั้งแต่ขั้นตอนที่แล้ว

จากนั้นตัวแปร contract จะทำการ Creating Instances ขึ้นมาใหม่โดยในบทความนี้ผมจะใช้ Address WETH บน Ethereum Ropsten Testnet นะครับ

จากนั้นจะใช้คำสั่ง contract.transfer เพื่อส่ง WETH ไปยัง depositAddress จากนั้นก็รอ Transaction Success เป็นอันสำเร็จในการส่ง Token จาก Ethereum Ropsten Testnet ไปยัง Avalanc C-Chain Testnet

ผลลัพธ์จากการโอน WETH Avalanch C-Chain Testnet ไปยัง Ethereum Ropsten Testnet

ผลลัพธ์จากการโอน WETH Avalanch C-Chain Testnet ไปยัง Ethereum Ropsten Testnet

ข้อแนะนำ

แนะนำให้โอน WETH จาก Avalanch C-Chain Testnet ไปยัง Ethereum Ropsten Testnet ซึ่งจะใช้เวลาเพียงแค่ 2–3 นาที

จาก Code เราจะเห็นได้ว่าเราใช้เพียงแค่ SDK ของ Axelar ก็สามารถทำ Cross-Chain ได้ง่าย ๆ แล้ว โดยไม่ต้องเขียน Smart Contract เอง ผมก็หวังว่าบทความนี้จะมีประโยชน์ไม่มากก็น้อย ถ้าหากบกพร่องประการใดสามารถทักทวงได้เลยงับบบบบ

Link Github Repositiry : https://github.com/parametprame/axelar-cross-chain-evm

Get Ethereum Faucet : https://faucet.egorfine.com/

Swap ETH TO WETH : https://ropsten.etherscan.io/token/0xc778417e063141139fce010982780140aa0cd5ab