Kết nối ví

Theo thống kê, hiện nay có từ 300-500 ví crypto. Việc tích hợp một số lượng ví đa dạng cho DApp và bảo trì, cập nhật là rất tốn công sức. Thay vì phải làm điều này từ đầu, chúng ta có thể sử dụng các bộ kit có sẵn và không phải quan tâm quá sâu vào quá trình tích hợp ví đơn lẻ.

Có khá nhiều bộ kit ví dụ như Rainbowkit, Onchainkit của Coinbase, Wallet SDK của thirdweb.... Tuy nhiên, trong phạm vi bài viết chúng ta sẽ chỉ sử dụng một trong các bộ kit trên và là Rainbowkit.

RainbowKit

Wallet Provider

Tạo file wallet.provider.tsx trong thư mục providers vừa được tạo. Ngoài ra, chúng ta cũng sẽ cập nhật lại configs.ts để hỗ trợ multichain.

projectId để có thể làm việc với WalletConnect. Nếu bạn muốn hỗ trợ WalletConnect thì có thể đăng ký miễn phí projectId tại WalletConnect Cloud.

Thêm WalletProvider vào root.tsx.

Sử dụng wagmi hooks

Trong bài trước, để tương tác onchain thì chúng ta đã tạo publicClient thông qua hàm createPublicClient. Tuy nhiên với việc hỗ trợ multichain, chúng ta cần phải viết lại việc nhận dạng chain hiện tại để thay đổi các cài đặt tương ứng cho hàm createPublicClient và điều này là không hề nhanh. May thay, wagmi (đi kèm theo với RainbowKit) đã cũng cấp một "encaplsulated" hook tên là usePublicClient và xử lý toàn bộ các luận lý phức tập nêu trên. Ta sẽ thử cập nhật lại routes/_index.tsx với hướng tiệp cập này.

⚠️ Có khả năng cao là bạn sẽ gặp lỗi vì lý do sau khi cập nhật, chain mặc định đang là mainnet trong khi contract của chúng ta hiện chỉ có trên holesky. Đừng quá lo vì mọi thứ vẫn đang đi đúng hướng.

Connection Button

Tạo file header.tsx trong app. Sau đó, thiết lập Header vào template của App.

Chúng ta được giao diện với thanh Header và nút Connect Wallet. Lúc này, ta đã có thể kết nối ví và chọn mạng holesky.

Header cùng với nút Connect Wallet.

Thực hiện kết nối ví Metamask và switch sang mạng Holesky.

Tương tác onchain

Giờ đây với việc kết nối ví thành công, nó cho phép chúng ta có thể tương tác nhiều hơn với smartcontract và cụ thể trong ví dụ này sẽ là gọi hàm increase từ contract Counter.

🎉 Nhấn Increase và ký transaction. Chờ đến khi transaction được xác nhận chúng ta có thể refresh lại ứng dụng và nhận được giá trị counter mới cập nhật lên 2.

Đồng thời chúng ta cũng có thể thấy, mỗi lần muốn cập nhật lại giá trị counter, chúng ta buộc phải refresh lại ứng dụng. Để cải thiện lại trải nghiệm người dùng, hãy thử realtime hoá ứng dụng ở phần tiếp theo.

Ứng dụng thời gian thực

Lưu ý, cần thiết phải return ở userEffect. Vì hàm watchCounter sẽ trả về một hàm unwatch, nghĩa là useEffect sẽ chạy unwatch ở mỗi lần rerender và tránh memory leaks.

Kết luận

Như vậy chúng ta đã đi qua hết 6 bài chính về xây dựng DApp. Bạn có thể theo dõi lại toàn bộ DApp hoàn chỉnh ở repo bên dưới. Ở bài tiếp theo, chúng ta sẽ hoàn thiện các quy trình về DevOps để tăng tốc và nâng cao tính tin cậy cho việc publish ứng dụng cho người dùng.

@preview