Fix jumping on graph

centrifuge · Jan 21, 2025 · b5c9a74 · b5c9a74
1 parent 0dddcad
commit b5c9a74
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 31 deletions.
diff --git a/centrifuge-app/src/components/Menu/index.tsx b/centrifuge-app/src/components/Menu/index.tsx
@@ -52,7 +52,7 @@ export function Menu() {
   const isLarge = useIsAboveBreakpoint('L')
   const address = useAddress('substrate')
   const { showSwaps } = useDebugFlags()
-  const transactions = useTransactionsByAddress(address)
+  const { data: transactions } = useTransactionsByAddress(address)
 
   return (
     <Shelf

diff --git a/centrifuge-app/src/components/Portfolio/CardPortfolioValue.tsx b/centrifuge-app/src/components/Portfolio/CardPortfolioValue.tsx
@@ -6,7 +6,7 @@ import { useTheme } from 'styled-components'
 import { Dec } from '../../utils/Decimal'
 import { isEvmAddress } from '../../utils/address'
 import { useTransactionsByAddress } from '../../utils/usePools'
-import { LoadBoundary } from '../LoadBoundary'
+import { Spinner } from '../Spinner'
 import { useHoldings } from './Holdings'
 import { PortfolioValue } from './PortfolioValue'
 
@@ -19,18 +19,10 @@ const rangeFilters = [
 
 type RangeValue = (typeof rangeFilters)[number]['value']
 
-export function CardPortfolioValue({
-  address,
-  chainId,
-  showGraph = true,
-}: {
-  address?: string
-  chainId?: number
-  showGraph?: boolean
-}) {
+export function CardPortfolioValue({ address, chainId }: { address?: string; chainId?: number }) {
   const tokens = useHoldings(address, chainId)
   const centAddress = address && chainId && isEvmAddress(address) ? evmToSubstrateAddress(address, chainId) : address
-  const transactions = useTransactionsByAddress(showGraph ? centAddress : undefined)
+  const { data: transactions, isLoading } = useTransactionsByAddress(centAddress)
 
   const { colors } = useTheme()
 
@@ -57,21 +49,19 @@ export function CardPortfolioValue({
             </Box>
             <Select options={rangeFilters} onChange={(e) => setRange(e.target.value as RangeValue)} hideBorder />
           </Box>
-          {showGraph && centAddress && transactions?.investorTransactions.length ? (
-            <>
-              <Box width="100%" height="300px">
-                <LoadBoundary>
-                  {transactions?.investorTransactions.length ? (
-                    <PortfolioValue rangeValue={range} address={centAddress} />
-                  ) : (
-                    <Box width="100%" height="100%" display="flex" alignItems="center" justifyContent="center">
-                      <Text>No data available</Text>
-                    </Box>
-                  )}
-                </LoadBoundary>
+          <Box width="100%" height={300} minHeight={300} position="relative">
+            {isLoading && centAddress ? (
+              <Box width="100%" height={300} display="flex" alignItems="center" justifyContent="center">
+                <Spinner />
               </Box>
-            </>
-          ) : null}
+            ) : transactions?.investorTransactions.length ? (
+              <PortfolioValue rangeValue={range} address={centAddress} />
+            ) : (
+              <Box width="100%" height="100%" display="flex" alignItems="center" justifyContent="center">
+                <Text>No data available</Text>
+              </Box>
+            )}
+          </Box>
         </Box>
       </Box>
     </Box>

diff --git a/centrifuge-app/src/components/Portfolio/Transactions.tsx b/centrifuge-app/src/components/Portfolio/Transactions.tsx
@@ -113,7 +113,7 @@ export function Transactions({ onlyMostRecent, narrow, txTypes, address, tranche
     },
   ].filter(Boolean) as Column[]
 
-  const transactions = useTransactionsByAddress(address)
+  const { data: transactions } = useTransactionsByAddress(address)
   const pools = usePools()
   const investorTransactions = React.useMemo(() => {
     const txs = transactions?.investorTransactions

diff --git a/centrifuge-app/src/components/Portfolio/usePortfolio.ts b/centrifuge-app/src/components/Portfolio/usePortfolio.ts
@@ -27,7 +27,7 @@ type InvestorTransaction = {
 }
 
 export function useDailyPortfolioValue(address: string, rangeValue?: number) {
-  const transactions = useTransactionsByAddress(address)
+  const { data: transactions } = useTransactionsByAddress(address)
 
   const transactionsByTrancheId = transactions?.investorTransactions.reduce(
     (tranches, tranche) => ({

diff --git a/centrifuge-app/src/pages/Portfolio/index.tsx b/centrifuge-app/src/pages/Portfolio/index.tsx
@@ -17,7 +17,7 @@ export default function PortfolioPage() {
 
 function Portfolio() {
   const address = useAddress()
-  const transactions = useTransactionsByAddress(address)
+  const { data: transactions } = useTransactionsByAddress(address)
   const { showNetworks, connectedNetwork, evm } = useWallet()
   const chainId = evm.chainId ?? undefined
   const centAddress = address && chainId && isEvmAddress(address) ? evmToSubstrateAddress(address, chainId) : address

diff --git a/centrifuge-app/src/utils/usePools.ts b/centrifuge-app/src/utils/usePools.ts
@@ -109,15 +109,15 @@ export function useAggregatedPoolFeeStatesByGroup(
 }
 
 export function useTransactionsByAddress(address?: string) {
-  const [result] = useCentrifugeQuery(
+  const [result, isLoading] = useCentrifugeQuery(
     ['txByAddress', address],
     (cent) => cent.pools.getTransactionsByAddress([address!]),
     {
       enabled: !!address,
     }
   )
 
-  return result
+  return { data: result, isLoading }
 }
 
 export function useInvestorList(poolId: string, trancheId?: string) {