Merge pull request #409 from manuelusman73-png/feat/issue-262-live-exchange-rate

feat: live exchange rate display in payment form (#262)

Author: Mystery-CLI

frontend/src/App.jsx

@@ -89,7 +89,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) => {
@@ -542,11 +542,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'}>
@@ -758,11 +759,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

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 };
 }

frontend/src/index.css

@@ -795,6 +795,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 {