feat: add rgb++ explorer banner (#1766)

package.json

@@ -57,7 +57,8 @@
     "react-router-dom": "5.3.4",
     "react-scripts": "5.0.1",
     "sass": "1.77.5",
-    "styled-components": "5.3.11"
+    "styled-components": "5.3.11",
+    "uvcanvas": "^0.2.1"
   },
   "devDependencies": {
     "@sentry/webpack-plugin": "2.18.0",

src/components/RgbppBanner/index.tsx

@@ -0,0 +1,46 @@
+import { useTranslation } from 'react-i18next'
+import { Lumiflex } from 'uvcanvas'
+import styles from './styles.module.scss'
+import { IS_MAINNET } from '../../constants/common'
+import { ReactComponent as Logo } from './rgbpp_logo.svg'
+
+const words = ['UTXO', 'BTC', 'RGB++', 'UTXO', 'BTC', 'RGB++']
+
+const RGBPP_EXPLORER_URL = IS_MAINNET ? 'https://explorer.rgbpp.io' : 'https://testnet.explorer.rgbpp.io'
+
+const RgbppBanner = ({ path = '/' }) => {
+  const [t] = useTranslation()
+
+  return (
+    <a
+      href={`${RGBPP_EXPLORER_URL}${path}`}
+      target="_blank"
+      rel="noopener noreferrer"
+      className={styles.container}
+      title={t('rgbpp.visit_this_item_on_rgbpp_explorer')}
+    >
+      <div className={styles.logo}>
+        {t('rgbpp.visit')}
+        <Logo />
+        {t('rgbpp.rgbpp_explorer')}
+      </div>
+      <div className={styles.slogan}>
+        <div className={styles.lumi}>
+          <Lumiflex />
+        </div>
+        {t('rgbpp.explore_the')}
+        <div className={styles.words}>
+          {words.map((w, i) => {
+            // eslint-disable-next-line react/no-array-index-key
+            return <div key={w + i}>{w}</div>
+          })}
+        </div>
+        {t(`rgbpp.ecosystem`)}
+      </div>
+    </a>
+  )
+}
+
+RgbppBanner.displayName = 'RGB++ Banner'
+
+export default RgbppBanner

src/components/RgbppBanner/styles.module.scss

@@ -0,0 +1,231 @@
+@import '../../styles/variables.module';
+
+.container {
+  background: #1d1f31;
+  margin: 24px 120px -12px;
+  padding-left: 80px;
+  padding-right: 224px;
+  display: flex;
+  align-items: center;
+  color: #fff !important;
+  height: 280px;
+  box-sizing: border-box;
+  border-radius: 4px;
+
+  .logo {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 20px;
+    font-family: Montserrat, Roboto, Lato, sans-serif, 'PingFang SC', -apple-system;
+    font-weight: 700;
+    letter-spacing: 1.5px;
+    white-space: nowrap;
+
+    svg {
+      width: 60px;
+      height: 60px;
+    }
+  }
+
+  .slogan {
+    position: relative;
+    margin-left: auto;
+    display: flex;
+    gap: 16px;
+    font-size: 30px;
+    font-weight: 700;
+    font-family: Roboto, Lato, sans-serif, 'PingFang SC', -apple-system;
+    letter-spacing: 1px;
+
+    &::before,
+    &::after {
+      content: '';
+      display: block;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 600px;
+      height: 600px;
+      border: 2px solid #fff;
+      opacity: 0.1;
+      border-radius: 50%;
+    }
+
+    &::after {
+      width: 700px;
+      height: 700px;
+    }
+  }
+
+  .lumi {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 186px;
+    height: 186px;
+    border-radius: 50%;
+    overflow: hidden;
+    filter: blur(40px);
+    opacity: 0.5;
+  }
+
+  .words {
+    width: 6ch;
+    position: relative;
+    perspective: 2000px;
+    transform-style: preserve-3d;
+    transform-origin: center center center;
+    animation: rotate 24s infinite ease-in-out;
+
+    & > div {
+      position: absolute;
+      backface-visibility: hidden;
+      color: #fff;
+
+      @for $i from 1 through 6 {
+        &:nth-child(#{$i}) {
+          transform: rotateX(#{$i * 60}deg) translateZ(40px);
+          animation: fade 24s infinite linear;
+          animation-delay: #{21.6s - ($i - 1) * 4s};
+        }
+      }
+    }
+
+    @keyframes rotate {
+      0% {
+        transform: rotateX(0deg);
+      }
+
+      13.8889% {
+        transform: rotateX(0deg);
+      }
+
+      16.6667% {
+        transform: rotateX(60deg);
+      }
+
+      30.5556% {
+        transform: rotateX(60deg);
+      }
+
+      33.3333% {
+        transform: rotateX(120deg);
+      }
+
+      47.2222% {
+        transform: rotateX(120deg);
+      }
+
+      50% {
+        transform: rotateX(180deg);
+      }
+
+      63.8889% {
+        transform: rotateX(180deg);
+      }
+
+      66.6667% {
+        transform: rotateX(240deg);
+      }
+
+      80.5556% {
+        transform: rotateX(240deg);
+      }
+
+      83.3333% {
+        transform: rotateX(300deg);
+      }
+
+      97.2222% {
+        transform: rotateX(300deg);
+      }
+
+      100% {
+        transform: rotateX(360deg);
+      }
+    }
+    /* stylelint-disable keyframe-block-no-duplicate-selectors */
+    @keyframes fade {
+      35% {
+        color: #ccc;
+        opacity: 0.01;
+      }
+
+      35% {
+        color: #ccc;
+        opacity: 0.01;
+      }
+
+      35.04% {
+        color: #fff;
+      }
+
+      43.8889% {
+        color: #fff;
+      }
+
+      43.8889% {
+        color: #ccc;
+        opacity: 0.01;
+      }
+
+      48% {
+        color: #ccc;
+        opacity: 0.01;
+      }
+    }
+    /* stylelint-enable keyframe-block-no-duplicate-selectors */
+  }
+
+  @media (width <= $xxlBreakPoint) {
+    margin: 24px 100px -12px;
+    padding: 20px 40px;
+  }
+
+  @media (width <= $extraLargeBreakPoint) {
+    margin: 24px 45px -12px;
+  }
+
+  @media (width <= $largeBreakPoint) {
+    margin: 24px 45px -12px;
+    height: auto;
+    flex-direction: column;
+
+    .lumin {
+      width: 200px;
+      height: 200px;
+    }
+
+    .slogan {
+      margin: 18vw auto;
+
+      &::before {
+        width: 24vw;
+        height: 24vw;
+      }
+
+      &::after {
+        width: 40vw;
+        height: 40vw;
+      }
+    }
+  }
+
+  @media (width <= $mobileBreakPoint) {
+    margin: 24px 20px -12px;
+
+    .slogan {
+      font-size: 20px;
+      gap: 8px;
+    }
+  }
+
+  @media (width <= 450px) {
+    .slogan {
+      font-size: 14px;
+    }
+  }
+}

src/locales/en.json

@@ -492,7 +492,12 @@
           "unlock": "Unlock"
         }
       },
-      "amount": "Amount"
+      "amount": "Amount",
+      "visit": "Visit",
+      "rgbpp_explorer": "RGB++ Explorer",
+      "explore_the": "Explorer the",
+      "ecosystem": "Ecosystem",
+      "visit_this_item_on_rgbpp_explorer": "Visit this item on RGB++ Explorer"
     },
     "transaction": {
       "ckb-cell-info": "CKB Cell Info",

src/locales/zh.json

@@ -492,7 +492,12 @@
           "unlock": "解锁"
         }
       },
-      "amount": "数量"
+      "amount": "数量",
+      "visit": "访问",
+      "rgbpp_explorer": "RGB++ 浏览器",
+      "explore_the": "探索",
+      "ecosystem": "生态",
+      "visit_this_item_on_rgbpp_explorer": "在 RGB++ 浏览器访问此项目"
     },
     "transaction": {
       "ckb-cell-info": "CKB Cell Info",

src/pages/Address/AddressPage.tsx

@@ -19,6 +19,7 @@ import {
   useSortParam,
 } from '../../hooks'
 import { isAxiosError } from '../../utils/error'
+import RgbppBanner from '../../components/RgbppBanner'
 import { Card, HashCardHeader } from '../../components/Card'
 import { ReactComponent as ShareIcon } from './share.svg'
 import styles from './styles.module.scss'
@@ -171,6 +172,7 @@ export const Address = () => {
 
   return (
     <Content>
+      {isRGBPP ? <RgbppBanner path={`/address/${address}`} /> : null}
       <AddressContentPanel className="container">
         <Card>
           <HashCardHeader

src/pages/RGBPP/TransactionList/index.tsx

@@ -3,6 +3,7 @@ import Content from '../../../components/Content'
 import styles from './styles.module.scss'
 import { usePaginationParamsInPage, useSearchParams } from '../../../hooks'
 import List, { Transaction } from './List'
+import RgbppBanner from '../../../components/RgbppBanner'
 import { QueryResult } from '../../../components/QueryResult'
 import Pagination from '../../../components/Pagination'
 import { explorerService } from '../../../services/ExplorerService'
@@ -55,6 +56,7 @@ const RGBPPTransactionList = () => {
   })
   return (
     <Content>
+      <RgbppBanner />
       <div className={`container ${styles.title}`}>RGB++ Transaction List</div>
       <Chart />
       <QueryResult query={transactions} delayLoading>

src/pages/Transaction/index.tsx

@@ -5,6 +5,7 @@ import Content from '../../components/Content'
 import { TransactionDiv as TransactionPanel } from './TransactionComp/styled'
 import { explorerService } from '../../services/ExplorerService'
 import { QueryResult } from '../../components/QueryResult'
+import RgbppBanner from '../../components/RgbppBanner'
 import { defaultTransactionInfo } from './state'
 import { useSearchParams } from '../../hooks'
 import { useCKBNode } from '../../hooks/useCKBNode'
@@ -46,6 +47,7 @@ export default () => {
 
   return (
     <Content>
+      {transaction.isRgbTransaction ? <RgbppBanner path={`/transaction/${transaction.transactionHash}`} /> : null}
       <TransactionPanel>
         {nodeActivated ? (
           <QueryResult query={nodeTxQuery} delayLoading>