feat: ckb halving page

src/assets/fonts/fonts.css

@@ -4,3 +4,8 @@
   font-weight: 300;
   font-style: normal;
 }
+
+@font-face {
+  font-family:'digital-clock-font';
+  src: url('./digital-7.ttf');
+}

src/components/BannerFallback/HalvingBanner.tsx

@@ -0,0 +1,86 @@
+import classnames from 'classnames'
+import styles from './index.module.scss'
+import halvingBanner from '../../assets/halving_banner.png'
+import halvingBannerSuccess from '../../assets/halving_banner_success.png'
+import SimpleButton from '../SimpleButton'
+import { useCountdown, useHalving } from '../../utils/hook'
+import i18n from '../../utils/i18n'
+import { capitalizeFirstLetter } from '../../utils/string'
+import { fetchCachedData } from '../../utils/cache'
+
+function numberToOrdinal(number: number) {
+  switch (number) {
+    case 1:
+      return 'first'
+    case 2:
+      return 'second'
+    default:
+      break
+  }
+
+  switch (number % 10) {
+    case 1:
+      return `${number}st`
+    case 2:
+      return `${number}nd`
+    case 3:
+      return `${number}rd`
+    default:
+      return `${number}th`
+  }
+}
+
+export const HalvingBanner = () => {
+  const { estimatedDate, nextHalvingCount } = useHalving()
+  const [days, hours, minutes, seconds] = useCountdown(estimatedDate)
+  const lastedHavingKey = `lasted-having-${nextHalvingCount - 1}`
+  const unreadLastedHaving = nextHalvingCount > 1 && fetchCachedData(lastedHavingKey) === null
+
+  const shortCountdown = () => {
+    if (days > 0) {
+      return `${days}${i18n.t('symbol.char_space')}${capitalizeFirstLetter(i18n.t('unit.days'))}`
+    }
+    if (hours > 0) {
+      return `${hours}${i18n.t('symbol.char_space')}${capitalizeFirstLetter(i18n.t('unit.hours'))}`
+    }
+    if (minutes > 0) {
+      return `${minutes}${i18n.t('symbol.char_space')}${capitalizeFirstLetter(i18n.t('unit.minutes'))}`
+    }
+    if (seconds > 0) {
+      return `${seconds}${i18n.t('symbol.char_space')}${capitalizeFirstLetter(i18n.t('unit.seconds'))}`
+    }
+    return `${capitalizeFirstLetter(i18n.t('halving.halving'))}!`
+  }
+
+  return (
+    <div
+      className={classnames(styles.halvingBannerWrapper, { [styles.halvingBannerSuccess]: unreadLastedHaving })}
+      style={{
+        backgroundImage: `url(${unreadLastedHaving ? halvingBannerSuccess : halvingBanner})`,
+      }}
+    >
+      <div className={styles.halvingBannerShadow}>
+        <div className={classnames(styles.halvingBanner, 'container')}>
+          {unreadLastedHaving ? (
+            <div className={styles.halvingBannerText}>
+              {i18n.t('halving.banner_congratulation', {
+                times: i18n.t(`ordinal.${numberToOrdinal(nextHalvingCount - 1)}`),
+              })}
+            </div>
+          ) : (
+            <div className={styles.halvingBannerText}>
+              Nervos CKB Layer 1 {capitalizeFirstLetter(i18n.t('halving.halving'))}
+            </div>
+          )}
+          <a href="/halving">
+            <SimpleButton className={styles.learnMoreButton}>
+              {unreadLastedHaving
+                ? i18n.t('halving.learn_more')
+                : `${i18n.t('halving.halving_countdown')} ${shortCountdown()}`}
+            </SimpleButton>
+          </a>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/BannerFallback/index.module.scss

@@ -1,6 +1,6 @@
 $backgroudColor: #232323;
 
-.Root {
+.root {
   width: 100%;
   background-color: $backgroudColor;
   height: 200px;
@@ -13,3 +13,64 @@ $backgroudColor: #232323;
     background-image: url('../../assets/ckb_explorer_banner_phone.svg');
   }
 }
+
+.halvingBannerSuccess {
+  @media (max-width: 750px) {
+    background-size: 200% !important;
+  }
+  background-position: center !important;
+}
+
+.halvingBannerWrapper {
+  width: 100%;
+  background-color: $backgroudColor;
+  height: 200px;
+  position: relative;
+  background-repeat: no-repeat;
+  background-position: bottom;
+  background-size: cover;
+}
+
+.halvingBannerShadow {
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.3);
+  height: 100%;
+}
+
+.halvingBanner {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.halvingBannerText {
+  align-items: baseline;
+  display: flex;
+  font-size: 24px;
+  font-weight: bold;
+
+  background: linear-gradient(45deg, rgb(183, 129, 219), rgba(133, 69, 178, 1), rgb(183, 129, 219));
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+
+  @media (min-width: 750px) {
+    font-size: 40px;
+  }
+}
+
+.halvingBannerCount {
+  font-size: 36px;
+  margin-left: 24px;
+}
+
+.learnMoreButton {
+  border: 0;
+  border-radius: 8px;
+  color: white;
+  padding: 8px 16px;
+  user-select: none;
+  background: linear-gradient(180deg, rgba(172, 54, 244, 1), rgba(138, 25, 207, 1));
+}

src/components/BannerFallback/index.tsx

@@ -1,3 +1,3 @@
 import styles from './index.module.scss'
 
-export default () => <div className={styles.Root} />
+export default () => <div className={styles.root} />

src/locales/en.json

@@ -19,6 +19,82 @@
       "minaraTime": "Est May 10th 2022",
       "miranaAlive": "MIRANA IS LIVE"
     },
+    "unit": {
+      "days": "days",
+      "hours": "hours",
+      "minutes": "minutes",
+      "seconds": "seconds"
+    },
+    "symbol": {
+      "char_space": " "
+    },
+    "ordinal": {
+      "first": "first",
+      "second": "second",
+      "1st": "1st",
+      "2nd": "2nd",
+      "3rd": "3rd",
+      "4th": "4th",
+      "5th": "5th",
+      "6th": "6th",
+      "7th": "7th",
+      "8th": "8th",
+      "9th": "9th",
+      "10th": "10th"
+    },
+    "halving": {
+      "congratulations": "Congratulations",
+      "the": "the",
+      "actived": "is atived on block",
+      "halving": "halving",
+      "next": "next",
+      "and": "and",
+      "halving_countdown": "Halving Countdown",
+      "learn_more": "Learn More",
+      "banner_congratulation": "The {{times}} CKB halving is atived.",
+      "countdown_tooltip_section1": "How is the countdown estimated?",
+      "countdown_tooltip_section2": "[Target Epoch - Current Epoch]*Single Epoch Average Time - Current Epoch Used Time",
+      "countdown_tooltip_section3": "*Single Epoch Average Time takes the average time of nearly 1000 epochs.",
+      "halving_desc_prefix": "will have a halving event every 4 years according to the mechanism, at which time the",
+      "base_issuance_rewards": "base issuance rewards",
+      "halving_desc_suffix": "will be halved.",
+      "current_block": "Current Block",
+      "current_epoch": "Current Epoch",
+      "target_epoch": "Target Epoch",
+      "estimated_time": "Estimated Time",
+      "share_tooltip": "Share CKB Halving Event to Twitter",
+      "halving_event": "What is a Halving Event?",
+      "halving_event_section_1": "In the Nervos ecosystem, mining is used to secure the network and distribute tokens in the form of block rewards. A total of 33.6 billion CKB tokens will be created through primary issuance over a period of approximately 84 years to incentivize the miners that secure the network.",
+      "halving_event_section_2": "Every epoch, a period of approximately four hours, a fixed amount of 1,917,808 CKB is introduced. Every 8,760 epochs, a period of approximately four years, this amount is cut in half. This event is called a halving and it is the point where the mining rewards from primary issuance are permanently reduced by 50%. This halving process will continue every four years until the year 2103, after which point all block rewards from primary issuance will cease completely.",
+      "significance": "What is the Significance of a Halving?",
+      "significance_section_1": "Each time a halving occurs, it causes a sharp decrease in the rewards generated per block. The supply of new CKB entering circulation is lowered, dramatically reducing the rate of inflation. This is important because it creates a shift in the underlying market equilibrium and forces a reevaluation of what is considered fair market value.",
+      "significance_section_2": "Halving events occur on a predetermined issuance schedule that cannot be changed, postponed, or delayed. Investors and community members often look forward to a halving event as something to celebrate since it marks an important milestone in the history of the project.",
+      "how_does_work": "How does the CKByte-Halving work?",
+      "how_does_work_section_1": "In order to make the halving plan work as expected, a concept of time called epoch was introduced.",
+      "how_does_work_section_2": "An epoch is a period of time for a set of blocks.",
+      "how_does_work_section_3": "In Nervos, the PoW difficulty changes on a new epoch. All the blocks in the same epoch share the same difficulty target. The difficulty adjustment algorithm aims to stabilize the orphan block rate at 2.5% and the epoch duration at 4 hours.",
+      "how_does_work_section_4": "Epochs per halving is",
+      "how_does_work_section_5": "and the Nth halving of CKBytes firstly occurs on epoch",
+      "how_does_work_section_6": "So, The CKByte halving event occurs on the specified epoch, e.g. 8760, 17520.",
+      "when": "When will CKByte be halved?",
+      "when_section_1": "The following table details the schedule for several upcoming CKB halvings and their corresponding base issuance rewards:",
+      "when_section_2": "Note that CKB block rewards include ",
+      "when_section_3": "Base (issuance) reward, Secondary (issuance) reward, Commit reward",
+      "when_section_4": "Proposal reward",
+      "when_section_5": "However, when we are discussing CKB halving, it only relates to ",
+      "when_section_6": ". Therefore, the block rewards listed in the table only include the portion of rewards from base issuance to help with understanding.",
+      "table_event": "Event",
+      "table_date": "Date",
+      "table_epoch_number": "Epoch number",
+      "table_epoch_reward": "Epoch reward",
+      "table_block_reward": "Block reward(Calculated based on 1800 blocks per epoch)",
+      "table_daily_reward": "Daily reward",
+      "table_total": "Total new CKB between events",
+      "table_launches": "Nervos launches",
+      "genesis_epoch": "genesis epoch",
+      "expected": "Expected",
+      "twitter_text": "📢 @NervosNetwork CKB Expected {{times}} halving on {{date}}🚀，\n\n📅There are {{countdown}} left in the countdown to the halving.\n\n🔗 Click 👉 https://explorer.nervos.org know more"
+    },
     "glossary": {
       "block_height": "Also known as Block Number. The block height, which indicates the length of the blockchain, increases after the addition of the new block.",
       "cell": "CKB adopts cell model, which is more generic than UTXO model. A transaction destroys some outputs created in previous transactions and creates some new outputs. Every transaction's output is a cell.",

src/locales/zh.json

@@ -19,6 +19,82 @@
       "minaraTime": "美国东部时间: 2022 年 05 月 10 日",
       "miranaAlive": "MIRANA 已经激活"
     },
+    "unit": {
+      "days": "天",
+      "hours": "小时",
+      "minutes": "分钟",
+      "seconds": "秒"
+    },
+    "symbol": {
+      "char_space": ""
+    },
+    "ordinal": {
+      "first": "首次",
+      "second": "第 2 次",
+      "1st": "首次",
+      "2nd": "第 2 次",
+      "3rd": "第 3 次",
+      "4th": "第 4 次",
+      "5th": "第 5 次",
+      "6th": "第 6 次",
+      "7th": "第 7 次",
+      "8th": "第 8 次",
+      "9th": "第 9 次",
+      "10th": "第 10 次"
+    },
+    "halving": {
+      "congratulations": "恭喜",
+      "the": "",
+      "actived": "生效于高度",
+      "next": "下一次",
+      "halving": "减半",
+      "and": "和",
+      "halving_countdown": "减半倒计时",
+      "learn_more": "了解更多",
+      "banner_congratulation": "CKB {{times}}减半生效.",
+      "countdown_tooltip_section1": "倒计时是如何估算的?",
+      "countdown_tooltip_section2": "[目标Epoch- 当前Epoch]*单个Epoch平均用时 - 当前Epoch已用时间",
+      "countdown_tooltip_section3": "*单个Epoch平均用时取近1000个Epoch的平均用时.",
+      "halving_desc_prefix": "根据机制将每4年发生一次减半事件，届时",
+      "base_issuance_rewards": "基础发行奖励",
+      "halving_desc_suffix": "将减半。",
+      "current_block": "当前区块",
+      "current_epoch": "当前 Epoch",
+      "target_epoch": "目标 Epoch",
+      "estimated_time": "预计时间",
+      "share_tooltip": "分享CKB减半事件到Twitter",
+      "halving_event": "什么是减半事件?",
+      "halving_event_section_1": "在 Nervos 生态系统中，挖矿用于确保网络安全，并以区块奖励的形式分配代币。在大约 84 年的时间里，将通过首次发行创造总计 336 亿个 CKB 代币，以奖励确保网络安全的矿工。",
+      "halving_event_section_2": "每个Epoch（约 4 个小时）推出 1,917,808 CKB 的固定金额。每 8,760 个Epoch，即大约四年的时间，这一数额会减半。这一事件被称为减半，也就是初级发行的挖矿奖励永久减少 50%。这种减半过程将每四年持续一次，直到 2103 年。",
+      "significance": "减半的意义是什么？",
+      "significance_section_1": "每次减半都会导致每个区块产生的奖励急剧下降。进入流通的新 CKB 供应量减少，通货膨胀率大幅下降。这一点非常重要，因为它改变了潜在的市场平衡，迫使人们重新评估什么是公平的市场价值。",
+      "significance_section_2": "减半活动按照预定的发行时间表进行，不能更改、推迟或延迟。投资者和社区成员通常期待着减半事件的发生，因为这标志着项目历史上的一个重要里程碑，值得庆祝。",
+      "how_does_work": "CKB减半是如何运行的?",
+      "how_does_work_section_1": "为了使减半计划按预期运行，我们引入了一个名为 \"Epoch\"的时间概念。",
+      "how_does_work_section_2": "一个Epoch是一组区块的一段时间。",
+      "how_does_work_section_3": "在 Nervos 中，PoW 难度在新的Epoch中发生变化。同一Epoch中的所有区块共享相同的难度目标。难度调整算法旨在将孤块率稳定在 2.5%，将Epoch稳定在 4 小时。",
+      "how_does_work_section_4": "每次减半的Epoch为",
+      "how_does_work_section_5": "CKBytes 的第 N 次减半首先发生在Epoch上",
+      "how_does_work_section_6": "因此，CKByte 减半事件发生在指定的Epoch，例如 8760、17520。",
+      "when": "CKB何时减半?",
+      "when_section_1": "下表详细列出了即将进行的 10 次 CKB 半价及其相应的基本发行奖励的时间表：",
+      "when_section_2": "注意，CKB 块奖励包括",
+      "when_section_3": "基础（发行）奖励、二级（发行）奖励、提交奖励",
+      "when_section_4": "提案奖励",
+      "when_section_5": "但是，当我们讨论 CKB 减半时，它只与",
+      "when_section_6": "有关。因此，表中列出的区块奖励只包括基础发行奖励的部分，以帮助理解。",
+      "table_event": "事件",
+      "table_date": "日期",
+      "table_epoch_number": "Epoch序号",
+      "table_epoch_reward": "每个Epoch挖矿产出",
+      "table_block_reward": "区块奖励(按每epoch有1800个区块计算)",
+      "table_daily_reward": "每日挖矿产出",
+      "table_total": "期间累计挖矿产出",
+      "table_launches": "Nervos 主网上线",
+      "genesis_epoch": "创世纪元",
+      "expected": "预计",
+      "twitter_text": "📢 @NervosNetwork CKB 预计于 {{date}} 迎来{{times}}减半🚀，\n\n📅距离减半倒计时还有 {{countdown}}。\n\n🔗 访问👉 https://explorer.nervos.org 了解更多"
+    },
     "glossary": {
       "block_height": "区块高度，又称为区块编号，表示区块链的长度，在添加新区块后会增加。",
       "cell": "CKB 采用了更通用的 Cell 模型，而不是 UTXO 模型。交易会销毁先前交易中创建的某些输出，并创建一些新的输出。每个交易的输出都是一个 Cell。",