Add feedback review

centrifuge · Oct 29, 2024 · 0ab6dc3 · 0ab6dc3
1 parent f05c566
commit 0ab6dc3
Show file tree

Hide file tree

Showing 13 changed files with 84 additions and 55 deletions.
diff --git a/centrifuge-app/src/components/AssetSummary.tsx b/centrifuge-app/src/components/AssetSummary.tsx
@@ -1,4 +1,3 @@
-import { Loan, TinlakeLoan } from '@centrifuge/centrifuge-js'
 import { Shelf, Stack, Text } from '@centrifuge/fabric'
 import * as React from 'react'
 import { useTheme } from 'styled-components'
@@ -7,29 +6,28 @@ type Props = {
   data?: {
     label: React.ReactNode
     value: React.ReactNode
+    heading: boolean
   }[]
   children?: React.ReactNode
-  loan?: Loan | TinlakeLoan
 }
 
-export function AssetSummary({ data, children, loan }: Props) {
+export function AssetSummary({ data, children }: Props) {
   const theme = useTheme()
   return (
     <Stack
       bg={theme.colors.backgroundSecondary}
       border={`1px solid ${theme.colors.borderSecondary}`}
       borderRadius={10}
       padding={2}
-      marginLeft={[2, 2, 2, 2, 5]}
-      marginRight={[2, 2, 2, 2, 5]}
+      mx={[2, 2, 2, 2, 5]}
     >
-      <Shelf gap="6">
-        {data?.map(({ label, value }, index) => (
+      <Shelf gap={2}>
+        {data?.map(({ label, value, heading }, index) => (
           <Stack key={`${value}-${label}-${index}`}>
-            <Text variant="body2" styke={{ margin: 0, padding: 0 }}>
+            <Text variant={heading ? 'body2' : 'body3'} color="textSecondary" style={{ margin: 0, padding: 0 }}>
               {label}
             </Text>
-            <Text variant="heading">{value}</Text>
+            <Text variant={heading ? 'heading' : 'heading2'}>{value}</Text>
           </Stack>
         ))}
         {children}

diff --git a/centrifuge-app/src/components/Charts/AssetPerformanceChart.tsx b/centrifuge-app/src/components/Charts/AssetPerformanceChart.tsx
@@ -153,7 +153,7 @@ function AssetPerformanceChart({ pool, poolId, loanId }: Props) {
                 : 'Cash balance'}
             </Text>
             <Text variant="body2" style={{ marginLeft: 4 }}>
-              ({pool.currency.name ?? 'USD'})
+              ({pool.currency.symbol ?? 'USD'})
             </Text>
           </Box>
           {!(assetSnapshots && assetSnapshots[0]?.currentPrice?.toString() === '0') && (
@@ -233,19 +233,19 @@ function AssetPerformanceChart({ pool, poolId, loanId }: Props) {
                                 <Text variant="body3">{'Value'}</Text>
                                 <Text variant="body3">
                                   {payload[0].payload.historicPV
-                                    ? formatBalance(payload[0].payload.historicPV, pool.currency.name, 2)
+                                    ? formatBalance(payload[0].payload.historicPV, pool.currency.symbol, 2)
                                     : payload[0].payload.futurePV
-                                    ? `~${formatBalance(payload[0].payload.futurePV, pool.currency.name, 2)}`
+                                    ? `~${formatBalance(payload[0].payload.futurePV, pool.currency.symbol, 2)}`
                                     : '-'}
                                 </Text>
                               </Shelf>
                               <Shelf justifyContent="space-between" pl="4px" key={index}>
                                 <Text variant="body3">Price</Text>
                                 <Text variant="body3">
                                   {payload[0].payload.historicPrice
-                                    ? formatBalance(payload[0].payload.historicPrice, pool.currency.name, 6)
+                                    ? formatBalance(payload[0].payload.historicPrice, pool.currency.symbol, 6)
                                     : payload[0].payload.futurePrice
-                                    ? `~${formatBalance(payload[0].payload.futurePrice, pool.currency.name, 6)}`
+                                    ? `~${formatBalance(payload[0].payload.futurePrice, pool.currency.symbol, 6)}`
                                     : '-'}
                                 </Text>
                               </Shelf>

diff --git a/centrifuge-app/src/components/PageSection.tsx b/centrifuge-app/src/components/PageSection.tsx
@@ -43,7 +43,7 @@ export function PageSection({
 }: Props) {
   const [open, setOpen] = React.useState(defaultOpen)
   return (
-    <Stack as="section" padding={2} marginLeft={[0, 0, 0, 1, 3]} marginRight={[0, 0, 0, 1, 3]} gap={3}>
+    <Stack as="section" padding={2} mx={[0, 0, 0, 1, 3]} gap={3}>
       {(title || titleAddition) && (
         <Shelf justifyContent="space-between" as="header">
           <Stack>

diff --git a/centrifuge-app/src/components/PoolOverview/TransactionHistory.tsx b/centrifuge-app/src/components/PoolOverview/TransactionHistory.tsx
@@ -254,13 +254,13 @@ export const TransactionHistoryTable = ({
     },
     {
       align: 'left',
-      header: <SortableTableHeader label="Amount" />,
+      header: <SortableTableHeader label="Quantity" />,
       cell: ({ amount, netFlow }: Row) => (
         <Text as="span" variant="body3">
           {amount ? `${activeAssetId && netFlow === 'negative' ? '-' : ''}${formatBalance(amount, 'USD', 2, 2)}` : ''}
         </Text>
       ),
-      sortKey: 'amount',
+      sortKey: 'quantity',
       width: '250px',
     },
     {

diff --git a/centrifuge-app/src/pages/Loan/CorrectionForm.tsx b/centrifuge-app/src/pages/Loan/CorrectionForm.tsx
@@ -119,7 +119,8 @@ export function CorrectionForm({ loan }: { loan: ActiveLoan }) {
       <Stack as={Form} gap={2} p={1} noValidate ref={correctionFormRef}>
         <Text variant="heading2">Correction</Text>
         <Box
-          padding="24px 16px"
+          px={3}
+          py={2}
           backgroundColor={theme.colors.backgroundSecondary}
           borderRadius={10}
           border={`1px solid ${theme.colors.borderPrimary}`}
@@ -209,7 +210,7 @@ export function CorrectionForm({ loan }: { loan: ActiveLoan }) {
           </Stack>
         </Box>
 
-        <Stack gap={2} mt={2} border={`1px solid ${theme.colors.borderPrimary}`} padding="24px 16px" borderRadius={10}>
+        <Stack gap={2} mt={2} border={`1px solid ${theme.colors.borderPrimary}`} px={3} py={2} borderRadius={10}>
           <Text variant="heading4">Summary</Text>
           <Stack gap={1} mb={1}>
             <Shelf justifyContent="space-between">

diff --git a/centrifuge-app/src/pages/Loan/ExternalFinanceForm.tsx b/centrifuge-app/src/pages/Loan/ExternalFinanceForm.tsx
@@ -164,7 +164,8 @@ export function ExternalFinanceForm({
         <FormikProvider value={financeForm}>
           <Stack as={Form} gap={2} noValidate ref={financeFormRef}>
             <Box
-              padding="24px 16px"
+              px={3}
+              py={2}
               backgroundColor={theme.colors.backgroundSecondary}
               borderRadius={10}
               border={`1px solid ${theme.colors.borderPrimary}`}
@@ -247,13 +248,7 @@ export function ExternalFinanceForm({
               <AnchorTextLink href={`#/pools/${pool.id}/liquidity`}>Liquidity tab</AnchorTextLink>.
             </ErrorMessage>
 
-            <Stack
-              gap={2}
-              mt={2}
-              border={`1px solid ${theme.colors.borderPrimary}`}
-              padding="24px 16px"
-              borderRadius={10}
-            >
+            <Stack gap={2} mt={2} border={`1px solid ${theme.colors.borderPrimary}`} px={3} py={2} borderRadius={10}>
               <Text variant="heading4">Transaction summary</Text>
               <Box padding={2}>
                 <Stack gap={1} mb={3}>

diff --git a/centrifuge-app/src/pages/Loan/ExternalRepayForm.tsx b/centrifuge-app/src/pages/Loan/ExternalRepayForm.tsx
@@ -199,7 +199,8 @@ export function ExternalRepayForm({
     <FormikProvider value={repayForm}>
       <Stack as={Form} gap={3} noValidate ref={repayFormRef}>
         <Box
-          padding="24px 16px"
+          px={3}
+          py={2}
           backgroundColor={theme.colors.backgroundSecondary}
           borderRadius={10}
           border={`1px solid ${theme.colors.borderPrimary}`}
@@ -310,7 +311,7 @@ export function ExternalRepayForm({
           outstanding interest ({formatBalance(maxInterest, displayCurrency, 2)}).
         </ErrorMessage>
 
-        <Stack gap={2} mt={2} border={`1px solid ${theme.colors.borderPrimary}`} padding="24px 16px" borderRadius={10}>
+        <Stack gap={2} mt={2} border={`1px solid ${theme.colors.borderPrimary}`} px={3} py={2} borderRadius={10}>
           <Stack gap={1} mb={2}>
             <Text variant="heading4">Transaction summary</Text>
             <Box paddingX={2} mt={2}>

diff --git a/centrifuge-app/src/pages/Loan/FinanceForm.tsx b/centrifuge-app/src/pages/Loan/FinanceForm.tsx
@@ -198,7 +198,8 @@ function InternalFinanceForm({
       {!maturityDatePassed && (
         <FormikProvider value={financeForm}>
           <Box
-            padding="24px 16px"
+            px={3}
+            py={2}
             backgroundColor={theme.colors.backgroundSecondary}
             borderRadius={10}
             border={`1px solid ${theme.colors.borderPrimary}`}
@@ -277,13 +278,7 @@ function InternalFinanceForm({
             </Stack>
           </Box>
 
-          <Stack
-            gap={2}
-            mt={2}
-            border={`1px solid ${theme.colors.borderPrimary}`}
-            padding="24px 16px"
-            borderRadius={10}
-          >
+          <Stack gap={2} mt={2} border={`1px solid ${theme.colors.borderPrimary}`} px={3} py={2} borderRadius={10}>
             <Text variant="heading4">Transaction summary</Text>
             <Box padding={2}>
               <Stack gap={1} mb={3}>

diff --git a/centrifuge-app/src/pages/Loan/KeyMetrics.tsx b/centrifuge-app/src/pages/Loan/KeyMetrics.tsx
@@ -127,13 +127,13 @@ export function KeyMetrics({ pool, loan }: Props) {
           sumRealizedProfitFifo
             ? {
                 label: 'Realized P&L',
-                value: formatBalance(sumRealizedProfitFifo, pool.currency.symbol),
+                value: formatBalance(sumRealizedProfitFifo, pool.currency.symbol, 2, 2),
               }
             : (null as never),
           unrealizedProfitAtMarketPrice
             ? {
                 label: 'Unrealized P&L',
-                value: formatBalance(unrealizedProfitAtMarketPrice, pool.currency.symbol),
+                value: formatBalance(unrealizedProfitAtMarketPrice, pool.currency.symbol, 2, 2),
               }
             : (null as never),
         ].filter(Boolean)

diff --git a/centrifuge-app/src/pages/Loan/RepayForm.tsx b/centrifuge-app/src/pages/Loan/RepayForm.tsx
@@ -234,7 +234,8 @@ function InternalRepayForm({
       <FormikProvider value={repayForm}>
         <Stack as={Form} gap={2} noValidate ref={repayFormRef}>
           <Box
-            padding="24px 16px"
+            px={3}
+            py={2}
             backgroundColor={theme.colors.backgroundSecondary}
             borderRadius={10}
             border={`1px solid ${theme.colors.borderPrimary}`}
@@ -354,13 +355,7 @@ function InternalRepayForm({
             </Stack>
           </Box>
 
-          <Stack
-            gap={2}
-            mt={2}
-            border={`1px solid ${theme.colors.borderPrimary}`}
-            padding="24px 16px"
-            borderRadius={10}
-          >
+          <Stack gap={2} mt={2} border={`1px solid ${theme.colors.borderPrimary}`} px={3} py={2} borderRadius={10}>
             <Text variant="heading4">Transaction summary</Text>
             <Box paddingX={2} mt={2}>
               <Stack gap={1}>

diff --git a/centrifuge-app/src/pages/Loan/index.tsx b/centrifuge-app/src/pages/Loan/index.tsx
@@ -25,6 +25,7 @@ import { useParams } from 'react-router'
 import styled from 'styled-components'
 import { AssetSummary } from '../../../src/components/AssetSummary'
 import { LoanLabel, getLoanLabelStatus } from '../../../src/components/LoanLabel'
+import { Dec } from '../../../src/utils/Decimal'
 import AssetPerformanceChart from '../../components/Charts/AssetPerformanceChart'
 import { LabelValueStack } from '../../components/LabelValueStack'
 import { LayoutSection } from '../../components/LayoutBase/LayoutSection'
@@ -144,6 +145,16 @@ function Loan() {
   const isOracle = loan && 'valuationMethod' in loan.pricing && loan.pricing.valuationMethod === 'oracle'
   const loanStatus = loan && getLoanLabelStatus(loan)[1]
 
+  const sumRealizedProfitFifo = borrowerAssetTransactions?.reduce(
+    (sum, tx) => sum.add(tx.realizedProfitFifo?.toDecimal() ?? Dec(0)),
+    Dec(0)
+  )
+
+  const unrealizedProfitAtMarketPrice = borrowerAssetTransactions?.reduce(
+    (sum, tx) => sum.add(tx.unrealizedProfitAtMarketPrice?.toDecimal() ?? Dec(0)),
+    Dec(0)
+  )
+
   const currentFace =
     loan?.pricing && 'outstandingQuantity' in loan.pricing
       ? loan.pricing.outstandingQuantity.toDecimal().mul(loan.pricing.notional.toDecimal())
@@ -174,6 +185,16 @@ function Loan() {
     return 0
   }
 
+  const getCurrentPrice = () => {
+    if (loan && 'currentPrice' in loan) return loan.currentPrice
+    return 0
+  }
+
+  const getValueProfit = () => {
+    if (loanStatus === 'Closed' || loanStatus === 'Repaid') return sumRealizedProfitFifo ?? 0
+    else return unrealizedProfitAtMarketPrice ?? 0
+  }
+
   if (metadataIsLoading) return
 
   return (
@@ -189,12 +210,35 @@ function Loan() {
       </Box>
 
       <AssetSummary
-        data={[
-          {
-            label: 'Current value',
-            value: `${formatBalance(getCurrentValue(), pool.currency.symbol, 2, 2)}`,
-          },
-        ]}
+        data={
+          isOracle
+            ? [
+                {
+                  label: `Asset Value (${pool.currency.symbol ?? 'USD'})`,
+                  value: `${formatBalance(getCurrentValue(), undefined, 2, 2)}`,
+                  heading: true,
+                },
+                {
+                  label: `Price (${pool.currency.symbol ?? 'USD'})`,
+                  value: `${formatBalance(getCurrentPrice(), undefined, 2, 2)}`,
+                  heading: false,
+                },
+                {
+                  label: `${loanStatus === 'Closed' || loanStatus === 'Repaid' ? 'Realized P&L' : 'Unrealized P&L'} (${
+                    pool.currency.symbol ?? 'USD'
+                  })`,
+                  value: `${formatBalance(getValueProfit(), undefined, 2, 2)}`,
+                  heading: false,
+                },
+              ]
+            : [
+                {
+                  label: `Current value (${pool.currency.symbol ?? 'USD'})`,
+                  value: `${formatBalance(getCurrentValue(), undefined, 2, 2)}`,
+                  heading: true,
+                },
+              ]
+        }
       >
         {loan && !isTinlakeLoan(loan) && <ActionButtons loan={loan} />}
       </AssetSummary>

diff --git a/centrifuge-app/src/pages/Pool/Assets/OffchainMenu.tsx b/centrifuge-app/src/pages/Pool/Assets/OffchainMenu.tsx
@@ -35,7 +35,7 @@ const StyledButton = styled(Box)`
   font-family: Inter, sans-serif;
 `
 
-const LoanOption: React.FC<LoanOptionProps> = ({ loan }) => {
+const LoanOption = ({ loan }: LoanOptionProps) => {
   const navigate = useNavigate()
   const location = useLocation()
   const nft = useCentNFT(loan.asset.collectionId, loan.asset.nftId, false, loan.poolId.startsWith('0x'))

diff --git a/fabric/src/components/InlineFeedback/index.tsx b/fabric/src/components/InlineFeedback/index.tsx
@@ -26,7 +26,7 @@ export function InlineFeedback({ status = 'default', children }: InlineFeedbackP
     <Text variant="body3">
       <Shelf alignItems="baseline" gap="4px">
         <StyledIconWrapper minWidth="iconSmall" height="iconSmall" flex="0 0 auto">
-          <StyledIcon as={icons[status]} size={24} color={`status${capitalizeFirstLetter(status)}`} />
+          <StyledIcon as={icons[status]} size="iconMedium" color={`status${capitalizeFirstLetter(status)}`} />
         </StyledIconWrapper>
         <TextWrapper>{children}</TextWrapper>
       </Shelf>