diff --git a/.changeset/calm-coins-shave.md b/.changeset/calm-coins-shave.md new file mode 100644 index 000000000..0f8327e42 --- /dev/null +++ b/.changeset/calm-coins-shave.md @@ -0,0 +1,5 @@ +--- +'renterd': minor +--- + +The configuration now has zen-specific suggested/default values for number of contract hosts and shard values. diff --git a/.changeset/friendly-dryers-type.md b/.changeset/friendly-dryers-type.md deleted file mode 100644 index fc305893d..000000000 --- a/.changeset/friendly-dryers-type.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'renterd': minor ---- - -Uploading files is now allowed even before enough contracts have formed - if the upload fails the user will see an error. diff --git a/.changeset/great-games-prove.md b/.changeset/great-games-prove.md new file mode 100644 index 000000000..a69b7b7eb --- /dev/null +++ b/.changeset/great-games-prove.md @@ -0,0 +1,5 @@ +--- +'hostd': minor +--- + +The revenue graph is now a bar stack, much more clearly showing earned vs potential revenue. diff --git a/.changeset/healthy-laws-lick.md b/.changeset/healthy-laws-lick.md new file mode 100644 index 000000000..9c0ba762e --- /dev/null +++ b/.changeset/healthy-laws-lick.md @@ -0,0 +1,5 @@ +--- +'hostd': minor +--- + +The metrics graphs now show a y-axis. diff --git a/.changeset/ninety-pots-deny.md b/.changeset/ninety-pots-deny.md new file mode 100644 index 000000000..55598cdb6 --- /dev/null +++ b/.changeset/ninety-pots-deny.md @@ -0,0 +1,5 @@ +--- +'@siafoundation/design-system': minor +--- + +The ChartXY API has been refactored. diff --git a/.changeset/sweet-actors-pretend.md b/.changeset/sweet-actors-pretend.md new file mode 100644 index 000000000..5cd392d7d --- /dev/null +++ b/.changeset/sweet-actors-pretend.md @@ -0,0 +1,5 @@ +--- +'renterd': minor +--- + +The contract list now updates after a contract is deleted. diff --git a/README.md b/README.md index b3d551626..3532c17a5 100644 --- a/README.md +++ b/README.md @@ -50,6 +50,7 @@ The Sia web libraries provide developers with convenient TypeScript SDKs for usi - [@siafoundation/sia-nodejs](libs/sia-nodejs) - Sia NodeJS client for controlling a v1 `siad`. - [@siafoundation/design-system](libs/design-system) - React-based design system used across Sia apps and websites. - [@siafoundation/data-sources](libs/data-sources) - Data sources used for stats on the website. +- [@siafoundation/fonts](libs/fonts) - Next font configuration for use across apps. - [@siafoundation/units](libs/units) - Methods and types for converting and displaying units. ## Internal diff --git a/apps/explorer/app/layout.tsx b/apps/explorer/app/layout.tsx index 8a60de017..aeec6a159 100644 --- a/apps/explorer/app/layout.tsx +++ b/apps/explorer/app/layout.tsx @@ -2,27 +2,8 @@ import { Layout } from '../components/Layout' import '../config/style.css' import { NextAppSsrAppRouter } from '@siafoundation/design-system' import { appLink } from '../config' -import { IBM_Plex_Sans, IBM_Plex_Mono } from '@next/font/google' -import { cx } from 'class-variance-authority' import Script from 'next/script' - -const sans = IBM_Plex_Sans({ - weight: ['100', '200', '300', '400', '500', '600', '700'], - style: ['normal', 'italic'], - subsets: ['latin'], - variable: '--font-sans', - display: 'swap', - preload: true, -}) - -const mono = IBM_Plex_Mono({ - weight: ['100', '200', '300', '400', '500', '600', '700'], - style: ['normal', 'italic'], - subsets: ['latin'], - variable: '--font-mono', - display: 'swap', - preload: true, -}) +import { rootFontClasses } from '@siafoundation/fonts' export const metadata = { title: 'Explorer', @@ -40,11 +21,7 @@ export default function RootLayout({ children: React.ReactNode }) { return ( - + {children} diff --git a/apps/explorer/jest.config.ts b/apps/explorer/jest.config.ts index 00b4fbc32..eb34c90a2 100644 --- a/apps/explorer/jest.config.ts +++ b/apps/explorer/jest.config.ts @@ -12,7 +12,7 @@ export default { '/node_modules/(?!d3|d3-array|d3-axis|d3-brush|d3-chord|d3-color|d3-contour|d3-delaunay|d3-dispatch|d3-drag|d3-dsv|d3-ease|d3-fetch|d3-force|d3-format|d3-geo|d3-hierarchy|d3-interpolate|d3-path|d3-polygon|d3-quadtree|d3-random|d3-scale|d3-scale-chromatic|d3-selection|d3-shape|d3-time|d3-time-format|d3-timer|d3-transition|d3-zoom}|internmap|d3-delaunay|delaunator|robust-predicates)', ], moduleNameMapper: { - '@next/font/(.*)': require.resolve( + 'next/font/(.*)': require.resolve( 'next/dist/build/jest/__mocks__/nextFontMock.js' ), }, diff --git a/apps/hostd/components/Home/HomeBandwidth.tsx b/apps/hostd/components/Home/HomeBandwidth.tsx index d71802d6a..c3340f7f7 100644 --- a/apps/hostd/components/Home/HomeBandwidth.tsx +++ b/apps/hostd/components/Home/HomeBandwidth.tsx @@ -39,7 +39,6 @@ export function HomeBandwidth() { data={bandwidth.data} config={bandwidth.config} isLoading={bandwidth.isLoading} - chartType={bandwidth.chartType} actionsLeft={ <> diff --git a/apps/hostd/components/Home/HomeCollateral.tsx b/apps/hostd/components/Home/HomeCollateral.tsx index c0b0d56b3..530859865 100644 --- a/apps/hostd/components/Home/HomeCollateral.tsx +++ b/apps/hostd/components/Home/HomeCollateral.tsx @@ -45,7 +45,6 @@ export function HomeCollateral() { data={collateral.data} config={collateral.config} isLoading={collateral.isLoading} - chartType={collateral.chartType} height={300} /> diff --git a/apps/hostd/components/Home/HomeContracts.tsx b/apps/hostd/components/Home/HomeContracts.tsx index f6ad80d88..b9399ca92 100644 --- a/apps/hostd/components/Home/HomeContracts.tsx +++ b/apps/hostd/components/Home/HomeContracts.tsx @@ -57,7 +57,6 @@ export function HomeContracts() { data={contracts.data} config={contracts.config} isLoading={contracts.isLoading} - chartType={contracts.chartType} height={300} /> diff --git a/apps/hostd/components/Home/HomeOperations.tsx b/apps/hostd/components/Home/HomeOperations.tsx index faca2c5a8..604cf3965 100644 --- a/apps/hostd/components/Home/HomeOperations.tsx +++ b/apps/hostd/components/Home/HomeOperations.tsx @@ -62,7 +62,6 @@ export function HomeOperations() { data={operations.data} config={operations.config} isLoading={operations.isLoading} - chartType={operations.chartType} actionsLeft={ <> diff --git a/apps/hostd/components/Home/HomePricing.tsx b/apps/hostd/components/Home/HomePricing.tsx index 578181c19..40a995f8a 100644 --- a/apps/hostd/components/Home/HomePricing.tsx +++ b/apps/hostd/components/Home/HomePricing.tsx @@ -98,7 +98,6 @@ export function HomePricing() { data={pricing.data} config={pricing.config} isLoading={pricing.isLoading} - chartType={pricing.chartType} actionsLeft={ <> diff --git a/apps/hostd/components/Home/HomeRevenue.tsx b/apps/hostd/components/Home/HomeRevenue.tsx index 5a4a17e12..21fa56118 100644 --- a/apps/hostd/components/Home/HomeRevenue.tsx +++ b/apps/hostd/components/Home/HomeRevenue.tsx @@ -78,7 +78,6 @@ export function HomeRevenue() { data={revenue.data} config={revenue.config} isLoading={revenue.isLoading} - chartType={revenue.chartType} actionsLeft={ <> diff --git a/apps/hostd/components/Home/HomeStorage.tsx b/apps/hostd/components/Home/HomeStorage.tsx index cf321c633..d0383883a 100644 --- a/apps/hostd/components/Home/HomeStorage.tsx +++ b/apps/hostd/components/Home/HomeStorage.tsx @@ -41,7 +41,6 @@ export function HomeStorage() { data={storage.data} config={storage.config} isLoading={storage.isLoading} - chartType={storage.chartType} actionsLeft={ <> diff --git a/apps/hostd/contexts/metrics/index.tsx b/apps/hostd/contexts/metrics/index.tsx index e3776d2ed..5cbc16829 100644 --- a/apps/hostd/contexts/metrics/index.tsx +++ b/apps/hostd/contexts/metrics/index.tsx @@ -9,7 +9,7 @@ import { minutesInMilliseconds, ValueScFiat, } from '@siafoundation/design-system' -import { humanBytes, humanNumber } from '@siafoundation/sia-js' +import { humanBytes, humanNumber, humanSiacoin } from '@siafoundation/sia-js' import { useCallback, useMemo } from 'react' import { chartConfigs } from '../../config/charts' import { useMetricsPeriod } from '@siafoundation/react-hostd' @@ -253,10 +253,16 @@ function useMetricsMain() { formatComponent: function ({ value }) { return }, + formatTickY: (v) => + humanSiacoin(v, { + fixed: 0, + dynamicUnits: true, + }), formatTimestamp, disableAnimations, + chartType: 'barstack', + stackOffset: 'diverging', }, - chartType: 'line', isLoading: metricsPeriod.isValidating, } }, [metricsPeriod, formatTimestamp]) @@ -289,9 +295,16 @@ function useMetricsMain() { return }, formatTimestamp, + formatTickY: (v) => + humanSiacoin(v, { + fixed: 0, + dynamicUnits: true, + }), disableAnimations, + chartType: 'area', + curveType: 'linear', + stackOffset: 'none', }, - chartType: 'area', isLoading: metricsPeriod.isValidating, } }, [metricsPeriod, formatTimestamp]) @@ -354,9 +367,16 @@ function useMetricsMain() { return }, formatTimestamp, + formatTickY: (v) => + humanSiacoin(v, { + fixed: 0, + dynamicUnits: true, + }), disableAnimations, + chartType: 'line', + curveType: 'linear', + stackOffset: 'none', }, - chartType: 'line', isLoading: metricsPeriod.isValidating, } }, [metricsPeriod, formatTimestamp]) @@ -391,9 +411,12 @@ function useMetricsMain() { }, format: (v) => `${v} contracts`, formatTimestamp, + formatTickY: (v) => humanNumber(v), disableAnimations, + chartType: 'areastack', + curveType: 'linear', + stackOffset: 'none', }, - chartType: 'areastack', isLoading: metricsPeriod.isValidating, } }, [metricsPeriod, formatTimestamp]) @@ -473,9 +496,12 @@ function useMetricsMain() { }, format: (v) => humanBytes(v), formatTimestamp, + formatTickY: (v) => humanBytes(v, { fixed: 0 }), disableAnimations, + chartType: 'line', + curveType: 'linear', + stackOffset: 'none', }, - chartType: 'line', isLoading: metricsPeriod.isValidating, } }, [metricsPeriod, formatTimestamp]) @@ -515,10 +541,13 @@ function useMetricsMain() { storageWrites: chartConfigs.storageWrites, }, format: (v) => humanNumber(v), + formatTickY: (v) => humanNumber(v), formatTimestamp, disableAnimations, + chartType: 'line', + curveType: 'linear', + stackOffset: 'none', }, - chartType: 'line', isLoading: metricsPeriod.isValidating, } }, [metricsPeriod, formatTimestamp]) @@ -545,9 +574,15 @@ function useMetricsMain() { }, format: (v) => humanBytes(v), formatTimestamp, + formatTickY: (v) => + humanBytes(v, { + fixed: 0, + }), disableAnimations, + chartType: 'line', + curveType: 'linear', + stackOffset: 'none', }, - chartType: 'line', isLoading: metricsPeriod.isValidating, } }, [metricsPeriod, formatTimestamp]) diff --git a/apps/hostd/contexts/metrics/types.tsx b/apps/hostd/contexts/metrics/types.tsx index f44e4cf32..2f9705d64 100644 --- a/apps/hostd/contexts/metrics/types.tsx +++ b/apps/hostd/contexts/metrics/types.tsx @@ -116,17 +116,17 @@ export const dataTimeSpanOptions: { }[] = [ { label: '1D', - interval: '5m', + interval: '15m', value: '1', }, { label: '7D', - interval: '15m', + interval: 'hourly', value: '7', }, { label: '1M', - interval: 'hourly', + interval: 'daily', value: '30', }, { diff --git a/apps/hostd/jest.config.ts b/apps/hostd/jest.config.ts index ecb7018f3..a33b0f620 100644 --- a/apps/hostd/jest.config.ts +++ b/apps/hostd/jest.config.ts @@ -12,7 +12,7 @@ export default { '/node_modules/(?!d3|d3-array|d3-axis|d3-brush|d3-chord|d3-color|d3-contour|d3-delaunay|d3-dispatch|d3-drag|d3-dsv|d3-ease|d3-fetch|d3-force|d3-format|d3-geo|d3-hierarchy|d3-interpolate|d3-path|d3-polygon|d3-quadtree|d3-random|d3-scale|d3-scale-chromatic|d3-selection|d3-shape|d3-time|d3-time-format|d3-timer|d3-transition|d3-zoom}|internmap|d3-delaunay|delaunator|robust-predicates)', ], moduleNameMapper: { - '@next/font/(.*)': require.resolve( + 'next/font/(.*)': require.resolve( 'next/dist/build/jest/__mocks__/nextFontMock.js' ), }, diff --git a/apps/hostd/pages/_app.tsx b/apps/hostd/pages/_app.tsx index 34a767795..654a84a22 100644 --- a/apps/hostd/pages/_app.tsx +++ b/apps/hostd/pages/_app.tsx @@ -3,6 +3,7 @@ import { NextAppCsr } from '@siafoundation/design-system' import { AppProps } from 'next/app' import { Providers } from '../config/providers' import { routes } from '../config/routes' +import { rootFontClasses } from '@siafoundation/fonts' export default function App({ Component, @@ -12,6 +13,7 @@ export default function App({ }>) { return ( + + +
+ + + + ) + } +} diff --git a/apps/renterd/components/Files/EmptyState/index.tsx b/apps/renterd/components/Files/EmptyState/index.tsx index 6509d39be..6ef9378ed 100644 --- a/apps/renterd/components/Files/EmptyState/index.tsx +++ b/apps/renterd/components/Files/EmptyState/index.tsx @@ -3,7 +3,6 @@ import { CloudUpload32 } from '@siafoundation/react-icons' import { routes } from '../../../config/routes' import { useFiles } from '../../../contexts/files' import { useAutopilotNotConfigured } from '../checks/useAutopilotNotConfigured' -import { useUploadPackingSettings } from '../../../hooks/useUploadPackingSettings' import { useNotEnoughContracts } from '../checks/useNotEnoughContracts' import { StateError } from './StateError' import { StateNoneMatching } from './StateNoneMatching' @@ -14,7 +13,6 @@ export function EmptyState() { const autopilotNotConfigured = useAutopilotNotConfigured() const notEnoughContracts = useNotEnoughContracts() - const uploadPacking = useUploadPackingSettings() if (dataState === 'noneMatchingFilters') { return @@ -62,21 +60,11 @@ export function EmptyState() {
- {uploadPacking.data?.enabled ? ( - - Drag and drop files or click here to start uploading. Redundancy - is configured to use {notEnoughContracts.required} shards which - means at least that many contracts are required. Small files can - be uploaded before contracts have formed but larger files will - fail to upload. - - ) : ( - - There are not enough contracts to upload data yet. Redundancy is - configured to use {notEnoughContracts.required} shards which means - at least that many contracts are required. - - )} + + There are not enough contracts to upload data yet. Redundancy is + configured to use {notEnoughContracts.required} shards which means + at least that many contracts are required. + {notEnoughContracts.count}/{notEnoughContracts.required} diff --git a/apps/renterd/components/Files/useCanUpload.tsx b/apps/renterd/components/Files/useCanUpload.tsx index d39e802af..13069b02f 100644 --- a/apps/renterd/components/Files/useCanUpload.tsx +++ b/apps/renterd/components/Files/useCanUpload.tsx @@ -1,8 +1,14 @@ import { useFiles } from '../../contexts/files' import { useAutopilotNotConfigured } from './checks/useAutopilotNotConfigured' +import { useNotEnoughContracts } from './checks/useNotEnoughContracts' export function useCanUpload() { const { isViewingABucket } = useFiles() const autopilotNotConfigured = useAutopilotNotConfigured() - return isViewingABucket && !autopilotNotConfigured.active + const notEnoughContracts = useNotEnoughContracts() + return ( + isViewingABucket && + !autopilotNotConfigured.active && + !notEnoughContracts.active + ) } diff --git a/apps/renterd/contexts/config/fields.tsx b/apps/renterd/contexts/config/fields.tsx index c2a9f1a4c..2fd679639 100644 --- a/apps/renterd/contexts/config/fields.tsx +++ b/apps/renterd/contexts/config/fields.tsx @@ -11,12 +11,7 @@ import { } from '@siafoundation/design-system' import BigNumber from 'bignumber.js' import React from 'react' -import { - defaultValues, - advancedDefaultAutopilot, - advancedDefaultContractSet, - advancedDefaultGouging, -} from './types' +import { defaultValues, SettingsData } from './types' export const scDecimalPlaces = 6 @@ -31,6 +26,7 @@ type Categories = type GetFields = { isAutopilotEnabled: boolean + advancedDefaults?: SettingsData showAdvanced: boolean redundancyMultiplier: BigNumber includeRedundancyMaxStoragePrice: boolean @@ -43,6 +39,7 @@ type GetFields = { export function getFields({ isAutopilotEnabled, + advancedDefaults, showAdvanced, redundancyMultiplier, includeRedundancyMaxStoragePrice, @@ -120,8 +117,8 @@ export function getFields({ title: 'Period', description: <>The length of the storage contracts., units: 'weeks', - suggestion: advancedDefaultAutopilot.periodWeeks, - suggestionTip: `Typically ${advancedDefaultAutopilot.periodWeeks} weeks.`, + suggestion: advancedDefaults?.periodWeeks, + suggestionTip: `Typically ${advancedDefaults?.periodWeeks} weeks.`, hidden: !isAutopilotEnabled || !showAdvanced, validation: isAutopilotEnabled && showAdvanced @@ -142,8 +139,8 @@ export function getFields({ ), units: 'weeks', decimalsLimit: 6, - suggestion: advancedDefaultAutopilot.renewWindowWeeks, - suggestionTip: `Typically ${advancedDefaultAutopilot.renewWindowWeeks} weeks.`, + suggestion: advancedDefaults?.renewWindowWeeks, + suggestionTip: `Typically ${advancedDefaults?.renewWindowWeeks} weeks.`, hidden: !isAutopilotEnabled || !showAdvanced, validation: isAutopilotEnabled && showAdvanced @@ -159,8 +156,8 @@ export function getFields({ description: <>The number of hosts to create contracts with., units: 'hosts', decimalsLimit: 0, - suggestion: advancedDefaultAutopilot.amountHosts, - suggestionTip: `Typically ${advancedDefaultAutopilot.amountHosts} hosts.`, + suggestion: advancedDefaults?.amountHosts, + suggestionTip: `Typically ${advancedDefaults?.amountHosts} hosts.`, hidden: !isAutopilotEnabled || !showAdvanced, validation: isAutopilotEnabled && showAdvanced @@ -179,12 +176,12 @@ export function getFields({ the same as the default contract set. ), - placeholder: advancedDefaultAutopilot.autopilotContractSet, - suggestion: advancedDefaultAutopilot.autopilotContractSet, + placeholder: advancedDefaults?.autopilotContractSet, + suggestion: advancedDefaults?.autopilotContractSet, suggestionTip: ( <> The default contract set is{' '} - {advancedDefaultAutopilot.autopilotContractSet}. + {advancedDefaults?.autopilotContractSet}. ), hidden: !isAutopilotEnabled || !showAdvanced, @@ -207,9 +204,9 @@ export function getFields({ same IP subnet. The subnets used are /16 for IPv4, and /64 for IPv6. ), - suggestion: advancedDefaultAutopilot.allowRedundantIPs, + suggestion: advancedDefaults?.allowRedundantIPs, suggestionTip: `Defaults to ${ - advancedDefaultAutopilot.allowRedundantIPs ? 'on' : 'off' + advancedDefaults?.allowRedundantIPs ? 'on' : 'off' }.`, hidden: !isAutopilotEnabled || !showAdvanced, validation: {}, @@ -225,12 +222,12 @@ export function getFields({ ), units: 'hours', - suggestion: advancedDefaultAutopilot.maxDowntimeHours, - suggestionTip: `Defaults to ${advancedDefaultAutopilot.maxDowntimeHours + suggestion: advancedDefaults?.maxDowntimeHours, + suggestionTip: `Defaults to ${advancedDefaults?.maxDowntimeHours .toNumber() .toLocaleString()} which is ${toFixedMax( new BigNumber( - hoursInDays(advancedDefaultAutopilot.maxDowntimeHours.toNumber()) + hoursInDays(advancedDefaults?.maxDowntimeHours.toNumber()) ), 1 )} days.`, @@ -254,8 +251,8 @@ export function getFields({ ), units: 'scans', decimalsLimit: 0, - suggestion: advancedDefaultAutopilot.minRecentScanFailures, - suggestionTip: `Defaults to ${advancedDefaultAutopilot.minRecentScanFailures.toNumber()}.`, + suggestion: advancedDefaults?.minRecentScanFailures, + suggestionTip: `Defaults to ${advancedDefaults?.minRecentScanFailures.toNumber()}.`, hidden: !isAutopilotEnabled || !showAdvanced, validation: isAutopilotEnabled && showAdvanced @@ -274,7 +271,7 @@ export function getFields({ <>The threshold after which autopilot will defrag wallet outputs. ), units: 'outputs', - suggestion: advancedDefaultAutopilot.defragThreshold, + suggestion: advancedDefaults?.defragThreshold, suggestionTip: 'Defaults to 1,000.', hidden: !isAutopilotEnabled || !showAdvanced, validation: @@ -290,8 +287,8 @@ export function getFields({ category: 'contractset', type: 'text', title: 'Default contract set', - placeholder: advancedDefaultContractSet.defaultContractSet, - suggestion: advancedDefaultContractSet.defaultContractSet, + placeholder: advancedDefaults?.defaultContractSet, + suggestion: advancedDefaults?.defaultContractSet, suggestionTip: ( <> Autopilot users will typically want to keep this the same as the @@ -487,7 +484,7 @@ export function getFields({ ), units: 'blocks', decimalsLimit: 0, - suggestion: advancedDefaultGouging.hostBlockHeightLeeway, + suggestion: advancedDefaults?.hostBlockHeightLeeway, suggestionTip: 'The recommended value is 6 blocks.', hidden: !showAdvanced, validation: showAdvanced @@ -600,6 +597,8 @@ export function getFields({ category: 'redundancy', title: 'Min shards', description: <>The min amount of shards needed to reconstruct a slab., + suggestion: advancedDefaults?.minShards, + suggestionTip: `Typically ${advancedDefaults?.minShards} shards.`, units: 'shards', hidden: !showAdvanced, validation: showAdvanced @@ -619,6 +618,8 @@ export function getFields({ category: 'redundancy', title: 'Total shards', description: <>The total amount of shards for each slab., + suggestion: advancedDefaults?.totalShards, + suggestionTip: `Typically ${advancedDefaults?.totalShards} shards.`, units: 'shards', hidden: !showAdvanced, validation: showAdvanced diff --git a/apps/renterd/contexts/config/index.tsx b/apps/renterd/contexts/config/index.tsx index 36ae3862d..359560d6c 100644 --- a/apps/renterd/contexts/config/index.tsx +++ b/apps/renterd/contexts/config/index.tsx @@ -20,10 +20,11 @@ import { UploadPackingSettings, useSettingUpdate, useAutopilotTrigger, + useBusState, } from '@siafoundation/react-renterd' import { toSiacoins } from '@siafoundation/sia-js' import { getFields } from './fields' -import { SettingsData, defaultValues } from './types' +import { SettingsData, defaultValues, getAdvancedDefaults } from './types' import { getRedundancyMultiplier, getRedundancyMultiplierIfIncluded, @@ -282,9 +283,14 @@ export function useConfigMain() { [minShards, totalShards] ) + const renterdState = useBusState() const fields = useMemo(() => { + const advancedDefaults = renterdState.data + ? getAdvancedDefaults(renterdState.data.network) + : undefined if (averages.data) { return getFields({ + advancedDefaults, isAutopilotEnabled, showAdvanced, redundancyMultiplier, @@ -315,6 +321,7 @@ export function useConfigMain() { }) } return getFields({ + advancedDefaults, isAutopilotEnabled, showAdvanced, redundancyMultiplier, @@ -322,6 +329,7 @@ export function useConfigMain() { includeRedundancyMaxUploadPrice, }) }, [ + renterdState.data, isAutopilotEnabled, showAdvanced, averages.data, @@ -394,7 +402,7 @@ export function useConfigMain() { const mutate = useMutate() const onValid = useCallback( async (values: typeof defaultValues) => { - if (!gouging.data || !redundancy.data) { + if (!gouging.data || !redundancy.data || !renterdState.data) { return } try { @@ -411,7 +419,11 @@ export function useConfigMain() { const firstTimeSettingConfig = isAutopilotEnabled && !autopilot.data const autopilotResponse = isAutopilotEnabled ? await autopilotUpdate.put({ - payload: transformUpAutopilot(finalValues, autopilot.data), + payload: transformUpAutopilot( + renterdState.data.network, + finalValues, + autopilot.data + ), }) : undefined @@ -511,6 +523,7 @@ export function useConfigMain() { } }, [ + renterdState.data, estimatedSpendingPerMonth, showAdvanced, isAutopilotEnabled, diff --git a/apps/renterd/contexts/config/transform.spec.ts b/apps/renterd/contexts/config/transform.spec.ts index 9271c58ba..122dd9c46 100644 --- a/apps/renterd/contexts/config/transform.spec.ts +++ b/apps/renterd/contexts/config/transform.spec.ts @@ -185,6 +185,7 @@ describe('tansforms', () => { it('up autopilot', () => { expect( transformUpAutopilot( + 'Mainnet', { autopilotContractSet: 'autopilot', allowanceMonth: new BigNumber('6006'), @@ -223,10 +224,10 @@ describe('tansforms', () => { }, }) }) - it('up autopilot accepts unknown values', () => { expect( transformUpAutopilot( + 'Mainnet', { autopilotContractSet: 'autopilot', allowanceMonth: new BigNumber('6006'), @@ -282,6 +283,55 @@ describe('tansforms', () => { }, }) }) + it('uses testnet defaults', () => { + expect( + transformUpAutopilot( + 'Zen Testnet', + { + autopilotContractSet: 'autopilot', + allowanceMonth: new BigNumber('6006'), + amountHosts: undefined, + periodWeeks: new BigNumber('6'), + renewWindowWeeks: new BigNumber('2.2301587301587302'), + downloadTBMonth: new BigNumber('0.785365448411428571428571428571'), + uploadTBMonth: new BigNumber('0.785714285714285714285714285714'), + storageTB: new BigNumber('1'), + allowRedundantIPs: false, + maxDowntimeHours: new BigNumber('1440'), + minRecentScanFailures: new BigNumber('10'), + defragThreshold: new BigNumber('1000'), + }, + { + wallet: {}, + contracts: { + period: 7777, + }, + hosts: {}, + // eslint-disable-next-line @typescript-eslint/no-explicit-any + } as any + ) + ).toEqual({ + wallet: { + defragThreshold: 1000, + }, + hosts: { + allowRedundantIPs: false, + maxDowntimeHours: 1440, + minRecentScanFailures: 10, + scoreOverrides: null, + }, + contracts: { + set: 'autopilot', + amount: 12, + allowance: '8408400000000000000000000000', + period: 6048, + renewWindow: 2248, + download: 1099511627776, + upload: 1100000000000, + storage: 1000000000000, + }, + }) + }) it('up contractset', () => { expect( @@ -462,7 +512,7 @@ describe('tansforms', () => { expect(settings.downloadTBMonth).toEqual(new BigNumber('92.72')) // a little different due to rounding expect( - transformUpAutopilot(settings, autopilot).contracts.download + transformUpAutopilot('Mainnet', settings, autopilot).contracts.download ).toEqual(91088814814815) settings = transformDown( @@ -483,7 +533,7 @@ describe('tansforms', () => { expect(settings.downloadTBMonth).toEqual(new BigNumber('92.72')) // using the rounded value results in same value expect( - transformUpAutopilot(settings, autopilot).contracts.download + transformUpAutopilot('Mainnet', settings, autopilot).contracts.download ).toEqual(91088814814815) }) }) diff --git a/apps/renterd/contexts/config/transform.ts b/apps/renterd/contexts/config/transform.ts index 4aeed90be..446fa3d40 100644 --- a/apps/renterd/contexts/config/transform.ts +++ b/apps/renterd/contexts/config/transform.ts @@ -23,7 +23,7 @@ import { AutopilotData, scDecimalPlaces, SettingsData, - advancedDefaultAutopilot, + getAdvancedDefaultAutopilot, ConfigAppData, ContractSetData, defaultConfigApp, @@ -46,6 +46,7 @@ const filterUndefinedKeys = (obj: Record) => { // up export function transformUpAutopilot( + network: 'Mainnet' | 'Zen Testnet', values: AutopilotData, // eslint-disable-next-line @typescript-eslint/no-explicit-any existingValues: AutopilotConfig | undefined @@ -53,7 +54,7 @@ export function transformUpAutopilot( // merge suggestions with values, if advanced values are required they will // be added before this function is called and will override suggestions const v: AutopilotData = { - ...advancedDefaultAutopilot, + ...getAdvancedDefaultAutopilot(network), ...filterUndefinedKeys(values), } diff --git a/apps/renterd/contexts/config/types.ts b/apps/renterd/contexts/config/types.ts index 3e00acbfc..08824c40a 100644 --- a/apps/renterd/contexts/config/types.ts +++ b/apps/renterd/contexts/config/types.ts @@ -77,18 +77,39 @@ export type RedundancyData = typeof defaultRedundancy export type SettingsData = typeof defaultValues // advanced defaults -export const advancedDefaultAutopilot: AutopilotData = { - ...defaultAutopilot, - downloadTBMonth: new BigNumber(1), - uploadTBMonth: new BigNumber(1), - periodWeeks: new BigNumber(6), - renewWindowWeeks: new BigNumber(2), - amountHosts: new BigNumber(50), - autopilotContractSet: 'autopilot', - allowRedundantIPs: false, - maxDowntimeHours: new BigNumber(336), - minRecentScanFailures: new BigNumber(10), - defragThreshold: new BigNumber(1000), +export function getAdvancedDefaultAutopilot( + network: 'Mainnet' | 'Zen Testnet' +): AutopilotData { + return { + // must be set + storageTB: undefined, + downloadTBMonth: undefined, + uploadTBMonth: undefined, + // calcuated and set + allowanceMonth: undefined, + // defaults + ...(network === 'Mainnet' + ? { + periodWeeks: new BigNumber(6), + renewWindowWeeks: new BigNumber(2), + amountHosts: new BigNumber(50), + autopilotContractSet: 'autopilot', + allowRedundantIPs: false, + maxDowntimeHours: new BigNumber(336), + minRecentScanFailures: new BigNumber(10), + defragThreshold: new BigNumber(1000), + } + : { + periodWeeks: new BigNumber(6), + renewWindowWeeks: new BigNumber(2), + amountHosts: new BigNumber(12), + autopilotContractSet: 'autopilot', + allowRedundantIPs: false, + maxDowntimeHours: new BigNumber(336), + minRecentScanFailures: new BigNumber(10), + defragThreshold: new BigNumber(1000), + }), + } } export const advancedDefaultContractSet: ContractSetData = { @@ -108,6 +129,29 @@ export const advancedDefaultGouging: GougingData = { ...defaultGouging, } -export const advancedDefaultRedundancy: RedundancyData = { - ...defaultRedundancy, +export function getAdvancedDefaultRedundancy( + network: 'Mainnet' | 'Zen Testnet' +): RedundancyData { + return network === 'Mainnet' + ? { + minShards: new BigNumber(10), + totalShards: new BigNumber(30), + } + : { + minShards: new BigNumber(2), + totalShards: new BigNumber(6), + } +} + +export function getAdvancedDefaults( + network: 'Mainnet' | 'Zen Testnet' +): SettingsData { + return { + ...getAdvancedDefaultAutopilot(network), + ...advancedDefaultContractSet, + ...advancedDefaultConfigApp, + ...advancedDefaultUploadPacking, + ...advancedDefaultGouging, + ...getAdvancedDefaultRedundancy(network), + } } diff --git a/apps/renterd/jest.config.ts b/apps/renterd/jest.config.ts index f9eec2977..c3f469908 100644 --- a/apps/renterd/jest.config.ts +++ b/apps/renterd/jest.config.ts @@ -12,7 +12,7 @@ export default { '/node_modules/(?!d3|d3-array|d3-axis|d3-brush|d3-chord|d3-color|d3-contour|d3-delaunay|d3-dispatch|d3-drag|d3-dsv|d3-ease|d3-fetch|d3-force|d3-format|d3-geo|d3-hierarchy|d3-interpolate|d3-path|d3-polygon|d3-quadtree|d3-random|d3-scale|d3-scale-chromatic|d3-selection|d3-shape|d3-time|d3-time-format|d3-timer|d3-transition|d3-zoom}|internmap|d3-delaunay|delaunator|robust-predicates)', ], moduleNameMapper: { - '@next/font/(.*)': require.resolve( + 'next/font/(.*)': require.resolve( 'next/dist/build/jest/__mocks__/nextFontMock.js' ), }, diff --git a/apps/renterd/pages/_app.tsx b/apps/renterd/pages/_app.tsx index 34a767795..654a84a22 100644 --- a/apps/renterd/pages/_app.tsx +++ b/apps/renterd/pages/_app.tsx @@ -3,6 +3,7 @@ import { NextAppCsr } from '@siafoundation/design-system' import { AppProps } from 'next/app' import { Providers } from '../config/providers' import { routes } from '../config/routes' +import { rootFontClasses } from '@siafoundation/fonts' export default function App({ Component, @@ -12,6 +13,7 @@ export default function App({ }>) { return ( + + +
+ + + + ) + } +} diff --git a/apps/walletd/contexts/events/index.tsx b/apps/walletd/contexts/events/index.tsx index de6fabac5..c23b151e0 100644 --- a/apps/walletd/contexts/events/index.tsx +++ b/apps/walletd/contexts/events/index.tsx @@ -77,8 +77,8 @@ export function useEventsMain() { id: e.ID, timestamp: 0, pending: true, - type: e.Type, - amount: new BigNumber(e.Received).minus(e.Sent), + type: e.type, + amount: new BigNumber(e.received).minus(e.sent), })) const dataEvents: EventData[] = responseEvents.data.map((e, index) => { let amount = new BigNumber(0) diff --git a/apps/walletd/jest.config.ts b/apps/walletd/jest.config.ts index cd4e015e6..8a4ac8c2e 100644 --- a/apps/walletd/jest.config.ts +++ b/apps/walletd/jest.config.ts @@ -12,7 +12,7 @@ export default { '/node_modules/(?!d3|d3-array|d3-axis|d3-brush|d3-chord|d3-color|d3-contour|d3-delaunay|d3-dispatch|d3-drag|d3-dsv|d3-ease|d3-fetch|d3-force|d3-format|d3-geo|d3-hierarchy|d3-interpolate|d3-path|d3-polygon|d3-quadtree|d3-random|d3-scale|d3-scale-chromatic|d3-selection|d3-shape|d3-time|d3-time-format|d3-timer|d3-transition|d3-zoom}|internmap|d3-delaunay|delaunator|robust-predicates)', ], moduleNameMapper: { - '@next/font/(.*)': require.resolve( + 'next/font/(.*)': require.resolve( 'next/dist/build/jest/__mocks__/nextFontMock.js' ), }, diff --git a/apps/walletd/pages/_app.tsx b/apps/walletd/pages/_app.tsx index c03b3c1dc..8d2a0a986 100644 --- a/apps/walletd/pages/_app.tsx +++ b/apps/walletd/pages/_app.tsx @@ -4,6 +4,7 @@ import { AppProps } from 'next/app' import { Providers } from '../config/providers' import { useWasm } from '../hooks/useWasm' import { routes } from '../config/routes' +import { rootFontClasses } from '@siafoundation/fonts' export default function App({ Component, @@ -14,6 +15,7 @@ export default function App({ useWasm() return ( + + +
+ + + + ) + } +} diff --git a/apps/website/components/NextAppSsr.tsx b/apps/website/components/NextAppSsr.tsx deleted file mode 100644 index 291350f2b..000000000 --- a/apps/website/components/NextAppSsr.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import { - TooltipProvider, - Toaster, - rootClasses, -} from '@siafoundation/design-system' -import { AppProps } from 'next/app' -import { AppSettingsProvider, CoreProvider } from '@siafoundation/react-core' -import { ThemeProvider } from 'next-themes' - -export function NextAppSsr({ - Component, - pageProps, - Layout, -}: AppProps<{ - fallback?: Record -}> & { Layout?: React.FC<{ children: React.ReactNode }> }) { - if (Layout) { - return ( - - - - -
- - - - -
- - - - - ) - } - return ( - - - - -
- - -
- - - - - ) -} diff --git a/apps/website/jest.config.ts b/apps/website/jest.config.ts index fcd35b97e..747321b8c 100644 --- a/apps/website/jest.config.ts +++ b/apps/website/jest.config.ts @@ -12,7 +12,7 @@ export default { '/node_modules/(?!d3|d3-array|d3-axis|d3-brush|d3-chord|d3-color|d3-contour|d3-delaunay|d3-dispatch|d3-drag|d3-dsv|d3-ease|d3-fetch|d3-force|d3-format|d3-geo|d3-hierarchy|d3-interpolate|d3-path|d3-polygon|d3-quadtree|d3-random|d3-scale|d3-scale-chromatic|d3-selection|d3-shape|d3-time|d3-time-format|d3-timer|d3-transition|d3-zoom}|internmap|d3-delaunay|delaunator|robust-predicates)', ], moduleNameMapper: { - '@next/font/(.*)': require.resolve( + 'next/font/(.*)': require.resolve( 'next/dist/build/jest/__mocks__/nextFontMock.js' ), }, diff --git a/apps/website/pages/_app.tsx b/apps/website/pages/_app.tsx index 22961708d..a40830cc1 100644 --- a/apps/website/pages/_app.tsx +++ b/apps/website/pages/_app.tsx @@ -1,4 +1,28 @@ -import { NextAppSsr } from '../components/NextAppSsr' import '../config/style.css' +import { TooltipProvider, Toaster } from '@siafoundation/design-system' +import { AppProps } from 'next/app' +import { AppSettingsProvider, CoreProvider } from '@siafoundation/react-core' +import { ThemeProvider } from 'next-themes' +import { rootFontClasses } from '@siafoundation/fonts' -export default NextAppSsr +export default function NextAppSsr({ + Component, + pageProps, +}: AppProps<{ + fallback?: Record +}>) { + return ( + + + + +
+ + +
+ + + + + ) +} diff --git a/apps/website/pages/_document.tsx b/apps/website/pages/_document.tsx index 4476fd33a..1cd945e99 100644 --- a/apps/website/pages/_document.tsx +++ b/apps/website/pages/_document.tsx @@ -1,3 +1,23 @@ -import { NextDocument } from '@siafoundation/design-system' +'use client' -export default NextDocument +import DefaultNextDocument, { + Head, + Html, + Main, + NextScript, +} from 'next/document' +import { rootFontClasses } from '@siafoundation/fonts' + +export default class NextDocument extends DefaultNextDocument { + override render() { + return ( + + + +
+ + + + ) + } +} diff --git a/libs/design-system/jest.config.ts b/libs/design-system/jest.config.ts index 82efd1817..1d6f36770 100644 --- a/libs/design-system/jest.config.ts +++ b/libs/design-system/jest.config.ts @@ -11,7 +11,7 @@ export default { '/node_modules/(?!d3|d3-array|d3-axis|d3-brush|d3-chord|d3-color|d3-contour|d3-delaunay|d3-dispatch|d3-drag|d3-dsv|d3-ease|d3-fetch|d3-force|d3-format|d3-geo|d3-hierarchy|d3-interpolate|d3-path|d3-polygon|d3-quadtree|d3-random|d3-scale|d3-scale-chromatic|d3-selection|d3-shape|d3-time|d3-time-format|d3-timer|d3-transition|d3-zoom}|internmap|d3-delaunay|delaunator|robust-predicates)', ], moduleNameMapper: { - '@next/font/(.*)': require.resolve( + 'next/font/(.*)': require.resolve( 'next/dist/build/jest/__mocks__/nextFontMock.js' ), }, diff --git a/libs/design-system/package.json b/libs/design-system/package.json index 10294e5dc..72ac77309 100644 --- a/libs/design-system/package.json +++ b/libs/design-system/package.json @@ -43,7 +43,6 @@ "react-dropzone": "^14.2.3", "@radix-ui/react-radio-group": "^1.0.0", "tailwindcss": "3.2.7", - "@next/font": "13.1.1", "tailwind-scrollbar": "^2.0.1", "tailwindcss-text-fill": "^0.2.0", "tailwindcss-shadow-fill": "^1.0.1", diff --git a/libs/design-system/src/app/WalletBalanceEvolution.tsx b/libs/design-system/src/app/WalletBalanceEvolution.tsx index 30339eb76..acacef9cd 100644 --- a/libs/design-system/src/app/WalletBalanceEvolution.tsx +++ b/libs/design-system/src/app/WalletBalanceEvolution.tsx @@ -62,9 +62,14 @@ export function BalanceEvolution({ }, format: (v) => humanSiacoin(v), formatTimestamp: getDataIntervalLabelFormatter('default'), + formatTickY: (v) => + humanSiacoin(v, { + fixed: 0, + dynamicUnits: true, + }), disableAnimations: true, + chartType, }, - chartType, isLoading, } }, [balances, isLoading, chartConfigs, chartType]) @@ -77,7 +82,6 @@ export function BalanceEvolution({ allowConfiguration={false} data={chart.data} config={chart.config} - chartType={chart.chartType} />
) diff --git a/libs/design-system/src/components/ChartXY/ChartXYConfig.tsx b/libs/design-system/src/components/ChartXY/ChartXYConfig.tsx index 5549b45b2..62f6291e2 100644 --- a/libs/design-system/src/components/ChartXY/ChartXYConfig.tsx +++ b/libs/design-system/src/components/ChartXY/ChartXYConfig.tsx @@ -19,6 +19,8 @@ export function ChartXYConfig({ setStackOffset, xAxisOrientation, setXAxisOrientation, + yAxisOrientation, + setYAxisOrientation, }: ChartXYProps) { const shouldDisableAll = initialChartType === 'line' const shouldDisableStack = initialChartType === 'area' @@ -71,9 +73,13 @@ export function ChartXYConfig({ className="flex flex-col gap-1" > - Auto + None zero-baseline + + Diverging + non zero-baseline + Expand values sum to 1 @@ -113,14 +119,14 @@ export function ChartXYConfig({ Bottom Top - {/* setYAxisOrientation(v as 'left' | 'right')} - className="flex flex-col gap-2" - > - Left - Right - */} + setYAxisOrientation(v as 'left' | 'right')} + className="flex flex-col gap-2" + > + Left + Right + diff --git a/libs/design-system/src/components/ChartXY/ChartXYGraph.tsx b/libs/design-system/src/components/ChartXY/ChartXYGraph.tsx index 0bd7531d4..a2fce567e 100644 --- a/libs/design-system/src/components/ChartXY/ChartXYGraph.tsx +++ b/libs/design-system/src/components/ChartXY/ChartXYGraph.tsx @@ -7,7 +7,6 @@ import { ChartXYProps } from './useChartXY' import { Separator } from '../../core/Separator' import { PatternLines } from '@visx/pattern' import { cx } from 'class-variance-authority' -import { rootClasses } from '../../config/css' import { groupBy } from 'lodash' import { ChartConfig, ChartPoint } from './types' import { humanDate } from '@siafoundation/sia-js' @@ -113,7 +112,7 @@ export function ChartXYGraph({ numTicks={numTicks} /> {renderBarStack && ( - + {enabledGraph.map((key) => ( ({ {renderAreaStack && ( {enabledGraph.map((key) => ( @@ -217,12 +216,21 @@ export function ChartXYGraph({ } orientation={yAxisOrientation} numTicks={numTicks} - tickLength={0} - rangePadding={0} + tickLength={12} + // rangePadding={0} animationTrajectory={animationTrajectory} // values don't make sense in stream graph // tickFormat={stackOffset === 'wiggle' ? () => '' : undefined} - tickFormat={() => ''} + tickFormat={config.formatTickY} + tickTransform={`translate(-300px, 0)`} + tickLabelProps={(p) => ({ + ...p, + fill: theme.labels.color, + fontFamily: theme.labels.fontFamily, + // x: '-34px', + fontWeight: '500', + fontSize: '8', + })} /> {showTooltip && ( > @@ -266,7 +274,7 @@ export function ChartXYGraph({ ) as [Cat, KeyOption[]][] return ( -
+
({ actionsLeft, isLoading, actionsRight, - chartType = 'areastack', - curveType = 'linear', - stackOffset = 'none', variant = 'panel', allowConfiguration = true, }: Props) { - const props = useChartXY( - id, - data, - config, - chartType, - curveType, - stackOffset - ) + const props = useChartXY(id, data, config) const body = ( <> diff --git a/libs/design-system/src/components/ChartXY/types.ts b/libs/design-system/src/components/ChartXY/types.ts index 2e73a9358..3dc9ad93e 100644 --- a/libs/design-system/src/components/ChartXY/types.ts +++ b/libs/design-system/src/components/ChartXY/types.ts @@ -1,3 +1,12 @@ +export type ChartType = 'barstack' | 'bargroup' | 'line' | 'area' | 'areastack' +export type CurveType = 'linear' | 'cardinal' | 'step' +export type StackOffset = + | 'none' + | 'wiggle' + | 'expand' + | 'diverging' + | 'silhouette' + export type ChartConfig = { enabledGraph?: Key[] enabledTip?: Key[] @@ -14,24 +23,20 @@ export type ChartConfig = { } > format?: (v: number) => string + formatTickY?: (v: number) => string + formatTickX?: (v: number) => string formatComponent?: React.FC<{ value: number }> formatTimestamp?: (v: number) => string disableAnimations?: boolean + chartType: ChartType + curveType?: CurveType + stackOffset?: StackOffset } export type ChartPoint = Record export type ChartData = ChartPoint[] -export type ChartType = 'barstack' | 'bargroup' | 'line' | 'area' | 'areastack' -export type CurveType = 'linear' | 'cardinal' | 'step' -export type StackOffset = - | 'none' - | 'wiggle' - | 'expand' - | 'diverging' - | 'silhouette' - type KeyStats = { average: number change: number | undefined @@ -48,6 +53,5 @@ export type Chart = { data: ChartData stats: ChartStats config: ChartConfig - chartType: ChartType isLoading: boolean } diff --git a/libs/design-system/src/components/ChartXY/useChartXY.tsx b/libs/design-system/src/components/ChartXY/useChartXY.tsx index 01ffa9956..accab01d5 100644 --- a/libs/design-system/src/components/ChartXY/useChartXY.tsx +++ b/libs/design-system/src/components/ChartXY/useChartXY.tsx @@ -21,16 +21,16 @@ import { daysInMilliseconds } from '../../lib/time' import { usePrefersReducedMotion } from '@siafoundation/react-core' const numTicks = 4 +const defaultChartType = 'areastack' +const defaultCurveType = 'linear' +const defaultStackOffset = 'none' type SimpleScaleConfig = { type: 'band' | 'linear'; paddingInner?: number } export function useChartXY( id: string, chartData: ChartData, - config: ChartConfig, - initialChartType: ChartType, - initialCurveType: CurveType, - initialStackOffset: StackOffset + config: ChartConfig ) { const data = useMemo(() => { chartData.sort((a, b) => (a.timestamp > b.timestamp ? 1 : -1)) @@ -85,6 +85,10 @@ export function useChartXY( const [snapTooltipToDatum, setSnapTooltipToDatum] = useState(true) const [sharedTooltip, setSharedTooltip] = useState(true) + const initialChartType = config.chartType || defaultChartType + const initialCurveType = config.curveType || defaultCurveType + const initialStackOffset = config.stackOffset || defaultStackOffset + const [chartType, setChartType] = useState(initialChartType) const [curveType, setCurveType] = useState(initialCurveType) const [stackOffset, setStackOffset] = @@ -211,10 +215,10 @@ export function useChartXY( () => ({ top: 30, bottom: xAxisOrientation === 'top' ? 0 : 20, - left: 0, - right: 0, + right: yAxisOrientation === 'right' ? 60 : 0, + left: yAxisOrientation === 'left' ? 60 : 0, }), - [xAxisOrientation] + [xAxisOrientation, yAxisOrientation] ) return { @@ -231,6 +235,8 @@ export function useChartXY( isStack, todayOffset, initialChartType, + initialCurveType, + initialStackOffset, chartType, curveType, keys, diff --git a/libs/design-system/src/config/css.ts b/libs/design-system/src/config/css.ts deleted file mode 100644 index 3233f46d5..000000000 --- a/libs/design-system/src/config/css.ts +++ /dev/null @@ -1,4 +0,0 @@ -import { cx } from 'class-variance-authority' -import { mono, sans } from './fonts' - -export const rootClasses = cx(sans.variable, mono.variable) diff --git a/libs/design-system/src/core/Dialog.tsx b/libs/design-system/src/core/Dialog.tsx index aee57f052..ac9ceee3d 100644 --- a/libs/design-system/src/core/Dialog.tsx +++ b/libs/design-system/src/core/Dialog.tsx @@ -11,9 +11,8 @@ import { Button } from './Button' import { ScrollArea } from './ScrollArea' import { textStyles } from './Text' import { VariantProps } from '../types' -import { rootClasses } from '../config/css' -const containerStyles = cva([rootClasses, 'z-20', 'overflow-hidden'], { +const containerStyles = cva(['z-20', 'overflow-hidden'], { variants: { variant: { default: 'flex items-center justify-center w-full h-full', diff --git a/libs/design-system/src/core/DropdownMenu.tsx b/libs/design-system/src/core/DropdownMenu.tsx index a48555215..3cdaccf39 100644 --- a/libs/design-system/src/core/DropdownMenu.tsx +++ b/libs/design-system/src/core/DropdownMenu.tsx @@ -8,10 +8,8 @@ import { separatorStyles, itemStyles, labelStyles } from './Menu' import { panelStyles } from './Panel' import { useOpen } from '../hooks/useOpen' import { ArrowRight16 } from '@siafoundation/react-icons' -import { rootClasses } from '../config/css' const contentContainerStyles = cva([ - rootClasses, 'relative', 'max-w-sm', 'z-30', diff --git a/libs/design-system/src/core/HoverCard.tsx b/libs/design-system/src/core/HoverCard.tsx index 29f797317..37b15324c 100644 --- a/libs/design-system/src/core/HoverCard.tsx +++ b/libs/design-system/src/core/HoverCard.tsx @@ -6,10 +6,8 @@ import * as HoverCardPrimitive from '@radix-ui/react-hover-card' import { panelStyles } from './Panel' import { cva, cx } from 'class-variance-authority' import { useOpen } from '../hooks/useOpen' -import { rootClasses } from '../config/css' const contentContainerStyles = cva([ - rootClasses, 'relative', 'z-10', 'data-[side=top]:bottom-1', diff --git a/libs/design-system/src/core/Popover.tsx b/libs/design-system/src/core/Popover.tsx index 589af0a54..42ececdca 100644 --- a/libs/design-system/src/core/Popover.tsx +++ b/libs/design-system/src/core/Popover.tsx @@ -6,11 +6,9 @@ import * as PopoverPrimitive from '@radix-ui/react-popover' import { panelStyles } from './Panel' import { cva, cx } from 'class-variance-authority' import { useOpen } from '../hooks/useOpen' -import { rootClasses } from '../config/css' import { ScrollArea } from './ScrollArea' const contentContainerStyles = cva([ - rootClasses, 'relative', 'z-10', 'outline-none', diff --git a/libs/design-system/src/core/Tooltip.tsx b/libs/design-system/src/core/Tooltip.tsx index 8444ea1dd..e6d7e102f 100644 --- a/libs/design-system/src/core/Tooltip.tsx +++ b/libs/design-system/src/core/Tooltip.tsx @@ -7,7 +7,6 @@ import { cx } from 'class-variance-authority' import { panelStyles } from './Panel' import { motion, AnimatePresence } from 'framer-motion' import { useOpen } from '../hooks/useOpen' -import { rootClasses } from '../config/css' type TooltipProps = Omit< React.ComponentProps & @@ -71,7 +70,6 @@ export function Tooltip({ animate="show" exit="exit" className={cx( - rootClasses, 'relative', 'z-50', 'data-[side=top]:bottom-1', diff --git a/libs/design-system/src/index.ts b/libs/design-system/src/index.ts index ab7b9ac7c..3300c894f 100644 --- a/libs/design-system/src/index.ts +++ b/libs/design-system/src/index.ts @@ -136,7 +136,6 @@ export * from './site/Callout' export * from './site/Links' export * from './site/NextAppSsrAppRouter' export * from './site/NextAppCsr' -export * from './site/NextDocument' export * from './site/BackgroundImagePattern' export * from './site/WebDomain' @@ -178,4 +177,3 @@ export * from './lib/getOs' export * from './lib/countryEmoji' export { colors } from './config/colors' -export * from './config/css' diff --git a/libs/design-system/src/lib/toast.tsx b/libs/design-system/src/lib/toast.tsx index 7d977041c..2846d550e 100644 --- a/libs/design-system/src/lib/toast.tsx +++ b/libs/design-system/src/lib/toast.tsx @@ -8,7 +8,6 @@ import toast, { } from 'react-hot-toast' import { cx } from 'class-variance-authority' import { panelStyles } from '../core/Panel' -import { rootClasses } from '../config/css' import React from 'react' import { Text } from '../core/Text' @@ -71,7 +70,6 @@ export function buildToastOptions({ position: 'top-center', duration: 6_000, className: cx( - rootClasses, panelStyles(), 'font-sans font-normal', 'text-gray-1100 dark:text-white', diff --git a/libs/design-system/src/site/NextAppCsr.tsx b/libs/design-system/src/site/NextAppCsr.tsx index 654ba7570..5e3fb5514 100644 --- a/libs/design-system/src/site/NextAppCsr.tsx +++ b/libs/design-system/src/site/NextAppCsr.tsx @@ -4,7 +4,6 @@ import React, { useEffect, useState } from 'react' import { ThemeProvider } from 'next-themes' import { TooltipProvider } from '../hooks/tooltip' import { AppSettingsProvider, CoreProvider } from '@siafoundation/react-core' -import { rootClasses } from '../config/css' import { Toaster } from '../lib/toast' export function ClientSide({ children }: { children: React.ReactNode }) { @@ -18,6 +17,7 @@ export function ClientSide({ children }: { children: React.ReactNode }) { } type Props = { + className?: string passwordProtectRequestHooks?: boolean fallback?: Record children: React.ReactNode @@ -25,6 +25,7 @@ type Props = { } export function NextAppCsr({ + className, passwordProtectRequestHooks, fallback, children, @@ -39,7 +40,7 @@ export function NextAppCsr({ lockRoutes={lockRoutes} passwordProtectRequestHooks={passwordProtectRequestHooks} > -
+
{children}
diff --git a/libs/design-system/src/site/NextDocument.tsx b/libs/design-system/src/site/NextDocument.tsx deleted file mode 100644 index fb8ddaa71..000000000 --- a/libs/design-system/src/site/NextDocument.tsx +++ /dev/null @@ -1,22 +0,0 @@ -'use client' - -import DefaultNextDocument, { - Head, - Html, - Main, - NextScript, -} from 'next/document' - -export class NextDocument extends DefaultNextDocument { - override render() { - return ( - - - -
- - - - ) - } -} diff --git a/libs/fonts/.babelrc b/libs/fonts/.babelrc new file mode 100644 index 000000000..1ea870ead --- /dev/null +++ b/libs/fonts/.babelrc @@ -0,0 +1,12 @@ +{ + "presets": [ + [ + "@nx/react/babel", + { + "runtime": "automatic", + "useBuiltIns": "usage" + } + ] + ], + "plugins": [] +} diff --git a/libs/fonts/.eslintrc.json b/libs/fonts/.eslintrc.json new file mode 100644 index 000000000..1e06b264c --- /dev/null +++ b/libs/fonts/.eslintrc.json @@ -0,0 +1,13 @@ +{ + "extends": ["plugin:@nx/react", "../../.eslintrc.json"], + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.json"], + "parser": "jsonc-eslint-parser", + "rules": { + "@nx/dependency-checks": "error" + } + } + ] +} diff --git a/libs/fonts/CHANGELOG.md b/libs/fonts/CHANGELOG.md new file mode 100644 index 000000000..84e0a0b65 --- /dev/null +++ b/libs/fonts/CHANGELOG.md @@ -0,0 +1 @@ +# @siafoundation/fonts diff --git a/libs/fonts/README.md b/libs/fonts/README.md new file mode 100644 index 000000000..76407cae9 --- /dev/null +++ b/libs/fonts/README.md @@ -0,0 +1,3 @@ +# fonts + +Next font configuration for use across apps. diff --git a/libs/fonts/jest.config.ts b/libs/fonts/jest.config.ts new file mode 100644 index 000000000..141fee817 --- /dev/null +++ b/libs/fonts/jest.config.ts @@ -0,0 +1,18 @@ +/* eslint-disable */ +export default { + displayName: 'fonts', + transform: { + '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nx/react/babel'] }], + }, + moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'], + coverageDirectory: '../../coverage/libs/fonts', + preset: '../../jest.preset.js', + transformIgnorePatterns: [ + '/node_modules/(?!d3|d3-array|d3-axis|d3-brush|d3-chord|d3-color|d3-contour|d3-delaunay|d3-dispatch|d3-drag|d3-dsv|d3-ease|d3-fetch|d3-force|d3-format|d3-geo|d3-hierarchy|d3-interpolate|d3-path|d3-polygon|d3-quadtree|d3-random|d3-scale|d3-scale-chromatic|d3-selection|d3-shape|d3-time|d3-time-format|d3-timer|d3-transition|d3-zoom}|internmap|d3-delaunay|delaunator|robust-predicates)', + ], + moduleNameMapper: { + 'next/font/(.*)': require.resolve( + 'next/dist/build/jest/__mocks__/nextFontMock.js' + ), + }, +} diff --git a/libs/fonts/package.json b/libs/fonts/package.json new file mode 100644 index 000000000..3c8dbd297 --- /dev/null +++ b/libs/fonts/package.json @@ -0,0 +1,11 @@ +{ + "name": "@siafoundation/fonts", + "description": "Next font configuration for use across apps.", + "version": "0.0.1", + "license": "MIT", + "dependencies": { + "class-variance-authority": "^0.7.0", + "next": "13.5.2" + }, + "types": "./src/index.d.ts" +} diff --git a/libs/fonts/project.json b/libs/fonts/project.json new file mode 100644 index 000000000..ac4c88096 --- /dev/null +++ b/libs/fonts/project.json @@ -0,0 +1,49 @@ +{ + "name": "fonts", + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "libs/fonts/src", + "projectType": "library", + "tags": [], + "targets": { + "build": { + "executor": "@nrwl/rollup:rollup", + "outputs": ["{options.outputPath}"], + "options": { + "outputPath": "dist/libs/fonts", + "tsConfig": "libs/fonts/tsconfig.lib.json", + "project": "libs/fonts/package.json", + "entryFile": "libs/fonts/src/index.ts", + "external": ["react/jsx-runtime"], + "rollupConfig": "@nx/react/plugins/bundle-rollup", + "format": ["esm", "cjs"], + "compiler": "swc", + "assets": [ + { + "glob": "libs/fonts/*.md", + "input": ".", + "output": "." + } + ] + }, + "configurations": {} + }, + "lint": { + "executor": "@nx/linter:eslint", + "outputs": ["{options.outputFile}"], + "options": { + "lintFilePatterns": [ + "libs/fonts/**/*.{ts,tsx,js,jsx}", + "libs/fonts/package.json" + ] + } + }, + "test": { + "executor": "@nx/jest:jest", + "outputs": ["{workspaceRoot}/coverage/libs/fonts"], + "options": { + "jestConfig": "libs/fonts/jest.config.ts", + "passWithNoTests": true + } + } + } +} diff --git a/libs/design-system/src/config/fonts.ts b/libs/fonts/src/index.ts similarity index 61% rename from libs/design-system/src/config/fonts.ts rename to libs/fonts/src/index.ts index 3f67b1713..b4929b02f 100644 --- a/libs/design-system/src/config/fonts.ts +++ b/libs/fonts/src/index.ts @@ -1,6 +1,7 @@ -import { IBM_Plex_Sans, IBM_Plex_Mono } from '@next/font/google' +import { cx } from 'class-variance-authority' +import { IBM_Plex_Sans, IBM_Plex_Mono } from 'next/font/google' -export const sans = IBM_Plex_Sans({ +const sans = IBM_Plex_Sans({ weight: ['100', '200', '300', '400', '500', '600', '700'], style: ['normal', 'italic'], subsets: ['latin'], @@ -9,7 +10,7 @@ export const sans = IBM_Plex_Sans({ preload: true, }) -export const mono = IBM_Plex_Mono({ +const mono = IBM_Plex_Mono({ weight: ['100', '200', '300', '400', '500', '600', '700'], style: ['normal', 'italic'], subsets: ['latin'], @@ -17,3 +18,5 @@ export const mono = IBM_Plex_Mono({ display: 'swap', preload: true, }) + +export const rootFontClasses = cx(sans.variable, mono.variable) diff --git a/libs/fonts/tsconfig.json b/libs/fonts/tsconfig.json new file mode 100644 index 000000000..4c089585e --- /dev/null +++ b/libs/fonts/tsconfig.json @@ -0,0 +1,25 @@ +{ + "extends": "../../tsconfig.base.json", + "compilerOptions": { + "jsx": "react-jsx", + "allowJs": true, + "esModuleInterop": true, + "allowSyntheticDefaultImports": true, + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true + }, + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./tsconfig.spec.json" + } + ] +} diff --git a/libs/fonts/tsconfig.lib.json b/libs/fonts/tsconfig.lib.json new file mode 100644 index 000000000..621db72d7 --- /dev/null +++ b/libs/fonts/tsconfig.lib.json @@ -0,0 +1,23 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../dist/out-tsc", + "types": ["node"] + }, + "files": [ + "../../node_modules/@nx/react/typings/cssmodule.d.ts", + "../../node_modules/@nx/react/typings/image.d.ts" + ], + "exclude": [ + "**/*.spec.ts", + "**/*.test.ts", + "**/*.spec.tsx", + "**/*.test.tsx", + "**/*.spec.js", + "**/*.test.js", + "**/*.spec.jsx", + "**/*.test.jsx", + "jest.config.ts" + ], + "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"] +} diff --git a/libs/fonts/tsconfig.spec.json b/libs/fonts/tsconfig.spec.json new file mode 100644 index 000000000..a85d573fc --- /dev/null +++ b/libs/fonts/tsconfig.spec.json @@ -0,0 +1,20 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../dist/out-tsc", + "module": "commonjs", + "types": ["jest", "node"] + }, + "include": [ + "**/*.test.ts", + "**/*.spec.ts", + "**/*.test.tsx", + "**/*.spec.tsx", + "**/*.test.js", + "**/*.spec.js", + "**/*.test.jsx", + "**/*.spec.jsx", + "**/*.d.ts", + "jest.config.ts" + ] +} diff --git a/libs/react-icons/jest.config.ts b/libs/react-icons/jest.config.ts index 627d3c560..6ee513e07 100644 --- a/libs/react-icons/jest.config.ts +++ b/libs/react-icons/jest.config.ts @@ -11,7 +11,7 @@ export default { '/node_modules/(?!d3|d3-array|d3-axis|d3-brush|d3-chord|d3-color|d3-contour|d3-delaunay|d3-dispatch|d3-drag|d3-dsv|d3-ease|d3-fetch|d3-force|d3-format|d3-geo|d3-hierarchy|d3-interpolate|d3-path|d3-polygon|d3-quadtree|d3-random|d3-scale|d3-scale-chromatic|d3-selection|d3-shape|d3-time|d3-time-format|d3-timer|d3-transition|d3-zoom}|internmap|d3-delaunay|delaunator|robust-predicates)', ], moduleNameMapper: { - '@next/font/(.*)': require.resolve( + 'next/font/(.*)': require.resolve( 'next/dist/build/jest/__mocks__/nextFontMock.js' ), }, diff --git a/libs/react-renterd/src/bus.ts b/libs/react-renterd/src/bus.ts index 3d1f713f5..f88972d22 100644 --- a/libs/react-renterd/src/bus.ts +++ b/libs/react-renterd/src/bus.ts @@ -400,7 +400,12 @@ export function useContractRenew( export function useContractDelete( args?: HookArgsCallback<{ id: string }, void, never> ) { - return useDeleteFunc({ ...args, route: '/bus/contract/:id' }) + return useDeleteFunc( + { ...args, route: '/bus/contract/:id' }, + async (mutate) => { + mutate((key) => key.startsWith('/bus/contract')) + } + ) } export function useContractsets(args?: HookArgsSwr) { diff --git a/libs/react-renterd/src/siaTypes.ts b/libs/react-renterd/src/siaTypes.ts index 9efe939fa..0eb58e181 100644 --- a/libs/react-renterd/src/siaTypes.ts +++ b/libs/react-renterd/src/siaTypes.ts @@ -257,7 +257,7 @@ export interface Host { interactions: { Downtime: number FailedInteractions: number - LastScan: string + LastScan?: string LastScanSuccess: boolean SecondToLastScanSuccess: boolean SuccessfulInteractions: number diff --git a/libs/react-walletd/src/siaTypes.ts b/libs/react-walletd/src/siaTypes.ts index 6977eb60e..08c91751c 100644 --- a/libs/react-walletd/src/siaTypes.ts +++ b/libs/react-walletd/src/siaTypes.ts @@ -132,11 +132,11 @@ export type FileContract = { export type PoolTransaction = { ID: string - Raw: Transaction - Type: string - Sent: Currency - Received: Currency - Locked: Currency + raw: Transaction + type: string + sent: Currency + received: Currency + locked: Currency } // events diff --git a/package-lock.json b/package-lock.json index 3427d3a77..6cc8d1f72 100644 --- a/package-lock.json +++ b/package-lock.json @@ -264,7 +264,6 @@ "version": "0.59.0", "license": "MIT", "dependencies": { - "@next/font": "13.1.1", "@nx/react": "16.8.1", "@radix-ui/react-accordion": "^1.0.0", "@radix-ui/react-avatar": "^1.0.0", @@ -336,6 +335,14 @@ "extraneous": true, "license": "MIT" }, + "libs/fonts": { + "version": "0.0.0", + "license": "MIT", + "dependencies": { + "@next/font": "13.1.1", + "class-variance-authority": "^0.7.0" + } + }, "libs/foobar": { "name": "@siafoundation/foobar", "version": "0.0.1", @@ -7289,6 +7296,10 @@ "resolved": "libs/design-system", "link": true }, + "node_modules/@siafoundation/fonts": { + "resolved": "libs/fonts", + "link": true + }, "node_modules/@siafoundation/react-core": { "resolved": "libs/react-core", "link": true @@ -32676,7 +32687,6 @@ "@siafoundation/design-system": { "version": "file:libs/design-system", "requires": { - "@next/font": "13.1.1", "@nx/react": "16.8.1", "@radix-ui/react-accordion": "^1.0.0", "@radix-ui/react-avatar": "^1.0.0", @@ -32742,6 +32752,13 @@ "yup": "^0.32.11" } }, + "@siafoundation/fonts": { + "version": "file:libs/fonts", + "requires": { + "@next/font": "13.1.1", + "class-variance-authority": "^0.7.0" + } + }, "@siafoundation/react-core": { "version": "file:libs/react-core", "requires": { diff --git a/package.json b/package.json index 85cbf2e77..5f7f27b21 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,6 @@ "@ledgerhq/hw-transport-webhid": "^6.27.19", "@mdx-js/loader": "^2.1.1", "@mdx-js/react": "^2.1.1", - "@next/font": "13.1.1", "@next/mdx": "^12.1.6", "@notionhq/client": "^2.2.8", "@nx-tools/nx-container": "^5.0.3", diff --git a/tsconfig.base.json b/tsconfig.base.json index 816901039..ab2367fbf 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -20,6 +20,7 @@ "@siafoundation/react-core": ["libs/react-core/src/index.ts"], "@siafoundation/react-hostd": ["libs/react-hostd/src/index.ts"], "@siafoundation/react-icons": ["libs/react-icons/src/index.ts"], + "@siafoundation/fonts": ["libs/fonts/src/index.ts"], "@siafoundation/react-renterd": ["libs/react-renterd/src/index.ts"], "@siafoundation/react-sia-central": [ "libs/react-sia-central/src/index.ts"