feat: build ProcessStepper component with 4 real escrow lifecycle steps

[Oluwatos94]

Closes #180

Description

Replaces the placeholder ProcessStepper (4 identical Lorem Ipsum items) with the
real escrow lifecycle stepper: proper labels, descriptions, lifecycle icons, and
active/completed state driven by the current step.

Change

• Real step definitions mapped to escrow status:
  1. Escrow deployed — pending_signature
  2. Deposit paid — funded+
  3. Deposit blocked — active
  4. Deposit released — completed
• Lifecycle icons (lucide-react): house, banknote, document-lock, hand-coins
• Completed steps show a green checkmark; the current step pulses (green)
• Vertical connector line that turns green for completed segments
• Accessibility: aria-current="step" + prefers-reduced-motion opt-out
• Kept the existing currentStep: 1 | 2 | 3 | 4 prop — no consumer changes needed

Testing

Verified all four states in the UI:

• /hotel/1/escrow/create → step 1
• /hotel/1/escrow/:id?status=paid|blocked|released → steps 2–4

Summary by CodeRabbit

Release Notes

• New Features

  • Enhanced process visualization with step descriptions, icons, and improved visual state indicators
  • Updated process step layout with an active marker, connector behavior, and reduced-motion support

• Bug Fixes

  • Improved error message handling by sanitizing/normalizing fallback text for more consistent user feedback

[coderabbitai]

Warning

Review limit reached

@Oluwatos94, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 52 minutes and 53 seconds. Learn how PR review limits work.

Your organization has run out of usage credits. Purchase more credits in the billing tab to continue.

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based credits.

🚦 How do rate limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan refill rate.

For paid Pro and Pro+ PR reviews, CodeRabbit uses rolling per-developer review limits. Reviews become available again as older review attempts age out of the rolling limit window.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 42edb809-23e5-4c1e-b84c-92a25fbff98a

📥 Commits

Reviewing files that changed from the base of the PR and between 079ae71 and 97da28e.

📒 Files selected for processing (1)

• apps/frontend/src/lib/trustlesswork-errors.ts

📝 Walkthrough

Walkthrough

ProcessStepper gains a structured STEPS model with titles, descriptions, and lucide icons; its rendering loop is rewritten to compute active/complete/pending states, inject pulse keyframes with reduced-motion support, show icon-based markers with connector lines, and display per-step descriptions. Separately, getErrorMessages is updated to trim and validate fallback strings, defaulting to "Something went wrong." when empty.

Changes

ProcessStepper and Error Handling Updates

Layer / File(s)	Summary
ProcessStepper step model, rendering, and descriptions apps/frontend/src/components/escrow/ProcessStepper.tsx	Replaces the minimal STEPS array with a rich tuple containing step, title, description, and an Icon per step; rewrites the rendering loop to compute active/complete/pending state, inject pulse keyframes with reduced-motion support, render icon-based markers and optional connector lines with aria-current, and display per-step description text instead of status labels.
Error message fallback validation apps/frontend/src/lib/trustlesswork-errors.ts	Updates getErrorMessages to compute a validated safeFallback by trimming the provided fallback parameter and defaulting to "Something went wrong." when the trimmed value is empty, then uses this validated fallback in both the array-handling path and the final return statement.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• safetrustcr/dApp-SafeTrust#207: The ProcessStepper updates directly affect the sidebar stepper used by the escrow detail page component.
• safetrustcr/dApp-SafeTrust#214: Both PRs substantially rework ProcessStepper's step data model and rendering logic.

Suggested reviewers

• sotoJ24

Poem

🐇 Four steps hop along the escrow trail,
Each icon gleams — no Lorem to assail!
A pulse blinks bright for the active stage,
A checkmark crowns each completed page.
Errors now graceful when messages fail—
The rabbit cheers: the stepper sails! 🎉

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Out of Scope Changes check	❓ Inconclusive	One minor out-of-scope change detected: modifications to trustlesswork-errors.ts for fallback string trimming/validation are not related to ProcessStepper functionality or issue #180 requirements.	Clarify if the trustlesswork-errors.ts changes are necessary for ProcessStepper operation or should be moved to a separate PR.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'feat: build ProcessStepper component with 4 real escrow lifecycle steps' accurately and specifically describes the main change—replacing a placeholder stepper with a functional component displaying real escrow lifecycle steps.
Linked Issues check	✅ Passed	The PR successfully implements all requirements from issue #180: four step definitions mapped to escrow statuses, icons for each step, completed/active state indicators, pulsing animation for active steps, and vertical connector lines with proper styling.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[Oluwatos94]

Hey @sotoJ24, this PR is ready for review.

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@apps/frontend/src/lib/trustlesswork-errors.ts`:
- Around line 14-17: The getErrorMessages function returns [fallback] without
validating that the fallback parameter is non-empty, which violates its
non-empty string array contract. When input is falsy (line 14-17), validate that
fallback is not empty or whitespace-only before returning it; if it is empty or
contains only whitespace, return a sensible default error message instead. Apply
the same validation logic to the other location in the function (lines 46-47)
where fallback is returned to ensure consistency and uphold the guaranteed
non-empty invariant throughout.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 3d18db27-edd2-4cd0-b150-e6e26ef13be4

📥 Commits

Reviewing files that changed from the base of the PR and between 63e1e68 and ce3cd91.

📒 Files selected for processing (2)

• apps/frontend/src/components/escrow/ProcessStepper.tsx
• apps/frontend/src/lib/trustlesswork-errors.ts

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@apps/frontend/src/lib/trustlesswork-errors.ts`:
- Around line 22-25: The filter logic for array sources checks only the type of
items as strings but does not validate that they contain actual non-whitespace
content, allowing whitespace-only strings to pass through. Additionally, at
other locations in the function (around lines 33, 37, and 46), validation is
performed using `.trim()` but the original untrimmed value is returned instead
of the trimmed version. Fix both issues by: (1) updating the array filter to
check both that the item is a string AND that it has non-whitespace content
after trimming, and (2) ensuring that wherever `.trim()` is used for validation,
the trimmed value is what gets returned so that blank-looking messages do not
reach downstream code.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 34e75f2c-ae76-42de-885b-b4b8f0ebec86

📥 Commits

Reviewing files that changed from the base of the PR and between ce3cd91 and 079ae71.

📒 Files selected for processing (1)

• apps/frontend/src/lib/trustlesswork-errors.ts

[Oluwatos94]

hi @sotoJ24, ready to be merged. Thanks!