Skip to content

Commit be116b6

Browse files
Keith-CYKeith-CY
authored
Merge pull request #1825 from nervosnetwork/testnet
2 parents 01c646e + 89b066e commit be116b6

File tree

12 files changed

+246
-24
lines changed

12 files changed

+246
-24
lines changed

‎src/components/TransactionParameters/index.tsx

+6-7
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { FC, ReactNode } from 'react'
33
import { Trans, useTranslation } from 'react-i18next'
44
import { Link } from 'react-router-dom'
55
import classNames from 'classnames'
6-
import { useCKBNode } from '../../hooks/useCKBNode'
6+
import { explorerService } from '../../services/ExplorerService'
77
import { matchTxHash } from '../../utils/util'
88
import Loading from '../AwesomeLoadings/Spinner'
99
import HashTag from '../HashTag'
@@ -48,9 +48,8 @@ const Field = ({
4848

4949
const TransactionParameters: FC<{ hash: string }> = ({ hash }) => {
5050
const [t] = useTranslation()
51-
const { nodeService } = useCKBNode()
5251

53-
const { data, isLoading } = useQuery(['tx', hash], () => nodeService.getTx(hash))
52+
const { data, isLoading } = useQuery(['explorer-tx', hash], () => explorerService.api.fetchTransactionByHash(hash))
5453
if (isLoading) {
5554
return (
5655
<div className={styles.loading}>
@@ -59,9 +58,9 @@ const TransactionParameters: FC<{ hash: string }> = ({ hash }) => {
5958
)
6059
}
6160

62-
if (!data?.result?.transaction) return <div>{`Transaction ${hash} not loaded`}</div>
61+
if (!data) return <div>{`Transaction ${hash} not loaded`}</div>
6362

64-
const { header_deps: headerDeps, cell_deps: cellDeps, witnesses } = data.result.transaction
63+
const { headerDeps, cellDeps, witnesses } = data
6564

6665
const parameters = [
6766
{
@@ -84,8 +83,8 @@ const TransactionParameters: FC<{ hash: string }> = ({ hash }) => {
8483
content: cellDeps.length ? (
8584
cellDeps.map(cellDep => {
8685
const {
87-
out_point: { tx_hash: txHash, index },
88-
dep_type: depType,
86+
outPoint: { txHash, index },
87+
depType,
8988
} = cellDep
9089
const hashTag = matchTxHash(txHash, Number(index))
9190
return (

‎src/constants/scripts.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -268,7 +268,7 @@ export const MainnetContractHashTags: ContractHashTag[] = [
268268
depType: 'code',
269269
hashType: 'data1',
270270
tag: 'xUDT',
271-
category: 'lock',
271+
category: 'type',
272272
},
273273
{
274274
codeHashes: ['0x4a4dce1df3dffff7f8b2cd7dff7303df3b6150c9788cb75dcf6747247132b9f5'],
@@ -660,15 +660,15 @@ export const TestnetContractHashTags: ContractHashTag[] = [
660660
depType: 'code',
661661
hashType: 'type',
662662
tag: 'xUDT(final_rls)',
663-
category: 'lock',
663+
category: 'type',
664664
},
665665
{
666666
codeHashes: ['0x50bd8d6680b8b9cf98b73f3c08faf8b2a21914311954118ad6609be6e78a1b95'],
667667
txHashes: ['0xbf6fb538763efec2a70a6a3dcb7242787087e1030c4e7d86585bc63a9d337f5f-0'],
668668
depType: 'code',
669669
hashType: 'data1',
670670
tag: 'xUDT',
671-
category: 'lock',
671+
category: 'type',
672672
},
673673
{
674674
codeHashes: [

‎src/locales/en.json

+7
Original file line numberDiff line numberDiff line change
@@ -205,6 +205,13 @@
205205
"wallets_memo": "In alphabetical order",
206206
"nft_collections": "NFT Collections"
207207
},
208+
"banner": {
209+
"fiber_title": "Fiber Network is making Satoshi’s vision a reality",
210+
"fiber_subtitle": "The Next-generation Common Lightning Network",
211+
"learn_more": "Learn More",
212+
"find_nodes": "Find Nodes",
213+
"coming_soon": "Coming soon"
214+
},
208215
"blockchain": {
209216
"latest_block": "Latest Block",
210217
"epoch": "Epoch",

‎src/locales/zh.json

+7
Original file line numberDiff line numberDiff line change
@@ -220,6 +220,13 @@
220220
"wallets_memo": "In alphabetical order",
221221
"nft_collections": "NFT 藏品"
222222
},
223+
"banner": {
224+
"fiber_title": "Fiber Network 不忘初心",
225+
"fiber_subtitle": "下一代通用闪电网络",
226+
"learn_more": "了解更多",
227+
"find_nodes": "更多节点",
228+
"coming_soon": "敬请期待"
229+
},
223230
"blockchain": {
224231
"latest_block": "最高块",
225232
"epoch": "Epoch",

‎src/models/Transaction/index.ts

+3
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,9 @@ export interface Transaction {
3535
maxCyclesInEpoch: number | null
3636
maxCycles: number | null
3737
createTimestamp?: number
38+
cellDeps: CellDep[]
39+
headerDeps: string[]
40+
witnesses: string[]
3841
}
3942

4043
export interface BtcTx {

‎src/pages/Home/Banner/fiber_network.gif

4.06 MB
Loading

‎src/pages/Home/Banner/fiber_network_640.gif

844 KB
Loading

‎src/pages/Home/Banner/index.module.scss

+165-3
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,187 @@
22

33
$backgroundColor: #232323;
44

5-
.root {
5+
.root,
6+
.fiberBanner {
67
width: 100%;
7-
background-color: $backgroundColor;
88
height: 200px;
99
position: relative;
10-
background-image: url('./ckb_explorer_banner.svg');
1110
background-repeat: no-repeat;
1211
background-position: center center;
1312
background-size: auto 100%;
1413
color: white;
1514
display: flex;
1615
align-items: center;
1716
justify-content: center;
17+
}
18+
19+
.root {
20+
background-color: $backgroundColor;
21+
background-image: url('./ckb_explorer_banner.svg');
1822

1923
@media (width <= $mobileBreakPoint) {
2024
background-image: url('./ckb_explorer_banner_phone.svg');
2125
}
2226
}
2327

28+
.fiberBanner {
29+
--m: 1rem;
30+
--red: #ff6565;
31+
--pink: #ff64f9;
32+
--purple: #6b5fff;
33+
--blue: #4d8aff;
34+
--green: #5bff89;
35+
--yellow: #fe5;
36+
--orange: #ff6d1b;
37+
38+
position: relative;
39+
background-color: black;
40+
background-image: url('./fiber_network.gif');
41+
display: flex;
42+
flex-direction: column;
43+
justify-content: center;
44+
align-items: center;
45+
46+
.slogan {
47+
display: flex;
48+
flex-direction: column;
49+
50+
h1,
51+
h3 {
52+
line-height: 1;
53+
color: #f3f3f3;
54+
text-align: center;
55+
}
56+
57+
h3 {
58+
opacity: 0.8;
59+
font-weight: 300;
60+
}
61+
62+
margin-bottom: 20px;
63+
}
64+
65+
a {
66+
position: relative;
67+
color: #f3f3f3;
68+
font-size: var(--m);
69+
display: flex;
70+
justify-content: center;
71+
cursor: pointer;
72+
}
73+
74+
span {
75+
box-sizing: border-box;
76+
border: calc(0.08 * var(--m)) solid transparent;
77+
border-radius: calc(0.7 * var(--m));
78+
padding: calc(0.5 * var(--m)) calc(1 * var(--m));
79+
background: linear-gradient(#121213, #121213),
80+
linear-gradient(#121213 50%, rgb(18 18 19 / 60%) 80%, rgb(18 18 19 / 0%)),
81+
linear-gradient(
82+
90deg,
83+
var(--orange),
84+
var(--yellow),
85+
var(--green),
86+
var(--blue),
87+
var(--purple),
88+
var(--pink),
89+
var(--red)
90+
);
91+
background-origin: border-box;
92+
background-clip: padding-box, border-box, border-box;
93+
background-size: 200%;
94+
animation: animate 8s infinite linear;
95+
transition-duration: 0.3s;
96+
z-index: 1;
97+
}
98+
99+
.links {
100+
display: flex;
101+
gap: 80px;
102+
}
103+
104+
a::before {
105+
content: '';
106+
background: linear-gradient(
107+
90deg,
108+
var(--orange),
109+
var(--yellow),
110+
var(--green),
111+
var(--blue),
112+
var(--purple),
113+
var(--pink),
114+
var(--red)
115+
);
116+
height: 30%;
117+
width: 90%;
118+
position: absolute;
119+
bottom: 0;
120+
background-size: 200%;
121+
animation: animate 8s infinite linear;
122+
filter: blur(calc(0.8 * var(--m)));
123+
}
124+
125+
a:hover span {
126+
border: calc(0.08 * var(--m)) solid transparent;
127+
transform: perspective(1000px) translateZ(50px);
128+
transform-style: preserve-3d;
129+
}
130+
131+
a:hover::before {
132+
height: 100%;
133+
width: 120%;
134+
filter: blur(calc(1.5 * var(--m)));
135+
opacity: 0.8;
136+
}
137+
138+
a[aria-disabled] {
139+
/* pointer-events: none; */
140+
cursor: not-allowed;
141+
142+
span {
143+
background: #aaa;
144+
color: #ccc;
145+
border: none;
146+
}
147+
148+
&::before {
149+
display: none;
150+
}
151+
152+
&:hover span {
153+
transform: none;
154+
}
155+
156+
/* opacity: 0.6; */
157+
}
158+
159+
@keyframes animate {
160+
0% {
161+
background-position: 0;
162+
}
163+
164+
100% {
165+
background-position: 200%;
166+
}
167+
}
168+
169+
@media (width <= 640px) {
170+
background-image: url('./fiber_network_640.gif');
171+
height: 150px;
172+
font-size: 0.6rem;
173+
174+
.slogan {
175+
margin-bottom: 10px;
176+
}
177+
178+
.links {
179+
gap: 16px;
180+
}
181+
182+
--m: 0.6rem;
183+
}
184+
}
185+
24186
.halvingBannerSuccess {
25187
background-size: cover;
26188
background-position: center;

‎src/pages/Home/Banner/index.tsx

+41-10
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,18 @@
11
import { useQuery } from '@tanstack/react-query'
22
import { BarChartIcon } from '@radix-ui/react-icons'
3+
import { useTranslation } from 'react-i18next'
4+
import { Tooltip } from 'antd'
35
import { Link } from '../../../components/Link'
46
import config from '../../../config'
57
import styles from './index.module.scss'
68
import { getKnowledgeSize } from './utils'
79
import { NumberTicker } from '../../../components/ui/NumberTicker'
10+
import { IS_MAINNET } from '../../../constants/common'
811

912
const { BACKUP_NODES: backupNodes } = config
1013

1114
export default () => {
15+
const [t] = useTranslation()
1216
const { data: size } = useQuery(
1317
['backnode_tip_header'],
1418
async () => {
@@ -24,18 +28,45 @@ export default () => {
2428
},
2529
{ refetchInterval: 12 * 1000 },
2630
)
31+
if (IS_MAINNET) {
32+
return (
33+
<div className={styles.root}>
34+
<div className={styles.knowledgeBase}>
35+
<span>Knowledge Size</span>
36+
<br />
37+
<div className={styles.ticker}>
38+
<NumberTicker value={size ? +size : null} />
39+
<span>CKBytes</span>
40+
<Link to="/charts/knowledge-size">
41+
<BarChartIcon color="white" />
42+
</Link>
43+
</div>
44+
</div>
45+
</div>
46+
)
47+
}
48+
2749
return (
28-
<div className={styles.root}>
29-
<div className={styles.knowledgeBase}>
30-
<span>Knowledge Size</span>
31-
<br />
32-
<div className={styles.ticker}>
33-
<NumberTicker value={size ? +size : null} />
34-
<span>CKBytes</span>
35-
<Link to="/charts/knowledge-size">
36-
<BarChartIcon color="white" />
50+
<div className={styles.fiberBanner}>
51+
<div className={styles.slogan}>
52+
<h1>{t(`banner.fiber_title`)}</h1>
53+
<h3>{t(`banner.fiber_subtitle`)}</h3>
54+
</div>
55+
<div className={styles.links}>
56+
<Link to="https://www.ckbfiber.net/" target="_blank" rel="noopener noreferrer">
57+
<span>{t(`banner.learn_more`)}</span>
58+
</Link>
59+
<Tooltip title={t('banner.coming_soon')}>
60+
<Link
61+
to="/"
62+
aria-disabled
63+
onClick={(e: React.SyntheticEvent<HTMLAnchorElement>) => {
64+
e.preventDefault()
65+
}}
66+
>
67+
<span>{t('banner.find_nodes')}</span>
3768
</Link>
38-
</div>
69+
</Tooltip>
3970
</div>
4071
</div>
4172
)

‎src/pages/Transaction/state.ts

+3
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,9 @@ export const defaultTransactionInfo: Transaction = {
2626
cycles: null,
2727
maxCyclesInEpoch: null,
2828
maxCycles: null,
29+
cellDeps: [],
30+
headerDeps: [],
31+
witnesses: [],
2932
}
3033

3134
export const defaultTransactionLiteDetails: TransactionRecord[] = [

0 commit comments

Comments
 (0)