feat: currency display

SiaFoundation · Nov 15, 2023 · ad26bda · ad26bda
1 parent 956a8c7
commit ad26bda
Show file tree

Hide file tree

Showing 31 changed files with 663 additions and 238 deletions.
diff --git a/.changeset/mighty-jokes-joke.md b/.changeset/mighty-jokes-joke.md
@@ -0,0 +1,7 @@
+---
+'hostd': minor
+'renterd': minor
+'walletd': minor
+---
+
+Currency display can now be configured to siacoin, fiat, or both along with a preference for when only one can be displayed.
diff --git a/apps/explorer/components/Layout/Footer.tsx b/apps/explorer/components/Layout/Footer.tsx
@@ -4,7 +4,7 @@ import {
   webLinks,
   Logo,
   ThemeRadio,
-  CurrencySelector,
+  CurrencyFiatSelector,
 } from '@siafoundation/design-system'
 
 export function Footer() {
@@ -48,7 +48,7 @@ export function Footer() {
           </div>
           <div className="flex-1" />
           <div className="flex-1 flex items-center justify-end gap-6">
-            <CurrencySelector />
+            <CurrencyFiatSelector />
             <ThemeRadio className="hidden md:flex" />
           </div>
         </div>

diff --git a/apps/explorer/components/Layout/NavDropdownMenu.tsx b/apps/explorer/components/Layout/NavDropdownMenu.tsx
@@ -7,7 +7,7 @@ import {
   Link,
   DropdownMenuGroup,
   DropdownMenuLabel,
-  CurrencySelector,
+  CurrencyFiatSelector,
   ThemeRadio,
 } from '@siafoundation/design-system'
 import { Menu24 } from '@siafoundation/react-icons'
@@ -53,7 +53,7 @@ export function NavDropdownMenu({ trigger, children, ...props }: Props) {
       <DropdownMenuGroup className="py-1 px-1 w-[120px]">
         <DropdownMenuLabel className="px-1">Settings</DropdownMenuLabel>
         <div className="py-2 px-1">
-          <CurrencySelector />
+          <CurrencyFiatSelector />
         </div>
         <div className="py-2 px-2.5">
           <ThemeRadio />

diff --git a/apps/hostd/contexts/contracts/columns.tsx b/apps/hostd/contexts/contracts/columns.tsx
@@ -1,6 +1,5 @@
 import {
   Text,
-  ValueSc,
   TableColumn,
   ValueCopyable,
   stripPrefix,
@@ -9,6 +8,7 @@ import {
   ContractTimeline,
   ValueNum,
   blockHeightToTime,
+  ValueScFiat,
 } from '@siafoundation/design-system'
 import {
   ArrowUpLeft16,
@@ -201,7 +201,7 @@ export const columns: ContractsTableColumn[] = (
       category: 'financial',
       contentClassName: 'w-[120px] justify-end',
       render: ({ data: { revision } }) => (
-        <ValueSc size="12" value={revision.payout} />
+        <ValueScFiat displayBoth size="12" value={revision.payout} />
       ),
     },
     {
@@ -210,7 +210,11 @@ export const columns: ContractsTableColumn[] = (
       category: 'financial',
       contentClassName: 'w-[120px] justify-end',
       render: ({ data: { revision } }) => (
-        <ValueSc size="12" value={revision.remainingRenterFunds} />
+        <ValueScFiat
+          displayBoth
+          size="12"
+          value={revision.remainingRenterFunds}
+        />
       ),
     },
     {
@@ -219,7 +223,7 @@ export const columns: ContractsTableColumn[] = (
       category: 'financial',
       contentClassName: 'w-[120px] justify-end',
       render: ({ data: { lockedCollateral } }) => (
-        <ValueSc size="12" value={lockedCollateral} />
+        <ValueScFiat displayBoth size="12" value={lockedCollateral} />
       ),
     },
     {
@@ -228,7 +232,7 @@ export const columns: ContractsTableColumn[] = (
       category: 'financial',
       contentClassName: 'w-[120px] justify-end',
       render: ({ data: { usage } }) => (
-        <ValueSc size="12" value={usage.riskedCollateral} />
+        <ValueScFiat displayBoth size="12" value={usage.riskedCollateral} />
       ),
     },
     {
@@ -237,7 +241,7 @@ export const columns: ContractsTableColumn[] = (
       category: 'financial',
       contentClassName: 'w-[120px] justify-end',
       render: ({ data: { usage } }) => (
-        <ValueSc size="12" value={usage.total} />
+        <ValueScFiat displayBoth size="12" value={usage.total} />
       ),
     },
     {
@@ -246,7 +250,7 @@ export const columns: ContractsTableColumn[] = (
       category: 'financial',
       contentClassName: 'w-[120px] justify-end',
       render: ({ data: { usage } }) => (
-        <ValueSc size="12" value={usage.storage} />
+        <ValueScFiat displayBoth size="12" value={usage.storage} />
       ),
     },
     {
@@ -255,7 +259,7 @@ export const columns: ContractsTableColumn[] = (
       category: 'financial',
       contentClassName: 'w-[120px] justify-end',
       render: ({ data: { usage } }) => (
-        <ValueSc size="12" value={usage.ingress} />
+        <ValueScFiat displayBoth size="12" value={usage.ingress} />
       ),
     },
     {
@@ -264,7 +268,7 @@ export const columns: ContractsTableColumn[] = (
       category: 'financial',
       contentClassName: 'w-[120px] justify-end',
       render: ({ data: { usage } }) => (
-        <ValueSc size="12" value={usage.egress} />
+        <ValueScFiat displayBoth size="12" value={usage.egress} />
       ),
     },
     {
@@ -273,15 +277,17 @@ export const columns: ContractsTableColumn[] = (
       category: 'financial',
       contentClassName: 'w-[120px] justify-end',
       render: ({ data: { usage } }) => (
-        <ValueSc size="12" value={usage.accountFunding} />
+        <ValueScFiat displayBoth size="12" value={usage.accountFunding} />
       ),
     },
     {
       id: 'usageRpc',
       label: 'RPC usage',
       category: 'financial',
       contentClassName: 'w-[120px] justify-end',
-      render: ({ data: { usage } }) => <ValueSc size="12" value={usage.rpc} />,
+      render: ({ data: { usage } }) => (
+        <ValueScFiat displayBoth size="12" value={usage.rpc} />
+      ),
     },
   ] as ContractsTableColumn[]
 ).map(

diff --git a/apps/hostd/contexts/metrics/index.tsx b/apps/hostd/contexts/metrics/index.tsx
@@ -7,8 +7,9 @@ import {
   getTimeRange,
   MiBToBytes,
   minutesInMilliseconds,
+  ValueScFiat,
 } from '@siafoundation/design-system'
-import { humanBytes, humanNumber, humanSiacoin } from '@siafoundation/sia-js'
+import { humanBytes, humanNumber } from '@siafoundation/sia-js'
 import { useCallback, useMemo } from 'react'
 import { chartConfigs } from '../../config/charts'
 import { useMetricsPeriod } from '@siafoundation/react-hostd'
@@ -249,7 +250,9 @@ function useMetricsMain() {
             'total'
           ),
         },
-        format: (v) => humanSiacoin(v),
+        formatComponent: function ({ value }) {
+          return <ValueScFiat variant="value" value={new BigNumber(value)} />
+        },
         formatTimestamp,
         disableAnimations,
       },
@@ -282,7 +285,9 @@ function useMetricsMain() {
           locked: chartConfigs.locked,
           risked: chartConfigs.risked,
         },
-        format: (v) => humanSiacoin(v),
+        formatComponent: function ({ value }) {
+          return <ValueScFiat variant="value" value={new BigNumber(value)} />
+        },
         formatTimestamp,
         disableAnimations,
       },
@@ -345,7 +350,9 @@ function useMetricsMain() {
           ingress: chartConfigs.ingress,
           storage: chartConfigs.storage,
         },
-        format: (v) => humanSiacoin(v),
+        formatComponent: function ({ value }) {
+          return <ValueScFiat variant="value" value={new BigNumber(value)} />
+        },
         formatTimestamp,
         disableAnimations,
       },

diff --git a/apps/renterd/components/Config/ConfigStats.tsx b/apps/renterd/components/Config/ConfigStats.tsx
@@ -10,7 +10,7 @@ import { humanBytes, toHastings } from '@siafoundation/sia-js'
 import { useConfig } from '../../contexts/config'
 import { useApp } from '../../contexts/app'
 
-export function AutopilotStats() {
+export function ConfigStats() {
   const { autopilot } = useApp()
   const {
     canEstimate,
@@ -35,7 +35,7 @@ export function AutopilotStats() {
     </Text>
   ) : (
     <ScrollArea>
-      <div className="flex gap-4">
+      <div className="flex gap-4 items-center h-full">
         <Text size="12" font="mono" weight="medium">
           Estimate:
         </Text>

diff --git a/apps/renterd/components/Config/index.tsx b/apps/renterd/components/Config/index.tsx
@@ -4,7 +4,7 @@ import { routes } from '../../config/routes'
 import { useDialog } from '../../contexts/dialog'
 import { RenterdAuthedLayout } from '../RenterdAuthedLayout'
 import { useConfig } from '../../contexts/config'
-import { AutopilotStats } from './ConfigStats'
+import { ConfigStats } from './ConfigStats'
 import { ConfigActions } from './ConfigActions'
 import { ConfigNav } from './ConfigNav'
 
@@ -18,7 +18,7 @@ export function Config() {
       routes={routes}
       nav={<ConfigNav />}
       sidenav={<RenterdSidenav />}
-      stats={<AutopilotStats />}
+      stats={<ConfigStats />}
       actions={<ConfigActions />}
       openSettings={() => openDialog('settings')}
     >

diff --git a/apps/renterd/contexts/contracts/columns.tsx b/apps/renterd/contexts/contracts/columns.tsx
@@ -1,6 +1,6 @@
 import {
   Text,
-  ValueSc,
+  ValueScFiat,
   TableColumn,
   ContractTimeline,
   ValueCopyable,
@@ -172,7 +172,7 @@ export const columns: ContractsTableColumn[] = [
     category: 'financial',
     contentClassName: 'w-[120px] justify-end',
     render: ({ data: { totalCost } }) => (
-      <ValueSc size="12" value={totalCost.negated()} />
+      <ValueScFiat displayBoth size="12" value={totalCost.negated()} />
     ),
   },
   {
@@ -181,7 +181,7 @@ export const columns: ContractsTableColumn[] = [
     category: 'financial',
     contentClassName: 'w-[120px] justify-end',
     render: ({ data: { spendingUploads } }) => (
-      <ValueSc size="12" value={spendingUploads.negated()} />
+      <ValueScFiat displayBoth size="12" value={spendingUploads.negated()} />
     ),
   },
   {
@@ -190,7 +190,7 @@ export const columns: ContractsTableColumn[] = [
     category: 'financial',
     contentClassName: 'w-[120px] justify-end',
     render: ({ data: { spendingDownloads } }) => (
-      <ValueSc size="12" value={spendingDownloads.negated()} />
+      <ValueScFiat displayBoth size="12" value={spendingDownloads.negated()} />
     ),
   },
   {
@@ -199,7 +199,11 @@ export const columns: ContractsTableColumn[] = [
     category: 'financial',
     contentClassName: 'w-[120px] justify-end',
     render: ({ data: { spendingFundAccount } }) => (
-      <ValueSc size="12" value={spendingFundAccount.negated()} />
+      <ValueScFiat
+        displayBoth
+        size="12"
+        value={spendingFundAccount.negated()}
+      />
     ),
   },
 ]
diff --git a/apps/renterd/contexts/hosts/columns.tsx b/apps/renterd/contexts/hosts/columns.tsx
@@ -5,7 +5,7 @@ import {
   ValueNum,
   Tooltip,
   LoadingDots,
-  ValueSc,
+  ValueScFiat,
 } from '@siafoundation/design-system'
 import {
   WarningSquareFilled16,
@@ -27,7 +27,7 @@ import {
   workerRhpScanRoute,
 } from '@siafoundation/react-renterd'
 import BigNumber from 'bignumber.js'
-import React from 'react'
+import React, { memo } from 'react'
 
 type HostsTableColumn = TableColumn<
   TableColumnId,
@@ -233,7 +233,7 @@ export const columns: HostsTableColumn[] = (
         if (isPending) {
           return <LoadingDots />
         }
-        const ago = formatDistance(new Date(data.lastScan), new Date(), {
+        const ago = formatDistance(new Date(data.lastScan || 0), new Date(), {
           addSuffix: true,
         })
         let message = ''
@@ -1087,18 +1087,20 @@ type Key =
   | keyof AutopilotHost['host']['settings']
 
 function makeRenderSc(section: 'priceTable' | 'settings', name: Key) {
-  return function RenderPriceTableNumber({ data }: { data: HostData }) {
+  return memo(function RenderPriceTableNumber({ data }: { data: HostData }) {
     if (!data[section]) {
       return null
     }
     return (
-      <ValueSc
+      <ValueScFiat
+        displayBoth
         size="12"
         value={new BigNumber(data[section][name] || 0)}
+        fixedFiat={4}
         variant="value"
       />
     )
-  }
+  })
 }
 
 function makeRenderNumber(

diff --git a/apps/walletd/contexts/events/columns.tsx b/apps/walletd/contexts/events/columns.tsx
@@ -2,8 +2,8 @@ import {
   Text,
   TableColumn,
   ValueCopyable,
-  ValueSc,
   LoadingDots,
+  ValueScFiat,
 } from '@siafoundation/design-system'
 import { humanDate } from '@siafoundation/sia-js'
 import { EventData, TableColumnId } from './types'
@@ -105,22 +105,24 @@ export const columns: EventsTableColumn[] = [
     id: 'amount',
     label: 'amount',
     category: 'general',
+    contentClassName: 'w-[120px] justify-end',
     render: ({ data: { amount } }) => {
       if (!amount) {
         return null
       }
-      return <ValueSc size="12" value={amount} />
+      return <ValueScFiat displayBoth size="12" value={amount} />
     },
   },
   {
     id: 'fee',
     label: 'fee',
     category: 'general',
+    contentClassName: 'w-[120px] justify-end',
     render: ({ data: { fee } }) => {
       if (!fee) {
         return null
       }
-      return <ValueSc size="12" variant="value" value={fee} />
+      return <ValueScFiat displayBoth size="12" variant="value" value={fee} />
     },
   },
   {