🖌️ kastro uyumunu artır

KimlikDAO · Sep 17, 2024 · df748c2 · df748c2
1 parent 6e77691
commit df748c2
Show file tree

Hide file tree

Showing 28 changed files with 212 additions and 195 deletions.
diff --git a/al/imeceİptal/birim.html b/al/imeceİptal/birim.html
diff --git a/al/imeceİptal/birim.js b/al/imeceİptal/birim.js
@@ -1,29 +1,19 @@
-/**
- * @fileoverview İmece iptal parçası. DOM'da `im` öneki bu parçaya ayrılmıştır.
- */
-
+import {
+  EşikGirdisi,
+  GösterDüğmesi,
+  Kutu,
+  Kök,
+  ToplamAğırlık,
+  İptalDüğmesi,
+  İptalciler
+} from "./birim.jsx";
 import { AğBilgileri, AğBilgisi } from "/birim/ağlar/birim";
 import Cüzdan from "/birim/cüzdan/birim";
 import { ChainId } from "/lib/crosschain/chains";
 import KPass from "/lib/ethereum/KPass";
 import evm from "/lib/ethereum/evm";
 import dom from "/lib/util/dom";
 
-/** @const {!Element} */
-const Kök = dom.adla("im");
-/** @const {!HTMLInputElement} */
-const EşikGirdisi = /** @type {!HTMLInputElement} */(dom.adla("imt"));
-/** @const {!Element} */
-const GösterButonu = dom.adla("imbe");
-/** @const {!HTMLAnchorElement} */
-const İptalButonu = /** @type {!HTMLAnchorElement} */(dom.adla("imbh"));
-/** @const {!Element} */
-const İptalciler = dom.adla("imf");
-/** @const {!Element} */
-const Kutu = dom.adla("imc");
-/** @const {!HTMLInputElement} */
-const ToplamAğırlık = /** @type {!HTMLInputElement} */(dom.adla("ims"));
-
 /**
  * @param {ChainId} ağ Native tokeninde KPass fiyatının gösterileceği ağ.
  */
@@ -63,20 +53,20 @@ const göster = () => {
  * @param {function(!Object<string, number>, number)} sonra
  */
 const kurVe = (sonra) => {
-  GösterButonu.onclick = () => kutularıAç(sonra);
-  İptalButonu.onclick = () => atla(sonra);
+  GösterDüğmesi.onclick = () => kutularıAç(sonra);
+  İptalDüğmesi.onclick = () => atla(sonra);
 }
 
 /**
  * @param {function(!Object<string, number>, number)} sonra
  */
 const atla = (sonra) => {
-  dom.göster(GösterButonu);
-  GösterButonu.innerText = dom.TR ? "Yine de kur" : "Setup social revoke";
-  dom.göster(İptalButonu);
-  İptalButonu.innerText = dom.TR ? "İmece iptal kurulmadı 🤌" : "Skipped 🤌";
-  İptalButonu.classList.add("done");
-  dom.düğmeDurdur(İptalButonu);
+  dom.göster(GösterDüğmesi);
+  GösterDüğmesi.innerText = dom.TR ? "Yine de kur" : "Setup social revoke";
+  dom.göster(İptalDüğmesi);
+  İptalDüğmesi.innerText = dom.TR ? "İmece iptal kurulmadı 🤌" : "Skipped 🤌";
+  İptalDüğmesi.classList.add("done");
+  dom.düğmeDurdur(İptalDüğmesi);
   Kök.classList.add("done");
   dom.gizle(Kutu);
   sonra({}, 0);
@@ -99,8 +89,8 @@ const kutularıAç = (sonra) => {
 
   Kök.classList.remove("done");
   dom.göster(Kutu);
-  dom.gizle(GösterButonu);
-  dom.gizle(İptalButonu);
+  dom.gizle(GösterDüğmesi);
+  dom.gizle(İptalDüğmesi);
   atlaDüğmesi.onclick = () => atla(sonra);
 
   /** @const {NodeList<!Element>} */
@@ -148,9 +138,9 @@ const kutularıAç = (sonra) => {
       geçerli = false;
     }
     if (geçerli) {
-      dom.göster(İptalButonu);
-      İptalButonu.innerText = dom.TR ? "İmece iptal kuruldu ✓" : "Social revoke setup is complete ✓";
-      İptalButonu.onclick = null;
+      dom.göster(İptalDüğmesi);
+      İptalDüğmesi.innerText = dom.TR ? "İmece iptal kuruldu ✓" : "Social revoke setup is complete ✓";
+      İptalDüğmesi.onclick = null;
       dom.gizle(Kutu);
       Kök.classList.add("done");
       sonra(adresAğırlığı, eşikDeğeri);

diff --git a/al/imeceİptal/birim.jsx b/al/imeceİptal/birim.jsx
@@ -0,0 +1,74 @@
+import Yapıştır from "../paste.svg";
+import Css from "./birim.css";
+import dom from "/lib/util/dom";
+
+/** @const {!HTMLInputElement} */
+export const EşikGirdisi = dom.input("imt");
+/** @const {!HTMLAnchorElement} */
+export const GösterDüğmesi = dom.a("imbe");
+/** @const {!HTMLAnchorElement} */
+export const İptalDüğmesi = dom.a("imbh");
+/** @const {!HTMLDivElement} */
+export const İptalciler = dom.div("imf");
+/** @const {!HTMLDivElement} */
+export const Kök = dom.div("im");
+/** @const {!HTMLDivElement} */
+export const Kutu = dom.div("imc");
+/** @const {!HTMLInputElement} */
+export const ToplamAğırlık = dom.input("ims");
+
+const İptalci = () =>
+  <div class="imcont">
+    <input class="imai" type="text" spellcheck="false" />
+    <a href="javascript:" class="imbtn paste" en:title="Paste" title="Yapıştır"><Yapıştır inline /></a>
+    <a href="javascript:" class="imbtn minus">-</a>
+    <input class="imwi" type="number" value="1" />
+    <a href="javascript:" class="imbtn plus">+</a>
+    <a href="javascript:" class="imdel" en:title="Delete address" title="Adresi sil"></a>
+  </div>;
+
+export default () =>
+  <Kök class="step disabled">
+    <Css />
+    <b data-en="4. Social revoke addresses.">4. İmece iptal adresleri.</b>
+    {{
+      tr: <>
+        Fiyatı <span id="imft">$1,5’dan</span> <span id="imfs">$1’a</span> düşürmek için
+        (%<span id="imfu">33</span> indirim) imece iptal adresleri eklemek istiyor musunuz?</>,
+      en: <>
+        Would you like to set up social revoke addresses to reduce the price
+        from <span id="imft">$1.5</span> to <span id="imfs">$1</span>
+        (a discount of <span id="imfu">33</span>%)?</>
+    }}
+    <br />
+    <br />
+    <GösterDüğmesi href="javascript:" id="imbe" class="act btn lft" data-en="Yes">Evet</GösterDüğmesi>
+    <İptalDüğmesi href="javascript:" id="imbh" class="btn" data-en="No">Hayır</İptalDüğmesi>
+    <Kutu style="display:none">
+      <div id="imlbl">
+        <b data-en="Address">Adres</b>
+        <b data-en="Weight">Ağırlık</b>
+      </div>
+      <İptalciler>
+        <İptalci />
+        <İptalci />
+        <İptalci />
+      </İptalciler>
+      <br />
+      <a href="javascript:" id="imba" class="btn" en:title="Add address" title="Adres ekle">+</a>
+      <div class="imdc">
+        <div class="imtc imcont">
+          <b class="imb" data-en="Threshold ">Eşik </b>
+          <a href="javascript:" id="imtm" class="imbtn minus">-</a>
+          <EşikGirdisi type="number" class="imwi" value="2" />
+          <a href="javascript:" id="imtp" class="imbtn plus">+</a>
+        </div>
+        <div>
+          <b class="imb" data-en="Total weight">Toplam Ağırlık</b>
+          <ToplamAğırlık type="number" readonly value="3" />
+        </div>
+      </div>
+      <a href="javascript:" id="imbt" class="act btn lft" data-en="OK">Tamam</a>
+      <a href="javascript:" id="imbi" class="btn" data-en="Cancel">İptal</a>
+    </Kutu>
+  </Kök>
diff --git a/al/sayfa.jsx b/al/sayfa.jsx
@@ -1,7 +1,33 @@
 import Css from "./sayfa.css";
+import Tanışma from "./tanışma/birim.jsx";
+import Ödeme from "./ödeme/birim.jsx";
+import Başlık from "/birim/başlık/birim";
+import Favicon from "/birim/icon.svg";
+import KPass from "/birim/kpass/birim.jsx";
+import Lato400 from "/birim/lato/l400.ttf";
+import Lato700 from "/birim/lato/l700.ttf";
+import Telefon from "/birim/telefon/birim.jsx";
 import { ChainId } from "/lib/crosschain/chains";
 import { assignGlobals } from "/lib/kastro/compiler/pageGlobals";
 
+const CüzdanBağlama = () =>
+  <div id="al1" class="step">
+    <b data-en="1. Connect your wallet.">1. Cüzdanınızı bağlayın. </b>{{
+      tr: "Cüzdan bağlayarak devam edin.",
+      en: "Proceed with a crypto wallet."
+    }}<br /><br />
+    <a href="javascript:" id="al1a" class="act btn" data-en="Connect wallet">Cüzdan bağla</a>
+  </div>;
+
+const Şifreleme = () =>
+  <div id="al3" class="step disabled">
+    <b data-en="3. Let’s encrypt your KPass.">3. KPass’inizi şifreleyelim. </b>{{
+      en: "We need 4 signatures from you to encrypt your KPass.",
+      tr: "KPass’ini şifrelememiz için sizden 4 adet imzaya ihtiyacımız var. Bu işlem off-chain, tamamen ücretsiz ve güvenli."
+    }}<br /><br />
+    <a href="javascript:" id="al3a" class="act btn" data-en="Request 4 signatures">4 imza isteği yolla</a>
+  </div>;
+
 const Al = () => {
   assignGlobals({
     Chains: [
@@ -23,42 +49,30 @@ const Al = () => {
       <head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Lato400 shared />
+        <Lato700 shared />
         <title data-en="KimlikDAO | Mint KPass">KimlikDAO | KPass al</title>
-        <birim:lato />
         <birim:ortakcss />
-        <birim:favicon />
+        <Favicon raster={32} rel="icon" />
         <Css />
         <script type="module" src="/al/sayfa.js" data-loose></script>
       </head>
 
       <body>
-        <birim:başlık data-href="/" />
+        <Başlık href="/" />
         <div id="al">
           <div id="als">
-            <div id="al1" class="step"><b data-en="1. Connect your wallet.">1. Cüzdanınızı bağlayın.</b><span
-              data-en="Proceed with a crypto wallet.">
-              Cüzdan bağlayarak devam edin.</span>
-              <br />
-              <br />
-              <a href="javascript:" id="al1a" class="act btn" data-en="Connect wallet">Cüzdan bağla</a>
-            </div>
-            <altbirim:tanışma />
-            <div id="al3" class="step disabled">
-              <b data-en="3. Let’s encrypt your KPass.">3. KPass’inizi şifreleyelim.</b><span phantom
-                data-en="We need 4 signatures from you to encrypt your KPass.">KPass’ini
-                şifrelememiz için sizden <span id="al3b">4</span> adet imzaya ihtiyacımız var.
-                Bu işlem off-chain, tamamen ücretsiz ve güvenli.</span>
-              <br /><br />
-              <a href="javascript:" id="al3a" class="act btn" data-en="Request 4 signatures">4 imza isteği yolla</a>
-            </div>
+            <CüzdanBağlama />
+            <Tanışma />
+            <Şifreleme />
             <altbirim:imeceİptal />
-            <altbirim:ödeme />
+            <Ödeme />
           </div>
           <div id="alr">
             <div id="alu">
-              <birim:kpass />
+              <KPass />
             </div>
-            <birim:telefon style="opacity:0" data-kpass="true" />
+            <Telefon style="opacity:0" kpass={false} />
           </div>
         </div>
       </body>

diff --git a/al/tanışma/birim.jsx b/al/tanışma/birim.jsx
@@ -1,23 +1,27 @@
+import Bağlantı from "./external-link.svg";
+import UploadResmi from "./upload.svg";
+import Css from "./birim.css";
 
 const Tanışma = () => (
   <div id="ta" class="step disabled">
-    <b data-en="2. Introduce yourself.">2. Kendinizi tanıtın.</b>
-    <i18n data-phantom data-en="Authenticate by uploading a verifiable e-devlet PDF.">Kendinizi e-devlet’ten alınmış nüfus
-    kayıt örneği yükleyerek veya e-devlet girişi ile tanıtabilirsiniz.</i18n>
-    <br />
+    <Css />
+    <b data-en="2. Introduce yourself.">2. Kendinizi tanıtın.</b>{{
+      en: "Authenticate by uploading a verifiable e-devlet PDF.",
+      tr: "Kendinizi e-devlet’ten alınmış nüfus kayıt örneği yükleyerek veya e-devlet girişi ile tanıtabilirsiniz."
+    }}<br />
     <br />
     <a href="javascript:" class="act btn lft" id="tab" data-en="PDF authentication">PDF ile tanıt</a>
-    <a class="btn" id="taa" title={{"tr": "Çok Yakında!", "en": "Soon!"}}>{{
-      "en": "E-devlet ile giriş (Yakında!)",
-      "tr": "Login with e-devlet (Soon!)"
+    <a class="btn" id="taa" title={{tr: "Çok Yakında!", en: "Soon!"}}>{{
+      tr: "E-devlet ile giriş (Yakında!)",
+      en: "Login with e-devlet (Soon!)"
     }}</a>
     <div id="tadc" style="display:none">
       <div id="taip" class="kux"></div>
       <div id="tada">
-        <input type="file" id="tain" accept="application/pdf" />
-        <span data-phantom
-          data-en="We need a registry certificate from e-devlet, to be presented to KimlikDAO.">E-devlet’ten
-          <b>Kuruma İbraz</b> için nüfus kayıt örneği almanız gerekiyor.</span>
+        <input type="file" id="tain" accept="application/pdf" />{{
+          en: "We need a registry certificate from e-devlet, to be presented to KimlikDAO.",
+          tr: <>E-devlet’ten <b>Kuruma İbraz</b> için nüfus kayıt örneği almanız gerekiyor.</>
+        }}
         <table id="tabi">
           <tr>
             <td data-en="Certificate type">Nüfus Kayıt Örneği Tipi</td>
@@ -41,18 +45,18 @@ const Tanışma = () => (
                 data-en:title="Copy" title="Kopyala" style="display:none"><img src="/al/paste.svg" data-inline /></a>
             </td>
           </tr>
-        </table>
-        <i18n data-en="Please enter the information above at "> </i18n>
-        <a class="lnk" target="_blank" href="//www.turkiye.gov.tr/nvi-nufus-kayit-ornegi-belgesi-sorgulama">
-          <i18n data-en="e-devlet registry">E-devlet Nüfus Kayıt Örneği</i18n>
-          <img src="/al/tanışma/external-link.svg" data-inline />
-        </a>
-        <i18n data-en=" to obtain a verifiable PDF. Once you have the file, drag and drop it here.">
-          sayfasından yukarıdaki bilgileri girerek bir PDF dosyası alın. Aldığınız
-          dosyayı bu kutuya sürükleyin.</i18n>
+        </table>{{
+          en: "Please enter the information above at ", tr: ""
+        }}<a class="lnk" target="_blank" href="//www.turkiye.gov.tr/nvi-nufus-kayit-ornegi-belgesi-sorgulama">
+          {{ en: "e-devlet registry", tr: "E-devlet Nüfus Kayıt Örneği" }}
+          <Bağlantı data-inline />
+        </a>{{
+          en: " to obtain a verifiable PDF. Once you have the file, drag and drop it here.",
+          tr: " sayfasından yukarıdaki bilgileri girerek bir PDF dosyası alın. Aldığınız dosyayı bu kutuya sürükleyin."
+        }}
         <div class="tastt">
           <div id="taimg">
-            <img src="/al/tanışma/upload.svg" alt="" width="48" height="48" />
+            <UploadResmi alt="" width={48} height={48} />
           </div>
           <div id="tal" style="display:none"></div>
           <div id="tafail" style="display:none"></div>

diff --git a/al/ödeme/birim.jsx b/al/ödeme/birim.jsx
@@ -4,8 +4,8 @@ import dom from "/lib/util/dom";
 export const Kök = dom.div("od");
 
 const Dot = {
-  "en": ".",
-  "tr": ","
+  en: ".",
+  tr: ","
 };
 
 const Ödeme = () => (