show operation not found

1 files changed, 35 insertions, 0 deletions

diff --git a/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx b/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx
index 91c5da718..35fb94a6c 100644
--- a/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx
+++ b/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx
@@ -52,6 +52,41 @@ export function WithdrawalQRCode({
     if (result.loading) {
       return <Loading />;
     }
+    if (result.type === ErrorType.CLIENT && result.status === HttpStatusCode.NotFound) {
+      return <div class="relative ml-auto mr-auto transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6">
+        <div>
+          <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100 ">
+            <svg class="h-6 w-6 text-red-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
+            </svg>
+          </div>
+
+          <div class="mt-3 text-center sm:mt-5">
+            <h3 class="text-base font-semibold leading-6 text-gray-900" id="modal-title">
+              <i18n.Translate>Operation not found</i18n.Translate>
+            </h3>
+            <div class="mt-2">
+              <p class="text-sm text-gray-500">
+                <i18n.Translate>
+                  This operation is not known by the server. The operation id is wrong or the
+                  server deleted the operation information before reaching here.
+                </i18n.Translate>
+              </p>
+            </div>
+          </div>
+        </div>
+        <div class="mt-5 sm:mt-6">
+          <button type="button"
+            class="inline-flex w-full justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+            onClick={async (e) => {
+              e.preventDefault();
+              onClose()
+            }}>
+            <i18n.Translate>Cotinue to dashboard</i18n.Translate>
+          </button>
+        </div>
+      </div>
+    }
     return handleNotOkResult(i18n)(result);
   }
   const { data } = result;