Fix: Restore claim disabled message modal overlay (#611)

[edehvictor]

Description

The "Claiming Unavailable" modal was previously broken because the useModal hook implementation caused the dialog to participate in the flex layout, which squeezed it and pushed it behind other elements.

This PR completely removes the problematic useModal hook in useDisabledClaimModal.tsx and replaces it with a dedicated, absolutely-positioned <Box> overlay (zIndex: 50) with a semi-transparent dark backdrop. To ensure the overlay perfectly covers only the claim interaction area without breaking the rest of the page, position="relative" and overflow="hidden" were added to the parent balanceContainer in OldClaim.tsx. The modal is un-dismissable, meeting all acceptance criteria.

About #611

How Has This Been Tested?

• Tested locally by forcing the claim-feature flag to false to trigger the disabled state.
• Verified that the grey overlay correctly and completely covers the claim button container.
• Tested responsive behavior across both mobile and desktop viewports to ensure the modal stays centered and correctly proportioned.
• Verified that clicking the backdrop or pressing escape does not dismiss the modal, effectively blocking the claim action.

Checklist:

• PR title matches follow: (Feature|Bug|Chore) Task Name
• My code follows the style guidelines of this project
• I have followed all the instructions described in the initial task (check Definitions of Done)
• I have performed a self-review of my own code
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• I have added reference to a related issue in the repository
• I have added a detailed description of the changes proposed in the pull request. I am as descriptive as possible, assisting reviewers as much as possible.
• I have added screenshots related to my pull request (for frontend tasks)
• @sirpy @L03TJ3

Screenshots

Summary by Sourcery

Restore and harden the disabled-claim modal so it properly overlays the claim area and blocks claiming when the feature flag is off.

Bug Fixes:

• Fix the disabled-claim modal so it no longer participates in the flex layout and correctly overlays the claim container.
• Ensure claim attempts are blocked and the disabled modal is shown whenever the claim feature flag is turned off.

Enhancements:

• Replace the generic modal hook usage with a dedicated, absolutely positioned overlay tailored to the claim section.
• Adjust claim layout container styles and text formatting to better support the new overlay and responsive layout behavior.

[sourcery-ai]

Hey - I've found 1 issue, and left some high level feedback:

• The temporary useEffect that unconditionally calls showModal() on mount in OldClaim will force the overlay to appear even when claimEnabled is true; consider gating it on !claimEnabled or removing it before merge so the modal only shows when the feature flag is actually disabled.
• Now that the feature flag and modal wiring are restored, the inline comments like // Uncommented per maintainer's instructions and // Temporary useEffect... are no longer helpful for long-term maintenance and could be removed to keep the code clean.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- The temporary `useEffect` that unconditionally calls `showModal()` on mount in `OldClaim` will force the overlay to appear even when `claimEnabled` is true; consider gating it on `!claimEnabled` or removing it before merge so the modal only shows when the feature flag is actually disabled.
- Now that the feature flag and modal wiring are restored, the inline comments like `// Uncommented per maintainer's instructions` and `// Temporary useEffect...` are no longer helpful for long-term maintenance and could be removed to keep the code clean.

## Individual Comments

### Comment 1
<location path="src/pages/gd/Claim/OldClaim.tsx" line_range="77-78" />
<code_context>
+    // Uncommented per maintainer's instructions
+    const { Dialog, showModal } = useDisabledClaimingModal(disabledMessage)
+
+    // Temporary useEffect per maintainer's instructions to trigger the modal
+    useEffect(() => {
+        showModal()
+    }, [showModal])
</code_context>
<issue_to_address>
**suggestion (bug_risk):** Consider conditioning the initial modal display on `claimEnabled` to avoid showing it when claiming is allowed.

Right now this effect triggers `showModal()` on every mount, so users will see the "Claiming Unavailable" modal even when claiming is enabled. To align behavior with the flag, gate the effect body and track the flag in the deps:

```ts
useEffect(() => {
  if (!claimEnabled) {
    showModal();
  }
}, [claimEnabled, showModal]);
```

Suggested implementation:

```typescript
    // Temporary useEffect per maintainer's instructions to trigger the modal
    useEffect(() => {
        if (!claimEnabled) {
            showModal()
        }
    }, [claimEnabled, showModal])

```

These changes assume that `claimEnabled` is already defined in the component scope (e.g. from props, context, or derived from `supportedChains`). If it is not yet defined, you'll need to:
1. Introduce a `const claimEnabled = ...` expression (or prop) that reflects whether claiming is currently allowed.
2. Ensure `claimEnabled` is correctly updated when the underlying feature flag or conditions change so the effect re-runs appropriately.
</issue_to_address>

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[edehvictor]

Hey @L03TJ3 and @sirpy , I've just submitted the PR for the claim disabled modal fix (Issue #611)! 🚀

To fix the layout squeezing, I completely removed the problematic useModal hook and built a clean, absolute-positioned overlay. I also wrapped the claim container in position="relative" and overflow="hidden" so the dark grey backdrop covers the area perfectly on both mobile and desktop without being dismissable.