chore: resolve various warnings

SiaFoundation · Oct 8, 2024 · b46fbd5 · b46fbd5
1 parent 7ce5324
commit b46fbd5
Show file tree

Hide file tree

Showing 21 changed files with 96 additions and 44 deletions.
diff --git a/apps/renterd/components/Contracts/ContractsFilterAddressDialog.tsx b/apps/renterd/components/Contracts/ContractsFilterAddressDialog.tsx
@@ -55,6 +55,7 @@ export function ContractsFilterAddressDialog({
     <Dialog
       trigger={trigger}
       title="Filter by address"
+      description="Enter the address of the host you want to filter by."
       open={open}
       onOpenChange={(open) => {
         if (!open) {

diff --git a/apps/renterd/components/Contracts/ContractsFilterContractSetDialog.tsx b/apps/renterd/components/Contracts/ContractsFilterContractSetDialog.tsx
@@ -95,6 +95,7 @@ export function ContractsFilterContractSetDialog({
     <Dialog
       trigger={trigger}
       title="Filter by contract set"
+      description="Select the contract set you want to filter by."
       open={open}
       onOpenChange={handleOpenChange}
       contentVariants={{

diff --git a/apps/renterd/components/Contracts/ContractsFilterPublicKeyDialog.tsx b/apps/renterd/components/Contracts/ContractsFilterPublicKeyDialog.tsx
@@ -56,6 +56,7 @@ export function ContractsFilterPublicKeyDialog({
     <Dialog
       trigger={trigger}
       title="Filter by public key"
+      description="Enter the public key of the host you want to filter by."
       open={open}
       onOpenChange={(open) => {
         if (!open) {

diff --git a/apps/renterd/components/Contracts/index.tsx b/apps/renterd/components/Contracts/index.tsx
@@ -74,7 +74,7 @@ export function Contracts() {
             height: listHeight,
           }}
         >
-          <ScrollArea className="z-0" id="scroll-hosts">
+          <ScrollArea className="z-0">
             <div
               className={cx(showDetailView ? 'pb-6 px-6' : 'p-6', 'min-w-fit')}
             >

diff --git a/apps/renterd/components/Hosts/HostsFilterAddressDialog.tsx b/apps/renterd/components/Hosts/HostsFilterAddressDialog.tsx
@@ -51,6 +51,7 @@ export function HostsFilterAddressDialog({
     <Dialog
       trigger={trigger}
       title="Filter by address"
+      description="Enter the address of the host you want to filter by."
       open={open}
       onOpenChange={(open) => {
         if (!open) {

diff --git a/apps/renterd/components/Hosts/HostsFilterPublicKeyDialog.tsx b/apps/renterd/components/Hosts/HostsFilterPublicKeyDialog.tsx
@@ -52,6 +52,7 @@ export function HostsFilterPublicKeyDialog({
     <Dialog
       trigger={trigger}
       title="Filter by public key"
+      description="Enter the public key of the host you want to filter by."
       open={open}
       onOpenChange={(open) => {
         if (!open) {

diff --git a/apps/renterd/components/Keys/KeysCreateDialog.tsx b/apps/renterd/components/Keys/KeysCreateDialog.tsx
@@ -159,6 +159,7 @@ export function KeysCreateDialog({ trigger, open, onOpenChange }: Props) {
   return (
     <Dialog
       title="Create S3 key"
+      description="Create a new S3 authentication key."
       trigger={trigger}
       open={open}
       onOpenChange={(val) => {
@@ -178,7 +179,6 @@ export function KeysCreateDialog({ trigger, open, onOpenChange }: Props) {
       }
     >
       <div className="flex flex-col gap-4">
-        <Paragraph>Create a new S3 authentication key.</Paragraph>
         <div className="flex flex-col gap-2">
           <FieldText name="name" form={form} fields={fields} />
           <FieldText name="secret" form={form} fields={fields} />

diff --git a/apps/renterd/contexts/config/fieldTips/Tip.tsx b/apps/renterd/contexts/config/fieldTips/Tip.tsx
@@ -4,6 +4,7 @@ import {
   Tooltip,
   ValueScFiat,
   Separator,
+  Paragraph,
 } from '@siafoundation/design-system'
 import React from 'react'
 import { UseFormReturn } from 'react-hook-form'
@@ -98,10 +99,10 @@ export function PriceWithRedundancyTip({
       <Separator />
       <TipReadOnly
         tip={
-          <>
+          <Paragraph size="12">
             Price per {units} when factoring in the configured{' '}
             {minShards?.toString()} of {totalShards?.toString()} redundancy.
-          </>
+          </Paragraph>
         }
         icon={<Calculation16 />}
       >
@@ -120,29 +121,29 @@ export function PriceWithRedundancyTip({
 }
 
 export const fitPriceToCurrentAllowanceTipContent = (
-  <>
+  <Paragraph size="12">
     Set suggested max price that fits the current allowance spending target.
     This suggested value takes into account the current estimated usage and
     keeps storage, upload, and download upload prices proportional to each other
     according to the following weights: {storageWeight}x storage, {uploadWeight}
     x upload, {downloadWeight}x download.
-  </>
+  </Paragraph>
 )
 
 export const fitAllPricesToCurrentAllowanceTipContent = (
-  <>
+  <Paragraph size="12">
     Set suggested max prices for storage, upload, and download that fit the
     current allowance spending target. The suggested values take into account
     the current estimated usage and keeps storage, upload, and download upload
     prices proportional to each other according to the following weights:{' '}
     {storageWeight}x storage, {uploadWeight}x upload, {downloadWeight}x
     download.
-  </>
+  </Paragraph>
 )
 
 export const recommendationTipContent = (
-  <>
+  <Paragraph size="12">
     The system found a recommendation that would increase the number of usable
     hosts.
-  </>
+  </Paragraph>
 )
diff --git a/apps/renterd/contexts/config/fields.tsx b/apps/renterd/contexts/config/fields.tsx
@@ -3,6 +3,7 @@ import {
   Code,
   ConfigFields,
   Maybe,
+  Paragraph,
   toFixedMaxString,
 } from '@siafoundation/design-system'
 import { hoursInDays, secondsInMinutes } from '@siafoundation/units'
@@ -220,10 +221,10 @@ export function getFields({
       placeholder: advancedDefaults?.autopilotContractSet,
       suggestion: advancedDefaults?.autopilotContractSet,
       suggestionTip: (
-        <>
+        <Paragraph size="12">
           The default contract set is{' '}
           <Code>{advancedDefaults?.autopilotContractSet}</Code>.
-        </>
+        </Paragraph>
       ),
       hidden: !isAutopilotEnabled || configViewMode === 'basic',
       validation: {
@@ -248,9 +249,9 @@ export function getFields({
       ),
       suggestion: advancedDefaults?.prune,
       suggestionTip: (
-        <>
+        <Paragraph size="12">
           The default value is <Code>{advancedDefaults?.prune}</Code>.
-        </>
+        </Paragraph>
       ),
       hidden: !isAutopilotEnabled || configViewMode === 'basic',
       validation: {},
@@ -361,10 +362,10 @@ export function getFields({
       placeholder: advancedDefaults?.defaultContractSet,
       suggestion: advancedDefaults?.defaultContractSet,
       suggestionTip: (
-        <>
+        <Paragraph size="12">
           Autopilot users will typically want to keep this the same as the
           autopilot contract set.
-        </>
+        </Paragraph>
       ),
       description: (
         <>The default contract set is where data is uploaded to by default.</>

diff --git a/apps/renterd/contexts/contracts/columns.tsx b/apps/renterd/contexts/contracts/columns.tsx
@@ -12,6 +12,7 @@ import {
   ScrollArea,
   Button,
   LoadingDots,
+  Paragraph,
 } from '@siafoundation/design-system'
 import {
   ArrowUpLeft16,
@@ -125,10 +126,10 @@ export const columns: ContractsTableColumn[] = [
                 return (
                   <Tooltip
                     content={
-                      <>
+                      <Paragraph size="12">
                         Contract is part of set{' '}
                         <Badge size="small">{set}</Badge>. {message}
-                      </>
+                      </Paragraph>
                     }
                     key={set}
                   >

diff --git a/apps/renterd/contexts/uploads/index.tsx b/apps/renterd/contexts/uploads/index.tsx
@@ -40,6 +40,11 @@ function useUploadsMain() {
   const response = useMultipartUploadListUploads({
     disabled: !activeBucket,
     payload: payload as MultipartUploadListUploadsPayload,
+    config: {
+      swr: {
+        keepPreviousData: true,
+      },
+    },
   })
 
   const abortAll = useCallback(async () => {
@@ -64,9 +69,9 @@ function useUploadsMain() {
     )
   }, [response.data, apiBusUploadAbort, activeBucket, uploadsMap])
 
-  const dataset: ObjectUploadData[] | undefined = useMemo(() => {
+  const dataset: ObjectUploadData[] = useMemo(() => {
     if (!response.data?.uploads || !activeBucket?.name) {
-      return undefined
+      return []
     }
     return response.data.uploads.map((upload) => {
       const id = upload.uploadID

diff --git a/apps/renterd/dialogs/FilesBucketCreateDialog.tsx b/apps/renterd/dialogs/FilesBucketCreateDialog.tsx
@@ -1,5 +1,4 @@
 import {
-  Paragraph,
   Dialog,
   triggerErrorToast,
   triggerSuccessToast,
@@ -77,6 +76,7 @@ export function FilesBucketCreateDialog({
   return (
     <Dialog
       title="Create Bucket"
+      description="A bucket is an isolated collection of files."
       trigger={trigger}
       open={open}
       onOpenChange={(val) => {
@@ -91,9 +91,6 @@ export function FilesBucketCreateDialog({
       onSubmit={form.handleSubmit(onSubmit, onInvalid)}
     >
       <div className="flex flex-col gap-4">
-        <Paragraph size="14">
-          A bucket is an isolated collection of files.
-        </Paragraph>
         <FieldText name="name" form={form} fields={fields} autoComplete="off" />
         <FormSubmitButton form={form}>Create bucket</FormSubmitButton>
       </div>

diff --git a/apps/walletd/dialogs/_sharedWalletSend/useComposeForm.tsx b/apps/walletd/dialogs/_sharedWalletSend/useComposeForm.tsx
@@ -12,6 +12,7 @@ import {
   FieldNumber,
   FieldSelect,
   Tooltip,
+  Paragraph,
 } from '@siafoundation/design-system'
 import { useForm } from 'react-hook-form'
 import { useCallback, useMemo } from 'react'
@@ -127,11 +128,11 @@ function getFields({
       actions: (
         <Tooltip
           content={
-            <>
+            <Paragraph size="12">
               The address where any change from the transaction will be sent. If
               a custom change address is not specified it is automatically set
               to the wallet's address 0.
-            </>
+            </Paragraph>
           }
         >
           <Text color="subtle" className="cursor-pointer">
@@ -163,11 +164,11 @@ function getFields({
       actions: (
         <Tooltip
           content={
-            <>
+            <Paragraph size="12">
               The address that will receive any unclaimed siacoin earnings from
               the siafund. If a custom claim address is not specified it is
               automatically set to the wallet's address 0.
-            </>
+            </Paragraph>
           }
         >
           <Text color="subtle" className="cursor-pointer">

diff --git a/libs/design-system/src/app/SyncerConnectPeerDialog.tsx b/libs/design-system/src/app/SyncerConnectPeerDialog.tsx
@@ -1,6 +1,5 @@
 'use client'
 
-import { Paragraph } from '../core/Paragraph'
 import { triggerErrorToast, triggerSuccessToast } from '../lib/toast'
 import { Response } from '@siafoundation/react-core'
 import { Dialog } from '../core/Dialog'
@@ -80,6 +79,7 @@ export function SyncerConnectPeerDialog({
     <Dialog
       trigger={trigger}
       title="Connect peer"
+      description="Connect to a peer by IP address."
       open={open}
       onOpenChange={handleOpenChange}
       contentVariants={{
@@ -95,7 +95,6 @@ export function SyncerConnectPeerDialog({
       }
     >
       <div className="flex flex-col gap-4">
-        <Paragraph size="14">Connect to a peer by IP address.</Paragraph>
         <FieldText form={form} fields={fields} name="address" size="medium" />
       </div>
     </Dialog>

diff --git a/libs/design-system/src/app/WalletBalanceTip.tsx b/libs/design-system/src/app/WalletBalanceTip.tsx
@@ -26,7 +26,7 @@ export function WalletBalanceTip({
     <Tooltip
       side={side}
       content={
-        <div className="flex flex-col justify-center gap-2">
+        <div className="flex flex-col justify-center gap-2 text-xs">
           <div className="flex gap-4">
             <div className="flex flex-col flex-1">
               <Text>spendable</Text>

diff --git a/libs/design-system/src/components/ChartXY/ChartXYGraph.tsx b/libs/design-system/src/components/ChartXY/ChartXYGraph.tsx
@@ -10,6 +10,7 @@ import { cx } from 'class-variance-authority'
 import { groupBy } from '@technically/lodash'
 import { ChartConfig, ChartPoint } from './types'
 import { humanDate } from '@siafoundation/units'
+import { AnimationTrajectory } from '@visx/react-spring'
 
 export function ChartXYGraph<Key extends string, Cat extends string>({
   id,
@@ -104,11 +105,14 @@ export function ChartXYGraph<Key extends string, Cat extends string>({
         )
       })}
       <Grid
-        key={`grid-${animationTrajectory}`} // force animate on update
+        // Force animate on update.
+        {...getAnimationProps({
+          key: 'grid',
+          animationTrajectory,
+        })}
         rows={false}
         columns={true}
         strokeDasharray="1,3"
-        animationTrajectory={animationTrajectory}
         numTicks={numTicks}
       />
       {renderBarStack && (
@@ -190,10 +194,13 @@ export function ChartXYGraph<Key extends string, Cat extends string>({
         </>
       )}
       <Axis
-        key={`time-axis-${animationTrajectory}`}
+        // Force animate on update.
+        {...getAnimationProps({
+          key: 'time-axis',
+          animationTrajectory,
+        })}
         orientation={xAxisOrientation}
         numTicks={numTicks}
-        animationTrajectory={animationTrajectory}
         tickFormat={(d) => humanDate(d)}
         tickLength={12}
         tickLabelProps={(p) => ({
@@ -206,7 +213,11 @@ export function ChartXYGraph<Key extends string, Cat extends string>({
         })}
       />
       <Axis
-        key={`temp-axis-${animationTrajectory}`}
+        // Force animate on update.
+        {...getAnimationProps({
+          key: 'temp-axis',
+          animationTrajectory,
+        })}
         label={
           stackOffset == null
             ? 'SC'
@@ -218,7 +229,6 @@ export function ChartXYGraph<Key extends string, Cat extends string>({
         numTicks={numTicks}
         tickLength={12}
         // rangePadding={0}
-        animationTrajectory={animationTrajectory}
         // values don't make sense in stream graph
         // tickFormat={stackOffset === 'wiggle' ? () => '' : undefined}
         tickFormat={config.formatTickY}
@@ -402,3 +412,20 @@ export function getColor<Key extends string, Cat extends string>(
     ? `url(#pattern-${idKey})`
     : `url(#gradient-${idKey})`
 }
+
+function getAnimationProps({
+  key,
+  animationTrajectory,
+}: {
+  key: string
+  animationTrajectory?: AnimationTrajectory
+}) {
+  return animationTrajectory
+    ? {
+        key: `${key}-${animationTrajectory}`,
+        animationTrajectory,
+      }
+    : {
+        key,
+      }
+}
diff --git a/libs/design-system/src/components/ChartXY/useChartXY.tsx b/libs/design-system/src/components/ChartXY/useChartXY.tsx
@@ -250,7 +250,9 @@ export function useChartXY<Key extends string, Cat extends string>(
   return {
     id,
     accessors,
-    animationTrajectory,
+    animationTrajectory: useAnimatedComponents
+      ? animationTrajectory
+      : undefined,
     config,
     scales,
     data,