some ui fixes

1 files changed, 10 insertions, 6 deletions

diff --git a/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx b/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx
index 15910201e..7266e4de4 100644
--- a/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx
+++ b/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx
@@ -29,6 +29,7 @@ import { useWithdrawalDetails } from "../hooks/access.js";
 import { assertUnreachable } from "./HomePage.js";
 import { QrCodeSection } from "./QrCodeSection.js";
 import { WithdrawalConfirmationQuestion } from "./WithdrawalConfirmationQuestion.js";
+import { Attention } from "../components/Attention.js";
 
 const logger = new Logger("WithdrawalQRCode");
 
@@ -139,18 +140,21 @@ export function WithdrawalQRCode({
   }
 
   if (!data.selected_reserve_pub) {
-    return <div>
-      the exchange is selcted but no reserve pub
-    </div>
+    return <Attention type="danger"
+      title={i18n.str`The operation is incomplete or some step in the withdrawal failed`} >
+      <i18n.Translate>The exchange is selected but no reserve public key found.</i18n.Translate>
+    </Attention>
   }
 
   const account = !data.selected_exchange_account ? undefined : parsePaytoUri(data.selected_exchange_account)
 
   if (!account) {
-    return <div>
-      the exchange is selcted but no account
-    </div>
+    return <Attention type="danger"
+      title={i18n.str`The operation is incomplete or some step in the withdrawal failed`} >
+      <i18n.Translate>The exchange is selected but the exchange payto URI is missing or invalid.</i18n.Translate>
+    </Attention>
   }
+
   return (
     <WithdrawalConfirmationQuestion
       withdrawUri={withdrawUri}