1 files changed, 20 insertions, 0 deletions
diff --git a/packages/demobank-ui/src/components/Cashouts/views.tsx b/packages/demobank-ui/src/components/Cashouts/views.tsx
index 32fe0aa9e..89f173b0d 100644
--- a/packages/demobank-ui/src/components/Cashouts/views.tsx
+++ b/packages/demobank-ui/src/components/Cashouts/views.tsx
@@ -20,6 +20,8 @@ import { State } from "./index.js";
 import { format } from "date-fns";
 import { Amounts } from "@gnu-taler/taler-util";
 import { RenderAmount } from "../../pages/PaytoWireTransferForm.js";
+import { assertUnreachable } from "../Routing.js";
+import { Attention } from "../Attention.js";
 
 export function LoadingUriView({ error }: State.LoadingUriError): VNode {
   const { i18n } = useTranslationContext();
@@ -30,6 +32,24 @@ export function LoadingUriView({ error }: State.LoadingUriError): VNode {
     </div>
   );
 }
+export function FailedView({ error }: State.Failed) {
+  const { i18n } = useTranslationContext();
+  switch (error.case) {
+    case "cashout-not-supported": return <Attention type="danger"
+      title={i18n.str`Cashout not supported.`}>
+      <div class="mt-2 text-sm text-red-700">
+        {error.detail.hint}
+      </div>
+    </Attention>
+    case "account-not-found": return <Attention type="danger"
+      title={i18n.str`Account not found.`}>
+      <div class="mt-2 text-sm text-red-700">
+        {error.detail.hint}
+      </div>
+    </Attention>
+    default: assertUnreachable(error)
+  }
+}
 
 export function ReadyView({ cashouts, onSelected }: State.Ready): VNode {
   const { i18n } = useTranslationContext();