diff --git a/src/components/TransactionParameters/index.tsx b/src/components/TransactionParameters/index.tsx index dbe6ce379..3238cfd3c 100644 --- 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 (
@@ -59,9 +58,9 @@ const TransactionParameters: FC<{ hash: string }> = ({ hash }) => { ) } - if (!data?.result?.transaction) return
{`Transaction ${hash} not loaded`}
+ if (!data) return
{`Transaction ${hash} not loaded`}
- 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 index 76b8a9ab8..474187ec1 100644 --- 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,7 +660,7 @@ export const TestnetContractHashTags: ContractHashTag[] = [ depType: 'code', hashType: 'type', tag: 'xUDT(final_rls)', - category: 'lock', + category: 'type', }, { codeHashes: ['0x50bd8d6680b8b9cf98b73f3c08faf8b2a21914311954118ad6609be6e78a1b95'], @@ -668,7 +668,7 @@ export const TestnetContractHashTags: ContractHashTag[] = [ depType: 'code', hashType: 'data1', tag: 'xUDT', - category: 'lock', + category: 'type', }, { codeHashes: [ diff --git a/src/locales/en.json b/src/locales/en.json index 95a043b99..a2b804a44 100644 --- 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 index 4ab0427d0..fae856f2b 100644 --- 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 index 75403c826..c40985eb6 100644 --- 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 new file mode 100644 index 000000000..a5ab60126 Binary files /dev/null and b/src/pages/Home/Banner/fiber_network.gif differ diff --git a/src/pages/Home/Banner/fiber_network_640.gif b/src/pages/Home/Banner/fiber_network_640.gif new file mode 100644 index 000000000..881470e04 Binary files /dev/null and b/src/pages/Home/Banner/fiber_network_640.gif differ diff --git a/src/pages/Home/Banner/index.module.scss b/src/pages/Home/Banner/index.module.scss index 710ad8997..dd676e17f 100644 --- a/src/pages/Home/Banner/index.module.scss +++ b/src/pages/Home/Banner/index.module.scss @@ -2,12 +2,11 @@ $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%; @@ -15,12 +14,175 @@ $backgroundColor: #232323; 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 index b9996237b..686576b48 100644 --- 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 ( +
+
+ Knowledge Size +
+
+ + CKBytes + + + +
+
+
+ ) + } + return ( -
-
- Knowledge Size -
-
- - CKBytes - - +
+
+

{t(`banner.fiber_title`)}

+

{t(`banner.fiber_subtitle`)}

+
+
+ + {t(`banner.learn_more`)} + + + ) => { + e.preventDefault() + }} + > + {t('banner.find_nodes')} -
+
) diff --git a/src/pages/Transaction/state.ts b/src/pages/Transaction/state.ts index 7e37461c2..384a2c8d7 100644 --- 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[] = [ diff --git a/src/pages/Xudt/UDTComp.tsx b/src/pages/Xudt/UDTComp.tsx index 6218dbf1c..5ac052dd1 100644 --- a/src/pages/Xudt/UDTComp.tsx +++ b/src/pages/Xudt/UDTComp.tsx @@ -30,6 +30,10 @@ import { ReactComponent as EditIcon } from '../../assets/edit.svg' import XUDTTokenIcon from '../../assets/sudt_token.png' import { ReactComponent as OpenSourceIcon } from '../../assets/open-source.svg' import { scripts } from '../ScriptList' +import { IS_MAINNET } from '../../constants/common' +import { MainnetContractHashTags, TestnetContractHashTags } from '../../constants/scripts' + +const scriptDataList = IS_MAINNET ? MainnetContractHashTags : TestnetContractHashTags const IssuerContent: FC<{ address: string }> = ({ address }) => { const { t } = useTranslation() @@ -185,6 +189,9 @@ export const UDTOverviewCard = ({ ) const tags = xudt?.xudtTags ?? [] + const isOpenSourceXudt = xudt + ? scriptDataList.some(s => s.tag.startsWith('xUDT') && s.codeHashes.includes(xudt?.typeScript.codeHash)) + : false return ( <> @@ -203,7 +210,7 @@ export const UDTOverviewCard = ({ {tags.map(tag => ( ))} - {xudtCodeUrl ? ( + {isOpenSourceXudt && xudtCodeUrl ? ( {t('scripts.open_source_script')} diff --git a/src/utils/transformer.ts b/src/utils/transformer.ts index 81c91492e..1b1c3f105 100644 --- a/src/utils/transformer.ts +++ b/src/utils/transformer.ts @@ -35,6 +35,9 @@ export const transformToTransaction = ( cycles: null, maxCyclesInEpoch: null, maxCycles: null, + cellDeps: [], + headerDeps: [], + witnesses: [], } }