From 524246fd1847c76972462e0c101592a61d0fa8a6 Mon Sep 17 00:00:00 2001 From: Keith Date: Thu, 12 Sep 2024 02:32:23 +0900 Subject: [PATCH] feat: de-emphasize layer1/layer2 1. rename the tag 2. add leap animation Ref: https://github.com/Magickbase/ckb-explorer-public-issues/issues/773 --- src/components/Portal/index.tsx | 12 ++ src/components/Portal/styles.module.scss | 145 ++++++++++++++++++ src/locales/en.json | 6 +- src/locales/zh.json | 6 +- src/pages/RGBPP/TransactionList/List/item.tsx | 8 +- 5 files changed, 170 insertions(+), 7 deletions(-) create mode 100644 src/components/Portal/index.tsx create mode 100644 src/components/Portal/styles.module.scss diff --git a/src/components/Portal/index.tsx b/src/components/Portal/index.tsx new file mode 100644 index 000000000..e6ab3dcff --- /dev/null +++ b/src/components/Portal/index.tsx @@ -0,0 +1,12 @@ +import type { TransactionLeapDirection } from '../RGBPP/types' +import styles from './styles.module.scss' + +const Portal = ({ type }: { type: TransactionLeapDirection }) => ( +
+
+
+
+
+) + +export default Portal diff --git a/src/components/Portal/styles.module.scss b/src/components/Portal/styles.module.scss new file mode 100644 index 000000000..26642e852 --- /dev/null +++ b/src/components/Portal/styles.module.scss @@ -0,0 +1,145 @@ +@import '../../styles/variables.module'; + +.container { + position: relative; + width: 50px; + height: 20px; + + .portal { + position: relative; + height: 20px; + width: 10px; + border-radius: 50%; + filter: blur(0.3px); + } + + .portal::before { + content: ''; + position: absolute; + top: 2px; + bottom: 2px; + border-radius: 50%; + background: #fff; + opacity: 0.6; + } + + .portal[data-side='left'] { + float: left; + + &::before { + left: 2px; + right: 0; + } + } + + .portal[data-side='right'] { + float: right; + + &::before { + left: 0; + right: 2px; + } + } + + .cube { + position: absolute; + margin-top: 5px; + width: 10px; + height: 10px; + border-radius: 2px; + background-size: cover; + z-index: 1; + } + + &[data-type='with_in_btc'] { + .portal[data-side='left'] { + background: var(--btc-primary-color); + } + + .portal[data-side='right'] { + background: var(--btc-primary-color); + } + + .cube { + background: var(--btc-primary-color); + animation: float 4s linear infinite; + } + + @keyframes float { + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(360deg); + margin-left: 40px; + } + } + } + + &[data-type='in'] { + .portal[data-side='left'] { + background: var(--btc-primary-color); + } + + .portal[data-side='right'] { + background: var(--primary-color); + } + + .cube { + animation: float-in 4s linear infinite; + } + + @keyframes float-in { + 0% { + transform: rotate(0deg); + background: var(--btc-primary-color); + } + + 50% { + background: #eee; + } + + 100% { + transform: rotate(360deg); + margin-left: 40px; + background: var(--primary-color); + } + } + } + + &[data-type='out'] { + .portal[data-side='left'] { + background: var(--primary-color); + } + + .portal[data-side='right'] { + background: var(--btc-primary-color); + } + + .cube { + animation: float-out 4s linear infinite; + } + + @keyframes float-out { + 0% { + transform: rotate(0deg); + background: var(--primary-color); + } + + 50% { + background: #eee; + } + + 100% { + transform: rotate(360deg); + margin-left: 40px; + background: var(--btc-primary-color); + } + } + } + + @media (width<=$mobileBreakPoint) { + margin: 4px 0; + } +} diff --git a/src/locales/en.json b/src/locales/en.json index 32e9594fe..cc746d903 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -450,9 +450,9 @@ "transaction_rgbpp_digest": "RGB++ Digest", "seal_tx_on_bitcoin": "Seal Tx On Bitcoin", "tx_on_bitcoin": "Tx On Bitcoin", - "leap_in": "BTC → CKB", - "leap_out": "CKB → BTC", - "leap_with_in_btc": "Transfer", + "leap_in": "Leap from BTC", + "leap_out": "Leap to BTC", + "leap_with_in_btc": "Transfer on BTC", "leap_in_tip": "This RGB++ transaction is marked as \"BTC → CKB\", indicating that the number of cells with RGB++ lock in the output exceeds the number of cells with RGB++ lock in the input.", "leap_out_tip": "This RGB++ transaction is marked as \"CKB → BTC\", indicating that the number of cells with RGB++ lock in the input exceeds the number of cells with RGB++ lock in the output.", "view_in_btc_explorer": "View in Bitcoin Explorer", diff --git a/src/locales/zh.json b/src/locales/zh.json index 185e42e97..1991eb54d 100644 --- a/src/locales/zh.json +++ b/src/locales/zh.json @@ -450,9 +450,9 @@ "transaction_rgbpp_digest": "RGB++ Digest", "seal_tx_on_bitcoin": "Seal Tx On Bitcoin", "tx_on_bitcoin": "Tx On Bitcoin", - "leap_in": "BTC → CKB", - "leap_out": "CKB → BTC", - "leap_with_in_btc": "Transfer", + "leap_in": "Leap from BTC", + "leap_out": "Leap to BTC", + "leap_with_in_btc": "在 BTC 上转移", "leap_in_tip": "本笔 RGB++ 交易被标记为\"BTC → CKB\"，即存在一般 CKB 资产转化为 RGB++ 资产。", "leap_out_tip": "本笔 RGB++ 交易被标记为\"CKB → BTC\"，即存在 RGB++ 资产转化为一般 CKB 资产。", "view_in_btc_explorer": "在 Bitcoin 浏览器查看", diff --git a/src/pages/RGBPP/TransactionList/List/item.tsx b/src/pages/RGBPP/TransactionList/List/item.tsx index eea62a8cc..d59a41d39 100644 --- a/src/pages/RGBPP/TransactionList/List/item.tsx +++ b/src/pages/RGBPP/TransactionList/List/item.tsx @@ -1,4 +1,5 @@ import { useTranslation } from 'react-i18next' +import { Tooltip } from 'antd' import AddressText from '../../../../components/AddressText' import { BTCExplorerLink, Link } from '../../../../components/Link' import { useStatistics } from '../../../../services/ExplorerService' @@ -8,6 +9,7 @@ import { ReactComponent as ShareIcon } from './share_icon.svg' import { TransactionLeapDirection } from '../../../../components/RGBPP/types' import styles from './styles.module.scss' import { HelpTip } from '../../../../components/HelpTip' +import Portal from '../../../../components/Portal' export type Transaction = { ckbTxId: string @@ -58,7 +60,11 @@ const Item = ({ item }: { item: Transaction }) => {
) : ( - t(`address.leap_${item.type}`) + +
+ +
+ )}