fix: renterd pinned average display

.changeset/chilly-buttons-sell.md

@@ -0,0 +1,5 @@
+---
+'renterd': patch
+---
+
+Fixed an issue where network averages shown on pinned field tips did not follow the currency display preference.

.changeset/shiny-phones-burn.md

@@ -0,0 +1,5 @@
+---
+'@siafoundation/design-system': patch
+---
+
+Fiat fields now show averages and suggestions according to the currency display preference.

apps/hostd/contexts/config/types.ts

@@ -1,5 +1,5 @@
 import { DNSProvider } from '@siafoundation/hostd-types'
-import { SiaCentralCurrency } from '@siafoundation/sia-central-types'
+import { CurrencyId } from '@siafoundation/react-core'
 import BigNumber from 'bignumber.js'
 
 export type ConfigViewMode = 'basic' | 'advanced'
@@ -29,7 +29,7 @@ export const dnsProviderOptions: { value: DNSProvider; label: string }[] = [
 ]
 
 export const defaultValuesSettingsPinned = {
-  pinnedCurrency: '' as SiaCentralCurrency | '',
+  pinnedCurrency: '' as CurrencyId | '',
   pinnedThreshold: new BigNumber(0),
   shouldPinStoragePrice: false,
   storagePricePinned: new BigNumber(0),

apps/renterd-e2e/src/fixtures/beforeTest.ts

@@ -5,13 +5,15 @@ import { configResetAllSettings } from './configResetAllSettings'
 import { setViewMode } from './configViewMode'
 import { Page } from 'playwright'
 import { mockApiSiaScanExchangeRates } from './siascan'
+import { setCurrencyDisplay } from './preferences'
 
 export async function beforeTest(page: Page) {
   await mockApiSiaCentralExchangeRates({ page })
   await mockApiSiaScanExchangeRates({ page })
   await login({ page })
 
   // Reset state.
+  await setCurrencyDisplay(page, 'bothPreferSc')
   await navigateToConfig({ page })
   await configResetAllSettings({ page })
   await setViewMode({ page, state: 'basic' })

apps/renterd-e2e/src/fixtures/preferences.ts

@@ -0,0 +1,11 @@
+import { Page } from 'playwright'
+import { fillSelectInputByName } from './selectInput'
+
+export async function setCurrencyDisplay(
+  page: Page,
+  display: 'sc' | 'fiat' | 'bothPreferSc' | 'bothPreferFiat'
+) {
+  await page.getByLabel('App preferences').click()
+  await fillSelectInputByName(page, 'currencyDisplay', display)
+  await page.getByRole('dialog').getByLabel('close').click()
+}

apps/renterd-e2e/src/specs/config.spec.ts

@@ -9,6 +9,7 @@ import {
 import { clearToasts } from '../fixtures/clearToasts'
 import { clickIfEnabledAndWait, clickIf } from '../fixtures/click'
 import { beforeTest } from '../fixtures/beforeTest'
+import { setCurrencyDisplay } from '../fixtures/preferences'
 
 test.beforeEach(async ({ page }) => {
   await beforeTest(page)
@@ -56,6 +57,33 @@ test('basic field change and save behaviour', async ({ page }) => {
   for (const part of estimateParts) {
     await expect(page.getByText(part)).toBeVisible()
   }
+
+  // Tips are displayed in the correct currency.
+  await expect(
+    page
+      .getByTestId('maxStoragePriceTBMonthGroup')
+      .getByLabel('Network average')
+      .getByText('357')
+  ).toBeVisible()
+  await expect(
+    page
+      .getByTestId('maxStoragePriceTBMonthGroup')
+      .getByLabel('Fit current allowance')
+      .getByText('300')
+  ).toBeVisible()
+  await setCurrencyDisplay(page, 'bothPreferFiat')
+  await expect(
+    page
+      .getByTestId('maxStoragePriceTBMonthGroup')
+      .getByLabel('Network average')
+      .getByText('$3.77')
+  ).toBeVisible()
+  await expect(
+    page
+      .getByTestId('maxStoragePriceTBMonthGroup')
+      .getByLabel('Fit current allowance')
+      .getByText('$3.17')
+  ).toBeVisible()
 })
 
 test('set max prices to fit current allowance', async ({ page }) => {

libs/design-system/package.json

@@ -4,8 +4,7 @@
   "version": "4.6.0",
   "license": "MIT",
   "peerDependencies": {
-    "react": "^18.2.0",
-    "@siafoundation/sia-central-types": "0.1.1"
+    "react": "^18.2.0"
   },
   "dependencies": {
     "@siafoundation/react-icons": "^0.2.3",

libs/design-system/src/app/CurrencyDisplaySelector.tsx

@@ -15,6 +15,8 @@ export function CurrencyDisplaySelector() {
 
   return (
     <Select
+      aria-label="currency display"
+      name="currencyDisplay"
       disabled={!settings.siaCentral}
       value={settings.currencyDisplay}
       onChange={(e) =>

libs/design-system/src/core/SiacoinField.tsx

@@ -5,8 +5,8 @@ import { useCallback, useEffect, useMemo, useState } from 'react'
 import BigNumber from 'bignumber.js'
 import { cx } from 'class-variance-authority'
 import { toFixedMaxString } from '../lib/numbers'
-import { useSiaCentralExchangeRates } from '@siafoundation/sia-central-react'
 import { BaseNumberField } from './BaseNumberField'
+import { useExchangeRate } from '../hooks/useExchangeRate'
 
 type Props = Omit<
   React.ComponentProps<typeof BaseNumberField>,
@@ -23,8 +23,6 @@ type Props = Omit<
   changed?: boolean
 }
 
-const zero = new BigNumber(0)
-
 export function SiacoinField({
   sc: _externalSc,
   placeholder = new BigNumber(100),
@@ -47,19 +45,7 @@ export function SiacoinField({
     [_externalSc]
   )
   const { settings } = useAppSettings()
-  const rates = useSiaCentralExchangeRates({
-    config: {
-      swr: {
-        revalidateOnFocus: false,
-      },
-    },
-  })
-  const rate = useMemo(() => {
-    if (!settings.siaCentral || !rates.data) {
-      return zero
-    }
-    return new BigNumber(rates.data?.rates.sc[settings.currency.id] || zero)
-  }, [rates.data, settings])
+  const rate = useExchangeRate({ currency: settings.currency.id })
   const [active, setActive] = useState<'sc' | 'fiat'>()
   const [localSc, setLocalSc] = useState<string>('')
   const [localFiat, setLocalFiat] = useState<string>('')

libs/design-system/src/form/ConfigurationFiat.tsx

@@ -2,11 +2,12 @@ import { FieldValues, Path, PathValue } from 'react-hook-form'
 import { FieldError } from '../components/Form'
 import { FieldProps } from './configurationFields'
 import { FieldFiat } from './FieldFiat'
-import { SiaCentralCurrency } from '@siafoundation/sia-central-types'
 import { TipNumber } from './TipNumber'
 import { useFormSetField } from './useFormSetField'
-import { currencyOptions } from '@siafoundation/react-core'
+import { CurrencyId } from '@siafoundation/react-core'
 import BigNumber from 'bignumber.js'
+import { useExchangeRate } from '../hooks/useExchangeRate'
+import { useMemo } from 'react'
 
 export function ConfigurationFiat<
   Values extends FieldValues,
@@ -17,7 +18,7 @@ export function ConfigurationFiat<
   fields,
   currency,
 }: FieldProps<Values, Categories> & {
-  currency: SiaCentralCurrency | ''
+  currency: CurrencyId | ''
 }) {
   const field = fields[name]
   const {
@@ -36,11 +37,21 @@ export function ConfigurationFiat<
     fields,
     name,
   })
-  const currencyMeta = currencyOptions.find((c) => c.id === currency)
-  if (!currency || !currencyMeta) {
-    return null
-  }
-  const { prefix, fixed } = currencyMeta
+  const rate = useExchangeRate({ currency })
+  const averageSc = useMemo(
+    () =>
+      average && typeof average !== 'boolean' && rate
+        ? new BigNumber(average).times(rate)
+        : undefined,
+    [average, rate]
+  )
+  const suggestionSc = useMemo(
+    () =>
+      suggestion && typeof suggestion !== 'boolean' && rate
+        ? new BigNumber(suggestion).times(rate)
+        : undefined,
+    [suggestion, rate]
+  )
   return (
     <div className="flex flex-col gap-3 items-end">
       <div className="flex flex-col w-[260px]">
@@ -53,27 +64,25 @@ export function ConfigurationFiat<
             group={false}
             currency={currency}
           />
-          {average && (
+          {averageSc && (
             <TipNumber
-              type="number"
-              format={(val) => `${prefix}${val.toFixed(fixed)}`}
+              type="siacoin"
               label="Network average"
               tip={averageTip || 'Averages provided by Sia Central.'}
-              value={average as BigNumber}
-              decimalsLimit={fixed}
+              value={averageSc}
+              decimalsLimit={0}
               onClick={() => {
                 setField(average as PathValue<Values, Path<Values>>, true)
               }}
             />
           )}
-          {suggestion && suggestionTip && (
+          {suggestionSc && suggestionTip && (
             <TipNumber
-              type="number"
-              format={(val) => `${prefix}${val.toFixed(fixed)}`}
+              type="siacoin"
               label={suggestionLabel || 'Suggestion'}
               tip={suggestionTip}
-              decimalsLimit={fixed}
-              value={suggestion as BigNumber}
+              decimalsLimit={0}
+              value={suggestionSc}
               onClick={() => {
                 setField(suggestion as PathValue<Values, Path<Values>>, true)
               }}

libs/design-system/src/form/FieldFiat.tsx

@@ -7,13 +7,12 @@ import { ChartArea16 } from '@siafoundation/react-icons'
 import { Panel } from '../core/Panel'
 import { Text } from '../core/Text'
 import { toHastings } from '@siafoundation/units'
-import { SiaCentralCurrency } from '@siafoundation/sia-central-types'
-import { currencyOptions, useAppSettings } from '@siafoundation/react-core'
-import { useSiaCentralExchangeRates } from '@siafoundation/sia-central-react'
+import { CurrencyId, currencyOptions } from '@siafoundation/react-core'
 import { useMemo } from 'react'
 import { Tooltip } from '../core/Tooltip'
 import { ValueSc } from '../components/ValueSc'
 import { cx } from 'class-variance-authority'
+import { useExchangeRate } from '../hooks/useExchangeRate'
 
 export function FieldFiat<
   Values extends FieldValues,
@@ -27,24 +26,10 @@ export function FieldFiat<
   group = true,
 }: FieldProps<Values, Categories> & {
   size?: React.ComponentProps<typeof NumberField>['size']
-  currency: SiaCentralCurrency | ''
+  currency: CurrencyId | ''
   group?: boolean
 }) {
-  const { settings } = useAppSettings()
-  const rates = useSiaCentralExchangeRates({
-    disabled: !settings.siaCentral,
-    config: {
-      swr: {
-        revalidateOnFocus: false,
-      },
-    },
-  })
-  const rate = useMemo(() => {
-    if (!settings.siaCentral || !rates.data) {
-      return new BigNumber(0)
-    }
-    return new BigNumber((currency && rates.data?.rates.sc[currency]) || 0)
-  }, [rates.data, settings, currency])
+  const rate = useExchangeRate({ currency })
   const field = fields[name]
   const { placeholder, decimalsLimit = 2, units } = field
   const { setValue, onBlur, error, value } = useRegisterForm({
@@ -56,7 +41,6 @@ export function FieldFiat<
     () => currencyOptions.find((c) => c.id === currency),
     [currency]
   )
-
   const changed = form.formState.dirtyFields[name]
   const el = (
     <div
@@ -118,7 +102,7 @@ function SiacoinPinnedValue({
   rate,
 }: {
   value: BigNumber
-  currency: SiaCentralCurrency | ''
+  currency: CurrencyId | ''
   rate: BigNumber
 }) {
   const available = value && !value.isZero() && rate && !rate.isZero()

libs/design-system/src/hooks/useExchangeRate.tsx

@@ -0,0 +1,33 @@
+import { CurrencyId, useAppSettings } from '@siafoundation/react-core'
+import { useMemo } from 'react'
+import BigNumber from 'bignumber.js'
+import { useSiaCentralExchangeRates } from '@siafoundation/sia-central-react'
+
+type Props = {
+  currency?: CurrencyId | ''
+}
+
+export function useExchangeRate({ currency }: Props): BigNumber {
+  const { settings } = useAppSettings()
+  const rates = useSiaCentralExchangeRates({
+    disabled: !currency || !settings.siaCentral,
+    config: {
+      swr: {
+        revalidateOnFocus: false,
+      },
+    },
+  })
+  const rate = useMemo(() => {
+    if (!settings.siaCentral || !rates.data) {
+      return new BigNumber(0)
+    }
+    return new BigNumber((currency && rates.data?.rates.sc[currency]) || 0)
+  }, [rates.data, settings, currency])
+
+  return rate
+}
+
+export function useActiveExchangeRate(): BigNumber {
+  const { settings } = useAppSettings()
+  return useExchangeRate({ currency: settings.currency.id })
+}

libs/design-system/src/hooks/useSiacoinFiat.tsx

@@ -1,32 +1,18 @@
 import { CurrencyOption, useAppSettings } from '@siafoundation/react-core'
 import { useMemo } from 'react'
 import BigNumber from 'bignumber.js'
-import { useSiaCentralExchangeRates } from '@siafoundation/sia-central-react'
+import { useExchangeRate } from './useExchangeRate'
 
 type Props = {
   sc: BigNumber
 }
 
-const zero = new BigNumber(0)
-
 export function useSiacoinFiat({ sc }: Props): {
   fiat?: BigNumber
   currency?: CurrencyOption
 } {
   const { settings } = useAppSettings()
-  const rates = useSiaCentralExchangeRates({
-    config: {
-      swr: {
-        revalidateOnFocus: false,
-      },
-    },
-  })
-  const rate = useMemo(() => {
-    if (!settings.siaCentral || !rates.data) {
-      return zero
-    }
-    return new BigNumber(rates.data?.rates.sc[settings.currency.id] || zero)
-  }, [rates.data, settings])
+  const rate = useExchangeRate({ currency: settings.currency.id })
   const fiat = useMemo(() => new BigNumber(sc).times(rate), [sc, rate])
 
   if (rate.isZero()) {

libs/design-system/src/index.ts

@@ -163,6 +163,7 @@ export * from './hooks/useServerFilters'
 export * from './hooks/useFormChanged'
 export * from './hooks/useDatasetEmptyState'
 export * from './hooks/useSiacoinFiat'
+export * from './hooks/useExchangeRate'
 export * from './hooks/useOS'
 
 // data