Hướng dẫn triển khai PancakeSwap v1 trên môi trường Binance Smart Chain BSC Testnet

PancakeSwap đang là nền tảng AMM mạnh nhất trên Binance Smart Chain, do đó nhu cầu các ứng dụng cần kết nối tới Pancake Swap khá nhiều. Nhưng có 1 điều hơi đáng tiếc là PancakeSwap không có môi trường Testnet để giúp các Developer dễ dàng hơn trong việc phát triển. Vì vậy mình đã triển khai phiên bản Pancake Swap trên môi trường Testnet, các Developers có thể tham khảo.

Về UI cho PancakeSwap on BSC Testnet thì trước đây mình có triển khai bản trên trang https://pancake.kiemtienonline360.com, liquidity mình add liên tục cũng tốn khá nhiều BNB trên Testnet, và lượng giao dịch cũng nhiều trên 153K transaction. Nhưng do gần đây bị MetaMask đánh dấu Fishing nên mình đã phải gỡ bỏ. Thực ra việc MetaMask đánh dấu Fishing thế này cũng hợp lý để giảm thiểu rủi ro cho người dùng. Nếu có anh em nào muốn sử dụng giao diện này thì có thể xem hướng dẫn chạy trên localhost từ link: https://github.com/laptrinhbockchain/pancake-swap-v1-bsc-testnet-ui

Môi trường Pancake Testnet hiện đang được khá nhiều DEV sử dụng, nhưng bên cạnh đó cũng có nhiều DEV mong muốn triển khai một phiên bản Pancake Swap cho riêng mình. Mình có đã nhận được khá nhiều yêu cầu hỗ trợ, giúp đỡ để triển khai phiên bản swap riêng, mà đôi khi mình không có nhiều thời gian để hỗ trợ hết các bạn. Vì thế mình viết bài này mục đích hướng dẫn chi tiết cho các bạn các thức triển khai một phiên bản Pancake Swap trên môi trường Testnet.

Toàn bộ source code mình đã đẩy lên Github tại địa chỉ: https://github.com/laptrinhbockchain/pancake-swap-v1-bsc-testnet. Đây là source code của Pancake Swap v1, phiên bản v2 cũng không khác nhiều, chủ yếu là thay đổi phần trăm chia sẻ về phí. Tôi tin rằng nếu bạn biết cách triển khai phiên bản v1 thì phiên bản v2 cũng sẽ không làm khó được bạn.

Để triển khai một phiên bản Pancake Swap đầy đủ, bạn phải thực hiện 3 bước như sau:

• Bước 1: Triển khai contract PancakeFactory
• Bước 2: Triển khai contract PancakeRouter
• Bước 3: Triển khai giao diện PancakeSwap

Trong 3 bước trên thì Bước 3 là mất nhiều thời gian của mình nhất, Bước 2 có một chú ý nhỏ. Với hướng dẫn này, bạn chỉ mất 10 phút để triển khai toàn bộ Pancake Swap.

Trước khi bắt đầu, bạn cần thực hiện:

• Cài đặt NodeJs (Phiên bản 8 trở lên)
• Cài đặt GIT:
  • Trên Windows, bạn tải từ địa chỉ: https://git-scm.com/download/win
  • Trên Ubuntu, bạn cài bằng lệnh sau:
    sudo apt install git
• Cài Metamask và thêm network “BSC Testnet“. Đồng thời tạo 1 ví trên BSC Testnet và vào trang https://testnet.binance.org/faucet-smart để lấy 1 ít BNB.
• Clone source code từ địa chỉ: https://github.com/laptrinhbockchain/pancake-swap-v1-bsc-testnet

Bước 1: Triển khai contract PancakeFactory

Ở bước này bạn có thể sử dụng Truffle hoặc Remix để build và triển khai contract. Với nhưng người mới tiếp xúc thì đơn giản nhất là sử dụng Remix.

Các bước thực hiện như sau:

1.1 Cài đặt các thư viện cần thiết

Bạn vào thư mục “pancake-swap-core-v1” và đánh lệnh sau để cài đặt:

cd pancake-swap-core-v1
npm install

1.2 Gộp các contract thành 1 file contract

Vì project chia làm nhiều tệp .sol nhỏ nên không tiện cho việc sử dụng trên Remix, vì thế mình làm tool nhỏ để join các tệp này thành 1 tệp. Để join bạn đánh lệnh sau:

mkdir build
node tools/merge-contract.js

Bạn sẽ nhìn thấy tệp “PancakeFactory.sol.merge.txt” trong thư mục build.

Cách khác đơn giản hơn là bạn copy trực tiếp mã nguồn contract từ địa chỉ: PancakeFactory Sourcecode

1.3 Triển khai trên Remix

Bây giờ bạn vào trang Remix (https://remix.ethereum.org). Trên giao diện Remix, tạo contract mới tên PancakeFactory.sol, sau đó copy toàn bộ nội dung từ tệp PancakeFactory.sol.merge.txt sang PancakeFactory.sol

Sau đó, kích vào icon “Solidity complier” ở phía bên trái, chọn “0.5.16” trong mục COMPILER. Sau đó kích vào nút “Complile PancakeFactory.sol” để biên dịch. Bạn sẽ thấy thông báo dịch thành công và không có lỗi.

Sau đó, kích vào icon “Deploy & run transactions“, chọn “Injected Web3” trong mục in ENVIRONMENT, Remix sẽ yêu cầu kết nối với ví trên Metamask. Tiếp theo bạn chọn “PancakeFactory – …” trong mục CONTRACT, rồi nhập một địa chỉ ví bất kỳ của bạn trong trường “address_feeToSetter“. Cuối cùng kích nút “Deploy” và chờ.

Một khi triển khai xong, trong mục “Deployed Contracts“, bạn sẽ nhìn thấy contract mà bạn vừa triển khai, bạn sẽ lấy được địa chỉ của contract PancakeFactory. Mở rộng mục này bạn sẽ lấy được INIT_CODE_PAIR_HASH. Bạn cần lưu hai thông tin này lại để sử dụng trong Bước 2.

Dưới đây là thông tin contract mình đã triển khai cho hệ thống Test

• PancakeFactory contract: 0xB7926C0430Afb07AA7DEfDE6DA862aE0Bde767bc
• INIT_CODE_PAIR_HASH: 0xecba335299a6693cb2ebc4782e74669b84290b6378ea3a3873c7231a8d7d1074

Ghi chú: Thỉnh thoảng bạn có thể gặp lỗi khi tạo tệp .SOL mới trên trang https://remix.ethereum.org, thì bạn có thể sử dụng link sau (Dùng HTTP, không dùng HTTPS): http://remix.ethereum.org

Bước 2: Triển khai contract PancakeRouter

Thao tác về cơ bản cũng giống như trong Bước 1, nhưng bạn cần sửa một chút code.

Các bước thực hiện như sau:

2.1 Cài đặt các thư viện cần thiết

Bạn vào thư mục “pancake-swap-router-v1” và đánh lệnh sau để cài đặt:

cd pancake-swap-router-v1
npm install

2.2 Sửa một chút mã nguồn

Mở tệp “contracts/libraries/PancakeLibrary.sol“, đến dòng 25 (Trong hàm pairFor()), đổi xâu hexa tới giá trị INIT_CODE_PAIR_HASH của PancakeFactory mà bạn có trong Bước 1. Sau khi hoàn thành thì lưu lại.

2.3 Gộp các contract thành 1 file contract

Để join các tệp .SOL thành 1 bạn đánh lệnh sau:

mkdir build
node tools/merge-contract.js

Bạn sẽ nhìn thấy tệp “PancakeRouter01.sol.merge.txt” trong thư mục build.

Cách khác đơn giản hơn là bạn copy trực tiếp mã nguồn contract từ địa chỉ: PancakeRouter Sourcecode

2.4 Triển khai trên Remix

Bây giờ bạn vào trang Remix (https://remix.ethereum.org). Trên giao diện Remix, tạo contract mới tên PancakeRouter.sol, sau đó copy toàn bộ nội dung từ tệp PancakeRouter01.sol.merge.txt sang PancakeRouter.sol

Sau đó, kích vào icon “Solidity complier” ở phía bên trái, chọn “0.6.6” trong mục COMPILER, chọn “Enable optimization” in mục COMPILER CONFIGURATION. Sau đó kích vào nút “Complile PancakeRouter.sol” để biên dịch. Bạn sẽ thấy thông báo dịch thành công và không có lỗi.

Kích vào icon “Deploy & run transactions“, chọn “Injected Web3” trong mục in ENVIRONMENT, Remix sẽ yêu cầu kết nối với ví trên Metamask. Tiếp theo bạn chọn “PancakeRouter01 – …” trong mục CONTRACT. Sau đó nhập địa chỉ contract PancakeFactory (Trong Bước 1) và địa chỉ WBNB 0xae13d989daC2f0dEbFf460aC112a837C89BAa7cd. Đây là hai tham số để khởi tạo PancakeRouter. Cuối cùng kích nút “Deploy” và chờ.

Một khi triển khai xong, trong mục “Deployed Contracts“, bạn sẽ nhìn thấy contract mà bạn vừa triển khai, bạn sẽ lấy được địa chỉ của contract PancakeRouter. Bạn lưu địa chỉ này lại để sử dụng trong Bước 3.

Dưới đây là thông tin contract mình đã triển khai cho hệ thống Test:

• PancakeRouter contract: 0x9Ac64Cc6e4415144C455BD8E4837Fea55603e5c3

Note: Bạn có thể sử dụng địa chỉ WBNB ở trên hoặc bạn có thể tự tạo WBNB mới.

Bước 3: Triển khai giao diện PancakeSwap Testnet

Trong các bước triển khai thì bước này là phức tạp nhất vì có nhiều phần sửa đổi. Các bước thực hiện như sau:

3.1 Cài đặt các thư viện cần thiết

Bạn vào thư mục “pancake-swap-interface-v1” và đánh lệnh sau để cài đặt:

cd pancake-swap-interface-v1
npm install
npm install --global yarn

Sau đó bạn copy tệp .env.development thành .env

3.2 Chỉnh sửa source code của PancakeSwap cho môi trường Testnet

Có khá nhiều chỗ cần chỉnh sửa, mình liệt kê lại như dưới, không cần thiết phải theo thứ tự:

• Vào tệp “src/constants/token/pancakeswap.json” để thêm hoặc sửa các token được hỗ trợ mặc định trên Testnet. Token trên BSC Testnet bạn có thể tự triển khai, mã nguồn token thì có thể tham khảo: USDT, ETH, BUSD, DAI. Bạn nhớ thêm ảnh cho các token mới của bạn ở trong thư mục “public/images/coins” với tên là địa chỉ token ở dạng chữ thường.
• Vào tệp “src/constants/index.ts“, cập nhật giá trị cho ROUTER_ADDRESS là địa chỉ PancakeRouter đã triển khai trong Bước 2. Trong tệp này, bạn cũng sửa thêm các token hiển thị mặc định.
• Tôi đã sửa supportedChainIds và BscConnector trong tệp “src/connectors/index.ts“để chỉ hỗ trợ BSC Testnet. Bạn không cần thay đổi tệp này trừ khi bạn muốn triển khai trên network khác.
• Hiện tại menu tôi đã comment lại gần hết, nếu bạn muốn thay đổi menu hiển thị bạn có thể sửa trong tệp “src/components/Menu/config.ts“.
• Mở 3 tệp “node_modules/@pancakeswap-libs/sdk/dist/constants.d.ts“, “node_modules/@pancakeswap-libs/sdk/dist/sdk.cjs.development.js“, ” node_modules/@pancakeswap-libs/sdk/dist/sdk.esm.js” và “node_modules/@pancakeswap-libs/sdk/dist/sdk.cjs.production.min.js“, cập nhật lại giá trị cho hai biến: FACTORY_ADDRESS và INIT_CODE_HASH => Do thư viện đang fix địa chỉ chứ không cho cấu hình.
• Nếu WBNB bạn sử dụng không phải địa chỉ 0xae13d989daC2f0dEbFf460aC112a837C89BAa7cd thì bạn nên cập nhật địa chỉ WBNB mới trong hai tệp “node_modules/@pancakeswap-libs/sdk/dist/sdk.cjs.development.js” và “node_modules/@pancakeswap-libs/sdk/dist/sdk.cjs.production.min.js“.

3.3 Chạy test ở local

Bạn chạy lệnh sau để test ở local:

yarn start

Một số lỗi phát sinh:

• “TypeScript error in pancake-swap-interface-v1/src/state/index.ts(43,3): Type ‘MergedState’ is not assignable to type“
  Lỗi này phát sinh do phiên bản mới của thư viện “@reduxjs/toolkit” không tương thích. Bạn phải xóa phiên bản hiện tại và cài đặt chính xác phiên bản 1.3.5:
  npm remove @reduxjs/toolkit
  npm install @reduxjs/toolkit@1.3.5
• …

3.4 Triển khai bản PancakeSwap Testnet lên Github

Bạn mở tệp “.env.production” để sửa lại cấu hình cho phù hợp, đặc biệt là cấu hình PUBLIC_URL. Sau đó bạn đánh lệnh sau để build:

yarn build

Sau đó bạn để toàn bộ các tệp trong thư mục build lên github hoặc host là chạy được.

Tham khảo thêm:

• Hiểu thêm về các hàm trong PancakeSwap thông qua tài liệu của Uniswap Smart Contracts. (Uniswap)
• Hiểu hơn về Fee