🍵 Mint page

.github/workflows/test.yml

@@ -34,6 +34,9 @@ jobs:
       - name: Compile `Landing` page
         run: bun lib/kdjs/kdjs.js landing/Landing.jsx --globals '{"GEN":false,"Route":{"en":"mint","tr":"al"},"DefaultChain":"0x1","Chains":["0x1","0xa4b1"],"Lang":"tr"}'
 
+      - name: Compile `Mint` page
+        run: bun lib/kdjs/kdjs.js mint/Mint.jsx --globals '{"GEN":false,"Route":{"en":"mint","tr":"al"},"DefaultChain":"0x1","Chains":["0x1","0xa4b1"],"Lang":"tr"}'
+
   compile-dapp:
     if: false # Temporarily disabled
     name: Compile the dApp

al/imeceİptal/birim.js

@@ -7,7 +7,7 @@ import {
   İptalDüğmesi,
   İptalciler
 } from "./birim.jsx";
-import { AğBilgileri, AğBilgisi } from "../../components/chains/chains.js";
+import { AğBilgileri, AğBilgisi } from "/components/chains/chains.js";
 import Cüzdan from "/components/cüzdan/birim";
 import { ChainId } from "/lib/crosschain/chains";
 import KPass from "/lib/ethereum/KPass";

al/sayfa.js

@@ -6,8 +6,8 @@ import İmeceİptal from "/al/imeceİptal/birim";
 import Tanışma from "/al/tanışma/birim";
 import { öde } from "/al/ödeme/birim";
 import { Cüzdan } from "/components/başlık/birim";
-import Kpass from "../components/kpass/KPass.jsx";
-import Phone from "../components/phone/Phone.jsx";
+import Kpass from "/components/kpass/KPass.jsx";
+import Phone from "/components/phone/Phone.jsx";
 import { ChainGroup } from "/lib/crosschain/chains";
 import { checkVerifiableIDs, toUnlockableNFT } from "/lib/did/KPass";
 import { VerificationKeys, metadataAndSections, userPrompt } from "/lib/did/KPassMetadata";

al/sayfa.jsx

@@ -6,11 +6,11 @@ import Tanışma from "./tanışma/birim";
 import Ödeme from "./ödeme/birim.jsx";
 import Başlık from "/components/başlık/birim";
 import Favicon from "/components/icon.svg";
-import KPass from "../components/kpass/KPass";
+import KPass from "/components/kpass/KPass";
 import Lato400 from "/components/lato/l400.ttf";
 import Lato700 from "/components/lato/l700.ttf";
-import OrtakCss from "/components/sharedCss/SharedCss";
-import Phone from "../components/phone/Phone";
+import Phone from "/components/phone/Phone";
+import OrtakCss from "/components/shared/SharedCss";
 import { ChainId } from "/lib/crosschain/chains";
 import dom from "/lib/util/dom";
 

al/tanışma/birim.js

@@ -1,5 +1,5 @@
 import Cüzdan from "/components/cüzdan/birim";
-import Kpass from "../../components/kpass/KPass";
+import Kpass from "/components/kpass/KPass";
 import { ChainGroup, ChainId } from "/lib/crosschain/chains";
 import { commitDouble } from "/lib/did/commitment";
 import { combineMultiple } from "/lib/did/KPass";

al/ödeme/birim.js

@@ -1,7 +1,7 @@
 import { Kök } from "./birim.jsx";
-import { AğBilgileri, AğBilgisi } from "../../components/chains/chains.js";
+import { AğBilgileri, AğBilgisi } from "/components/chains/chains.js";
 import Cüzdan from "/components/cüzdan/birim";
-import Phone from "../../components/phone/Phone.jsx";
+import Phone from "/components/phone/Phone.jsx";
 import { ChainGroup, ChainId } from "/lib/crosschain/chains";
 import KPass from "/lib/ethereum/KPass";
 import { whenMined } from "/lib/ethereum/transaction";

components/footer/Footer.jsx

@@ -1,5 +1,5 @@
 import Css from "./Footer.css";
-import SharedCss from "/components/sharedCss/SharedCss";
+import SharedCss from "../shared/SharedCss";
 import Subscribe from "/components/subscribe/Subscribe";
 import { ExternalPage } from "/crate";
 import { i18n } from "/lib/util/i18n";

components/header/Header.jsx

@@ -1,8 +1,6 @@
 import Css from "./Header.css";
-import RightPane from "/components/cüzdan/sağMenü";
 import LangPicker from "/components/langPicker/LangPicker";
 import Logo from "/components/logo.svg";
-import Wallet from "/components/wallet/Wallet";
 import { ChainId } from "/lib/crosschain/chains";
 import { css } from "/lib/kastro/stylesheet";
 import { I18nString } from "/lib/util/i18n";
@@ -49,6 +47,6 @@ const Header = ({
   </div>
 );
 
-export { LangPicker, Wallet };
+export { LangPicker };
 
 export default Header;

components/kpass/KPass.jsx

@@ -5,7 +5,7 @@ import FamilyInfoCard from "./FamilyInfoCard";
 import Css from "./KPass.css";
 import PersonInfoCard from "./PersonInfoCard";
 import RegistryInfoCard from "./RegistryInfoCard";
-import SharedCss from "/components/sharedCss/SharedCss";
+import SharedCss from "/components/shared/SharedCss";
 import "/lib/did/section.d";
 import dom from "/lib/util/dom";
 

components/phone/Phone.css

@@ -9,7 +9,7 @@
 }
 
 /** @export */
-#AnaEkran {
+#WalletApp {
   background-color: #fff;
   border-radius: 40px;
   height: 100%;
@@ -21,7 +21,7 @@
 /** @export */
 .Blurred {}
 
-#AnaEkran.Blurred {
+#WalletApp.Blurred {
   filter: blur(3px);
 }
 
@@ -55,7 +55,7 @@
 /**
  * Token NFT seçici
  */
-#CüzdanSekmeler {
+#WalletAppTabs {
   display: flex;
   font-size: 12px;
   padding-top: 30px;
@@ -64,7 +64,7 @@
 /**
  * Tokens
  */
-#Tokenler {
+#WalletAppTokens {
   border-bottom: 1px solid #73777B;
   color: #73777B;
   height: 26px;
@@ -75,24 +75,21 @@
 /**
  * NFTler
  */
-#Nftler {
+#WalletAppNfts {
   border-bottom: 2px solid #3d67ab;
   color: #3d67ab;
   height: 25px;
   text-align: center;
   width: 50%;
 }
 
-/**
- * NFT örnekleri gösteren bölme
- */
-#NftGaleri {
+#WalletAppGallery {
   display: flex;
   justify-content: left;
   padding: 15px 5px;
 }
 
-.NftÖrnek {
+.WalletAppNft {
   border-radius: 5px;
   border: 1px solid #ccc;
   box-shadow: 0px 1px 5px rgb(0 0 0 / 15%);
@@ -105,7 +102,7 @@
  * Bilgi kutusu
  * @export
  */
-#Kutu {
+#InfoDialog {
   background: rgb(255 255 255 / 0.8);
   border-radius: 10px;
   box-shadow: 0px 2px 10px rgb(0 0 0 / 15%);
@@ -122,34 +119,33 @@
 /** @export */
 .Show {}
 
-#Kutu.Show {
+#InfoDialog.Show {
   opacity: 1;
 }
 
 /**
  * Bilgi kutusu metni
  */
-#KutuMetni {
+#InfoDialogText {
   padding: 35px 10px;
 }
 
 /**
  * Bilgi kutusu düğmeleri
  */
-#KutuDüğmeleri {
+#InfoDialogButtons {
   border-top: 0.3px solid #ccc;
   display: flex;
   height: 40px;
 }
 
-#Hayır,
-#Evet {
+#InfoDialogYes,
+#InfoDialogNo {
   padding: 10px;
   width: 50%;
 }
 
-/** @export */
-#Evet {
+#InfoDialogYes {
   border-left: 0.3px solid #ccc;
   font-weight: 700;
 }

components/phone/Phone.jsx

@@ -3,18 +3,10 @@ import Css from "./Phone.css";
 import { css } from "/lib/kastro/stylesheet";
 import dom from "/lib/util/dom";
 
-/** @const {!HTMLDivElement} */
-const Address = dom.div(Css.Address);
-/** @const {!HTMLDivElement} */
-const AnaEkran = dom.div(Css.AnaEkran);
 /** @const {!HTMLDivElement} */
 const KPassDialog = dom.div(Css.KPassDialog);
 /** @const {!HTMLDivElement} */
-const Kutu = dom.div(Css.Kutu);
-/** @const {!HTMLDivElement} */
 const KPassDialogButton = dom.div(Css.KPassDialogButton);
-/** @const {!HTMLDivElement} */
-const Evet = dom.div(Css.Evet);
 
 /** @enum {string} */
 const JointCss = css`
@@ -36,6 +28,63 @@ const JointCss = css`
   }
 `;
 
+const WalletApp = () => {
+  /** @const {!HTMLDivElement} */
+  WalletApp.Root = dom.div(Css.WalletApp)
+  return (
+    <WalletApp.Root>
+      <div id={Css.Balance}>$1523.74</div>
+      <div id={Css.Account}>KimlikDAO</div>
+      <div id={Css.Address}>0x1DA0...1DA0</div>
+      <div id={Css.WalletAppTabs}>
+        <div id={Css.WalletAppTokens}>{{ en: "Tokens", tr: "Tokenler" }}</div>
+        <div id={Css.WalletAppNfts}>{{ en: "NFTs", tr: "NFT’ler" }}</div>
+      </div>
+      <div id={Css.WalletAppGallery}>
+        <div class={Css.WalletAppNft} />
+      </div>
+    </WalletApp.Root>
+  );
+}
+
+/**
+ * @param {string=} address
+ * @return {string}
+ */
+WalletApp.setAddress = (address = "0x1DA01DAO") => WalletApp
+  .Root
+  .children[2]
+  .innerText = address.slice(0, 6) + "..." + address.slice(-4);
+
+
+const InfoDialog = () => {
+  /** @const {!HTMLDivElement} */
+  InfoDialog.Root = dom.div(Css.InfoDialog);
+  InfoDialog.Root.style.opacity = "";
+  return (
+    <InfoDialog.Root noshow>
+      <div id={Css.InfoDialogText} />
+      <div id={Css.InfoDialogButtons}>
+        <div id={Css.InfoDialogNo}>{{ en: "Cancel", tr: "Hayır" }}</div>
+        <div id={Css.InfoDialogYes}>{{ en: "Provide", tr: "Evet" }}</div>
+      </div>
+    </InfoDialog.Root>
+  );
+}
+
+/**
+ * @param {string} prompt
+ * @param {string=} buttonText
+ */
+InfoDialog.show = (prompt, buttonText) => {
+  if (buttonText) InfoDialog.Root.children[1].children[1].innerText = buttonText;
+  const show = !!prompt;
+  if (show) InfoDialog.Root.children[0].innerText = prompt;
+  WalletApp.Root.classList.toggle(Css.Blurred, show);
+  InfoDialog.Root.classList.toggle(Css.Show, show);
+  KPassDialog.classList.toggle(Css.Blurred, show);
+}
+
 /**
  * @param {{ withKPass: boolean, noshow: boolean }=} props
  * @return {Promise<string>}
@@ -44,59 +93,25 @@ const Phone = ({ withKPass = true, noshow }) => (
   <div id={Css.Root} noshow={noshow}>
     <Css />
     <JointCss />
-    <AnaEkran>
-      <div id={Css.Balance}>$1523.74</div>
-      <div id={Css.Account}>KimlikDAO</div>
-      <Address>0x1DA0...1DA0</Address>
-      <div id={Css.CüzdanSekmeler}>
-        <div id={Css.Tokenler}>{{ en: "Tokens", tr: "Tokenler" }}</div>
-        <div id={Css.Nftler}>{{ en: "NFTs", tr: "NFT’ler" }}</div>
-      </div>
-      <div id={Css.NftGaleri}>
-        <div class={Css.NftÖrnek} />
-      </div>
-    </AnaEkran >
+    <WalletApp />
     <KPassDialog>
       {withKPass && <KPass />}
-      <KPassDialogButton>{{ en: "Hide", tr: "Gizle" }}</KPassDialogButton>
+      <KPassDialogButton>{{ en: "Encrypt", tr: "Gizle" }}</KPassDialogButton>
     </KPassDialog>
-    <Kutu noshow>
-      <div id={Css.KutuMetni} />
-      <div id={Css.KutuDüğmeleri}>
-        <div id={Css.Hayır}>{{ en: "Cancel", tr: "Hayır" }}</div>
-        <Evet>{{ en: "Provide", tr: "Evet" }}</Evet>
-      </div>
-    </Kutu>
+    <InfoDialog />
   </div >
 );
 
 /**
- * @param {?string} address Set the address of the mobile wallet.
+ * @param {string=} address Set the address of the mobile wallet.
  */
-Phone.setAddress = (address = "0x1DA01DAO") =>
-  Address.innerText = address.slice(0, 6) + "..." + address.slice(-4);
+Phone.setAddress = WalletApp.setAddress;
 
 /**
- * @param {string} prompt İletişim kutusunda gösterilecek metin.
+ * @param {string} prompt
  * @param {string=} buttonText
  */
-Phone.showDialog = (prompt, buttonText) => {
-  if (buttonText) Evet.innerText = buttonText;
-  Kutu.style.opacity = "";
-  Kutu.firstElementChild.innerText = prompt;
-  Kutu.classList.add(Css.Show);
-  AnaEkran.classList.add(Css.Blurred);
-  KPassDialog.classList.add(Css.Blurred);
-}
-
-/**
- * Closes the dialog box on the phone.
- */
-Phone.closeDialog = () => {
-  Kutu.classList.remove(Css.Show);
-  KPassDialog.classList.remove(Css.Blurred);
-  AnaEkran.classList.remove(Css.Blurred);
-}
+Phone.showDialog = InfoDialog.show;
 
 /**
  * Displays the NFT mock in the phone image.
@@ -105,21 +120,18 @@ Phone.closeDialog = () => {
  * @param {boolean} infoSide NFT'nin bilgi yüzü gösterilsin.
  */
 Phone.showKPass = (showInDialog, infoSide) => {
-  KPass.showSide(infoSide);
+  /** @type {boolean} */
+  Phone.InfoSide = infoSide;
   const showSide = () => {
-    KPass.showSide(infoSide);
-    KPassDialogButton.innerText = infoSide
+    KPass.showSide(Phone.InfoSide);
+    KPassDialogButton.innerText = Phone.InfoSide
       ? dom.i18n({ tr: "Gizle", en: "Encrypt" })
-      : dom.i18n({ tr: "Aç", en: "Decrypt" });
+      : dom.i18n({ en: "Decrypt", tr: "Aç" });
   }
   showSide();
-  if (showInDialog) {
-    KPass.Root.style.opacity = "";
-    dom.göster(KPassDialogButton);
-    KPassDialogButton.onclick ||= () => {
-      infoSide = !infoSide;
-      showSide();
-    }
+  KPassDialogButton.onclick ||= () => {
+    Phone.InfoSide = !Phone.InfoSide;
+    showSide();
   }
   KPass.Root.classList.toggle(JointCss.ShowInWallet, !showInDialog);
   KPassDialogButton.classList.toggle(Css.Hide, !showInDialog);

components/subscribe/Subscribe.jsx

@@ -1,5 +1,5 @@
 import Css from "./Subscribe.css";
-import SharedCss from "/components/sharedCss/SharedCss";
+import SharedCss from "../shared/SharedCss";
 import dom from "/lib/util/dom";
 
 /**