From d3276acfe6b4a6c916271003dce6f106a59ec000 Mon Sep 17 00:00:00 2001
From: Apotheosis <97164662+0xApotheosis@users.noreply.github.com>
Date: Thu, 19 Sep 2024 17:15:51 +1000
Subject: [PATCH] chore: remove DefiDashboard flag & dead code

---
 .env.base                                     |   1 -
 src/config.ts                                 |   1 -
 src/pages/Dashboard/Dashboard.tsx             |  78 +++++--------
 src/pages/Dashboard/Portfolio.tsx             |   2 -
 src/pages/Dashboard/PortfolioBreakdown.tsx    | 108 ------------------
 .../preferencesSlice/preferencesSlice.ts      |   2 -
 src/test/mocks/store.ts                       |   1 -
 7 files changed, 29 insertions(+), 164 deletions(-)
 delete mode 100644 src/pages/Dashboard/PortfolioBreakdown.tsx

diff --git a/.env.base b/.env.base
index 3e46abc63ef..a15243f1306 100644
--- a/.env.base
+++ b/.env.base
@@ -9,7 +9,6 @@ REACT_APP_FEATURE_ARBITRUM_NOVA=false
 REACT_APP_FEATURE_BASE=true
 REACT_APP_FEATURE_OPTIMISM=true
 REACT_APP_FEATURE_JAYPEGZ=true
-REACT_APP_FEATURE_DEFI_DASHBOARD=true
 REACT_APP_FEATURE_MIXPANEL=true
 REACT_APP_FEATURE_SAVERS_VAULTS=true
 REACT_APP_FEATURE_SAVERS_VAULTS_DEPOSIT=true
diff --git a/src/config.ts b/src/config.ts
index 82d39f7d892..e369aaa9e03 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -64,7 +64,6 @@ const validators = {
   REACT_APP_MTPELERIN_REFERRAL_CODE: str(),
   REACT_APP_MTPELERIN_INTEGRATION_KEY: str(),
   REACT_APP_FRIENDLY_CAPTCHA_SITE_KEY: str(),
-  REACT_APP_FEATURE_DEFI_DASHBOARD: bool({ default: false }),
   REACT_APP_ZAPPER_API_KEY: str(),
   REACT_APP_COVALENT_API_KEY: str(),
   REACT_APP_FEATURE_LIFI_SWAP: bool({ default: false }),
diff --git a/src/pages/Dashboard/Dashboard.tsx b/src/pages/Dashboard/Dashboard.tsx
index 4a8042e1d9d..15fcc7c12ec 100644
--- a/src/pages/Dashboard/Dashboard.tsx
+++ b/src/pages/Dashboard/Dashboard.tsx
@@ -1,5 +1,5 @@
-import type { FlexProps, StackDirection, TabProps } from '@chakra-ui/react'
-import { Flex, Stack, Tab, TabIndicator, TabList, Tabs, useMediaQuery } from '@chakra-ui/react'
+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 { useTranslate } from 'react-polyglot'
 import { Route, Switch, useHistory, useRouteMatch } from 'react-router'
@@ -17,15 +17,11 @@ import { TransactionHistory } from 'pages/TransactionHistory/TransactionHistory'
 import { breakpoints } from 'theme/theme'
 
 import { DashboardHeader } from './components/DashboardHeader/DashboardHeader'
-import { DashboardSidebar } from './DashboardSidebar'
 import { EarnDashboard } from './EarnDashboard'
 import { MobileActivity } from './MobileActivity'
-import { Portfolio } from './Portfolio'
 import { RewardsDashboard } from './RewardsDashboard'
 import { WalletDashboard } from './WalletDashboard'
 
-const direction: StackDirection = { base: 'column', xl: 'row' }
-const maxWidth = { base: 'full', lg: 'full', xl: 'sm' }
 const mainPadding = { base: 0, md: 4 }
 const customTabActive = { color: 'text.base' }
 const customTabLast = { marginRight: 0 }
@@ -69,7 +65,6 @@ export const Dashboard = memo(() => {
   const translate = useTranslate()
   const [slideIndex, setSlideIndex] = useState(0)
   const [isLargerThanMd] = useMediaQuery(`(min-width: ${breakpoints['md']})`, { ssr: false })
-  const isDefiDashboardEnabled = useFeatureFlag('DefiDashboard')
   const { path } = useRouteMatch()
   const isNftsEnabled = useFeatureFlag('Jaypegz')
   const appIsMobile = isMobile || !isLargerThanMd
@@ -166,50 +161,35 @@ export const Dashboard = memo(() => {
     )
   }
 
-  if (isDefiDashboardEnabled)
-    return (
-      <Main headerComponent={dashboardHeader} py={mainPadding}>
-        <SEO title={translate('navBar.dashboard')} />
-        <Switch>
-          <Route exact path={`${path}`}>
-            <WalletDashboard />
-          </Route>
-          <Route exact path={`${path}/earn`}>
-            <EarnDashboard />
-          </Route>
-          <Route exact path={`${path}/rewards`}>
-            <RewardsDashboard />
-          </Route>
-          <Route path={`${path}/accounts`}>
-            <Accounts />
-          </Route>
-          <Route path={`${path}/activity`}>
-            <TransactionHistory />
-          </Route>
-          {isNftsEnabled && (
-            <Route exact path={`${path}/nfts`}>
-              <NftTable />
-            </Route>
-          )}
-
-          <Route>
-            <RawText>Not found</RawText>
-          </Route>
-        </Switch>
-      </Main>
-    )
-
   return (
-    <Main>
+    <Main headerComponent={dashboardHeader} py={mainPadding}>
       <SEO title={translate('navBar.dashboard')} />
-      <Stack alignItems='flex-start' spacing={4} mx='auto' direction={direction}>
-        <Stack spacing={4} flex='1 1 0%' width='full'>
-          <Portfolio />
-        </Stack>
-        <Stack flex='1 1 0%' width='full' maxWidth={maxWidth} spacing={4}>
-          <DashboardSidebar />
-        </Stack>
-      </Stack>
+      <Switch>
+        <Route exact path={`${path}`}>
+          <WalletDashboard />
+        </Route>
+        <Route exact path={`${path}/earn`}>
+          <EarnDashboard />
+        </Route>
+        <Route exact path={`${path}/rewards`}>
+          <RewardsDashboard />
+        </Route>
+        <Route path={`${path}/accounts`}>
+          <Accounts />
+        </Route>
+        <Route path={`${path}/activity`}>
+          <TransactionHistory />
+        </Route>
+        {isNftsEnabled && (
+          <Route exact path={`${path}/nfts`}>
+            <NftTable />
+          </Route>
+        )}
+
+        <Route>
+          <RawText>Not found</RawText>
+        </Route>
+      </Switch>
     </Main>
   )
 })
diff --git a/src/pages/Dashboard/Portfolio.tsx b/src/pages/Dashboard/Portfolio.tsx
index 6f8637ef2ab..53c282d5fc8 100644
--- a/src/pages/Dashboard/Portfolio.tsx
+++ b/src/pages/Dashboard/Portfolio.tsx
@@ -4,7 +4,6 @@ import { Text } from 'components/Text'
 
 import { AccountTable } from './components/AccountList/AccountTable'
 import { DashboardChart } from './components/DashboardChart'
-import { PortfolioBreakdown } from './PortfolioBreakdown'
 
 const cardBodyPx = { base: 4, md: 2 }
 const accountHeaderPaddingBottom = { base: 0, md: 4 }
@@ -15,7 +14,6 @@ export const Portfolio = memo(() => {
   return (
     <Stack spacing={stackSpacing} width='full'>
       <DashboardChart />
-      <PortfolioBreakdown />
       <Card variant='dashboard'>
         <CardHeader pb={accountHeaderPaddingBottom} pt={accountHeaderPaddingTop}>
           <Heading as='h6'>
diff --git a/src/pages/Dashboard/PortfolioBreakdown.tsx b/src/pages/Dashboard/PortfolioBreakdown.tsx
deleted file mode 100644
index 3aed80136a9..00000000000
--- a/src/pages/Dashboard/PortfolioBreakdown.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-import type { ResponsiveValue } from '@chakra-ui/react'
-import { Card, CardBody, Flex, Skeleton, useColorModeValue } from '@chakra-ui/react'
-import type { Property } from 'csstype'
-import { memo, useCallback, useMemo } from 'react'
-import { useHistory } from 'react-router'
-import { Amount } from 'components/Amount/Amount'
-import { CircularProgress } from 'components/CircularProgress/CircularProgress'
-import { Text } from 'components/Text'
-import { useFeatureFlag } from 'hooks/useFeatureFlag/useFeatureFlag'
-import { bnOrZero } from 'lib/bignumber/bignumber'
-import {
-  selectClaimableRewards,
-  selectEarnBalancesUserCurrencyAmountFull,
-  selectPortfolioTotalUserCurrencyBalanceExcludeEarnDupes,
-} from 'state/slices/selectors'
-import { useAppSelector } from 'state/store'
-
-type StatCardProps = {
-  percentage: number
-  value: string
-  label: string
-  color?: string
-  onClick: () => void
-  isLoading?: boolean
-}
-
-const flexGap = { base: 0, xl: 6 }
-const flexDirection: ResponsiveValue<Property.FlexDirection> = { base: 'column', md: 'row' }
-
-const BreakdownCard: React.FC<StatCardProps> = ({
-  percentage,
-  value,
-  label,
-  color,
-  onClick,
-  isLoading,
-}) => {
-  const hoverBg = useColorModeValue('gray.100', 'gray.750')
-  const cardHover = useMemo(() => ({ bg: hoverBg }), [hoverBg])
-
-  return (
-    <Card flex={1} cursor='pointer' onClick={onClick} _hover={cardHover}>
-      <CardBody display='flex' gap={4} alignItems='center'>
-        <CircularProgress
-          isIndeterminate={isLoading}
-          value={percentage}
-          color={color ? color : 'blue.500'}
-        />
-        <Flex direction='column'>
-          <Text color='text.subtle' fontWeight='medium' translation={label} />
-          <Skeleton isLoaded={!isLoading}>
-            <Amount.Fiat fontWeight='bold' fontSize='xl' value={value} />
-          </Skeleton>
-        </Flex>
-      </CardBody>
-    </Card>
-  )
-}
-
-export const PortfolioBreakdown = memo(() => {
-  const history = useHistory()
-  const earnUserCurrencyBalance = useAppSelector(selectEarnBalancesUserCurrencyAmountFull).toFixed()
-  const claimableRewardsUserCurrencyBalanceFilter = useMemo(() => ({}), [])
-  const claimableRewardsUserCurrencyBalance = useAppSelector(state =>
-    selectClaimableRewards(state, claimableRewardsUserCurrencyBalanceFilter),
-  )
-  const portfolioTotalUserCurrencyBalance = useAppSelector(
-    selectPortfolioTotalUserCurrencyBalanceExcludeEarnDupes,
-  )
-  const netWorth = useMemo(
-    () =>
-      bnOrZero(earnUserCurrencyBalance)
-        .plus(portfolioTotalUserCurrencyBalance)
-        .plus(claimableRewardsUserCurrencyBalance)
-        .toFixed(),
-    [
-      claimableRewardsUserCurrencyBalance,
-      earnUserCurrencyBalance,
-      portfolioTotalUserCurrencyBalance,
-    ],
-  )
-
-  const isDefiDashboardEnabled = useFeatureFlag('DefiDashboard')
-
-  const handleWalletBalanceClick = useCallback(() => history.push('/accounts'), [history])
-  const handleEarnBalanceClick = useCallback(() => history.push('/earn'), [history])
-
-  // *don't* show these if the DefiDashboard feature flag is enabled
-  if (isDefiDashboardEnabled) return null
-
-  return (
-    <Flex gap={flexGap} flexDir={flexDirection}>
-      <BreakdownCard
-        value={portfolioTotalUserCurrencyBalance}
-        percentage={bnOrZero(portfolioTotalUserCurrencyBalance).div(netWorth).times(100).toNumber()}
-        label='defi.walletBalance'
-        onClick={handleWalletBalanceClick}
-      />
-      <BreakdownCard
-        value={earnUserCurrencyBalance}
-        percentage={bnOrZero(earnUserCurrencyBalance).div(netWorth).times(100).toNumber()}
-        label='defi.earnBalance'
-        color='green.500'
-        onClick={handleEarnBalanceClick}
-      />
-    </Flex>
-  )
-})
diff --git a/src/state/slices/preferencesSlice/preferencesSlice.ts b/src/state/slices/preferencesSlice/preferencesSlice.ts
index 64bed49d4f4..b276822c6b5 100644
--- a/src/state/slices/preferencesSlice/preferencesSlice.ts
+++ b/src/state/slices/preferencesSlice/preferencesSlice.ts
@@ -27,7 +27,6 @@ export type FeatureFlags = {
   SaversVaults: boolean
   SaversVaultsDeposit: boolean
   SaversVaultsWithdraw: boolean
-  DefiDashboard: boolean
   Cowswap: boolean
   ZrxSwap: boolean
   Mixpanel: boolean
@@ -116,7 +115,6 @@ const initialState: Preferences = {
     SaversVaults: getConfig().REACT_APP_FEATURE_SAVERS_VAULTS,
     SaversVaultsDeposit: getConfig().REACT_APP_FEATURE_SAVERS_VAULTS_DEPOSIT,
     SaversVaultsWithdraw: getConfig().REACT_APP_FEATURE_SAVERS_VAULTS_WITHDRAW,
-    DefiDashboard: getConfig().REACT_APP_FEATURE_DEFI_DASHBOARD,
     Cowswap: getConfig().REACT_APP_FEATURE_COWSWAP,
     ZrxSwap: getConfig().REACT_APP_FEATURE_ZRX_SWAP,
     LifiSwap: getConfig().REACT_APP_FEATURE_LIFI_SWAP,
diff --git a/src/test/mocks/store.ts b/src/test/mocks/store.ts
index 42497a8c5d4..cb9f8af6d1a 100644
--- a/src/test/mocks/store.ts
+++ b/src/test/mocks/store.ts
@@ -83,7 +83,6 @@ export const mockStore: ReduxState = {
       SaversVaults: false,
       SaversVaultsDeposit: false,
       SaversVaultsWithdraw: false,
-      DefiDashboard: false,
       Mixpanel: false,
       LifiSwap: false,
       DynamicLpAssets: false,