Skip to content

Commit

Permalink
🦄 Tek jsx dosyalı birimlere geç
Browse files Browse the repository at this point in the history
  • Loading branch information
KimlikDAO-bot committed Jan 17, 2025
1 parent ce2392a commit 45c6cf4
Show file tree
Hide file tree
Showing 72 changed files with 1,731 additions and 1,439 deletions.
13 changes: 10 additions & 3 deletions .github/workflows/test.yml
Original file line number Diff line number Diff line change
Expand Up @@ -26,15 +26,22 @@ jobs:
run: bun i

- name: "`cüzdan` birimini derle"
run: bun lib/kdjs/kdjs.js birim/cüzdan/birim.js --globals '{"GEN":false,"DefaultChain":"0x1","Chains":["0x1","0xa4b1"],"Lang":"tr"}'
run: bun lib/kdjs/kdjs.js birim/cüzdan/birim.jsx --globals '{"GEN":false,"DefaultChain":"0x1","Chains":["0x1","0xa4b1"],"Lang":"tr"}'

- name: "`dil` birimini derle"
run: bun lib/kdjs/kdjs.js birim/dil/birim.js --globals '{"GEN":false,"Route":{"en":"mint","tr":"al"},"Lang":"en"}'
run: bun lib/kdjs/kdjs.js birim/dil/birim.jsx --globals '{"GEN":false,"Route":{"en":"mint","tr":"al"},"Lang":"en"}'

- name: "`kpass` birimini derle"
run: bun lib/kdjs/kdjs.js birim/kpass/birim.js --globals '{"GEN":false,"Lang":"en"}'
run: bun lib/kdjs/kdjs.js birim/kpass/birim.jsx --globals '{"GEN":false,"Lang":"en"}'

- name: "ana sayfayı derle"
run: bun lib/kdjs/kdjs.js ana/sayfa.jsx --globals '{"GEN":false,"Route":{"en":"mint","tr":"al"},"DefaultChain":"0x1","Chains":["0x1","0xa4b1"],"Lang":"tr"}'

- name: "yenial sayfayı derle"
run: bun lib/kdjs/kdjs.js yenial/sayfa.jsx --globals '{"GEN":false,"Route":{"en":"mint","tr":"al"},"DefaultChain":"0x1","Chains":["0x1","0xa4b1"],"Lang":"tr"}'

dappi-derle:
if: false # Temporarily disabled
name: dApp'ı derle
runs-on: macos-latest
steps:
Expand Down
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
.vscode/
*.lock*
*.out.js
*.out.jsx
**/*.rs.bk
/build
/dist
Expand Down
10 changes: 5 additions & 5 deletions al/sayfa.jsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
import Script from "kastro:./sayfa.js";
import PowWorker from "kastro:./tanışma/powWorker.js";
import İmeceİptal from "./imeceİptal/birim.jsx";
import İmeceİptal from "./imeceİptal/birim";
import Css from "./sayfa.css";
import Tanışma from "./tanışma/birim.jsx";
import Tanışma from "./tanışma/birim";
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 KPass from "/birim/kpass/birim";
import Lato400 from "/birim/lato/l400.ttf";
import Lato700 from "/birim/lato/l700.ttf";
import OrtakCss from "/birim/ortakcss/birim";
import Telefon from "/birim/telefon/birim.jsx";
import Telefon from "/birim/telefon/birim";
import { ChainId } from "/lib/crosschain/chains";
import dom from "/lib/util/dom";

Expand Down Expand Up @@ -38,7 +38,7 @@ const DefaultChain = ChainId.xa4b1;

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>{{
<b>{{ en: "1. Cüzdanınızı bağlayın.", tr: "1. Cüzdanınızı bağlayın." }}</b>{{
en: " Proceed with a crypto wallet.",
tr: " Cüzdan bağlayarak devam edin.",
}}<br /><br />
Expand Down
7 changes: 7 additions & 0 deletions ana/ağ/birim.css
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,14 @@
margin-top: 30px;
}

/** @name {Altıgen} */
#ag6 {}

.agi:hover {
opacity: 1;
}

/** @name {Düğümİmza} */
.agi {
align-items: center;
border-radius: 15px;
Expand All @@ -36,6 +40,7 @@
width: 180px;
}

/** @name {DüğümNokta} */
.agp {
width: 10px;
height: 10px;
Expand Down Expand Up @@ -130,12 +135,14 @@
position: relative;
}

/** @name {AğSvgText} */
.agsvgt {
font: 700 30px 'l';
fill: #333;
text-anchor: middle;
}

/** @name {Grafik} */
#agn {
margin: auto;
}
56 changes: 27 additions & 29 deletions ana/ağ/birim.jsx
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
import AnaCss from "../sayfa.css";
import Css from "./birim.css";
import KpassCss from "/birim/kpass/birim.css";
import OrtakCss from "/birim/ortakcss/birim.css";
import { keccak256 } from "/lib/crypto/sha3";

/**
* @param {{
* idx: string,
* }} props
* @return {string}
* }=} props
* @return {Promise<string>}
*/
const Node = ({ idx }) => {
const h = keccak256(idx);
return (
<div class={`agi ag${idx}`}>
<div class={`agp ag${idx}n`}></div>{`0x${h.slice(0, 8)}...${h.slice(8, 16)}`}
</div>
);
}
const Node = ({ idx }) => (
<div class={[Css.Düğümİmza, `ag${idx}`]}>
<div class={[Css.DüğümNokta, `ag${idx}n`]}></div>{
`0x${keccak256(idx).slice(0, 8)}...${keccak256(idx).slice(8, 16)}`
}
</div>
);

/** @const {!Object<string, !Array<string>>} */
const NODES = {
Expand All @@ -36,10 +36,8 @@ const NODES = {
const h = (renk) => (renk.startsWith("#") ? renk : "#" + renk).toUpperCase();

/**
* @param {{
* width: number
* }} props
* @return {string}
* @param {{ width: number }=} props
* @return {Promise<string>}
*/
const Grafik = ({ width }) => {
const keys = Object.keys(NODES);
Expand All @@ -50,19 +48,19 @@ const Grafik = ({ width }) => {
const r = cx - 80;

return (
<svg id="agn" width="100%" viewBox={`0 0 ${width} 430`}>
<svg id={Css.Grafik} width="100%" viewBox={`0 0 ${width} 430`}>
<defs>
<path id="ag6"
<path id={Css.Altıgen}
d="M3.33 47.5C0.65 42.859 0.65 37.141 3.33 32.5L17.17 8.53C19.85 3.89 24.8 1 30.16 1.03H57.84C63.2 1 68.15 3.89 70.83 8.53L84.67 32.5C87.35 37.141 87.3494 42.859 84.67 47.5L70.83 71.47C68.15 76.11 63.2 78.97 57.84 78.97H30.16C24.8 78.97 19.85 76.11 17.17 71.47L3.33 47.5Z"
stroke-width={2} shape-rendering="geometricPrecision" />
</defs>
<text class="agsvgt" x={cx} y={cy - 30} data-en="The KimlikDAO">KimlikDAO</text>
<text class="agsvgt" x={cx} y={cy + 7} data-en="Network">Ağı</text>
<text class={Css.AğSvgText} x={cx} y={cy - 30}>{{ en: "The KimlikDAO", tr: "KimlikDAO" }}</text>
<text class={Css.AğSvgText} x={cx} y={cy + 7}>{{ en: "Network", tr: "Ağı" }}</text>
{keys.map((key, i) => {
const x = Math.round(cx + r * Math.sin((Math.PI * 2 * i) / n));
const y = Math.round(cy - r * Math.cos((Math.PI * 2 * i) / n));
return (<>
<use href="#ag6" x={x - 45} y={y - 75} fill={h(NODES[key][2])} stroke={h(NODES[key][3])} />
<use href={`#${Css.Altıgen}`} x={x - 45} y={y - 75} fill={h(NODES[key][2])} stroke={h(NODES[key][3])} />
<text x={x} y={y - 30} text-anchor="middle" fill="#fff">{NODES[key][0].slice(0, 8)}</text>
<text x={x} y={y + 23} text-anchor="middle" fill="#444">{NODES[key][1]}</text>
</>);
Expand All @@ -83,29 +81,29 @@ const Ağ = () => (
en: "The contents of each KPass are verified and digitally signed by at least seven independent nodes in the KimlikDAO network, all while fully preserving your privacy.",
tr: "KPass’ler birbirinden bağımsız en az 7 KimlikDAO ağı düğümünün onay ve dijital imzası ile üretilebilir. Onay aşamasında veri gizliliğiniz tamamıyla korunur."
}}</div>
<a href="//github.com/KimlikDAO/kimlikdao-node" target="_blank" rel="noreferrer" class={[OrtakCss.Düğme, "info", "anust"]}>{{
<a href={ExternalPage.GitHub + "/kimlikdao-node"} target="_blank" rel="noreferrer" class={[OrtakCss.Düğme, OrtakCss.Info, "anust"]}>{{
en: "Learn about KimlikDAO nodes",
tr: "KimlikDAO düğümü detayları"
}}</a>
</div>
<div id={Css.OrtaSütun}>
<div id={Css.KPass}>
<div class="kpip">
<div class="kpl">{{ tr: "Doğum yeri", en: "City of birth" }}</div>
<div>{{ tr: "İstanbul", en: "Istanbul" }}</div>
<div class="kpl">{{ tr: "Cinsiyet", en: "Gender" }}</div>
<div class={KpassCss.BilgiKartıİçi}>
<div class={KpassCss.Ad}>{{ tr: "Doğum yeri", en: "City of birth" }}</div>
<div>{{ tr: "İstanbul", en: "Palo Alto, CA" }}</div>
<div class={KpassCss.Ad}>{{ tr: "Cinsiyet", en: "Gender" }}</div>
<div>{{ tr: "K", en: "F" }}</div>
</div>
<svg id="kplo" height={24} width={24}>
<use href="#bak" width={24} height={24} />
<svg height={24} width={24}>
<use href={"#" + OrtakCss.Başlık.Logomark} width={24} height={24} />
</svg>
<a href="javascript:" class="kpd kpso"></a>
<a href="javascript:" class="kpd kpsa"></a>
<a href="javascript:" class={[KpassCss.Düğme, KpassCss.SolDüğme]}></a>
<a href="javascript:" class={[KpassCss.Düğme, KpassCss.SağDüğme]}></a>
</div>
{Object.keys(NODES).map((key) => <Node idx={key} />)}
</div>
<Grafik width={500} />
</div >
</div>
);

export default ;
125 changes: 125 additions & 0 deletions ana/hero/Sergi.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,125 @@
import Css from "./sergi.css";
import Cüzdan from "/birim/cüzdan/birim";
import Telefon from "/birim/telefon/birim";
import dom from "/lib/util/dom";

/** @const {!HTMLDivElement} */
const Boncuklar = dom.div(Css.Boncuklar);
/** @const {!HTMLUListElement} */
const Kartlar = dom.ul(Css.Kartlar);

/** @type {number} */
let Kart = 0;
/** @type {number} */
let SergiSaati = 0;
/** @type {number} */
let YerleştirSaati = 0;

/**
* Kartları `Kart` değişkenine göre doğru konuma çeker.
*/
const yerleştir = () => {
/** @const {number} */
const width = Kartlar.firstElementChild.getBoundingClientRect().width;
Kartlar.style.transform = `translate3d(-${Kart * width}px,0,0)`;
}

/**
* @param {number} yeniKart
*/
const kartDeğiştir = (yeniKart) => {
if (Kart > 2 && yeniKart == 0) yeniKart = 4;
const yeniKartDengi = yeniKart % 4;
Telefon.nftGöster(yeniKartDengi <= 1, !yeniKartDengi);
yeniKartDengi === 3
? Telefon.kutuGöster(dom.i18n({
tr: "Bağlı app KPass’inizdeki iletişim bilgilerinize erişmek istiyor. İzin veriyor musunuz?",
en: "The connected app would like to access your contact info section of your KPass."
}))
: Telefon.kutuKapat();
Boncuklar.children[Kart % 4].firstElementChild.classList.remove("sel");
Boncuklar.children[yeniKartDengi].firstElementChild.classList.add("sel");
Kart = yeniKart;
yerleştir();
if (yeniKart == 4)
setTimeout(() => {
Kartlar.style.transition = "none";
Kart = 0;
yerleştir();
setTimeout(() => Kartlar.style.transition = "", 600)
}, 1200);
}

const sergiSaatiKur = () => {
if (SergiSaati) clearInterval(SergiSaati);
SergiSaati = setInterval(() => kartDeğiştir(Kart + 1), 12000);
}

const Sergi = () => {
window.onresize = () => {
clearTimeout(YerleştirSaati);
YerleştirSaati = setTimeout(yerleştir, 100);
}
for (let /** number */ i = 0; i < Boncuklar.childElementCount; ++i) {
Boncuklar.children[i].onclick = () => {
kartDeğiştir(i);
sergiSaatiKur();
}
}
Telefon.nftGöster(true, true);
Cüzdan.adresDeğişince((adres) => Telefon.adresGir(adres));
Kartlar.appendChild(Kartlar.firstElementChild.cloneNode(true));
Kartlar.style.width = "500%";
sergiSaatiKur();

return (
<div id={Css.Kök}>
<Css />
<div id={Css.KartSahnesi}>
<Kartlar>
<li class={Css.Kart}>
<h3>{{
tr: "Kontrolü tamamen sende olan on-chain bir hesap",
en: "An on-chain account that you truly own"
}}</h3>{{
en: "Mint your KPass and wallet login to all supported on/off-ramps with an account you truly own",
tr: "Bir kez KPass al, destekleyen tüm platformlarda cüzdanını bağla, gerekli bilgileri güvenle sun, hesap açmadan işlem yap"
}}
</li>
<li class={Css.Kart}>
<h3>{{
tr: "İçeriği kendi cüzdan anahtarlarınla şifrelenir",
en: "Your data is encrypted under your wallet private key"
}}</h3>{{
en: "The contents of your KPass is encrypted in your browser under your wallet private key. KimlikDAO will never store your data",
tr: "KPass içeriği kendi tarayıcında kendi cüzdan anahtarlarınla şifrelenir. KimlikDAO asla bilgilerini göremez ve saklamaz"
}}
</li>
<li class={Css.Kart}>
<h3 data-en="KPass can be kept in any NFT wallet, such as MetaMask">MetaMask gibi NFT
destekleyen kripto cüzdanında taşınır</h3>{{
en: "KPass is an ERC-721 non-fungible token meaning that you can see it in any NFT wallet",
tr: "KPass ERC-721 standardına uygun bir NFT olduğu için NFT destekleyen her cüzdanda görülebilir"
}}
</li>
<li class={Css.Kart}>
<h3 data-en="Control who can access your info">dApp’lere istediğin
bilgileri paylaş, istediklerini gizli tut</h3>{{
en: "The connected dApp may send you requests for accessing parts of your KPass. Approve the sections you’d like to share, reject others",
tr: "Bağlı dApp KPass’inin içindeki bölümlere erişim isteği yollayabilir. Paylaşmak istediklerini onayla, gizli tutmak istediklerini onaylama"
}}
</li>
</Kartlar>
</div>
<Boncuklar>
{[...Array(4)].map((_, i) => (
<div class={Css.Boncuklu}>
<div class={[Css.Boncuk].concat(i == 0 ? "sel" : [])}></div>
</div>
))}
</Boncuklar>
</div>
);
}

export default Sergi;
2 changes: 1 addition & 1 deletion ana/hero/birim.jsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import Css from "./birim.css";
import Sergi from "./sergi/birim";
import Sergi from "./Sergi";
import OrtakCss from "/birim/ortakcss/birim.css";
import Telefon from "/birim/telefon/birim.jsx";
import { Page } from "/crate";
Expand Down
File renamed without changes.
Loading

0 comments on commit 45c6cf4

Please sign in to comment.