From 8090b2bad748df6bf9f4e0b255864a7f73a70d1b Mon Sep 17 00:00:00 2001 From: Sophia Date: Tue, 15 Oct 2024 22:49:42 -0400 Subject: [PATCH] Redesign: Fix infinite loading of connect/invest button (#2501) * Rearrange tranche token card column/data code for table * Fix infinite loading on invest button * Remove log --- .../InvestRedeemCentrifugeProvider.tsx | 5 +- .../src/components/IssuerSection.tsx | 1 - .../PoolOverview/TrancheTokenCards.tsx | 115 +++++++++++------- 3 files changed, 76 insertions(+), 45 deletions(-) diff --git a/centrifuge-app/src/components/InvestRedeem/InvestRedeemCentrifugeProvider.tsx b/centrifuge-app/src/components/InvestRedeem/InvestRedeemCentrifugeProvider.tsx index 888627917b..f4228c8f34 100644 --- a/centrifuge-app/src/components/InvestRedeem/InvestRedeemCentrifugeProvider.tsx +++ b/centrifuge-app/src/components/InvestRedeem/InvestRedeemCentrifugeProvider.tsx @@ -1,5 +1,5 @@ import { CurrencyBalance, findBalance, Pool } from '@centrifuge/centrifuge-js' -import { useBalances, useCentrifugeTransaction } from '@centrifuge/centrifuge-react' +import { useBalances, useCentrifugeTransaction, useWallet } from '@centrifuge/centrifuge-react' import { CentrifugeTransactionOptions } from '@centrifuge/centrifuge-react/dist/hooks/useCentrifugeTransaction' import BN from 'bn.js' import * as React from 'react' @@ -25,6 +25,7 @@ export function InvestRedeemCentrifugeProvider({ poolId, trancheId, children }: const trancheMeta = metadata?.tranches?.[trancheId] const liquidityState = useLiquidityRewards().state const [isStableLoading, setIsStableLoading] = React.useState(true) + const { connectedType } = useWallet() if (!tranche) throw new Error(`Token not found. Pool id: ${poolId}, token id: ${trancheId}`) @@ -88,7 +89,7 @@ export function InvestRedeemCentrifugeProvider({ poolId, trancheId, children }: React.useEffect(() => { const timer = setTimeout(() => { - if (isDataLoading) { + if (isDataLoading && connectedType) { setIsStableLoading(true) } else { setIsStableLoading(false) diff --git a/centrifuge-app/src/components/IssuerSection.tsx b/centrifuge-app/src/components/IssuerSection.tsx index 3342c66756..a714435a0e 100644 --- a/centrifuge-app/src/components/IssuerSection.tsx +++ b/centrifuge-app/src/components/IssuerSection.tsx @@ -286,7 +286,6 @@ export const PoolAnalysis = ({ metadata, inverted }: IssuerSectionProps & { inve // Not sure why some pools have N/A, it should be empty but this is a fix for those pools in the meantime const isEmpty = report?.author.name === 'N/A' - console.log(report) return report?.author?.name || report?.author?.title ? ( isEmpty ? null : ( diff --git a/centrifuge-app/src/components/PoolOverview/TrancheTokenCards.tsx b/centrifuge-app/src/components/PoolOverview/TrancheTokenCards.tsx index 5c9a84602e..545cec3efe 100644 --- a/centrifuge-app/src/components/PoolOverview/TrancheTokenCards.tsx +++ b/centrifuge-app/src/components/PoolOverview/TrancheTokenCards.tsx @@ -1,5 +1,6 @@ import { Perquintill } from '@centrifuge/centrifuge-js' import { Box, Shelf, Text } from '@centrifuge/fabric' +import { Decimal } from 'decimal.js-light' import { useMemo } from 'react' import { useTheme } from 'styled-components' import { InvestButton, Token } from '../../pages/Pool/Overview' @@ -10,6 +11,15 @@ import { DataTable } from '../DataTable' import { CentrifugeTargetAPYs, DYF_POOL_ID, NS3_POOL_ID, centrifugeTargetAPYs } from '../PoolCard' import { PoolMetaDataPartial } from '../PoolList' +type Row = { + tokenName: string + apy: Decimal + tvl: Decimal + tokenPrice: Decimal + subordination: Decimal + trancheId: string +} + export const TrancheTokenCards = ({ trancheTokens, poolId, @@ -22,7 +32,6 @@ export const TrancheTokenCards = ({ const pool = usePool(poolId) const theme = useTheme() const isTinlakePool = poolId.startsWith('0x') - const daysSinceCreation = pool?.createdAt ? daysBetween(new Date(pool.createdAt), new Date()) : 0 const getTrancheText = (trancheToken: Token) => { if (trancheToken.seniority === 0) return 'junior' @@ -30,50 +39,78 @@ export const TrancheTokenCards = ({ return 'mezzanine' } - const columnConfig = useMemo(() => { - const calculateApy = (trancheToken: Token) => { - if (isTinlakePool && getTrancheText(trancheToken) === 'senior') return formatPercentage(trancheToken.apy) - if (poolId === DYF_POOL_ID) return centrifugeTargetAPYs[poolId as CentrifugeTargetAPYs][0] - if (poolId === NS3_POOL_ID && trancheToken.seniority === 0) - return centrifugeTargetAPYs[poolId as CentrifugeTargetAPYs][0] - if (poolId === NS3_POOL_ID && trancheToken.seniority === 1) - return centrifugeTargetAPYs[poolId as CentrifugeTargetAPYs][1] - if (daysSinceCreation < 30) return 'N/A' - return trancheToken.yield30DaysAnnualized - ? formatPercentage(new Perquintill(trancheToken.yield30DaysAnnualized)) - : '-' - } + const calculateApy = (trancheToken: Token) => { + if (isTinlakePool && getTrancheText(trancheToken) === 'senior') return formatPercentage(trancheToken.apy) + if (poolId === DYF_POOL_ID) return centrifugeTargetAPYs[poolId as CentrifugeTargetAPYs][0] + if (poolId === NS3_POOL_ID && trancheToken.seniority === 0) + return centrifugeTargetAPYs[poolId as CentrifugeTargetAPYs][0] + if (poolId === NS3_POOL_ID && trancheToken.seniority === 1) + return centrifugeTargetAPYs[poolId as CentrifugeTargetAPYs][1] + const daysSinceCreation = pool?.createdAt ? daysBetween(new Date(pool.createdAt), new Date()) : 0 + if (daysSinceCreation < 30) return 'N/A' + return trancheToken.yield30DaysAnnualized + ? formatPercentage(new Perquintill(trancheToken.yield30DaysAnnualized)) + : '-' + } + const columns = useMemo(() => { return [ { header: 'Token', - align: 'left', - formatter: (v: any) => v, width: '40%', + align: 'left', + cell: (row: Row) => { + return ( + + {row.tokenName} + + ) + }, }, { - header: poolId === DYF_POOL_ID || poolId === NS3_POOL_ID ? 'Target' : 'APY', + header: 'APY', align: 'left', - formatter: (v: any) => (v ? calculateApy(v) : '-'), + cell: (row: Row) => { + return ( + + {row.apy} + + ) + }, }, { header: `TVL (${pool?.currency.symbol})`, align: 'left', - formatter: (v: any) => (v ? formatBalance(v) : '-'), + cell: (row: Row) => { + return ( + + {formatBalance(row.tvl)} + + ) + }, }, { - header: 'Token price', + header: `Token price (${pool?.currency.symbol})`, align: 'left', - formatter: (v: any) => (v ? formatBalance(v, pool?.currency.symbol, 6) : '-'), + cell: (row: Row) => { + return ( + + {formatBalance(row.tokenPrice, undefined, 6)} + + ) + }, }, ...(pool.tranches.length > 1 ? [ { header: 'Subordination', align: 'left', - formatter: (_: any, row: any) => { - if (row.value[1].seniority === 0) return '-' - return formatPercentage(row.value[1].protection) + cell: (row: Row) => { + return ( + + {formatPercentage(row.subordination)} + + ) }, }, ] @@ -81,30 +118,24 @@ export const TrancheTokenCards = ({ { header: '', align: 'right', - formatter: (_: any, row: any) => ( - - ), + cell: (row: Row) => { + return + }, }, ] - }, [pool, poolId, isTinlakePool, daysSinceCreation, metadata]) + }, [pool.tranches, metadata, poolId]) - const columns = useMemo(() => { - return columnConfig.map((col, index) => { + const dataTable = useMemo(() => { + return trancheTokens.map((tranche) => { return { - cell: (row: any) => ( - - {col.formatter(row.value[index], row)} - - ), - ...col, + tokenName: tranche.name, + apy: calculateApy(tranche), + tvl: tranche.valueLocked, + tokenPrice: tranche.tokenPrice, + subordination: tranche.protection, + trancheId: tranche.id, } }) - }, [columnConfig]) - - const dataTable = useMemo(() => { - return trancheTokens.map((tranche) => ({ - value: [tranche.name, tranche, tranche.valueLocked, tranche.tokenPrice], - })) }, [trancheTokens]) return (