feat: renterd alert hints

SiaFoundation · Oct 27, 2023 · 000bbe5 · 000bbe5
1 parent ea3d2f4
commit 000bbe5
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 31 deletions.
diff --git a/.changeset/dull-plants-fail.md b/.changeset/dull-plants-fail.md
@@ -0,0 +1,5 @@
+---
+'renterd': minor
+---
+
+Alerts are now more concise and show an actionable hint when available.
diff --git a/apps/renterd/dialogs/AlertsDialog.tsx b/apps/renterd/dialogs/AlertsDialog.tsx
@@ -1,4 +1,8 @@
 import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
   AlertsDialog as DSAlertsDialog,
   Link,
   ScrollArea,
@@ -89,10 +93,12 @@ export function AlertsDialog({ open, onOpenChange }: Props) {
 }
 
 const dataFieldOrder = [
+  'hint',
+  'error',
   'origin',
   'hostKey',
   'contractID',
-  'account',
+  'accountID',
   'slabKey',
   'additions',
   'removals',
@@ -273,6 +279,41 @@ const dataFields: Record<
       )
     },
   },
+  error: {
+    render: ({ value }: { value: string }) => (
+      <div className="flex flex-col w-full gap-2">
+        <Accordion type="single">
+          <AccordionItem value="error" variant="ghost">
+            <AccordionTrigger>
+              <Text color="subtle" ellipsis>
+                error
+              </Text>
+            </AccordionTrigger>
+            <AccordionContent>
+              <Text color="contrast">{value}</Text>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </div>
+    ),
+  },
+  hint: {
+    render: ({ value }: { value: string }) => (
+      <div className="flex flex-col w-full gap-2">
+        <Text color="contrast">{value}</Text>
+      </div>
+    ),
+  },
+  allowance: {
+    render: ({ value }: { value: string }) => (
+      <div className="flex justify-between w-full gap-2">
+        <Text color="subtle" ellipsis>
+          allowance
+        </Text>
+        <ValueSc variant="value" value={new BigNumber(value)} />
+      </div>
+    ),
+  },
   balance: {
     render: ({ value }: { value: string }) => (
       <div className="flex justify-between w-full gap-2">

diff --git a/apps/website/components/CalloutCoreSoftware.tsx b/apps/website/components/CalloutCoreSoftware.tsx
@@ -37,7 +37,7 @@ export function CalloutCoreSoftware({
   testnetOnly,
 }: Props) {
   return (
-    <PatternedPanel background={background} className="overflow-hidden">
+    <PatternedPanel background={background}>
       <div className="flex flex-col gap-4 pt-8 pb-5 px-6">
         <div className="flex gap-2 items-center">
           <Heading size="40" font="mono" weight="semibold">

diff --git a/apps/website/components/DownloadSelect.tsx b/apps/website/components/DownloadSelect.tsx
@@ -22,34 +22,27 @@ export function DownloadSelect({ daemon, release, testnetOnly }: Props) {
   const [download, setDownload] = useState(downloadLinks[0])
 
   return (
-    <div
-      className="flex"
-      style={{
-        containerType: 'normal',
-      }}
-    >
-      <ControlGroup>
-        <Button state="waiting" className="hidden @sm:flex">
-          {release.tag_name}
-        </Button>
-        <Select
-          value={download.link}
-          onChange={(e) =>
-            setDownload(
-              downloadLinks.find((i) => i.link === e.currentTarget.value)
-            )
-          }
-        >
-          {downloadLinks.map((i) => (
-            <Option key={i.link} value={i.link}>
-              {testnetOnly ? `Testnet only: ${i.title}` : i.title}
-            </Option>
-          ))}
-        </Select>
-        <LinkButton href={download.link} tip="Download binary" icon="contrast">
-          <Download16 />
-        </LinkButton>
-      </ControlGroup>
-    </div>
+    <ControlGroup>
+      <Button state="waiting" className="hidden @sm:flex">
+        {release.tag_name}
+      </Button>
+      <Select
+        value={download.link}
+        onChange={(e) =>
+          setDownload(
+            downloadLinks.find((i) => i.link === e.currentTarget.value)
+          )
+        }
+      >
+        {downloadLinks.map((i) => (
+          <Option key={i.link} value={i.link}>
+            {testnetOnly ? `Testnet only: ${i.title}` : i.title}
+          </Option>
+        ))}
+      </Select>
+      <LinkButton href={download.link} tip="Download binary" icon="contrast">
+        <Download16 />
+      </LinkButton>
+    </ControlGroup>
   )
 }