Merge branch 'develop' into feature/ckb-halving-page

package.json

@@ -16,9 +16,7 @@
     "classnames": "2.3.2",
     "dayjs": "1.11.9",
     "default-passive-events": "2.0.0",
-    "detect-gpu": "5.0.37",
     "echarts": "4.9.0",
-    "gsap": "3.12.2",
     "history": "5.3.0",
     "i18next": "20.6.1",
     "js-base64": "^3.7.5",
@@ -35,16 +33,15 @@
     "react-router-dom": "5.3.4",
     "react-scripts": "5.0.1",
     "sass": "1.66.1",
-    "styled-components": "5.3.11",
-    "three": "0.149.0"
+    "styled-components": "5.3.11"
   },
   "devDependencies": {
     "@sentry/webpack-plugin": "2.7.1",
     "@testing-library/react": "12.1.5",
     "@types/echarts": "4.9.18",
     "@types/eslint": "7.29.0",
     "@types/jest": "26.0.24",
-    "@types/node": "16.18.46",
+    "@types/node": "16.18.50",
     "@types/react": "17.0.65",
     "@types/react-dom": "17.0.20",
     "@types/react-outside-click-handler": "^1.3.0",

src/components/Banner/index.module.scss

@@ -1,6 +1,6 @@
 $backgroudColor: #232323;
 
-.Root {
+.root {
   width: 100%;
   background-color: $backgroudColor;
   height: 200px;
@@ -13,3 +13,101 @@ $backgroudColor: #232323;
     background-image: url('../../assets/ckb_explorer_banner_phone.svg');
   }
 }
+
+.halvingBannerSuccess {
+  background-size: cover;
+  background-position: center !important;
+
+  @media (min-width: 750px) {
+    background-size: 250% !important;
+  }
+}
+
+.halvingBannerWrapper {
+  width: 100%;
+  background-color: $backgroudColor;
+  height: 200px;
+  position: relative;
+  background-repeat: no-repeat;
+  background-position: bottom;
+  background-size: cover;
+
+  @media (min-width: 750px) {
+    height: 300px;
+  }
+}
+
+.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: 8px;
+
+  @media (min-width: 750px) {
+    gap: 16px;
+  }
+}
+
+.halvingBannerAnimation {
+  margin-top: -16px;
+  height: 64px;
+
+  @media (min-width: 750px) {
+    height: 100px;
+  }
+}
+
+.halvingBannerText {
+  align-items: baseline;
+  display: flex;
+  font-size: 24px;
+  font-weight: bold;
+  text-align: center;
+
+  &.linear {
+    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;
+  }
+
+  &.success {
+    transform: rotate(-2deg);
+    text-shadow: 1px 1px 1px rgba(172, 54, 244, 1), -0.5px -0.5px 1px white;
+    color: rgb(28, 28, 28);
+    margin-top: -12px;
+
+    @media (min-width: 750px) {
+      text-shadow: 1px 1px 1px rgba(172, 54, 244, 1), -1px -1px 1px white;
+    }
+  }
+
+  @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));
+
+  @media (min-width: 750px) {
+    padding: 16px 24px;
+  }
+}

src/components/Banner/index.tsx

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

src/components/Footer/index.tsx

@@ -1,6 +1,6 @@
 import { memo, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { ReactComponent as TwitterIcon } from '../../assets/footer_twitter.svg'
+import { ReactComponent as XIcon } from '../../assets/footer_X.svg'
 import { ReactComponent as MediumIcon } from '../../assets/footer_medium.svg'
 import { ReactComponent as TelegramIcon } from '../../assets/footer_telegram.svg'
 import { ReactComponent as RedditIcon } from '../../assets/footer_reddit.svg'
@@ -90,9 +90,9 @@ export default memo(() => {
             url: 'https://discord.com/invite/FKh8Zzvwqa',
           },
           {
-            label: t('footer.twitter'),
-            icon: TwitterIcon,
-            url: 'https://twitter.com/nervosnetwork',
+            label: t('footer.X'),
+            icon: XIcon,
+            url: 'https://x.com/nervosnetwork',
           },
           {
             label: t('footer.blog'),