Add UI polling logic for simulated confirmations

Author: bfalls

README.md

@@ -17,6 +17,15 @@ dotnet build
 ## PrivateCircle demo UI
 - Run `Gateway.Api` and browse to [http://localhost:5023](http://localhost:5023) to use the built-in PrivateCircle-branded page. It can derive idempotency keys for fiat and crypto payloads, submit payments, and show canonical payloads used by the middleware.
 
+### Online demo: worker updates for fiat + crypto
+Use the built-in UI at http://localhost:5023 to show the background worker updating payment records after the simulated PSP/chain responds.
+
+1. Start **PspStub.Api**, **Gateway.Api**, and **Gateway.Worker** (see steps below). Keep the demo UI open in a browser.
+2. In the **Card / Fiat** card, click **Derive key** to populate the derived key and canonical payload, then click **Submit payment**. The UI displays the initial `Pending` response and fills the **Payment ID** field.
+3. Click **Fetch /payments/{paymentId}** to query the API from inside the demo. As the worker authorizes the payment, repeat the fetch to watch the status move to `Authorized` with an `authCode` from the PSP stub.
+4. Repeat the flow in the **Crypto** card. After **Submit crypto**, use **Fetch /payments/{paymentId}** and **Fetch /payments/{paymentId}/crypto** to watch the worker mark the transaction with confirmations and authorize the payment using the simulated `txHash`.
+5. Call either submit button with the same derived key to highlight that the stored response is replayed (idempotent behavior still works after the worker updates records).
+ 
 ## Let's test it
 
 ### Services and ports used

src/Gateway.Api/wwwroot/index.html

@@ -41,7 +41,6 @@
                 <small>Fiat + Crypto • Derived idempotency keys • Worker updates</small>
             </div>
         </div>
-        <div class="badge">Ready to demo</div>
     </header>
 <main class="main">
     <div class="card">
@@ -69,7 +68,7 @@ <h2>Environment</h2>
         <div class="card">
             <div class="section-title">
                 <h3>Card / Fiat</h3>
-                <span class="badge">Idempotent</span>
+                <span class="badge">Simulated card authorization</span>
             </div>
             <label for="fiatAmount">Amount (minor units)</label>
             <input id="fiatAmount" type="number" value="4200" />
@@ -92,7 +91,16 @@ <h3>Card / Fiat</h3>
             <label for="fiatCanonical">Canonical payload</label>
             <textarea id="fiatCanonical" readonly></textarea>
 
-            <div class="status" id="fiatStatus">Awaiting request...</div>
+            <div class="status" id="fiatStatus">Make a request above...</div>
+
+            <div class="section-title">
+                <h4>Track worker updates</h4>
+                <small>Use the last response or paste a paymentId to query the API from here.</small>
+            </div>
+            <label for="fiatPaymentId">Payment ID</label>
+            <input id="fiatPaymentId" placeholder="Filled after Submit payment" />
+            <button class="secondary" id="fiatFetch">Fetch /payments/{paymentId}</button>
+            <div class="status" id="fiatFetchStatus">No fetch yet.</div>
         </div>
 
         <div class="card">
@@ -124,7 +132,19 @@ <h3>Crypto</h3>
             <label for="cryptoCanonical">Canonical payload</label>
             <textarea id="cryptoCanonical" readonly></textarea>
 
-            <div class="status" id="cryptoStatus">Awaiting request...</div>
+            <div class="status" id="cryptoStatus">Make a request above...</div>
+
+            <div class="section-title">
+                <h4>Track worker updates</h4>
+                <small>Call the payment and crypto endpoints without leaving the demo.</small>
+            </div>
+            <label for="cryptoPaymentId">Payment ID</label>
+            <input id="cryptoPaymentId" placeholder="Filled after Submit crypto" />
+            <div class="grid">
+                <button class="secondary" id="cryptoFetchPayment">Fetch /payments/{paymentId}</button>
+                <button class="secondary" id="cryptoFetchTx">Fetch /payments/{paymentId}/crypto</button>
+            </div>
+            <div class="status" id="cryptoFetchStatus">No fetch yet.</div>
         </div>
     </div>
 </main>
@@ -147,6 +167,17 @@ <h3>Crypto</h3>
     return { status: response.status, body };
 }
 
+async function getJson(url, apiKey) {
+    const response = await fetch(url, {
+        method: 'GET',
+        headers: { 'x-api-key': apiKey }
+    });
+    const contentType = response.headers.get('content-type') || '';
+    const isJson = contentType.includes('application/json');
+    const body = isJson ? await response.json() : await response.text();
+    return { status: response.status, body };
+}
+
 function buildFiatPayload() {
     return {
         amount: Number(document.getElementById('fiatAmount').value),
@@ -197,15 +228,50 @@ <h3>Crypto</h3>
     const result = await postJson(url, payload, apiKey, derived);
     if (flow === 'fiat') {
         writeStatus('fiatStatus', result);
+        if (result.body && result.body.paymentId) {
+            document.getElementById('fiatPaymentId').value = result.body.paymentId;
+        }
     } else {
         writeStatus('cryptoStatus', result);
+        if (result.body && result.body.paymentId) {
+            document.getElementById('cryptoPaymentId').value = result.body.paymentId;
+        }
     }
 }
 
+async function fetchPaymentStatus(flow) {
+    const baseUrl = document.getElementById('baseUrl').value;
+    const apiKey = document.getElementById('apiKey').value;
+    const paymentId = (flow === 'fiat' ? document.getElementById('fiatPaymentId') : document.getElementById('cryptoPaymentId')).value.trim();
+    if (!paymentId) {
+        writeStatus(flow === 'fiat' ? 'fiatFetchStatus' : 'cryptoFetchStatus', 'Enter or submit a payment to get an id.');
+        return;
+    }
+
+    const result = await getJson(`${baseUrl}/payments/${paymentId}`, apiKey);
+    writeStatus(flow === 'fiat' ? 'fiatFetchStatus' : 'cryptoFetchStatus', result);
+}
+
+async function fetchCryptoTx() {
+    const baseUrl = document.getElementById('baseUrl').value;
+    const apiKey = document.getElementById('apiKey').value;
+    const paymentId = document.getElementById('cryptoPaymentId').value.trim();
+    if (!paymentId) {
+        writeStatus('cryptoFetchStatus', 'Enter or submit a crypto payment to get an id.');
+        return;
+    }
+
+    const result = await getJson(`${baseUrl}/payments/${paymentId}/crypto`, apiKey);
+    writeStatus('cryptoFetchStatus', result);
+}
+
 document.getElementById('fiatDerive').addEventListener('click', () => derive('fiat'));
 document.getElementById('cryptoDerive').addEventListener('click', () => derive('crypto'));
 document.getElementById('fiatSubmit').addEventListener('click', () => submit('fiat'));
 document.getElementById('cryptoSubmit').addEventListener('click', () => submit('crypto'));
+document.getElementById('fiatFetch').addEventListener('click', () => fetchPaymentStatus('fiat'));
+document.getElementById('cryptoFetchPayment').addEventListener('click', () => fetchPaymentStatus('crypto'));
+document.getElementById('cryptoFetchTx').addEventListener('click', fetchCryptoTx);
 </script>
 </body>
 </html>

src/Gateway.Api/wwwroot/styles.css

@@ -1,6 +1,6 @@
 :root {
     --pc-primary: #243b5a;
-    --pc-accent: #21b6a8;
+    --pc-accent: #e53935;
     --pc-bg: #f5f7fb;
     --pc-card: #ffffff;
     --pc-border: #dfe6f2;