Merge branch 'frontend-offline-error-component'

Author: thisconnect

frontends/web/src/components/banners/offline-error.tsx

@@ -0,0 +1,57 @@
+/**
+ * Copyright 2025 Shift Crypto AG
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Message } from '../message/message';
+import { getConfig } from '@/utils/config';
+import style from './offline-errors.module.css';
+
+type Props = {
+  error?: string | null;
+}
+
+export const OfflineError = ({
+  error,
+}: Props) => {
+
+  const { t } = useTranslation();
+  const [usesProxy, setUsesProxy] = useState<boolean>();
+
+  useEffect(() => {
+    getConfig().then(({ backend }) => setUsesProxy(backend.proxy.useProxy));
+  }, []);
+
+  // Status: offline error
+  const offlineErrorTextLines: string[] = [];
+  if (error) {
+    offlineErrorTextLines.push(t('account.reconnecting')); // Lost connection, trying to reconnect…
+    offlineErrorTextLines.push(error);
+    if (usesProxy) {
+      offlineErrorTextLines.push(t('account.maybeProxyError'));
+    }
+  }
+
+  if (!error) {
+    return null;
+  }
+
+  return (
+    <Message type="error" className={style.status}>
+      {offlineErrorTextLines.join('\n')}
+    </Message>
+  );
+};

frontends/web/src/components/banners/offline-errors.module.css

@@ -0,0 +1,3 @@
+.status {
+  white-space: pre-line;
+}

frontends/web/src/routes/account/account.tsx

@@ -40,7 +40,6 @@ import { isBitcoinBased } from './utils';
 import { MultilineMarkup } from '@/utils/markup';
 import { Dialog } from '@/components/dialog/dialog';
 import { A } from '@/components/anchor/anchor';
-import { getConfig } from '@/utils/config';
 import { i18n } from '@/i18n/i18n';
 import { ContentWrapper } from '@/components/contentwrapper/contentwrapper';
 import { GlobalBanners } from '@/components/banners';
@@ -51,6 +50,7 @@ import { Button, Input } from '@/components/forms';
 import { SubTitle } from '@/components/title';
 import { TransactionHistorySkeleton } from '@/routes/account/transaction-history-skeleton';
 import { RatesContext } from '@/contexts/RatesContext';
+import { OfflineError } from '@/components/banners/offline-error';
 import style from './account.module.css';
 
 type Props = {
@@ -95,7 +95,6 @@ const RemountAccount = ({
   );
   const syncedAddressesCount = useSubscribe(syncAddressesCount(code));
   const [transactions, setTransactions] = useState<accountApi.TTransactions>();
-  const [usesProxy, setUsesProxy] = useState<boolean>();
   const [detailID, setDetailID] = useState<accountApi.ITransaction['internalID'] | null>(null);
   const [showSearchBar, setShowSearchBar] = useState<boolean>(false);
   const [searchTerm, setSearchTerm] = useState<string>('');
@@ -133,10 +132,6 @@ const RemountAccount = ({
     });
   }, [transactions, debouncedSearchTerm]);
 
-  useEffect(() => {
-    getConfig().then(({ backend }) => setUsesProxy(backend.proxy.useProxy));
-  }, []);
-
   const onAccountChanged = useCallback((status: accountApi.IStatus | undefined) => {
     if (status === undefined || status.fatalError) {
       return;
@@ -190,16 +185,6 @@ const RemountAccount = ({
     );
   }
 
-  // Status: offline error
-  const offlineErrorTextLines: string[] = [];
-  if (status !== undefined && status.offlineError !== null) {
-    offlineErrorTextLines.push(t('account.reconnecting'));
-    offlineErrorTextLines.push(status.offlineError);
-    if (usesProxy) {
-      offlineErrorTextLines.push(t('account.maybeProxyError'));
-    }
-  }
-
   // Status: not synced
   const notSyncedText = (status !== undefined && !status.synced && syncedAddressesCount !== undefined && syncedAddressesCount > 1) ? (
     '\n' + t('account.syncedAddressesCount', {
@@ -232,13 +217,8 @@ const RemountAccount = ({
       <GuidedContent>
         <Main>
           <ContentWrapper>
+            <OfflineError error={status?.offlineError} />
             <GlobalBanners code={code} devices={devices} />
-            <Message
-              className={style.status}
-              hidden={status === undefined || !status.offlineError}
-              type="error">
-              {offlineErrorTextLines.join('\n')}
-            </Message>
             <Message
               className={style.status}
               hidden={status === undefined || status.synced || !!status.offlineError}

frontends/web/src/routes/account/summary/accountssummary.tsx

@@ -38,6 +38,7 @@ import { RatesContext } from '@/contexts/RatesContext';
 import { ContentWrapper } from '@/components/contentwrapper/contentwrapper';
 import { GlobalBanners } from '@/components/banners';
 import { BackupReminder } from '@/components/banners/backup';
+import { OfflineError } from '@/components/banners/offline-error';
 
 type TProps = {
   accounts: accountApi.IAccount[];
@@ -63,6 +64,7 @@ export const AccountsSummary = ({
   const [chartData, setChartData] = useState<accountApi.TChartData>();
   const [accountsBalanceSummary, setAccountsBalanceSummary] = useState<accountApi.TAccountsBalanceSummary>();
   const [balances, setBalances] = useState<Balances>();
+  const [offlineError, setOfflineError] = useState<string | null>(null);
 
   const getChartData = useCallback(async () => {
     // replace previous timer if present
@@ -98,6 +100,7 @@ export const AccountsSummary = ({
     if (status.disabled || !mounted.current) {
       return;
     }
+    setOfflineError(status.offlineError);
     if (!status.synced) {
       return accountApi.init(code);
     }
@@ -176,6 +179,7 @@ export const AccountsSummary = ({
       <GuidedContent>
         <Main>
           <ContentWrapper>
+            <OfflineError error={offlineError} />
             <GlobalBanners devices={devices} />
             {accountsByKeystore.map(({ keystore }) => (
               <BackupReminder