Assets page redesign #2513

kattylucy · 2024-10-21T13:43:55Z

Redesign to asset overview page & asset detail page

Dev

github-actions · 2024-10-21T13:49:37Z

PR deployed in Google Cloud
URL: https://app-pr2513.k-f.dev
Commit #: 9984e3d
To access the functions directly check the corresponding deploy Action

github-actions · 2024-10-21T13:49:38Z

PR deployed in Google Cloud
URL: https://pr2513-app-ff-production.k-f.dev
Commit #: 9984e3d
To access the functions directly check the corresponding deploy Action

onnovisser · 2024-10-29T12:21:15Z

centrifuge-app/src/components/AssetSummary.tsx

+      marginLeft={[2, 2, 2, 2, 5]}
+      marginRight={[2, 2, 2, 2, 5]}


Suggested change

marginLeft={[2, 2, 2, 2, 5]}

marginRight={[2, 2, 2, 2, 5]}

mx={[2, 2, 2, 2, 5]}

onnovisser · 2024-10-29T12:22:35Z

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

                                  {payload[0].payload.historicPV
-                                    ? formatBalance(payload[0].payload.historicPV, 'USD', 2)
+                                    ? formatBalance(payload[0].payload.historicPV, pool.currency.name, 2)


should be pool.currency.symbol for all of them

onnovisser · 2024-10-29T12:23:22Z

centrifuge-app/src/components/PageSection.tsx

-      borderTopStyle="solid"
-      borderTopColor="borderPrimary"
-    >
+    <Stack as="section" padding={2} marginLeft={[0, 0, 0, 1, 3]} marginRight={[0, 0, 0, 1, 3]} gap={3}>


Suggested change

<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}>

onnovisser · 2024-10-29T12:26:02Z

centrifuge-app/src/pages/Loan/ExternalRepayForm.tsx

-        <Stack gap={1}>
-          <Shelf gap={1}>
+        <Box
+          padding="24px 16px"


Suggested change

padding="24px 16px"

px={3}

py={2}

prefer theme values over hardcoded ones

onnovisser · 2024-10-29T12:28:21Z

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

+  font-family: Inter, sans-serif;
+`
+
+const LoanOption: React.FC<LoanOptionProps> = ({ loan }) => {


React.FC is obsolete. Normal functions will do

onnovisser · 2024-10-29T12:29:02Z

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="iconSmall" color={`status${capitalizeFirstLetter(status)}`} />
+          <StyledIcon as={icons[status]} size={24} color={`status${capitalizeFirstLetter(status)}`} />


Suggested change

<StyledIcon as={icons[status]} size={24} color={`status${capitalizeFirstLetter(status)}`} />

<StyledIcon as={icons[status]} size="iconMedium" color={`status${capitalizeFirstLetter(status)}`} />

onnovisser · 2024-10-29T12:32:50Z

Looking really nice!

Code changes after code was approved

sophialittlejohn · 2024-11-05T20:33:14Z

centrifuge-app/src/components/LoanList.tsx

+      nftIdSortKey: loan.asset.nftId,
+      idSortKey: parseInt(loan.id, 10),
+      outstandingDebtSortKey: loan.status !== 'Closed' && loan?.outstandingDebt?.toDecimal().toNumber(),
+      originationDateSortKey:
+        loan.status === 'Active' &&
+        loan?.originationDate &&
+        'interestRate' in loan.pricing &&
+        !loan?.pricing.interestRate?.isZero() &&
+        !loan?.totalBorrowed?.isZero()
+          ? loan.originationDate
+          : '',
+      maturityDate: loan.pricing.maturityDate,
+      portfolioPercentage,
+      ...loan,


So I noticed that the column sorting doesn't work yet. The columns that are not shown anymore in the table don't need a sortKey anymore. Instead you should replace the sortKeys with all of the sortable columns in the table. Under the hood anything that needs to be sortable needs to have its own key

sophialittlejohn · 2024-11-05T20:34:41Z

centrifuge-app/src/components/LoanList.tsx

+        'Portfolio %': loan.portfolioPercentage ? loan.portfolioPercentage : '-',
+      }
+    })
+  }, [rows])


would add the suggested dependency pool here

sophialittlejohn · 2024-11-05T20:36:04Z

centrifuge-app/src/components/Tooltips.tsx

@@ -342,6 +342,10 @@ export const tooltipText = {
    label: 'Expense ratio',
    body: 'The operating expenses of the fund as a percentage of the total NAV',
  },
+  totalNavMinus: {


Suggested change

totalNavMinus: {

totalNavMinusFees: {

sophialittlejohn

Nice work 🔥 🔥 🔥 besides the table sorting now working right yet I think it is good enough to ship 🚢 proper table sorting can be handled in a follow up PR if it will block the release

hieronx · 2024-11-06T08:04:45Z

@kattylucy Looking great! One thing I noticed: there is now a new asset with 0 value. The market price shows up as USDC which should be 0 USDC, and likewise for both P&L columns.

I also asked Brian to come up with a loading state: https://www.figma.com/design/ng7qdNcSCXSDA6ZUdWIs6u/Pool-Overview%2F-Pool-Detail?node-id=4516-2623&t=DshORdTnFD448TSr-4 This would be nice to implement while the data in the table is loading (and a pattern we should start adopting across the app). But consider this a very nice-to-have, happy to write a separate ticket for this as well.

hieronx · 2024-11-06T08:06:26Z

Also one smaller point, the download icon is off:

Compared to design:

kattylucy force-pushed the 2507_assets_redesign branch 6 times, most recently from ba48e5a to e182f0f Compare October 24, 2024 09:08

kattylucy changed the base branch from main to 2505_post_launch_fixes October 24, 2024 09:08

kattylucy force-pushed the 2507_assets_redesign branch 2 times, most recently from b68c433 to f7969b6 Compare October 24, 2024 09:56

kattylucy marked this pull request as ready for review October 24, 2024 09:57

kattylucy force-pushed the 2507_assets_redesign branch 3 times, most recently from b1d79bd to c232ea0 Compare October 25, 2024 08:23

kattylucy force-pushed the 2505_post_launch_fixes branch from 226fd0a to d17153c Compare October 25, 2024 09:53

kattylucy force-pushed the 2507_assets_redesign branch 3 times, most recently from a7d1cb4 to f05c566 Compare October 29, 2024 09:54

kattylucy requested review from sophialittlejohn and onnovisser October 29, 2024 09:55

onnovisser reviewed Oct 29, 2024

View reviewed changes

kattylucy requested a review from onnovisser October 29, 2024 14:04

Base automatically changed from 2505_post_launch_fixes to main October 30, 2024 08:59

Adjust asset performance chart & make table responsive

2fb1051

kattylucy removed request for onnovisser and sophialittlejohn October 30, 2024 11:12

onnovisser previously approved these changes Oct 30, 2024

View reviewed changes

kattylucy added 3 commits October 30, 2024 12:39

Fix total assets

e1c0f47

Add feedback review

b6a0400

Add feedback qa

45c5c19

kattylucy requested a review from onnovisser October 30, 2024 15:56

kattylucy added 2 commits October 30, 2024 19:24

Fix ts warnings

484b28d

Add tooltip to total nav

8832b00

kattylucy removed the request for review from onnovisser October 30, 2024 18:34

kattylucy added 5 commits October 30, 2024 19:40

Fix bug on path to view all transactions

4fa6f4d

Add chart to onchain reserve

5473435

Add loading buttons to side drawer

e45a4d0

Add feedback

909ad82

Add ongoing assets

b3b0d0a

kattylucy requested a review from onnovisser November 5, 2024 13:46

Add underline

14ded4b

sophialittlejohn reviewed Nov 5, 2024

View reviewed changes

sophialittlejohn approved these changes Nov 5, 2024

View reviewed changes

Fix table sorting & download icon

1a21778

kattylucy force-pushed the 2507_assets_redesign branch from e008388 to 1a21778 Compare November 6, 2024 10:17

Merge branch 'main' into 2507_assets_redesign

9984e3d

kattylucy merged commit bf5f6a9 into main Nov 6, 2024
9 checks passed

kattylucy deleted the 2507_assets_redesign branch November 6, 2024 10:19

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Assets page redesign #2513

Assets page redesign #2513

kattylucy commented Oct 21, 2024

github-actions bot commented Oct 21, 2024 •

edited

Loading

github-actions bot commented Oct 21, 2024 •

edited

Loading

onnovisser Oct 29, 2024

onnovisser Oct 29, 2024

onnovisser Oct 29, 2024

onnovisser Oct 29, 2024

onnovisser Oct 29, 2024

onnovisser Oct 29, 2024

onnovisser commented Oct 29, 2024

sophialittlejohn Nov 5, 2024

sophialittlejohn Nov 5, 2024

sophialittlejohn Nov 5, 2024

sophialittlejohn left a comment

hieronx commented Nov 6, 2024

hieronx commented Nov 6, 2024

	marginLeft={[2, 2, 2, 2, 5]}
	marginRight={[2, 2, 2, 2, 5]}
	mx={[2, 2, 2, 2, 5]}

	<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}>

	<StyledIcon as={icons[status]} size={24} color={`status${capitalizeFirstLetter(status)}`} />
	<StyledIcon as={icons[status]} size="iconMedium" color={`status${capitalizeFirstLetter(status)}`} />

Assets page redesign #2513

Assets page redesign #2513

Conversation

kattylucy commented Oct 21, 2024

github-actions bot commented Oct 21, 2024 • edited Loading

github-actions bot commented Oct 21, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

onnovisser commented Oct 29, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sophialittlejohn left a comment

Choose a reason for hiding this comment

hieronx commented Nov 6, 2024

hieronx commented Nov 6, 2024

github-actions bot commented Oct 21, 2024 •

edited

Loading

github-actions bot commented Oct 21, 2024 •

edited

Loading