fix(ui): add refresh button to block sync status (#1861)

penumbra-zone · Oct 22, 2024 · 45aceab · 45aceab
1 parent 8c036f5
commit 45aceab
Showing 1 changed file with 16 additions and 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
@@ -42,16 +42,29 @@ export const CondensedBlockSyncStatus = ({
 };
 
 const BlockSyncErrorState = ({ error }: { error: unknown }) => {
+  const reload = () => {
+    window.location.reload();
+  };
+
   return (
     <motion.div
       className='flex w-full select-none flex-col'
       initial={{ opacity: 0.6 }}
       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>