Skip to content

Escrow page improvements#555

Merged
andreip136 merged 9 commits into
mainfrom
feat/553-escrow-page-improvements
Jul 6, 2026
Merged

Escrow page improvements#555
andreip136 merged 9 commits into
mainfrom
feat/553-escrow-page-improvements

Conversation

@andreip136

@andreip136 andreip136 commented Jul 2, 2026

Copy link
Copy Markdown
Contributor

Fixes #553.

Merge https://github.com/oceanprotocol/incentive-backend/pull/166 first

Changes proposed in this PR:

Summary by CodeRabbit

  • New Features
    • Show node identity (peer ID and node-friendly name) in escrow/authorization headers with copy-to-clipboard for peer and ETH addresses.
    • Enrich escrow spender info with node ID/name when available.
  • UI Improvements
    • Updated job-related wording (“Active jobs”, “Max concurrent jobs”, “Locked for running jobs”) and applied tighter small input sizing.
    • Redesigned “Move funds” to use unified validation/state and improved layout spacing/empty-state messaging.
  • Bug Fixes
    • Improved node-consumer resolution logic when creating authorizations.

@vercel

vercel Bot commented Jul 2, 2026

Copy link
Copy Markdown
Contributor

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
nodes-dashboard Ready Ready Preview, Comment Jul 6, 2026 2:57pm

Request Review

@coderabbitai

coderabbitai Bot commented Jul 2, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

Warning

Review limit reached

@andreip136, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 43 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

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 reviews.

How do review limits work?

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

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 1bd58d85-2a29-417b-bd89-9c510e2cd598

📥 Commits

Reviewing files that changed from the base of the PR and between f5e54c1 and c7cff0c.

📒 Files selected for processing (1)
  • src/lib/use-escrow-data.ts
📝 Walkthrough

Walkthrough

This PR updates escrow management UI so authorization views display node identity, the create/edit flows use node-aware labels and address resolution, and the token panel uses a shared move-funds amount field with updated copy and status labels.

Changes

Escrow Node Identity and UI Updates

Layer / File(s) Summary
Node type and data fetching for spender node info
src/types/nodes.ts, src/lib/use-escrow-data.ts
Node gains optional address; use-escrow-data resolves spender wallets to node metadata and attaches nodeId/nodeFriendlyName to spenders.
Create/Edit authorization modal wiring
src/components/escrow/create-authorization-modal.tsx, src/components/escrow/edit-authorization-modal.tsx, src/components/escrow/authorization-form.tsx, src/components/button/copy-button.tsx
resolveConsumer prefers node.address; node and lock-count labels change; inputs get size="sm"; the edit modal shows node header content plus copyable peer ID and ETH address rows.
Escrow token panel header, labels, and move-funds refactor
src/components/escrow/escrow-token-panel.tsx, src/components/escrow/escrow-token-panel.module.css
The token panel renders node-aware authorization details, renames lock/balance labels, removes the empty-state description, and replaces the old move-funds form setup with shared amount/error state and updated layout styles.

Estimated code review effort: 3 (Moderate) | ~25 minutes

Possibly related PRs

Suggested reviewers: alexcos20, bogdanfazakas, mihaisc, giurgiur99, ndrpp

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 inconclusive)

Check name Status Explanation Resolution
Title check ❓ Inconclusive The title is related to the escrow changes but too generic to clearly convey the main user-facing update. Use a concise title that names the primary change, such as 'Update escrow authorization UI/UX'.
Linked Issues check ❓ Inconclusive Most requested escrow UI updates appear implemented, but the summary doesn't confirm the new 'No authorizations' empty-state title. Verify the empty-state copy across both contract variants and ensure it reads 'No authorizations'.
✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Out of Scope Changes check ✅ Passed The changes stay within the escrow page and related node/address display, form, and layout updates described by the issue.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/553-escrow-page-improvements

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

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

@andreip136 andreip136 marked this pull request as ready for review July 2, 2026 21:06

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
src/components/escrow/escrow-token-panel.tsx (1)

392-393: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Empty-state text doesn't match the specified copy.

The linked issue specifies keeping only "No authorizations" for the empty state, but the rendered text is "No authorization yet".

✏️ Proposed fix
-              <span className={styles.noAuthTitle}>No authorization yet</span>
+              <span className={styles.noAuthTitle}>No authorizations</span>
As per PR objectives: "Simplify the empty state by removing the explanatory sentence and keeping only 'No authorizations'."
🤖 Prompt for 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.

In `@src/components/escrow/escrow-token-panel.tsx` around lines 392 - 393, Update
the empty-state copy in the escrow token panel so it matches the specified
wording. In the EscrowTokenPanel component, replace the current no-auth message
text shown with styles.noAuthTitle from “No authorization yet” to exactly “No
authorizations”, and remove any extra explanatory empty-state sentence so only
that single line remains.
🧹 Nitpick comments (1)
src/components/escrow/edit-authorization-modal.tsx (1)

2-8: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Consider extracting the duplicated node-identity header into a shared component.

This header block (name fallback + Peer ID/ETH Address copy rows) is duplicated almost verbatim in AuthorizationCard (escrow-token-panel.tsx lines 62-89). Importing escrow-token-panel.module.css here to reuse .copyRow/.hash also couples this modal to another component's stylesheet. A shared NodeIdentityHeader component (with its own CSS module) would remove the coupling and prevent future drift between the two copies (the codebase already shows label drift elsewhere in this PR between duplicated forms).

Also applies to: 23-52

🤖 Prompt for 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.

In `@src/components/escrow/edit-authorization-modal.tsx` around lines 2 - 8, The
node-identity header markup in this modal is duplicated with AuthorizationCard,
and this file also depends on another component’s stylesheet for shared copy
row/hash styles. Extract the fallback name plus Peer ID/ETH Address copy rows
into a shared NodeIdentityHeader component with its own CSS module, then update
edit-authorization-modal and AuthorizationCard to use it so the duplicated logic
and styling stay in sync.
🤖 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 `@src/components/escrow/authorization-form.tsx`:
- Around line 81-89: The max concurrent jobs field in the authorization edit
form still uses the old endAdornment value, which is inconsistent with the
renamed label. Update the Input in authorization-form.tsx (the same field used
in the form component) so its endAdornment matches the create flow’s “jobs”
terminology, keeping the shared authorization UI consistent.

In `@src/components/escrow/escrow-token-panel.tsx`:
- Around line 62-63: The node name heading in EscrowTokenPanel is not using the
new truncation styling, so long names can overflow. Add the `authName` class to
the `<h4>` that renders `spender.nodeFriendlyName` in `escrow-token-panel.tsx`,
and make the same className update in the equivalent heading inside
`edit-authorization-modal.tsx` so both places use the new ellipsis CSS from
`escrow-token-panel.module.css`.

---

Outside diff comments:
In `@src/components/escrow/escrow-token-panel.tsx`:
- Around line 392-393: Update the empty-state copy in the escrow token panel so
it matches the specified wording. In the EscrowTokenPanel component, replace the
current no-auth message text shown with styles.noAuthTitle from “No
authorization yet” to exactly “No authorizations”, and remove any extra
explanatory empty-state sentence so only that single line remains.

---

Nitpick comments:
In `@src/components/escrow/edit-authorization-modal.tsx`:
- Around line 2-8: The node-identity header markup in this modal is duplicated
with AuthorizationCard, and this file also depends on another component’s
stylesheet for shared copy row/hash styles. Extract the fallback name plus Peer
ID/ETH Address copy rows into a shared NodeIdentityHeader component with its own
CSS module, then update edit-authorization-modal and AuthorizationCard to use it
so the duplicated logic and styling stay in sync.
🪄 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 Plus

Run ID: b50cfc04-bb8a-47bf-9c18-8eb5aae3e961

📥 Commits

Reviewing files that changed from the base of the PR and between bb82fb7 and 742e56d.

📒 Files selected for processing (8)
  • src/components/button/copy-button.tsx
  • src/components/escrow/authorization-form.tsx
  • src/components/escrow/create-authorization-modal.tsx
  • src/components/escrow/edit-authorization-modal.tsx
  • src/components/escrow/escrow-token-panel.module.css
  • src/components/escrow/escrow-token-panel.tsx
  • src/lib/use-escrow-data.ts
  • src/types/nodes.ts

Comment thread src/components/escrow/authorization-form.tsx
Comment thread src/components/escrow/escrow-token-panel.tsx
Comment thread src/components/escrow/escrow-token-panel.tsx Outdated
Comment thread src/components/escrow/escrow-token-panel.tsx Outdated

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (1)
src/lib/use-escrow-data.ts (1)

45-49: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Prefer axios params over manual query-string building.

Manually concatenating page, size, and filters into the URL with encodeURIComponent(JSON.stringify(...)) duplicates work axios already does via its params option (which auto-encodes and is the pattern used elsewhere in this codebase, e.g. leaderboard.tsx's axios.get(getApiRoute('nodes'), { params: {...} })). This is more error-prone if getApiRoute('nodes') ever returns a path with its own query string.

♻️ Proposed refactor
-    const filters = { address: { value: wallets.join(','), operator: 'terms' } };
-    const res = await axios.get(
-      `${getApiRoute('nodes')}?page=0&size=${wallets.length}&filters=${encodeURIComponent(JSON.stringify(filters))}`
-    );
+    const filters = { address: { value: wallets.join(','), operator: 'terms' } };
+    const res = await axios.get(getApiRoute('nodes'), {
+      params: { page: 0, size: wallets.length, filters: JSON.stringify(filters) },
+    });
🤖 Prompt for 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.

In `@src/lib/use-escrow-data.ts` around lines 45 - 49, The axios call in
useEscrowData is manually building the query string for page, size, and filters,
which should be moved to axios params handling. Update the axios.get call that
fetches getApiRoute('nodes') so it passes page, size, and the JSON filters
object through the params option instead of concatenating and encoding them into
the URL string. Keep the existing filters shape and use the same axios params
pattern already used in leaderboard.tsx.
🤖 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.

Nitpick comments:
In `@src/lib/use-escrow-data.ts`:
- Around line 45-49: The axios call in useEscrowData is manually building the
query string for page, size, and filters, which should be moved to axios params
handling. Update the axios.get call that fetches getApiRoute('nodes') so it
passes page, size, and the JSON filters object through the params option instead
of concatenating and encoding them into the URL string. Keep the existing
filters shape and use the same axios params pattern already used in
leaderboard.tsx.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: a43cc3b0-d6e7-4ee3-b27c-fed00517a47d

📥 Commits

Reviewing files that changed from the base of the PR and between 742e56d and 4942d66.

📒 Files selected for processing (4)
  • src/components/escrow/authorization-form.tsx
  • src/components/escrow/escrow-token-panel.module.css
  • src/components/escrow/escrow-token-panel.tsx
  • src/lib/use-escrow-data.ts
💤 Files with no reviewable changes (1)
  • src/components/escrow/escrow-token-panel.module.css
🚧 Files skipped from review as they are similar to previous changes (2)
  • src/components/escrow/authorization-form.tsx
  • src/components/escrow/escrow-token-panel.tsx

@andreip136 andreip136 merged commit b7dea78 into main Jul 6, 2026
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Escrow Management UI/UX fixes

2 participants