Adjust asset performance chart & make table responsive

centrifuge · kattylucy · Nov 6, 2024 · Oct 25, 2024 · Oct 25, 2024 · Oct 25, 2024
commit 2fb1051745a4f73a596038b60748e1222678e91a
diff --git a/centrifuge-app/src/components/Charts/AssetPerformanceChart.tsx b/centrifuge-app/src/components/Charts/AssetPerformanceChart.tsx
@@ -217,7 +217,7 @@ function AssetPerformanceChart({ pool, poolId, loanId }: Props) {
                   tickLine={false}
                   style={{ fontSize: '10px', fill: theme.colors.textPrimary }}
                   tickFormatter={(tick: number) => formatBalanceAbbreviated(tick, '', 2)}
-                  domain={selectedTabIndex === 0 ? priceRange : [0, 'auto']}
+                  domain={selectedTabIndex === 0 ? priceRange : ['auto', 'auto']}
                   width={90}
                 />
                 <CartesianGrid stroke={theme.colors.borderPrimary} vertical={false} />

diff --git a/centrifuge-app/src/components/PoolOverview/TransactionHistory.tsx b/centrifuge-app/src/components/PoolOverview/TransactionHistory.tsx
@@ -1,5 +1,5 @@
 import { AssetTransaction, CurrencyBalance } from '@centrifuge/centrifuge-js'
-import { AnchorButton, IconDownload, IconExternalLink, Shelf, Stack, Text } from '@centrifuge/fabric'
+import { AnchorButton, Box, IconDownload, IconExternalLink, Shelf, Stack, Text } from '@centrifuge/fabric'
 import BN from 'bn.js'
 import { formatDate } from '../../utils/date'
 import { formatBalance } from '../../utils/formatting'
@@ -279,7 +279,7 @@ export const TransactionHistoryTable = ({
           </Stack>
         )
       },
-      width: '110px',
+      width: '100px',
     },
   ]
 
@@ -308,7 +308,9 @@ export const TransactionHistoryTable = ({
           )}
         </Shelf>
       </Shelf>
-      <DataTable data={tableData} columns={columns} />
+      <Box overflow="auto">
+        <DataTable data={tableData} columns={columns} />
+      </Box>
     </Stack>
   )
 }
diff --git a/centrifuge-app/src/components/InvestRedeem/InvestRedeemCentrifugeProvider.tsx b/centrifuge-app/src/components/InvestRedeem/InvestRedeemCentrifugeProvider.tsx
    }, 300)

    return () => clearTimeout(timer)
  }, [isDataLoading])

  const state: InvestRedeemState = {
    poolId,
diff --git a/centrifuge-app/src/components/InvestRedeem/InvestRedeemDrawer.tsx b/centrifuge-app/src/components/InvestRedeem/InvestRedeemDrawer.tsx
    )

    return { sumRealizedProfitFifoByPeriod, sumUnrealizedProfitAtMarketPrice }
  }, [dailyPoolStates])

  return (
    <Drawer isOpen={open} onClose={onClose}>
diff --git a/centrifuge-app/src/components/LoanList.tsx b/centrifuge-app/src/components/LoanList.tsx

      return aId.localeCompare(bId)
    })
  }, [isTinlakePool, loansData])

  const filters = useFilters({
    data: loansWithLabelStatus as Loan[],
diff --git a/centrifuge-app/src/components/PoolCard/index.tsx b/centrifuge-app/src/components/PoolCard/index.tsx
    )
  }

  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]
diff --git a/centrifuge-app/src/components/PoolList.tsx b/centrifuge-app/src/components/PoolList.tsx
  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>(
diff --git a/centrifuge-app/src/components/PoolOverview/TrancheTokenCards.tsx b/centrifuge-app/src/components/PoolOverview/TrancheTokenCards.tsx
        },
      },
    ]
  }, [pool.tranches, metadata, poolId])

  const dataTable = useMemo(() => {
    return trancheTokens.map((tranche) => {
        isTarget: getTarget(tranche),
      }
    })
  }, [trancheTokens, getTarget])

  return (
    <Shelf gap={3}>
diff --git a/centrifuge-app/src/components/Portfolio/Transactions.tsx b/centrifuge-app/src/components/Portfolio/Transactions.tsx

 export function Transactions({ onlyMostRecent, narrow, txTypes, address, trancheId }: TransactionsProps) {
  const explorer = useGetExplorerUrl()
  const theme = useTheme()
  const columns = [
    {
      align: 'left',
	}, 300)

	return () => clearTimeout(timer)
	}, [isDataLoading])
Check warning on line 100 in centrifuge-app/src/components/InvestRedeem/InvestRedeemCentrifugeProvider.tsx GitHub Actions / build-app `React Hook React.useEffect has a missing dependency: 'connectedType'. Either include it or remove the dependency array` Check warning on line 100 in centrifuge-app/src/components/InvestRedeem/InvestRedeemCentrifugeProvider.tsx GitHub Actions / ff-prod / build-app `React Hook React.useEffect has a missing dependency: 'connectedType'. Either include it or remove the dependency array`

	const state: InvestRedeemState = {
	poolId,
	)

	return { sumRealizedProfitFifoByPeriod, sumUnrealizedProfitAtMarketPrice }
	}, [dailyPoolStates])
Check warning on line 77 in centrifuge-app/src/components/InvestRedeem/InvestRedeemDrawer.tsx GitHub Actions / build-app `React Hook React.useMemo has a missing dependency: 'pool.currency.decimals'. Either include it or remove the dependency array` Check warning on line 77 in centrifuge-app/src/components/InvestRedeem/InvestRedeemDrawer.tsx GitHub Actions / ff-prod / build-app `React Hook React.useMemo has a missing dependency: 'pool.currency.decimals'. Either include it or remove the dependency array`

	return (
	<Drawer isOpen={open} onClose={onClose}>

	return aId.localeCompare(bId)
	})
	}, [isTinlakePool, loansData])
Check warning on line 78 in centrifuge-app/src/components/LoanList.tsx GitHub Actions / build-app `React Hook React.useMemo has an unnecessary dependency: 'isTinlakePool'. Either exclude it or remove the dependency array` Check warning on line 78 in centrifuge-app/src/components/LoanList.tsx GitHub Actions / ff-prod / build-app `React Hook React.useMemo has an unnecessary dependency: 'isTinlakePool'. Either exclude it or remove the dependency array`

	const filters = useFilters({
	data: loansWithLabelStatus as Loan[],
	)
	}

	const calculateApy = (tranche: TrancheWithCurrency) => {
Check warning on line 164 in centrifuge-app/src/components/PoolCard/index.tsx GitHub Actions / build-app `The 'calculateApy' function makes the dependencies of useMemo Hook (at line 202) change on every render. Move it inside the useMemo callback. Alternatively, wrap the definition of 'calculateApy' in its own useCallback() Hook` Check warning on line 164 in centrifuge-app/src/components/PoolCard/index.tsx GitHub Actions / ff-prod / build-app `The 'calculateApy' function makes the dependencies of useMemo Hook (at line 202) change on every render. Move it inside the useMemo callback. Alternatively, wrap the definition of 'calculateApy' in its own useCallback() Hook`
	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]
	const { search } = useLocation()
	const [showArchived, setShowArchived] = React.useState(false)
	const [listedPools, , metadataIsLoading] = useListedPools()
	const isLarge = useIsAboveBreakpoint('L')
Check warning on line 45 in centrifuge-app/src/components/PoolList.tsx GitHub Actions / build-app `'isLarge' is assigned a value but never used` Check warning on line 45 in centrifuge-app/src/components/PoolList.tsx GitHub Actions / ff-prod / build-app `'isLarge' is assigned a value but never used`
	const isMedium = useIsAboveBreakpoint('M')
Check warning on line 46 in centrifuge-app/src/components/PoolList.tsx GitHub Actions / build-app `'isMedium' is assigned a value but never used` Check warning on line 46 in centrifuge-app/src/components/PoolList.tsx GitHub Actions / ff-prod / build-app `'isMedium' is assigned a value but never used`

	const centPools = listedPools.filter(({ id }) => !id.startsWith('0x')) as Pool[]
	const centPoolsMetaData: PoolMetaDataPartial[] = useMetadataMulti<PoolMetadata>(
	},
	},
	]
	}, [pool.tranches, metadata, poolId])
Check warning on line 135 in centrifuge-app/src/components/PoolOverview/TrancheTokenCards.tsx GitHub Actions / build-app `React Hook useMemo has a missing dependency: 'pool?.currency.symbol'. Either include it or remove the dependency array` Check warning on line 135 in centrifuge-app/src/components/PoolOverview/TrancheTokenCards.tsx GitHub Actions / ff-prod / build-app `React Hook useMemo has a missing dependency: 'pool?.currency.symbol'. Either include it or remove the dependency array`

	const dataTable = useMemo(() => {
	return trancheTokens.map((tranche) => {
	isTarget: getTarget(tranche),
	}
	})
	}, [trancheTokens, getTarget])
Check warning on line 149 in centrifuge-app/src/components/PoolOverview/TrancheTokenCards.tsx GitHub Actions / build-app `React Hook useMemo has a missing dependency: 'calculateApy'. Either include it or remove the dependency array` Check warning on line 149 in centrifuge-app/src/components/PoolOverview/TrancheTokenCards.tsx GitHub Actions / ff-prod / build-app `React Hook useMemo has a missing dependency: 'calculateApy'. Either include it or remove the dependency array`

	return (
	<Shelf gap={3}>

	export function Transactions({ onlyMostRecent, narrow, txTypes, address, trancheId }: TransactionsProps) {
	const explorer = useGetExplorerUrl()
	const theme = useTheme()
Check warning on line 47 in centrifuge-app/src/components/Portfolio/Transactions.tsx GitHub Actions / build-app `'theme' is assigned a value but never used` Check warning on line 47 in centrifuge-app/src/components/Portfolio/Transactions.tsx GitHub Actions / ff-prod / build-app `'theme' is assigned a value but never used`
	const columns = [
	{
	align: 'left',