From b636cf7d1ed454fac2d846d8985212c8882a4f51 Mon Sep 17 00:00:00 2001 From: katty barroso Date: Tue, 8 Oct 2024 09:48:27 +0200 Subject: [PATCH] Fix types --- .../Charts/PoolPerformanceChart.tsx | 60 ++++----- .../InvestRedeem/InvestRedeemDrawer.tsx | 2 +- .../IssuerCreatePool/CustomCategories.tsx | 126 +++++++++--------- 3 files changed, 93 insertions(+), 95 deletions(-) diff --git a/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx b/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx index e8f4f43af..a64e33652 100644 --- a/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx +++ b/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx @@ -1,4 +1,4 @@ -import { DailyPoolState } from '@centrifuge/centrifuge-js' +import { DailyPoolState, DailyTrancheState, Pool } from '@centrifuge/centrifuge-js' import { AnchorButton, Box, IconDownload, Select, Shelf, Stack, Tabs, TabsItem, Text } from '@centrifuge/fabric' import * as React from 'react' import { useParams } from 'react-router' @@ -20,16 +20,11 @@ type ChartData = { juniorTokenPrice: number | null seniorTokenPrice?: number | null currency?: string - seniorAPY: number | null - juniorAPY: number + seniorAPY: number | null | undefined + juniorAPY: number | null isToday: boolean } -type Tranche = { - seniority: number - tokenPrice: number -} - type GraphDataItemWithType = { show: boolean color: string @@ -62,19 +57,22 @@ const rangeFilters = [ { value: 'ytd', label: 'Year to date' }, ] -function calculateTranchePrices(pool: any) { +function calculateTranchePrices(pool: Pool) { if (!pool?.tranches) return { juniorTokenPrice: 0, seniorTokenPrice: null } - const juniorTranche = pool.tranches.find((t: Tranche) => t.seniority === 0) - const seniorTranche = pool.tranches.length > 1 ? pool.tranches.find((t: Tranche) => t.seniority === 1) : null + const juniorTranche = pool.tranches.find((t) => t.seniority === 0) + const seniorTranche = pool.tranches.length > 1 ? pool.tranches.find((t) => t.seniority === 1) : null - const juniorTokenPrice = juniorTranche ? Number(formatBalance(juniorTranche.tokenPrice, undefined, 5, 5)) : 0 - const seniorTokenPrice = seniorTranche ? Number(formatBalance(seniorTranche.tokenPrice, undefined, 5, 5)) : null + const juniorTokenPrice = + juniorTranche && juniorTranche.tokenPrice ? Number(formatBalance(juniorTranche.tokenPrice, undefined, 5, 5)) : 0 + + const seniorTokenPrice = + seniorTranche && seniorTranche.tokenPrice ? Number(formatBalance(seniorTranche.tokenPrice, undefined, 5, 5)) : null return { juniorTokenPrice, seniorTokenPrice } } -function getYieldFieldForFilter(tranche: any, filter: string) { +function getYieldFieldForFilter(tranche: DailyTrancheState, filter: string) { switch (filter) { case '30d': return tranche.yield30DaysAnnualized || 0 @@ -110,7 +108,7 @@ function PoolPerformanceChart() { return acc }, '') - const truncatedPoolStates = poolStates?.filter((poolState) => { + const truncatedPoolStates = poolStates?.filter((poolState: DailyPoolState) => { if (firstOriginationDate) { return new Date(poolState.timestamp) >= new Date(firstOriginationDate) } @@ -128,11 +126,11 @@ function PoolPerformanceChart() { ? formatBalance(pool?.tranches[pool.tranches.length - 1].tokenPrice || 0, undefined, 5, 5) : null - const trancheTodayPrice = calculateTranchePrices(pool) + const trancheTodayPrice = calculateTranchePrices(pool as Pool) const data: ChartData[] = React.useMemo( () => - truncatedPoolStates?.map((day: DailyPoolState) => { + truncatedPoolStates?.map((day) => { const nav = day.poolState.netAssetValue.toDecimal().toNumber() const trancheKeys = Object.keys(day.tranches) @@ -142,21 +140,21 @@ function PoolPerformanceChart() { const juniorTokenPrice = day.tranches[juniorTrancheKey]?.price?.toFloat() ?? 0 const seniorTokenPrice = seniorTrancheKey ? day.tranches[seniorTrancheKey]?.price?.toFloat() ?? null : null - const juniorAPY = getYieldFieldForFilter(day.tranches[juniorTrancheKey], range.value).toPercent().toNumber() - const seniorAPY = seniorTrancheKey - ? getYieldFieldForFilter(day.tranches[seniorTrancheKey], range.value).toPercent().toNumber() - : null + const juniorAPY = getYieldFieldForFilter(day.tranches[juniorTrancheKey], range.value) + const formattedJuniorAPY = juniorAPY !== 0 ? juniorAPY.toPercent().toNumber() : 0 + const seniorAPY = seniorTrancheKey ? getYieldFieldForFilter(day.tranches[seniorTrancheKey], range.value) : null + const formattedSeniorAPY = seniorAPY !== 0 ? seniorAPY?.toPercent().toNumber() : null if (day.timestamp && new Date(day.timestamp).toDateString() === new Date().toDateString()) { - const tranchePrices = calculateTranchePrices(pool) + const tranchePrices = calculateTranchePrices(pool as Pool) return { day: new Date(day.timestamp), nav: todayAssetValue, juniorTokenPrice: tranchePrices.juniorTokenPrice ?? 0, seniorTokenPrice: tranchePrices.seniorTokenPrice ?? null, - juniorAPY, - seniorAPY, + juniorAPY: formattedJuniorAPY, + seniorAPY: formattedSeniorAPY, isToday: true, } } @@ -166,8 +164,8 @@ function PoolPerformanceChart() { nav: Number(nav), juniorTokenPrice: juniorTokenPrice !== 0 ? juniorTokenPrice : null, seniorTokenPrice: seniorTokenPrice !== 0 ? seniorTokenPrice : null, - juniorAPY, - seniorAPY, + juniorAPY: formattedJuniorAPY, + seniorAPY: formattedSeniorAPY, isToday: false, } }) || [], @@ -256,7 +254,7 @@ function PoolPerformanceChart() { minTickGap={100000} tickLine={false} type="category" - tick={} + tick={(props) => } ticks={getOneDayPerMonth(chartData, 'day')} /> void selectedTabIndex: number }) { + const juniorAPY = data.juniorAPY ?? 0 + const Dot = ({ color }: { color: string }) => ( ) @@ -440,7 +440,7 @@ function CustomLegend({ { color: 'textGold', label: 'Junior APY', - value: formatPercentage(data.juniorAPY ?? 0), + value: formatPercentage(juniorAPY), show: true, }, { diff --git a/centrifuge-app/src/components/InvestRedeem/InvestRedeemDrawer.tsx b/centrifuge-app/src/components/InvestRedeem/InvestRedeemDrawer.tsx index 8e5e97648..a8d419ed4 100644 --- a/centrifuge-app/src/components/InvestRedeem/InvestRedeemDrawer.tsx +++ b/centrifuge-app/src/components/InvestRedeem/InvestRedeemDrawer.tsx @@ -113,7 +113,7 @@ const TokenPriceChart = React.memo(function TokenPriceChart({ const data = React.useMemo(() => { const tokenData = - dailyPoolStates?.map((state: DailyPoolStateProps) => { + dailyPoolStates?.map((state) => { return { price: state.tranches[trancheId].price?.toFloat() || 0, day: new Date(state.timestamp), diff --git a/centrifuge-app/src/pages/IssuerCreatePool/CustomCategories.tsx b/centrifuge-app/src/pages/IssuerCreatePool/CustomCategories.tsx index 85a3f6063..745354880 100644 --- a/centrifuge-app/src/pages/IssuerCreatePool/CustomCategories.tsx +++ b/centrifuge-app/src/pages/IssuerCreatePool/CustomCategories.tsx @@ -53,76 +53,74 @@ export function CustomCategories() { {!!values?.issuerCategories?.length && - values.issuerCategories.map( - (category: { type: string; value: string | number; customType?: string }, index: number) => { - return ( - - {({ field, meta }: FieldProps) => { - return ( - - - { + const selectedValue = event.target.value + fmk.setFieldValue(`issuerCategories.${index}.type`, selectedValue) + if (selectedValue !== 'other') { + fmk.setFieldValue(`issuerCategories.${index}.customType`, '') + } + }} + onBlur={field.onBlur} + errorMessage={meta.touched && meta.error ? meta.error : undefined} + value={field.value} + options={OPTIONS} + label="Type" + /> + + {category.type === 'other' && ( ) => { - fmk.setFieldValue(`issuerCategories.${index}.value`, event.target.value) + fmk.setFieldValue(`issuerCategories.${index}.customType`, event.target.value) }} - onBlur={field.onBlur} - value={category.value} - label="Value" /> - - - - - ) - }} - - ) - } - )} + )} + + ) => { + fmk.setFieldValue(`issuerCategories.${index}.value`, event.target.value) + }} + onBlur={field.onBlur} + value={category.value} + label="Value" + /> + + + + + + ) + }} + + ) + })} )}