Cùng với sự phát triển của công nghệ blockchain, cryptocurrency và tài sản số ngày càng trở nên phổ biến. Điều này dẫn đến nhu cầu ngày càng cao đối với ví crypto, giúp người dùng lưu trữ an toàn token, cryptocurrency, NFT,… Trong bài viết này, chúng tôi sẽ hướng dẫn từng bước cách xây dựng một Chrome Extension cho ví crypto.
Tổng quan về Crypto Wallet Extension
Giới thiệu về Crypto Wallet Extension
Crypto Wallet Extension cho phép người dùng quản lý và chuyển đổi cryptocurrency một cách an toàn ngay trên trình duyệt. Đây cũng là nơi người dùng có thể tương tác với nhiều ứng dụng phi tập trung (DApps) và kiểm soát dữ liệu cũng như tài sản số của mình trên nhiều blockchain khác nhau.
Tính năng chính về Crypto Wallet Extension
- Hỗ trợ đa chuỗi
- Hỗ trợ nhiều ví
- Gửi, nhận và hoán đổi token
- Lưu trữ khóa riêng tư
- Giao diện người dùng đơn giản, trực quan
Cài đặt Chrome Extension
Bạn có thể làm theo các bước dưới đây để cài đặt Chrome Extension.
- Tải mã nguồn (Source Code)
- Install node_modules. (npm i) package using node v20.10.0
- Build project (npm run build)
- Mở Google Chrome và truy cập chrome://extensions/
- Bật Developer mode (Chế độ nhà phát triển)
- Nhấn “Load unpacked” và chọn thư mục build (tên thư mục là dist)
- Sử dụng Extension
Sau khi hoàn tất tất cả các bước trên, bạn cần triển khai Extension trên Google Chrome. Bạn có thể thực hiện theo các bước dưới đây. Google’s guideline to complete the deployment
Cách xây dựng tiện ích mở rộng Crypto Wallet trên Chrome
Build mã nguồn Chrome Extension
Bước 1: Sử dụng Vite để tạo mã nguồn ReactJS + TypeScript. (Bạn có thể tham khảo Vite’s document)
Bước 5: Tích hợp ethers vào dự án của bạn
- Tạo file AppEthers để xử lý các tác vụ liên quan đến ví (wallet).
- Sử dụng thư viện crypto-js để mã hóa và giải mã ví (wallet).
- Khởi tạo client (mặc định, chúng ta sẽ có hai chain: Ethereum và Sepolia-Ethereum).
- Tạo class AppView để xử lý các hàm và biến liên quan đến blockchain trong Extension.
- Sử dụng client để xử lý các tính năng chính cần thiết của Extension.
Bước 7: Sử dụng chrome.storage.local và chrome.storage.session để quản lý dữ liệu lưu trữ.
- Chrome.storage.local
- Chrome.storage.session
- useChain
- useToken
- usePrice (use crypto-compare to get the price)
Phát triển tính năng chính
1. Tạo tài khoản
- Sử dụng appEthers để tạo 1 seed phrase
- Từ seed phrase, chúng ta sử dụng ethers để lấy private key, sau đó mã hóa bằng mật khẩu và lưu trữ trong storage.
- Sử dụng hook useEstimateFee để ước tính và trả về phí giao dịch trong quá trình gửi.
- Xử lý các tham số đầu vào, sau đó gọi sendRawTransaction để thực hiện giao dịch gửi token.
- Sử dụng waitForTransactionReceipt để nhận kết quả giao dịch và lưu giao dịch vào lịch sử.
4. Nhận token
- Sử dụng hook useSwapRoute để lấy thông tin tỷ giá/giá trị swap.
- Sử dụng hook useReadContract để lấy số lượng token đã được cấp quyền (allowance) trên blockchain. Sau đó, kiểm tra: nếu số lượng hiện tại lớn hơn số lượng được cấp quyền, cần thực hiện approve trước khi swap.
- Tương tự như chức năng gửi, chúng ta cũng sử dụng hook useEstimateFee để ước tính phí giao dịch.
- Sử dụng hàm sendRawTransaction để gửi yêu cầu giao dịch.
- Sử dụng hàm waitForTransactionReceipt để nhận kết quả giao dịch và lưu giao dịch vào lịch sử.
- Chuyển đổi các trường thông tin trong biểu mẫu Add Chain thành request để tạo blockchain.
- Tạo chain mới và lưu thông tin vào storage.
Đó là toàn bộ các bước để xây dựng Chrome Extension với những tính năng chính của một Crypto Wallet. Hy vọng những hướng dẫn này sẽ hữu ích cho bạn. Trong trường hợp bạn muốn tự xây dựng một Crypto Wallet, hãy cùng tham khảo của chúng tôi. Blockchain Development Service và hãy liên hệ để nhận báo giá.