Skip to content

Commit

Permalink
Fix types
Browse files Browse the repository at this point in the history
  • Loading branch information
@kattylucy
kattylucy committed Oct 8, 2024
1 parent 467a90b commit b636cf7
Show file tree
Hide file tree
Showing 3 changed files with 93 additions and 95 deletions.
60 changes: 30 additions & 30 deletions centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx
View file
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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)
}
Expand All @@ -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)
Expand All @@ -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,
}
}
Expand All @@ -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,
}
}) || [],
Expand Down Expand Up @@ -256,7 +254,7 @@ function PoolPerformanceChart() {
minTickGap={100000}
tickLine={false}
type="category"
tick={<CustomTick />}
tick={(props) => <CustomTick {...props} />}
ticks={getOneDayPerMonth(chartData, 'day')}
/>
<YAxis
Expand Down Expand Up @@ -399,12 +397,14 @@ function CustomLegend({
nav: number
juniorTokenPrice: number
seniorTokenPrice?: number | null
juniorAPY: number
seniorAPY: number
juniorAPY: number | undefined | null
seniorAPY: number | undefined | null
}
setRange: (value: { value: string; label: string }) => void
selectedTabIndex: number
}) {
const juniorAPY = data.juniorAPY ?? 0

const Dot = ({ color }: { color: string }) => (
<Box width="8px" height="8px" borderRadius="50%" backgroundColor={color} marginRight="4px" />
)
Expand Down Expand Up @@ -440,7 +440,7 @@ function CustomLegend({
{
color: 'textGold',
label: 'Junior APY',
value: formatPercentage(data.juniorAPY ?? 0),
value: formatPercentage(juniorAPY),
show: true,
},
{
Expand Down
2 changes: 1 addition & 1 deletion centrifuge-app/src/components/InvestRedeem/InvestRedeemDrawer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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),
Expand Down
126 changes: 62 additions & 64 deletions centrifuge-app/src/pages/IssuerCreatePool/CustomCategories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,76 +53,74 @@ export function CustomCategories() {
</Shelf>

{!!values?.issuerCategories?.length &&
values.issuerCategories.map(
(category: { type: string; value: string | number; customType?: string }, index: number) => {
return (
<Field name={`issuerCategories.${index}.type`} key={index}>
{({ field, meta }: FieldProps) => {
return (
<Shelf gap={2} alignItems="flex-start">
<Box flex="1">
<Select
name={`issuerCategories.${index}.type`}
onChange={(event) => {
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"
/>
</Box>
{category.type === 'other' && (
<Box flex="1">
<Field
as={TextInput}
name={`issuerCategories.${index}.customType`}
value={category.customType}
label="Custom Type"
onBlur={field.onBlur}
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
fmk.setFieldValue(`issuerCategories.${index}.customType`, event.target.value)
}}
/>
</Box>
)}
values.issuerCategories.map((category, index) => {
return (
<Field name={`issuerCategories.${index}.type`} key={index}>
{({ field, meta }: FieldProps) => {
return (
<Shelf gap={2} alignItems="flex-start">
<Box flex="1">
<Select
name={`issuerCategories.${index}.type`}
onChange={(event) => {
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"
/>
</Box>
{category.type === 'other' && (
<Box flex="1">
<Field
as={category.type === 'historicalDefaultRate' ? NumberInput : TextInput}
symbol={category.type === 'historicalDefaultRate' ? '%' : undefined}
name={`issuerCategories.${index}.value`}
as={TextInput}
name={`issuerCategories.${index}.customType`}
value={category.customType}
label="Custom Type"
onBlur={field.onBlur}
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
fmk.setFieldValue(`issuerCategories.${index}.value`, event.target.value)
fmk.setFieldValue(`issuerCategories.${index}.customType`, event.target.value)
}}
onBlur={field.onBlur}
value={category.value}
label="Value"
/>
</Box>
<Box alignSelf="end" marginLeft="auto">
<Button
type="button"
variant="secondary"
small
onClick={() => {
fldArr.remove(index)
}}
>
Remove
</Button>
</Box>
</Shelf>
)
}}
</Field>
)
}
)}
)}
<Box flex="1">
<Field
as={category.type === 'historicalDefaultRate' ? NumberInput : TextInput}
symbol={category.type === 'historicalDefaultRate' ? '%' : undefined}
name={`issuerCategories.${index}.value`}
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
fmk.setFieldValue(`issuerCategories.${index}.value`, event.target.value)
}}
onBlur={field.onBlur}
value={category.value}
label="Value"
/>
</Box>
<Box alignSelf="end" marginLeft="auto">
<Button
type="button"
variant="secondary"
small
onClick={() => {
fldArr.remove(index)
}}
>
Remove
</Button>
</Box>
</Shelf>
)
}}
</Field>
)
})}
</Stack>
)}
</FieldArray>
Expand Down

0 comments on commit b636cf7

Please sign in to comment.