UX: Add tooltip + explicit error text below BRIDGE button when amount is below MIN

Brouie commented

2026-04-21 04:34:41 +00:00

(Migrated from gitlab.com)

Context

Split from #112 verification. Below-min UI block works correctly (button disabled, blocked cursor on hover), but the reason is not communicated to the user.

Observed

Route: BSC → Solana, tdec, amount 0.0005 (MIN 1.005251256281407037).

BRIDGE button is silently disabled
No tooltip on hover explaining why
No inline error text below the button or near the amount field
MIN value is shown in the header row but user has to cross-reference it themselves

Ask

Add a tooltip on the disabled BRIDGE button: "Amount below minimum (X TOKEN)" or similar
Add explicit error text below the button (or near the amount input) stating the reason the button is disabled

Applies to any below-MIN, above-MAX, or other validation-block state on any route.

#112 (closing after this is filed)

@PlasticDigits ## Context Split from #112 verification. Below-min UI block works correctly (button disabled, blocked cursor on hover), but the reason is not communicated to the user. ## Observed Route: BSC → Solana, tdec, amount 0.0005 (MIN 1.005251256281407037). - BRIDGE button is silently disabled - No tooltip on hover explaining why - No inline error text below the button or near the amount field - MIN value is shown in the header row but user has to cross-reference it themselves ## Ask 1. Add a tooltip on the disabled BRIDGE button: "Amount below minimum (X TOKEN)" or similar 2. Add explicit error text below the button (or near the amount input) stating the reason the button is disabled Applies to any below-MIN, above-MAX, or other validation-block state on any route. ## Related #112 (closing after this is filed)

Brouie commented

2026-04-21 05:20:06 +00:00

(Migrated from gitlab.com)

mentioned in issue #111

PlasticDigits (Migrated from gitlab.com) closed this issue

2026-04-21 05:52:32 +00:00

PlasticDigits commented

2026-04-21 05:52:35 +00:00

(Migrated from gitlab.com)

Implemented in main (commit f97ebe6).

What changed

Wrapped the Bridge submit control in a span with a title so hover shows why the action is blocked (below-min, above-max, wallet not connected, invalid amount, route validation, or Solana mapping guard). Disabled buttons do not reliably show tooltips, so the parent carries the hover text.
Added inline rose validation copy: under the amount field for below-min / above-max, and under the submit row for wallet connect / invalid amount / route validation when the route-misconfiguration amber banner is not shown (mapping/route errors still use the existing amber panel above the form).
aria-describedby points at the amount hint or the submit-row hint when present.

Tests: frontend lint + TransferForm vitest suite.

@brouie — could you give this a quick QA pass on a real below-MIN / above-MAX route and on a route-misconfigured case? Thanks!

Implemented in `main` (commit f97ebe6). **What changed** - Wrapped the Bridge submit control in a `span` with a `title` so hover shows why the action is blocked (below-min, above-max, wallet not connected, invalid amount, route validation, or Solana mapping guard). Disabled buttons do not reliably show tooltips, so the parent carries the hover text. - Added inline **rose** validation copy: under the **amount** field for below-min / above-max, and under the **submit** row for wallet connect / invalid amount / route validation when the route-misconfiguration amber banner is not shown (mapping/route errors still use the existing amber panel above the form). - `aria-describedby` points at the amount hint or the submit-row hint when present. **Tests:** `frontend` lint + `TransferForm` vitest suite. @brouie — could you give this a quick QA pass on a real below-MIN / above-MAX route and on a route-misconfigured case? Thanks!

PlasticDigits (Migrated from gitlab.com) reopened this issue

2026-04-21 06:05:59 +00:00

PlasticDigits commented

2026-04-21 06:06:00 +00:00

(Migrated from gitlab.com)

@brouie Could you verify the fix for this issue on main (tooltip + inline validation when Bridge is blocked)? Please confirm below-min / above-max and any route-guard cases look good to you. Thanks!

Brouie commented

2026-04-22 00:39:47 +00:00

(Migrated from gitlab.com)

@PlasticDigits code review on f97ebe6 — fix covers everything in the finding:

Title tooltip on disabled Bridge button, wrapped in parent span (correct — disabled buttons don't fire hover events natively)
Inline rose copy below amount field for below-min / above-max
Inline rose copy below submit row for wallet-connect / invalid-amount / route validation
aria-describedby wired for accessibility (bonus over the original spec)
Covers 5 validation states: min/max, wallet, amount, route guard, mapping errors

Production bundle currently still main-Cfb2yEWD (from yesterday, pre-fix). Will re-verify on bridge.cl8y.com once deployed. Flagging not-closed because this is a UX fix and must be validated against the shipped surface, not just the source.

@PlasticDigits code review on f97ebe6 — fix covers everything in the finding: - Title tooltip on disabled Bridge button, wrapped in parent `span` (correct — disabled buttons don't fire hover events natively) - Inline rose copy below amount field for below-min / above-max - Inline rose copy below submit row for wallet-connect / invalid-amount / route validation - `aria-describedby` wired for accessibility (bonus over the original spec) - Covers 5 validation states: min/max, wallet, amount, route guard, mapping errors Production bundle currently still `main-Cfb2yEWD` (from yesterday, pre-fix). Will re-verify on bridge.cl8y.com once deployed. Flagging not-closed because this is a UX fix and must be validated against the shipped surface, not just the source.

Brouie commented

2026-04-22 03:35:50 +00:00

(Migrated from gitlab.com)

@PlasticDigits verified fix on prod bundle main-C5Gr9dQe (f97ebe6).

Tested 5 validation-blocked states on bridge.cl8y.com:

Below-minimum amount ✅

Rose inline text: "Amount is below the minimum transfer amount (0.10050251256281407 testa)"
Tooltip on disabled button: "Amount below minimum (0.10050251256281407 testa)"

Above-maximum amount ✅

Rose inline: "Amount exceeds the maximum (5.97 testa)"
Tooltip: "Amount exceeds the maximum (5.97 testa)"

Invalid amount (0) ✅

Falls into below-min path correctly (0 < MIN by definition)
Same rose inline + tooltip as below-min case

Wallet not connected ✅

Button switches to "CONNECT TERRA WALLET" (action-oriented, not disabled-grey)
Rose inline below submit row: "Connect your Terra wallet to continue"
Smart UX choice — gives user the action to fix rather than just blocking

Route guard / mapping errors

Not reachable organically through the UI: invalid source/destination combos are filtered at the chain+token selector layer (no CL8Y→Solana option in dropdown, no Terra→Terra option, etc). This is a stronger pattern than post-select validation.

Inline + tooltip pairing works well: peripheral glance sees the inline message, interactive hover confirms via tooltip. Same copy, two entry points.

Closing.

@PlasticDigits verified fix on prod bundle main-C5Gr9dQe (f97ebe6). Tested 5 validation-blocked states on bridge.cl8y.com: **Below-minimum amount** ✅ - Rose inline text: "Amount is below the minimum transfer amount (0.10050251256281407 testa)" - Tooltip on disabled button: "Amount below minimum (0.10050251256281407 testa)" **Above-maximum amount** ✅ - Rose inline: "Amount exceeds the maximum (5.97 testa)" - Tooltip: "Amount exceeds the maximum (5.97 testa)" **Invalid amount (0)** ✅ - Falls into below-min path correctly (0 < MIN by definition) - Same rose inline + tooltip as below-min case **Wallet not connected** ✅ - Button switches to "CONNECT TERRA WALLET" (action-oriented, not disabled-grey) - Rose inline below submit row: "Connect your Terra wallet to continue" - Smart UX choice — gives user the action to fix rather than just blocking **Route guard / mapping errors** - Not reachable organically through the UI: invalid source/destination combos are filtered at the chain+token selector layer (no CL8Y→Solana option in dropdown, no Terra→Terra option, etc). This is a stronger pattern than post-select validation. Inline + tooltip pairing works well: peripheral glance sees the inline message, interactive hover confirms via tooltip. Same copy, two entry points. Closing.

Brouie (Migrated from gitlab.com) closed this issue

2026-04-22 03:35:52 +00:00

Brouie commented

2026-04-22 03:39:00 +00:00

(Migrated from gitlab.com)

{width=900 height=483}

{width=665 height=600}

{width=702 height=600}

{width=654 height=600}

{width=761 height=600}

![image.png](/uploads/659e2c95d8ecfdecec0aac885f3a6775/image.png){width=900 height=483} ![image.png](/uploads/e68da155b929a6035c421000fd111542/image.png){width=665 height=600} ![image.png](/uploads/7caf46ff7a71cdec285e962511692b20/image.png){width=702 height=600} ![image.png](/uploads/ad0c33b90fec2a94e8c23aefa4a756e6/image.png){width=654 height=600} ![image.png](/uploads/6f3f5d696d0a991057b69f0a45bd390c/image.png){width=761 height=600}

Rows
Columns

UX: Add tooltip + explicit error text below BRIDGE button when amount is below MIN #113

Context

Observed

Ask

Related