Merge remote-tracking branch 'upstream/develop' into transaction-lite

.eslintignore

@@ -0,0 +1,2 @@
+dist
+node_modules

.eslintrc.js

@@ -1,7 +1,7 @@
 module.exports = {
   extends: ['airbnb', 'plugin:prettier/recommended'],
   parser: '@typescript-eslint/parser',
-  plugins: ['@typescript-eslint', 'react-hooks'],
+  plugins: ['@typescript-eslint', 'react-hooks', 'unused-imports'],
   globals: {
     State: 'true',
     CustomRouter: 'true',
@@ -32,16 +32,10 @@ module.exports = {
       },
     ],
     'no-unused-vars': 'off',
+    'unused-imports/no-unused-imports': 'error',
+    'unused-imports/no-unused-vars': 'error',
     'no-undef': 'off',
     'implicit-arrow-linebreak': 'off',
-    '@typescript-eslint/no-unused-vars': [
-      'error',
-      {
-        vars: 'local',
-        args: 'after-used',
-        ignoreRestSiblings: false,
-      },
-    ],
     'operator-linebreak': [0, 'none'],
     'arrow-parens': [2, 'as-needed'],
     'max-len': [

package.json

@@ -56,11 +56,12 @@
     "eslint": "7.32.0",
     "eslint-config-airbnb": "18.2.1",
     "eslint-config-prettier": "9.0.0",
-    "eslint-plugin-import": "2.28.1",
+    "eslint-plugin-import": "^2.28.1",
     "eslint-plugin-jsx-a11y": "6.7.1",
     "eslint-plugin-prettier": "3.4.1",
     "eslint-plugin-react": "7.31.11",
     "eslint-plugin-react-hooks": "4.6.0",
+    "eslint-plugin-unused-imports": "^3.0.0",
     "husky": "^7.0.1",
     "jest-styled-components": "^7.0.5",
     "mockdate": "^2.0.5",

src/__tests__/utils/date.test.ts

@@ -11,7 +11,6 @@ import {
   parseSimpleDate,
   parseSimpleDateNoSecond,
   getCurrentYear,
-  parseDate,
   getCSTTime,
 } from '../../utils/date'
 
@@ -83,16 +82,6 @@ describe('Date methods tests', () => {
     expect(getCurrentYear()).toBe(2020)
   })
 
-  it('parseDate', async () => {
-    MockDate.set(1588694400000, 480)
-    expect(parseDate(1588694380000)).toBe('20s ago')
-    expect(parseDate(1588691000000)).toBe('56min 40s ago')
-
-    MockDate.reset()
-    timezoneMock.register('UTC')
-    expect(parseDate(1588651000000)).toBe('2020/05/05 03:56:40')
-  })
-
   it('getCSTTime', async () => {
     timezoneMock.register('UTC')
     expect(parseSimpleDate(1588651000000)).toBe('2020/05/05 03:56:40')

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/Banner/HalvingBanner.tsx

@@ -0,0 +1,119 @@
+import classnames from 'classnames'
+import { useTranslation } from 'react-i18next'
+import styles from './index.module.scss'
+import halvingBanner from '../../assets/halving_banner.png'
+import halvingBannerSuccess from '../../assets/halving_banner_success.png'
+import halvingBannerSuccessMobile from '../../assets/halving_banner_success_mobile.png'
+import { ReactComponent as MoveIcon } from '../../assets/move.svg'
+import LoadingWhiteImage from '../../assets/loading_white.gif'
+import halvingSuccessAni from '../../assets/halving_success_ani.gif'
+import SimpleButton from '../SimpleButton'
+import { useCountdown, useHalving, useIsMobile } from '../../utils/hook'
+
+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, halvingCount, inCelebration, isLoading } = useHalving()
+  const [days, hours, minutes, seconds, expired] = useCountdown(estimatedDate)
+  const isMobile = useIsMobile()
+  const [t, { language }] = useTranslation()
+
+  const shortCountdown = () => {
+    if (isLoading || Number.isNaN(seconds)) {
+      return <img className={styles.halvingLoading} src={LoadingWhiteImage} alt="loading" />
+    }
+    if (days > 0) {
+      return `${days}${t('symbol.char_space')}${t('unit.days')}`
+    }
+    if (hours > 0) {
+      return `${hours}${t('symbol.char_space')}${t('unit.hours')}`
+    }
+    if (minutes > 0) {
+      return `${minutes}${t('symbol.char_space')}${t('unit.minutes')}`
+    }
+
+    return `${seconds}${t('symbol.char_space')}${t('unit.seconds')}`
+  }
+
+  const learnMoreText = () => {
+    if (inCelebration) {
+      return t('halving.learn_more')
+    }
+
+    if (expired) {
+      return t('halving.comming_soon')
+    }
+
+    return (
+      <>
+        {t('halving.halving_countdown')} {shortCountdown()}
+      </>
+    )
+  }
+
+  const bgImage = (() => {
+    if (!inCelebration) {
+      return halvingBanner
+    }
+
+    if (isMobile) {
+      return halvingBannerSuccessMobile
+    }
+
+    return halvingBannerSuccess
+  })()
+
+  return (
+    <div
+      className={classnames(styles.halvingBannerWrapper, { [styles.halvingBannerSuccess]: inCelebration })}
+      style={{
+        backgroundImage: `url(${bgImage})`,
+      }}
+    >
+      <div className={styles.halvingBannerShadow}>
+        <div className={classnames(styles.halvingBanner, 'container')}>
+          {inCelebration && <img className={styles.halvingBannerAnimation} src={halvingSuccessAni} alt="animation" />}
+          {inCelebration ? (
+            <div className={classnames(styles.halvingBannerText, styles.success)}>
+              {t('halving.banner_congratulation', {
+                times: t(`ordinal.${numberToOrdinal(halvingCount)}`),
+              }).toUpperCase()}
+            </div>
+          ) : (
+            <div className={classnames(styles.halvingBannerText, styles.linear)}>
+              {`Nervos CKB ${t(`ordinal.${numberToOrdinal(halvingCount)}`)}${language === 'en' ? ' ' : ''}${t(
+                'halving.halving',
+              )}`}
+            </div>
+          )}
+          <a href="/halving">
+            <SimpleButton className={styles.learnMoreButton}>
+              {learnMoreText()}
+              <MoveIcon style={{ marginTop: 2 }} />
+            </SimpleButton>
+          </a>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/Banner/index.module.scss

@@ -14,3 +14,108 @@ $backgroudColor: #232323;
     background-image: url('../../assets/ckb_explorer_banner_phone.svg');
   }
 }
+
+.halvingBannerSuccess {
+  background-size: cover;
+  background-position: center;
+}
+
+.halvingBannerWrapper {
+  width: 100%;
+  background-color: $backgroudColor;
+  height: 200px;
+  position: relative;
+  background-repeat: no-repeat;
+  background-position: bottom;
+  background-size: cover;
+
+  @media (width >= 750px) {
+    height: 300px;
+  }
+}
+
+.halvingBannerShadow {
+  width: 100%;
+  background-color: rgb(0 0 0 / 30%);
+  height: 100%;
+}
+
+.halvingLoading {
+  width: 20px;
+  margin-top: 4px;
+}
+
+.halvingBanner {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 8px;
+
+  @media (width >= 750px) {
+    gap: 16px;
+  }
+}
+
+.halvingBannerAnimation {
+  margin-top: -16px;
+  height: 64px;
+
+  @media (width >= 750px) {
+    height: 100px;
+  }
+}
+
+.halvingBannerText {
+  align-items: baseline;
+  display: flex;
+  font-size: 24px;
+  font-weight: bold;
+  text-align: center;
+  text-transform: capitalize;
+
+  &.linear {
+    background: linear-gradient(45deg, rgb(130 203 140), rgb(121 122 121), rgb(172 221 181));
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+
+  &.success {
+    transform: rotate(-2deg);
+    text-shadow: 1.5px 1.5px 1px #57f3a9, -1px -1px 1px #eef8f2;
+    color: rgb(28 28 28);
+    line-height: 26px;
+    margin-top: -4px;
+    margin-bottom: 4px;
+
+    @media (width >= 750px) {
+      text-shadow: 1.5px 1.5px 1px #57f3a9, -1px -1px 1px #eef8f2;
+    }
+  }
+
+  @media (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;
+  text-transform: capitalize;
+  background: linear-gradient(180deg, #00cc9b, #008365);
+  display: flex;
+  align-items: center;
+
+  @media (width >= 750px) {
+    padding: 16px 24px;
+  }
+}