feat: bring back splash page (#7886)

src/Routes/PrivateRoute.tsx

@@ -0,0 +1,34 @@
+import { useMemo } from 'react'
+import type { RouteProps } from 'react-router-dom'
+import { Redirect, Route, Switch } from 'react-router-dom'
+
+type PrivateRouteProps = {
+  hasWallet: boolean
+} & RouteProps
+
+export const PrivateRoute = ({ hasWallet, ...rest }: PrivateRouteProps) => {
+  const { location } = rest
+
+  const to = useMemo(
+    () => ({
+      pathname: '/connect-wallet',
+      search: `returnUrl=${location?.pathname ?? '/trade'}`,
+    }),
+    [location],
+  )
+
+  return (
+    <Switch location={location}>
+      <Route {...rest} path='/markets' />
+      <Route {...rest} path='/assets' />
+      <Route {...rest} path='/rfox' />
+      <Route {...rest} path='/explore' />
+      <Route {...rest} path='/pools' />
+      <Route {...rest} path='/earn' />
+      <Route {...rest} path='/buy-crypto' />
+      <Route {...rest} path='/assets' />
+      <Route {...rest} path='/flags' />
+      {hasWallet ? <Route {...rest} /> : <Redirect to={to} />}
+    </Switch>
+  )
+}

src/Routes/Routes.tsx

@@ -8,11 +8,12 @@ import { Layout } from 'components/Layout/Layout'
 import { useBrowserRouter } from 'hooks/useBrowserRouter/useBrowserRouter'
 import { useQuery } from 'hooks/useQuery/useQuery'
 import { useWallet } from 'hooks/useWallet/useWallet'
-import { isMobile } from 'lib/globals'
 import { preferences } from 'state/slices/preferencesSlice/preferencesSlice'
 import { selectSelectedLocale } from 'state/slices/selectors'
 import { useAppSelector } from 'state/store'
 
+import { PrivateRoute } from './PrivateRoute'
+
 const Flags = makeSuspenseful(
   lazy(() => import('pages/Flags/Flags').then(({ Flags }) => ({ default: Flags }))),
 )
@@ -110,19 +111,15 @@ export const Routes = memo(() => {
     () =>
       appRoutes.map(route => {
         const MainComponent = route.main
-        if (isMobile && !state.isConnected) {
-          const to = {
-            pathname: '/connect-wallet',
-            search: `returnUrl=${location?.pathname ?? '/trade'}`,
-          }
 
-          // eslint-disable-next-line react-memo/require-usememo
-          return <Redirect to={to} />
-        }
         return (
-          <Route key={isUnstableRoute ? Date.now() : 'route'} path={route.path}>
+          <PrivateRoute
+            key={isUnstableRoute ? Date.now() : 'privateRoute'}
+            path={route.path}
+            hasWallet={hasWallet}
+          >
             {MainComponent && <MainComponent />}
-          </Route>
+          </PrivateRoute>
         )
       }),
     // We *actually* want to be reactive on the location.pathname reference

src/Routes/RoutesCommon.tsx

@@ -15,7 +15,7 @@ import { WalletIcon } from 'components/Icons/WalletIcon'
 import { assetIdPaths } from 'hooks/useRouteAssetId/useRouteAssetId'
 import { RFOX } from 'pages/RFOX/RFOX'
 
-import type { Route as NestedRoute } from './helpers'
+import type { Route } from './helpers'
 import { RouteCategory } from './helpers'
 
 const Home = makeSuspenseful(
@@ -130,7 +130,7 @@ const TransactionHistory = makeSuspenseful(
  * THIS IS CRITICAL FOR MIXPANEL TO NOT COLLECT USER ADDRESSES
  */
 
-export const routes: NestedRoute[] = [
+export const routes: Route[] = [
   {
     path: '/home',
     label: 'navBar.home',

src/pages/Dashboard/Dashboard.tsx

@@ -1,6 +1,6 @@
 import type { FlexProps, TabProps } from '@chakra-ui/react'
 import { Flex, Tab, TabIndicator, TabList, Tabs, useMediaQuery } from '@chakra-ui/react'
-import { memo, useCallback, useEffect, useMemo, useState } from 'react'
+import { memo, useCallback, useMemo, useState } from 'react'
 import { useTranslate } from 'react-polyglot'
 import { Route, Switch, useHistory, useRouteMatch } from 'react-router'
 import SwipeableViews from 'react-swipeable-views'
@@ -10,9 +10,7 @@ import { Main } from 'components/Layout/Main'
 import { SEO } from 'components/Layout/Seo'
 import { NftTable } from 'components/Nfts/NftTable'
 import { RawText } from 'components/Text'
-import { WalletActions } from 'context/WalletProvider/actions'
 import { useFeatureFlag } from 'hooks/useFeatureFlag/useFeatureFlag'
-import { useWallet } from 'hooks/useWallet/useWallet'
 import { isMobile } from 'lib/globals'
 import { Accounts } from 'pages/Accounts/Accounts'
 import { TransactionHistory } from 'pages/TransactionHistory/TransactionHistory'
@@ -64,10 +62,6 @@ enum MobileTab {
 }
 
 export const Dashboard = memo(() => {
-  const {
-    dispatch: walletDispatch,
-    state: { isConnected },
-  } = useWallet()
   const translate = useTranslate()
   const [slideIndex, setSlideIndex] = useState(0)
   const [isLargerThanMd] = useMediaQuery(`(min-width: ${breakpoints['md']})`, { ssr: false })
@@ -76,11 +70,6 @@ export const Dashboard = memo(() => {
   const appIsMobile = isMobile || !isLargerThanMd
   const history = useHistory()
 
-  useEffect(() => {
-    if (!isConnected && !isMobile)
-      walletDispatch({ type: WalletActions.SET_WALLET_MODAL, payload: true })
-  }, [isConnected, walletDispatch])
-
   const handleSlideIndexChange = useCallback(
     (index: number) => {
       switch (index) {