مقدمه
آخرین مقاله نحوه نوشتن، کامپایل، آزمایش و استقرار قراردادهای هوشمند را با استفاده از Solidity، Javascript، Endpoint dRPC و کلید API به شما آموزش داد.
در اینجا، نحوه ساخت رابط کاربری (UI) برای Coffee Payment را با استفاده از React.js، Typescript و Web3.js خواهید آموخت.
ابزار و فناوری
- React.js و Typescript
- Web3.js
- TailwindCSS برای یک ظاهر طراحی شده
- ThirdWeb SDK و کلید API
- آدرس قرارداد
- قرارداد ABI
- متاماسک
پیش نیازها
شما می دانید که چگونه از چارچوب های CSS، React.js و تایپ اسکریپت استفاده کنید.
ایجاد دکمه ConnectWallet با استفاده از Thirdweb ConnectWallet SDk
Thirdweb یک پلتفرم توسعه وب 3 است که SDK ها، ابزارها و منابعی را برای ساده سازی فرآیند در اختیار توسعه دهندگان قرار می دهد. برای این مقاله، از ConnectWallet SDK استفاده خواهید کرد.
قبل از اینکه دستان خود را کثیف کنید، مهم است که بدانید چرا این فرآیند بسیار مهم است. قبل از اینکه کاربر بتواند با هر dApp تعامل داشته باشد، یک کیف پول باید متصل شود، زیرا کیف پول به عنوان هویت کاربر عمل می کند و وجوه لازم برای تراکنش ها را در خود نگه می دارد. این اتصال تضمین می کند که کاربر می تواند به طور ایمن و یکپارچه از ویژگی های قرارداد هوشمند ارائه شده توسط dApp استفاده کند.
به یاد داشته باشید، شما از کلید خصوصی کیف پول خود برای اجرای قرارداد هوشمند استفاده کرده اید.
نقش سومین وب در اینجا ساده کردن نوشتن یک دسته طولانی از کد است. تنها چیزی که نیاز دارید این است که …