From 7d6ba0856c757117cd639199d58795d2cc99146c Mon Sep 17 00:00:00 2001 From: Keith Date: Thu, 29 Aug 2024 20:44:03 +0900 Subject: [PATCH] feat: add rgb++ explorer banner --- package.json | 3 +- src/components/RgbppBanner/index.tsx | 46 ++++ src/components/RgbppBanner/rgbpp_logo.svg | 1 + src/components/RgbppBanner/styles.module.scss | 231 ++++++++++++++++++ src/locales/en.json | 7 +- src/locales/zh.json | 7 +- src/pages/Address/AddressPage.tsx | 2 + src/pages/RGBPP/TransactionList/index.tsx | 2 + src/pages/Transaction/index.tsx | 2 + yarn.lock | 25 ++ 10 files changed, 323 insertions(+), 3 deletions(-) create mode 100644 src/components/RgbppBanner/index.tsx create mode 100644 src/components/RgbppBanner/rgbpp_logo.svg create mode 100644 src/components/RgbppBanner/styles.module.scss diff --git a/package.json b/package.json index 1d9f57a77..1830918bf 100644 --- a/package.json +++ b/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", diff --git a/src/components/RgbppBanner/index.tsx b/src/components/RgbppBanner/index.tsx new file mode 100644 index 000000000..8ae59e5c2 --- /dev/null +++ b/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 ( + +
+ {t('rgbpp.visit')} + + {t('rgbpp.rgbpp_explorer')} +
+
+
+ +
+ {t('rgbpp.explore_the')} +
+ {words.map((w, i) => { + // eslint-disable-next-line react/no-array-index-key + return
{w}
+ })} +
+ {t(`rgbpp.ecosystem`)} +
+ + ) +} + +RgbppBanner.displayName = 'RGB++ Banner' + +export default RgbppBanner diff --git a/src/components/RgbppBanner/rgbpp_logo.svg b/src/components/RgbppBanner/rgbpp_logo.svg new file mode 100644 index 000000000..23175db3b --- /dev/null +++ b/src/components/RgbppBanner/rgbpp_logo.svg @@ -0,0 +1 @@ + diff --git a/src/components/RgbppBanner/styles.module.scss b/src/components/RgbppBanner/styles.module.scss new file mode 100644 index 000000000..981398253 --- /dev/null +++ b/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; + } + } +} diff --git a/src/locales/en.json b/src/locales/en.json index bcf8a3ffe..764044c9f 100644 --- a/src/locales/en.json +++ b/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", diff --git a/src/locales/zh.json b/src/locales/zh.json index 0a36a2f92..a6c524008 100644 --- a/src/locales/zh.json +++ b/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", diff --git a/src/pages/Address/AddressPage.tsx b/src/pages/Address/AddressPage.tsx index 241e3d917..d2e570872 100644 --- a/src/pages/Address/AddressPage.tsx +++ b/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 ( + {isRGBPP ? : null} { }) return ( +
RGB++ Transaction List
diff --git a/src/pages/Transaction/index.tsx b/src/pages/Transaction/index.tsx index 804ea0b91..129dd0851 100644 --- a/src/pages/Transaction/index.tsx +++ b/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 ( + {transaction.isRgbTransaction ? : null} {nodeActivated ? ( diff --git a/yarn.lock b/yarn.lock index e2b92e730..40b4a1bbc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -13929,6 +13929,11 @@ obuf@^1.0.0, obuf@^1.1.2: resolved "https://registry.yarnpkg.com/obuf/-/obuf-1.1.2.tgz#09bea3343d41859ebd446292d11c9d4db619084e" integrity sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg== +ogl@^1.0.5: + version "1.0.8" + resolved "https://registry.yarnpkg.com/ogl/-/ogl-1.0.8.tgz#de72e6d43f1c811b9f9e503773a103b88aea1bf4" + integrity sha512-3LOqryx4qtWuQQT9QQL8yjGBNdqlonJeOwNY4+TwkrQhENYKegKt9pdWba3LzPSlGUWFTfeUDQoL9tSHMtKq3Q== + on-finished@2.4.1: version "2.4.1" resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.4.1.tgz#58c8c44116e54845ad57f14ab10b03533184ac3f" @@ -18311,6 +18316,11 @@ use-sidecar@^1.1.2: detect-node-es "^1.1.0" tslib "^2.0.0" +use-sync-external-store@1.2.2: + version "1.2.2" + resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz#c3b6390f3a30eba13200d2302dcdf1e7b57b2ef9" + integrity sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw== + use-sync-external-store@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a" @@ -18362,6 +18372,14 @@ uuid@^9.0.0: resolved "https://registry.yarnpkg.com/uuid/-/uuid-9.0.0.tgz#592f550650024a38ceb0c562f2f6aa435761efb5" integrity sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg== +uvcanvas@^0.2.1: + version "0.2.1" + resolved "https://registry.yarnpkg.com/uvcanvas/-/uvcanvas-0.2.1.tgz#395dd280d73be0310917df545c6c73b693633424" + integrity sha512-JqhmyYGjHdZ32PgBlu99QVORutO0Avf2tvWfimyCwqG8gnU/IUkwiAexwlMqvD0Wr+C6DHy0vkkCj/KGd8UP9w== + dependencies: + ogl "^1.0.5" + zustand "^4.5.2" + v8-to-istanbul@^8.1.0: version "8.1.1" resolved "https://registry.yarnpkg.com/v8-to-istanbul/-/v8-to-istanbul-8.1.1.tgz#77b752fd3975e31bbcef938f85e9bd1c7a8d60ed" @@ -19120,3 +19138,10 @@ zrender@4.3.2, zrender@^4.0.4: version "4.3.2" resolved "https://registry.yarnpkg.com/zrender/-/zrender-4.3.2.tgz#ec7432f9415c82c73584b6b7b8c47e1b016209c6" integrity sha512-bIusJLS8c4DkIcdiK+s13HiQ/zjQQVgpNohtd8d94Y2DnJqgM1yjh/jpDb8DoL6hd7r8Awagw8e3qK/oLaWr3g== + +zustand@^4.5.2: + version "4.5.5" + resolved "https://registry.yarnpkg.com/zustand/-/zustand-4.5.5.tgz#f8c713041543715ec81a2adda0610e1dc82d4ad1" + integrity sha512-+0PALYNJNgK6hldkgDq2vLrw5f6g/jCInz52n9RTpropGgeAf/ioFUCdtsjCqu4gNhW9D01rUQBROoRjdzyn2Q== + dependencies: + use-sync-external-store "1.2.2"