feat(wallet): Hide NFTs Tab Setting to Portfolio

brave · May 15, 2023 · 8100c53 · 8100c53
1 parent f01c20d
commit 8100c53
Show file tree

Hide file tree

Showing 12 changed files with 85 additions and 10 deletions.
diff --git a/components/brave_wallet/browser/brave_wallet_constants.h b/components/brave_wallet/browser/brave_wallet_constants.h
@@ -279,6 +279,7 @@ constexpr webui::LocalizedString kLocalizedStrings[] = {
      IDS_BRAVE_WALLET_WALLET_POPUP_HIDE_BALANCES},
     {"braveWalletWalletPopupShowGraph",
      IDS_BRAVE_WALLET_WALLET_POPUP_SHOW_GRAPH},
+    {"braveWalletWalletNFTsTab", IDS_BRAVE_WALLET_WALLET_NFTS_TAB},
     {"braveWalletBackupWarningText", IDS_BRAVE_WALLET_BACKUP_WARNING_TEXT},
     {"braveWalletBackupButton", IDS_BRAVE_WALLET_BACKUP_BUTTON},
     {"braveWalletDismissButton", IDS_BRAVE_WALLET_DISMISS_BUTTON},

diff --git a/components/brave_wallet_ui/common/actions/wallet_actions.ts b/components/brave_wallet_ui/common/actions/wallet_actions.ts
@@ -100,5 +100,6 @@ export const {
   setHidePortfolioGraph,
   setHidePortfolioBalances,
   setRemovedFungibleTokenIds,
-  setRemovedNonFungibleTokenIds
+  setRemovedNonFungibleTokenIds,
+  setHidePortfolioNFTsTab
 } = WalletActions
diff --git a/components/brave_wallet_ui/common/constants/local-storage-keys.ts b/components/brave_wallet_ui/common/constants/local-storage-keys.ts
@@ -6,6 +6,8 @@ export const LOCAL_STORAGE_KEYS = {
   IS_PORTFOLIO_OVERVIEW_GRAPH_HIDDEN: 'BRAVE_WALLET_IS_WALLET_PORTFOLIO_OVERVIEW_GRAPH_HIDDEN',
   HIDE_PORTFOLIO_BALANCES:
     'BRAVE_WALLET_HIDE_PORTFOLIO_BALANCES',
+  HIDE_PORTFOLIO_NFTS_TAB:
+    'BRAVE_WALLET_HIDE_PORTFOLIO_NFTS_TAB',
   PORTFOLIO_NETWORK_FILTER_OPTION: 'PORTFOLIO_NETWORK_FILTER_OPTION',
   PORTFOLIO_ACCOUNT_FILTER_OPTION: 'PORTFOLIO_ACCOUNT_FILTER_OPTION',
   PORTFOLIO_ASSET_FILTER_OPTION: 'PORTFOLIO_ASSET_FILTER_OPTION',

diff --git a/components/brave_wallet_ui/common/selectors/wallet-selectors.ts b/components/brave_wallet_ui/common/selectors/wallet-selectors.ts
@@ -33,6 +33,8 @@ export const hidePortfolioGraph = ({ wallet }: State) =>
   wallet.hidePortfolioGraph
 export const hidePortfolioBalances = ({ wallet }: State) =>
   wallet.hidePortfolioBalances
+export const hidePortfolioNFTsTab = ({ wallet }: State) =>
+  wallet.hidePortfolioNFTsTab
 
 // unsafe selectors (will cause re-render if not strictly equal "===") (objects and lists)
 export const accounts = ({ wallet }: State) => wallet.accounts

diff --git a/components/brave_wallet_ui/common/slices/wallet.slice.ts b/components/brave_wallet_ui/common/slices/wallet.slice.ts
@@ -170,7 +170,13 @@ const defaultState: WalletState = {
         .getItem(
           LOCAL_STORAGE_KEYS
             .USER_REMOVED_NON_FUNGIBLE_TOKEN_IDS
-        ) || '[]')
+        ) || '[]'),
+  hidePortfolioNFTsTab: window
+    .localStorage
+    .getItem(
+      LOCAL_STORAGE_KEYS
+        .HIDE_PORTFOLIO_NFTS_TAB
+    ) === 'true'
 }
 
 // async actions
@@ -515,6 +521,14 @@ export const createWalletSlice = (initialState: WalletState = defaultState) => {
         state.hidePortfolioBalances = payload
       },
 
+      setHidePortfolioNFTsTab
+        (
+          state: WalletState,
+          { payload }: PayloadAction<boolean>
+        ) {
+        state.hidePortfolioNFTsTab = payload
+      },
+
       setSitePermissions (state: WalletState, { payload }: PayloadAction<SitePermissionsPayloadType>) {
         state.connectedAccounts = payload.accounts
       },

diff --git a/components/brave_wallet_ui/components/desktop/views/portfolio/portfolio-overview.tsx b/components/brave_wallet_ui/components/desktop/views/portfolio/portfolio-overview.tsx
@@ -121,6 +121,8 @@ export const PortfolioOverview = ({ onToggleShowIpfsBanner }: Props) => {
     useSafeWalletSelector(WalletSelectors.hidePortfolioBalances)
   const portfolioPriceHistory =
     useUnsafeWalletSelector(WalletSelectors.portfolioPriceHistory)
+  const hidePortfolioNFTsTab =
+    useSafeWalletSelector(WalletSelectors.hidePortfolioNFTsTab)
 
 
   // queries
@@ -316,6 +318,11 @@ export const PortfolioOverview = ({ onToggleShowIpfsBanner }: Props) => {
       <Column
         fullWidth={true}
         justifyContent='flex-start'
+        margin={
+          hidePortfolioNFTsTab
+            ? '0px 0px 15px 0px'
+            : '0px'
+        }
       >
         <BalanceAndButtonsWrapper
           fullWidth={true}
@@ -390,12 +397,14 @@ export const PortfolioOverview = ({ onToggleShowIpfsBanner }: Props) => {
         </ColumnReveal>
       </Column>
 
-      <ControlsRow padding='24px 0px'>
-        <SegmentedControl
-          navOptions={PortfolioNavOptions}
-          width={384}
-        />
-      </ControlsRow>
+      {!hidePortfolioNFTsTab &&
+        <ControlsRow padding='24px 0px'>
+          <SegmentedControl
+            navOptions={PortfolioNavOptions}
+            width={384}
+          />
+        </ControlsRow>
+      }
 
       <Switch>
         <Route path={WalletRoutes.PortfolioAssets} exact>

diff --git a/components/brave_wallet_ui/components/desktop/wallet-menus/portfolio-overview-menu.tsx b/components/brave_wallet_ui/components/desktop/wallet-menus/portfolio-overview-menu.tsx
@@ -5,8 +5,12 @@
 
 import * as React from 'react'
 import { useDispatch } from 'react-redux'
+import { useHistory, useLocation } from 'react-router-dom'
 import Checkbox from '@brave/leo/react/checkbox'
 
+// Types
+import { WalletRoutes } from '../../../constants/types'
+
 // Actions
 import { WalletActions } from '../../../common/actions'
 
@@ -38,6 +42,9 @@ import {
 } from '../../shared/style'
 
 export const PortfolioOverviewMenu = () => {
+  // Routing
+  const history = useHistory()
+  const { pathname: walletLocation } = useLocation()
 
   // Redux
   const dispatch = useDispatch()
@@ -46,6 +53,8 @@ export const PortfolioOverviewMenu = () => {
     useSafeWalletSelector(WalletSelectors.hidePortfolioGraph)
   const hidePortfolioBalances =
     useSafeWalletSelector(WalletSelectors.hidePortfolioBalances)
+  const hidePortfolioNFTsTab =
+    useSafeWalletSelector(WalletSelectors.hidePortfolioNFTsTab)
 
   // Methods
   const onToggleHideGraph = React.useCallback(() => {
@@ -76,6 +85,23 @@ export const PortfolioOverviewMenu = () => {
         ))
   }, [hidePortfolioBalances])
 
+  const onToggleHideNFTsTab = React.useCallback(() => {
+    if (walletLocation.includes(WalletRoutes.PortfolioNFTs)) {
+      history.push(WalletRoutes.PortfolioAssets)
+    }
+    window.localStorage.setItem(
+      LOCAL_STORAGE_KEYS.HIDE_PORTFOLIO_NFTS_TAB,
+      hidePortfolioNFTsTab
+        ? 'false'
+        : 'true'
+    )
+    dispatch(
+      WalletActions
+        .setHidePortfolioNFTsTab(
+          !hidePortfolioNFTsTab
+        ))
+  }, [hidePortfolioNFTsTab, walletLocation])
+
   return (
     <StyledWrapper yPosition={42}>
       <CheckBoxRow onClick={onToggleHideBalances}>
@@ -105,6 +131,21 @@ export const PortfolioOverviewMenu = () => {
           size='normal'
         />
       </CheckBoxRow>
+
+      <CheckBoxRow onClick={onToggleHideNFTsTab}>
+        <Row>
+          <ButtonIcon name='nft' />
+          <PopupButtonText>
+            {getLocale('braveWalletWalletNFTsTab')}
+          </PopupButtonText>
+        </Row>
+        <Checkbox
+          checked={!hidePortfolioNFTsTab}
+          onChanged={onToggleHideNFTsTab}
+          size='normal'
+        />
+      </CheckBoxRow>
+
     </StyledWrapper>
   )
 }

diff --git a/components/brave_wallet_ui/constants/types.ts b/components/brave_wallet_ui/constants/types.ts
@@ -278,9 +278,10 @@ export interface WalletState {
   isNftPinningFeatureEnabled: boolean
   isPanelV2FeatureEnabled: boolean
   hidePortfolioGraph: boolean
-  hidePortfolioBalances: boolean,
+  hidePortfolioBalances: boolean
   removedFungibleTokenIds: string[]
   removedNonFungibleTokenIds: string[]
+  hidePortfolioNFTsTab: boolean
 }
 
 export interface PanelState {

diff --git a/components/brave_wallet_ui/stories/locale.ts b/components/brave_wallet_ui/stories/locale.ts
@@ -259,6 +259,7 @@ provideStrings({
   braveWalletWalletPopupConnectedSites: 'Connected sites',
   braveWalletWalletPopupHideBalances: 'Hide balances',
   braveWalletWalletPopupShowGraph: 'Show graph',
+  braveWalletWalletNFTsTab: 'NFTs tab',
 
   // Backup Warning
   braveWalletBackupWarningText: 'Back up your wallet now to protect your assets and ensure you never lose access.',

diff --git a/components/brave_wallet_ui/stories/mock-data/mock-wallet-state.ts b/components/brave_wallet_ui/stories/mock-data/mock-wallet-state.ts
@@ -315,5 +315,6 @@ export const mockWalletState: WalletState = {
   hidePortfolioBalances: false,
   hidePortfolioGraph: false,
   removedFungibleTokenIds: [],
-  removedNonFungibleTokenIds: []
+  removedNonFungibleTokenIds: [],
+  hidePortfolioNFTsTab: false
 }
diff --git a/components/resources/wallet_strings.grdp b/components/resources/wallet_strings.grdp
@@ -176,6 +176,7 @@
   <message name="IDS_BRAVE_WALLET_WALLET_POPUP_CONNECTED_SITES" desc="Wallet popup connected sites button">Connected sites</message>
   <message name="IDS_BRAVE_WALLET_WALLET_POPUP_HIDE_BALANCES" desc="Wallet popup hide balances checkbox">Hide balances</message>
   <message name="IDS_BRAVE_WALLET_WALLET_POPUP_SHOW_GRAPH" desc="Wallet popup show graph checkbox">Show graph</message>
+  <message name="IDS_BRAVE_WALLET_WALLET_NFTS_TAB" desc="Wallet popup show NFTs tab checkbox">NFTs tab</message>
   <message name="IDS_BRAVE_WALLET_BACKUP_WARNING_TEXT" desc="Backup warning banner description">Back up your wallet now to protect your assets and ensure you never lose access.</message>
   <message name="IDS_BRAVE_WALLET_BACKUP_BUTTON" desc="Backup warning banner back up button">Back up now</message>
   <message name="IDS_BRAVE_WALLET_DISMISS_BUTTON" desc="Backup warning banner dismiss button">Dismiss</message>

diff --git a/ui/webui/resources/BUILD.gn b/ui/webui/resources/BUILD.gn
@@ -194,6 +194,7 @@ leo_icons = [
   "arrow-small-up.svg",
   "arrow-small-down.svg",
   "info-outline.svg",
+  "nft.svg",
 ]
 
 generate_grd("icons_grdp") {