نحوه ایجاد یک کیف پول cryptocurrency با Web3

در این مقاله ، ما یک برنامه ReactJS ایجاد خواهیم کرد تا مانده رمزنگاری شما را مشاهده کرده و نشانه های خود را از حساب خود به حساب دیگری منتقل کنیم.

معرفی

در مقاله قبلی من ، ما یک توکن جدید Ethereum Crypto مبتنی بر ERC-20 به نام "Nice Token" ایجاد کردیم و این مقاله پیگیری آن برای ایجاد یک کیف پول cryptocurrency برای ارسال نشانه ها از یک حساب به حساب دیگر است.

برای این کار ، ما یک برنامه ReactJS کوچک ایجاد خواهیم کرد که به شما امکان می دهد نشانه ها را در یک حساب نمایش دهید و همچنین به شما امکان می دهد نشانه ها را از یک حساب به حساب دیگر منتقل کنید.

با این کار شروع کردیم.

ایجاد برنامه Reactjs

بیایید با استفاده از دستور زیر یک برنامه React جدید ایجاد کنیم

NPX-blockchain-ballet-App-App-App Create 

توجه: در حین ایجاد این برنامه ، حتماً NodeJS نسخه 16 یا پایین را داشته باشید و بعد از ایجاد برنامه ، نسخه "React-Scripts" را به 4. 0. 3 بروزرسانی کنید. در حال حاضر یک اشکال در هنگام استفاده از نسخه 5. 0. 3 وجود دارد. هنگام اجرای برنامه به صورت محلی با استفاده از Webpack.

در مرحله بعد ، ما باید قرارداد هوشمند کاملی را که ساخته ایم و از پروژه ترافل تا blockchain Ganache مستقر کرده ایم کپی کنیم. قرارداد کامپایل شده را در زیر فهرست ساخت پروژه ترافل خود پیدا خواهید کرد.

بیایید Nicetoken. json را در ریشه پروژه Reactjs کپی کنیم.

در مرحله بعد ، برای برقراری ارتباط با شبکه blockchain ، ما قصد داریم از Web3 استفاده کنیم. ما می توانیم این را با استفاده از NPM نصب کنیم.

NPM نصب Web3 

اتصال به شبکه blockchain.

با استفاده از Web3 ، بیایید با استفاده از کد زیر به شبکه محلی Ganache blockchain متصل شویم.

کار(() =>   محاصره کردن LoadWeb3 = درز () =>   // به شبکه blockchain محلی متصل شوید  پنجره.وب 3 = جدید وب 3(جدید وب 3.ارائه دهنده. httprovider("http: // localhost: 7545"));  // برای اتصال به metamask  // windows. web3 = web3 جدید (windows. ethereum) ؛  >; 

پس از اتمام این کار ، اکنون می توانیم با استفاده از Web3 با شبکه محلی Ganache blockchain ارتباط برقرار کنیم.

واکشی داده ها از شبکه blockchain

حال ، بیایید تمام آدرس های حساب را در شبکه محلی blockchain ما بدست آوریم و اولین جزئیات حساب را در کیف پول cryptocurrency خود تنظیم کنیم.

محاصره کردن بار = درز () =>   محاصره کردنوب 3= پنجره.وب 3  محاصره کردنحساب ها= در انتظاروب 3.اخلاق.GetAccounts()  محاصره کردنniceContractAddress= '0xDE928AC7259340545ED8FA290588A8B0076FF9F4' // آدرس قرارداد اینجا  محاصره کردنnicetokencontract= جدید وب 3.اخلاق.قرارداد(با ابله.ابو,niceContractAddress)  قرارداد(nicetokencontract)  مجموعه های(حساب ها)  setAccountDetails(nicetokencontract,حساب ها[0]) > 

همانطور که در اینجا می بینید ، برای به دست آوردن خود قرارداد هوشمند ، آدرس را در محل استقرار قرارداد هوشمند مشخص کرده ایم. به یاد داشته باشید ، وقتی قرارداد هوشمند را در blockchain مستقر کردیم ، این آدرس را دریافت کردیم. با استفاده از این ، ما می توانیم جزئیات حساب اولین حساب را واگذار کنیم و جزئیات را روی صفحه تنظیم کنیم.

محاصره کردن setAccountDetails = درز (قرارداد,حساب) =>   محرمانه(حساب)  محاصره کردنتعادل= در انتظارقرارداد.مواد و روش ها.تعادل(حساب).زنگ زدن()  محاصره کردنوب 3= پنجره.وب 3  تعادل(وب 3.سود.از Wei(تعادل.شیب دار())) > 

بنابراین اینگونه است که می توانید با استفاده از Web3 با شبکه blockchain و جزئیات حساب Fetch ارتباط برقرار کنید.

در مرحله بعد ، بیایید ببینیم که چگونه می توانیم برخی از نشانه ها را از یک حساب به حساب دیگر منتقل کنیم.

انتقال نشانه های رمزنگاری به آدرس حساب دیگر

برای این کار ، من یک فرم ساده ایجاد کرده ام که تمام آدرس های حساب را در یک لیست کشویی لیست می کند ، مانده حساب فعلی را برای شما نشان می دهد و راهی برای ارسال نشانه ها به آدرس حساب دیگر با استفاده از دو جعبه متن فراهم می کند.

بیایید ببینیم که چگونه می توانیم برخی از نشانه ها را به آدرس دیگری منتقل کنیم.

محاصره کردن انتقال = درز (دریافت کننده,میزان) =>   در انتظارقرارداد.مواد و روش ها.انتقال(دریافت کننده,میزان).ارسال( از جانب:حساب>)  در انتظار setAccountDetails(قرارداد,حساب) > 

اکنون پس از چسباندن آدرس و مقدار گیرنده در جعبه های متن ، بر روی دکمه "Send Nice" کلیک می کنیم تا عملکرد فوق را فراخوانی کنیم. در اینجا ، با استفاده از عملکرد انتقال از قرارداد ، اکنون می توانید نشانه ها را از حساب نمایش داده شده در حال حاضر به دیگری منتقل کنید.

با این کار ، ما فقط یک کیف پول cryptocurrency اتریوم ایجاد کردیم و برخی از نشانه ها را از یک حساب به حساب دیگر ارسال کردیم.

نتیجه

در این مقاله ، ما یک برنامه ReactJS ایجاد کردیم که به ما امکان می دهد مانده حساب یک حساب کاربری را مشاهده کنیم و همچنین نشانه ها را از یک حساب به حساب دیگر منتقل کنیم.

شما می توانید کل کد منبع را در repo github من در اینجا مشاهده کنید.

من به کاوش و یادگیری چیزهای جدید ادامه می دهم. اگر می خواهید آخرین روندها را بدانید و مهارت های توسعه نرم افزار خود را بهبود بخشید ، سپس در خبرنامه من در زیر مشترک شوید و همچنین مرا در توییتر دنبال کنید.