با سلام خدمت جامعه توسعه دهندگان بلاکچین و قرار داد های هوشمند
من 0xlive هستم و در این تاپیک قصد دارم به شکل عملی باهم یک تولید کننده کیف پول افلاین رو برای csc و شبکه های سازگار اتریومی یا به اصطلاح ETH Compatibe با زبان js و ethers.js بنویسیم
پیکربندی پروژه
ابتدای یک دایرکتوری برای پروژه خودمون با ساختار زیر ایجاد میکنیم:
/assets
-image
-style
-script
-fonts
index.html
نصب و اضافه کردن ethers.js
حالا ethers.js رو نصب و به پروژه اضافه میکنیم. برای نصب کردن از پکیج منیجیر npm استفاده میکنیم:
npm install --save ethers
و حالا اون رو به پروژه ایمپورت میکنیم:
import { ethers } from "ethers";
اما از اونجایی که ما قصد داریم برای راحت بودن پیکربندی محیط توسعه و یک تمرین عملی سریع از اون روی مرورگر استفاده کنیم به جای ایمپورت به شکل بالا فایل پکیج شده اون رو ایمپورت میکنیم:
<script src="https://cdn.ethers.io/lib/ethers-5.2.umd.min.js"
type="application/javascript"></script>
خیلی خب حالا میریم بالاسر index.html
ما قصد داریم یک تولید کننده کیف پول افلاین ایجاد کنیم که ادرس کیف پول , کلید خصوصی و ۱۲ کلمه بازیابی یا همون mnemonic رو نمایش بده و با هربار کلیک کردن روی دکمه generate یک کلید جدید بسازه.
بریم چیزایی که نیاز داریم رو در index.html پیاده کنیم:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Offline Wallet Generator</title>
<script src="https://cdn.ethers.io/lib/ethers-5.2.umd.min.js"
type="application/javascript"></script>
</head>
<body>
<p>Your Address is is:</p>
<p id="address"></p>
<p>Your privatekey is:</p>
<p id="privatekey"></p>
<p>Your mnemonic is:</p>
<p id="mnemonic"></p>
<button onclick="generate()">Generate</button>
<footer>
<p>Developed with ❤️ by 0XLive</p>
</footer>
<script>
function generate() {
const wallet = ethers.Wallet.createRandom()
console.log(wallet.address);
console.log(wallet.privateKey);
console.log(wallet.mnemonic.phrase);
}
</script>
</body>
</html>
در کد بالا ما ethers.js رو اضافه کردیم و یک تابع ساختیم که برای ما یک کیف پول تصادفی ایجاد میکنه و در کنسول اون رو چاپ میکنه اما ما میخوایم که توی صفحه html اون رو ببینیم.
حالا بریم با کمک از DOM اون رو توی صفحه نمایشش بدیم:
document.getElementById("address").innerHTML = wallet.address;
document.getElementById("privatekey").innerHTML = wallet.privateKey;
document.getElementById("mnemonic").innerHTML = wallet.mnemonic.phrase;
شمای تابع ما به این شکل میشه:
function generate() {
const wallet = ethers.Wallet.createRandom()
document.getElementById("address").innerHTML = wallet.address;
document.getElementById("privatekey").innerHTML = wallet.privateKey;
document.getElementById("mnemonic").innerHTML = wallet.mnemonic.phrase;
}
از اونجایی که فشرده شدن دکمه تابع generate() رو فراخوانی میکنه نیاز داریم بعد از باز شدن سند html برای تولید کیف پول روی اون کلیک کنیم.
خیلی خب از اونجایی که ما میخوایم این اطلاعات رو پرینت کنیم و به شکل سرد اون رو در جایی نگهداری کنیم نیاز داریم که صفحه رو پرینت کنیم:
<button onclick="window.print()">Print</button>
QRCode.js
برای اینکه بعدا بتونیم به راحتی اون رو در هر کیف پولی ایمپورت کنیم نیاز داریم که یک QR Code ازش تولید کنیم تا بعدا بدون نیاز به تایپ کردن ( که یک فرایند طولانی و پر خطا هست ) تنها با عکس گرفتن از qr code کیف پولمون رو ایمپورت کنیم
اول qrcode.js رو به پروژه اضافه میکنیم که برای اینکار باید اون رو در بخش head اضافه کنیم:
<script src="qrcode.js"></script>
من در اینجا از این کتابخونه استفاده کردم:
حالا میریم که اون رو در پروژه خودمون پیاده کنیم. ابتدا ۳ تا تگ div جدید به این شکل میسازیم و به بخش body اضافه میکنیم:
<div id="qr_address"></div>
<div id="qr_key"></div>
<div id="qr_mnemonic"></div>
حالا این کد ها رو در js به تابع generate() اضافه میکنیم:
new QRCode(document.getElementById("qr_address"), wallet.address);
new QRCode(document.getElementById("qr_key"), wallet.privateKey);
new QRCode(document.getElementById("qr_mnemonic"), wallet.mnemonic.phrase);
ما با استفاده از این کتابخونه ادرس , کلید خصوصی و کلمات بازیابی خودمون رو تبدیل به qrcode کردیم و با DOM در صفحه نمایشش دادیم.
معمولا در اینطور پروژه ها سعی میشه که تک صفحه ای باشه یعنی کد های js و css در html باشند اما ما میخوایم یکم این پروژه رو ادامه بدیم و ظاهرش رو بهتر کنیم
style.css
بریم فونت به پروژه اضافه کنیم و یکم ظاهر کارمون رو بهتر کنیم. فونت دلخواه خودمون رو با نام font.ttf در دایرکتوری fonts در مسیر زیر میریزیم:
/assets/fonts/
خیلی خب حالا بریم بالا سر style.css
@font-face {
font-family: MyFont;
src: url(/assets/fonts/myfont.ttf);
}
body{
background: #24313c;
font-family: MyFont;
text-align: center;
}
p{
color: #fff;
}
button {
background-color: #17e5aa;
color: #fff;
border-radius: 9px;
padding: 10px 30px;
margin: 0 10px;
text-transform: uppercase;
font-family: MyFont;
font-weight: 400;
}
تبریک میگم 
ما یک تولید کننده کیف پول سرد ایجاد کردیم که کاملا افلاین و فقط روی رایانه ما اجرا میشه و به هیچ شبکه ای متصل نیست (برای اطمینان میتونید اینترنت رو خاموش کنید و استفاده کنید به شرطی که کتابخونه های ethers.js و qrcode.js رو هم دانلود کرده باشید)
حالا میتونیم به شکلی ایمن کیف پول خودمون رو بسازیم و اون رو نگهداری کنیم
دیگه چه کار های دیگه ای میشه کرد؟ اونش با شما 