Centrifuge App: Fixes (#1673)

centrifuge · Nov 1, 2023 · 5acb85c · 5acb85c
1 parent 8da3b5f
commit 5acb85c
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 89 deletions.
diff --git a/centrifuge-app/src/components/DataTable.tsx b/centrifuge-app/src/components/DataTable.tsx
@@ -261,12 +261,16 @@ export function SortableTableHeader({
   onClick?: () => void
 }) {
   return (
-    <StyledHeader gap="4px" as="button" onClick={onClick}>
-      {label}
-      <Stack>
-        {(orderBy === 'asc' || !orderBy) && <IconChevronUp size={14} style={{ marginBottom: !orderBy ? -3.5 : 0 }} />}
-        {(orderBy === 'desc' || !orderBy) && <IconChevronDown size={14} style={{ marginTop: !orderBy ? -3.5 : 0 }} />}
-      </Stack>
+    <StyledHeader as="button" type="button" onClick={onClick}>
+      <Shelf gap="4px">
+        <Text variant="body3" color="currentColor">
+          {label}
+        </Text>
+        <Stack>
+          {(orderBy === 'asc' || !orderBy) && <IconChevronUp size={14} style={{ marginBottom: !orderBy ? -3.5 : 0 }} />}
+          {(orderBy === 'desc' || !orderBy) && <IconChevronDown size={14} style={{ marginTop: !orderBy ? -3.5 : 0 }} />}
+        </Stack>
+      </Shelf>
     </StyledHeader>
   )
 }
@@ -373,8 +377,7 @@ export function FilterableTableHeader({
   )
 }
 
-const StyledHeader = styled(Shelf)`
-  color: ${({ theme }) => theme.colors.textPrimary};
+const StyledHeader = styled(Text)`
   cursor: pointer;
   appearance: none;
   border: none;

diff --git a/centrifuge-app/src/components/Menu/PageLink.tsx b/centrifuge-app/src/components/Menu/PageLink.tsx
@@ -3,6 +3,7 @@ import * as React from 'react'
 import { useRouteMatch } from 'react-router'
 import { Link, LinkProps } from 'react-router-dom'
 import styled from 'styled-components'
+import { prefetchRoute } from '../Root'
 import { baseButton, primaryButton } from './styles'
 
 const Root = styled(Text)<{ isActive?: boolean; stacked?: boolean }>`
@@ -19,7 +20,14 @@ export function PageLink({ stacked = false, to, children }: PageLinkProps) {
   const match = useRouteMatch(to as string)
 
   return (
-    <Root forwardedAs={Link} to={to} variant="interactive1" isActive={Boolean(match)} stacked={stacked}>
+    <Root
+      forwardedAs={Link}
+      to={to}
+      variant="interactive1"
+      isActive={Boolean(match)}
+      stacked={stacked}
+      onMouseOver={() => prefetchRoute(to)}
+    >
       {children}
     </Root>
   )

diff --git a/centrifuge-app/src/components/Menu/PoolLink.tsx b/centrifuge-app/src/components/Menu/PoolLink.tsx
@@ -4,6 +4,7 @@ import { useRouteMatch } from 'react-router'
 import { Link } from 'react-router-dom'
 import styled from 'styled-components'
 import { usePoolMetadata } from '../../utils/usePools'
+import { prefetchRoute } from '../Root'
 import { baseButton } from './styles'
 
 const Root = styled(Text)`
@@ -22,13 +23,14 @@ type PoolLinkProps = {
 export function PoolLink({ pool }: PoolLinkProps) {
   const match = useRouteMatch<{ pid: string }>('/issuer/:pid')
   const { data: metadata } = usePoolMetadata(pool)
-
+  const to = `/issuer/${pool.id}`
   return (
     <Root
       forwardedAs={Link}
-      to={`/issuer/${pool.id}`}
+      to={to}
       variant="interactive1"
       isActive={match && pool.id === match.params.pid}
+      onMouseOver={() => prefetchRoute(to)}
     >
       {metadata?.pool?.name ?? pool.id}
     </Root>

diff --git a/centrifuge-app/src/components/Root.tsx b/centrifuge-app/src/components/Root.tsx
@@ -14,7 +14,7 @@ import goerliLogo from '@centrifuge/fabric/assets/logos/goerli.svg'
 import * as React from 'react'
 import { HelmetProvider } from 'react-helmet-async'
 import { QueryClient, QueryClientProvider } from 'react-query'
-import { BrowserRouter as Router, Redirect, Route, Switch } from 'react-router-dom'
+import { BrowserRouter as Router, LinkProps, matchPath, Redirect, Route, RouteProps, Switch } from 'react-router-dom'
 import { config, ethConfig } from '../config'
 import PoolsPage from '../pages/Pools'
 import { pinToApi } from '../utils/pinToApi'
@@ -196,84 +196,57 @@ const TokenOverviewPage = React.lazy(() => import('../pages/Tokens'))
 const PrimePage = React.lazy(() => import('../pages/Prime'))
 const PrimeDetailPage = React.lazy(() => import('../pages/Prime/Detail'))
 
+const routes: RouteProps[] = [
+  { path: '/nfts/collection/:cid/object/mint', component: MintNFTPage },
+  { path: '/nfts/collection/:cid/object/:nftid', component: NFTPage },
+  { path: '/nfts/collection/:cid', component: CollectionPage },
+  { path: '/nfts/account', component: AccountNFTsPage },
+  { path: '/nfts', component: CollectionsPage },
+  { path: '/issuer/create-pool', component: IssuerCreatePoolPage },
+  { path: '/issuer/:pid/assets/create', component: IssuerCreateLoanPage },
+  { path: '/issuer/:pid/assets/:aid', component: LoanPage, exact: true },
+  { path: '/issuer/:pid', component: IssuerPoolPage },
+  { path: '/pools/:pid/assets/:aid', component: LoanPage },
+  { path: '/pools/tokens', component: TokenOverviewPage },
+  { path: '/pools/:pid', component: PoolDetailPage },
+  { path: '/pools', component: PoolsPage },
+  { path: '/history', component: TransactionHistoryPage },
+  { path: '/portfolio', component: PortfolioPage },
+  { path: '/prime/:dao', component: PrimeDetailPage },
+  { path: '/prime', component: PrimePage },
+  { path: '/disclaimer', component: InvestmentDisclaimerPage },
+  { path: '/onboarding', component: OnboardingPage, exact: true },
+  { path: '/onboarding/verifyEmail', component: EmailVerified, exact: true },
+  { path: '/onboarding/updateInvestorStatus', component: UpdateInvestorStatus, exact: true },
+  { path: '/multisig-approval', component: MultisigApprovalPage, exact: true },
+  { path: '/swaps', component: SwapsPage },
+  { path: '/', children: <Redirect to="/pools" /> },
+  {
+    children: <NotFoundPage />,
+  },
+]
+
+export function findRoute(pathname: string) {
+  return routes.find((r) => {
+    return r.path ? matchPath(pathname, r) : true
+  })
+}
+
+export function prefetchRoute(to: string | LinkProps['to']) {
+  const pathname = typeof to === 'string' ? to : 'pathname' in to ? to.pathname : null
+  const route = pathname ? findRoute(pathname) : null
+  const Comp = route?.component as any
+  try {
+    if (Comp && '_init' in Comp && '_payload' in Comp) Comp._init(Comp._payload)
+  } catch {}
+}
+
 function Routes() {
   return (
     <Switch>
-      <Route path="/nfts/collection/:cid/object/mint">
-        <MintNFTPage />
-      </Route>
-      <Route path="/nfts/collection/:cid/object/:nftid">
-        <NFTPage />
-      </Route>
-      <Route path="/nfts/collection/:cid">
-        <CollectionPage />
-      </Route>
-      <Route path="/nfts/account">
-        <AccountNFTsPage />
-      </Route>
-      <Route path="/nfts">
-        <CollectionsPage />
-      </Route>
-      <Route path="/issuer/create-pool">
-        <IssuerCreatePoolPage />
-      </Route>
-      <Route path="/issuer/:pid/assets/create">
-        <IssuerCreateLoanPage />
-      </Route>
-      <Route exact path="/issuer/:pid/assets/:aid">
-        <LoanPage />
-      </Route>
-      <Route path="/issuer/:pid">
-        <IssuerPoolPage />
-      </Route>
-      <Route path="/pools/:pid/assets/:aid">
-        <LoanPage />
-      </Route>
-      <Route path="/pools/tokens">
-        <TokenOverviewPage />
-      </Route>
-      <Route path="/pools/:pid">
-        <PoolDetailPage />
-      </Route>
-      <Route path="/pools">
-        <PoolsPage />
-      </Route>
-      <Route path="/history">
-        <TransactionHistoryPage />
-      </Route>
-      <Route path="/portfolio">
-        <PortfolioPage />
-      </Route>
-      <Route path="/prime/:dao">
-        <PrimeDetailPage />
-      </Route>
-      <Route path="/prime">
-        <PrimePage />
-      </Route>
-      <Route path="/disclaimer">
-        <InvestmentDisclaimerPage />
-      </Route>
-      <Route exact path="/onboarding">
-        <OnboardingPage />
-      </Route>
-      <Route exact path="/onboarding/verifyEmail">
-        <EmailVerified />
-      </Route>
-      <Route exact path="/onboarding/updateInvestorStatus">
-        <UpdateInvestorStatus />
-      </Route>
-      <Route exact path="/multisig-approval">
-        <MultisigApprovalPage />
-      </Route>
-      <Route path="/swaps">
-        <SwapsPage />
-      </Route>
-      <Route exact path="/">
-        <Redirect to="/pools" />
-      </Route>
-      <Route>
-        <NotFoundPage />
-      </Route>
+      {routes.map((route) => (
+        <Route {...route} />
+      ))}
     </Switch>
   )
 }
diff --git a/centrifuge-app/src/components/RouterLinkButton.tsx b/centrifuge-app/src/components/RouterLinkButton.tsx
@@ -3,6 +3,7 @@ import * as React from 'react'
 import { NavLink, NavLinkProps } from 'react-router-dom'
 import styled from 'styled-components'
 import { useLinkIsActive } from '../utils/useLinkIsActive'
+import { prefetchRoute } from './Root'
 
 export type RouterLinkButtonProps = VisualButtonProps & NavLinkProps & { showActive?: boolean }
 
@@ -30,7 +31,7 @@ export const RouterLinkButton: React.FC<RouterLinkButtonProps> = ({
   const isActive = useLinkIsActive(routeProps)
 
   return (
-    <StyledLink $disabled={loading || disabled} {...routeProps}>
+    <StyledLink $disabled={loading || disabled} {...routeProps} onMouseOver={() => prefetchRoute(routeProps.to)}>
       <VisualButton
         variant={variant}
         small={small}

diff --git a/centrifuge-app/src/pages/Swaps.tsx b/centrifuge-app/src/pages/Swaps.tsx
@@ -1,7 +1,7 @@
 import { LayoutBase, LayoutMain } from '../components/LayoutBase'
 import { Orders } from '../components/Swaps/Orders'
 
-export function SwapsPage() {
+export default function SwapsPage() {
   return (
     <LayoutBase>
       <LayoutMain title="Open swap orders">