👝 Cüzdan sağ paneli altbirim yap

KimlikDAO · Jan 13, 2025 · 548d454 · 548d454
1 parent b01cc1f
commit 548d454
Show file tree

Hide file tree

Showing 26 changed files with 139 additions and 102 deletions.
diff --git a/al/sayfa.js b/al/sayfa.js
@@ -5,8 +5,7 @@ import { BağlaDüğmesi } from "./sayfa.jsx";
 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 "/birim/cüzdan/birim";
-import "/birim/dil/birim";
+import { Cüzdan } from "/birim/başlık/birim";
 import Kpass from "/birim/kpass/birim";
 import Telefon from "/birim/telefon/birim";
 import { ChainGroup } from "/lib/crosschain/chains";

diff --git a/ana/hero/birim.jsx b/ana/hero/birim.jsx
@@ -21,7 +21,7 @@ const Hero = () => (
           }}</a>
         </div>
       </div>
-      <Telefon kpass={true} />
+      <Telefon kpassli />
     </div>
   </div>
 );

diff --git a/ana/opengraph.jsx b/ana/opengraph.jsx
@@ -1,3 +1,4 @@
+import { HostUrl } from "/crate";
 import { I18nString, LangCode } from "/lib/util/i18n";
 
 /** @const {I18nString} */
@@ -14,9 +15,9 @@ export const Title = {
 
 export default () => (<>
   <meta property="og:type" content="website" />
-  <meta property="og:url" content="https://kimlikdao.org" />
+  <meta property="og:url" content={HostUrl} />
   <meta property="og:title" content={Title} />
-  <meta property="og:image" content="https://kimlikdao.org/KPASS.svg" />
+  <meta property="og:image" content={`${HostUrl}/KPASS.svg`} />
   <meta property="og:description" content={Description} />
   <meta property="og:locale" content={{ [LangCode.EN]: "en_US", [LangCode.TR]: "tr_TR" }} />
   <meta property="og:site_name" content="KimlikDAO" />

diff --git a/ana/sahipler/birim.css b/ana/sahipler/birim.css
@@ -14,7 +14,7 @@
   flex-wrap: wrap;
   margin: 0 auto;
   max-width: 1200px;
-  padding: 0 20px;
+  padding: 20px;
 }
 
 /**

diff --git a/ana/sayfa.js b/ana/sayfa.js
@@ -3,6 +3,7 @@ import "./kazan/birim";
 import Css from "./sayfa.css";
 import "/birim/altdizin/birim";
 import Cüzdan from "/birim/cüzdan/birim";
+import "/birim/cüzdan/sağMenü";
 import "/birim/dil/birim";
 import { Page } from "/crate";
 import dom from "/lib/util/dom";

diff --git a/ana/sayfa.jsx b/ana/sayfa.jsx
@@ -10,15 +10,16 @@ import Css from "./sayfa.css";
 import TwitterCard from "./twittercard";
 import Altdizin from "/birim/altdizin/birim";
 import Cüzdan from "/birim/cüzdan/birim";
+import SağMenü from "/birim/cüzdan/sağMenü";
 import Dil from "/birim/dil/birim";
 import Favicon from "/birim/icon.svg";
 import Lato400 from "/birim/lato/l400.ttf";
 import Lato700 from "/birim/lato/l700.ttf";
 import Logo from "/birim/logo.svg";
 import OrtakCss from "/birim/ortakcss/birim";
-import { ExternalPage, Page } from "/crate";
+import { ExternalPage, HostUrl, Page } from "/crate";
 import { ChainId } from "/lib/crosschain/chains";
-import { I18nString } from "/lib/util/i18n"
+import { I18nString, LangCode } from "/lib/util/i18n"
 
 /** @const {!Array<ChainId>} */
 const Chains = [
@@ -39,6 +40,10 @@ const ChainNotes = {
 /** @const {ChainId} */
 const DefaultChain = ChainId.xa4b1;
 
+/**
+ * @param {{ Lang: LangCode }} props
+ * @return {!Promise<string>}
+ */
 const Ana = ({ Lang }) => (
   <html lang={Lang}>
     <head>
@@ -50,7 +55,7 @@ const Ana = ({ Lang }) => (
       <Lato400 shared />
       <Lato700 shared />
       <title>{Title}</title>
-      <link rel="canonical" href="https://kimlikdao.org" />
+      <link rel="canonical" href={HostUrl} />
       <OrtakCss />
       <Css />
       <Favicon raster={32} rel="icon" />
@@ -66,7 +71,9 @@ const Ana = ({ Lang }) => (
           }}</a>
           <a class={OrtakCss.Başlık.Link} href="//discord.gg/H2wg6pcWXG" target="_blank" rel="noreferrer">Discord</a>
           <Dil />
-          <Cüzdan Chains={Chains} DefaultChain={DefaultChain} ChainNotes={ChainNotes} />
+          <Cüzdan Chains={Chains} DefaultChain={DefaultChain} ChainNotes={ChainNotes}>
+            <SağMenü />
+          </Cüzdan>
           <a id={Css.EylemDüğmesi} href={Page.Al} class={[OrtakCss.Düğme, "act"]}>{{
             en: "Mint KPass", tr: "Hemen KPass al"
           }}<OkResmi inline /></a>

diff --git a/ana/twittercard.jsx b/ana/twittercard.jsx
@@ -1,8 +1,9 @@
 import { Description, Title } from "./opengraph.jsx";
+import { HostUrl } from "/crate";
 
 export default () => (<>
   <meta name="twitter:card" content="summary_large_image" />
   <meta name="twitter:title" content={Title} />
   <meta name="twitter:description" content={Description} />
-  <meta name="twitter:image" content="https://kimlikdao.org/KPASS.svg" />
+  <meta name="twitter:image" content={`${HostUrl}/KPASS.svg`} />
 </>);
diff --git a/birim/altdizin/birim.jsx b/birim/altdizin/birim.jsx
@@ -23,7 +23,7 @@ const Altdizin = () => (
       <b data-en="COMMUNITY">TOPLULUK</b>
       <a href="//x.com/KimlikDAO">X</a>
       <a href="//discord.gg/H2wg6pcWXG">Discord</a>
-      <a href="//join.kimlikdao.org/#sa-ambassador1">{{ en: "Ambassador program", tr: "Ambassador ol" }}</a>
+      <a href={ExternalPage.Join + "#sa-ambassador1"}>{{ en: "Ambassador program", tr: "Ambassador ol" }}</a>
       <a href="//zealy.io/c/kimlikdao">Zealy</a>
       <a href="//github.com/KimlikDAO">GitHub</a>
       <a href="//dappradar.com/dapp/kimlikdao-2">DappRadar</a>

diff --git a/birim/başlık/birim.css b/birim/başlık/birim.css
@@ -1,3 +1,7 @@
+/**
+ * Başlık
+ * @name {Kök}
+ */
 #ba {
   align-items: center;
   display: flex;
@@ -10,10 +14,7 @@
 /**
  * @name {Logomark}
  */
-#bak {
-  /* need a no-op */
-  all: unset;
-}
+#bak {}
 
 /**
  * Sol üsteekki KimlikDAO logo ve yazısı

diff --git a/birim/başlık/birim.js b/birim/başlık/birim.js
@@ -0,0 +1,5 @@
+import Cüzdan from "/birim/cüzdan/birim";
+import "/birim/cüzdan/sağMenü";
+import "/birim/dil/birim";
+
+export { Cüzdan };
diff --git a/birim/başlık/birim.jsx b/birim/başlık/birim.jsx
@@ -1,5 +1,6 @@
 import Css from "./birim.css";
 import Cüzdan from "/birim/cüzdan/birim.jsx";
+import SağMenü from "/birim/cüzdan/sağMenü.jsx";
 import Dil from "/birim/dil/birim.jsx";
 import Logo from "/birim/logo.svg";
 
@@ -15,14 +16,16 @@ import Logo from "/birim/logo.svg";
  * @return {string}
  */
 const Başlık = ({ Chains, DefaultChain, ChainNotes, href = "/", title = "KimlikDAO", piggyback }) => (
-  <div id="ba">
+  <div id={Css.Kök}>
     <Css />
-    <a href={href} id="bag"><Logo id="bak" inline />{title}</a>
-    <div id="baf">
+    <a href={href} id={Css.Logo}><Logo id={Css.Logomark} inline />{title}</a>
+    <div id={Css.Linkler}>
       <Dil piggyback={piggyback} />
-      <Cüzdan Chains={Chains} DefaultChain={DefaultChain} ChainNotes={ChainNotes} piggyback={piggyback} />
+      <Cüzdan Chains={Chains} DefaultChain={DefaultChain} ChainNotes={ChainNotes} piggyback={piggyback}>
+        <SağMenü />
+      </Cüzdan>
     </div>
-  </div>
+  </div >
 );
 
 export default Başlık;
diff --git a/birim/cüzdan/birim.css b/birim/cüzdan/birim.css
@@ -44,6 +44,7 @@
   outline: 0;
   position: absolute;
   top: 53px;
+  transition: opacity 0.2s;
   width: 380px;
   z-index: 20;
 }

diff --git a/birim/cüzdan/birim.js b/birim/cüzdan/birim.js
@@ -220,7 +220,7 @@ const kpassDeğişti = () => {
   })
 }
 
-const koptu = () => {
+const kopar = () => {
   Adres = null;
   AdresDüğmesi.innerText = BağlaMetni;
   bağlantıSeçildi("", BoşBağlantı);
@@ -234,7 +234,7 @@ const koptu = () => {
  */
 const adresDeğişti = (adresler) => {
   if (!adresler || !adresler.length)
-    koptu();
+    kopar();
   else if (adresler[0] != Adres) {
     /** @const {?string} */
     const eskiAdres = Adres;
@@ -290,7 +290,7 @@ const bağlantıDeğişince = (f) => BağlantıDeğişince.push(f);
  * @param {ChainId} ağ
  */
 const ağSeçildi = (ağ) => {
-  if (!Bağlı.isChainSupported(ağ)) koptu();
+  if (!Bağlı.isChainSupported(ağ)) kopar();
   Bağlı.switchChain(ağ);
 }
 
@@ -372,42 +372,24 @@ const izinliyseBağla = () => {
     bağlantıSeçiciGöster();
 }
 
-const aç = () => {
-  dom.göster(Menü);
-  AğDüğmesi.onclick = null;
-  AdresDüğmesi.onclick = null;
-  Menü.focus();
-}
+
+const aç = () => AğDüğmesi.click();
 
 const kur = () => {
   /** @const {!Element} */
   const seçiliAğ = dom.adla(Css.AğListesi + DefaultChain);
   seçiliAğ.replaceChild(AğDüğmesi.firstElementChild.cloneNode(true),
     seçiliAğ.firstElementChild);
-  AdresDüğmesi.onclick = AğDüğmesi.onclick = aç;
-  Menü.onblur = () => {
-    dom.gizle(Menü);
-    setTimeout(() => AdresDüğmesi.onclick = AğDüğmesi.onclick = aç, 300);
-  };
-
-  dom.adla(Css.AğListesi).onclick = (event) => {
-    /** @type {Element} */
-    let li = event.target;
-    for (; li.nodeName != 'LI'; li = li.parentElement)
-      if (li.nodeName == 'BODY') return;
-    /** @const {ChainId} */
-    const ağ = /** @type {ChainId} */(li.id.slice(3));
-    ağSeçildi(ağ);
-  }
 
-  const düğmeler = SağPanel.children;
-  düğmeler[2].onclick = () =>
-    window.location.href = "//join.kimlikdao.org/#sa-ambassador1";
-  düğmeler[3].onclick = () =>
-    window.location.href = "//kimlikdao.org/" + dom.i18n({ tr: "oyla", en: "vote" });
-  düğmeler[4].onclick = () =>
-    window.location.href = "//kimlikdao.org/" + dom.i18n({ tr: "iptal", en: "revoke" });
-  düğmeler[5].onclick = () => koptu();
+  dom.menüYarat(AğDüğmesi, Menü);
+  AdresDüğmesi.onclick = AğDüğmesi.onclick;
+  Menü.onclick = (event) => {
+    /** @type {HTMLLIElement} */
+    const maybeLi = /** @type {HTMLLIElement} */(event.target.closest("li"));
+    if (maybeLi && maybeLi.id && maybeLi.id.startsWith(Css.AğListesi))
+      ağSeçildi(/** @type {ChainId} */(maybeLi.id.slice(3)));
+    event.stopPropagation();
+  }
 
   CüzdanAdresi.onclick = () => navigator.clipboard.writeText(/** @type {string} */(Adres));
   dom.adla("cuex").onclick = () => {
@@ -424,6 +406,7 @@ const kur = () => {
 kur();
 
 export default {
+  SağPanel,
   aç,
   adres,
   adresDeğişince,
@@ -433,5 +416,6 @@ export default {
   bağlantıDeğişince,
   kopunca,
   hızlıArabirimAdı,
+  kopar,
   kpassDeğişince,
 };
diff --git a/birim/cüzdan/birim.jsx b/birim/cüzdan/birim.jsx
@@ -1,10 +1,6 @@
 import { AğBilgileri, ağResmi } from "../ağlar/birim";
 import Css from "./birim.css";
-import AmbassadorResmi from "/birim/cüzdan/img/ambassador.svg";
-import DeğiştirResmi from "/birim/cüzdan/img/external-link.svg";
-import İptalResmi from "/birim/cüzdan/img/iptal.svg";
 import QmarkResmi from "/birim/cüzdan/img/qmark.svg";
-import VoteResmi from "/birim/cüzdan/img/vote.svg";
 import KopyalaResmi from "/birim/paste.svg";
 import { ChainId } from "/lib/crosschain/chains";
 import { Image } from "/lib/kastro/image";
@@ -50,12 +46,12 @@ const Bağlantı = ({ idx, name }) => (
  * }} props
  * @return {string}
  */
-const Cüzdan = ({ DefaultChain, Chains, ChainNotes, piggyback }) => (
+const Cüzdan = ({ DefaultChain, Chains, ChainNotes, children, piggyback }) => (
   <div id={Css.Kök}>
     <Css />
     <AğDüğmesi><Image src={ağResmi(DefaultChain)} height={32} width={32} inline /></AğDüğmesi>
     <AdresDüğmesi>{{ tr: "Cüzdan bağla", en: "Connect wallet" }}</AdresDüğmesi>
-    <Menü style="display:none" tabindex={0}>
+    <Menü style="display:none">
       <ul id={Css.AğListesi}>
         {Chains.map((id) => (
           <li id={Css.AğListesi + id} class={id == DefaultChain ? "sel" : ""}>
@@ -81,29 +77,14 @@ const Cüzdan = ({ DefaultChain, Chains, ChainNotes, piggyback }) => (
           <div>
             <CüzdanAdresi><span>0xcCc...cCc</span><span id="cuadi"><KopyalaResmi inline /></span></CüzdanAdresi>
             <DebankLinki>DeBank</DebankLinki> <span id={Css.ExplorerLinki}>Explorer</span>
-            <div id={Css.KPassDüğmesi} data-en="MINT KPASS">KPASS AL</div>
+            <div id={Css.KPassDüğmesi}>{{ en: "MINT KPASS", tr: "KPASS AL" }}</div>
           </div>
         </div>
         <hr />
-        <li><AmbassadorResmi inline />{{
-          en: " Ambassador program",
-          tr: " Ambassador ol"
-        }}</li>
-        <li><VoteResmi width={16} height={16} />{{
-          en: " Vote",
-          tr: " Oy kullan"
-        }}</li>
-        <li><İptalResmi inline />{{
-          en: " Revoke KPass",
-          tr: " İptal işlemleri"
-        }}</li>
-        <li><DeğiştirResmi inline />{{
-          en: " Switch wallet",
-          tr: " Cüzdan değiştir"
-        }}</li>
+        {children}
       </SağPanel>
     </Menü>
-  </div >
+  </div>
 );
 
 export default Cüzdan;
diff --git a/birim/cüzdan/sağMenü.js b/birim/cüzdan/sağMenü.js
@@ -0,0 +1,12 @@
+import Cüzdan from "./birim.js";
+import dom from "/lib/util/dom";
+
+const Düğmeler = Cüzdan.SağPanel.children;
+
+Düğmeler[2].onclick = () =>
+  window.location.href = "//join.kimlikdao.org/#sa-ambassador1";
+Düğmeler[3].onclick = () =>
+  window.location.href = "//kimlikdao.org/" + dom.i18n({ tr: "oyla", en: "vote" });
+Düğmeler[4].onclick = () =>
+  window.location.href = "//kimlikdao.org/" + dom.i18n({ tr: "iptal", en: "revoke" });
+Düğmeler[5].onclick = () => Cüzdan.kopar();
diff --git a/birim/cüzdan/sağMenü.jsx b/birim/cüzdan/sağMenü.jsx
@@ -0,0 +1,23 @@
+import AmbassadorResmi from "/birim/cüzdan/img/ambassador.svg";
+import DeğiştirResmi from "/birim/cüzdan/img/external-link.svg";
+import İptalResmi from "/birim/cüzdan/img/iptal.svg";
+import VoteResmi from "/birim/cüzdan/img/vote.svg";
+
+export default () => <>
+  <li><AmbassadorResmi inline />{{
+    en: " Ambassador program",
+    tr: " Ambassador ol"
+  }}</li>
+  <li><VoteResmi width={16} height={16} />{{
+    en: " Vote",
+    tr: " Oy kullan"
+  }}</li>
+  <li><İptalResmi inline />{{
+    en: " Revoke KPass",
+    tr: " İptal işlemleri"
+  }}</li>
+  <li><DeğiştirResmi inline />{{
+    en: " Switch wallet",
+    tr: " Cüzdan değiştir"
+  }}</li>
+</>
diff --git a/birim/dil/birim.css b/birim/dil/birim.css
@@ -1,8 +1,19 @@
+/**
+ * @name {Kök}
+ */
 #di {
   position: relative;
   margin: auto 40px auto 5px;
 }
 
+/**
+ * @export {DilDüğmesi}
+ */
+#dib {}
+
+/**
+ * @export {DilListesi}
+ */
 #did {
   background-color: #fff;
   border-radius: 10px;
-Original file line number
+Diff line change
@@ Expand Up / @@ -21,7 +21,7 @@ const Hero = () => ( @@
               }}</a>
             </div>
           </div>
-          <Telefon kpass={true} />
+          <Telefon kpassli />
         </div>
       </div>
     );
@@ Expand Down @@