Skip to content

Commit

Permalink
frontend: display offline errors on account summary
Browse files Browse the repository at this point in the history 
Collect status.offlineError of all different accounts and if there
are any, render the errors instead of the account summary.

This can happen if Tor is down or misconfigured or internet not
reachable.
  • Loading branch information
@thisconnect
thisconnect committed Feb 6, 2023
1 parent bbd21b8 commit ebac345
Showing 1 changed file with 68 additions and 55 deletions.
123 changes: 68 additions & 55 deletions frontends/web/src/routes/account/summary/accountssummary.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import { FiatConversion } from '../../../components/rates/rates';
import { Check } from '../../../components/icon/icon';
import Logo from '../../../components/icon/logo';
import Spinner from '../../../components/spinner/ascii';
import { Spinner as ErrorSpinner } from '../../../components/spinner/Spinner';
import { debug } from '../../../utils/env';
import { Chart } from './chart';
import { AddBuyOnEmptyBalances } from '../info/buyCTA';
Expand All @@ -52,6 +53,7 @@ interface State {
exported: string;
balances?: Balances;
syncStatus?: SyncStatus;
offlineErrors: string[];
totalBalancePerCoin?: accountApi.ITotalBalance;
}

Expand All @@ -75,6 +77,7 @@ class AccountsSummary extends Component<Props, State> {
public readonly state: State = {
data: undefined,
exported: '',
offlineErrors: [],
totalBalancePerCoin: undefined,
};
private unsubscribe!: () => void;
Expand Down Expand Up @@ -165,6 +168,10 @@ class AccountsSummary extends Component<Props, State> {

private async onStatusChanged(code: string, initial: boolean = false) {
const status = await accountApi.getStatus(code);
const { offlineErrors } = this.state;
if (status.offlineError && !offlineErrors.includes(status.offlineError)) {
this.setState({ offlineErrors: [...offlineErrors, status.offlineError] });
}
if (status.disabled) {
return;
}
Expand Down Expand Up @@ -296,7 +303,7 @@ class AccountsSummary extends Component<Props, State> {

public render() {
const { t, accounts } = this.props;
const { exported, data, balances } = this.state;
const { exported, data, balances, offlineErrors } = this.state;
return (
<div className="contentWithGuide">
<div className="container">
Expand All @@ -322,60 +329,66 @@ class AccountsSummary extends Component<Props, State> {
)}
</Header>
<div className="content padded">
<Chart
data={data}
noDataPlaceholder={
(accounts.length === Object.keys(balances || {}).length) ? (
<AddBuyOnEmptyBalances balances={balances} />
) : undefined
} />
<div className={style.balanceTable}>
<table className={style.table}>
<colgroup>
<col width="33%" />
<col width="33%" />
<col width="*" />
</colgroup>
<thead>
<tr>
<th>{t('accountSummary.name')}</th>
<th>{t('accountSummary.balance')}</th>
<th>{t('accountSummary.fiatBalance')}</th>
</tr>
</thead>
<tbody>
{ accounts.length > 0 ? (
this.renderAccountSummary()
) : (
<tr>
<td colSpan={3} className={style.noAccount}>
{t('accountSummary.noAccount')}
</td>
</tr>
)}
</tbody>
<tfoot>
<tr>
<th>
<strong>{t('accountSummary.total')}</strong>
</th>
<td colSpan={2}>
{(data && data.formattedChartTotal !== null) ? (
<>
<strong>
{data.formattedChartTotal}
</strong>
{' '}
<span className={style.coinUnit}>
{data.chartFiat}
</span>
</>
) : (<Skeleton />) }
</td>
</tr>
</tfoot>
</table>
</div>
{offlineErrors.length ? (
<ErrorSpinner text={offlineErrors.join('\n')} />
) : (
<>
<Chart
data={data}
noDataPlaceholder={
(accounts.length === Object.keys(balances || {}).length) ? (
<AddBuyOnEmptyBalances balances={balances} />
) : undefined
} />
<div className={style.balanceTable}>
<table className={style.table}>
<colgroup>
<col width="33%" />
<col width="33%" />
<col width="*" />
</colgroup>
<thead>
<tr>
<th>{t('accountSummary.name')}</th>
<th>{t('accountSummary.balance')}</th>
<th>{t('accountSummary.fiatBalance')}</th>
</tr>
</thead>
<tbody>
{ accounts.length > 0 ? (
this.renderAccountSummary()
) : (
<tr>
<td colSpan={3} className={style.noAccount}>
{t('accountSummary.noAccount')}
</td>
</tr>
)}
</tbody>
<tfoot>
<tr>
<th>
<strong>{t('accountSummary.total')}</strong>
</th>
<td colSpan={2}>
{(data && data.formattedChartTotal !== null) ? (
<>
<strong>
{data.formattedChartTotal}
</strong>
{' '}
<span className={style.coinUnit}>
{data.chartFiat}
</span>
</>
) : (<Skeleton />) }
</td>
</tr>
</tfoot>
</table>
</div>
</>
)}
</div>
</div>
</div>
Expand Down

0 comments on commit ebac345

Please sign in to comment.