From 7cb6ece160995843ac8754bdb7667e8927ceff26 Mon Sep 17 00:00:00 2001
From: Karim <98668332+khadni@users.noreply.github.com>
Date: Wed, 5 Jun 2024 16:26:15 -0500
Subject: [PATCH 1/7] init

---
 .../supported-networks/LaneConfig.astro       |  37 ++--
 .../SimplePreactTooltip.tsx                   |  56 ++++++
 .../supported-networks/TokenSearch.tsx        | 186 ++++++++++++++++++
 3 files changed, 259 insertions(+), 20 deletions(-)
 create mode 100644 src/features/ccip/components/supported-networks/SimplePreactTooltip.tsx
 create mode 100644 src/features/ccip/components/supported-networks/TokenSearch.tsx

diff --git a/src/features/ccip/components/supported-networks/LaneConfig.astro b/src/features/ccip/components/supported-networks/LaneConfig.astro
index 8d8edb51f20..dcc156e5b3c 100644
--- a/src/features/ccip/components/supported-networks/LaneConfig.astro
+++ b/src/features/ccip/components/supported-networks/LaneConfig.astro
@@ -4,7 +4,7 @@ import {
   Environment,
   Version,
   PoolType,
-  LaneConfig,
+  type LaneConfig,
   determineTokenMechanism,
   TokenMechanism,
 } from "@config/data/ccip/"
@@ -14,6 +14,7 @@ import BigNumber from "bignumber.js"
 import { utils } from "ethers"
 import { getExplorer, getExplorerAddressUrl } from "@features/utils"
 import { Tooltip } from "@features/common/Tooltip"
+import TokenSearch from "./TokenSearch"
 
 type ConfigProps = {
   laneConfig: LaneConfig
@@ -242,7 +243,8 @@ if (supportedTokens) {
         <p>
           <strong>Transferable tokens</strong>
         </p>
-        <div style="overflow-x: auto;width: 100%">
+        <TokenSearch tokens={tokensWithExtraInfo} client:load />
+        {/* <div style="overflow-x: auto;width: 100%">
           <table>
             <thead>
               <tr>
@@ -279,33 +281,28 @@ if (supportedTokens) {
               </tr>
             </thead>
             <tbody>
-              {tokensWithExtraInfo.map((tokenWithExtraInfo) => {
+              {filteredTokens.map((token) => {
                 return (
                   <tr>
-                    <td style={{ whiteSpace: "nowrap" }}>{tokenWithExtraInfo.token}</td>
+                    <td style={{ whiteSpace: "nowrap" }}>{token.token}</td>
                     <td style={{ whiteSpace: "nowrap" }}>
-                      <Address
-                        contractUrl={getExplorerAddressUrl(explorerUrl)(tokenWithExtraInfo.address)}
-                        endLength={4}
-                      />
+                      <Address contractUrl={getExplorerAddressUrl(explorerUrl)(token.address)} endLength={4} />
                     </td>
-                    <td style={{ whiteSpace: "nowrap" }}>{tokenWithExtraInfo.decimals}</td>
-                    <td style={{ whiteSpace: "nowrap" }}>{tokenWithExtraInfo.poolMechanism}</td>
+                    <td style={{ whiteSpace: "nowrap" }}>{token.decimals}</td>
+                    <td style={{ whiteSpace: "nowrap" }}>{token.poolMechanism}</td>
                     <td style={{ whiteSpace: "nowrap" }}>
-                      {tokenWithExtraInfo.rateLimiterConfig?.isEnabled
-                        ? display(tokenWithExtraInfo.rateLimiterConfig.capacity, tokenWithExtraInfo.decimals) +
-                          " " +
-                          tokenWithExtraInfo.token
+                      {token.rateLimiterConfig?.isEnabled
+                        ? display(token.rateLimiterConfig.capacity, token.decimals) + " " + token.token
                         : "N/A"}
                     </td>
                     <td>
-                      {tokenWithExtraInfo.rateLimiterConfig?.isEnabled
+                      {token.rateLimiterConfig?.isEnabled
                         ? (() => {
                             const { rateSecond, maxThroughput } = displayRate(
-                              tokenWithExtraInfo.rateLimiterConfig.capacity,
-                              tokenWithExtraInfo.rateLimiterConfig.rate,
-                              tokenWithExtraInfo.token,
-                              tokenWithExtraInfo.decimals
+                              token.rateLimiterConfig.capacity,
+                              token.rateLimiterConfig.rate,
+                              token.token,
+                              token.decimals
                             )
 
                             return (
@@ -324,7 +321,7 @@ if (supportedTokens) {
               })}
             </tbody>
           </table>
-        </div>
+        </div> */}
       </>
     </>
   ) : (
diff --git a/src/features/ccip/components/supported-networks/SimplePreactTooltip.tsx b/src/features/ccip/components/supported-networks/SimplePreactTooltip.tsx
new file mode 100644
index 00000000000..b1cea277fc1
--- /dev/null
+++ b/src/features/ccip/components/supported-networks/SimplePreactTooltip.tsx
@@ -0,0 +1,56 @@
+/** @jsxImportSource preact */
+import { useState } from "preact/hooks"
+
+export const SimplePreactTooltip = ({
+  label,
+  tip,
+  imgURL = "https://smartcontract.imgix.net/icons/info.svg?auto=compress%2Cformat",
+  labelStyle = {},
+  tooltipStyle = {},
+}) => {
+  const [isVisible, setIsVisible] = useState(false)
+
+  const containerStyle = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    cursor: "help",
+    ...labelStyle,
+  }
+
+  const iconStyle = {
+    width: "0.8em",
+    height: "0.8em",
+    marginLeft: "2px",
+    marginRight: "5px",
+  }
+
+  const defaultTooltipStyle = {
+    position: "absolute",
+    backgroundColor: "white",
+    color: "var(--color-text-secondary)",
+    padding: "8px 12px",
+    borderRadius: "4px",
+    bottom: "110%",
+    left: "50%",
+    transform: "translateX(-50%) translateY(0)",
+    whiteSpace: "normal",
+    display: isVisible ? "block" : "none",
+    fontSize: "12px",
+    fontWeight: "normal",
+    maxWidth: "200px",
+    textAlign: "center",
+    boxShadow: "0 2px 4px rgba(0,0,0,0.2)",
+    ...tooltipStyle,
+  }
+
+  return (
+    <div style={{ position: "relative" }}>
+      <div style={containerStyle} onMouseEnter={() => setIsVisible(true)} onMouseLeave={() => setIsVisible(false)}>
+        {label}
+        <img src={imgURL} alt="Info" style={iconStyle} />
+      </div>
+      {isVisible && <div style={defaultTooltipStyle}>{tip}</div>}
+    </div>
+  )
+}
diff --git a/src/features/ccip/components/supported-networks/TokenSearch.tsx b/src/features/ccip/components/supported-networks/TokenSearch.tsx
new file mode 100644
index 00000000000..93f1fda6262
--- /dev/null
+++ b/src/features/ccip/components/supported-networks/TokenSearch.tsx
@@ -0,0 +1,186 @@
+/** @jsxImportSource preact */
+import { useState } from "preact/hooks"
+import { FunctionComponent } from "preact"
+import BigNumber from "bignumber.js"
+import { utils } from "ethers"
+import { SimplePreactTooltip } from "./SimplePreactTooltip"
+
+interface TokenExtraInfo {
+  token: string
+  address: string
+  rateLimiterConfig: {
+    capacity: string
+    isEnabled: boolean
+    rate: string
+  }
+  decimals: number
+  poolMechanism?: string
+}
+
+interface TokenSearchProps {
+  tokens: TokenExtraInfo[]
+}
+
+const normalizeNumber = (bigNum: BigNumber, decimals = 18) => {
+  const divisor = new BigNumber(10).pow(decimals)
+  const normalized = bigNum.dividedBy(divisor)
+
+  return normalized.toNumber()
+}
+
+const display = (bigNum: string, decimals = 18) => {
+  const numberWithoutDecimals = normalizeNumber(new BigNumber(bigNum), decimals).toString()
+  return utils.commify(numberWithoutDecimals)
+}
+
+const formatTime = (seconds: number) => {
+  const minute = 60
+  const hour = 3600 // 60*60
+
+  if (seconds < minute) {
+    return `${seconds} second${seconds > 1 ? "s" : ""}`
+  } else if (seconds < hour && hour - seconds > 300) {
+    // if the difference less than 5 minutes(300 seconds), round to hours
+    const minutes = Math.round(seconds / minute)
+    return `${minutes} minute${minutes > 1 ? "s" : ""}`
+  } else {
+    let hours = Math.floor(seconds / hour)
+    const remainingSeconds = seconds % hour
+
+    // Determine the nearest 5-minute interval
+    let minutes = Math.round(remainingSeconds / minute / 5) * 5
+
+    // Round up to the next hour if minutes are 60
+    if (minutes === 60) {
+      hours += 1
+      minutes = 0
+    }
+
+    return `${hours}${
+      minutes > 0
+        ? ` hour${hours > 1 ? "s" : ""} and ${minutes} minute${minutes > 1 ? "s" : ""}`
+        : ` hour${hours > 1 ? "s" : ""}`
+    }`
+  }
+}
+
+const displayRate = (capacity: string, rate: string, symbol: string, decimals = 18) => {
+  const capacityNormalized = normalizeNumber(new BigNumber(capacity), decimals) // normalize capacity
+  const rateNormalized = normalizeNumber(new BigNumber(rate), decimals) // normalize capacity
+
+  const totalRefillTime = capacityNormalized / rateNormalized // in seconds
+  const displayTime = `${formatTime(totalRefillTime)}`
+
+  return {
+    rateSecond: `${rateNormalized} ${symbol}/second`,
+    maxThroughput: `Refills from 0 to ${utils.commify(capacityNormalized)} ${symbol} in ${displayTime}`,
+  }
+}
+
+const TokenSearch: FunctionComponent<TokenSearchProps> = ({ tokens }) => {
+  const [searchTerm, setSearchTerm] = useState("")
+  const [filteredTokens, setFilteredTokens] = useState(tokens)
+
+  const handleInput = (event) => {
+    const newSearchTerm = event.currentTarget.value.toLowerCase()
+    setSearchTerm(newSearchTerm)
+    const newFilteredTokens = tokens.filter((token) => token.token.toLowerCase().includes(newSearchTerm))
+    setFilteredTokens(newFilteredTokens)
+  }
+
+  return (
+    <>
+      <input type="text" placeholder="Search tokens..." value={searchTerm} onInput={handleInput} />
+      <div style="overflow: visible; width: 100%; position: relative; z-index: 1;">
+        <div style="overflow-x: auto;">
+          <table>
+            <thead>
+              <tr>
+                <th>Symbol</th>
+                <th>Token Address</th>
+                <th>Decimals</th>
+                <th>
+                  <div style="position: relative;">
+                    <SimplePreactTooltip
+                      label="Mechanism"
+                      tip="Token pool mechanism: Lock & Mint, Burn & Mint, Lock & Unlock, Burn & Unlock"
+                      labelStyle={{ fontWeight: "bold", whiteSpace: "nowrap" }}
+                      tooltipStyle={{ marginTop: "8px", minWidth: "200px" }}
+                    />
+                  </div>
+                </th>
+                <th>
+                  <div style="position: relative;">
+                    <SimplePreactTooltip
+                      label="Rate Limit Capacity"
+                      tip="Maximum amount per transaction"
+                      labelStyle={{ fontWeight: "bold", whiteSpace: "nowrap" }}
+                      tooltipStyle={{ marginTop: "8px", minWidth: "200px" }}
+                    />
+                  </div>
+                </th>
+                <th>
+                  <div style="position: relative;">
+                    <SimplePreactTooltip
+                      label="Rate Limit Refill Rate"
+                      tip="Rate at which available capacity is replenished"
+                      labelStyle={{ fontWeight: "bold", whiteSpace: "nowrap" }}
+                      tooltipStyle={{ marginTop: "8px", minWidth: "200px" }}
+                    />
+                  </div>
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {filteredTokens.length > 0 ? (
+                filteredTokens.map((token) => (
+                  <tr>
+                    <td style={{ whiteSpace: "nowrap" }}>{token.token}</td>
+                    <td style={{ whiteSpace: "nowrap" }}>{token.address}</td>
+                    <td style={{ whiteSpace: "nowrap" }}>{token.decimals}</td>
+                    <td style={{ whiteSpace: "nowrap" }}>{token.poolMechanism}</td>
+                    <td style={{ whiteSpace: "nowrap" }}>
+                      {token.rateLimiterConfig?.isEnabled
+                        ? display(token.rateLimiterConfig.capacity, token.decimals) + " " + token.token
+                        : "N/A"}
+                    </td>
+                    <td>
+                      {token.rateLimiterConfig?.isEnabled
+                        ? (() => {
+                            const { rateSecond, maxThroughput } = displayRate(
+                              token.rateLimiterConfig.capacity,
+                              token.rateLimiterConfig.rate,
+                              token.token,
+                              token.decimals
+                            )
+                            return (
+                              <div style={{ position: "relative" }}>
+                                <SimplePreactTooltip
+                                  label={rateSecond}
+                                  tip={maxThroughput}
+                                  labelStyle={{ fontWeight: "normal", whiteSpace: "nowrap" }}
+                                  tooltipStyle={{ marginTop: "8px", minWidth: "200px" }}
+                                />
+                              </div>
+                            )
+                          })()
+                        : "N/A"}
+                    </td>
+                  </tr>
+                ))
+              ) : (
+                <tr>
+                  <td colSpan={6} style={{ textAlign: "center" }}>
+                    No token found
+                  </td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default TokenSearch

From 56c2178a63f55f5100cdad2accdf48909cd7b420 Mon Sep 17 00:00:00 2001
From: Karim <98668332+khadni@users.noreply.github.com>
Date: Wed, 5 Jun 2024 20:23:54 -0500
Subject: [PATCH 2/7] SimplePreactAddress

---
 .../supported-networks/LaneConfig.astro       |  6 ++-
 .../SimplePreactAddress.tsx                   | 53 +++++++++++++++++++
 .../supported-networks/TokenSearch.tsx        | 18 ++++++-
 3 files changed, 73 insertions(+), 4 deletions(-)
 create mode 100644 src/features/ccip/components/supported-networks/SimplePreactAddress.tsx

diff --git a/src/features/ccip/components/supported-networks/LaneConfig.astro b/src/features/ccip/components/supported-networks/LaneConfig.astro
index dcc156e5b3c..aa0e7975614 100644
--- a/src/features/ccip/components/supported-networks/LaneConfig.astro
+++ b/src/features/ccip/components/supported-networks/LaneConfig.astro
@@ -50,7 +50,7 @@ const display = (bigNum: string, decimals: number = 18) => {
   return utils.commify(numberWithoutDecimals)
 }
 
-const formatTime = (seconds: number) => {
+export const formatTime = (seconds: number) => {
   const minute = 60
   const hour = 3600 // 60*60
 
@@ -165,6 +165,8 @@ if (supportedTokens) {
     .filter((item): item is TokenExtraInfo => item !== null && item.token !== undefined)
     .sort((itemA, itemB) => itemA.token.localeCompare(itemB.token, undefined, { sensitivity: "base" }))
 }
+
+// const filteredTokens = tokensWithExtraInfo
 ---
 
 <table>
@@ -243,7 +245,7 @@ if (supportedTokens) {
         <p>
           <strong>Transferable tokens</strong>
         </p>
-        <TokenSearch tokens={tokensWithExtraInfo} client:load />
+        <TokenSearch tokens={tokensWithExtraInfo} sourceChain={sourceChain} client:load />
         {/* <div style="overflow-x: auto;width: 100%">
           <table>
             <thead>
diff --git a/src/features/ccip/components/supported-networks/SimplePreactAddress.tsx b/src/features/ccip/components/supported-networks/SimplePreactAddress.tsx
new file mode 100644
index 00000000000..eeb56535497
--- /dev/null
+++ b/src/features/ccip/components/supported-networks/SimplePreactAddress.tsx
@@ -0,0 +1,53 @@
+/** @jsxImportSource preact */
+import { useState } from "preact/hooks"
+
+export const SimplePreactAddress = ({ contractUrl, address, endLength = 6, urlClass = "", urlId = "" }) => {
+  address = address || contractUrl.split("/").pop()
+  const [isCopied, setIsCopied] = useState(false)
+
+  const containerStyle = {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "--space-1x",
+    wordBreak: "break-word",
+  }
+
+  const linkStyle = {
+    background: "#f0f0f0",
+    padding: "1px 5px",
+    borderRadius: "5px",
+    wordBreak: "break-word",
+  }
+
+  const buttonStyle = {
+    background: "none",
+    border: "none",
+    cursor: "pointer",
+    height: "16px",
+    width: "16px",
+    minWidth: "12px",
+  }
+
+  const formattedAddress =
+    endLength && address ? `${address.slice(0, endLength + 2)}...${address.slice(-endLength)}` : address
+
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(address)
+    setIsCopied(true)
+    setTimeout(() => setIsCopied(false), 2000)
+  }
+
+  return (
+    <span className={`addressContainer ${urlClass}`} id={urlId} style={containerStyle}>
+      <a href={contractUrl} title={address} style={linkStyle}>
+        {formattedAddress}
+      </a>
+      <button className="copyBtn" style={buttonStyle} onClick={handleCopy}>
+        <img
+          src={isCopied ? "/assets/icons/checkCircleIconGrey.svg" : "/assets/icons/copyIcon.svg"}
+          alt={isCopied ? "Copied" : "Copy to clipboard"}
+        />
+      </button>
+    </span>
+  )
+}
diff --git a/src/features/ccip/components/supported-networks/TokenSearch.tsx b/src/features/ccip/components/supported-networks/TokenSearch.tsx
index 93f1fda6262..ce2c21a7b87 100644
--- a/src/features/ccip/components/supported-networks/TokenSearch.tsx
+++ b/src/features/ccip/components/supported-networks/TokenSearch.tsx
@@ -3,6 +3,9 @@ import { useState } from "preact/hooks"
 import { FunctionComponent } from "preact"
 import BigNumber from "bignumber.js"
 import { utils } from "ethers"
+import { SupportedChain } from "@config"
+import { getExplorer, getExplorerAddressUrl } from "@features/utils"
+import { SimplePreactAddress } from "./SimplePreactAddress"
 import { SimplePreactTooltip } from "./SimplePreactTooltip"
 
 interface TokenExtraInfo {
@@ -19,6 +22,7 @@ interface TokenExtraInfo {
 
 interface TokenSearchProps {
   tokens: TokenExtraInfo[]
+  sourceChain: SupportedChain
 }
 
 const normalizeNumber = (bigNum: BigNumber, decimals = 18) => {
@@ -77,10 +81,14 @@ const displayRate = (capacity: string, rate: string, symbol: string, decimals =
   }
 }
 
-const TokenSearch: FunctionComponent<TokenSearchProps> = ({ tokens }) => {
+const TokenSearch: FunctionComponent<TokenSearchProps> = ({ tokens, sourceChain }) => {
   const [searchTerm, setSearchTerm] = useState("")
   const [filteredTokens, setFilteredTokens] = useState(tokens)
 
+  const explorerUrl = getExplorer(sourceChain)
+
+  if (!explorerUrl) throw Error(`Explorer url not found for ${sourceChain}`)
+
   const handleInput = (event) => {
     const newSearchTerm = event.currentTarget.value.toLowerCase()
     setSearchTerm(newSearchTerm)
@@ -136,7 +144,13 @@ const TokenSearch: FunctionComponent<TokenSearchProps> = ({ tokens }) => {
                 filteredTokens.map((token) => (
                   <tr>
                     <td style={{ whiteSpace: "nowrap" }}>{token.token}</td>
-                    <td style={{ whiteSpace: "nowrap" }}>{token.address}</td>
+                    <td style={{ whiteSpace: "nowrap" }}>
+                      <SimplePreactAddress
+                        address={token.address}
+                        contractUrl={getExplorerAddressUrl(explorerUrl)(token.address)}
+                        endLength={4}
+                      />
+                    </td>
                     <td style={{ whiteSpace: "nowrap" }}>{token.decimals}</td>
                     <td style={{ whiteSpace: "nowrap" }}>{token.poolMechanism}</td>
                     <td style={{ whiteSpace: "nowrap" }}>

From a71beb0589550550c9671088d7518d0960f68b35 Mon Sep 17 00:00:00 2001
From: Karim <98668332+khadni@users.noreply.github.com>
Date: Thu, 6 Jun 2024 11:05:49 -0500
Subject: [PATCH 3/7] Improve Search input & tooltip

---
 .../supported-networks/LaneConfig.astro       |  82 +-------
 .../SimplePreactTooltip.tsx                   |   5 +-
 .../supported-networks/TokenSearch.tsx        | 197 ++++++++++--------
 3 files changed, 109 insertions(+), 175 deletions(-)

diff --git a/src/features/ccip/components/supported-networks/LaneConfig.astro b/src/features/ccip/components/supported-networks/LaneConfig.astro
index aa0e7975614..db060c337c4 100644
--- a/src/features/ccip/components/supported-networks/LaneConfig.astro
+++ b/src/features/ccip/components/supported-networks/LaneConfig.astro
@@ -50,7 +50,7 @@ const display = (bigNum: string, decimals: number = 18) => {
   return utils.commify(numberWithoutDecimals)
 }
 
-export const formatTime = (seconds: number) => {
+const formatTime = (seconds: number) => {
   const minute = 60
   const hour = 3600 // 60*60
 
@@ -165,8 +165,6 @@ if (supportedTokens) {
     .filter((item): item is TokenExtraInfo => item !== null && item.token !== undefined)
     .sort((itemA, itemB) => itemA.token.localeCompare(itemB.token, undefined, { sensitivity: "base" }))
 }
-
-// const filteredTokens = tokensWithExtraInfo
 ---
 
 <table>
@@ -246,84 +244,6 @@ if (supportedTokens) {
           <strong>Transferable tokens</strong>
         </p>
         <TokenSearch tokens={tokensWithExtraInfo} sourceChain={sourceChain} client:load />
-        {/* <div style="overflow-x: auto;width: 100%">
-          <table>
-            <thead>
-              <tr>
-                <th>Symbol</th>
-                <th>Token&nbsp;Address</th>
-                <th>Decimals</th>
-                <th>
-                  <Tooltip
-                    tip="Token pool mechanism: Lock & Mint, Burn & Mint, Lock & Unlock, Burn & Unlock"
-                    label="Mechanism"
-                    style={{ marginTop: "0", minWidth: "7em", maxWidth: "10em" }}
-                    labelStyle={{ fontWeight: "bold", whiteSpace: "nowrap" }}
-                    client:load
-                  />
-                </th>
-                <th>
-                  <Tooltip
-                    tip="Maximum amount per transaction"
-                    label="Rate Limit Capacity"
-                    style={{ marginTop: "0", minWidth: "11em", maxWidth: "15em" }}
-                    labelStyle={{ fontWeight: "bold", whiteSpace: "nowrap" }}
-                    client:load
-                  />
-                </th>
-                <th>
-                  <Tooltip
-                    tip="Rate at which available capacity is replenished"
-                    label="Rate Limit Refill Rate"
-                    style={{ marginTop: "0", minWidth: "12em", maxWidth: "15em" }}
-                    labelStyle={{ fontWeight: "bold", whiteSpace: "nowrap" }}
-                    client:load
-                  />
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              {filteredTokens.map((token) => {
-                return (
-                  <tr>
-                    <td style={{ whiteSpace: "nowrap" }}>{token.token}</td>
-                    <td style={{ whiteSpace: "nowrap" }}>
-                      <Address contractUrl={getExplorerAddressUrl(explorerUrl)(token.address)} endLength={4} />
-                    </td>
-                    <td style={{ whiteSpace: "nowrap" }}>{token.decimals}</td>
-                    <td style={{ whiteSpace: "nowrap" }}>{token.poolMechanism}</td>
-                    <td style={{ whiteSpace: "nowrap" }}>
-                      {token.rateLimiterConfig?.isEnabled
-                        ? display(token.rateLimiterConfig.capacity, token.decimals) + " " + token.token
-                        : "N/A"}
-                    </td>
-                    <td>
-                      {token.rateLimiterConfig?.isEnabled
-                        ? (() => {
-                            const { rateSecond, maxThroughput } = displayRate(
-                              token.rateLimiterConfig.capacity,
-                              token.rateLimiterConfig.rate,
-                              token.token,
-                              token.decimals
-                            )
-
-                            return (
-                              <Tooltip
-                                tip={maxThroughput}
-                                label={rateSecond}
-                                style={{ marginTop: "0", whiteSpace: "nowrap", minWidth: "15em", maxWidth: "15em" }}
-                                client:load
-                              />
-                            )
-                          })()
-                        : "N/A"}
-                    </td>
-                  </tr>
-                )
-              })}
-            </tbody>
-          </table>
-        </div> */}
       </>
     </>
   ) : (
diff --git a/src/features/ccip/components/supported-networks/SimplePreactTooltip.tsx b/src/features/ccip/components/supported-networks/SimplePreactTooltip.tsx
index b1cea277fc1..8a550f7d979 100644
--- a/src/features/ccip/components/supported-networks/SimplePreactTooltip.tsx
+++ b/src/features/ccip/components/supported-networks/SimplePreactTooltip.tsx
@@ -31,9 +31,7 @@ export const SimplePreactTooltip = ({
     color: "var(--color-text-secondary)",
     padding: "8px 12px",
     borderRadius: "4px",
-    bottom: "110%",
-    left: "50%",
-    transform: "translateX(-50%) translateY(0)",
+    right: "20%",
     whiteSpace: "normal",
     display: isVisible ? "block" : "none",
     fontSize: "12px",
@@ -41,6 +39,7 @@ export const SimplePreactTooltip = ({
     maxWidth: "200px",
     textAlign: "center",
     boxShadow: "0 2px 4px rgba(0,0,0,0.2)",
+    zIndex: "1000",
     ...tooltipStyle,
   }
 
diff --git a/src/features/ccip/components/supported-networks/TokenSearch.tsx b/src/features/ccip/components/supported-networks/TokenSearch.tsx
index ce2c21a7b87..fc47ae9f6bc 100644
--- a/src/features/ccip/components/supported-networks/TokenSearch.tsx
+++ b/src/features/ccip/components/supported-networks/TokenSearch.tsx
@@ -98,100 +98,115 @@ const TokenSearch: FunctionComponent<TokenSearchProps> = ({ tokens, sourceChain
 
   return (
     <>
-      <input type="text" placeholder="Search tokens..." value={searchTerm} onInput={handleInput} />
-      <div style="overflow: visible; width: 100%; position: relative; z-index: 1;">
-        <div style="overflow-x: auto;">
-          <table>
-            <thead>
-              <tr>
-                <th>Symbol</th>
-                <th>Token Address</th>
-                <th>Decimals</th>
-                <th>
-                  <div style="position: relative;">
-                    <SimplePreactTooltip
-                      label="Mechanism"
-                      tip="Token pool mechanism: Lock & Mint, Burn & Mint, Lock & Unlock, Burn & Unlock"
-                      labelStyle={{ fontWeight: "bold", whiteSpace: "nowrap" }}
-                      tooltipStyle={{ marginTop: "8px", minWidth: "200px" }}
-                    />
-                  </div>
-                </th>
-                <th>
-                  <div style="position: relative;">
-                    <SimplePreactTooltip
-                      label="Rate Limit Capacity"
-                      tip="Maximum amount per transaction"
-                      labelStyle={{ fontWeight: "bold", whiteSpace: "nowrap" }}
-                      tooltipStyle={{ marginTop: "8px", minWidth: "200px" }}
-                    />
-                  </div>
-                </th>
-                <th>
-                  <div style="position: relative;">
-                    <SimplePreactTooltip
-                      label="Rate Limit Refill Rate"
-                      tip="Rate at which available capacity is replenished"
-                      labelStyle={{ fontWeight: "bold", whiteSpace: "nowrap" }}
-                      tooltipStyle={{ marginTop: "8px", minWidth: "200px" }}
-                    />
-                  </div>
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              {filteredTokens.length > 0 ? (
-                filteredTokens.map((token) => (
-                  <tr>
-                    <td style={{ whiteSpace: "nowrap" }}>{token.token}</td>
-                    <td style={{ whiteSpace: "nowrap" }}>
-                      <SimplePreactAddress
-                        address={token.address}
-                        contractUrl={getExplorerAddressUrl(explorerUrl)(token.address)}
-                        endLength={4}
-                      />
-                    </td>
-                    <td style={{ whiteSpace: "nowrap" }}>{token.decimals}</td>
-                    <td style={{ whiteSpace: "nowrap" }}>{token.poolMechanism}</td>
-                    <td style={{ whiteSpace: "nowrap" }}>
-                      {token.rateLimiterConfig?.isEnabled
-                        ? display(token.rateLimiterConfig.capacity, token.decimals) + " " + token.token
-                        : "N/A"}
-                    </td>
-                    <td>
-                      {token.rateLimiterConfig?.isEnabled
-                        ? (() => {
-                            const { rateSecond, maxThroughput } = displayRate(
-                              token.rateLimiterConfig.capacity,
-                              token.rateLimiterConfig.rate,
-                              token.token,
-                              token.decimals
-                            )
-                            return (
-                              <div style={{ position: "relative" }}>
-                                <SimplePreactTooltip
-                                  label={rateSecond}
-                                  tip={maxThroughput}
-                                  labelStyle={{ fontWeight: "normal", whiteSpace: "nowrap" }}
-                                  tooltipStyle={{ marginTop: "8px", minWidth: "200px" }}
-                                />
-                              </div>
-                            )
-                          })()
-                        : "N/A"}
-                    </td>
-                  </tr>
-                ))
-              ) : (
+      <input
+        type="text"
+        placeholder="Search tokens..."
+        value={searchTerm}
+        onInput={handleInput}
+        style={{
+          height: "42px",
+          border: "var(--border-width-primary) solid var(--color-border-primary)",
+          backgroundImage:
+            "url(https://smartcontract.imgix.net/icons/searchIcon_blue_noborder.svg?auto=compress%2Cformat)",
+          backgroundRepeat: "no-repeat",
+          backgroundPosition: "left var(--space-2x) top 50%",
+          paddingLeft: "var(--space-8x)",
+          backgroundSize: "16px",
+          maxWidth: "250px",
+        }}
+      />
+
+      <div style="overflow: auto;">
+        <table>
+          <thead>
+            <tr>
+              <th>Symbol</th>
+              <th>Token Address</th>
+              <th>Decimals</th>
+              <th>
+                <div style="position: relative;">
+                  <SimplePreactTooltip
+                    label="Mechanism"
+                    tip="Token pool mechanism: Lock & Mint, Burn & Mint, Lock & Unlock, Burn & Unlock"
+                    labelStyle={{ fontWeight: "bold", whiteSpace: "nowrap" }}
+                    tooltipStyle={{ marginTop: "8px", minWidth: "200px" }}
+                  />
+                </div>
+              </th>
+              <th>
+                <div style="position: relative;">
+                  <SimplePreactTooltip
+                    label="Rate Limit Capacity"
+                    tip="Maximum amount per transaction"
+                    labelStyle={{ fontWeight: "bold", whiteSpace: "nowrap" }}
+                    tooltipStyle={{ marginTop: "8px", minWidth: "200px" }}
+                  />
+                </div>
+              </th>
+              <th>
+                <div style="position: relative;">
+                  <SimplePreactTooltip
+                    label="Rate Limit Refill Rate"
+                    tip="Rate at which available capacity is replenished"
+                    labelStyle={{ fontWeight: "bold", whiteSpace: "nowrap" }}
+                    tooltipStyle={{ marginTop: "8px", minWidth: "200px" }}
+                  />
+                </div>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {filteredTokens.length > 0 ? (
+              filteredTokens.map((token) => (
                 <tr>
-                  <td colSpan={6} style={{ textAlign: "center" }}>
-                    No token found
+                  <td style={{ whiteSpace: "nowrap" }}>{token.token}</td>
+                  <td style={{ whiteSpace: "nowrap" }}>
+                    <SimplePreactAddress
+                      address={token.address}
+                      contractUrl={getExplorerAddressUrl(explorerUrl)(token.address)}
+                      endLength={4}
+                    />
+                  </td>
+                  <td style={{ whiteSpace: "nowrap" }}>{token.decimals}</td>
+                  <td style={{ whiteSpace: "nowrap" }}>{token.poolMechanism}</td>
+                  <td style={{ whiteSpace: "nowrap" }}>
+                    {token.rateLimiterConfig?.isEnabled
+                      ? display(token.rateLimiterConfig.capacity, token.decimals) + " " + token.token
+                      : "N/A"}
+                  </td>
+                  <td>
+                    {token.rateLimiterConfig?.isEnabled
+                      ? (() => {
+                          const { rateSecond, maxThroughput } = displayRate(
+                            token.rateLimiterConfig.capacity,
+                            token.rateLimiterConfig.rate,
+                            token.token,
+                            token.decimals
+                          )
+                          return (
+                            <div style={{ position: "relative" }}>
+                              <SimplePreactTooltip
+                                label={rateSecond}
+                                tip={maxThroughput}
+                                labelStyle={{ fontWeight: "normal", whiteSpace: "nowrap" }}
+                                tooltipStyle={{ marginTop: "8px", minWidth: "200px", bottom: "110%" }}
+                              />
+                            </div>
+                          )
+                        })()
+                      : "N/A"}
                   </td>
                 </tr>
-              )}
-            </tbody>
-          </table>
-        </div>
+              ))
+            ) : (
+              <tr>
+                <td colSpan={6} style={{ textAlign: "center" }}>
+                  No token found
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
       </div>
     </>
   )

From f89b8cc23fbcfbb4052de7b7d50bde16a3a7b2b2 Mon Sep 17 00:00:00 2001
From: Karim <98668332+khadni@users.noreply.github.com>
Date: Thu, 6 Jun 2024 11:49:09 -0500
Subject: [PATCH 4/7] Fix max table height & allow vertical scrolling

---
 .../components/supported-networks/SimplePreactTooltip.tsx     | 2 +-
 .../ccip/components/supported-networks/TokenSearch.tsx        | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/features/ccip/components/supported-networks/SimplePreactTooltip.tsx b/src/features/ccip/components/supported-networks/SimplePreactTooltip.tsx
index 8a550f7d979..1c7c5993d07 100644
--- a/src/features/ccip/components/supported-networks/SimplePreactTooltip.tsx
+++ b/src/features/ccip/components/supported-networks/SimplePreactTooltip.tsx
@@ -22,7 +22,7 @@ export const SimplePreactTooltip = ({
     width: "0.8em",
     height: "0.8em",
     marginLeft: "2px",
-    marginRight: "5px",
+    marginRight: "4px",
   }
 
   const defaultTooltipStyle = {
diff --git a/src/features/ccip/components/supported-networks/TokenSearch.tsx b/src/features/ccip/components/supported-networks/TokenSearch.tsx
index fc47ae9f6bc..33166c758a8 100644
--- a/src/features/ccip/components/supported-networks/TokenSearch.tsx
+++ b/src/features/ccip/components/supported-networks/TokenSearch.tsx
@@ -116,8 +116,8 @@ const TokenSearch: FunctionComponent<TokenSearchProps> = ({ tokens, sourceChain
         }}
       />
 
-      <div style="overflow: auto;">
-        <table>
+      <div style="overflow: auto; width: 100%; max-height: 350px;">
+        <table style="width: 100%; border-collapse: collapse;">
           <thead>
             <tr>
               <th>Symbol</th>

From f5d875b2632d15c45eea675b7b47cde01341aa66 Mon Sep 17 00:00:00 2001
From: Karim <98668332+khadni@users.noreply.github.com>
Date: Thu, 6 Jun 2024 11:54:16 -0500
Subject: [PATCH 5/7] Add sticky thead

---
 src/features/ccip/components/supported-networks/TokenSearch.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/ccip/components/supported-networks/TokenSearch.tsx b/src/features/ccip/components/supported-networks/TokenSearch.tsx
index 33166c758a8..72d7443bbf3 100644
--- a/src/features/ccip/components/supported-networks/TokenSearch.tsx
+++ b/src/features/ccip/components/supported-networks/TokenSearch.tsx
@@ -118,7 +118,7 @@ const TokenSearch: FunctionComponent<TokenSearchProps> = ({ tokens, sourceChain
 
       <div style="overflow: auto; width: 100%; max-height: 350px;">
         <table style="width: 100%; border-collapse: collapse;">
-          <thead>
+          <thead style="position: sticky; top: 0; background: white; z-index: 10;">
             <tr>
               <th>Symbol</th>
               <th>Token Address</th>

From 524e6c1b53a690c0c30407e51965704097d1e403 Mon Sep 17 00:00:00 2001
From: aelmanaa <aelmanaa@gmail.com>
Date: Fri, 7 Jun 2024 09:46:56 +0200
Subject: [PATCH 6/7] reuse existing components

---
 .../SimplePreactAddress.tsx                   | 53 -------------------
 .../supported-networks/TokenSearch.tsx        | 10 ++--
 .../Tooltip}/SimplePreactTooltip.tsx          |  0
 src/features/common/Tooltip/index.ts          |  1 +
 4 files changed, 6 insertions(+), 58 deletions(-)
 delete mode 100644 src/features/ccip/components/supported-networks/SimplePreactAddress.tsx
 rename src/features/{ccip/components/supported-networks => common/Tooltip}/SimplePreactTooltip.tsx (100%)

diff --git a/src/features/ccip/components/supported-networks/SimplePreactAddress.tsx b/src/features/ccip/components/supported-networks/SimplePreactAddress.tsx
deleted file mode 100644
index eeb56535497..00000000000
--- a/src/features/ccip/components/supported-networks/SimplePreactAddress.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-/** @jsxImportSource preact */
-import { useState } from "preact/hooks"
-
-export const SimplePreactAddress = ({ contractUrl, address, endLength = 6, urlClass = "", urlId = "" }) => {
-  address = address || contractUrl.split("/").pop()
-  const [isCopied, setIsCopied] = useState(false)
-
-  const containerStyle = {
-    display: "inline-flex",
-    alignItems: "center",
-    gap: "--space-1x",
-    wordBreak: "break-word",
-  }
-
-  const linkStyle = {
-    background: "#f0f0f0",
-    padding: "1px 5px",
-    borderRadius: "5px",
-    wordBreak: "break-word",
-  }
-
-  const buttonStyle = {
-    background: "none",
-    border: "none",
-    cursor: "pointer",
-    height: "16px",
-    width: "16px",
-    minWidth: "12px",
-  }
-
-  const formattedAddress =
-    endLength && address ? `${address.slice(0, endLength + 2)}...${address.slice(-endLength)}` : address
-
-  const handleCopy = async () => {
-    await navigator.clipboard.writeText(address)
-    setIsCopied(true)
-    setTimeout(() => setIsCopied(false), 2000)
-  }
-
-  return (
-    <span className={`addressContainer ${urlClass}`} id={urlId} style={containerStyle}>
-      <a href={contractUrl} title={address} style={linkStyle}>
-        {formattedAddress}
-      </a>
-      <button className="copyBtn" style={buttonStyle} onClick={handleCopy}>
-        <img
-          src={isCopied ? "/assets/icons/checkCircleIconGrey.svg" : "/assets/icons/copyIcon.svg"}
-          alt={isCopied ? "Copied" : "Copy to clipboard"}
-        />
-      </button>
-    </span>
-  )
-}
diff --git a/src/features/ccip/components/supported-networks/TokenSearch.tsx b/src/features/ccip/components/supported-networks/TokenSearch.tsx
index 72d7443bbf3..14f1e5b1723 100644
--- a/src/features/ccip/components/supported-networks/TokenSearch.tsx
+++ b/src/features/ccip/components/supported-networks/TokenSearch.tsx
@@ -1,12 +1,12 @@
 /** @jsxImportSource preact */
 import { useState } from "preact/hooks"
-import { FunctionComponent } from "preact"
+import { h, FunctionComponent } from "preact"
 import BigNumber from "bignumber.js"
 import { utils } from "ethers"
 import { SupportedChain } from "@config"
 import { getExplorer, getExplorerAddressUrl } from "@features/utils"
-import { SimplePreactAddress } from "./SimplePreactAddress"
-import { SimplePreactTooltip } from "./SimplePreactTooltip"
+import Address from "@components/Address"
+import { SimplePreactTooltip } from "@features/common/Tooltip"
 
 interface TokenExtraInfo {
   token: string
@@ -89,7 +89,7 @@ const TokenSearch: FunctionComponent<TokenSearchProps> = ({ tokens, sourceChain
 
   if (!explorerUrl) throw Error(`Explorer url not found for ${sourceChain}`)
 
-  const handleInput = (event) => {
+  const handleInput = (event: h.JSX.TargetedEvent<HTMLInputElement>) => {
     const newSearchTerm = event.currentTarget.value.toLowerCase()
     setSearchTerm(newSearchTerm)
     const newFilteredTokens = tokens.filter((token) => token.token.toLowerCase().includes(newSearchTerm))
@@ -161,7 +161,7 @@ const TokenSearch: FunctionComponent<TokenSearchProps> = ({ tokens, sourceChain
                 <tr>
                   <td style={{ whiteSpace: "nowrap" }}>{token.token}</td>
                   <td style={{ whiteSpace: "nowrap" }}>
-                    <SimplePreactAddress
+                    <Address
                       address={token.address}
                       contractUrl={getExplorerAddressUrl(explorerUrl)(token.address)}
                       endLength={4}
diff --git a/src/features/ccip/components/supported-networks/SimplePreactTooltip.tsx b/src/features/common/Tooltip/SimplePreactTooltip.tsx
similarity index 100%
rename from src/features/ccip/components/supported-networks/SimplePreactTooltip.tsx
rename to src/features/common/Tooltip/SimplePreactTooltip.tsx
diff --git a/src/features/common/Tooltip/index.ts b/src/features/common/Tooltip/index.ts
index f3f90275287..9fb535cc98c 100644
--- a/src/features/common/Tooltip/index.ts
+++ b/src/features/common/Tooltip/index.ts
@@ -1 +1,2 @@
 export * from "./Tooltip"
+export * from "./SimplePreactTooltip"

From b96e45aa4a9f60ec6b0a932fbe005e272f464cae Mon Sep 17 00:00:00 2001
From: aelmanaa <aelmanaa@gmail.com>
Date: Fri, 7 Jun 2024 09:59:20 +0200
Subject: [PATCH 7/7] nit

---
 src/features/ccip/components/supported-networks/TokenSearch.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/ccip/components/supported-networks/TokenSearch.tsx b/src/features/ccip/components/supported-networks/TokenSearch.tsx
index 14f1e5b1723..8a152facde3 100644
--- a/src/features/ccip/components/supported-networks/TokenSearch.tsx
+++ b/src/features/ccip/components/supported-networks/TokenSearch.tsx
@@ -76,7 +76,7 @@ const displayRate = (capacity: string, rate: string, symbol: string, decimals =
   const displayTime = `${formatTime(totalRefillTime)}`
 
   return {
-    rateSecond: `${rateNormalized} ${symbol}/second`,
+    rateSecond: `${utils.commify(rateNormalized)} ${symbol}/second`,
     maxThroughput: `Refills from 0 to ${utils.commify(capacityNormalized)} ${symbol} in ${displayTime}`,
   }
 }