1. Overview
Thông tin chung
Sau khi bạn viết và deploy một smart contract thì việc tiếp theo là xây dựng một bộ giao diện để người dùng có thể tương tác trực quan, đơn giản thay vì phải lần mò tương tác với smart contract function.
Hiện tại, React (và các framework xây dựng trên React) là phổ biến nhất trong ngành Web3. Nhờ vào số lượng thư viện và hệ sinh thái mở của React mà gần như các framework khác như Vue hoặc Angular ít được sử dụng.
Giao diện tương tác với smart contract như thế nào
Frontend UI có thể tương tác được với smart contract nhờ việc kết nối vào 1 blockchain node RPC. RPC là viết tắt của Remote Procedure Call, nôm na là giao thức giúp client (ở đây có nghĩa là giao diện) có thể kết nối với mạng blockchain để yêu cầu dữ liệu hoặc thực thi các hành động như gửi giao dịch, tương tác với smart contract.
Bạn có thể sử dụng 1 blockchain node mà bạn tự cài đặt và vận hành trên server của bạn hoặc sử dụng Node-as-a-service provider (những đơn vị cung cấp dịch vụ Node). Nếu nhu cầu kết nối của bạn nhỏ thì Node-as-a-service provider sẽ giúp bạn tiết kiệm chi phí rất nhiều.
2. Structure of a frontend project
We will use the technical stack to build the following frontend:
- Next.JS - React production framework
- TailwindCSS - Utility class library for CSS
- Shadcn UI - Tailwind-based React component library
- Wagmi v2 - React hook library for interacting with blockchain
- WalletConnect - Communication protocol to connect DApp and Wallet
- Rainbowkit - Component library to connect wallet with DApp
- React Query Tanstack - Library to execute queries for React
Below is the layout of a sample project to build UI for FundMe smart contract in the Solidity section.