Skip to content

Commit

Permalink
#129: testing localization
Browse files Browse the repository at this point in the history
  • Loading branch information
@brklyn8900
brklyn8900 committed Nov 25, 2024
1 parent 31215c9 commit 103cc6b
Show file tree
Hide file tree
Showing 4 changed files with 89 additions and 75 deletions.
63 changes: 21 additions & 42 deletions components/sections/ChainStatistics.js
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
import CounterUp from "../elements/CounterUp";
import { useEffect, useState, useRef } from "react";
import { useEffect, useState } from "react";
import humanFormat from "human-format";
import { useTranslations } from "next-intl";

export default function ChainStatistics() {
const [transactions, setTransactions] = useState(0);
const [accounts, setAccounts] = useState(0);
const [blocks, setBlocks] = useState(0);

const title = "Blockchain Statistics";
const subtle = "A Powerful Decentralized Network for a Growing Ecosystem"
const t = useTranslations('ChainStatistics');

const getData = () => {
const url = "https://api.koiner.app/graphql";
Expand Down Expand Up @@ -76,92 +75,72 @@ export default function ChainStatistics() {
<>
<div id="statistic-5" className="pt-50 statistic-section division">
<div className="container">
{/* STATISTIC-1 WRAPPER */}
<div className="statistic-5-wrapper">
{/* SECTION TITLE */}
<div className="row justify-content-center">
<div className="col-md-8">
<div className="section-title mb-70">
{/* Title */}
<h2 className="s-50 w-700">{title}</h2>
{/* Text */}
<p className="s-21 color--grey">{subtle}</p>
<h2 className="s-50 w-700">{t('title')}</h2>
<p className="s-21 color--grey">{t('subtitle')}</p>
</div>
</div>
</div>
<div className="data-wrapper">
<div className="row row-cols-1 row-cols-md-3">
{/* STATISTIC BLOCK #1 */}
<div className="col">
<div id="sb-5-1" className="wow" data-aos='fade-up'>
<div id="sb-5-1" className="wow" data-aos='fade-up'>
<div className="statistic-block">
{/* Digit */}
<div className="statistic-digit">
<h2 className="s-44 w-700">
<CounterUp end={humanAccounts[0]} duration={20} />.
<CounterUp end={humanAccounts[1]} duration={20} />
{humanAccounts[2]}
</h2>
</div>
{/* Text */}
<div className="statistic-txt">
<h5 className="s-19 w-700">Accounts</h5>
<p>Total number of activated accounts</p>
<h5 className="s-19 w-700">{t('accounts.title')}</h5>
<p>{t('accounts.description')}</p>
</div>
</div>
</div>
</div>{" "}
{/* END STATISTIC BLOCK #1 */}
{/* STATISTIC BLOCK #2 */}
</div>
<div className="col">
<div id="sb-5-2" className="wow" data-aos='fade-up'>
<div id="sb-5-2" className="wow" data-aos='fade-up'>
<div className="statistic-block">
{/* Digit */}
<div className="statistic-digit">
<h2 className="s-44 w-700">
<CounterUp end={humanBlocks[0]} duration={20} />.
<CounterUp end={humanBlocks[1]} duration={20} />
{humanBlocks[2]}
</h2>
</div>
{/* Text */}
<div className="statistic-txt">
<h5 className="s-19 w-700">Blocks</h5>
<p>Total number of blocks produced</p>
<h5 className="s-19 w-700">{t('blocks.title')}</h5>
<p>{t('blocks.description')}</p>
</div>
</div>
</div>
</div>{" "}
{/* END STATISTIC BLOCK #2 */}
{/* STATISTIC BLOCK #3 */}
</div>
<div className="col">
<div id="sb-5-3" className="wow" data-aos='fade-up'>
<div id="sb-5-3" className="wow" data-aos='fade-up'>
<div className="statistic-block">
{/* Digit */}
<div className="statistic-digit">
<h2 className="s-44 w-700">
<CounterUp end={humanTransactions[0]} duration={20} />
.
<CounterUp end={humanTransactions[0]} duration={20} />.
<CounterUp end={humanTransactions[1]} duration={20} />
{humanTransactions[2]}
</h2>
</div>
{/* Text */}
<div className="statistic-txt">
<h5 className="s-19 w-700">Transactions</h5>
<p>Total number of transactions performed</p>
<h5 className="s-19 w-700">{t('transactions.title')}</h5>
<p>{t('transactions.description')}</p>
</div>
</div>
</div>
</div>{" "}
{/* END STATISTIC BLOCK #3 */}
</div>{" "}
</div>
</div>
</div>
{/* End row */}
</div>{" "}
{/* END STATISTIC-5 WRAPPER */}
</div>{" "}
{/* End container */}
</div>
</div>
</div>
</>
);
Expand Down
49 changes: 16 additions & 33 deletions components/sections/Wallets.js
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,14 @@
import { useRef, useEffect } from "react";
import Link from "next/link";

import { useTranslations } from "next-intl";

export default function Wallets() {

const title = "Wallets";
const subtle = "Koinos Wallets Bring Cutting-Edge Technology to Everyone";
const t = useTranslations('Wallets');

const wallets = [
{
name: "Kondor",
description: "Full featured Koinos wallet for Google Chrome",
descriptionKey: "kondor.description",
icon: "/images/sections/wallets/kondor.png",
chrome: true,
android: false,
Expand All @@ -19,7 +17,7 @@ export default function Wallets() {
},
{
name: "Konio",
description: "Full featured native mobile wallet for Android/iOS",
descriptionKey: "konio.description",
icon: "/images/sections/wallets/konio.png",
chrome: false,
android: true,
Expand All @@ -32,63 +30,48 @@ export default function Wallets() {
<>
<section id="wallets" className="py-100 features-section division">
<div className="container">
{/* SECTION TITLE */}
<div className="row justify-content-center">
<div className="col-md-10 col-lg-9">
<div className="section-title mb-70">
{/* Title */}
<h2 className="s-50 w-700">{title}</h2>
{/* Text */}
<p className="s-21 color--grey">{subtle}</p>
<h2 className="s-50 w-700">{t('title')}</h2>
<p className="s-21 color--grey">{t('subtitle')}</p>
</div>
</div>
</div>
{/* FEATURES-2 WRAPPER */}
<div className="fbox-wrapper text-center">
<div className="row row-cols-1 row-cols-md-2">

{
wallets.map(wallet =>
<div key={wallet.name} className="col">
<div className="fbox-2 fb-1 wow" data-aos='fade-up'>
{/* Image */}
<div className="fbox-img gr--whitesmoke h-175">
<Link href={wallet.url} target="_blank">
<img className="img-fluid light-theme-img" src={wallet.icon} alt="feature-image" />
<img className="img-fluid dark-theme-img" src={wallet.icon} alt="feature-image" />
</Link>
</div>
{/* Text */}
<div className="fbox-txt">

<h6 className="s-22 w-700">{wallet.name}</h6>
<p>{wallet.description}</p>

<p>{t(wallet.descriptionKey)}</p>
<ul className="d-flex justify-content-center gap-2">
{
wallet.chrome &&
{wallet.chrome && (
<li><Link href={wallet.url} target="_blank"><i className="fa-brands fa-chrome fa-lg"></i></Link></li>
}
{
wallet.ios &&
)}
{wallet.ios && (
<li><Link href={wallet.url} target="_blank"><i className="fa-brands fa-apple fa-lg"></i></Link></li>
}
{
wallet.android &&
)}
{wallet.android && (
<li><Link href={wallet.url} target="_blank"><i className="fa-brands fa-android fa-lg"></i></Link></li>
}
)}
</ul>

</div>
</div>
</div>
)
}


</div> {/* End row */}
</div> {/* END FEATURES-2 WRAPPER */}
</div> {/* End container */}
</div>
</div>
</div>
</section>
</>
)
Expand Down
26 changes: 26 additions & 0 deletions messages/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,5 +110,31 @@
"description": "A growing number of smart contract languages are added thanks to the KVM (Koinos Virtual Machine) implementation of WebAssembly (WASM) and Google's protocol buffers (Protobuf). Today you can get started with the popular languages TypeScript and C++."
}
}
},
"ChainStatistics": {
"title": "Blockchain Statistics",
"subtitle": "A Powerful Decentralized Network for a Growing Ecosystem",
"accounts": {
"title": "Accounts",
"description": "Total number of activated accounts"
},
"blocks": {
"title": "Blocks",
"description": "Total number of blocks produced"
},
"transactions": {
"title": "Transactions",
"description": "Total number of transactions performed"
}
},
"Wallets": {
"title": "Wallets",
"subtitle": "Koinos Wallets Bring Cutting-Edge Technology to Everyone",
"kondor": {
"description": "Full featured Koinos wallet for Google Chrome"
},
"konio": {
"description": "Full featured native mobile wallet for Android/iOS"
}
}
}
26 changes: 26 additions & 0 deletions messages/es.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,5 +110,31 @@
"description": "Se agregan cada vez más lenguajes de contratos inteligentes gracias a la implementación KVM (Koinos Virtual Machine) de WebAssembly (WASM) y los protocol buffers de Google (Protobuf). Hoy puedes comenzar con los populares lenguajes TypeScript y C++."
}
}
},
"ChainStatistics": {
"title": "Estadísticas de la Blockchain",
"subtitle": "Una Potente Red Descentralizada para un Ecosistema en Crecimiento",
"accounts": {
"title": "Cuentas",
"description": "Número total de cuentas activadas"
},
"blocks": {
"title": "Bloques",
"description": "Número total de bloques producidos"
},
"transactions": {
"title": "Transacciones",
"description": "Número total de transacciones realizadas"
}
},
"Wallets": {
"title": "Billeteras",
"subtitle": "Las Billeteras de Koinos Llevan Tecnología de Vanguardia a Todos",
"kondor": {
"description": "Billetera Koinos completa para Google Chrome"
},
"konio": {
"description": "Billetera móvil nativa completa para Android/iOS"
}
}
}

0 comments on commit 103cc6b

Please sign in to comment.