feat: actually kill splash page (#8166)

* feat: actually kill splash page

* feat: rm flags

* feat: lending empty state without connected wallet

* feat: and "Your Loans" too

* Revert "feat: lending empty state without connected wallet"

This reverts commit 2029f7e.

* feat: better "Your Positions" no wallet connected flow

* feat: add commentary

.env.base

@@ -48,7 +48,6 @@ REACT_APP_FEATURE_FOX_PAGE_FOX_FARMING_SECTION=true
 REACT_APP_FEATURE_FOX_PAGE_GOVERNANCE=true
 REACT_APP_FEATURE_PHANTOM_WALLET=true
 REACT_APP_FEATURE_ZRX_PERMIT2=true
-REACT_APP_FEATURE_PUBLIC_TRADE_ROUTE=false
 REACT_APP_FEATURE_THOR_FREE_FEES=true
 REACT_APP_FEATURE_LIMIT_ORDERS=false
 

.env.develop

@@ -1,6 +1,5 @@
 # feature flags
 REACT_APP_FEATURE_LIMIT_ORDERS=true
-REACT_APP_FEATURE_PUBLIC_TRADE_ROUTE=true
 REACT_APP_FEATURE_CHAINFLIP=true
 REACT_APP_FEATURE_CHAINFLIP_DCA=false
 

src/Routes/Routes.tsx

@@ -8,12 +8,11 @@ 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 }))),
 )
@@ -104,10 +103,21 @@ 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'}`,
+          }
+
+          // This is already within a useMemo call, lint rule drunk
+          // eslint-disable-next-line react-memo/require-usememo
+          return <Redirect to={to} />
+        }
+
         return (
-          <PrivateRoute key={'privateRoute'} path={route.path} hasWallet={hasWallet}>
+          <Route key={'route'} path={route.path}>
             {MainComponent && <MainComponent />}
-          </PrivateRoute>
+          </Route>
         )
       }),
     // We *actually* want to be reactive on the location.pathname reference

src/config.ts

@@ -178,7 +178,6 @@ const validators = {
   REACT_APP_FEATURE_CHAINFLIP_DCA: bool({ default: false }),
   REACT_APP_CHAINFLIP_API_KEY: str(),
   REACT_APP_CHAINFLIP_API_URL: url(),
-  REACT_APP_FEATURE_PUBLIC_TRADE_ROUTE: bool({ default: false }),
   REACT_APP_FEATURE_THOR_FREE_FEES: bool({ default: false }),
 }
 

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, useMemo, useState } from 'react'
+import { memo, useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslate } from 'react-polyglot'
 import { Route, Switch, useHistory, useRouteMatch } from 'react-router'
 import SwipeableViews from 'react-swipeable-views'
@@ -11,7 +11,9 @@ 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'
@@ -71,6 +73,17 @@ export const Dashboard = memo(() => {
   const appIsMobile = isMobile || !isLargerThanMd
   const history = useHistory()
 
+  const {
+    dispatch: walletDispatch,
+    state: { isConnected },
+  } = useWallet()
+
+  useEffect(() => {
+    if (isConnected) return
+
+    walletDispatch({ type: WalletActions.SET_WALLET_MODAL, payload: true })
+  }, [isConnected, walletDispatch])
+
   const handleSlideIndexChange = useCallback(
     (index: number) => {
       switch (index) {

src/pages/Lending/YourLoans.tsx

@@ -2,18 +2,22 @@ import type { GridProps } from '@chakra-ui/react'
 import { Button, Flex, SimpleGrid, Skeleton, Stack } from '@chakra-ui/react'
 import type { AccountId, AssetId } from '@shapeshiftoss/caip'
 import type { Asset } from '@shapeshiftoss/types'
+import type { InterpolationOptions } from 'node-polyglot'
 import { useCallback, useMemo } from 'react'
+import { FaWallet } from 'react-icons/fa'
 import { RiExchangeFundsLine } from 'react-icons/ri'
 import { useTranslate } from 'react-polyglot'
 import { generatePath, useHistory } from 'react-router'
 import { Amount } from 'components/Amount/Amount'
+import { ButtonWalletPredicate } from 'components/ButtonWalletPredicate/ButtonWalletPredicate'
 import { HelperTooltip } from 'components/HelperTooltip/HelperTooltip'
 import { Main } from 'components/Layout/Main'
 import { SEO } from 'components/Layout/Seo'
 import { ResultsEmpty } from 'components/ResultsEmpty'
 import { AssetCell } from 'components/StakingVaults/Cells'
 import { RawText, Text } from 'components/Text'
 import type { TextPropTypes } from 'components/Text/Text'
+import { useWallet } from 'hooks/useWallet/useWallet'
 import { bnOrZero } from 'lib/bignumber/bignumber'
 import { isSome } from 'lib/utils'
 import { selectAccountNumberByAccountId } from 'state/slices/selectors'
@@ -205,6 +209,7 @@ const LendingRowAssetAccountsGrids = ({
 }
 
 export const YourLoans = () => {
+  const { isConnected } = useWallet().state
   const translate = useTranslate()
   const lendingHeader = useMemo(() => <LendingHeader />, [])
 
@@ -275,13 +280,28 @@ export const YourLoans = () => {
     ) : null
   }, [isActive, translate])
 
+  const connectWalletBody: [string, InterpolationOptions] = useMemo(
+    () => ['common.connectWalletToGetStartedWith', { feature: 'Lending' }],
+    [],
+  )
+  const connectWalletTitleButton = useMemo(() => <ButtonWalletPredicate isValidWallet />, [])
+  const connectIcon = useMemo(() => <FaWallet />, [])
+
   return (
     <Main headerComponent={lendingHeader} isSubPage>
       <SEO title={translate('lending.yourLoans.yourLoans')} />
-      <Stack>
-        {renderHeader}
-        {lendingRowGrids}
-      </Stack>
+      {isConnected ? (
+        <Stack>
+          {renderHeader}
+          {lendingRowGrids}
+        </Stack>
+      ) : (
+        <ResultsEmpty
+          title={connectWalletTitleButton}
+          body={connectWalletBody}
+          icon={connectIcon}
+        />
+      )}
     </Main>
   )
 }

src/pages/Lending/hooks/useLendingSupportedAssets/index.ts

@@ -34,7 +34,9 @@ export const useLendingSupportedAssets = ({
   type: 'collateral' | 'borrow'
   statusFilter?: ThornodePoolStatuses | 'All'
 }) => {
-  const wallet = useWallet().state.wallet
+  const {
+    state: { wallet, isConnected },
+  } = useWallet()
   const { isSnapInstalled } = useIsSnapInstalled()
 
   const { data: availablePools } = useQuery({
@@ -101,11 +103,14 @@ export const useLendingSupportedAssets = ({
           const assetId = poolAssetIdToAssetId(pool.asset)
           const chainId = assetId ? (fromAssetId(assetId).chainId as KnownChainIds) : undefined
 
-          if (!chainId || !walletSupportChains.includes(chainId)) return undefined
-          // Chain supported by the wallet, but no actual account for it.
-          // This can happen with Ledger, when the chain's accounts haven't been connected
-          if (type === 'borrow' && !walletChainIds.includes(chainId)) {
-            return undefined
+          // Wallet feature-capability checks below do not apply if no wallet is connected
+          if (isConnected) {
+            if (!chainId || !walletSupportChains.includes(chainId)) return undefined
+            // Chain supported by the wallet, but no actual account for it.
+            // This can happen with Ledger, when the chain's accounts haven't been connected
+            if (type === 'borrow' && !walletChainIds.includes(chainId)) {
+              return undefined
+            }
           }
 
           const asset = selectAssetById(store.getState(), assetId ?? '')
@@ -115,17 +120,16 @@ export const useLendingSupportedAssets = ({
 
       if (
         type === 'borrow' &&
-        wallet &&
-        supportsThorchain(wallet) &&
-        walletChainIds.includes(thorchainChainId)
+        (!isConnected ||
+          (wallet && supportsThorchain(wallet) && walletChainIds.includes(thorchainChainId)))
       ) {
         const runeAsset = selectAssetById(store.getState(), thorchainAssetId)
         if (!runeAsset) return
         supportedAssets.push(runeAsset)
       }
       return supportedAssets
     },
-    [availablePools, mimir, type, wallet, walletChainIds, walletSupportChains],
+    [availablePools, isConnected, mimir, type, wallet, walletChainIds, walletSupportChains],
   )
 
   const lendingSupportedAssetsQuery = useQuery({

src/state/slices/preferencesSlice/preferencesSlice.ts

@@ -70,7 +70,6 @@ export type FeatureFlags = {
   LimitOrders: boolean
   Chainflip: boolean
   ChainflipDca: boolean
-  PublicTradeRoute: boolean
   ThorFreeFees: boolean
 }
 
@@ -165,7 +164,6 @@ const initialState: Preferences = {
     LimitOrders: getConfig().REACT_APP_FEATURE_LIMIT_ORDERS,
     Chainflip: getConfig().REACT_APP_FEATURE_CHAINFLIP,
     ChainflipDca: getConfig().REACT_APP_FEATURE_CHAINFLIP_DCA,
-    PublicTradeRoute: getConfig().REACT_APP_FEATURE_PUBLIC_TRADE_ROUTE,
     ThorFreeFees: getConfig().REACT_APP_FEATURE_THOR_FREE_FEES,
   },
   selectedLocale: simpleLocale(),

src/test/mocks/store.ts

@@ -132,7 +132,6 @@ export const mockStore: ReduxState = {
       LimitOrders: false,
       Chainflip: false,
       ChainflipDca: false,
-      PublicTradeRoute: false,
       ThorFreeFees: false,
     },
     selectedLocale: 'en',