Skip to content

Update token details page #178

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Zelig880 merged 4 commits into from
Dec 10, 2025
+32 −19
Merged

Update token details page #178

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
bd22c04
feat: add additional columns for pool version, custom, and min blocks…
markshenouda Dec 10, 2025
239d2e3
fix: adjust layout styles for improved responsiveness and alignment
markshenouda Dec 10, 2025
f70ed6e
fix: swap token name and ID display in ChainHero component; update pl…
markshenouda Dec 10, 2025
fc8ed2d
fix: refactor ChainHero heading styles for improved layout and alignment
markshenouda Dec 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 8 additions & 1 deletion src/components/CCIP/ChainHero/ChainHero.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,12 @@
margin: 0;
font-size: 28px;
font-weight: 500;
display: flex;
align-items: center;
gap: 8px;
position: relative;
overflow: visible;
line-height: var(--space-6x);
}

.ccip-chain-hero__heading img {
Expand Down Expand Up @@ -121,7 +127,8 @@
.ccip-chain-hero__token-logo__symbol {
font-weight: 500;
font-size: 18px;
color: var(--gray-700);
color: var(--Page-Foreground-Muted, #6c7585);
align-self: self-end;
}

.ccip-chain-hero__feeTokens__list {
Expand Down
14 changes: 3 additions & 11 deletions src/components/CCIP/ChainHero/ChainHero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,17 +127,9 @@ function ChainHero({ chains, tokens, network, token, environment, lanes }: Chain
currentTarget.src = fallbackTokenIconUrl
}}
/>
<h1
style={{
display: "flex",
alignItems: "center",
gap: "8px",
position: "relative",
overflow: "visible",
}}
>
{network?.name || token?.id}
<span className="ccip-chain-hero__token-logo__symbol">{token?.name}</span>
<h1>
{network?.name || token?.name}
<span className="ccip-chain-hero__token-logo__symbol">{token?.id}</span>

{chainTooltipConfig && (
<Tooltip
Expand Down
4 changes: 4 additions & 0 deletions src/components/CCIP/Search/Search.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,10 @@
outline: none;
}

.ccip-hero__search input::placeholder {
font-style: normal;
}

.ccip-hero__search input::-webkit-search-cancel-button {
-webkit-appearance: none;
height: 1em;
Expand Down
10 changes: 8 additions & 2 deletions src/components/CCIP/Tables/TokenChainsTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,9 @@ function TokenChainsTable({ networks, token, lanes, environment }: TableProps) {
<th>Token address</th>
<th>Token pool type</th>
<th>Token pool address</th>
<th>Pool version</th>
<th>Custom</th>
<th>Min Blocks required</th>
</tr>
</thead>
<tbody>
Expand Down Expand Up @@ -125,7 +128,7 @@ function TokenChainsTable({ networks, token, lanes, environment }: TableProps) {
<Address
contractUrl={getExplorerAddressUrl(network.explorer, network.chainType)(network.tokenAddress)}
address={network.tokenAddress}
endLength={6}
endLength={4}
/>
</td>
<td>{tokenPoolDisplay(network.tokenPoolType)}</td>
Expand All @@ -136,9 +139,12 @@ function TokenChainsTable({ networks, token, lanes, environment }: TableProps) {
network.chainType
)(network.tokenPoolAddress)}
address={network.tokenPoolAddress}
endLength={6}
endLength={4}
/>
</td>
<td>TBC</td>
<td>TBC</td>
<td>TBC</td>
</tr>
)
})}
Expand Down
14 changes: 9 additions & 5 deletions src/components/CCIP/Token/Token.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -171,9 +171,8 @@ const tokenStructuredData = generateTokenStructuredData(token, environment, chai

<style scoped="false">
.layout {
--doc-padding: var(--space-6x);
margin: var(--space-8x) auto;
padding: var(--doc-padding);
margin: 0 auto;
padding: var(--space-6x);
}

.layout h2 {
Expand Down Expand Up @@ -205,8 +204,13 @@ const tokenStructuredData = generateTokenStructuredData(token, environment, chai

@media (min-width: 50em) {
.layout {
max-width: min(calc(1440px - 2 * var(--space-16x)), calc(100% - 2 * var(--space-16x)));
padding: 0;
max-width: 1500px;
Copy link

@Zelig880 Zelig880 Dec 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what is the reason of this change?

Copy link
Member Author

@markshenouda markshenouda Dec 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To match the existing "Listed Networks" section container's spacing with the hero section like the design
524694430-0b91866f-8e66-4856-9602-a90903bcdd31
This is the same exact value used in multiple files, including ChainHero.css

This was how the design looked before the change
image

}
}

@media (min-width: 992px) {
.layout {
padding: var(--space-10x) var(--space-8x);
}
}
</style>
Loading