Fix ts warnings

centrifuge-app/src/components/InvestRedeem/InvestRedeemCentrifugeProvider.tsx

@@ -97,7 +97,7 @@ export function InvestRedeemCentrifugeProvider({ poolId, trancheId, children }:
     }, 300)
 
     return () => clearTimeout(timer)
-  }, [isDataLoading])
+  }, [isDataLoading, connectedType])
 
   const state: InvestRedeemState = {
     poolId,

centrifuge-app/src/components/InvestRedeem/InvestRedeemDrawer.tsx

@@ -74,7 +74,7 @@ export function InvestRedeemDrawer({
     )
 
     return { sumRealizedProfitFifoByPeriod, sumUnrealizedProfitAtMarketPrice }
-  }, [dailyPoolStates])
+  }, [dailyPoolStates, pool.currency.decimals])
 
   return (
     <Drawer isOpen={open} onClose={onClose}>

centrifuge-app/src/components/LoanList.tsx

@@ -1,5 +1,5 @@
 import { useBasePath } from '@centrifuge/centrifuge-app/src/utils/useBasePath'
-import { CurrencyBalance, Loan, TinlakeLoan } from '@centrifuge/centrifuge-js'
+import { CurrencyBalance, Loan, Pool, TinlakeLoan } from '@centrifuge/centrifuge-js'
 import {
   AnchorButton,
   Box,
@@ -16,6 +16,7 @@ import {
 import get from 'lodash/get'
 import * as React from 'react'
 import { useNavigate, useParams } from 'react-router'
+import { TinlakePool } from 'src/utils/tinlake/useTinlakePools'
 import { formatNftAttribute } from '../../src/pages/Loan/utils'
 import { LoanTemplate, LoanTemplateAttribute } from '../../src/types'
 import { getCSVDownloadUrl } from '../../src/utils/getCSVDownloadUrl'
@@ -97,7 +98,7 @@ export function LoanList({ loans }: Props) {
 
       return aId.localeCompare(bId)
     })
-  }, [isTinlakePool, loansData])
+  }, [loansData])
 
   const filters = useFilters({
     data: loansWithLabelStatus as Loan[],
@@ -245,17 +246,21 @@ export function LoanList({ loans }: Props) {
   const csvData = React.useMemo(() => {
     if (!rows.length) return undefined
 
-    return rows.map((loan) => ({
-      'Asset ID': loan.id,
-      'Maturity Date': loan.maturityDate ? loan.maturityDate : '-',
-      Quantity: `${getAmount(loan) ?? '-'}`,
-      'Market Price': loan.marketPrice ? loan.marketPrice : '-',
-      'Market Value': loan.marketValue ? loan.marketValue : '-',
-      'Unrealized P&L': loan.unrealizedPL ? loan.unrealizedPL : '-',
-      'Realized P&L': loan.realizedPL ? loan.realizedPL : '-',
-      'Portfolio %': loan.portfolioPercentage ? loan.portfolioPercentage : '-',
-    }))
-  }, [rows, pool.currency])
+    return rows.map((loan) => {
+      const quantity = getAmount(loan, pool)
+
+      return {
+        'Asset ID': loan.id,
+        'Maturity Date': loan.maturityDate ? loan.maturityDate : '-',
+        Quantity: `${quantity ?? '-'}`,
+        'Market Price': loan.marketPrice ? loan.marketPrice : '-',
+        'Market Value': loan.marketValue ? loan.marketValue : '-',
+        'Unrealized P&L': loan.unrealizedPL ? loan.unrealizedPL : '-',
+        'Realized P&L': loan.realizedPL ? loan.realizedPL : '-',
+        'Portfolio %': loan.portfolioPercentage ? loan.portfolioPercentage : '-',
+      }
+    })
+  }, [rows])
 
   const csvUrl = React.useMemo(() => csvData && getCSVDownloadUrl(csvData as any), [csvData])
 
@@ -365,8 +370,7 @@ export function AssetName({ loan }: { loan: Pick<Row, 'id' | 'poolId' | 'asset'
     </Shelf>
   )
 }
-export function getAmount(l: Row, format?: boolean) {
-  const pool = usePool(l.poolId)
+export function getAmount(l: Row, pool: Pool | TinlakePool, format?: boolean) {
   switch (l.status) {
     case 'Closed':
       return format ? formatBalance(l.totalRepaid) : l.totalRepaid
@@ -392,5 +396,6 @@ export function getAmount(l: Row, format?: boolean) {
 }
 
 function Amount({ loan }: { loan: Row }) {
-  return <Text style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>{getAmount(loan, true)}</Text>
+  const pool = usePool(loan.poolId)
+  return <Text style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>{getAmount(loan, pool, true)}</Text>
 }

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

@@ -161,19 +161,6 @@ export function PoolCard({
     )
   }
 
-  const calculateApy = (tranche: TrancheWithCurrency) => {
-    const daysSinceCreation = createdAt ? daysBetween(createdAt, new Date()) : 0
-    if (poolId === DYF_POOL_ID) return centrifugeTargetAPYs[DYF_POOL_ID][0]
-    if (poolId === NS3_POOL_ID && tranche.seniority === 0) return centrifugeTargetAPYs[NS3_POOL_ID][0]
-    if (poolId === NS3_POOL_ID && tranche.seniority === 1) return centrifugeTargetAPYs[NS3_POOL_ID][1]
-    if (daysSinceCreation > 30 && tranche.yield30DaysAnnualized)
-      return formatPercentage(tranche.yield30DaysAnnualized, true, {}, 1)
-    if (tranche.interestRatePerSec) {
-      return formatPercentage(tranche.interestRatePerSec.toAprPercent(), true, {}, 1)
-    }
-    return '-'
-  }
-
   const tranchesData = useMemo(() => {
     return tranches
       ?.map((tranche: TrancheWithCurrency) => {
@@ -185,6 +172,19 @@ export function PoolCard({
           tranche.currency.decimals
         ).toDecimal()
 
+        const calculateApy = (tranche: TrancheWithCurrency) => {
+          const daysSinceCreation = createdAt ? daysBetween(createdAt, new Date()) : 0
+          if (poolId === DYF_POOL_ID) return centrifugeTargetAPYs[DYF_POOL_ID][0]
+          if (poolId === NS3_POOL_ID && tranche.seniority === 0) return centrifugeTargetAPYs[NS3_POOL_ID][0]
+          if (poolId === NS3_POOL_ID && tranche.seniority === 1) return centrifugeTargetAPYs[NS3_POOL_ID][1]
+          if (daysSinceCreation > 30 && tranche.yield30DaysAnnualized)
+            return formatPercentage(tranche.yield30DaysAnnualized, true, {}, 1)
+          if (tranche.interestRatePerSec) {
+            return formatPercentage(tranche.interestRatePerSec.toAprPercent(), true, {}, 1)
+          }
+          return '-'
+        }
+
         return {
           seniority: tranche.seniority,
           name: trancheName,
@@ -199,7 +199,7 @@ export function PoolCard({
         }
       })
       .reverse()
-  }, [calculateApy, isTinlakePool, metaData?.tranches, tinlakeKey, tranches])
+  }, [isTinlakePool, metaData?.tranches, tinlakeKey, tranches])
 
   return (
     <RouterTextLink to={`${poolId}`} style={{ textDecoration: 'none' }}>

centrifuge-app/src/components/PoolList.tsx

@@ -6,7 +6,6 @@ import { useLocation } from 'react-router'
 import styled from 'styled-components'
 import { getPoolValueLocked } from '../utils/getPoolValueLocked'
 import { TinlakePool } from '../utils/tinlake/useTinlakePools'
-import { useIsAboveBreakpoint } from '../utils/useIsAboveBreakpoint'
 import { useListedPools } from '../utils/useListedPools'
 import { useMetadataMulti } from '../utils/useMetadata'
 import { PoolCard, PoolCardProps } from './PoolCard'
@@ -42,8 +41,6 @@ export function PoolList() {
   const { search } = useLocation()
   const [showArchived, setShowArchived] = React.useState(false)
   const [listedPools, , metadataIsLoading] = useListedPools()
-  const isLarge = useIsAboveBreakpoint('L')
-  const isMedium = useIsAboveBreakpoint('M')
 
   const centPools = listedPools.filter(({ id }) => !id.startsWith('0x')) as Pool[]
   const centPoolsMetaData: PoolMetaDataPartial[] = useMetadataMulti<PoolMetadata>(

centrifuge-app/src/components/PoolOverview/TrancheTokenCards.tsx

@@ -42,20 +42,6 @@ export const TrancheTokenCards = ({
     return 'mezzanine'
   }
 
-  const calculateApy = (trancheToken: Token) => {
-    if (isTinlakePool && getTrancheText(trancheToken) === 'senior') return formatPercentage(trancheToken.apy)
-    if (isTinlakePool && trancheToken.seniority === 0) return '15%'
-    if (poolId === DYF_POOL_ID) return centrifugeTargetAPYs[poolId as CentrifugeTargetAPYs][0]
-    if (poolId === NS3_POOL_ID && trancheToken.seniority === 0)
-      return centrifugeTargetAPYs[poolId as CentrifugeTargetAPYs][0]
-    if (poolId === NS3_POOL_ID && trancheToken.seniority === 1)
-      return centrifugeTargetAPYs[poolId as CentrifugeTargetAPYs][1]
-    if (daysSinceCreation < 30) return 'N/A'
-    return trancheToken.yield30DaysAnnualized
-      ? formatPercentage(new Perquintill(trancheToken.yield30DaysAnnualized))
-      : '-'
-  }
-
   const getTarget = (tranche: Token) =>
     (isTinlakePool && tranche.seniority === 0) || poolId === DYF_POOL_ID || poolId === NS3_POOL_ID
 
@@ -132,10 +118,23 @@ export const TrancheTokenCards = ({
         },
       },
     ]
-  }, [pool.tranches, metadata, poolId])
+  }, [pool.tranches, metadata, poolId, pool?.currency.symbol])
 
   const dataTable = useMemo(() => {
     return trancheTokens.map((tranche) => {
+      const calculateApy = (trancheToken: Token) => {
+        if (isTinlakePool && getTrancheText(trancheToken) === 'senior') return formatPercentage(trancheToken.apy)
+        if (isTinlakePool && trancheToken.seniority === 0) return '15%'
+        if (poolId === DYF_POOL_ID) return centrifugeTargetAPYs[poolId as CentrifugeTargetAPYs][0]
+        if (poolId === NS3_POOL_ID && trancheToken.seniority === 0)
+          return centrifugeTargetAPYs[poolId as CentrifugeTargetAPYs][0]
+        if (poolId === NS3_POOL_ID && trancheToken.seniority === 1)
+          return centrifugeTargetAPYs[poolId as CentrifugeTargetAPYs][1]
+        if (daysSinceCreation < 30) return 'N/A'
+        return trancheToken.yield30DaysAnnualized
+          ? formatPercentage(new Perquintill(trancheToken.yield30DaysAnnualized))
+          : '-'
+      }
       return {
         tokenName: tranche.name,
         apy: calculateApy(tranche),

centrifuge-app/src/components/Portfolio/Transactions.tsx

@@ -13,7 +13,6 @@ import {
   usePagination,
 } from '@centrifuge/fabric'
 import * as React from 'react'
-import { useTheme } from 'styled-components'
 import { TransactionTypeChip } from '../../components/Portfolio/TransactionTypeChip'
 import { formatDate } from '../../utils/date'
 import { getCSVDownloadUrl } from '../../utils/getCSVDownloadUrl'
@@ -44,7 +43,6 @@ type Row = {
 
 export function Transactions({ onlyMostRecent, narrow, txTypes, address, trancheId }: TransactionsProps) {
   const explorer = useGetExplorerUrl()
-  const theme = useTheme()
   const columns = [
     {
       align: 'left',

centrifuge-app/src/pages/Pool/Assets/index.tsx

@@ -64,7 +64,7 @@ export function PoolDetailAssets() {
   }
 
   const totalAssets = loans.reduce((sum, loan) => {
-    const amount = new CurrencyBalance(getAmount(loan as any), pool.currency.decimals).toDecimal()
+    const amount = new CurrencyBalance(getAmount(loan as any, pool), pool.currency.decimals).toDecimal()
 
     return sum.add(amount)
   }, Dec(0))