Update token details page (#178)

* feat: add additional columns for pool version, custom, and min blocks in TokenChainsTable

* fix: adjust layout styles for improved responsiveness and alignment

* fix: swap token name and ID display in ChainHero component; update placeholder font style in Search CSS

* fix: refactor ChainHero heading styles for improved layout and alignment

Author: markshenouda

src/components/CCIP/ChainHero/ChainHero.css

@@ -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 {
@@ -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 {

src/components/CCIP/ChainHero/ChainHero.tsx

@@ -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

src/components/CCIP/Search/Search.css

@@ -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;

src/components/CCIP/Tables/TokenChainsTable.tsx

@@ -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>
@@ -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>
@@ -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>
                 )
               })}

src/components/CCIP/Token/Token.astro

@@ -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 {
@@ -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;
+    }
+  }
+
+  @media (min-width: 992px) {
+    .layout {
+      padding: var(--space-10x) var(--space-8x);
     }
   }
 </style>