Add unit tests for the staking panel asserting the claim button state based on the lock expiry

[Chucks1093]

Summary

The staking panel's Claim button should be disabled while the lock period is active and enabled once it expires. Unit tests using fake timers should assert the correct button state at various points relative to the lock expiry.

Scope

• Test that the Claim button is disabled when unlock_ledger is in the future
• Test that the Claim button is enabled when unlock_ledger has passed
• Test that the lock expiry countdown displays the correct HH:MM:SS value
• Test that the countdown reaches 00:00:00 and the Claim button enables without a page reload
• Test that clicking Claim calls the contract with the correct key_id

Acceptance Criteria

• Claim disabled when lock is active
• Claim enabled after lock expires
• Countdown displays correct time remaining
• Claim button enables automatically when countdown hits zero
• Contract called with correct key_id on claim

ETA: 12 hours

---

Coordinate on Telegram

[amankoli09]

can i work on this issue PR merge within 1hr

[nelly439]

@nelly439 has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

Hi, I’d like to take on this issue. I’m comfortable with React/TypeScript testing, fake timers, and contract interaction flows, and I can build focused coverage around the staking lock lifecycle. I’ll verify the disabled/enabled states, exact HH:MM:SS countdown behavior, automatic unlock without reload, and that Claim invokes the contract with the correct key_id.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @nelly439 to this issue.

[Sulamoney222]

@Sulamoney222 has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

Hello Maintainer, I’ve reviewed this issue and it matches my expertise. I can deliver a clean solution that fits the requirements. Kindly assign it to me.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Sulamoney222 to this issue.

[sunlight12-creator]

@sunlight12-creator has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

I would like to work on this issue...

ℹ️ Repo Maintainers: To accept this application, review their application or assign @sunlight12-creator to this issue.

[Ova-Klik]

@Ova-Klik has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

I'd love to work on this issue. I've worked on similar and I take ownership, I'd appreciate being assigned this issue.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Ova-Klik to this issue.

[somotochukwu-dev]

@somotochukwu-dev has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

Hi
Please assign this issue to me
Thanks

ℹ️ Repo Maintainers: To accept this application, review their application or assign @somotochukwu-dev to this issue.

[Mabel-003]

@Mabel-003 has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

Hi maintainer, please assign

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Mabel-003 to this issue.

[bright5455]

@bright5455 has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

hello maintainer

i have read and understand the issue
im a backend engineer with five years of eperience,with my level of experience,i believe i can deliver a quality PR
please kindly assign this task to me

Thank you

ℹ️ Repo Maintainers: To accept this application, review their application or assign @bright5455 to this issue.

[GOE001]

@GOE001 has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

I would like to work on this

ℹ️ Repo Maintainers: To accept this application, review their application or assign @GOE001 to this issue.

[Mona-i]

@Mona-i has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

Hello maintainer

I would love to work on this issue.

Please assign.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Mona-i to this issue.

[Neziahtech]

@Neziahtech has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

Hi! I'd like to take this one.

Plan:

• Use fake timers (e.g. Jest/Vitest useFakeTimers) to control time deterministically rather than relying on real delays.
• Test: Claim button disabled when unlock_ledger is in the future.
• Test: Claim button enabled when unlock_ledger has passed.
• Test: countdown displays correct HH:MM:SS at a few points relative to expiry.
• Test: advance fake timers past expiry — verify countdown reaches 00:00:00 and Claim enables automatically, without needing a re-render triggered by page reload (confirms the component's own timer/interval logic handles the transition).
• Test: click Claim, verify the contract call is invoked with the correct key_id from the panel's current staking context.

Testing approach:

• Cover boundary case: exactly at unlock_ledger.
• Mock the contract call to assert arguments without hitting real chain interaction.

ETA: within the 12-hour window.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Neziahtech to this issue.

[Sulamoney222]

Kindly approve my request to work on this issue, I will fix it perfectly!

[aishagbadamosi]

@aishagbadamosi has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

Hi maintainer please assign

ℹ️ Repo Maintainers: To accept this application, review their application or assign @aishagbadamosi to this issue.

[HassanKorey]

@HassanKorey has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

pls assign

ℹ️ Repo Maintainers: To accept this application, review their application or assign @HassanKorey to this issue.