Pool Overview redesign #2435

kattylucy · 2024-09-06T15:05:29Z

Redesign for pool overview page

https://www.figma.com/design/ng7qdNcSCXSDA6ZUdWIs6u/Pool-Overview%2F-Pool-Detail?node-id=2802-6256&node-type=frame&t=HdoH2YlSaWxLKG0U-0

#2427

Dev

github-actions · 2024-09-06T15:11:23Z

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

github-actions · 2024-09-06T15:12:18Z

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

sophialittlejohn · 2024-10-01T15:28:16Z

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

  const data: ChartData[] = React.useMemo(
    () =>
-      truncatedPoolStates?.map((day) => {
+      truncatedPoolStates?.map((day: any) => {


Suggested change

truncatedPoolStates?.map((day: any) => {

truncatedPoolStates?.map((day) => {

better to make sure truncatedPoolStates is typed rather than casting day as any

sophialittlejohn · 2024-10-01T16:14:49Z

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

+    <Box width="8px" height="8px" borderRadius="50%" backgroundColor={color} marginRight="4px" />
+  )
+
+  const navObj = {


Suggested change

const navObj = {

const navData = {

for consistency though out

sophialittlejohn · 2024-10-01T16:15:13Z

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

+
+  const graphData = selectedTabIndex === 0 ? tokenData : apyData
+
+  const toggleRange = (e: any) => {


let's try and avoid anys please!

sophialittlejohn · 2024-10-01T16:15:25Z

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

-    </Shelf>
+    <Box display="flex" justifyContent="space-between" alignItems="center">
+      <Box display="flex" justifyContent="space-evenly">
+        {graphData.map((item: any, index: any) => {


sophialittlejohn · 2024-10-01T16:17:44Z

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

+type DailyPoolStateProps = {
+  timestamp: string
+  tranches: { [trancheId: string]: TrancheState }
+  apy?: Perquintill | undefined
+}


rather build the type from the existing dailyPoolState using Pick or Omit so that we can more easily catch changes if they were to happen

for TrancheState as well

sophialittlejohn · 2024-10-01T16:18:37Z

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

  const data = React.useMemo(() => {
    const tokenData =
-      dailyPoolStates?.map((state) => {
-        return { price: state.tranches[trancheId].price?.toFloat() || 0, day: new Date(state.timestamp) }
+      dailyPoolStates?.map((state: DailyPoolStateProps) => {


Suggested change

dailyPoolStates?.map((state: DailyPoolStateProps) => {

dailyPoolStates?.map((state) => {

again this type should be interfered if dailyPoolStates is type properly

now that its correctly inferred you can remove the DailyPoolStateProps from this map

sophialittlejohn · 2024-10-01T16:21:01Z

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

 import { Spinner } from '../Spinner'
+import { Tooltips } from '../Tooltips'
+
+const StyledPillButton = styled(PillButton)`


seems this can be removed?

sophialittlejohn · 2024-10-01T16:21:35Z

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

+interface DailyTrancheState {
+  yield30DaysAnnualized: Perquintill
+  timestamp: string
+}

-  function hasValuationMethod(pricing: any): pricing is { valuationMethod: string } {
-    return pricing && typeof pricing.valuationMethod === 'string'
+type DailyTrancheStateArr = Record<string, DailyTrancheState[]>
+
+type Tranche = {
+  currency: {
+    name: string
  }
+  id: string
+}


also here best to build the types from existing ones rather than redeclaring, recommend using Pick or Omit

sophialittlejohn · 2024-10-01T16:25:16Z

centrifuge-app/src/pages/IssuerCreatePool/CustomCategories.tsx

+  const fmk = useFormikContext<PoolMetadataInput>()
+  const { values } = fmk
+
+  console.log('FORM', values)


sophialittlejohn

Very nice work @kattylucy!! Just a few more comments about the types and then I think we're good to go 🔥

sophialittlejohn · 2024-10-07T14:28:24Z

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

-] as const
+]
+
+function calculateTranchePrices(pool: any) {


would type this as Pool. Will save you having to assign types in the subsequent maps

sophialittlejohn · 2024-10-07T14:29:35Z

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

+  return { juniorTokenPrice, seniorTokenPrice }
+}
+
+function getYieldFieldForFilter(tranche: any, filter: string) {


this would be tranche: Pool['tranches'][0]

Actually I think it has to be DailyTrancheState

sophialittlejohn · 2024-10-07T14:30:27Z

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

  const data: ChartData[] = React.useMemo(
    () =>
-      truncatedPoolStates?.map((day) => {
+      truncatedPoolStates?.map((day: DailyPoolState) => {


better to have the types on truncatedPoolStates instead of type casting in the map

sophialittlejohn · 2024-10-07T15:14:50Z

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

  const data = React.useMemo(() => {
    const tokenData =
-      dailyPoolStates?.map((state) => {
-        return { price: state.tranches[trancheId].price?.toFloat() || 0, day: new Date(state.timestamp) }
+      dailyPoolStates?.map((state: DailyPoolStateProps) => {


now that its correctly inferred you can remove the DailyPoolStateProps from this map

sophialittlejohn · 2024-10-07T15:25:21Z

centrifuge-app/src/pages/IssuerCreatePool/CustomCategories.tsx

+
+          {!!values?.issuerCategories?.length &&
+            values.issuerCategories.map(
+              (category: { type: string; value: string | number; customType?: string }, index: number) => {


another case where types should already be inferred from the formik values, so you shouldn't have to type them manually here. If the compiler is complaining you probably need to type the values from formik first!

sophialittlejohn

🔥 🔥 🔥

Base automatically changed from add_tile_design to main September 10, 2024 14:13

kattylucy changed the title ~~Style new header~~ Pool Overview redesign Sep 10, 2024

kattylucy force-pushed the pool_overview_redesign branch 12 times, most recently from 66fc7a5 to 1181892 Compare September 17, 2024 15:51

kattylucy force-pushed the pool_overview_redesign branch from 909545e to 35bc8e6 Compare September 17, 2024 20:23

sophialittlejohn mentioned this pull request Sep 17, 2024

Edit pool fields #2455

Merged

1 task

kattylucy force-pushed the pool_overview_redesign branch from c29f491 to dbe5c48 Compare September 24, 2024 09:09

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

kattylucy requested review from onnovisser and sophialittlejohn September 24, 2024 09:09

kattylucy force-pushed the pool_overview_redesign branch 2 times, most recently from 90bc09f to 4afb124 Compare September 26, 2024 10:41

sophialittlejohn reviewed Oct 1, 2024

View reviewed changes

kattylucy requested review from sophialittlejohn and removed request for onnovisser and sophialittlejohn October 2, 2024 08:45

sophialittlejohn reviewed Oct 7, 2024

View reviewed changes

kattylucy added 2 commits October 8, 2024 10:12

Pool overview redesign

467a90b

Fix types

b636cf7

kattylucy force-pushed the pool_overview_redesign branch from 65fd070 to b636cf7 Compare October 8, 2024 08:24

kattylucy requested a review from sophialittlejohn October 8, 2024 13:17

Fix linter warnings

178af27

kattylucy force-pushed the pool_overview_redesign branch from 86f6fbb to 178af27 Compare October 9, 2024 07:33

Merge branch 'main' into pool_overview_redesign

20bc4cd

sophialittlejohn approved these changes Oct 9, 2024

View reviewed changes

Merge branch 'main' into pool_overview_redesign

cf41dbe

kattylucy merged commit 180f9ec into main Oct 9, 2024
12 checks passed

kattylucy deleted the pool_overview_redesign branch October 9, 2024 18:01

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Pool Overview redesign #2435

Pool Overview redesign #2435

kattylucy commented Sep 6, 2024 •

edited

Loading

github-actions bot commented Sep 6, 2024 •

edited

Loading

github-actions bot commented Sep 6, 2024 •

edited

Loading

sophialittlejohn Oct 1, 2024

sophialittlejohn Oct 1, 2024

sophialittlejohn Oct 1, 2024

sophialittlejohn Oct 1, 2024

sophialittlejohn Oct 1, 2024

sophialittlejohn Oct 1, 2024

sophialittlejohn Oct 1, 2024

sophialittlejohn Oct 7, 2024

sophialittlejohn Oct 1, 2024

sophialittlejohn Oct 1, 2024

sophialittlejohn Oct 1, 2024

sophialittlejohn left a comment

sophialittlejohn Oct 7, 2024

sophialittlejohn Oct 7, 2024

kattylucy Oct 8, 2024

sophialittlejohn Oct 7, 2024

sophialittlejohn Oct 7, 2024

sophialittlejohn Oct 7, 2024

sophialittlejohn left a comment

	truncatedPoolStates?.map((day: any) => {
	truncatedPoolStates?.map((day) => {


		const graphData = selectedTabIndex === 0 ? tokenData : apyData

		const toggleRange = (e: any) => {

	dailyPoolStates?.map((state: DailyPoolStateProps) => {
	dailyPoolStates?.map((state) => {

Pool Overview redesign #2435

Pool Overview redesign #2435

Conversation

kattylucy commented Sep 6, 2024 • edited Loading

github-actions bot commented Sep 6, 2024 • edited Loading

github-actions bot commented Sep 6, 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

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

sophialittlejohn left a 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

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

kattylucy commented Sep 6, 2024 •

edited

Loading

github-actions bot commented Sep 6, 2024 •

edited

Loading

github-actions bot commented Sep 6, 2024 •

edited

Loading