[FEAT] API Data integration #183

markshenouda · 2025-12-16T08:23:11Z

roomote · 2025-12-17T08:32:13Z

Rooviewer Claude See task on Roo Cloud

Reviewed latest commit (fix: typecheck). Clean fix that adds .ts extensions to imports and aligns ProcessedToken.rateLimits type with the return type of getAllRateLimitsForDirection() by changing from optional properties to explicit | null union types. No new issues found. The 2 previously flagged issues remain unresolved:

rate-limit-formatter.ts: formatRateLimit hardcodes 18 decimals - tokens with different decimals (USDC, USDT, WBTC) will display incorrect values
TokenDrawer.tsx: laneConfigs useMemo includes activeTab in dependencies, causing unnecessary API calls when switching to "verifiers" tab

Previous reviews

6966823: Review #1

950bfe0: Review #2

d16d244: Review #3

b14dec0: Review #4

e86773d: Review #5

cfb7a98: Review #6

69a5b9d: Review #7

_{Mention @roomote in a comment to request specific changes to this pull request or fix all unresolved issues.}

roomote · 2025-12-17T08:35:37Z

src/components/CCIP/Drawer/LaneDrawer.tsx

+                    const formatRateLimit = (value: string | null) => {
+                      if (!value || value === "0") return "0"
+                      // Convert from wei to tokens (divide by 1e18)
+                      const numValue = BigInt(value)
+                      const formatted = Number(numValue) / 1e18
+                      return formatted.toLocaleString(undefined, { maximumFractionDigits: 2 })
+                    }


The formatRateLimit function hardcodes division by 1e18, assuming all tokens have 18 decimals. This will display incorrect values for tokens like USDC (6 decimals), USDT (6 decimals), or WBTC (8 decimals). For example, a USDC rate limit of 1000000 (1 USDC) would display as 0.000000000001 instead of 1. Consider passing the token's decimals and using 10 ** decimals for the conversion.

_{Fix it with Roo Code or mention @roomote and request a fix.}

roomote · 2025-12-17T08:36:02Z

src/components/CCIP/Drawer/TokenDrawer.tsx

+  useEffect(() => {
+    const fetchAllRateLimits = async () => {
+      const realtimeService = new RealtimeDataService()
+      const newRateLimits: Record<string, Record<string, TokenRateLimits>> = {}
+
+      for (const destinationChain of Object.keys(destinationLanes)) {
+        const source = activeTab === "outbound" ? network.key : destinationChain
+        const destination = activeTab === "outbound" ? destinationChain : network.key
+        const laneKey = `${source}-${destination}`
+
+        const response = await realtimeService.getLaneSupportedTokens(source, destination, environment)
+        if (response?.data) {
+          newRateLimits[laneKey] = response.data
+        }
+      }
+
+      setRateLimits(newRateLimits)
+    }
+
+    fetchAllRateLimits()
+  }, [network.key, destinationLanes, environment, activeTab])


This useEffect runs when activeTab changes, including when it becomes "verifiers". Since activeTab === "outbound" is false for the verifiers tab, the logic treats it as "inbound" and makes unnecessary API calls. Consider adding an early return when activeTab === "verifiers" to avoid fetching rate limits data that won't be displayed.

_{Fix it with Roo Code or mention @roomote and request a fix.}

Zelig880

One more generic comment, it does not seem like we are handling Failure of the APi request well. We log the issue, but the UI does not seem to have a "error" and may default to a value like 0 while it is incorrect.

Zelig880 · 2025-12-17T08:43:13Z

src/components/CCIP/Drawer/LaneDrawer.tsx

+      setIsLoadingRateLimits(false)
+    }
+
+    fetchRateLimits()


You are not cleaning up the Fetch Request. This is going to results in many fetch possibly being run at the same time.

Zelig880 · 2025-12-17T08:46:01Z

src/components/CCIP/Drawer/LaneDrawer.tsx

+                    // Get standard and FTF rate limits
+                    const allLimits = tokenRateLimits
+                      ? realtimeService.getAllRateLimitsForDirection(tokenRateLimits, direction)
+                      : { standard: null, ftf: null }


We are in control of the "getAllRateLimitsForDirection" so we should just return the default or whatever we want to simplify the code below. we should not have to know the "structure" to default it to null here.

Zelig880 · 2025-12-17T08:47:57Z

src/components/CCIP/Drawer/LaneDrawer.tsx

+                          {isLoadingRateLimits ? (
+                            "Loading..."
+                          ) : allLimits.standard ? (
+                            allLimits.standard.isEnabled ? (
+                              formatRateLimit(allLimits.standard.capacity)
+                            ) : (
+                              "Disabled"
+                            )
+                          ) : (
+                            <span style={{ display: "inline-flex", alignItems: "center", gap: "4px" }}>
+                              Unavailable
+                              <Tooltip
+                                label=""
+                                tip="Rate limit data is currently unavailable. You can find the Token Pool rate limit by reading the Token Pool contract directly on the relevant blockchain."
+                                style={{
+                                  display: "inline-block",
+                                  verticalAlign: "middle",
+                                }}
+                              />
+                            </span>
+                          )}


All these conditions should not happen in the UI. Please abstruct it.. If you find yourself doign an if/ifsele/else, you should abstract. It is very hard to ready

Same apply to all the i, if else present in this PR

Zelig880 · 2025-12-17T08:49:25Z

src/components/CCIP/Drawer/TokenDrawer.tsx

 }) {
  const [search, setSearch] = useState("")
-  const [inOutbound, setInOutbound] = useState<LaneFilter>(LaneFilter.Outbound)
+  const [activeTab, setActiveTab] = useState<"outbound" | "inbound" | "verifiers">("outbound")


Not sure why you went away from using a type, if required add a new one, but this does not seem correct

Zelig880 · 2025-12-17T08:50:47Z

src/components/CCIP/Drawer/TokenDrawer.tsx

+        const destination = activeTab === "outbound" ? destinationChain : network.key
+        const laneKey = `${source}-${destination}`
+
+        const response = await realtimeService.getLaneSupportedTokens(source, destination, environment)


We are using "await" in a for loop. This may slow things down. I wouls suggest to run all this in parallel.

Zelig880 · 2025-12-17T08:51:38Z

src/components/CCIP/Drawer/TokenDrawer.tsx

+  // Fetch rate limits for all lanes
+  useEffect(() => {
+    const fetchAllRateLimits = async () => {
+      const realtimeService = new RealtimeDataService()


Apply to all useEffect, const realtimeService = new RealtimeDataService(), should NOT be initiated within the useEffect, as it iw ill result in logs of memory usage and garbage collection work for no reason.

Zelig880 · 2025-12-17T08:51:59Z

src/components/CCIP/Drawer/TokenDrawer.tsx

                },
              ]}
-              onChange={(key) => setInOutbound(key as LaneFilter)}
+              onChange={(key) => setActiveTab(key as "outbound" | "inbound" | "verifiers")}


As mentioned above, please re-introduce the type

Zelig880 · 2025-12-17T08:52:55Z

src/components/CCIP/Drawer/TokenDrawer.tsx

+                  verifiers
+                    .filter((verifier) => {
+                      if (!search) return true
+                      const searchLower = search.toLowerCase()
+                      return (
+                        verifier.name.toLowerCase().includes(searchLower) ||
+                        verifier.address.toLowerCase().includes(searchLower) ||
+                        verifier.type.toLowerCase().includes(searchLower)
+                      )
+                    })
+                    .map((verifier) => (


This operation should not happen here. Make a reusable function for this!

Zelig880 · 2025-12-17T08:54:00Z

src/components/CCIP/Drawer/TokenDrawer.tsx

+                    // Get rate limit data for this lane
+                    const source = activeTab === "outbound" ? network.key : destinationChain
+                    const destination = activeTab === "outbound" ? destinationChain : network.key
+                    const laneKey = `${source}-${destination}`
+                    const laneRateLimits = rateLimits[laneKey]
+                    const tokenRateLimits = laneRateLimits?.[token.id]

-                  return (
-                    <tr key={networkDetails.name} className={tokenPaused ? "ccip-table__row--paused" : ""}>
-                      <td>
-                        <button
-                          type="button"
-                          className={`ccip-table__network-name ${tokenPaused ? "ccip-table__network-name--paused" : ""}`}
-                          onClick={() => {
-                            drawerWidthStore.set(DrawerWidth.Wide)
-                            drawerContentStore.set(() => (
-                              <LaneDrawer
-                                environment={environment}
-                                lane={laneData}
-                                sourceNetwork={network}
-                                destinationNetwork={{
-                                  name: networkDetails?.name || "",
-                                  logo: networkDetails?.logo || "",
-                                  key: destinationChain,
-                                }}
-                                inOutbound={inOutbound}
-                                explorer={network.explorer}
-                              />
-                            ))
-                          }}
-                          aria-label={`View lane details for ${networkDetails?.name}`}
-                        >
-                          <img
-                            src={networkDetails?.logo}
-                            alt={`${networkDetails?.name} blockchain logo`}
-                            className="ccip-table__logo"
-                          />
-                          {networkDetails?.name}
-                          {tokenPaused && (
-                            <span className="ccip-table__paused-badge" title="Transfers are currently paused">
-                              ⏸️
-                            </span>
-                          )}
-                        </button>
-                      </td>
-                      <td>
-                        {/* TODO: Fetch rate limits from API for both inbound and outbound
-                            GET /api/ccip/v1/lanes/by-internal-id/{source}/{destination}/supported-tokens?environment={environment}
-                            Response will contain both standard and custom rate limits per token */}
-                        Disabled
-                      </td>
-                      <td>
-                        {/* TODO: Fetch rate limits from API for both inbound and outbound
-                            Display refill rate from standard.in/out or custom.in/out based on inOutbound filter */}
-                        Disabled
-                      </td>
-                      <td>
-                        {inOutbound === LaneFilter.Outbound
-                          ? determineTokenMechanism(network.tokenPoolType, destinationPoolType)
-                          : determineTokenMechanism(destinationPoolType, network.tokenPoolType)}
-                      </td>
-                      {/* <td>
+                    const realtimeService = new RealtimeDataService()
+                    const direction = activeTab === "outbound" ? "out" : "in"
+
+                    // Get standard and FTF rate limits
+                    const allLimits = tokenRateLimits
+                      ? realtimeService.getAllRateLimitsForDirection(tokenRateLimits, direction)
+                      : { standard: null, ftf: null }
+
+                    // Token is paused if standard rate limit capacity is 0
+                    const tokenPaused = allLimits.standard?.capacity === "0"
+
+                    // Format rate limit values
+                    const formatRateLimit = (value: string | null) => {
+                      if (!value || value === "0") return "0"
+                      const numValue = BigInt(value)
+                      const formatted = Number(numValue) / 1e18
+                      return formatted.toLocaleString(undefined, { maximumFractionDigits: 2 })


This logic should not live in a the UI

Also, lots of this logic is the same as the other file, please abstract

Zelig880 · 2025-12-17T08:54:46Z

src/components/CCIP/Drawer/TokenDrawer.tsx

+                          {isLoading
+                            ? "Loading..."
+                            : allLimits.standard
+                              ? allLimits.standard.isEnabled
+                                ? formatRateLimit(allLimits.standard.capacity)
+                                : "Disabled"
+                              : "N/A"}


Other occurances of If/elseif/else

- Create custom hooks for data fetching: * useTokenRateLimits - single lane rate limits * useMultiLaneRateLimits - multiple lanes in parallel * useTokenFinality - token finality data - Add RateLimitCell component to replace complex nested ternaries - Create singleton realtimeDataService instance to avoid multiple instantiations - Add rate-limit-formatter utilities for consistent formatting - Update LaneDrawer, TokenDrawer, and TokenChainsTable to use new hooks - Add proper cleanup in useEffect hooks to prevent memory leaks Benefits: - Reduced code duplication (~133 lines removed) - Improved readability with <RateLimitCell> vs 7-level nested ternaries - Better separation of concerns - More testable code - Proper cleanup handling

* feat: add verifiers to the search * refactor: simplify verifiers mapping in Chain component * refactor: simplify verifiers mapping in CCIP components * refactor: optimize token mapping for verifiers in CCIP components

markshenouda added 6 commits December 16, 2025 09:34

update: Token details page

f8c075e

update: Lane latest data

b2b16e8

fix: lint

cd2e4d5

remove: unused console.log

5045f2d

remove: unused console.log

dcf2fa0

update: token drawer to include verifiers

69a5b9d

markshenouda self-assigned this Dec 16, 2025

markshenouda linked an issue Dec 16, 2025 that may be closed by this pull request

[CCIP] Token Details Side pannel #161

Open

2 tasks

roomote bot reviewed Dec 17, 2025

View reviewed changes

Zelig880 requested changes Dec 17, 2025

View reviewed changes

markshenouda and others added 8 commits December 17, 2025 19:51

fix: use enums for tabs

6cc53ab

refactor: cleanup Lane's table logic

e86773d

refactor: token drawer filtering logic

679c456

fix: token grid in chain page design

b14dec0

fix: the token card desgin

e3b63a3

fix: lint

d16d244

feat: add verifiers to the search (#184)

950bfe0

* feat: add verifiers to the search * refactor: simplify verifiers mapping in Chain component * refactor: simplify verifiers mapping in CCIP components * refactor: optimize token mapping for verifiers in CCIP components

Zelig880 approved these changes Dec 19, 2025

View reviewed changes

markshenouda added 2 commits December 19, 2025 10:22

feat: enhance verifiers data handling with token support

6966823

fix: typecheck

e0425bc

Zelig880 approved these changes Dec 19, 2025

View reviewed changes

Zelig880 merged commit 6a79b0b into ccip-1-7-updated Dec 19, 2025
12 of 14 checks passed

[FEAT] API Data integration #183

[FEAT] API Data integration #183

Uh oh!

Conversation

markshenouda commented Dec 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

roomote bot commented Dec 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

roomote bot Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

roomote bot Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

Zelig880 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

markshenouda commented Dec 16, 2025 •

edited

Loading

roomote bot commented Dec 17, 2025 •

edited

Loading