feat: de-emphasize layer1/layer2

1. rename the tag 2. add leap animation Ref: Magickbase/ckb-explorer-public-issues#773
nervosnetwork · Sep 11, 2024 · 524246f · 524246f
1 parent 6c38651
commit 524246f
Show file tree

Hide file tree

Showing 5 changed files with 170 additions and 7 deletions.
diff --git a/src/components/Portal/index.tsx 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 }) => (
+  <div className={styles.container} data-type={type}>
+    <div className={styles.portal} data-side="left" />
+    <div className={styles.portal} data-side="right" />
+    <div className={styles.cube} />
+  </div>
+)
+
+export default Portal
diff --git a/src/components/Portal/styles.module.scss 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
@@ -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
@@ -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
@@ -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 }) => {
             <HelpTip title={t('rgbpp.transaction.direction.description.other')} />
           </div>
         ) : (
-          t(`address.leap_${item.type}`)
+          <Tooltip title={t(`address.leap_${item.type}`)}>
+            <div style={{ width: 'min-content' }}>
+              <Portal type={item.type} />
+            </div>
+          </Tooltip>
         )}
       </td>
       <td className={styles.cellChange} title={t('rgbpp.transaction.rgbpp_cell_change')}>