[READY] Implement automatic quote refresh

[Sharqiewicz]

Introduced an animated progress indicator that provides visual feedback when quotes are being refreshed.
Refresh the quote every 30s until the summary is shown.

[netlify]

✅ Deploy Preview for pendulum-pay ready!

Name	Link
🔨 Latest commit	9206857
🔍 Latest deploy log	https://app.netlify.com/projects/pendulum-pay/deploys/6862b981261acc0008d32d02
😎 Deploy Preview	https://deploy-preview-734--pendulum-pay.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[Copilot]

Pull Request Overview

This PR implements an automatic quote refresh system with a 30-second timer and an animated progress indicator, stopping when the summary is shown.

• Introduces useRefreshTimer, useQuoteRefreshData, and useQuoteRefresh hooks for timer-driven quote fetching
• Adds <QuoteRefreshProgress> component and integrates it into RampFeeCollapse
• Adjusts various component props orderings and cleans up imports for consistency

Reviewed Changes

Copilot reviewed 18 out of 18 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
useRefreshTimer.ts	New hook managing a countdown timer with start/stop/reset
useQuoteService.ts	Reordered fetch params and trackEvent properties
useQuoteRefreshData.ts	New hook encapsulating logic for whether/when to refresh
useQuoteRefresh.ts	New hook tying timer and animation controls together
QuoteRefreshProgress/index.tsx	New component rendering SVG progress circle
RampFeeCollapse/index.tsx	Replaced static rate formatting with <InterbankExchangeRate> and <QuoteRefreshProgress>
ramp-form/index.tsx	Swapped initial/animate prop order on motion div
Various component files (UserBalance, RampSummaryDialog, RampHistory, SelectionModal, etc.)	Minor prop reorderings and import optimizations

Comments suppressed due to low confidence (2)

apps/frontend/src/hooks/ramp/useRefreshTimer.ts:1

• No tests cover the new useRefreshTimer hook. Adding unit tests for start, stop, reset, and edge cases like immediate completion would improve confidence during future refactoring.

import { useCallback, useEffect, useRef, useState } from "react";

apps/frontend/src/hooks/ramp/useQuoteRefresh.ts:40

• The useQuoteRefresh hook orchestrates several behaviors (timer, animation, fetch). Consider adding integration tests or hook tests to verify that animations start/stop correctly based on shouldRefresh changes.

  useEffect(() => {

[ebma]

Tested it locally, can confirm it works as expected 👌
Let's also add the change to remove expired quotes from the database automatically (the change would be that instead of setting the state of the quote to expired, we delete it from the table).

Besides that, I think the hooks are not super intuitive yet. We have three new hooks, maybe we should move them into a new subdirectory of the hooks/ramp/ directory. And the coupling is a little weird. useQuoteRefresh takes a circumference argument. It's not obvious what a circumference has to do with the quote refresh 😅 This means the hooks are not very generic which is fine but if they are tailored to be used only with the circular progress, maybe we should rename or refactor.

[ebma]

Tested it locally, seems to work as expected 🙏 nice job @Sharqiewicz, let's merge