👛 Refactor Wallet component 1/n

KimlikDAO · Feb 4, 2025 · 8976437 · 8976437
1 parent 2895525
commit 8976437
Show file tree

Hide file tree

Showing 28 changed files with 520 additions and 492 deletions.
diff --git a/components/blog/2025.02/Feb25.jsx b/components/blog/2025.02/Feb25.jsx
@@ -20,7 +20,6 @@ const Css = css`
  *   piggyback: string,
  *   loading: string
  * }=} props
- * @return {Promise<string>}
  */
 const Feb25 = ({ href, piggyback, loading }) => (
   <a href={href} class={BlogCss.Preview}>

diff --git a/components/blog/Author.jsx b/components/blog/Author.jsx
@@ -15,7 +15,6 @@ const Css = css`
 
 /**
  * @param {{ name: string }=} props
- * @return {Promise<string>}
  */
 const Author = ({ name }) => (
   <div class={Css.Author}>

diff --git a/components/blog/RemainingBar.jsx b/components/blog/RemainingBar.jsx
@@ -41,7 +41,6 @@ const Css = css`
  *   maximum: (number|undefined),
  *   ticker: (string|undefined)
  * }} props
- * @return {Promise<string>}
  */
 const RemainingBar = ({ id, className, children, maximum, ticker }) => (
   <div id={id} class={[Css.Container, className]}>

diff --git a/components/blog/ecdsa/Banner.jsx b/components/blog/ecdsa/Banner.jsx
@@ -15,7 +15,6 @@ const Css = css`
 
 /**
  * @param {{ piggyback: string }} props
- * @return {Promise<string>}
  */
 export default ({ piggyback }) => (
   <svg viewBox="0 0 440 232">

diff --git a/components/blog/ecdsa/ECDSA.jsx b/components/blog/ecdsa/ECDSA.jsx
@@ -1,7 +1,7 @@
 import Author from "../Author";
 import BlogCss from "../blog.css";
 import RemainingBar from "../RemainingBar";
-import Banner from "./Banner.jsx";
+import Banner from "./Banner";
 import { ChainInfos } from "/components/chains/chains";
 import USDT from "/components/tokens/USDT.svg";
 import { ChainId } from "/lib/crosschain/chains";
@@ -36,7 +36,6 @@ const TOTAL = 5_000e6;
 
 /**
  * @param {{ href: string, piggyback: string }=} props
- * @return {Promise<string>}
  */
 const ECDSA = ({ href, piggyback }) => {
   dom.schedule(() =>

diff --git a/components/blog/ellipticCurves/EllipticCurves.jsx b/components/blog/ellipticCurves/EllipticCurves.jsx
@@ -39,7 +39,6 @@ const TOTAL = 50_000_000_000;
 
 /**
  * @param {{ href: string, piggyback: string }=} props
- * @return {Promise<string>}
  */
 const EllipticCurves = ({ href, piggyback }) => {
   dom.schedule(

diff --git a/components/blog/mina-appchain/birim.jsx b/components/blog/mina-appchain/birim.jsx
@@ -28,7 +28,6 @@ const TOTAL = 10_000_000_000_000;
 
 /**
  * @param {{ href: string, piggyback: string }=} props
- * @return {Promise<string>}
  */
 const MinaAppchain = ({ href, piggyback }) => {
   fetch(`https://${ChainInfos[ChainId.MinaMainnet].rpcUrl}/accounts/${ZkAppAddress}`)

diff --git a/components/chains/chains.js b/components/chains/chains.js
@@ -67,12 +67,12 @@ const ChainInfos = {
  * @param {ChainId} chainId
  * @return {string} url
  */
-const chainImage = (chainId) => "components/chains/" + (chainId.startsWith("mi")
+const chainImageSrc = (chainId) => "components/chains/" + (chainId.startsWith("mi")
   ? "mina.png"
   : ChainInfos[chainId].uiName.replaceAll(" ", "").toLowerCase() + ".svg");
 
 export {
   ChainInfos,
   ChainInfo,
-  chainImage
+  chainImageSrc
 };
diff --git a/components/header/Header.jsx b/components/header/Header.jsx
@@ -22,7 +22,6 @@ const JointCss = css`
  *   title: string,
  *   piggyback: (string|undefined)
  * }=} props
- * @return {Promise<string>}
  */
 const Header = ({
   Chains,

diff --git a/components/kpass/KPass.jsx b/components/kpass/KPass.jsx
@@ -65,7 +65,6 @@ const Nav = () => {
 
 /**
  * @param {{ style: string, piggyback: string }=} props
- * @return {Promise<string>}
  */
 const KPass = ({ style, piggyback }) => {
   /** @const {!HTMLDivElement} */
@@ -97,13 +96,11 @@ KPass.RightArrow = RightArrow;
 KPass.LeftArrow = LeftArrow;
 
 /**
- * @param {boolean} infoSide
+ * Shows the side given by the infoSide parameter. If no parameter is given,
+ * the side is toggled.
+ *
+ * @param {boolean|undefined} infoSide
  */
 KPass.showSide = (infoSide) => KPass.root.classList.toggle(Css.InfoSide, infoSide);
 
-/**
- * @return {boolean}
- */
-KPass.flip = () => KPass.root.classList.toggle(Css.InfoSide);
-
 export default KPass;
diff --git a/components/kpass/PersonInfoCard.jsx b/components/kpass/PersonInfoCard.jsx
@@ -11,9 +11,6 @@ const Ids = css`
 /** @const {!Array<string>} */
 const Fields = ["localIdNumber", "first", "last", "dateOfBirth", "cityOfBirth", "gender"];
 
-/**
- * @return {Promise<string>}
- */
 const PersonInfoCard = () => (
   <div class={Css.Card}>
     <div class={Css.CardContent} id={Ids.PersonInfoCard}>

diff --git a/components/kpass/RegistryInfoCard.jsx b/components/kpass/RegistryInfoCard.jsx
@@ -10,9 +10,6 @@ const Ids = css`
 /** @const {!Array<string>} */
 const Fields = ["il", "ilçe", "mahalle", "tescil"];
 
-/**
- * @return {Promise<string>}
- */
 const RegistryInfoCard = () => (
   <div class={Css.Card}>
     <div class={Css.CardContent} id={Ids.RegistryInfoCard}>

diff --git a/components/langPicker/LangPicker.jsx b/components/langPicker/LangPicker.jsx
@@ -8,10 +8,6 @@ import { I18nString, LangCode } from "/lib/util/i18n";
 
 /** @define {I18nString} */
 const Route = { tr: "tr", en: "en" };
-/** @const {!HTMLAnchorElement} */
-const LangButton = dom.a(Css.LangButton);
-/** @const {!HTMLUListElement} */
-const LangDropdown = dom.ul(Css.LangDropdown);
 
 /**
  * @param {Event} event 
@@ -30,23 +26,30 @@ const langChanged = (event) => {
   }
 };
 
-const LangPicker = () => (
-  <div id={Css.Root}>
-    <Css />
-    <LangButton
-      controlsDropdown={LangDropdown}
-      class={HeaderCss.Link} href="javascript:">{{ en: "EN", tr: "TR" }}
-    </LangButton>
-    <LangDropdown nodisplay onClick={langChanged}>
-      <li id={Css.Root + LangCode.EN}>
-        <EnFlag width={16} height={16} /> English
-      </li>
-      <li id={Css.Root + LangCode.TR}>
-        <TrFlag width={16} height={16} /> Türkçe
-      </li>
-    </LangDropdown>
-  </div>
-);
+const LangPicker = () => {
+  /** @const {!HTMLAnchorElement} */
+  const LangButton = dom.a(Css.LangButton);
+  /** @const {!HTMLUListElement} */
+  const LangDropdown = dom.ul(Css.LangDropdown);
+
+  return (
+    <div id={Css.Root}>
+      <Css />
+      <LangButton
+        controlsDropdown={LangDropdown}
+        class={HeaderCss.Link} href="javascript:">{{ en: "EN", tr: "TR" }}
+      </LangButton>
+      <LangDropdown nodisplay onClick={langChanged}>
+        <li id={Css.Root + LangCode.EN}>
+          <EnFlag width={16} height={16} /> English
+        </li>
+        <li id={Css.Root + LangCode.TR}>
+          <TrFlag width={16} height={16} /> Türkçe
+        </li>
+      </LangDropdown>
+    </div>
+  );
+}
 
 /** @enum {string} */
 LangPicker.Css = Css;

diff --git a/components/phone/Phone.jsx b/components/phone/Phone.jsx
@@ -87,8 +87,10 @@ InfoDialog.show = (prompt, buttonText) => {
 }
 
 /**
- * @param {{ withKPass: boolean, noshow: boolean }=} props
- * @return {Promise<string>}
+ * @param {{
+ *   withKPass: boolean,
+ *   noshow: boolean
+ * }=} props
  */
 const Phone = ({ withKPass = true, noshow }) => (
   <div id={Css.Root} noshow={noshow}>
@@ -126,7 +128,7 @@ Phone.showKPass = (showInDialog, infoSide) => {
   const showSide = () => {
     KPass.showSide(Phone.infoSide);
     KPassDialogButton.innerText = Phone.infoSide
-      ? dom.i18n({ tr: "Gizle", en: "Encrypt" })
+      ? dom.i18n({ en: "Encrypt", tr: "Gizle" })
       : dom.i18n({ en: "Decrypt", tr: "Aç" });
   }
   showSide();

diff --git a/components/subscribe/Subscribe.jsx b/components/subscribe/Subscribe.jsx
@@ -4,7 +4,6 @@ import dom from "/lib/util/dom";
 
 /**
  * @param {{ id: string }} props
- * @return {Promise<string>}
  */
 const Subscribe = ({ id }) => {
   /** @const {!HTMLFormElement} */

diff --git a/components/wallet/ConnectionList.jsx b/components/wallet/ConnectionList.jsx
@@ -17,7 +17,6 @@ const bağlantıResmi = (ad) => `components/wallet/img/${ad.split(" ")[0].toLowe
 
 /**
  * @param {{ id: ConnectionId, name: (string|undefined) }} props
- * @return {Promise<string>}
  */
 const Connection = ({ id, name }) => (
   <li id={Css.Cüzdan + id}>

diff --git a/components/wallet/Wallet.css b/components/wallet/Wallet.css
@@ -6,33 +6,33 @@
 }
 
 /**
- * Ağ düğmesi
  * @export
  */
-#AğDüğmesi {
+#ChainButton {
   border-radius: 10px 0 0 10px;
-  height: 45px;
   padding: 5px 7px;
 }
 
 /**
- * Adres düğmesi
  * @export
  */
-#AdresDüğmesi {
-  min-height: 45px;
+#AddressButton {
   margin-right: 10px;
   white-space: nowrap;
   width: 10em;
   border-left: 0;
   border-radius: 0 10px 10px 0;
 }
 
-/**
- * Cüzdan dropdownı
- * @export
- */
-#Menü {
+#AddressButton,
+#ChainButton {
+  background-color: #fcfcfc;
+  height: 45px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
+}
+
+/** @export */
+#Dropdown {
   background-color: #fff;
   border-radius: 10px;
   box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.2);
@@ -48,58 +48,33 @@
 }
 
 @media (max-width: 1350px) {
-  #Menü {
+  #Dropdown {
     left: auto;
     right: 10px;
   }
 }
 
-/**
- * List of chains the wallet widget supports
- * @export
- */
 #ChainList {
-  cursor: pointer;
-  list-style: none;
-  margin: 0;
-  padding: 0;
   width: 168px;
   border-right: 1px solid #f2f2f2;
 }
 
 /**
- * Cüzdan sağ paneli, bağlantı seçili değilse bağlantıları görüntüler,
- * seçiliyse profili görüntüler.
- *
- * @export
+ * Description under the chain entry
  */
-#SağPanel {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  width: 210px;
-  position: absolute;
-  bottom: 0;
-  right: 0;
+.ChainNote {
+  color: #6337ba;
+  font-size: 9pt;
 }
 
-/**
- * Bağlantı listesi
- * @export
- */
-.MenüListesi {
+.DropdownList {
   cursor: pointer;
   list-style: none;
   margin: 0;
   padding: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
-  width: 210px;
 }
 
-#AğListesi>li,
-.MenüListesi>li {
+.DropdownList>li {
   cursor: pointer;
   align-items: center;
   border-radius: 8px;
@@ -110,19 +85,26 @@
   padding: 6px 12px;
 }
 
-.BağlantıListesi>li {
-  position: relative;
-}
-
-#AğListesi>li:hover,
-.MenüListesi>li:hover {
+.DropdownList>li:hover {
   background-color: #f2f2f2;
 }
 
-.MenüListesi>li.sel {
+.DropdownList>li.sel {
   background-color: #eee;
 }
 
+.ConnectionList {
+  cursor: pointer;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 210px;
+}
+
+
 /**
  * Profil kutusu
  */
@@ -234,12 +216,4 @@ li.Açık>.CüzdanIşığı {
 .Cüzdanİndir {
   position: absolute;
   right: 7px;
-}
-
-/**
- * Ağ notu metni
- */
-.AğNotu {
-  color: #6337ba;
-  font-size: 9pt;
 }