feat: animate execution page by yolodevz · Pull Request #701 · lifinance/widget

yolodevz · 2026-04-14T15:29:13Z

Which Linear task is linked to this PR?

Why was it implemented this way?

Explain the reasoning behind the implementation. Were there alternative approaches? Why was this solution chosen?

Visual showcase (Screenshots or Videos)

If applicable, attach screenshots, GIFs, or videos to showcase the functionality, UI changes, or bug fixes.

Checklist before requesting a review

I have performed a self-review and testing of my code.
This pull request is focused and addresses a single problem.
If this PR modifies the Widget API or adds new features that require documentation, I have updated the documentation in the public-docs repository.

github-actions · 2026-04-14T15:35:54Z

Hey! This is your new endpoint: https://c075c283.widget-animateexe.pages.dev

github-actions · 2026-04-14T15:40:56Z

Hey! This is your new endpoint: https://92a25e64.widget-animateexe.pages.dev

github-actions · 2026-04-14T16:04:16Z

Hey! This is your new endpoint: https://d64097a4.widget-animateexe.pages.dev

github-actions · 2026-04-14T16:11:55Z

Hey! This is your new endpoint: https://c1f03285.widget-animateexe.pages.dev

github-actions · 2026-04-14T16:18:09Z

Hey! This is your new endpoint: https://a40669b3.widget-animateexe.pages.dev

effie-ms · 2026-04-14T16:38:59Z

@@ -0,0 +1,11 @@
+{
+  "version": "0.0.1",


Do we need to merge this config for Claude?

Ideally we don't need it

effie-ms · 2026-04-14T16:48:27Z

@@ -1,10 +1,10 @@
 import type { RouteExtended } from '@lifi/sdk'


Same file as on Transaction details? Could we make it reusable, if so?

effie-ms · 2026-04-14T16:50:37Z

  "ignoreDependencies": ["@mui/system", "csstype"],
  "workspaces": {
+    "packages/widget": {
+      "ignore": ["src/components/TransactionStatusCard/index.ts"]


Could we drop this index file, from this config and in the directory?

effie-ms · 2026-04-14T17:02:45Z

+  route: RouteExtended,
+  toAddress?: string
+): ExecutionRow[] {
+  const { getTransactionLink } = useExplorer()


Could you check how stable this dependency is? Otherwise there is no use from this memoization :)

github-actions · 2026-04-16T23:09:50Z

Hey! This is your new endpoint: https://fac35a66.widget-animateexe.pages.dev

github-actions · 2026-04-17T10:47:00Z

Hey! This is your new endpoint: https://9251e4a1.widget-animateexe.pages.dev

vinzenzLIFI · 2026-05-08T09:36:54Z

🤖 The following is an extract from the QA Agent Analysis of this PR. Sharing these findings early so they can be addressed before QA execution begins.

Code Inspection Findings

🔴 Must address before merge

staggerQueue singleton breaks multi-widget isolation (staggerQueue.ts:2-4)
let pending, let lastFlushAt, and let timer are module-level globals — a single shared queue across all widget instances on a page. When two LiFiWidget instances execute routes concurrently, Widget B's enqueueStaggered call overwrites Widget A's pending callback. Widget A's route update is silently dropped. Needs either per-instance queue isolation or an explicit decision to drop multi-widget support with documentation.

WidgetEvent.RouteExecutionUpdated is now a breaking change for integrators
emitter.emit(RouteExecutionUpdated …) is now called inside enqueueStaggered, so intermediate events fired within the 1200 ms window are silently dropped. Pre-PR: one event per SDK callback. Post-PR: at most one event per 1200 ms, with intermediate ones lost. Integrators tracking per-step progress via this event will silently stop receiving updates — they won't notice until production. Needs a CHANGELOG entry or migration note before merge.

.claude/launch.json accidentally committed
VS Code debug config was included in the diff. Reviewer already flagged it with no response yet — worth resolving before further review rounds.

🟡 Should fix

getTransactionLink missing useCallback defeats memoization (useExplorer.ts:60, StepActionRow.tsx)
getTransactionLink is defined inline without useCallback, producing a new function reference on every render. useMemo in useExecutionRows lists it as a dependency, so the memo recomputes on every render. On the transaction page with active timer re-renders this means continuous row re-derivation. Flagged in an open review thread — hasn't been resolved yet.

🔵 Worth noting

visibility: hidden in StaggeredRevealTypography has no timeout fallback (StaggeredRevealTypography.tsx:36)
Text is invisible until document.fonts.ready resolves. The promise does resolve on font failure in all modern browsers, so this is safe in practice — but a code comment explaining the assumption would help future readers.

Index-based AnimatePresence keys on route restart (ChecklistSection.tsx:59)
key={\row-${index}`}` is stable for append-only growth but on a route restart, FAILED rows are removed and then re-added at the same indices — producing spurious enter animations. Low visual impact, easy to fix with stable IDs derived from action type or txHash.

Full test plan including 19 test cases, automation guide, and exit criteria available on request.

github-actions · 2026-05-27T09:04:14Z

Hey! This is your new endpoint: https://d29bc025.widget-animateexe.pages.dev

github-actions · 2026-05-28T17:35:07Z

Hey! This is your new endpoint: https://c4db33d0.widget-animateexe.pages.dev

github-actions · 2026-05-28T20:28:07Z

Hey! This is your new endpoint: https://29965eff.widget-animateexe.pages.dev

github-actions · 2026-05-28T20:33:06Z

Hey! This is your new endpoint: https://fd5b14b8.widget-animateexe.pages.dev

effie-ms · 2026-05-29T09:52:11Z

-    if (!routeExecution) {
+  const enqueueStaggered = (task: () => void): void => {
+    const q = staggerRef.current
+    q.next = task


Could you confirm we are not losing any events when pacing updates on UI?

effie-ms · 2026-05-29T10:12:11Z

      return
    }
+    q.scheduled = true
+    setTimeout(


Cleanup for this timeout would be nice :)

effie-ms · 2026-05-29T10:17:57Z

+        staggerRef.current.lastAt = Date.now()
+        run()
+      },
+      q.lastAt + STAGGER_INTERVAL - Date.now()


With zero q.lastAt, it will be negative - maybe Math.max(0, ...) would make it a bit cleaner.

effie-ms · 2026-05-29T11:14:31Z

  const queryClient = useQueryClient()
  const { account } = useAccount()
  const resumedAfterMount = useRef(false)
+  const staggerRef = useRef({


I think it would be nice if we could fully decouple staggering from the logic of receiving execution data from SDK - it's already pretty complicated.

effie-ms · 2026-05-29T11:19:10Z

+          step.execution.status = 'PENDING'
+          for (const action of step.execution.actions ?? []) {
+            if (action.status === 'FAILED') {
+              action.status = 'PENDING'


Not sure if we should updateRoute(reset) here - let's see if he could omit it when decoupling the animation.

effie-ms · 2026-05-29T11:20:17Z

@@ -0,0 +1,12 @@
+import type { StorybookConfig } from '@storybook/react-vite'


If we are not going to support a storybook for the repo - I would be nice to drop it.

effie-ms · 2026-05-29T11:23:19Z

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react'


Could you move this type inline? We don't really follow the convention of creating separate types.tsx files for components. Just for consistency.

effie-ms · 2026-05-29T11:24:23Z

@@ -0,0 +1,2 @@
+export { ExecutionStatusCard } from './ExecutionStatusCard.js'


The components can be exported right from the files, without this barrel file.

effie-ms · 2026-05-29T11:49:03Z

  deleteRoute: () => void
 }

+/** Action buttons shown when route execution fails: retry, delete, and optional contact support. */


Subjective: I think it's nice to have comments around complex logic, trade-offs, etc. Not sure they are necessary when the code is rather self-documenting. Personally, I would clean them up and left only the necessary ones (e.g. for animations, etc.) Otherwise it ends up being too many comments to read (and support) 😅

effie-ms · 2026-05-29T11:52:49Z

+  return (
+    <Box
+      sx={{
+        position: 'relative',


Until we moved away from MUI, these 3+ property styles could be moved to a style file (StatusIcon.style.tsx). Just a suggestion to keep in mind.

yolodevz requested a review from effie-ms April 14, 2026 15:29

yolodevz changed the base branch from main to feat-checkout April 14, 2026 15:30

effie-ms added the testing label Apr 14, 2026

yolodevz force-pushed the animate-execution-page branch from 77dcdad to 7c77db2 Compare April 14, 2026 16:02

yolodevz force-pushed the animate-execution-page branch from 7c77db2 to 2dd02d4 Compare April 14, 2026 16:10

effie-ms reviewed Apr 14, 2026

View reviewed changes

Comment thread package.json

effie-ms reviewed Apr 14, 2026

View reviewed changes

feat: animate execution page

2aa86a0

yolodevz force-pushed the animate-execution-page branch from 10f6162 to 2aa86a0 Compare May 28, 2026 20:31

effie-ms reviewed May 29, 2026

View reviewed changes

		@@ -1,10 +1,10 @@
		import type { RouteExtended } from '@lifi/sdk'

		@@ -0,0 +1,12 @@
		import type { StorybookConfig } from '@storybook/react-vite'

		@@ -0,0 +1,2 @@
		export { ExecutionStatusCard } from './ExecutionStatusCard.js'

Conversation

yolodevz commented Apr 14, 2026

Which Linear task is linked to this PR?

Why was it implemented this way?

Visual showcase (Screenshots or Videos)

Checklist before requesting a review

Uh oh!

github-actions Bot commented Apr 14, 2026

Uh oh!

github-actions Bot commented Apr 14, 2026

Uh oh!

github-actions Bot commented Apr 14, 2026

Uh oh!

github-actions Bot commented Apr 14, 2026

Uh oh!

github-actions Bot commented Apr 14, 2026

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!

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Apr 16, 2026

Uh oh!

github-actions Bot commented Apr 17, 2026

Uh oh!

vinzenzLIFI commented May 8, 2026

Code Inspection Findings

🔴 Must address before merge

🟡 Should fix

🔵 Worth noting

Uh oh!

github-actions Bot commented May 27, 2026

Uh oh!

github-actions Bot commented May 28, 2026

Uh oh!

github-actions Bot commented May 28, 2026

Uh oh!

github-actions Bot commented May 28, 2026

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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants