diff --git a/components/brave_wallet_ui/components/desktop/card-headers/activity_page_header.tsx b/components/brave_wallet_ui/components/desktop/card-headers/activity_page_header.tsx
index c37505c7e815..3577f354b7f9 100644
--- a/components/brave_wallet_ui/components/desktop/card-headers/activity_page_header.tsx
+++ b/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 ? (
-
- ) : (
+ return (
{
WalletRoutes.PortfolioNFTCollection.replace(':collectionName', '')
)
+ // UI Selectors (safe)
+ const isPanel = useSafeUISelector(UISelectors.isPanel)
+
// custom hooks
const {
filteredOutPortfolioNetworkKeys,
@@ -577,10 +594,16 @@ export const PortfolioOverview = () => {
/>
-
- {!hidePortfolioNFTsTab && (
+
+ {!isPanel && hidePortfolioNFTsTab ? null : (
)}
@@ -614,6 +637,18 @@ export const PortfolioOverview = () => {
/>
+
+
+
+
+
+
{
{(walletLocation === WalletRoutes.PortfolioNFTs ||
- walletLocation === WalletRoutes.PortfolioAssets) && (
+ walletLocation === WalletRoutes.PortfolioAssets ||
+ (walletLocation === WalletRoutes.PortfolioActivity && isPanel)) && (
<>
{getLocale('braveWalletPortfolioSettings')}
diff --git a/components/brave_wallet_ui/constants/types.ts b/components/brave_wallet_ui/constants/types.ts
index 7492fd7c5aac..1da3234d5908 100644
--- a/components/brave_wallet_ui/constants/types.ts
+++ b/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',
diff --git a/components/brave_wallet_ui/options/nav-options.ts b/components/brave_wallet_ui/options/nav-options.ts
index 7fbcee95e2c2..28f58f13aee6 100644
--- a/components/brave_wallet_ui/options/nav-options.ts
+++ b/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',
diff --git a/components/brave_wallet_ui/page/screens/transactions/transactions-screen.tsx b/components/brave_wallet_ui/page/screens/transactions/transactions-screen.tsx
index c2a6ec9d38b5..bb1050d0a2e7 100644
--- a/components/brave_wallet_ui/page/screens/transactions/transactions-screen.tsx
+++ b/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
+ ): 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
- ): void => {
- history.push(
- window.location.pathname + window.location.search + '#' + tx.id
- )
- }
-
- // render
- if (isLoadingAccounts || isLoadingTxsList) {
+ const transactionsView = React.useMemo(() => {
return (
- setSearchValue(e.target.value)}
- />
- }
- >
-
-
-
-
- )
- }
-
- return (
- setSearchValue(e.target.value)}
- />
- }
- >
<>
{isPanel && (
{
)}
- {isLoadingTxsList ? (
+ {isLoadingAccounts || isLoadingTxsList ? (
{
>
)}
>
+ )
+ }, [
+ filteredTransactions,
+ isLoadingTxsList,
+ isPanel,
+ onClickTransaction,
+ searchValue,
+ txsForSelectedChain,
+ isLoadingAccounts
+ ])
+
+ // render
+ if (isPanel) {
+ return (
+ <>
+ {transactionsView}
+ {selectedTransaction && (
+ {
+ // remove the transaction id from the URL hash
+ history.push(window.location.pathname + window.location.search)
+ }}
+ transaction={selectedTransaction}
+ />
+ )}
+ >
+ )
+ }
+
+ return (
+ setSearchValue(e.target.value)}
+ />
+ }
+ >
+ {transactionsView}
{selectedTransaction && (
{
diff --git a/components/brave_wallet_ui/utils/routes-utils.ts b/components/brave_wallet_ui/utils/routes-utils.ts
index c1f13aec8692..d5e8d47a3775 100644
--- a/components/brave_wallet_ui/utils/routes-utils.ts
+++ b/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) => {