Hamyon ulanishlari atrofida qurilgan kripto-birja frontendi
Savdo platformasi qanchalik qulay bo‘lishi uning hamyon ulash jarayoniga bog‘liq. NDA ostida topshirilgan bu kripto-birja uchun biz frontend ustida ishladik: foydalanuvchilar tashqi hamyonlarini WalletConnect orqali ulashi va balans hamda o‘tkazmalarni veb-hamyon ekranlarida boshqarishi mumkin, brauzer qatlami esa ularning shaxsiy kalitlarini hech qachon ushlab turmaydi.
Hamkorlik 2021-yil iyulidan boshlab to‘rt oy davom etdi. Jamoa ixcham edi — tim-lid, backend dasturchi va ikki frontend dasturchi — va biz ikki frontend o‘rnidan birini egalladik.
Asosiy imkoniyatlar
- WalletConnect integratsiyasi — tashqi hamyon ilovalari bilan sessiyalarni bog‘lash, tranzaksiyani imzolash so‘rovlari va ulanish holatini boshqarish.
- Veb-hamyon jarayonlari — balanslar, o‘tkazmalar va tranzaksiyani tasdiqlash ekranlari, boshidan oxirigacha qurilgan.
- Lit veb-komponentlari — standart custom element sifatida qadoqlangan va React ilovasi ichida ishlatiladigan qayta foydalaniladigan interfeys bloklari.
- Backend bilan aloqa — frontend birjaning ma’lumotlarini MongoDB’da saqlaydigan Express.js xizmatlari bilan ishlaydi.
WalletConnect birja frontendini qanday shakllantiradi
WalletConnect veb-ilovaga foydalanuvchida allaqachon bor hamyon bilan ishlash imkonini beradi. Ilova sessiya ochadi — odatda kompyuterda QR-kod, telefonda esa chuqur havola orqali — va shundan keyin har bir nozik amal foydalanuvchi o‘z hamyonida tasdiqlaydigan yoki rad etadigan so‘rovga aylanadi. Birja frontendi hech qachon shaxsiy kalitga tegmaydi.
Bu model jiddiy ishni interfeysga o‘tkazadi. Frontend sessiya faolmi-yo‘qmi ko‘rsatib turishi, bir necha soniyada kelishi yoki umuman kelmasligi mumkin bo‘lgan imzoni kutishi va foydalanuvchi hamyon ilovasini yopib qo‘ysa yoki sessiyani narigi tomondan tugatsa, holatni tiklay olishi kerak. «Hamyonga yuborildi», «imzolandi» va «rad etildi» holatlarini alohida ko‘rsatadigan o‘tkazma ekranlari foydalanuvchini o‘tkazma o‘tdimi-yo‘qmi, deb taxmin qilishdan qutqaradi.
Arxitektura va texnologiyalar
Frontend
Birja interfeysi React’da yozilgan, qayta ishlatiladigan komponentlar esa Lit’da qurilgan. Lit komponentlari standart veb-komponentlar, shuning uchun ular React ichida unga bog‘lanmagan holda chiziladi. Chegaraga e’tibor kerak: murakkab ma’lumotlar atribut sifatida emas, element xususiyatlari (properties) sifatida beriladi, o‘zgarishlar esa React callback’lari sifatida emas, DOM hodisalari sifatida qaytadi.
Hamyon ulanishi
Birja va tashqi hamyon ilovalari o‘rtasidagi bog‘lanishni — sessiyalarni bog‘lash, sessiya holati va imzolash so‘rovlarini — WalletConnect ta’minlaydi. Balanslar, o‘tkazmalar va tasdiqlashlar uchun veb-hamyon jarayonlari uning ustiga qurilgan.
Backend va ma’lumotlar
Frontend ma’lumotlarini MongoDB’da saqlaydigan Express.js backend’i bilan aloqa qiladi. Bu chegaraning frontend tomonida so‘rovlar, yuklanish va xato holatlari hamda hamyon ekranlarini API qaytargan ma’lumotlar bilan mos holda saqlash turadi.
Bizning rolimiz
Biz to‘rt kishilik jamoada tim-lid va backend dasturchi bilan birga ikki frontend dasturchidan biri sifatida ishladik. Bizning vazifamiz React va Lit’dagi birja frontendi, WalletConnect integratsiyasi va veb-hamyon jarayonlarini qamrab oldi. Loyihaning boshqa tafsilotlari NDA ostida qoladi.
O‘xshash ishlar
Hamyonga ulanadigan yana bir interfeys uchun tabiiy resurslar savdosi bilan shug‘ullanuvchi DAO uchun TronLink frontendimizni yoki biz jamoaga rahbarlik qilgan mablag‘larni saqlaydigan kripto-birjani ko‘ring. Bunday frontendlar veb-ilovalar yaratish xizmatimizga kiradi.
