React router v6 update

centrifuge-app/package.json

@@ -47,8 +47,8 @@
     "react-helmet-async": "^1.3.0",
     "react-pdf": "^6.2.2",
     "react-query": "^3.39.1",
-    "react-router": "^5.2.1",
-    "react-router-dom": "^5.3.0",
+    "react-router": "6",
+    "react-router-dom": "6",
     "recharts": "2.6.2",
     "styled-components": "^5.3.5",
     "styled-system": "^5.1.5",

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

@@ -15,6 +15,9 @@ type ChartData = {
 export default function CashDragChart() {
   const theme = useTheme()
   const { pid: poolId } = useParams<{ pid: string }>()
+
+  if (!poolId) throw new Error('Pool not found')
+
   const { poolStates } = useDailyPoolStates(poolId) || {}
   const pool = usePool(poolId)
 

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

@@ -1,5 +1,4 @@
 import { Grid, Shelf, Stack, Text } from '@centrifuge/fabric'
-import * as React from 'react'
 import { Tooltips, TooltipsProps } from '../Tooltips'
 
 export type LegendProps = {

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

@@ -34,6 +34,9 @@ function PoolPerformanceChart() {
   const theme = useTheme()
   const chartColor = theme.colors.accentPrimary
   const { pid: poolId } = useParams<{ pid: string }>()
+
+  if (!poolId) throw new Error('Pool not found')
+
   const { poolStates } = useDailyPoolStates(poolId) || {}
   const pool = usePool(poolId)
   const poolAge = pool.createdAt ? daysBetween(pool.createdAt, new Date()) : 0

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

@@ -25,6 +25,9 @@ function PriceYieldChart({
 }) {
   const theme = useTheme()
   const { pid: poolId } = useParams<{ pid: string }>()
+
+  if (!poolId) throw new Error('Pool not found')
+
   const { trancheStates: tranches } = useDailyPoolStates(poolId, undefined, undefined, false) || {}
   const trancheStates = tranches?.[trancheId]
   const pool = usePool(poolId)

centrifuge-app/src/components/DataTable.tsx

@@ -140,8 +140,9 @@ export const DataTable = <T extends Record<string, any>>({
       {pinnedData?.map((row, i) => (
         <DataRow
           hoverable={hoverable}
+          // TODO: the onRowClicked should be change to getRowLink to match the behavior
           as={onRowClicked ? Link : 'div'}
-          to={onRowClicked && (() => onRowClicked(row))}
+          to={onRowClicked ? onRowClicked(row) : undefined}
           key={keyField ? row[keyField] : i}
           tabIndex={onRowClicked ? 0 : undefined}
         >
@@ -157,7 +158,7 @@ export const DataTable = <T extends Record<string, any>>({
           data-testId={`data-table-row-${i}-${groupIndex ?? 0}`}
           hoverable={hoverable}
           as={onRowClicked ? Link : 'div'}
-          to={onRowClicked && (() => onRowClicked(row))}
+          to={onRowClicked ? onRowClicked(row) : undefined}
           key={keyField ? row[keyField] : i}
           tabIndex={onRowClicked ? 0 : undefined}
         >

centrifuge-app/src/components/DebugFlags/DebugFlags.tsx

@@ -1,7 +1,7 @@
 import { Box, Shelf, Stack, Text } from '@centrifuge/fabric'
 import * as React from 'react'
 import styled from 'styled-components'
-import { flagsConfig, Key } from './config'
+import { Key, flagsConfig } from './config'
 import { DebugFlagsContext, FlagsState, initialFlagsState, useDebugFlags } from './context'
 
 function DebugFlagsImpl({

centrifuge-app/src/components/Dialogs/CreateCollectionDialog.tsx

@@ -19,7 +19,7 @@ import {
   TextInput,
 } from '@centrifuge/fabric'
 import * as React from 'react'
-import { Redirect } from 'react-router'
+import { Navigate } from 'react-router'
 import { lastValueFrom } from 'rxjs'
 import { collectionMetadataSchema } from '../../schemas'
 import { Dec } from '../../utils/Decimal'
@@ -116,7 +116,7 @@ export const CreateCollectionDialog: React.FC<{ open: boolean; onClose: () => vo
   const disabled = !isConnected || !name.trim() || !description.trim() || balanceLow || isTxPending
 
   if (redirect) {
-    return <Redirect to={redirect} />
+    return <Navigate to={redirect} />
   }
 
   const confirmDisabled = !termsAccepted

centrifuge-app/src/components/EpochList.tsx

@@ -157,6 +157,9 @@ export const EpochList: React.FC<Props> = ({ pool }) => {
 
 const LockedRow: React.VFC<{ row: LiquidityTableRow }> = ({ row }) => {
   const { pid: poolId } = useParams<{ pid: string }>()
+
+  if (!poolId) throw new Error('Pool not found')
+
   const pool = usePool(poolId)
   return (
     <>{React.isValidElement(row.locked) ? row.locked : formatBalance(row.locked as Decimal, pool.currency.symbol)}</>

centrifuge-app/src/components/Faucet.tsx

@@ -18,6 +18,9 @@ export const Faucet = () => {
   const [isLoading, setIsLoading] = React.useState(false)
   const currencies = useCurrencies()
   const { pid: poolId } = useParams<{ pid: string }>()
+
+  if (!poolId) throw new Error('Pool not found')
+
   const pool = usePool(poolId)
   const balances = useBalances(useAddress('substrate'))
 

centrifuge-app/src/components/Head.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import { Helmet } from 'react-helmet-async'
 import { config } from '../config'
 

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

@@ -15,7 +15,7 @@ import {
   TextWithPlaceholder,
 } from '@centrifuge/fabric'
 import * as React from 'react'
-import { useHistory } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
 import { useTheme } from 'styled-components'
 import { ethConfig } from '../../config'
 import { formatBalance } from '../../utils/formatting'
@@ -221,7 +221,7 @@ function OnboardingButton() {
   const pool = usePool(state.poolId)
   const { data: metadata } = usePoolMetadata(pool)
   const isTinlakePool = pool.id.startsWith('0x')
-  const history = useHistory()
+  const navigate = useNavigate()
 
   const trancheName = state.trancheId.split('-')[1] === '0' ? 'junior' : 'senior'
   const centPoolInvestStatus = metadata?.onboarding?.tranches?.[state?.trancheId]?.openForOnboarding ? 'open' : 'closed'
@@ -253,7 +253,7 @@ function OnboardingButton() {
     } else if (metadata?.onboarding?.externalOnboardingUrl) {
       window.open(metadata.onboarding.externalOnboardingUrl)
     } else {
-      history.push(`/onboarding?poolId=${state.poolId}&trancheId=${state.trancheId}`)
+      navigate(`/onboarding?poolId=${state.poolId}&trancheId=${state.trancheId}`)
     }
   }
 

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

@@ -123,7 +123,11 @@ export function InvestRedeemTinlakeProvider({ poolId, trancheId, children }: Pro
       remainingRedeemToken: disburse?.remainingRedeemToken || Dec(0),
     },
     collectAmount,
-    collectType: !disburse?.payoutCurrencyAmount.isZero() ? 'redeem' : !disburse?.payoutTokenAmount.isZero() ? 'invest' : null,
+    collectType: !disburse?.payoutCurrencyAmount.isZero()
+      ? 'redeem'
+      : !disburse?.payoutTokenAmount.isZero()
+      ? 'invest'
+      : null,
     needsToCollectBeforeOrder: !collectAmount.isZero(),
     needsPoolCurrencyApproval: () => !!trancheInvestment?.poolCurrencyAllowance.isZero(),
     needsTrancheTokenApproval: () => !!trancheInvestment?.tokenAllowance.isZero(),

centrifuge-app/src/components/LiquidityRewards/LiquidityRewardsClaimer.tsx

@@ -1,9 +1,8 @@
 import { Box, Button, Card, Shelf, Stack, Text } from '@centrifuge/fabric'
-import * as React from 'react'
 import { Dec } from '../../utils/Decimal'
 import { formatBalance, formatBalanceAbbreviated } from '../../utils/formatting'
-import { useClaimCountdown } from './hooks'
 import { useLiquidityRewards } from './LiquidityRewardsContext'
+import { useClaimCountdown } from './hooks'
 
 export function LiquidityRewardsClaimer() {
   const {

centrifuge-app/src/components/LiquidityRewards/LiquidityRewardsContainer.tsx

@@ -1,5 +1,4 @@
 import { Card, Stack } from '@centrifuge/fabric'
-import * as React from 'react'
 import { LiquidityRewardsClaimer } from './LiquidityRewardsClaimer'
 import { useLiquidityRewards } from './LiquidityRewardsContext'
 import { LiquidityRewardsStaker } from './LiquidityRewardsStaker'

centrifuge-app/src/components/LiquidityRewards/LiquidityRewardsProvider.tsx

@@ -1,12 +1,11 @@
 import { Pool, TokenBalance } from '@centrifuge/centrifuge-js'
 import { useBalances, useCentrifugeConsts, useCentrifugeTransaction } from '@centrifuge/centrifuge-react'
 import Decimal from 'decimal.js-light'
-import * as React from 'react'
 import { Dec } from '../../utils/Decimal'
 import { useAddress } from '../../utils/useAddress'
 import { usePendingCollect, usePool } from '../../utils/usePools'
-import { useAccountStakes, useComputeLiquidityRewards, useRewardCurrencyGroup } from './hooks'
 import { LiquidityRewardsContext } from './LiquidityRewardsContext'
+import { useAccountStakes, useComputeLiquidityRewards, useRewardCurrencyGroup } from './hooks'
 import { LiquidityRewardsActions, LiquidityRewardsProviderProps, LiquidityRewardsState } from './types'
 
 export function LiquidityRewardsProvider(props: LiquidityRewardsProviderProps) {

centrifuge-app/src/components/LiquidityRewards/LiquidityRewardsStaker.tsx

@@ -3,8 +3,8 @@ import * as React from 'react'
 import { millisecondsToDays } from '../../utils/date'
 import { formatBalance } from '../../utils/formatting'
 import { LightButton } from '../InvestRedeem/LightButton'
-import { useActiveEpochData } from './hooks'
 import { useLiquidityRewards } from './LiquidityRewardsContext'
+import { useActiveEpochData } from './hooks'
 
 export function LiquidityRewardsStaker() {
   const activeEpochData = useActiveEpochData()

centrifuge-app/src/components/LoanList.tsx

@@ -1,3 +1,4 @@
+import { useBasePath } from '@centrifuge/centrifuge-app/src/utils/useBasePath'
 import { CurrencyBalance, Loan, Rate, TinlakeLoan } from '@centrifuge/centrifuge-js'
 import {
   Box,
@@ -13,7 +14,7 @@ import {
 } from '@centrifuge/fabric'
 import get from 'lodash/get'
 import * as React from 'react'
-import { useParams, useRouteMatch } from 'react-router'
+import { useParams } from 'react-router'
 import currencyDollar from '../assets/images/currency-dollar.svg'
 import daiLogo from '../assets/images/dai-logo.svg'
 import usdcLogo from '../assets/images/usdc-logo.svg'
@@ -55,9 +56,11 @@ const getLoanStatus = (loan: Loan | TinlakeLoan) => {
 
 export function LoanList({ loans }: Props) {
   const { pid: poolId } = useParams<{ pid: string }>()
+  if (!poolId) throw new Error('Pool not found')
+
   const pool = usePool(poolId)
-  const isTinlakePool = poolId.startsWith('0x')
-  const basePath = useRouteMatch(['/pools', '/issuer'])?.path || ''
+  const isTinlakePool = poolId?.startsWith('0x')
+  const basePath = useBasePath()
 
   const { data: poolMetadata } = usePoolMetadata(pool)
   const templateIds = poolMetadata?.loanTemplates?.map((s) => s.id) ?? []

centrifuge-app/src/components/Menu/IssuerMenu.tsx

@@ -1,6 +1,6 @@
 import { Box, IconChevronDown, IconChevronRight, IconUser } from '@centrifuge/fabric'
 import * as React from 'react'
-import { useRouteMatch } from 'react-router'
+import { useMatch } from 'react-router'
 import { useTheme } from 'styled-components'
 import { Toggle } from './Toggle'
 
@@ -11,7 +11,7 @@ type IssuerMenuProps = {
 }
 
 export function IssuerMenu({ defaultOpen = false, stacked, children }: IssuerMenuProps) {
-  const match = useRouteMatch<{ pid: string }>('/issuer/:pid')
+  const match = useMatch('/issuer/*')
   const isActive = !!match
   const [open, setOpen] = React.useState(defaultOpen)
   const { space } = useTheme()

centrifuge-app/src/components/Menu/NavManagementMenu.tsx

@@ -1,6 +1,6 @@
 import { Box, IconChevronDown, IconChevronRight, IconMonitor, Menu, MenuItemGroup, Stack } from '@centrifuge/fabric'
 import * as React from 'react'
-import { useRouteMatch } from 'react-router'
+import { useMatch } from 'react-router'
 import { useTheme } from 'styled-components'
 import { usePoolsForWhichAccountIsFeeder } from '../../utils/usePoolsForWhichAccountIsFeeder'
 import { PoolLink } from './PoolLink'
@@ -11,7 +11,7 @@ type NavManagementMenuProps = {
 }
 // TODO: deduplicate some code between this and the IssuerMenu
 export function NavManagementMenu({ stacked }: NavManagementMenuProps) {
-  const match = useRouteMatch<{ pid: string }>('/nav-management/:pid')
+  const match = useMatch('/nav-management/*')
   const isActive = !!match
   const [open, setOpen] = React.useState(isActive)
   const { space } = useTheme()

centrifuge-app/src/components/Menu/PageLink.tsx

@@ -1,6 +1,5 @@
 import { Text } from '@centrifuge/fabric'
-import { useRouteMatch } from 'react-router'
-import { Link, LinkProps } from 'react-router-dom'
+import { Link, LinkProps, useLocation } from 'react-router-dom'
 import styled from 'styled-components'
 import { useIsAboveBreakpoint } from '../../utils/useIsAboveBreakpoint'
 import { prefetchRoute } from '../Root'
@@ -10,22 +9,25 @@ const Root = styled(Text)<{ isActive?: boolean; stacked?: boolean }>`
   ${baseButton}
   ${primaryButton}
   grid-template-columns: ${({ stacked, theme }) => (stacked ? '1fr' : `${theme.sizes.iconSmall}px 1fr`)};
+  color: ${({ isActive }) => (isActive ? 'blue' : 'black')}; /* Example styling */
 `
 
 type PageLinkProps = LinkProps & {
   stacked?: boolean
 }
 
 export function PageLink({ stacked = false, to, children }: PageLinkProps) {
-  const match = useRouteMatch(to as string)
+  const location = useLocation()
   const isMedium = useIsAboveBreakpoint('M')
 
+  const isActive = location.pathname.startsWith(to as string)
+
   return (
     <Root
-      forwardedAs={Link}
+      as={Link}
       to={to}
       variant="interactive1"
-      isActive={Boolean(match)}
+      isActive={isActive}
       stacked={stacked}
       onMouseOver={() => prefetchRoute(to)}
       isMedium={isMedium}

centrifuge-app/src/components/Menu/PoolLink.tsx

@@ -1,6 +1,6 @@
 import type { Pool } from '@centrifuge/centrifuge-js'
 import { Text } from '@centrifuge/fabric'
-import { useRouteMatch } from 'react-router'
+import { useMatch } from 'react-router'
 import { Link } from 'react-router-dom'
 import styled from 'styled-components'
 import { usePoolMetadata } from '../../utils/usePools'
@@ -22,9 +22,10 @@ type PoolLinkProps = {
 }
 
 export function PoolLink({ pool, path = 'issuer' }: PoolLinkProps) {
-  const match = useRouteMatch<{ pid: string }>(`/${path}/:pid`)
+  const match = useMatch(`/${path}/:pid/*`)
   const { data: metadata } = usePoolMetadata(pool)
   const to = `/${path}/${pool.id}`
+
   return (
     <Root
       forwardedAs={Link}

centrifuge-app/src/components/MenuSwitch.tsx

@@ -1,5 +1,4 @@
 import { SideNavigationContainer, SideNavigationItem } from '@centrifuge/fabric'
-import * as React from 'react'
 import { Link, useLocation } from 'react-router-dom'
 
 export function MenuSwitch({ links }: { links: { to: string; label: string }[] }) {

centrifuge-app/src/components/NavigationTabs.tsx

@@ -1,22 +1,23 @@
 import { Tabs, TabsItem, TabsItemProps } from '@centrifuge/fabric'
 import * as React from 'react'
-import { useRouteMatch } from 'react-router'
+import { useLocation } from 'react-router'
 import { Link } from 'react-router-dom'
 
 type Props = {
-  basePath?: string
   children: (React.ReactElement<TabsItemProps> | string | boolean | null | undefined)[]
 }
 
-export function NavigationTabs({ basePath = '', children }: Props) {
-  const match = useRouteMatch<{ tab: string }>(`${basePath}/:tab`)
+export function NavigationTabs({ children }: Props) {
+  const location = useLocation()
   let matchedIndex = -1
+
   React.Children.forEach(children, (child, i) => {
     if (!React.isValidElement(child)) return
-    if (child.props.to?.endsWith(match?.params.tab)) {
+    if (location.pathname.startsWith(`${child.props.to}`)) {
       matchedIndex = i
     }
   })
+
   const index = matchedIndex !== -1 ? matchedIndex : 0
 
   return <Tabs selectedIndex={index}>{children}</Tabs>

centrifuge-app/src/components/Onboarding/AlertBusinessVerification.tsx

@@ -1,5 +1,4 @@
 import { Box, IconX, Shelf, Text } from '@centrifuge/fabric'
-import * as React from 'react'
 import styled from 'styled-components'
 
 type AlertBusinessVerificationProps = {

centrifuge-app/src/components/Onboarding/index.tsx

@@ -25,6 +25,6 @@ export {
   Legend,
   Notification,
   NotificationBar,
-  ValidEmailTooltip,
   PoolBranding,
+  ValidEmailTooltip,
 }

centrifuge-app/src/components/PoolCard/PoolStatus.tsx

@@ -1,5 +1,4 @@
 import { StatusChip, StatusChipProps } from '@centrifuge/fabric'
-import * as React from 'react'
 
 export type PoolStatusKey = 'Maker Pool' | 'Open for investments' | 'Closed' | 'Upcoming' | 'Archived'
 

centrifuge-app/src/components/PoolCard/index.tsx

@@ -1,15 +1,14 @@
+import { useBasePath } from '@centrifuge/centrifuge-app/src/utils/useBasePath'
 import { Rate } from '@centrifuge/centrifuge-js'
 import { Box, Grid, Text, TextWithPlaceholder, Thumbnail } from '@centrifuge/fabric'
 import Decimal from 'decimal.js-light'
-import { useRouteMatch } from 'react-router'
 import { useTheme } from 'styled-components'
 import { formatBalance, formatPercentage } from '../../utils/formatting'
 import { useIsAboveBreakpoint } from '../../utils/useIsAboveBreakpoint'
 import { Eththumbnail } from '../EthThumbnail'
 import { Anchor, Ellipsis, Root } from '../ListItemCardStyles'
 import { Tooltips } from '../Tooltips'
 import { PoolStatus, PoolStatusKey } from './PoolStatus'
-
 const columns_base = 'minmax(150px, 2fr) minmax(100px, 1fr) 140px 70px 150px'
 const columns_extended = 'minmax(200px, 2fr) minmax(100px, 1fr) 140px 100px 150px'
 export const COLUMNS = ['minmax(100px, 1fr) 1fr', 'minmax(100px, 1fr) 1fr', columns_base, columns_extended]
@@ -39,7 +38,7 @@ export function PoolCard({
   isLoading,
 }: PoolCardProps) {
   const isMedium = useIsAboveBreakpoint('M')
-  const basePath = useRouteMatch(['/pools', '/issuer'])?.path || '/pools'
+  const basePath = useBasePath('/pools')
   const { sizes, zIndices } = useTheme()
 
   return (