Merge pull request #25896 from brave/feat-wallet-move-activity-to-por…

…tfolio-view-in-panel

feat(wallet): Move Activity to Portfolio View in Panel

components/brave_wallet_ui/components/desktop/card-headers/activity_page_header.tsx

@@ -5,21 +5,9 @@
 
 import * as React from 'react'
 
-// Types
-import { WalletRoutes } from '../../../constants/types'
-
-// Selectors
-import { UISelectors } from '../../../common/selectors'
-
-// Components
-import { DefaultPanelHeader } from './default-panel-header'
-
 // Utils
 import { getLocale } from '../../../../common/locale'
 
-// Hooks
-import { useSafeUISelector } from '../../../common/hooks/use-safe-selector'
-
 // Styled Components
 import { SearchBarWrapper } from './activity_page_header.style'
 import { HeaderTitle } from './shared-card-headers.style'
@@ -34,15 +22,7 @@ export interface Props {
 export const ActivityPageHeader = (props: Props) => {
   const { searchValue, onSearchValueChange } = props
 
-  // UI Selectors (safe)
-  const isPanel = useSafeUISelector(UISelectors.isPanel)
-
-  return isPanel ? (
-    <DefaultPanelHeader
-      title={getLocale('braveWalletActivity')}
-      expandRoute={WalletRoutes.Activity}
-    />
-  ) : (
+  return (
     <Row
       padding='24px 0px'
       justifyContent='space-between'

components/brave_wallet_ui/components/desktop/views/portfolio/portfolio-overview.tsx

@@ -8,6 +8,12 @@ import { skipToken } from '@reduxjs/toolkit/query/react'
 import { useHistory, useLocation } from 'react-router'
 import { Route, Switch, Redirect } from 'react-router-dom'
 
+// Selectors
+import {
+  useSafeUISelector //
+} from '../../../../common/hooks/use-safe-selector'
+import { UISelectors } from '../../../../common/selectors'
+
 // hooks
 import {
   useBalancesFetcher //
@@ -55,7 +61,11 @@ import {
 import { makePortfolioAssetRoute } from '../../../../utils/routes-utils'
 
 // Options
-import { PortfolioNavOptions } from '../../../../options/nav-options'
+import {
+  PortfolioNavOptions,
+  PortfolioPanelNavOptions,
+  PortfolioPanelNavOptionsNoNFTsTab
+} from '../../../../options/nav-options'
 import {
   AccountsGroupByOption, //
   NoneGroupByOption
@@ -79,6 +89,9 @@ import {
 import {
   PortfolioFiltersModal //
 } from '../../popup-modals/filter-modals/portfolio-filters-modal'
+import {
+  TransactionsScreen //
+} from '../../../../page/screens/transactions/transactions-screen'
 
 // Styled Components
 import {
@@ -88,7 +101,8 @@ import {
   ControlsRow,
   BalanceAndButtonsWrapper,
   BalanceAndChangeWrapper,
-  BalanceAndLineChartWrapper
+  BalanceAndLineChartWrapper,
+  ActivityWrapper
 } from './style'
 import { Column, Row, HorizontalSpace } from '../../../shared/style'
 
@@ -116,6 +130,9 @@ export const PortfolioOverview = () => {
     WalletRoutes.PortfolioNFTCollection.replace(':collectionName', '')
   )
 
+  // UI Selectors (safe)
+  const isPanel = useSafeUISelector(UISelectors.isPanel)
+
   // custom hooks
   const {
     filteredOutPortfolioNetworkKeys,
@@ -577,10 +594,16 @@ export const PortfolioOverview = () => {
               />
             </ColumnReveal>
           </BalanceAndLineChartWrapper>
-          <ControlsRow controlsHidden={hidePortfolioNFTsTab}>
-            {!hidePortfolioNFTsTab && (
+          <ControlsRow controlsHidden={!isPanel && hidePortfolioNFTsTab}>
+            {!isPanel && hidePortfolioNFTsTab ? null : (
               <SegmentedControl
-                navOptions={PortfolioNavOptions}
+                navOptions={
+                  isPanel && hidePortfolioNFTsTab
+                    ? PortfolioPanelNavOptionsNoNFTsTab
+                    : isPanel
+                    ? PortfolioPanelNavOptions
+                    : PortfolioNavOptions
+                }
                 maxWidth='384px'
               />
             )}
@@ -614,6 +637,18 @@ export const PortfolioOverview = () => {
           />
         </Route>
 
+        <Route
+          path={WalletRoutes.PortfolioActivity}
+          exact
+        >
+          <ActivityWrapper
+            fullWidth={true}
+            padding='0px 16px'
+          >
+            <TransactionsScreen />
+          </ActivityWrapper>
+        </Route>
+
         <Route
           path={WalletRoutes.Portfolio}
           exact={true}

components/brave_wallet_ui/components/desktop/views/portfolio/style.ts

@@ -313,3 +313,7 @@ export const ContentWrapper = styled(Column)<{
 export const BalanceAndLineChartWrapper = styled(Column)`
   position: relative;
 `
+
+export const ActivityWrapper = styled(Column)`
+  background-color: ${leo.color.container.background};
+`

components/brave_wallet_ui/components/desktop/wallet-menus/wallet_settings_menu.tsx

@@ -218,7 +218,8 @@ export const WalletSettingsMenu = (props: Props) => {
       </Column>
 
       {(walletLocation === WalletRoutes.PortfolioNFTs ||
-        walletLocation === WalletRoutes.PortfolioAssets) && (
+        walletLocation === WalletRoutes.PortfolioAssets ||
+        (walletLocation === WalletRoutes.PortfolioActivity && isPanel)) && (
         <>
           <SectionLabel justifyContent='flex-start'>
             {getLocale('braveWalletPortfolioSettings')}

components/brave_wallet_ui/constants/types.ts

@@ -550,6 +550,7 @@ export enum WalletRoutes {
   PortfolioNFTCollection = '/crypto/portfolio/collections/:collectionName',
   PortfolioNFTAsset = '/crypto/portfolio/nfts/' + ':assetId',
   PortfolioAsset = '/crypto/portfolio/assets/' + ':assetId',
+  PortfolioActivity = '/crypto/portfolio/activity',
 
   // portfolio asset modals
   AddAssetModal = '/crypto/portfolio/add-asset',

components/brave_wallet_ui/options/nav-options.ts

@@ -84,6 +84,20 @@ const ActivityNavOption: NavOption = {
   route: WalletRoutes.Activity
 }
 
+const PortfolioActivityNavOption: NavOption = {
+  id: 'activity',
+  name: 'braveWalletActivity',
+  icon: 'activity',
+  route: WalletRoutes.PortfolioActivity
+}
+
+const AssetsNavOption: NavOption = {
+  id: 'assets',
+  name: 'braveWalletAccountsAssets',
+  icon: 'coins',
+  route: WalletRoutes.PortfolioAssets
+}
+
 const ExploreNavOption: NavOption = {
   id: 'explore',
   name: 'braveWalletTopNavExplore',
@@ -98,7 +112,6 @@ export const PanelNavOptions: NavOption[] = [
     icon: 'coins',
     route: WalletRoutes.Portfolio
   },
-  ActivityNavOption,
   {
     id: 'accounts',
     name: 'braveWalletTopNavAccounts',
@@ -132,12 +145,7 @@ export const AllNavOptions: NavOption[] = [
 ]
 
 export const PortfolioNavOptions: NavOption[] = [
-  {
-    id: 'assets',
-    name: 'braveWalletAccountsAssets',
-    icon: 'coins',
-    route: WalletRoutes.PortfolioAssets
-  },
+  AssetsNavOption,
   {
     id: 'nfts',
     name: 'braveWalletTopNavNFTS',
@@ -146,6 +154,16 @@ export const PortfolioNavOptions: NavOption[] = [
   }
 ]
 
+export const PortfolioPanelNavOptions: NavOption[] = [
+  ...PortfolioNavOptions,
+  PortfolioActivityNavOption
+]
+
+export const PortfolioPanelNavOptionsNoNFTsTab: NavOption[] = [
+  AssetsNavOption,
+  PortfolioActivityNavOption
+]
+
 export const ExploreNavOptions: NavOption[] = [
   {
     id: 'market',

components/brave_wallet_ui/page/screens/transactions/transactions-screen.tsx

@@ -58,12 +58,7 @@ import {
 } from '../../../components/desktop/popup-modals/transaction_details_modal/transaction_details_modal'
 
 // styles
-import {
-  Column,
-  LoadingIcon,
-  Text,
-  VerticalSpacer
-} from '../../../components/shared/style'
+import { Column, Text, VerticalSpacer } from '../../../components/shared/style'
 import {
   LoadingSkeletonStyleProps,
   Skeleton
@@ -168,6 +163,19 @@ export const TransactionsScreen: React.FC = () => {
     (tx) => tx.id === selectedTransactionId
   )
 
+  // Methods
+  const onClickTransaction = React.useCallback(
+    (
+      tx: Pick<BraveWallet.TransactionInfo | SerializableTransactionInfo, 'id'>
+    ): void => {
+      history.push(
+        window.location.pathname + window.location.search + '#' + tx.id
+      )
+    },
+    [history]
+  )
+
+  // Memos
   const combinedTokensList = React.useMemo(() => {
     return userTokensList.concat(knownTokensList)
   }, [userTokensList, knownTokensList])
@@ -205,50 +213,8 @@ export const TransactionsScreen: React.FC = () => {
     )
   }, [searchValue, searchableTransactions])
 
-  // methods
-  const onClickTransaction = (
-    tx: Pick<BraveWallet.TransactionInfo | SerializableTransactionInfo, 'id'>
-  ): void => {
-    history.push(
-      window.location.pathname + window.location.search + '#' + tx.id
-    )
-  }
-
-  // render
-  if (isLoadingAccounts || isLoadingTxsList) {
+  const transactionsView = React.useMemo(() => {
     return (
-      <WalletPageWrapper
-        wrapContentInBox={true}
-        useCardInPanel={true}
-        cardHeader={
-          <ActivityPageHeader
-            searchValue={searchValue}
-            onSearchValueChange={(e) => setSearchValue(e.target.value)}
-          />
-        }
-      >
-        <Column fullHeight>
-          <LoadingIcon
-            opacity={100}
-            size='50px'
-            color='interactive05'
-          />
-        </Column>
-      </WalletPageWrapper>
-    )
-  }
-
-  return (
-    <WalletPageWrapper
-      wrapContentInBox={true}
-      useCardInPanel={true}
-      cardHeader={
-        <ActivityPageHeader
-          searchValue={searchValue}
-          onSearchValueChange={(e) => setSearchValue(e.target.value)}
-        />
-      }
-    >
       <>
         {isPanel && (
           <Column
@@ -264,7 +230,7 @@ export const TransactionsScreen: React.FC = () => {
             <VerticalSpacer space={24} />
           </Column>
         )}
-        {isLoadingTxsList ? (
+        {isLoadingAccounts || isLoadingTxsList ? (
           <Column
             fullHeight
             fullWidth
@@ -323,6 +289,46 @@ export const TransactionsScreen: React.FC = () => {
           </>
         )}
       </>
+    )
+  }, [
+    filteredTransactions,
+    isLoadingTxsList,
+    isPanel,
+    onClickTransaction,
+    searchValue,
+    txsForSelectedChain,
+    isLoadingAccounts
+  ])
+
+  // render
+  if (isPanel) {
+    return (
+      <>
+        {transactionsView}
+        {selectedTransaction && (
+          <TransactionDetailsModal
+            onClose={() => {
+              // remove the transaction id from the URL hash
+              history.push(window.location.pathname + window.location.search)
+            }}
+            transaction={selectedTransaction}
+          />
+        )}
+      </>
+    )
+  }
+
+  return (
+    <WalletPageWrapper
+      wrapContentInBox={true}
+      cardHeader={
+        <ActivityPageHeader
+          searchValue={searchValue}
+          onSearchValueChange={(e) => setSearchValue(e.target.value)}
+        />
+      }
+    >
+      {transactionsView}
       {selectedTransaction && (
         <TransactionDetailsModal
           onClose={() => {

components/brave_wallet_ui/utils/routes-utils.ts

@@ -36,6 +36,7 @@ export function isPersistableSessionRoute(
     route.includes(WalletRoutes.PortfolioAssets) ||
     route.includes(WalletRoutes.PortfolioNFTs) ||
     route.includes(WalletRoutes.PortfolioNFTAsset) ||
+    route.includes(WalletRoutes.PortfolioActivity) ||
     route.includes(WalletRoutes.Market) ||
     route.includes(WalletRoutes.Explore)
   if (isPanel) {
@@ -268,7 +269,7 @@ export const makeSwapOrBridgeRoute = ({
 }
 
 export const makeTransactionDetailsRoute = (transactionId: string) => {
-  return WalletRoutes.Activity + `#${transactionId}`
+  return WalletRoutes.PortfolioActivity + `#${transactionId}`
 }
 
 export const makePortfolioAssetRoute = (isNft: boolean, assetId: string) => {