kimlikdao / dapp Goto Github PK

View Code? Open in Web Editor NEW

54.0 4.0 3.0 11.89 MB

📟 KimlikDAO dApp'ı

Home Page: https://kimlikdao.org

Makefile 10.88% HTML 22.80% JavaScript 48.23% CSS 18.08%

dapp did web3

dapp's Introduction

KimlikDAO dApp'ı

Dizinler

Her http request gerektiren bölümü 'sayfa' olarak adlandırıyoruz. Her sayfa için gerekli dosyalar http pathname'i ile aynı isimli bir dizinde toplanıyor.

Buna istisna / pathindeki ana sayfa; bu sayfaya ana dizinini ayırıyoruz.

Sayfaların bazı altbirimleri olabilir; bunlar sayfa içindeki sınırları belli bileşenler ve bu bileşenlere ait her dosya altbirimle aynı adda bir dizinde duruyor. Örneğin al/ sayfasının tanışma ve ödeme gibi altbirimleri al/tanışma ve al/ödeme dizininde duruyor.

Birden çok yerde kullanılabilen bileşenlere ise birim adını veriyoruz ve bunları birim/ dizinine koyuyoruz.

Kullanım

Yazılımcıların dApp'i test etmesi için gereken adımlar:

git clone --recursive https://github.com/KimlikDAO/dapp
bun i gerekli build araçlarını ve dev sunucusunu yükler
make dev dev sunucuyu çalıştırır.
- http://localhost:8787/al

Kanarya ve deployment adımları için birkaç araca daha ihtiyacımız var

brew install pngcrush brotli zopfli woff2 webp
pip install fonttools

make 🦜 veya make kanarya deploya hazır dApp'i build edip kanarya sunucusunu çalıştırır
- http://localhost:8787/al
make cf-deployment deploya hazır dApp'i Cloudflare'e yükler

dapp's People

Contributors

Stargazers

Watchers

Forkers

ardasevinc joshuadevco ilkeio

dapp's Issues

Dev sunucusunda sayı'nın "undefined" gözükmesi

make dev komutu ile yerel çalışma ortamında dApp'i çalıştırdıktan sonra /al sayfasında "PDF ile tanıt" özelliğinde Sayı undefined olarak gözüküyor ve işlem yapılamıyor.

Social revoke setup box

In /al add a new step (i.e., another box) that comes after obtain private key

At the top of the box is a question "Do you want to set up social recovery to reduce price from $2 to $1?" and an on-off switch.

If the user moves the switch to yes we present several input boxes below the question:

|-------------------------------|
|  social revoke addr 1 |   weight |
|-------------------------------|
|  social revoke addr 2 |   weight |
|-------------------------------|
|  social revoke addr 3 |   weight |
|-------------------------------|
                                      | threshold weight |
                                      | total weight|
|----------------------|
| Add more addresses  |
|----------------------|

The user enters various addresses and weights. The user also enters a threshold weight, which supposed to represent the weight needed to destroy the issued TCKT.
The UI auto calculates the sum of the weights and warns the user if the sum is less than the threshold (or even if it's too close to it)

By default we show 3 lines. If the user wants to enter more social revoke addresses, clicks on the add more addresses button, which adds a few more (maybe just one?) lines.

Oyla sayfası

Oyla sayfası https://kimlikdao.org/oyla adresinde olacak.

Oylama kontratımıza yollanmış bütün öneriler tarih sırasında gösterilsin. Aynı zamanda 2 (veya 3) aktif oylamamız olabiliyor. Bunlar en üstte görünecek.

Oylama içeriği şöyle:
Metin: Başlik + Yazılı açıklama
Ağ, Address: Öneri geçerse hangi kontratla etkileşime geçilecek
Calldata: Öneri geçerse yukarıdaki kontrata yollanacak calldata

Fiyat değişikliği gibi rutin oylamarın metni sabit olacak, proposer tarafından seçilemeyecek (phishing önelemek için).

Diğer oylamalarda yazılı metnin calldata'ya denk gelmediğini belirtir bir negatif oy çeşidi bulacağız. Bunun kötüye kullanılamaması icin mekanizmayı daha detaylı tasarlarız. Oylama kontratımız mutable olacak (başka bir yolu görünmüyor)

Arabirim her öneri kutu metini göstersin. Aktif oylamalar adres ve calldatayı da göstersin.

Bilindik adreslerin yanına bunların adını yazalim (DAOKasasi, TCKT kontrati)
Bilindik calldata selector'ları function call halinda yazalim. Örnek

Address: TCKT on Avalanche (Raw: "0xa86a, 0xcCc23478203948cCc")
Calldata: updatePrice(USDC, $1.5) (Raw: "0x94934811238773733")

WalletConnect desteği deneme

https://docs.walletconnect.com/2.0/javascript/sign/dapp-usage

WalletConnect hesabı yaratalım
@kimlikdao-sdk/example/simple-example örneği üzerinde çalışarak WalletConnect entegrasyonunu deneyelim.
personal_sign ve eth_requestAccount gibi temel işlevlerin karşılıklarını bulalım.

ChainId şecme 'dropdown'u

Navbar'da hesap adının solunda kare bir chainId seçme düğmesi yapalım. Dügmeye basınca Avalanche, Polygon, Arbitrum, Fantom gibi ağ sembolleri görünsün. Bu ağların svg sembollerini bulabiliriz (sonraki aşama olarak)

Biri seçildiğinde ethereum.request({method: 'wallet_switchEthereumChain'}) kullanarak cüzdana ağ değişim isteği yollayalım. Daha bu esnada seçili resmi değiştirmeye gerek yok. 2) ile bunu halledeceğiz.
ethereum.on('chainChanged', chainIdDeğişti) şeklinde kurulu chainIdDeğişti() metodu bu ağ değiştiğinde dropdown'un seçili ağ resmini güncellesin.

Al sayfası dil seçme dropdown menüsü oluştur

Al sayfasında içeriği Türkçe olan butona basıldığında Türkçe ve İngilizce seçenek gösteren bir dropdown yapalım. Tıklandığında location.href'in sonuna ?en ekleyerek http request yollasın.

Yarına masamda istiyorum

`/incele` sayfası "Cüzdana ekle" düğmesini kaldıralım

Cüzdana ekle düğmesi şu an hiç bir cüzdanda desteklenmiyor ve kişiler alım sonrası '/incele' sayfasına gelince daha TCKT alınmamış izlenimi yaratıyor.

Şu an işe yaramadığı gibi kafa karıştırdığı için bu düğmeyi kaldıralım.

kimlikdao-js/TCKT.jsteki addToWallet() yordamını aynen bırakabiliriz

Her `did.DecryptedDID` alma isteğine timestamp ekle

Paralel olarak bir kaç 'node''dan imzalı InfoSection alıp bunların imzalarını eliptik eğri çarpması ile birleştirmek istiyoruz (BLS eğrisi gibi örnegin). Bu esnada izmaların tutması için verilerin birebir aynı olması lazım.

Dolayısıyla her did.DecryptedDID (eski adıyla AçıkTCKT) isteğini dapp'ten timestamp ekle.

Verilen timestamp node yerel saatine ± 10dk yakınlıktaysa node dapp'ten gelen timestamp ile imza atar
Verilen timestamp 10dk'dan daha önce veya sonra ise node hata döndürür

`tckt` birimine "İletişim Bilgileri" kartı ekle

kimlikdao-js/tckt/TCKTBilgileri.jste ContactInfo isimli InfoSection tanımı bulunabilir.

Hatırlatma olarak

/**
 * @typedef {Object<string, InfoSection>
 */
let AçıkTCKT

olarak tanımlanmıştı. Verilen bir AçıkTCKT'de "contactInfo" adında bir key varsa bu tanımdaki veriyi (veri şekli ContactInfo) alıp tckt biriminde kart olarak gösterelim

Ana sayfa sergi kartlarını translate3d ile kaydır

Conflux eSpace desteği ekle

ŞImdilik sadece native token'da ödeme alıyoruz (CFX)

Chain id 71.

Daha fazla bilgi: https://developer.confluxnetwork.org/v2-hardfork/evm_space_guide/

İngilizce arabirim ve `build` desteği ekle

TCKT alımından sonra tx'in mine edilmesini bekle & `#sonra=` linkine git

Şimdilik 4sn'lik bir timer'dan sonra /incele'ye yönlendiriyoruz.

tx'in mine edildiğini poll ederek doğrula ve url fragment'te yazılı linke git

Language selector dropdown

Add language selector dropdown to ana, i.e., http path /.

The selector shows two languages

Türkçe
English

We can assume there is at most 1 language dropdown per page so give the container DOM element the fixed dom id ld (Example: <div id=ld></div>).
For reusability across pages, all css classes used therein should start with ld.

If needed, all javascript should go in ana/page.js. Similarly, all css should go in ana/page.css. Once we have working dropdown, we'll figure out reusability / modularity.

Some sub tasks:

Decide roll on hover / click
Decide left overhang / right overhang
Country flag images
Animation / styling

Bells and whistles:

Image sprites for country flags

PDF sağlamayı 'Kuruma İbraz' üzerinden yürüt

PDF parser, dApp ve api Kuruma İbraz'a uygun şekilde değiştirilecek.

TCKT alım tx'ine `gas_limit` ekle, tahminler yoğunluk anlarında çalışmıyor

Rewards / ödüller sayfası

Kişilerden humanId ve contactInfo isteyerek ödül verdiğimiz sayfa kimlikdao.org/oduller başlatalım

Anasayfa'ya GitHub linki ekle

kimlikdao.org sayfasında Discord linkinin hemen yanına GitHub logosunu svg olarak kolalım ve tıklandığında https://github.com/KimlikDAO adresine götürsün

Discord linki şurada

dapp/ana/sayfa.html

Line 21 in a18f393

    
           <a id=nkd href="//discord.gg/H2wg6pcWXG" target="_blank" rel="noreferrer"><img src="/ana/discord.svg" data-inline></a>

`prod.js`i "module workers" formatına geçir

https://developers.cloudflare.com/workers/learning/migrating-to-module-workers/

package.json'a wrangler 2.1.6'yı ekleyelim (yarn add wrangler --dev)
yarn komutu ile wrangler'i yükleyelim
tools/prod.js'i "module workers" formatına geçirelim:
a) Global KV değişkeni artık env.KV olacak. "module workers"'ta bindingler global değişken değil env'in property'leri.
b) event.waitUntil() artık ctx.waitUntil() olacak

/**
 *
 * @return {Promise<Response>}
 */
const fetch = (request, env, ctx) => {
  env.KV.get(...)
  const url = new URL(request.url);
  ...
  console.log("Eski prod.js'in yaptıkları")
  const fromCache = caches.default.get(...).then(...);
  const fromKV = env.KV.get(...).then(...).then(() => {
    if (!inCache) ctx.waitUntil(console.log("cache'e yaz"));
  })
  return Promise.any([fromCache, fromKV]);
},

Provider'i async olarak ve geç inject eden cüzdanlarda `birim/cüzdan` bağlanmıyor

Ana js'imiz yüklendiğinde window.ethereum objesinin varlığını kontrol ediyoruz. Core wallet gibi bazı cüzdanlar ethereum objesini async olarak ve çok geç inject ediyor. Böyle cüzdanlara müsaama gösteren bir yöntem oluştur.

Hata mesajlarını iyileştirelim

Cüzdanın eth_decrypt eth_getEncryptionPublicKey gibi özellikleri desteklemediği durumlarda kullanıcıya yönlendirici hata mesajları göster.

Rabby hardware signer olması durumunda doğru bilgiyi kullanıcıya gösteriyor.

Kodu -32603 olan bir hata aldığimızda açik anahtar düğmesinin altına şimdilik sadece software signer'lerin eth_decrypt desteklediğini açiklayıp, Rabby.io'a link verelim

`tckt` birimine adres kartı ekle

AçıkTCKT'nin "addressInfo" keyinde bulunan AddressInfo'yu göster.

Sınıfların astlık düzeni şu şekilde (hiyerarşi)
InfoSection > AddressInfo > TürkiyeAdresi

Şimdilik sadece TürkiyeAdresi altsınıfını desteklemek kâfi.

`iptal` sayfası iptalci listesi `fetch` çağrısı iyileştir

Liste boşkenki görünümü iyileştir (boşluklar ve hata mesajı)
Call timeout ederse veya hata verirse hata göster
Gerekiyorsa fetch()'e timeout ekleyelim. Default timeout var mı, varsa kaç saniye bunları araştıralım
Ağ veya adres değiştiğinde veri çekme ve göstermeyi tekrar yapalım (eski verilerin silinmesi yenilerinin girilmesi vb)

Telefon numarası yazan yordam oluşturalım

kimlikdao-js/util/dom birimine telefondanMetne() veya benzer isimde telefon numarasını domda okumaya uygun hale getiren yordam oluşturalım.

tckt biriminde telefon numarası gösterirken bunu kullanalım

Ek bilgi girme

Kullanıcı al 2. kutuda PDF yükleyerek kendini tanıttıktan sonra kutuyu kapatmak yerine aynı kutuda ek bilgi girmek ister misin diye soracağız:

Adres bilgisi:
Kullanıcı elle adres girebilir ve ya adres girme metin kutusuna PDF sürükleyebilir. Elle girersen Adres kayıt sisteminden onaylamaya çalışacağız. Onaylayamazsak onaysız notu düşerek yine de TCKT'nin içine kaydedebiliriz. PDF yüklemede aynı temel bilgileri gibi bir yöntem izleyeceğiz.
email:
Kişi emaili girer, KimlikDAO arkada onay kodu yollar. Onay kodu gelince kullanıcı bunu api.kimlikdao.org'a yollar
Telefon numarası:
Kişi telefon numarası girer. KimlikDAO Amazon SNS kullanarak teyit eder.

Al sayfası TCKT kartını iptal edip, telefon biriminin TCKT kartını al sayfasına uygun hale getirelim

Cüzdanda ağ daha önce eklenmemişse ağ değiştirme çalışmıyor

Al sayfası dil seçme dropdown'u

Al sayfasına ağ seçimi ve adres dropdown'u ile uygun bir dil seçme dropdown'u yapalım. İlk başta sadece

Turkce
Ingilizce

seçenekleri görünsün. SVG bayrak olsun (Turkçe inline, ingilizce http)

Ana sayfa animasyon bug'ı

TCKT Bilgi ekranı yok oluyor

BSC desteği: `birim/cüzdan`'a BSC satırı ve logosu ekleyelim. Şimdilik

al/ödeme altbirimine de BSC ekleyelim. Şimdilik BSC'de sadece BNB kabul edelim. BSC'deki stable coinlerin IERC20Permit desteği çok zayıf. Bundan sonraki bir adımda tüm chainlere BUSD desteği ekeleyeceğiz bu esnada BUSD desteğini BSC'ye de ekleriz

birim/cüzdan'a BSC satırı ekleyelim
birim/cüzdan'a BSC logosu ekleyelim
al/ödeme'ye BSC desteği ekleyelim.
kimlikdao-js/TCKT.js'e BSC desteği ekleyelim

IPFS node'u kur ve ipfs.js biriminin url'ini güncelle

Proof of work'u keccak256'ya geçir

PoW hesaplamasında kısa (40 bytelık) bir verinin tekrar tekrar hash'ini alıyoruz. Bu durumlarda native subtle crypto sha-2 metodu userspace sha3 metodumuzdan daha yavaş çalışıyor. (IPC overhead).

Kendi keccak256 kodumuza geçerek native hıza daha yaklaş.
/lib/crypto/sha3.js kullanmak yerine pre allocated s buffer kullan.
KimlikDAO protocol node'larin edevlet endpointlere istek için PoW gerektir (oauth2 ve pdf, şu an sadece pdf endpointlerde pow gerektiriyoruz)

Oyla sayfası oylama kutusu

Oyla sayfasındaki oylama kutusu eskizini çalışır hale getireceğiz.

Kontrattan çekilmiş oy bilgilerinin gösterilmesi:

a) Hangi ağda olduğu
b) Verilmiş oy sayıları. Grafiğin içine yazılı ve yükseklik ayarlaması olarak belirtebilir miyiz?
d) Kalan zaman
2) Kontrattan bilgilerin çekilmesi

Oyla sayfasına özel desteklediğimiz tüm ağlardan verileri çekeceğimiz için kullanıcı bağli cüzdanındaki provider yeterli olmayacak. Dolayısıyla kimlikdao'nun sağladığı bir provider'dan 1) daki bilgiler çekilecek. İlk etapta kullanıcı providerı ve Avalanche C ile başlayalım ama.

3) Oy kullanma

Her oylama bir ağda gerçekleştiği için kullanıcı oy kullanmak istediğinde önce cüzdanına doğru ağa geçme isteği yolluyoruz.

Al sayfasında fiyati nihai veri kağnağı TCKT kontratından oku

Al sayfasında TCKT'nin alış fiyatı verinin asıl kaynağı olan TCKT kontratından (hangi ağda hizmet veriyorsak o ağdaki) alınsın.

Bonus olarak:

Al sayfasi TCKT kontratının priceChange eventlerini dinlesin ve arabirimde fiyatı güncellesin

TCKT alımında sonra `incele` sayfasına yönlendir

al sayfasında başarılı bir TCKT alımının ~1sn süre sonrasında kullanıcıyı /incele'ye yönlendir.

Arabirim İngilizce ise, bu sayfanın adı /view olarak değişiyor. Arabirim dili şu şekilde tespit edilebilir:

const sayfa = dom.TR ? "/incele" : "/view";

Başarılı bir TCKT'nin alındığı promise, al sayfasında ödeme altbiriminde.

Ana sayfa oluştur

Ana sayfa tüm müşteri ve ortakların kimlikdao'ya ilk geldiği nokta. Müşterilen önce olmak üzere tüm ihtiyaçlara hizmet edecek.

İlk etapta planladıklarımız:

TCKT tanıtımı yapan carousel
Carousel'in yanında açıklamalarda destek sağlayan telefon görseli

İmece İptal iyileştirmeler

İmece iptal sayfasında bir kaç ufak iyileştirme daha kaldı:

Eşik değerini de tıpki ağırlıklar gibi + - tuşlarıyla ayarlayalım
Yeni adres girmeye yarayan + butonunu görsel olarak daha uygun hale getirelim (cüzdan/ag butonu gibi gri ve hover'a reaktif tonlarda olabilir)

TCKT'yi görmeyi ve hakkında eylem almayı sağlayan `incele` sayfası oluştur

Kullanıcı incele sayfasına girip cüzdan bağladığında mevcut TCKTsi varsa TCKT'sinin gizli halini gösteriyoruz.

Bu esnada IPFS'ten kullanıcının şifreli TCKT'sini async olarak çekiyoruz.

TCKT'nin altındaki Aç düğmesine basılınca kullanıcıya eth_decrypt request yollayarak şifresiz bilgilerini TCKT birimine girip ön yüzünü çeviriyoruz.

Tamamen deterministic build sağla

Şu an deterministic build'e çok yakınız.

Brew ve pip'ten gelen build dependency'leri de versiyon kontrolüna alarak %100 deterministic build sağlayalım.

Bu denetçi node'ları eklememiz için ön adım.

Denetçi özelliği açık node'lar kimlikdao.org'daki dapp'in github/ana'daki kodla 1:1 aynı olduğunu kontrol ediyorlar.

'Kayıp bildirimi' sayfası oluştur

Yeni bir sayfa oluşturuyoruz. /bildir path'inde olabilir.

Cüzdan dropdown menüsünde en son seçenek olarak görünsün, tıklandığında kullanıcıyı /bildire götürsün.

/bildir sayfası ilk olarak kullanıcıya "Kendi TCKT'ni mi tanıdığınıza ait TCKT mi?" benzeri soru ile başlasın.

Başkasına ait TCKT
Kullanıcıya verilmiş iptal yekilerinin listesi gösterilsin (kullanıcıya iptal ağırlığı vermiş tüm EVM adresleri listesi)
Kullanici birini seçer
Kendine ait
Bağlı cüzdanındaki TCKTyi mi iptal etmek istiyorsun?
Cevap hayırsa /iptale yönlendiriyoruz.
Cevap evetse incele sayfasındaki iptale benzer bir düğme gösteriyoruz.

docs.kimlikdao.org adresine gelmek üzere GitBook kuralım

GitBook veya uyumlu bir doc reader kurmak istiyoruz. Self hosted / hosted, paid / unpaid planları inceleyelim. Self hosted imkanı varsa tercih edelim.
Şu isimli sayfaları oluşturalım: KimlikDAO nedir?, kimlikdao-sdk, KimlikDAO protocol (içeriğini sonra beraber yaparız)
ana/sergi/birim.htmldeki "Daha fazla bilgi" linkini docs.kimlikdao.org'a yöneltelim.