Skip to content

Commit e56884a

Browse files
Keith-CYKeith-CY
authored
Merge pull request #1824 from nervosnetwork/develop
Merge develop into testnet
2 parents 01c646e + 09779c0 commit e56884a

File tree

6 files changed

+220
-13
lines changed

6 files changed

+220
-13
lines changed

‎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/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
)

0 commit comments

Comments
 (0)