From d96a7fe25e5dc2d1b4bae9fdb77934fde9827847 Mon Sep 17 00:00:00 2001
From: Tal Derei <talderei99@gmail.com>
Date: Sat, 25 Jan 2025 19:55:09 -0800
Subject: [PATCH 1/2] auto-reload page on sync error

---
 .../block-sync-status/block-sync-status.tsx   | 24 +++++++++----------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/packages/ui-deprecated/components/ui/block-sync-status/block-sync-status.tsx b/packages/ui-deprecated/components/ui/block-sync-status/block-sync-status.tsx
index b3790f2c0..ce9625871 100644
--- a/packages/ui-deprecated/components/ui/block-sync-status/block-sync-status.tsx
+++ b/packages/ui-deprecated/components/ui/block-sync-status/block-sync-status.tsx
@@ -5,6 +5,7 @@ import { LineWave } from 'react-loader-spinner';
 import { cn } from '../../../lib/utils';
 import { Progress } from '../progress';
 import { useNewBlockDelay, useSyncProgress } from './hooks';
+import { useEffect } from 'react';
 
 export const CondensedBlockSyncStatus = ({
   latestKnownBlockHeight,
@@ -16,7 +17,7 @@ export const CondensedBlockSyncStatus = ({
   error?: unknown;
 }) => {
   if (error) {
-    return <BlockSyncErrorState error={error} />;
+    return <BlockSyncErrorState />;
   }
   if (!latestKnownBlockHeight || !fullSyncHeight) {
     return <AwaitingSyncState genesisSyncing={!fullSyncHeight} />;
@@ -41,10 +42,14 @@ export const CondensedBlockSyncStatus = ({
   );
 };
 
-const BlockSyncErrorState = ({ error }: { error: unknown }) => {
-  const reload = () => {
-    window.location.reload();
-  };
+const BlockSyncErrorState = () => {
+  useEffect(() => {
+    const reloadTimeout = setTimeout(() => {
+      window.location.reload();
+    }, 5000);
+
+    return () => clearTimeout(reloadTimeout);
+  }, []);
 
   return (
     <motion.div
@@ -56,15 +61,8 @@ const BlockSyncErrorState = ({ error }: { error: unknown }) => {
       <div className='absolute w-full px-2'>
         <div className='mt-[-5.5px] flex gap-2'>
           <span className='font-mono text-[10px] text-red-300'>
-            Block sync error: {String(error)}
+            Sync error detected. Reloading page...
           </span>
-          <button
-            type='button'
-            className='border-none bg-none font-mono text-[10px] text-red-300 underline'
-            onClick={reload}
-          >
-            Reload
-          </button>
         </div>
       </div>
     </motion.div>

From bd66a2140b6945856261d05fcca5d6d5f696b925 Mon Sep 17 00:00:00 2001
From: Tal Derei <talderei99@gmail.com>
Date: Sun, 26 Jan 2025 14:37:48 -0800
Subject: [PATCH 2/2] add back reload button

---
 .../block-sync-status/block-sync-status.tsx   | 20 ++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/packages/ui-deprecated/components/ui/block-sync-status/block-sync-status.tsx b/packages/ui-deprecated/components/ui/block-sync-status/block-sync-status.tsx
index ce9625871..cd3d66386 100644
--- a/packages/ui-deprecated/components/ui/block-sync-status/block-sync-status.tsx
+++ b/packages/ui-deprecated/components/ui/block-sync-status/block-sync-status.tsx
@@ -5,7 +5,6 @@ import { LineWave } from 'react-loader-spinner';
 import { cn } from '../../../lib/utils';
 import { Progress } from '../progress';
 import { useNewBlockDelay, useSyncProgress } from './hooks';
-import { useEffect } from 'react';
 
 export const CondensedBlockSyncStatus = ({
   latestKnownBlockHeight,
@@ -43,13 +42,9 @@ export const CondensedBlockSyncStatus = ({
 };
 
 const BlockSyncErrorState = () => {
-  useEffect(() => {
-    const reloadTimeout = setTimeout(() => {
-      window.location.reload();
-    }, 5000);
-
-    return () => clearTimeout(reloadTimeout);
-  }, []);
+  const reload = () => {
+    window.location.reload();
+  };
 
   return (
     <motion.div
@@ -61,8 +56,15 @@ const BlockSyncErrorState = () => {
       <div className='absolute w-full px-2'>
         <div className='mt-[-5.5px] flex gap-2'>
           <span className='font-mono text-[10px] text-red-300'>
-            Sync error detected. Reloading page...
+            Block sync error. Ensure your internet connection is stable.
           </span>
+          <button
+            type='button'
+            className='border-none bg-none font-mono text-[10px] text-red-300 underline'
+            onClick={reload}
+          >
+            Reload
+          </button>
         </div>
       </div>
     </motion.div>