renterd alert hints, fix simple mode allowance, website streamline downloads

.changeset/dull-plants-fail.md

@@ -0,0 +1,5 @@
+---
+'renterd': minor
+---
+
+Alerts are now more concise and show an actionable hint when available.

.changeset/slimy-games-roll.md

@@ -0,0 +1,5 @@
+---
+'website': minor
+---
+
+Core software can now be downloaded from the main rent, host, and wallet pages. The copy has also been improved.

.changeset/twenty-ears-clap.md

@@ -0,0 +1,5 @@
+---
+'renterd': minor
+---
+
+Fixed an issue where the allowance does not get set the first time saving settings in simple mode.

apps/renterd/contexts/config/index.tsx

@@ -339,31 +339,31 @@ export function useConfigMain() {
       maxStoragePriceTBMonth?.gt(0) &&
       storageTB?.gt(0) &&
       maxDownloadPriceTB?.gt(0) &&
-      downloadTBMonth?.gt(0) &&
-      maxUploadPriceTB?.gt(0) &&
-      uploadTBMonth?.gt(0)
+      maxUploadPriceTB?.gt(0)
     )
   }, [
     isAutopilotEnabled,
     maxStoragePriceTBMonth,
     storageTB,
     maxDownloadPriceTB,
-    downloadTBMonth,
     maxUploadPriceTB,
-    uploadTBMonth,
   ])
 
   const estimatedSpendingPerMonth = useMemo(() => {
     if (!canEstimate) {
       return new BigNumber(0)
     }
+    // if not set, just show estimate with 1 TB up/down
+    // in simple mode these are the defaults that get set anyway
+    const _downloadTBMonth = downloadTBMonth?.gt(0) ? downloadTBMonth : 1
+    const _uploadTBMonth = uploadTBMonth?.gt(0) ? uploadTBMonth : 1
     const storageCostPerMonth = includeRedundancyMaxStoragePrice
       ? maxStoragePriceTBMonth.times(storageTB)
       : maxStoragePriceTBMonth.times(redundancyMultiplier).times(storageTB)
-    const downloadCostPerMonth = maxDownloadPriceTB.times(downloadTBMonth)
+    const downloadCostPerMonth = maxDownloadPriceTB.times(_downloadTBMonth)
     const uploadCostPerMonth = includeRedundancyMaxUploadPrice
-      ? maxUploadPriceTB.times(uploadTBMonth)
-      : maxUploadPriceTB.times(redundancyMultiplier).times(uploadTBMonth)
+      ? maxUploadPriceTB.times(_uploadTBMonth)
+      : maxUploadPriceTB.times(redundancyMultiplier).times(_uploadTBMonth)
     const totalCostPerMonth = storageCostPerMonth
       .plus(downloadCostPerMonth)
       .plus(uploadCostPerMonth)

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">

apps/website/components/CalloutCoreSoftware.tsx

@@ -4,19 +4,24 @@ import {
   Paragraph,
   Link,
   Badge,
+  Text,
 } from '@siafoundation/design-system'
 import Image from 'next/image'
+import { GitHubRelease } from '@siafoundation/data-sources'
+import { DownloadSelect } from './DownloadSelect'
 
 type Props = {
   name: string
   status?: string
   description: React.ReactNode
   href?: string
   daemon?: 'renterd' | 'hostd' | 'walletd'
+  release?: GitHubRelease
   newTab?: boolean
   image?: string
   background: string
   children?: React.ReactNode
+  testnetOnly?: boolean
 }
 
 export function CalloutCoreSoftware({
@@ -26,8 +31,10 @@ export function CalloutCoreSoftware({
   href,
   image,
   background,
+  release,
   children,
   newTab,
+  testnetOnly,
 }: Props) {
   return (
     <PatternedPanel background={background}>
@@ -45,15 +52,17 @@ export function CalloutCoreSoftware({
         <Paragraph>{description}</Paragraph>
         <div className="flex justify-between gap-4">
           {!children && (
-            <Link
-              href={href || '#'}
-              underline="accent"
-              target={newTab ? '_blank' : undefined}
-              disabled={!href}
-              size="16"
-            >
-              {href ? 'Get started' : 'Coming soon'}
-            </Link>
+            <div className="flex justify-end gap-4">
+              <Link
+                href={href}
+                underline="accent"
+                target={newTab ? '_blank' : undefined}
+                disabled={!href}
+                size="16"
+              >
+                {href ? `Learn more about the software` : 'Coming soon'}
+              </Link>
+            </div>
           )}
         </div>
         {image && (
@@ -70,6 +79,18 @@ export function CalloutCoreSoftware({
         )}
         {children}
       </div>
+      {release && (
+        <div className="@container absolute bottom-0 w-full flex justify-between items-center px-3 py-2 bg-white dark:bg-graydark-200 border-t-2 border-graydark-400">
+          <Text size="14" weight="bold" className="hidden @md:flex">
+            Downloads
+          </Text>
+          <DownloadSelect
+            daemon="renterd"
+            release={release}
+            testnetOnly={testnetOnly}
+          />
+        </div>
+      )}
     </PatternedPanel>
   )
 }

apps/website/components/CalloutHostd.tsx

@@ -1,15 +1,21 @@
 import { routes } from '../config/routes'
 import { CalloutCoreSoftware } from './CalloutCoreSoftware'
 import { patterns, getAssetUrl } from '../content/assets'
+import { GitHubRelease } from '@siafoundation/data-sources'
 
-export function CalloutHostd() {
+type Props = {
+  release: GitHubRelease
+}
+
+export function CalloutHostd({ release }: Props) {
   return (
     <CalloutCoreSoftware
       name="hostd"
       description={
         'A next-generation Sia host, developed by the Sia Foundation. Built for performance and reliability.'
       }
       daemon="hostd"
+      release={release}
       href={routes.software.hostd}
       image={getAssetUrl('assets/hostd/metrics.png')}
       background={patterns.nateTrickle}

apps/website/components/CalloutRenterd.tsx

@@ -1,15 +1,21 @@
 import { routes } from '../config/routes'
 import { CalloutCoreSoftware } from './CalloutCoreSoftware'
 import { patterns, getAssetUrl } from '../content/assets'
+import { GitHubRelease } from '@siafoundation/data-sources'
 
-export function CalloutRenterd() {
+type Props = {
+  release: GitHubRelease
+}
+
+export function CalloutRenterd({ release }: Props) {
   return (
     <CalloutCoreSoftware
       name="renterd"
       description={
         'A next-generation Sia renter, developed by the Sia Foundation. Smart defaults and a highly extensible API.'
       }
       daemon="renterd"
+      release={release}
       href={routes.software.renterd}
       image={getAssetUrl('assets/renterd/files.png')}
       background={patterns.natePath}

apps/website/components/CalloutWalletd.tsx

@@ -1,8 +1,13 @@
 import { routes } from '../config/routes'
 import { CalloutCoreSoftware } from './CalloutCoreSoftware'
 import { patterns, getAssetUrl } from '../content/assets'
+import { GitHubRelease } from '@siafoundation/data-sources'
 
-export function CalloutWalletd() {
+type Props = {
+  release: GitHubRelease
+}
+
+export function CalloutWalletd({ release }: Props) {
   return (
     <CalloutCoreSoftware
       name="walletd"
@@ -11,6 +16,8 @@ export function CalloutWalletd() {
       }
       status="alpha"
       daemon="walletd"
+      release={release}
+      testnetOnly
       href={routes.software.walletd}
       image={getAssetUrl('assets/walletd/send.png')}
       background={patterns.nateTrickle}

apps/website/components/DownloadSelect.tsx

@@ -23,7 +23,9 @@ export function DownloadSelect({ daemon, release, testnetOnly }: Props) {
 
   return (
     <ControlGroup>
-      <Button state="waiting">{release.tag_name}</Button>
+      <Button state="waiting" className="hidden @sm:flex">
+        {release.tag_name}
+      </Button>
       <Select
         value={download.link}
         onChange={(e) =>

apps/website/pages/host/index.tsx

@@ -19,6 +19,7 @@ import { SectionTransparent } from '../../components/SectionTransparent'
 import { SectionProjects } from '../../components/SectionProjects'
 import { CalloutHostd } from '../../components/CalloutHostd'
 import { SectionTutorials } from '../../components/SectionTutorials'
+import { getHostdLatestRelease } from '../../content/releases'
 
 const title = 'Host'
 const description = 'Offer your storage space on the Sia network.'
@@ -30,6 +31,7 @@ export default function Host({
   tutorials,
   thirdParty,
   ideas,
+  release,
 }: Props) {
   return (
     <Layout
@@ -58,17 +60,17 @@ export default function Host({
             className="mt-12 md:mt-12"
           />
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <CalloutHostd />
+            <CalloutHostd release={release} />
             <Callout
-              title="Learn how hosting works"
+              title="Setup guide for hostd"
               background={patterns.bamboo}
               description={
                 <>
                   Learn how to become a host and offer storage on the Sia
-                  network.
+                  network using hostd.
                 </>
               }
-              actionTitle="Learn more"
+              actionTitle="Follow the setup guide"
               actionLink={webLinks.docs.hosting}
               actionNewTab
             />
@@ -142,11 +144,12 @@ export default function Host({
 }
 
 export async function getStaticProps() {
-  const [stats, technical, tutorials, projects] = await Promise.all([
+  const [stats, technical, tutorials, projects, release] = await Promise.all([
     getStats(),
     getFeedContent(['technical'], 8),
     getHostingArticles(),
     getProjects('hosting'),
+    getHostdLatestRelease(),
   ])
   const thirdParty = projects.filter((project) => !project.idea)
   const ideas = projects.filter((project) => project.idea)
@@ -156,6 +159,7 @@ export async function getStaticProps() {
     tutorials,
     thirdParty,
     ideas,
+    release,
     fallback: {
       '/api/stats': stats,
     },