From 45aceaba22c0568d0d3a19fca7999237bf37dc34 Mon Sep 17 00:00:00 2001
From: Max Korsunov <maxkors2014@gmail.com>
Date: Tue, 22 Oct 2024 08:46:31 +0200
Subject: [PATCH] fix(ui): add refresh button to block sync status (#1861)

---
 .../block-sync-status/block-sync-status.tsx   | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/packages/ui/components/ui/block-sync-status/block-sync-status.tsx b/packages/ui/components/ui/block-sync-status/block-sync-status.tsx
index a383b5ea95..b3790f2c0e 100644
--- a/packages/ui/components/ui/block-sync-status/block-sync-status.tsx
+++ b/packages/ui/components/ui/block-sync-status/block-sync-status.tsx
@@ -42,6 +42,10 @@ export const CondensedBlockSyncStatus = ({
 };
 
 const BlockSyncErrorState = ({ error }: { error: unknown }) => {
+  const reload = () => {
+    window.location.reload();
+  };
+
   return (
     <motion.div
       className='flex w-full select-none flex-col'
@@ -49,9 +53,18 @@ const BlockSyncErrorState = ({ error }: { error: unknown }) => {
       animate={{ opacity: 1, transition: { duration: 0.5, ease: 'easeOut' } }}
     >
       <Progress status='error' value={100} shape='squared' />
-      <div className='absolute flex w-full justify-between px-2'>
-        <div className='mt-[-5.5px] font-mono text-[10px] text-red-300'>
-          Block sync error: {String(error)}
+      <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)}
+          </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>