From 40419ce8372c80c928b71b80a78bd6bb561288e3 Mon Sep 17 00:00:00 2001
From: Alex Freska <alex.freska@gmail.com>
Date: Fri, 1 Dec 2023 10:30:10 -0500
Subject: [PATCH] fix: renterd uploads require sync

---
 .changeset/shiny-clouds-obey.md               |   5 +
 .../Files/FilesFilterDirectoryMenu/index.tsx  |   4 +-
 .../FilesStatsMenu/FilesStatsMenuWarnings.tsx | 111 +++++++++++++++---
 .../renterd/components/Files/useCanUpload.tsx |   5 +-
 4 files changed, 102 insertions(+), 23 deletions(-)
 create mode 100644 .changeset/shiny-clouds-obey.md

diff --git a/.changeset/shiny-clouds-obey.md b/.changeset/shiny-clouds-obey.md
new file mode 100644
index 000000000..f3c8413eb
--- /dev/null
+++ b/.changeset/shiny-clouds-obey.md
@@ -0,0 +1,5 @@
+---
+'renterd': minor
+---
+
+File uploads are now disabled if the blockchain is not fully synced.
diff --git a/apps/renterd/components/Files/FilesFilterDirectoryMenu/index.tsx b/apps/renterd/components/Files/FilesFilterDirectoryMenu/index.tsx
index 50a9a06d7..eac979399 100644
--- a/apps/renterd/components/Files/FilesFilterDirectoryMenu/index.tsx
+++ b/apps/renterd/components/Files/FilesFilterDirectoryMenu/index.tsx
@@ -31,8 +31,6 @@ export function FilesFilterDirectoryMenu() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [debouncedSearch])
 
-  console.log('hi')
-
   return (
     <div className="flex gap-1 flex-1">
       <TextField
@@ -41,7 +39,7 @@ export function FilesFilterDirectoryMenu() {
         placeholder="Filter files in current directory"
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
-        className="w-full"
+        className="w-full !pl-0"
       />
       {!!search.length && (
         <>
diff --git a/apps/renterd/components/Files/FilesStatsMenu/FilesStatsMenuWarnings.tsx b/apps/renterd/components/Files/FilesStatsMenu/FilesStatsMenuWarnings.tsx
index 8e52b7443..0ed8d8c22 100644
--- a/apps/renterd/components/Files/FilesStatsMenu/FilesStatsMenuWarnings.tsx
+++ b/apps/renterd/components/Files/FilesStatsMenu/FilesStatsMenuWarnings.tsx
@@ -1,5 +1,6 @@
 import {
   Button,
+  Code,
   Paragraph,
   Popover,
   Separator,
@@ -8,15 +9,74 @@ import {
 import { Warning16 } from '@siafoundation/react-icons'
 import { useContractSetMismatch } from '../checks/useContractSetMismatch'
 import { useMemo } from 'react'
+import { useSyncStatus } from '../../../hooks/useSyncStatus'
+import { useAutopilotNotConfigured } from '../checks/useAutopilotNotConfigured'
+import { useNotEnoughContracts } from '../checks/useNotEnoughContracts'
 
 export function FilesStatsMenuWarnings() {
+  const syncStatus = useSyncStatus()
   const contractSetMismatch = useContractSetMismatch()
+  const autopilotNotConfigured = useAutopilotNotConfigured()
+  const notEnoughContracts = useNotEnoughContracts()
+
+  const syncStatusEl = useMemo(() => {
+    if (!syncStatus.isSynced) {
+      return (
+        <div className="flex flex-col gap-1">
+          <Text size="12" font="mono" weight="medium" color="amber">
+            Uploads are disabled until renterd is synced.
+          </Text>
+          <Paragraph size="12">
+            The blockchain must be fully synced before uploading files. This can
+            take a while depending on your hardware and network connection.
+          </Paragraph>
+        </div>
+      )
+    }
+    return null
+  }, [syncStatus.isSynced])
+
+  const autopilotNotConfiguredEl = useMemo(() => {
+    if (autopilotNotConfigured.active) {
+      return (
+        <div className="flex flex-col gap-1">
+          <Text size="12" font="mono" weight="medium" color="amber">
+            Uploads are disabled until settings are configured.
+          </Text>
+          <Paragraph size="12">
+            Before you can upload files you must configure your settings. Once
+            configured, <Code>renterd</Code> will find contracts with hosts
+            based on the settings you choose. <Code>renterd</Code> will also
+            repair your data as hosts come and go.
+          </Paragraph>
+        </div>
+      )
+    }
+    return null
+  }, [autopilotNotConfigured.active])
+
+  const notEnoughContractsEl = useMemo(() => {
+    if (notEnoughContracts.active) {
+      return (
+        <div className="flex flex-col gap-1">
+          <Text size="12" font="mono" weight="medium" color="amber">
+            Uploads are disabled until settings are configured.
+          </Text>
+          <Paragraph size="12">
+            There are not enough contracts to upload data yet. Redundancy is
+            configured to use {notEnoughContracts.required} shards which means
+            at least that many contracts are required.
+          </Paragraph>
+        </div>
+      )
+    }
+    return null
+  }, [notEnoughContracts])
 
   const contractSetMismatchEl = useMemo(() => {
-    // warn about contract set mismatch
     if (contractSetMismatch.active) {
       return (
-        <div className="flex flex-col gap-2">
+        <div className="flex flex-col gap-1">
           <Text size="12" font="mono" weight="medium" color="amber">
             Uploaded data will not be managed by autopilot.
           </Text>
@@ -33,22 +93,35 @@ export function FilesStatsMenuWarnings() {
     return null
   }, [contractSetMismatch.active])
 
-  if (!contractSetMismatchEl) {
-    return null
-  }
-
-  return (
-    <>
-      <Popover
-        trigger={
-          <Button variant="ghost" icon="contrast" color="amber">
-            <Warning16 />
-          </Button>
-        }
-      >
-        <div className="px-1 py-2">{contractSetMismatchEl}</div>
-      </Popover>
-      <Separator variant="vertical" className="h-full" />
-    </>
+  const warningList = useMemo(
+    () =>
+      [
+        syncStatusEl,
+        autopilotNotConfiguredEl,
+        notEnoughContractsEl,
+        contractSetMismatchEl,
+      ].filter(Boolean),
+    [
+      syncStatusEl,
+      autopilotNotConfiguredEl,
+      notEnoughContractsEl,
+      contractSetMismatchEl,
+    ]
   )
+
+  if (warningList.length)
+    return (
+      <>
+        <Popover
+          trigger={
+            <Button variant="ghost" icon="contrast" color="amber">
+              <Warning16 />
+            </Button>
+          }
+        >
+          <div className="flex flex-col gap-3 px-1 py-2">{warningList}</div>
+        </Popover>
+        <Separator variant="vertical" className="h-full" />
+      </>
+    )
 }
diff --git a/apps/renterd/components/Files/useCanUpload.tsx b/apps/renterd/components/Files/useCanUpload.tsx
index 13069b02f..7811a3eec 100644
--- a/apps/renterd/components/Files/useCanUpload.tsx
+++ b/apps/renterd/components/Files/useCanUpload.tsx
@@ -1,14 +1,17 @@
+import { useSyncStatus } from '../../hooks/useSyncStatus'
 import { useFiles } from '../../contexts/files'
 import { useAutopilotNotConfigured } from './checks/useAutopilotNotConfigured'
 import { useNotEnoughContracts } from './checks/useNotEnoughContracts'
 
 export function useCanUpload() {
   const { isViewingABucket } = useFiles()
+  const syncStatus = useSyncStatus()
   const autopilotNotConfigured = useAutopilotNotConfigured()
   const notEnoughContracts = useNotEnoughContracts()
   return (
     isViewingABucket &&
     !autopilotNotConfigured.active &&
-    !notEnoughContracts.active
+    !notEnoughContracts.active &&
+    syncStatus.isSynced
   )
 }