1 files changed, 38 insertions, 20 deletions
diff --git a/packages/demobank-ui/src/pages/PaymentOptions.tsx b/packages/demobank-ui/src/pages/PaymentOptions.tsx
index 9fa30cc41..eb21f637a 100644
--- a/packages/demobank-ui/src/pages/PaymentOptions.tsx
+++ b/packages/demobank-ui/src/pages/PaymentOptions.tsx
@@ -24,32 +24,42 @@ import { useTranslationContext } from "@gnu-taler/web-util/browser";
 import { useWithdrawalDetails } from "../hooks/access.js";
 import { useEffect } from "preact/hooks";
 
-function ShowOperationPendingTag({ woid, onOperationAlreadyCompleted }: { woid: string, onOperationAlreadyCompleted?: () => void }): VNode {
+function ShowOperationPendingTag({
+  woid,
+  onOperationAlreadyCompleted,
+}: {
+  woid: string;
+  onOperationAlreadyCompleted?: () => void;
+}): VNode {
   const { i18n } = useTranslationContext();
   const result = useWithdrawalDetails(woid);
-  const error = !result || result instanceof TalerError || result.type === "fail"
-  const completed = !error && (result.body.status === "aborted" || result.body.status === "confirmed")
+  const error =
+    !result || result instanceof TalerError || result.type === "fail";
+  const completed =
+    !error &&
+    (result.body.status === "aborted" || result.body.status === "confirmed");
   useEffect(() => {
     if (completed && onOperationAlreadyCompleted) {
-      onOperationAlreadyCompleted()
+      onOperationAlreadyCompleted();
     }
-  }, [completed])
+  }, [completed]);
 
   if (error || completed) {
     return <Fragment />;
   }
 
-  return <span class="flex items-center gap-x-1.5 w-fit rounded-md bg-green-100 px-2 py-1 text-xs font-medium text-green-700 whitespace-pre">
-    <svg
-      class="h-1.5 w-1.5 fill-green-500"
-      viewBox="0 0 6 6"
-      aria-hidden="true"
-    >
-      <circle cx="3" cy="3" r="3" />
-    </svg>
-    <i18n.Translate>Operation ready</i18n.Translate>
-  </span>
-
+  return (
+    <span class="flex items-center gap-x-1.5 w-fit rounded-md bg-green-100 px-2 py-1 text-xs font-medium text-green-700 whitespace-pre">
+      <svg
+        class="h-1.5 w-1.5 fill-green-500"
+        viewBox="0 0 6 6"
+        aria-hidden="true"
+      >
+        <circle cx="3" cy="3" r="3" />
+      </svg>
+      <i18n.Translate>Operation ready</i18n.Translate>
+    </span>
+  );
 }
 
 /**
@@ -100,7 +110,9 @@ export function PaymentOptions({
                 <span class="flex">
                   <div class="text-4xl mr-4 my-auto">&#x1F4B5;</div>
                   <span class="grow self-center text-lg text-gray-900 align-middle text-center">
-                    <i18n.Translate>to a <b>Taler</b> wallet</i18n.Translate>
+                    <i18n.Translate>
+                      to a <b>Taler</b> wallet
+                    </i18n.Translate>
                   </span>
                   <svg
                     class="self-center flex-none h-5 w-5 text-indigo-600"
@@ -126,9 +138,15 @@ export function PaymentOptions({
                   </i18n.Translate>
                 </div>
                 {!!bankState.currentWithdrawalOperationId && (
-                  <ShowOperationPendingTag woid={bankState.currentWithdrawalOperationId} onOperationAlreadyCompleted={() => {
-                    updateBankState("currentWithdrawalOperationId", undefined)
-                  }} />
+                  <ShowOperationPendingTag
+                    woid={bankState.currentWithdrawalOperationId}
+                    onOperationAlreadyCompleted={() => {
+                      updateBankState(
+                        "currentWithdrawalOperationId",
+                        undefined,
+                      );
+                    }}
+                  />
                 )}
               </div>
             </label>