diff options
Diffstat (limited to 'packages/demobank-ui/src/pages/AccountPage.tsx')
-rw-r--r-- | packages/demobank-ui/src/pages/AccountPage.tsx | 57 |
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> + <span class="currency">{`${balance.currency}`}</span> + </div> + )} </div> - ) : ( - <div class="large-amount amount"> - {balanceIsDebit ? <b>-</b> : null} - <span class="value">{`${balanceValue}`}</span> - <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> |