Update lane side panel

src/components/CCIP/ChainHero/ChainHero.css

@@ -1,5 +1,5 @@
 .ccip-chain-hero {
-  background-color: var(--gray-100);
+  background: var(--Page-Background-Alt);
   border-bottom: 1px solid var(--gray-200);
   min-height: 241px;
 }

src/components/CCIP/ChainHero/LaneDetailsHero.css

@@ -1,5 +1,5 @@
 .lane-details-hero {
-  background-color: var(--gray-100);
+  background: var(--Page-Background-Alt);
   padding: var(--space-6x);
   border-bottom: 1px solid var(--gray-200);
 }
@@ -42,9 +42,16 @@
 }
 
 .lane-details-hero__details {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: var(--space-6x);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-10x);
+}
+
+.lane-details-hero__details__item {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4x);
+  min-width: var(--space-45x);
 }
 
 .lane-details-hero__details__label {
@@ -61,10 +68,6 @@
     padding: var(--space-6x) var(--space-10x) var(--space-10x);
   }
 
-  .lane-details-hero__details {
-    grid-template-columns: 1fr 2fr;
-  }
-
   .lane-details-hero__networks {
     flex-direction: row;
     align-items: center;
@@ -74,4 +77,9 @@
     transform: rotate(0deg);
     margin-left: 0;
   }
+
+  .lane-details-hero__details {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
 }

src/components/CCIP/ChainHero/LaneDetailsHero.tsx

@@ -19,8 +19,8 @@ interface LaneDetailsHeroProps {
   }
   onRamp: string
   offRamp: string
+  sourceAddress: string
   destinationAddress: string
-  enforceOutOfOrder?: boolean
   explorer: ExplorerInfo
   inOutbound: LaneFilter
 }
@@ -69,32 +69,25 @@ const DetailItem = ({
   clipboardType?: string
   tooltip?: React.ReactNode
 }) => (
-  <>
+  <div className="lane-details-hero__details__item">
     <div className="lane-details-hero__details__label">
       {label}
       {tooltip}
     </div>
     <div data-clipboard-type={clipboardType}>{children}</div>
-  </>
+  </div>
 )
 
 function LaneDetailsHero({
   sourceNetwork,
   destinationNetwork,
   onRamp,
   offRamp,
+  sourceAddress,
   destinationAddress,
-  enforceOutOfOrder,
   explorer,
   inOutbound,
 }: LaneDetailsHeroProps) {
-  // Map boolean values to display strings
-  const getOutOfOrderText = (value?: boolean) => {
-    if (value === true) return "Required"
-    if (value === false) return "Optional"
-    return "N/A"
-  }
-
   return (
     <div className="lane-details-hero">
       {/* Display networks with direction based on lane type */}
@@ -115,42 +108,47 @@ function LaneDetailsHero({
       </div>
 
       <div className="lane-details-hero__details">
-        {/* Display address information based on lane type */}
-        {inOutbound === LaneFilter.Inbound ? (
-          <DetailItem label="OffRamp address" clipboardType="offramp">
-            <AddressComponent
-              address={offRamp}
-              endLength={6}
-              contractUrl={getExplorerAddressUrl(explorer, destinationNetwork.chainType)(offRamp)}
-            />
-          </DetailItem>
-        ) : (
+        {onRamp && (
           <DetailItem
             label="OnRamp address"
             clipboardType="onramp"
             tooltip={sourceNetwork.chainType === "solana" ? <StyledTooltip tip="Same as Router." /> : undefined}
           >
             <AddressComponent
               address={onRamp}
-              endLength={6}
+              endLength={4}
               contractUrl={getExplorerAddressUrl(explorer, sourceNetwork.chainType)(onRamp)}
             />
           </DetailItem>
         )}
 
-        <DetailItem label="Destination chain selector" clipboardType="destination-chain-selector">
-          {destinationAddress ? <CopyValue value={destinationAddress} /> : "n/a"}{" "}
-        </DetailItem>
+        {offRamp && (
+          <DetailItem label="OffRamp address" clipboardType="offramp">
+            <AddressComponent
+              address={offRamp}
+              endLength={4}
+              contractUrl={getExplorerAddressUrl(explorer, destinationNetwork.chainType)(offRamp)}
+            />
+          </DetailItem>
+        )}
+
+        {sourceAddress && (
+          <DetailItem
+            label="Source chain selector"
+            clipboardType="source-chain-selector"
+            tooltip={<StyledTooltip tip="Unique identifier for the source blockchain network." />}
+          >
+            <CopyValue value={sourceAddress} />
+          </DetailItem>
+        )}
 
-        {inOutbound === LaneFilter.Outbound && (
+        {destinationAddress && (
           <DetailItem
-            label="Out of Order Execution"
-            clipboardType="out-of-order-execution"
-            tooltip={
-              <StyledTooltip tip="Controls the execution order of your messages on the destination blockchain. Setting this to true allows messages to be executed in any order. Setting it to false ensures messages are executed in sequence, so a message will only be executed if the preceding one has been executed. On lanes where 'Out of Order Execution' is required, you must set this to true; otherwise, the transaction will revert." />
-            }
+            label="Destination chain selector"
+            clipboardType="destination-chain-selector"
+            tooltip={<StyledTooltip tip="Unique identifier for the destination blockchain network." />}
           >
-            {getOutOfOrderText(enforceOutOfOrder)}
+            <CopyValue value={destinationAddress} />
           </DetailItem>
         )}
       </div>

src/components/CCIP/Drawer/Drawer.css

@@ -52,6 +52,11 @@
     width: 75%;
   }
 
+  /* Wide drawer for lane details - full width minus ESC button width and spacing */
+  .drawer__container--wide {
+    width: calc(100% - var(--space-12x) - var(--space-8x));
+  }
+
   .drawer__closeMobile {
     display: none;
   }

src/components/CCIP/Drawer/Drawer.tsx

@@ -1,6 +1,6 @@
 import { useStore } from "@nanostores/react"
 import "./Drawer.css"
-import { drawerContentStore } from "./drawerStore.ts"
+import { drawerContentStore, drawerWidthStore, DrawerWidth } from "./drawerStore.ts"
 import { useRef, useEffect, useState } from "react"
 import { clsx } from "~/lib/clsx/clsx.ts"
 import type { ReactNode } from "react"
@@ -9,6 +9,7 @@ function Drawer() {
   const drawerRef = useRef<HTMLDivElement>(null)
   const drawerContentRef = useRef<HTMLDivElement>(null)
   const $drawerContent = useStore(drawerContentStore) as (() => ReactNode) | ReactNode | null
+  const $drawerWidth = useStore(drawerWidthStore)
   const [isOpened, setIsOpened] = useState(false)
 
   // exit when press esc
@@ -47,6 +48,7 @@ function Drawer() {
     // Use transitionend event instead of setTimeout for better performance
     const handleTransitionEnd = () => {
       drawerContentStore.set(null)
+      drawerWidthStore.set(DrawerWidth.Default)
       drawerRef.current?.removeEventListener("transitionend", handleTransitionEnd)
     }
 
@@ -62,7 +64,12 @@ function Drawer() {
       ref={drawerRef}
       onClick={handleClickOutside}
     >
-      <div className="drawer__container" ref={drawerContentRef}>
+      <div
+        className={clsx("drawer__container", {
+          "drawer__container--wide": $drawerWidth === DrawerWidth.Wide,
+        })}
+        ref={drawerContentRef}
+      >
         <div className="drawer__close">
           <button id="drawer-exit" onClick={handleClose} aria-label="Close drawer">
             <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">