Merge pull request #1825 from nervosnetwork/testnet

nervosnetwork · Dec 18, 2024 · be116b6 · be116b6
2 parents 01c646e + 89b066e
commit be116b6
Show file tree

Hide file tree

Showing 12 changed files with 246 additions and 24 deletions.
diff --git a/src/components/TransactionParameters/index.tsx b/src/components/TransactionParameters/index.tsx
@@ -3,7 +3,7 @@ import { FC, ReactNode } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { Link } from 'react-router-dom'
 import classNames from 'classnames'
-import { useCKBNode } from '../../hooks/useCKBNode'
+import { explorerService } from '../../services/ExplorerService'
 import { matchTxHash } from '../../utils/util'
 import Loading from '../AwesomeLoadings/Spinner'
 import HashTag from '../HashTag'
@@ -48,9 +48,8 @@ const Field = ({
 
 const TransactionParameters: FC<{ hash: string }> = ({ hash }) => {
   const [t] = useTranslation()
-  const { nodeService } = useCKBNode()
 
-  const { data, isLoading } = useQuery(['tx', hash], () => nodeService.getTx(hash))
+  const { data, isLoading } = useQuery(['explorer-tx', hash], () => explorerService.api.fetchTransactionByHash(hash))
   if (isLoading) {
     return (
       <div className={styles.loading}>
@@ -59,9 +58,9 @@ const TransactionParameters: FC<{ hash: string }> = ({ hash }) => {
     )
   }
 
-  if (!data?.result?.transaction) return <div>{`Transaction ${hash} not loaded`}</div>
+  if (!data) return <div>{`Transaction ${hash} not loaded`}</div>
 
-  const { header_deps: headerDeps, cell_deps: cellDeps, witnesses } = data.result.transaction
+  const { headerDeps, cellDeps, witnesses } = data
 
   const parameters = [
     {
@@ -84,8 +83,8 @@ const TransactionParameters: FC<{ hash: string }> = ({ hash }) => {
       content: cellDeps.length ? (
         cellDeps.map(cellDep => {
           const {
-            out_point: { tx_hash: txHash, index },
-            dep_type: depType,
+            outPoint: { txHash, index },
+            depType,
           } = cellDep
           const hashTag = matchTxHash(txHash, Number(index))
           return (

diff --git a/src/constants/scripts.ts b/src/constants/scripts.ts
@@ -268,7 +268,7 @@ export const MainnetContractHashTags: ContractHashTag[] = [
     depType: 'code',
     hashType: 'data1',
     tag: 'xUDT',
-    category: 'lock',
+    category: 'type',
   },
   {
     codeHashes: ['0x4a4dce1df3dffff7f8b2cd7dff7303df3b6150c9788cb75dcf6747247132b9f5'],
@@ -660,15 +660,15 @@ export const TestnetContractHashTags: ContractHashTag[] = [
     depType: 'code',
     hashType: 'type',
     tag: 'xUDT(final_rls)',
-    category: 'lock',
+    category: 'type',
   },
   {
     codeHashes: ['0x50bd8d6680b8b9cf98b73f3c08faf8b2a21914311954118ad6609be6e78a1b95'],
     txHashes: ['0xbf6fb538763efec2a70a6a3dcb7242787087e1030c4e7d86585bc63a9d337f5f-0'],
     depType: 'code',
     hashType: 'data1',
     tag: 'xUDT',
-    category: 'lock',
+    category: 'type',
   },
   {
     codeHashes: [

diff --git a/src/locales/en.json b/src/locales/en.json
@@ -205,6 +205,13 @@
       "wallets_memo": "In alphabetical order",
       "nft_collections": "NFT Collections"
     },
+    "banner": {
+      "fiber_title": "Fiber Network is making Satoshi’s vision a reality",
+      "fiber_subtitle": "The Next-generation Common Lightning Network",
+      "learn_more": "Learn More",
+      "find_nodes": "Find Nodes",
+      "coming_soon": "Coming soon"
+    },
     "blockchain": {
       "latest_block": "Latest Block",
       "epoch": "Epoch",

diff --git a/src/locales/zh.json b/src/locales/zh.json
@@ -220,6 +220,13 @@
       "wallets_memo": "In alphabetical order",
       "nft_collections": "NFT 藏品"
     },
+    "banner": {
+      "fiber_title": "Fiber Network 不忘初心",
+      "fiber_subtitle": "下一代通用闪电网络",
+      "learn_more": "了解更多",
+      "find_nodes": "更多节点",
+      "coming_soon": "敬请期待"
+    },
     "blockchain": {
       "latest_block": "最高块",
       "epoch": "Epoch",

diff --git a/src/models/Transaction/index.ts b/src/models/Transaction/index.ts
@@ -35,6 +35,9 @@ export interface Transaction {
   maxCyclesInEpoch: number | null
   maxCycles: number | null
   createTimestamp?: number
+  cellDeps: CellDep[]
+  headerDeps: string[]
+  witnesses: string[]
 }
 
 export interface BtcTx {

diff --git a/src/pages/Home/Banner/fiber_network.gif b/src/pages/Home/Banner/fiber_network.gif
diff --git a/src/pages/Home/Banner/fiber_network_640.gif b/src/pages/Home/Banner/fiber_network_640.gif
diff --git a/src/pages/Home/Banner/index.module.scss b/src/pages/Home/Banner/index.module.scss
@@ -2,25 +2,187 @@
 
 $backgroundColor: #232323;
 
-.root {
+.root,
+.fiberBanner {
   width: 100%;
-  background-color: $backgroundColor;
   height: 200px;
   position: relative;
-  background-image: url('./ckb_explorer_banner.svg');
   background-repeat: no-repeat;
   background-position: center center;
   background-size: auto 100%;
   color: white;
   display: flex;
   align-items: center;
   justify-content: center;
+}
+
+.root {
+  background-color: $backgroundColor;
+  background-image: url('./ckb_explorer_banner.svg');
 
   @media (width <= $mobileBreakPoint) {
     background-image: url('./ckb_explorer_banner_phone.svg');
   }
 }
 
+.fiberBanner {
+  --m: 1rem;
+  --red: #ff6565;
+  --pink: #ff64f9;
+  --purple: #6b5fff;
+  --blue: #4d8aff;
+  --green: #5bff89;
+  --yellow: #fe5;
+  --orange: #ff6d1b;
+
+  position: relative;
+  background-color: black;
+  background-image: url('./fiber_network.gif');
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  .slogan {
+    display: flex;
+    flex-direction: column;
+
+    h1,
+    h3 {
+      line-height: 1;
+      color: #f3f3f3;
+      text-align: center;
+    }
+
+    h3 {
+      opacity: 0.8;
+      font-weight: 300;
+    }
+
+    margin-bottom: 20px;
+  }
+
+  a {
+    position: relative;
+    color: #f3f3f3;
+    font-size: var(--m);
+    display: flex;
+    justify-content: center;
+    cursor: pointer;
+  }
+
+  span {
+    box-sizing: border-box;
+    border: calc(0.08 * var(--m)) solid transparent;
+    border-radius: calc(0.7 * var(--m));
+    padding: calc(0.5 * var(--m)) calc(1 * var(--m));
+    background: linear-gradient(#121213, #121213),
+      linear-gradient(#121213 50%, rgb(18 18 19 / 60%) 80%, rgb(18 18 19 / 0%)),
+      linear-gradient(
+        90deg,
+        var(--orange),
+        var(--yellow),
+        var(--green),
+        var(--blue),
+        var(--purple),
+        var(--pink),
+        var(--red)
+      );
+    background-origin: border-box;
+    background-clip: padding-box, border-box, border-box;
+    background-size: 200%;
+    animation: animate 8s infinite linear;
+    transition-duration: 0.3s;
+    z-index: 1;
+  }
+
+  .links {
+    display: flex;
+    gap: 80px;
+  }
+
+  a::before {
+    content: '';
+    background: linear-gradient(
+      90deg,
+      var(--orange),
+      var(--yellow),
+      var(--green),
+      var(--blue),
+      var(--purple),
+      var(--pink),
+      var(--red)
+    );
+    height: 30%;
+    width: 90%;
+    position: absolute;
+    bottom: 0;
+    background-size: 200%;
+    animation: animate 8s infinite linear;
+    filter: blur(calc(0.8 * var(--m)));
+  }
+
+  a:hover span {
+    border: calc(0.08 * var(--m)) solid transparent;
+    transform: perspective(1000px) translateZ(50px);
+    transform-style: preserve-3d;
+  }
+
+  a:hover::before {
+    height: 100%;
+    width: 120%;
+    filter: blur(calc(1.5 * var(--m)));
+    opacity: 0.8;
+  }
+
+  a[aria-disabled] {
+    /* pointer-events: none; */
+    cursor: not-allowed;
+
+    span {
+      background: #aaa;
+      color: #ccc;
+      border: none;
+    }
+
+    &::before {
+      display: none;
+    }
+
+    &:hover span {
+      transform: none;
+    }
+
+    /* opacity: 0.6; */
+  }
+
+  @keyframes animate {
+    0% {
+      background-position: 0;
+    }
+
+    100% {
+      background-position: 200%;
+    }
+  }
+
+  @media (width <= 640px) {
+    background-image: url('./fiber_network_640.gif');
+    height: 150px;
+    font-size: 0.6rem;
+
+    .slogan {
+      margin-bottom: 10px;
+    }
+
+    .links {
+      gap: 16px;
+    }
+
+    --m: 0.6rem;
+  }
+}
+
 .halvingBannerSuccess {
   background-size: cover;
   background-position: center;

diff --git a/src/pages/Home/Banner/index.tsx b/src/pages/Home/Banner/index.tsx
@@ -1,14 +1,18 @@
 import { useQuery } from '@tanstack/react-query'
 import { BarChartIcon } from '@radix-ui/react-icons'
+import { useTranslation } from 'react-i18next'
+import { Tooltip } from 'antd'
 import { Link } from '../../../components/Link'
 import config from '../../../config'
 import styles from './index.module.scss'
 import { getKnowledgeSize } from './utils'
 import { NumberTicker } from '../../../components/ui/NumberTicker'
+import { IS_MAINNET } from '../../../constants/common'
 
 const { BACKUP_NODES: backupNodes } = config
 
 export default () => {
+  const [t] = useTranslation()
   const { data: size } = useQuery(
     ['backnode_tip_header'],
     async () => {
@@ -24,18 +28,45 @@ export default () => {
     },
     { refetchInterval: 12 * 1000 },
   )
+  if (IS_MAINNET) {
+    return (
+      <div className={styles.root}>
+        <div className={styles.knowledgeBase}>
+          <span>Knowledge Size</span>
+          <br />
+          <div className={styles.ticker}>
+            <NumberTicker value={size ? +size : null} />
+            <span>CKBytes</span>
+            <Link to="/charts/knowledge-size">
+              <BarChartIcon color="white" />
+            </Link>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
   return (
-    <div className={styles.root}>
-      <div className={styles.knowledgeBase}>
-        <span>Knowledge Size</span>
-        <br />
-        <div className={styles.ticker}>
-          <NumberTicker value={size ? +size : null} />
-          <span>CKBytes</span>
-          <Link to="/charts/knowledge-size">
-            <BarChartIcon color="white" />
+    <div className={styles.fiberBanner}>
+      <div className={styles.slogan}>
+        <h1>{t(`banner.fiber_title`)}</h1>
+        <h3>{t(`banner.fiber_subtitle`)}</h3>
+      </div>
+      <div className={styles.links}>
+        <Link to="https://www.ckbfiber.net/" target="_blank" rel="noopener noreferrer">
+          <span>{t(`banner.learn_more`)}</span>
+        </Link>
+        <Tooltip title={t('banner.coming_soon')}>
+          <Link
+            to="/"
+            aria-disabled
+            onClick={(e: React.SyntheticEvent<HTMLAnchorElement>) => {
+              e.preventDefault()
+            }}
+          >
+            <span>{t('banner.find_nodes')}</span>
           </Link>
-        </div>
+        </Tooltip>
       </div>
     </div>
   )

diff --git a/src/pages/Transaction/state.ts b/src/pages/Transaction/state.ts
@@ -26,6 +26,9 @@ export const defaultTransactionInfo: Transaction = {
   cycles: null,
   maxCyclesInEpoch: null,
   maxCycles: null,
+  cellDeps: [],
+  headerDeps: [],
+  witnesses: [],
 }
 
 export const defaultTransactionLiteDetails: TransactionRecord[] = [