Skip to content

Commit 96494f3

Browse files
markshenoudamarkshenouda
committed
Refactor ChainHero component integration in Verifiers page and remove redundant styles
1 parent 9290b8d commit 96494f3

File tree

3 files changed

+73
-114
lines changed

3 files changed

+73
-114
lines changed

‎src/components/CCIP/ChainHero/ChainHero.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
.ccip-chain-hero {
22
background-color: var(--gray-100);
33
border-bottom: 1px solid var(--gray-200);
4-
min-height: 241px;
54
}
65

76
.ccip-chain-hero__heading {

‎src/components/CCIP/ChainHero/ChainHero.tsx‎

Lines changed: 51 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -54,9 +54,13 @@ interface ChainHeroProps {
5454
symbol: string
5555
}
5656
environment: Environment
57+
breadcrumbItems?: Array<{
58+
name: string
59+
url: string
60+
}>
5761
}
5862

59-
function ChainHero({ chains, tokens, network, token, environment, lanes }: ChainHeroProps) {
63+
function ChainHero({ chains, tokens, network, token, environment, lanes, breadcrumbItems }: ChainHeroProps) {
6064
// Get chain-specific tooltip configuration
6165
const chainTooltipConfig = network?.chain ? getChainTooltip(network.chain) : null
6266

@@ -99,55 +103,59 @@ function ChainHero({ chains, tokens, network, token, environment, lanes }: Chain
99103
<div className="ccip-chain-hero__content">
100104
<div className="ccip-chain-hero__top">
101105
<Breadcrumb
102-
items={[
103-
{
104-
name: "CCIP Directory",
105-
url: `/ccip/directory/${environment}`,
106-
},
107-
{
108-
name: network?.name || token?.id || "Current",
109-
url: network
110-
? `/ccip/directory/${environment}/chain/${network.chain}`
111-
: `/ccip/directory/${environment}/token/${token?.id}`,
112-
},
113-
]}
106+
items={
107+
breadcrumbItems || [
108+
{
109+
name: "CCIP Directory",
110+
url: `/ccip/directory/${environment}`,
111+
},
112+
{
113+
name: network?.name || token?.id || "Current",
114+
url: network
115+
? `/ccip/directory/${environment}/chain/${network.chain}`
116+
: `/ccip/directory/${environment}/token/${token?.id}`,
117+
},
118+
]
119+
}
114120
/>
115121
<div className="ccip-chain-hero__chainSearch">
116122
<Search chains={chains} tokens={tokens} small environment={environment} lanes={lanes} />
117123
</div>
118124
</div>
119125

120-
<div className="ccip-chain-hero__heading">
121-
<img
122-
src={network?.logo || token?.logo}
123-
alt=""
124-
className={token?.logo ? "ccip-chain-hero__token-logo" : ""}
125-
onError={({ currentTarget }) => {
126-
currentTarget.onerror = null // prevents looping
127-
currentTarget.src = fallbackTokenIconUrl
128-
}}
129-
/>
130-
<h1
131-
style={{
132-
display: "flex",
133-
alignItems: "center",
134-
gap: "8px",
135-
position: "relative",
136-
overflow: "visible",
137-
}}
138-
>
139-
{network?.name || token?.id}
140-
<span className="ccip-chain-hero__token-logo__symbol">{token?.name}</span>
126+
{(network || token) && (
127+
<div className="ccip-chain-hero__heading">
128+
<img
129+
src={network?.logo || token?.logo}
130+
alt=""
131+
className={token?.logo ? "ccip-chain-hero__token-logo" : ""}
132+
onError={({ currentTarget }) => {
133+
currentTarget.onerror = null // prevents looping
134+
currentTarget.src = fallbackTokenIconUrl
135+
}}
136+
/>
137+
<h1
138+
style={{
139+
display: "flex",
140+
alignItems: "center",
141+
gap: "8px",
142+
position: "relative",
143+
overflow: "visible",
144+
}}
145+
>
146+
{network?.name || token?.id}
147+
<span className="ccip-chain-hero__token-logo__symbol">{token?.name}</span>
141148

142-
{chainTooltipConfig && (
143-
<Tooltip
144-
tip={chainTooltipConfig.content}
145-
hoverable={chainTooltipConfig.hoverable}
146-
hideDelay={chainTooltipConfig.hideDelay}
147-
/>
148-
)}
149-
</h1>
150-
</div>
149+
{chainTooltipConfig && (
150+
<Tooltip
151+
tip={chainTooltipConfig.content}
152+
hoverable={chainTooltipConfig.hoverable}
153+
hideDelay={chainTooltipConfig.hideDelay}
154+
/>
155+
)}
156+
</h1>
157+
</div>
158+
)}
151159
{network && (
152160
<div className="ccip-chain-hero__details">
153161
<div className="ccip-chain-hero__details__item">

‎src/components/CCIP/Verifiers/Verifiers.astro‎

Lines changed: 22 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,7 @@ import { getAllNetworks, getAllVerifiers, getSearchLanes, Version, Environment }
55
import Table from "~/components/CCIP/Tables/VerifiersTable"
66
import { getAllUniqueVerifiers } from "~/config/data/ccip/data.ts"
77
import { DOCS_BASE_URL } from "~/utils/structuredData"
8-
import Breadcrumb from "~/components/CCIP/Breadcrumb/Breadcrumb"
9-
import Search from "~/components/CCIP/Search/Search"
8+
import ChainHero from "~/components/CCIP/ChainHero/ChainHero"
109
1110
interface Props {
1211
environment: Environment
@@ -68,38 +67,27 @@ const canonicalForJsonLd = `${DOCS_BASE_URL}${currentPath}`
6867
excerpt: verifiersMetadata.excerpt,
6968
}}
7069
>
71-
<section class="ccip-chain-hero">
72-
<div class="ccip-chain-hero__content">
73-
<div class="ccip-chain-hero__top">
74-
<Breadcrumb
75-
items={[
76-
{
77-
name: "CCIP Directory",
78-
url: `/ccip/directory/${environment}`,
79-
},
80-
{
81-
name: "Verifiers",
82-
url: `/ccip/directory/${environment}/verifiers`,
83-
},
84-
]}
85-
/>
86-
<div class="ccip-chain-hero__chainSearch">
87-
<Search
88-
chains={networks}
89-
tokens={uniqueVerifiers.map((verifier) => ({
90-
id: verifier.id,
91-
totalNetworks: verifier.totalNetworks,
92-
logo: verifier.logo,
93-
}))}
94-
small
95-
environment={environment}
96-
lanes={searchLanes}
97-
client:load
98-
/>
99-
</div>
100-
</div>
101-
</div>
102-
</section>
70+
<ChainHero
71+
chains={networks}
72+
tokens={uniqueVerifiers.map((verifier) => ({
73+
id: verifier.id,
74+
totalNetworks: verifier.totalNetworks,
75+
logo: verifier.logo,
76+
}))}
77+
lanes={searchLanes}
78+
environment={environment}
79+
breadcrumbItems={[
80+
{
81+
name: "CCIP Directory",
82+
url: `/ccip/directory/${environment}`,
83+
},
84+
{
85+
name: "Verifiers",
86+
url: `/ccip/directory/${environment}/verifiers`,
87+
},
88+
]}
89+
client:load
90+
/>
10391

10492
<section class="layout">
10593
<div>
@@ -109,42 +97,6 @@ const canonicalForJsonLd = `${DOCS_BASE_URL}${currentPath}`
10997
</CcipDirectoryLayout>
11098

11199
<style scoped="false">
112-
.ccip-chain-hero {
113-
background: var(--gray-50);
114-
border-bottom: 1px solid var(--gray-200);
115-
}
116-
117-
.ccip-chain-hero__content {
118-
max-width: 1500px;
119-
margin: 0 auto;
120-
padding: var(--space-6x);
121-
}
122-
123-
.ccip-chain-hero__top {
124-
display: flex;
125-
justify-content: space-between;
126-
align-items: center;
127-
gap: var(--space-4x);
128-
}
129-
130-
.ccip-chain-hero__chainSearch {
131-
flex-shrink: 0;
132-
}
133-
134-
@media (max-width: 768px) {
135-
.ccip-chain-hero__top {
136-
flex-direction: column;
137-
align-items: stretch;
138-
gap: var(--space-3x);
139-
}
140-
}
141-
142-
@media (min-width: 992px) {
143-
.ccip-chain-hero__content {
144-
padding: var(--space-10x) var(--space-8x);
145-
}
146-
}
147-
148100
.layout {
149101
margin: 0 auto;
150102
padding: var(--space-6x);

0 commit comments

Comments
 (0)