1 files changed, 26 insertions, 41 deletions

diff --git a/packages/demobank-ui/src/pages/AccountPage.tsx b/packages/demobank-ui/src/pages/AccountPage.tsx
index bd9a5acd7..c6ec7c88e 100644
--- a/packages/demobank-ui/src/pages/AccountPage.tsx
+++ b/packages/demobank-ui/src/pages/AccountPage.tsx
@@ -20,8 +20,6 @@ import {
   useTranslationContext,
 } from "@gnu-taler/web-util/lib/index.browser";
 import { Fragment, h, VNode } from "preact";
-import { useState } from "preact/hooks";
-import { Cashouts } from "../components/Cashouts/index.js";
 import { Transactions } from "../components/Transactions/index.js";
 import { useAccountDetails } from "../hooks/access.js";
 import { PaymentOptions } from "./PaymentOptions.js";
@@ -44,8 +42,8 @@ export function AccountPage({ account, onLoadNotOk }: Props): VNode {
   }
 
   const { data } = result;
-  const balance = Amounts.parse(data.balance.amount);
-  const errorParsingBalance = !balance;
+  const balance = Amounts.parseOrThrow(data.balance.amount);
+  const debitThreshold = Amounts.parseOrThrow(data.debitThreshold);
   const payto = parsePaytoUri(data.paytoUri);
   if (!payto || !payto.isKnown || payto.targetType !== "iban") {
     return (
@@ -54,7 +52,9 @@ export function AccountPage({ account, onLoadNotOk }: Props): VNode {
   }
   const accountNumber = payto.iban;
   const balanceIsDebit = data.balance.credit_debit_indicator == "debit";
-
+  const limit = balanceIsDebit
+    ? Amounts.sub(debitThreshold, balance).amount
+    : Amounts.add(balance, debitThreshold).amount;
   return (
     <Fragment>
       <div>
@@ -66,44 +66,29 @@ export function AccountPage({ account, onLoadNotOk }: Props): VNode {
         </h1>
       </div>
 
-      {errorParsingBalance ? (
-        <div class="informational informational-fail" style={{ marginTop: 8 }}>
-          <div style={{ display: "flex", justifyContent: "space-between" }}>
-            <p>
-              <b>Server Error: invalid balance</b>
-            </p>
-          </div>
-          <p>Your account is in an invalid state.</p>
-        </div>
-      ) : (
-        <Fragment>
-          <section id="assets">
-            <div class="asset-summary">
-              <h2>{i18n.str`Bank account balance`}</h2>
-              {!balance ? (
-                <div class="large-amount" style={{ color: "gray" }}>
-                  Waiting server response...
-                </div>
-              ) : (
-                <div class="large-amount amount">
-                  {balanceIsDebit ? <b>-</b> : null}
-                  <span class="value">{`${Amounts.stringifyValue(
-                    balance,
-                  )}`}</span>
-                  &nbsp;
-                  <span class="currency">{`${balance.currency}`}</span>
-                </div>
-              )}
+      <section id="assets">
+        <div class="asset-summary">
+          <h2>{i18n.str`Bank account balance`}</h2>
+          {!balance ? (
+            <div class="large-amount" style={{ color: "gray" }}>
+              Waiting server response...
             </div>
-          </section>
-          <section id="payments">
-            <div class="payments">
-              <h2>{i18n.str`Payments`}</h2>
-              <PaymentOptions currency={balance.currency} />
+          ) : (
+            <div class="large-amount amount">
+              {balanceIsDebit ? <b>-</b> : null}
+              <span class="value">{`${Amounts.stringifyValue(balance)}`}</span>
+              &nbsp;
+              <span class="currency">{`${balance.currency}`}</span>
             </div>
-          </section>
-        </Fragment>
-      )}
+          )}
+        </div>
+      </section>
+      <section id="payments">
+        <div class="payments">
+          <h2>{i18n.str`Payments`}</h2>
+          <PaymentOptions limit={limit} />
+        </div>
+      </section>
 
       <section style={{ marginTop: "2em" }}>
         <div class="active">