refactor(renterd): remove allowance

apps/renterd/components/Config/ConfigDockedControls.tsx

@@ -0,0 +1,3 @@
+export function ConfigDockedControls() {
+  return null
+}

apps/renterd/components/Config/ConfigStats.tsx → apps/renterd/components/Config/ConfigEstimateOverview.tsx

@@ -8,9 +8,9 @@ import {
 import { TBToBytes, humanBytes, toHastings } from '@siafoundation/units'
 import { useConfig } from '../../contexts/config'
 import { useApp } from '../../contexts/app'
-import { useEstimatedSpending } from './useEstimatedSpending'
+import { useEstimatedSpending } from '../../hooks/useEstimatedSpending'
 
-export function ConfigStats() {
+export function ConfigEstimateOverview() {
   const { autopilotInfo } = useApp()
   const { redundancyMultiplier, storageTB, configViewMode } = useConfig()
 

apps/renterd/components/Config/Layout.tsx

@@ -5,10 +5,10 @@ import {
   RenterdAuthedLayout,
   RenterdAuthedPageLayoutProps,
 } from '../RenterdAuthedLayout'
-import { ConfigStats } from './ConfigStats'
 import { ConfigActions } from './ConfigActions'
 import { ConfigNav } from './ConfigNav'
-import { Recommendations } from './Recommendations'
+import { ConfigDockedControls } from './ConfigDockedControls'
+import { Stickies } from './Stickies'
 
 export const Layout = RenterdAuthedLayout
 export function useLayoutProps(): RenterdAuthedPageLayoutProps {
@@ -18,9 +18,9 @@ export function useLayoutProps(): RenterdAuthedPageLayoutProps {
     routes,
     nav: <ConfigNav />,
     sidenav: <RenterdSidenav />,
-    stats: <ConfigStats />,
     actions: <ConfigActions />,
-    after: <Recommendations />,
+    after: <Stickies />,
+    dockedControls: <ConfigDockedControls />,
     openSettings: () => openDialog('settings'),
     size: '3',
   }

apps/renterd/components/Config/Recommendations.tsx

@@ -171,9 +171,6 @@ export function Recommendations() {
       tip={tip}
       title={
         <>
-          <Text color="amber">
-            <Information20 />
-          </Text>
           <Text size="16" weight="medium" color="subtle">
             {usableHostsCurrent}/{hostTarget50}
           </Text>
@@ -276,39 +273,45 @@ function Layout({
   tip?: React.ReactNode
 }) {
   const el = (
-    <div
-      className={cx(
-        'flex justify-between items-center px-3 py-1.5',
-        maximized && children
-          ? 'border-b border-gray-200 dark:border-graydark-300'
-          : '',
-        maximizeControls ? 'cursor-pointer' : ''
-      )}
-      onClick={() => {
-        if (maximizeControls) {
-          setMaximized(!maximized)
-        }
-      }}
-    >
-      <div className={cx('flex gap-2 items-center')}>{title}</div>
-      {maximizeControls && (
-        <Button variant="ghost" onClick={() => setMaximized(!maximized)}>
-          {maximized ? <Subtract24 /> : <Add24 />}
-        </Button>
-      )}
+    <div className="flex flex-col gap-1 px-3 py-1.5">
+      <div className="flex gap-2 items-center">
+        <Text color="amber">
+          <Information20 />
+        </Text>
+        <Text size="16" weight="medium" color="subtle">
+          Host matching
+        </Text>
+      </div>
+      <div
+        className={cx(
+          'flex justify-between items-center',
+          maximized && children
+            ? 'border-b border-gray-200 dark:border-graydark-300'
+            : '',
+          maximizeControls ? 'cursor-pointer' : ''
+        )}
+        onClick={() => {
+          if (maximizeControls) {
+            setMaximized(!maximized)
+          }
+        }}
+      >
+        <div className="flex gap-2 items-center">{title}</div>
+        {maximizeControls && (
+          <Button variant="ghost" onClick={() => setMaximized(!maximized)}>
+            {maximized ? <Subtract24 /> : <Add24 />}
+          </Button>
+        )}
+      </div>
     </div>
   )
   return (
     <div className="relative">
-      <div className="z-10 absolute top-0 left-1/2 -translate-x-1/2 flex justify-center">
-        <div className="w-[600px] flex flex-col max-h-[600px] bg-gray-50 dark:bg-graydark-50 border-b border-x border-gray-300 dark:border-graydark-400 rounded-b">
-          <ScrollArea>
-            {tip ? <HoverCard trigger={el}>{tip}</HoverCard> : el}
-            {children && (
-              <div data-testid="recommendationsList">{children}</div>
-            )}
-          </ScrollArea>
-        </div>
+      <div className="flex flex-col max-h-[600px] bg-gray-50 dark:bg-graydark-50 border-b border-x border-gray-300 dark:border-graydark-400 rounded-b">
+        <ScrollArea>
+          {tip ? <HoverCard trigger={el}>{tip}</HoverCard> : el}
+          {children && <div data-testid="recommendationsList">{children}</div>}
+        </ScrollArea>
       </div>
     </div>
   )

apps/renterd/components/Config/SpendingEstimate.tsx

@@ -0,0 +1,62 @@
+import { SiacoinField, Text, Tooltip } from '@siafoundation/design-system'
+import { useSpendingEstimateFromEnabledPricingValues } from '../../contexts/config/pricingAndSpendingHooks'
+import { useConfig } from '../../contexts/config'
+import { Information20, PendingFilled20 } from '@siafoundation/react-icons'
+import { spendingFactor } from '../../contexts/config/spendingConfig'
+
+export function SpendingEstimate() {
+  const { form } = useConfig()
+  const storageTB = form.watch('storageTB')
+
+  const estimate = useSpendingEstimateFromEnabledPricingValues()
+
+  return (
+    <div className="relative">
+      <div className="flex flex-col gap-2 bg-gray-50 dark:bg-graydark-50 border-b border-x border-gray-300 dark:border-graydark-400 rounded-b px-3 py-1.5">
+        <div className="flex gap-2 items-center">
+          <Tooltip
+            content={
+              <>
+                The spending estimate is calculated using the current estimated
+                usage and max price values. The estimate assumes spending will
+                be across a distribution of hosts with various prices that fit
+                within max price values, this is modeled with a factor of 1/
+                {spendingFactor}x.
+              </>
+            }
+          >
+            <Text color="amber">
+              <Information20 />
+            </Text>
+          </Tooltip>
+          <Text size="16" weight="medium" color="subtle">
+            Spending estimate
+          </Text>
+        </div>
+        {estimate && storageTB?.gt(0) ? (
+          <SiacoinField
+            tabIndex={-1}
+            className="min-w-[250px]"
+            readOnly
+            sc={estimate.div(storageTB)}
+            size="small"
+            units={`SC per month for ${storageTB.toNumber()} TB`}
+            unitsFiatPostfix={` per month for ${storageTB.toNumber()} TB`}
+            decimalsLimitSc={0}
+            decimalsLimitFiat={2}
+          />
+        ) : (
+          <div className="flex gap-2 items-center">
+            <Text color="contrast">
+              <PendingFilled20 />
+            </Text>
+            <Text size="16" weight="medium">
+              The system will estimate spending once expected usage and pricing
+              fields are filled.
+            </Text>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

apps/renterd/components/Config/Stickies.tsx

@@ -0,0 +1,17 @@
+import { SpendingEstimate } from './SpendingEstimate'
+import { Recommendations } from './Recommendations'
+
+export function Stickies({ children }: { children?: React.ReactNode }) {
+  return (
+    <div className="relative">
+      <div className="z-10 absolute top-0 w-full flex gap-2 justify-end px-3">
+        {/* <Container pad={false} className="flex gap-4 px-3"> */}
+        <div className="flex-1" />
+        <Recommendations />
+        <SpendingEstimate />
+        {/* </Container> */}
+        {children}
+      </div>
+    </div>
+  )
+}

apps/renterd/components/Config/index.tsx

@@ -16,7 +16,6 @@ export function Config() {
   const { form, fields, remoteError, configRef } = useConfig()
 
   const pinnedCurrency = form.watch('pinnedCurrency')
-  const shouldPinAllowance = form.watch('shouldPinAllowance')
   const shouldPinMaxStoragePrice = form.watch('shouldPinMaxStoragePrice')
   const shouldPinMaxUploadPrice = form.watch('shouldPinMaxUploadPrice')
   const shouldPinMaxDownloadPrice = form.watch('shouldPinMaxDownloadPrice')
@@ -29,7 +28,7 @@ export function Config() {
   return remoteError ? (
     <StateConnError />
   ) : (
-    <div ref={configRef} className="px-5 py-6 flex flex-col gap-16">
+    <div ref={configRef} className="px-5 pt-10 pb-6 flex flex-col gap-16">
       <PanelMenuSection title="Storage">
         <ConfigurationPanelSetting
           autoVisibility
@@ -49,41 +48,6 @@ export function Config() {
           form={form}
           fields={fields}
         />
-        <PanelMenuSetting
-          id="allowanceMonthGroup"
-          title="Allowance"
-          description={fields.allowanceMonth.description}
-          control={
-            <div className="flex flex-col gap-1 w-[260px]">
-              <ShouldPinSwitch
-                name="shouldPinAllowance"
-                form={form}
-                fields={fields}
-              />
-              {shouldPinAllowance ? (
-                canUseExchangeRates ? (
-                  <ConfigurationFiat
-                    name="allowanceMonthPinned"
-                    form={form}
-                    fields={fields}
-                    currency={pinnedCurrency || ''}
-                  />
-                ) : (
-                  <PinnedCurrencyWarning
-                    canUseExchangeRates={canUseExchangeRates}
-                    pinnedCurrency={pinnedCurrency}
-                  />
-                )
-              ) : (
-                <ConfigurationSiacoin
-                  name="allowanceMonth"
-                  form={form}
-                  fields={fields}
-                />
-              )}
-            </div>
-          }
-        />
         <ConfigurationPanelSetting
           autoVisibility
           name="periodWeeks"

apps/renterd/contexts/alerts/data.tsx

@@ -259,18 +259,6 @@ export const dataFields: Record<
       )
     } as Render,
   },
-  allowance: {
-    render: function Component({ value }: { value: string }) {
-      return (
-        <div className="flex justify-between w-full gap-2">
-          <Text size="12" color="subtle" ellipsis>
-            allowance
-          </Text>
-          <ValueSc size="12" variant="value" value={new BigNumber(value)} />
-        </div>
-      )
-    } as Render,
-  },
   balance: {
     render: function Component({ value }: { value: string }) {
       return (