feat(wallet): Add NFT Tab

components/brave_wallet/browser/brave_wallet_constants.h

@@ -878,7 +878,10 @@ constexpr webui::LocalizedString kLocalizedStrings[] = {
     {"braveWalletConfirmHidingToken", IDS_BRAVE_WALLET_CONFIRM_HIDING_TOKEN},
     {"braveWalletCancelHidingToken", IDS_BRAVE_WALLET_CANCEL_HIDING_TOKEN},
     {"braveWalletRequestFeatureButtonText",
-     IDS_BRAVE_WALLET_REQUEST_FEATURE_BUTTON_TEXT}};
+     IDS_BRAVE_WALLET_REQUEST_FEATURE_BUTTON_TEXT},
+    {"braveWalletNftsEmptyState", IDS_BRAVE_WALLET_NFTS_EMPTY_STATE},
+    {"braveWalletNftsEmptyStateSearch",
+     IDS_BRAVE_WALLET_NFTS_EMPTY_STATE_SEARCH_FILTER}};
 
 // 0x swap constants
 constexpr char kRopstenSwapBaseAPIURL[] = "https://ropsten.api.0x.org/";

components/brave_wallet_ui/components/desktop/views/crypto/index.tsx

@@ -29,6 +29,7 @@ import { MarketView } from '../market'
 import { Accounts } from '../accounts/accounts'
 import { Account } from '../accounts/account'
 import { AddAccountModal } from '../../popup-modals/add-account-modal/add-account-modal'
+import { NftView } from '../nfts/nft-view'
 
 interface ParamsType {
   category?: TopTabNavTypes
@@ -231,6 +232,11 @@ const CryptoView = (props: Props) => {
           />
         </Route>
 
+        <Route path={WalletRoutes.Nfts} exact={true}>
+          {nav}
+          <NftView />
+        </Route>
+
         <Redirect to={sessionRoute || WalletRoutes.Portfolio} />
 
       </Switch>

components/brave_wallet_ui/components/desktop/views/nfts/components/nfts.styles.tsx

@@ -0,0 +1,39 @@
+// Copyright (c) 2022 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this file,
+// you can obtain one at http://mozilla.org/MPL/2.0/.
+import styled from 'styled-components'
+
+export const FilterTokenRow = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-direction: row;
+  width: 100%;
+`
+
+export const NftGrid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  grid-gap: 25px;
+  box-sizing: border-box;
+  width: 100%;
+  padding-top: 10px;
+  @media screen and (max-width: 1350px) {
+    grid-template-columns: repeat(4, 1fr);
+  }
+  @media screen and (max-width: 1150px) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  @media screen and (max-width: 950px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+`
+
+export const EmptyStateText = styled.div`
+  text-align: center;
+  padding: 30px 0;
+  color: ${p => p.theme.color.text03};
+  font-size: 14px;
+  font-family: Poppins;
+`

components/brave_wallet_ui/components/desktop/views/nfts/components/nfts.tsx

@@ -0,0 +1,109 @@
+// Copyright (c) 2022 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this file,
+// you can obtain one at http://mozilla.org/MPL/2.0/.
+import * as React from 'react'
+import { useHistory } from 'react-router-dom'
+import { useDispatch } from 'react-redux'
+
+// types
+import {
+  BraveWallet,
+  WalletRoutes
+} from '../../../../../constants/types'
+
+// utils
+import { getLocale } from '$web-common/locale'
+
+// components
+import SearchBar from '../../../../shared/search-bar'
+import NetworkFilterSelector from '../../../network-filter-selector'
+
+// styles
+import {
+  EmptyStateText,
+  FilterTokenRow,
+  NftGrid
+} from './nfts.styles'
+import { NFTGridViewItem } from '../../portfolio/components/nft-grid-view/nft-grid-view-item'
+import { WalletPageActions } from '../../../../../page/actions'
+import Amount from '../../../../../utils/amount'
+
+interface Props {
+  networks: BraveWallet.NetworkInfo[]
+  nftList: BraveWallet.BlockchainToken[]
+}
+
+export const Nfts = (props: Props) => {
+  const {
+    networks,
+    nftList
+  } = props
+
+  // state
+  const [searchValue, setSearchValue] = React.useState<string>('')
+
+  // hooks
+  const history = useHistory()
+  const dispatch = useDispatch()
+
+  // methods
+  const onSearchValueChange = React.useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchValue(event.target.value)
+  }, [])
+
+  const onSelectAsset = React.useCallback((asset: BraveWallet.BlockchainToken) => {
+    history.push(`${WalletRoutes.Portfolio}/${asset.contractAddress}/${asset.tokenId}`)
+    // reset nft metadata
+    dispatch(WalletPageActions.updateNFTMetadata(undefined))
+  }, [dispatch])
+
+  // memos
+  const filteredNfts = React.useMemo(() => {
+    if (searchValue === '') {
+      return nftList
+    }
+
+    return nftList.filter((item) => {
+      const tokenId = new Amount(item.tokenId).toNumber().toString()
+
+      return (
+        item.name.toLowerCase() === searchValue.toLowerCase() ||
+        item.name.toLowerCase().includes(searchValue.toLowerCase()) ||
+        item.symbol.toLocaleLowerCase() === searchValue.toLowerCase() ||
+        item.symbol.toLowerCase().includes(searchValue.toLowerCase()) ||
+        tokenId === searchValue.toLowerCase() ||
+        tokenId.includes(searchValue.toLowerCase())
+      )
+    })
+  }, [searchValue, nftList])
+
+  const emptyStateMessage = React.useMemo(() => {
+    return getLocale(searchValue === '' ? 'braveWalletNftsEmptyState' : 'braveWalletNftsEmptyStateSearch')
+  }, [searchValue])
+
+  return (
+    <>
+      <FilterTokenRow>
+        <SearchBar
+          placeholder={getLocale('braveWalletSearchText')}
+          action={onSearchValueChange}
+          value={searchValue}
+        />
+        <NetworkFilterSelector networkListSubset={networks} />
+      </FilterTokenRow>
+      {filteredNfts.length === 0
+        ? <EmptyStateText>{emptyStateMessage}</EmptyStateText>
+        : <NftGrid>
+          {filteredNfts.map(nft => (
+            <NFTGridViewItem
+              key={`${nft.tokenId}-${nft.contractAddress}`}
+              token={{ asset: nft, assetBalance: '' }}
+              onSelectAsset={() => onSelectAsset(nft)}
+            />
+          ))}
+        </NftGrid>
+      }
+    </>
+  )
+}

components/brave_wallet_ui/components/desktop/views/nfts/nft-view.tsx

@@ -0,0 +1,39 @@
+// Copyright (c) 2022 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this file,
+// you can obtain one at http://mozilla.org/MPL/2.0/.
+
+import * as React from 'react'
+import { useSelector } from 'react-redux'
+
+// types
+import {
+  SupportedTestNetworks,
+  WalletState
+} from '../../../../constants/types'
+
+// components
+import { Nfts } from './components/nfts'
+import { AllNetworksOption } from '../../../../options/network-filter-options'
+
+export const NftView = () => {
+  // redux
+  const networkList = useSelector(({ wallet }: { wallet: WalletState }) => wallet.networkList)
+  const userVisibleTokensInfo = useSelector(({ wallet }: { wallet: WalletState}) => wallet.userVisibleTokensInfo)
+  const selectedNetworkFilter = useSelector(({ wallet }: { wallet: WalletState }) => wallet.selectedNetworkFilter)
+
+  const fungibleTokens = React.useMemo(() => {
+    if (selectedNetworkFilter.chainId === AllNetworksOption.chainId) {
+      return userVisibleTokensInfo.filter((token) => !SupportedTestNetworks.includes(token.chainId) && token.isErc721)
+    }
+
+    return userVisibleTokensInfo.filter(token => token.chainId === selectedNetworkFilter.chainId && token.isErc721)
+  }, [userVisibleTokensInfo, selectedNetworkFilter])
+
+  return (
+    <Nfts
+      networks={networkList}
+      nftList={fungibleTokens}
+    />
+  )
+}

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

@@ -356,11 +356,7 @@ export const PortfolioAsset = (props: Props) => {
     dispatch(WalletPageActions.selectAsset({ asset: undefined, timeFrame: selectedTimeline }))
     dispatch(WalletPageActions.selectCoinMarket(undefined))
     setfilteredAssetList(userAssetList)
-    if (isShowingMarketData) {
-      history.push(WalletRoutes.Market)
-    } else {
-      history.push(WalletRoutes.Portfolio)
-    }
+    history.goBack()
   }, [
     userAssetList,
     selectedTimeline

components/brave_wallet_ui/constants/types.ts

@@ -125,6 +125,7 @@ export type NavTypes =
 export type TopTabNavTypes =
   | 'portfolio'
   | 'apps'
+  | 'nfts'
   | 'accounts'
   | 'market'
 
@@ -630,6 +631,9 @@ export enum WalletRoutes {
   FundWalletPage = '/crypto/fund-wallet',
   DepositFundsPage = '/crypto/deposit-funds',
 
+  // NFTs
+  Nfts = '/crypto/nfts',
+
   // market
   Market = '/crypto/market',
   MarketSub = '/crypto/market/:id?',

components/brave_wallet_ui/options/top-nav-options.ts

@@ -15,6 +15,10 @@ export const TopNavOptions = (): TopTabNavObjectType[] => [
     id: 'market',
     name: getLocale('braveWalletTopNavMarket')
   },
+  {
+    id: 'nfts',
+    name: getLocale('braveWalletTopNavNFTS')
+  },
   {
     id: 'accounts',
     name: getLocale('braveWalletTopNavAccounts')

components/brave_wallet_ui/page/container.tsx

@@ -140,7 +140,8 @@ export const Container = () => {
     (
       walletLocation.includes(WalletRoutes.Portfolio) ||
       walletLocation.includes(WalletRoutes.Accounts) ||
-      walletLocation.includes(WalletRoutes.Market)
+      walletLocation.includes(WalletRoutes.Market) ||
+      walletLocation.includes(WalletRoutes.Nfts)
     )
 
   // effects
@@ -159,7 +160,9 @@ export const Container = () => {
       walletLocation.includes(WalletRoutes.Backup) ||
       walletLocation.includes(WalletRoutes.DepositFundsPage) ||
       walletLocation.includes(WalletRoutes.FundWalletPage) ||
-      walletLocation.includes(WalletRoutes.Portfolio)
+      walletLocation.includes(WalletRoutes.Portfolio) ||
+      walletLocation.includes(WalletRoutes.Market) ||
+      walletLocation.includes(WalletRoutes.Nfts)
     ) {
       setSessionRoute(walletLocation)
     }

components/brave_wallet_ui/stories/locale.ts

@@ -740,5 +740,10 @@ provideStrings({
 
   // ASCII toggles
   braveWalletViewEncodedMessage: 'View original message',
-  braveWalletViewDecodedMessage: 'View message in ASCII encoding'
+  braveWalletViewDecodedMessage: 'View message in ASCII encoding',
+
+  // NFTs Tab
+  braveWalletNftsEmptyState: 'No NFTs found in your wallet. You can add NFTs by clicking the "+ Visible assets" button at the bottom of' +
+    ' the "Portfolio" tab',
+  braveWalletNftsEmptyStateSearch: 'No NFTs matching search or filter found'
 })

components/resources/wallet_strings.grdp

@@ -61,7 +61,7 @@
   <message name="IDS_BRAVE_WALLET_TOP_NAV_PORTFOLIO" desc="Portfolio top nav button">Portfolio</message>
   <message name="IDS_BRAVE_WALLET_TOP_TAB_PRICES" desc="Prices top nav button">Prices</message>
   <message name="IDS_BRAVE_WALLET_TOP_TAB_APPS" desc="Apps top nave button">Apps</message>
-  <message name="IDS_BRAVE_WALLET_TOP_NAV_N_F_T_S" desc="NFTs top nave button">NFTs</message>
+  <message name="IDS_BRAVE_WALLET_TOP_NAV_N_F_T_S" desc="NFTs top nav button">NFTs</message>
   <message name="IDS_BRAVE_WALLET_TOP_NAV_ACCOUNTS" desc="Accounts top nav button">Accounts</message>
   <message name="IDS_BRAVE_WALLET_TOP_NAV_MARKET" desc="Accounts top nav button">Market</message>
   <message name="IDS_BRAVE_WALLET_CHART_LIVE" desc="Chart control bar 1H button">1H</message>
@@ -635,4 +635,6 @@
   <message name="IDS_BRAVE_WALLET_REMOVE_ACCOUNT_MODAL_TITLE" desc="Title prompt to confirm removal of a wallet account">Are you sure you want to remove "<ph name="ACCOUNT_NAME">$1<ex>Eth Account 1</ex></ph>"?</message>
   <message name="IDS_BRAVE_WALLET_REQUEST_FEATURE_BUTTON_TEXT" desc="Text displayed in request feature button">Request feature</message>
   <message name="IDS_BRAVE_WALLET_RECOVERY_PHRASE_LENGTH_ERROR" desc="Error message for when a supplied recovery phrase has an invalid number of words">Recovery phrase must be 12, 15, 18, 21, or 24 words long</message>
+  <message name="IDS_BRAVE_WALLET_NFTS_EMPTY_STATE" desc="Message displayed when user has no NFTs">No NFTs found in your wallet. You can add NFTs by clicking the "+ Visible assets" button at the bottom of the "Portfolio" tab</message>
+  <message name="IDS_BRAVE_WALLET_NFTS_EMPTY_STATE_SEARCH_FILTER" desc="Message displayed no NFTs match search criteria">No NFTs matching search or filter found</message>
 </grit-part>