1 files changed, 36 insertions, 21 deletions

diff --git a/packages/demobank-ui/src/pages/AccountPage.tsx b/packages/demobank-ui/src/pages/AccountPage.tsx
index 5dd820b53..8d29bd933 100644
--- a/packages/demobank-ui/src/pages/AccountPage.tsx
+++ b/packages/demobank-ui/src/pages/AccountPage.tsx
@@ -174,7 +174,8 @@ function Account({ accountLabel }: { accountLabel: string }): VNode {
       }
     }
   }
-  const balance = !data ? undefined : Amounts.parseOrThrow(data.balance.amount);
+  const balance = !data ? undefined : Amounts.parse(data.balance.amount);
+  const errorParsingBalance = data && !balance;
   const accountNumber = !data ? undefined : getIbanFromPayto(data.paytoUri);
   const balanceIsDebit = data && data.balance.credit_debit_indicator == "debit";
 
@@ -216,28 +217,42 @@ function Account({ accountLabel }: { accountLabel: string }): VNode {
           </i18n.Translate>
         </h1>
       </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...
+
+      {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">{`${balanceValue}`}</span>&nbsp;
+                  <span class="currency">{`${balance.currency}`}</span>
+                </div>
+              )}
             </div>
-          ) : (
-            <div class="large-amount amount">
-              {balanceIsDebit ? <b>-</b> : null}
-              <span class="value">{`${balanceValue}`}</span>&nbsp;
-              <span class="currency">{`${balance.currency}`}</span>
+          </section>
+          <section id="payments">
+            <div class="payments">
+              <h2>{i18n.str`Payments`}</h2>
+              <PaymentOptions currency={balance?.currency} />
             </div>
-          )}
-        </div>
-      </section>
-      <section id="payments">
-        <div class="payments">
-          <h2>{i18n.str`Payments`}</h2>
-          <PaymentOptions currency={balance?.currency} />
-        </div>
-      </section>
+          </section>
+        </Fragment>
+      )}
       <section id="main">
         <article>
           <h2>{i18n.str`Latest transactions:`}</h2>