From 5faedb3c0dd4851fcc6c411f5825302aa96b68cf Mon Sep 17 00:00:00 2001
From: manuelusman73-png <manuelusman73@gmail.com>
Date: Fri, 24 Apr 2026 21:32:02 +0000
Subject: [PATCH] feat: live exchange rate display in payment form (#262)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- useExchangeRate now returns { rate, loading } and tracks fetch state
- Show 'Loading rate…' while initial fetch is in flight
- Update on rateChange WebSocket events from the rates channel
---
 frontend/src/App.jsx                  | 24 +++++++++++++-----------
 frontend/src/hooks/useExchangeRate.js |  8 +++++---
 frontend/src/index.css                |  1 +
 3 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 2b885df5..ff3b2257 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -98,7 +98,7 @@ function App() {
 
   const wsStatus = useWebSocket(account?.publicKey ?? null, handleWsMessage);
   const { status: networkStatus } = useNetworkStatus();
-  const xlmUsdRate = useExchangeRate(lastWsMessage);
+  const { rate: xlmUsdRate, loading: rateLoading } = useExchangeRate(lastWsMessage);
 
   useEffect(() => {
     const onKeyDown = (e) => {
@@ -507,11 +507,12 @@ function App() {
                   )}
                 </AnimatePresence>
                 <FeeDisplay amount={amount} visible={amountValid} />
-                {amountValid && xlmUsdRate && (
-                  <p className="rate-estimate" aria-live="polite">
-                    ≈ ${(parseFloat(amount) * xlmUsdRate).toFixed(2)} USD
-                    <span className="rate-source"> · live rate</span>
-                  </p>
+                {amountValid && (xlmUsdRate
+                  ? <p className="rate-estimate" aria-live="polite">
+                      ≈ ${(parseFloat(amount) * xlmUsdRate).toFixed(2)} USD
+                      <span className="rate-source"> · live rate</span>
+                    </p>
+                  : rateLoading && <p className="rate-estimate rate-estimate--loading" aria-live="polite">Loading rate…</p>
                 )}
                 <div style={{ display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' }}>
                   <motion.button onClick={sendPayment} {...tap} disabled={!recipientValid || !amountValid || loading === 'send'}>
@@ -711,11 +712,12 @@ function App() {
                     </div>
 
                     <FeeDisplay amount={amount} visible={amountValid} />
-                    {amountValid && xlmUsdRate && (
-                      <p className="rate-estimate" aria-live="polite">
-                        ≈ ${(parseFloat(amount) * xlmUsdRate).toFixed(2)} USD
-                        <span className="rate-source"> · live rate</span>
-                      </p>
+                    {amountValid && (xlmUsdRate
+                      ? <p className="rate-estimate" aria-live="polite">
+                          ≈ ${(parseFloat(amount) * xlmUsdRate).toFixed(2)} USD
+                          <span className="rate-source"> · live rate</span>
+                        </p>
+                      : rateLoading && <p className="rate-estimate rate-estimate--loading" aria-live="polite">Loading rate…</p>
                     )}
                     <div style={{ display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' }}>
                       <motion.button
diff --git a/frontend/src/hooks/useExchangeRate.js b/frontend/src/hooks/useExchangeRate.js
index caaee04f..a032184e 100644
--- a/frontend/src/hooks/useExchangeRate.js
+++ b/frontend/src/hooks/useExchangeRate.js
@@ -6,15 +6,17 @@ import axios from 'axios';
  * rateChange WebSocket events (passed in as `wsMessage`).
  *
  * @param {object|null} wsMessage – latest message from useWebSocket's onMessage
- * @returns {number|null} rate – XLM price in USD, or null while loading
+ * @returns {{ rate: number|null, loading: boolean }}
  */
 export function useExchangeRate(wsMessage) {
   const [rate, setRate] = useState(null);
+  const [loading, setLoading] = useState(true);
 
   useEffect(() => {
     axios.get('/api/stellar/exchange-rate/XLM/USD')
       .then(({ data }) => setRate(data.rate))
-      .catch(() => {});
+      .catch(() => {})
+      .finally(() => setLoading(false));
   }, []);
 
   useEffect(() => {
@@ -23,5 +25,5 @@ export function useExchangeRate(wsMessage) {
     }
   }, [wsMessage]);
 
-  return rate;
+  return { rate, loading };
 }
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 305a2737..7d6cbc2b 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -781,6 +781,7 @@ kbd {
   font-weight: 500;
 }
 .rate-source { color: #94a3b8; font-weight: 400; font-size: 11px; }
+.rate-estimate--loading { color: #94a3b8; font-style: italic; }
 [data-theme="dark"] .rate-estimate { color: #38bdf8; }
 [data-theme="dark"] .rate-source { color: #64748b; }
 .fee-tooltip {