Fix warning and errors (#2296)

centrifuge-app/src/components/AssetSummary.tsx

@@ -13,7 +13,7 @@ type Props = {
   loan?: Loan | TinlakeLoan
 }
 
-export const AssetSummary: React.FC<Props> = ({ data, children, loan }) => {
+export function AssetSummary({ data, children, loan }: Props) {
   const theme = useTheme()
   return (
     <Stack bg={theme.colors.backgroundSecondary} pl={3}>

centrifuge-app/src/components/Charts/AssetPerformanceChart.tsx

@@ -56,7 +56,7 @@ function AssetPerformanceChart({ pool, poolId, loanId }: Props) {
     }
 
     return getCSVDownloadUrl(assetSnapshots as any)
-  }, [assetSnapshots, pool.currency.symbol])
+  }, [assetSnapshots])
 
   const data: ChartData[] = React.useMemo(() => {
     if (!asset || !assetSnapshots) return []
@@ -79,7 +79,7 @@ function AssetPerformanceChart({ pool, poolId, loanId }: Props) {
     const today = new Date()
     today.setDate(today.getDate() + 1)
     const maturity = new Date(asset.pricing.maturityDate ?? '')
-    if (today.getTime() >= maturity.getTime() || assetSnapshots.length == 0) return historic
+    if (today.getTime() >= maturity.getTime() || assetSnapshots.length === 0) return historic
 
     const days = Math.floor((maturity.getTime() - today.getTime()) / (24 * 60 * 60 * 1000)) + 2
 
@@ -116,7 +116,7 @@ function AssetPerformanceChart({ pool, poolId, loanId }: Props) {
         }
       }),
     ]
-  }, [asset, assetSnapshots, activeFilter])
+  }, [asset, assetSnapshots])
 
   const priceRange = React.useMemo(() => {
     if (!data) return [0, 100]

centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx

@@ -237,20 +237,12 @@ function CustomLegend({
           borderLeftColor={theme.colors.accentPrimary}
           gap="4px"
         >
-          <Tooltips type={'nav'}>
-            <Text variant="body3" color="textSecondary">
-              NAV
-            </Text>
-          </Tooltips>
+          <Tooltips type="nav" />
           <Text variant="body1">{formatBalance(data.nav, 'USD')}</Text>
         </Stack>
         {data.price && (
           <Stack borderLeftWidth="3px" pl={1} borderLeftStyle="solid" borderLeftColor="#FFC012" gap="4px">
-            <Tooltips type={'singleTrancheTokenPrice'}>
-              <Text variant="body3" color="textSecondary">
-                Token price
-              </Text>
-            </Tooltips>
+            <Tooltips type="singleTrancheTokenPrice" />
             <Text variant="body1">{data.price ? formatBalance(data.price, 'USD', 6) : '-'}</Text>
           </Stack>
         )}

centrifuge-app/src/components/Charts/PriceYieldChart.tsx

@@ -88,10 +88,7 @@ function PriceYieldChart({
   ) : null
 }
 
-const CustomLegend: React.VFC<{
-  data: ChartData
-  poolId: string
-}> = ({ data, poolId }) => {
+function CustomLegend({ data, poolId }: { data: ChartData; poolId: string }) {
   const theme = useTheme()
   const pool = usePool(poolId)
 

centrifuge-app/src/components/Charts/Tooltip.tsx

@@ -6,7 +6,7 @@ import { formatBalance, formatPercentage } from '../../utils/formatting'
 
 type CustomizedTooltipProps = TooltipProps<any, any> & { currency: string; precision?: number }
 
-export const CustomizedTooltip: React.FC<CustomizedTooltipProps> = ({ payload, currency, precision }) => {
+export function CustomizedTooltip({ payload, currency, precision }: CustomizedTooltipProps) {
   if (payload && payload?.length > 0) {
     return (
       <TooltipContainer>

centrifuge-app/src/components/CollectionCard.tsx

@@ -14,7 +14,7 @@ type Props = {
   collection: Collection
 }
 
-export const CollectionCard: React.FC<Props> = ({ collection }) => {
+export function CollectionCard({ collection }: Props) {
   const [visible, setVisible] = React.useState(false)
   const ref = React.useRef<HTMLAnchorElement>(null)
 

centrifuge-app/src/components/ContextActions.tsx

@@ -11,7 +11,7 @@ type Props = {
   }
 }
 
-export const ContextActions: React.FC<Props> = ({ actions, parent }) => {
+export function ContextActions({ actions, parent }: Props) {
   return (
     <ButtonGroup variant="small">
       {actions && (

centrifuge-app/src/components/DebugFlags/DebugFlags.tsx

@@ -1,23 +1,17 @@
 import { Box, Shelf, Stack, Text } from '@centrifuge/fabric'
 import * as React from 'react'
 import styled from 'styled-components'
-import { Key, flagsConfig } from './config'
-import { DebugFlagsContext, FlagsState, initialFlagsState, useDebugFlags } from './context'
+import { Key, genericFlagsConfig } from './config'
+import { DebugFlagsContext, Flags, initialFlagsState, useDebugFlags } from './context'
 
-function DebugFlagsImpl({
-  children,
-  onChange,
-}: {
-  children?: React.ReactNode
-  onChange?: (state: FlagsState) => void
-}) {
+function DebugFlagsImpl({ children, onChange }: { children?: React.ReactNode; onChange?: (state: Flags) => void }) {
   const [state, setState] = React.useState(initialFlagsState)
   const [tracked, setTracked] = React.useState({})
 
   const ctx = React.useMemo(
     () => ({
       flags: Object.entries(state).reduce((obj, [key, value]) => {
-        const conf = flagsConfig[key as Key]
+        const conf = genericFlagsConfig[key as Key]
         obj[key] = 'options' in conf ? conf.options[value as string] : value
         return obj
       }, {} as any),
@@ -56,11 +50,15 @@ function DebugFlagsImpl({
   )
 }
 
-const Panel: React.FC<{
-  state: FlagsState
+function Panel({
+  state,
+  usedKeys,
+  onChange,
+}: {
+  state: Flags
   usedKeys: Set<any>
   onChange: (key: Key, val: any) => void
-}> = ({ state, usedKeys, onChange }) => {
+}) {
   const [open, setOpen] = React.useState(false)
   const { showUnusedFlags } = useDebugFlags()
 
@@ -81,7 +79,7 @@ const Panel: React.FC<{
       </Shelf>
       {open && (
         <StyledOpenPanel width={400} gap="1">
-          {Object.entries(flagsConfig).map(([key, obj]) => {
+          {Object.entries(genericFlagsConfig).map(([key, obj]) => {
             const used = usedKeys.has(key) || obj.alwaysShow
             const value = state[key as Key]
             const visible = used || !!showUnusedFlags

centrifuge-app/src/components/DebugFlags/config.ts

@@ -35,7 +35,6 @@ export type Key =
   | 'showOrderExecution'
   | 'address'
   | 'evmAddress'
-  | 'batchMintNFTs'
   | 'persistDebugFlags'
   | 'showUnusedFlags'
   | 'allowInvestBelowMin'
@@ -51,7 +50,7 @@ export type Key =
   | 'showTokenYields'
   | 'showOracleTx'
 
-export const flagsConfig: Record<Key, DebugFlagConfig> = {
+export const flagsConfig = {
   address: {
     default: '',
     type: 'text',
@@ -65,10 +64,6 @@ export const flagsConfig: Record<Key, DebugFlagConfig> = {
     default: false,
     type: 'checkbox',
   },
-  batchMintNFTs: {
-    default: false,
-    type: 'checkbox',
-  },
   convertAddress: {
     Component: ConvertAddressDialogWithButton,
     alwaysShow: true,
@@ -140,4 +135,6 @@ export const flagsConfig: Record<Key, DebugFlagConfig> = {
     default: false,
     type: 'checkbox',
   },
-}
+} satisfies Record<Key, DebugFlagConfig>
+
+export const genericFlagsConfig = flagsConfig as Record<string, DebugFlagConfig>

centrifuge-app/src/components/DebugFlags/context.ts

@@ -1,35 +1,34 @@
 import * as React from 'react'
-import { debug, flagsConfig, Key } from './config'
+import { debug, flagsConfig, genericFlagsConfig, Key } from './config'
 
 export type Flags = {
-  [T in Key]: (typeof flagsConfig)[T] extends { options: { [key: string]: infer Y } }
-    ? Y
+  [T in Key]: (typeof flagsConfig)[T] extends { options: { [key: string]: string } }
+    ? string
+    : (typeof flagsConfig)[T]['default'] extends boolean
+    ? boolean
     : (typeof flagsConfig)[T]['default']
 }
-export type FlagsState = {
-  [T in Key]: (typeof flagsConfig)[T]['default']
-}
 
 interface Context {
   flags: Flags
   register: (id: number, keys: string[]) => void
   unregister: (id: number) => void
 }
 
-export const defaultFlags: Flags = Object.entries(flagsConfig).reduce((obj, [k, v]) => {
-  obj[k] = 'options' in v ? v.options[v.default as string] : v.default
+export const defaultFlags: Flags = Object.entries(genericFlagsConfig).reduce((obj, [k, v]) => {
+  obj[k] = 'options' in v ? v.options[v.default] : v.default
   return obj
 }, {} as any)
 
-let persistedState: FlagsState | null = null
+let persistedState: Flags | null = null
 try {
   const stored = localStorage.getItem('debugFlags') ?? ''
-  persistedState = JSON.parse(stored[0] === '{' ? stored : '') as FlagsState
+  persistedState = JSON.parse(stored[0] === '{' ? stored : '') as Flags
 } catch (e) {
   //
 }
 const flagKeys = Object.keys(flagsConfig)
-export const initialFlagsState: FlagsState = persistedState
+export const initialFlagsState: Flags = persistedState
   ? Object.entries(persistedState)
       .filter(([k]) => flagKeys.includes(k))
       .reduce((obj, [k, v]) => {

centrifuge-app/src/components/DebugFlags/index.tsx

@@ -1,18 +1,12 @@
 import * as React from 'react'
 import { debug } from './config'
-import { FlagsState } from './context'
+import { Flags } from './context'
 
 export * from './context'
 
 const DebugFlagsImpl = React.lazy(() => import('./DebugFlags'))
 
-export function DebugFlags({
-  children,
-  onChange,
-}: {
-  children?: React.ReactNode
-  onChange?: (state: FlagsState) => void
-}) {
+export function DebugFlags({ children, onChange }: { children?: React.ReactNode; onChange?: (state: Flags) => void }) {
   const fallback = <>{children}</>
   return debug ? (
     <React.Suspense fallback={fallback}>

centrifuge-app/src/components/Dialogs/CreateCollectionDialog.tsx

@@ -33,7 +33,7 @@ const CREATE_FEE_ESTIMATE = 2
 const MAX_FILE_SIZE_IN_BYTES = 1024 ** 2 // 1 MB limit by default
 const isImageFile = (file: File): boolean => !!file.type.match(/^image\//)
 
-export const CreateCollectionDialog: React.FC<{ open: boolean; onClose: () => void }> = ({ open, onClose }) => {
+export function CreateCollectionDialog({ open, onClose }: { open: boolean; onClose: () => void }) {
   const [name, setName] = React.useState<string>('')
   const [description, setDescription] = React.useState<string>('')
   const [logo, setLogo] = React.useState<File | null>(null)

centrifuge-app/src/components/Dialogs/ExecutiveSummaryDialog.tsx

@@ -1,13 +1,17 @@
 import { Box, Button, Dialog, IconInfo, Stack, Text } from '@centrifuge/fabric'
-import * as React from 'react'
 import styled from 'styled-components'
 
-export const ExecutiveSummaryDialog: React.FC<{
+export function ExecutiveSummaryDialog({
+  issuerName,
+  href,
+  open,
+  onClose,
+}: {
   issuerName: string
   href: string
   open: boolean
   onClose: () => void
-}> = ({ issuerName, href, open, onClose }) => {
+}) {
   return (
     <Dialog
       isOpen={open}