feat(wallet): Add NFT Form

components/brave_wallet/browser/brave_wallet_constants.h

@@ -937,7 +937,12 @@ constexpr webui::LocalizedString kLocalizedStrings[] = {
     {"braveWalletEnsOffchainDontShowAgain",
      IDS_BRAVE_WALLET_ENS_OFFCHAIN_DONT_SHOW_AGAIN},
     {"braveWalletEnsOffchainWarning", IDS_BRAVE_WALLET_ENS_OFFCHAIN_WARNING},
-};
+    {"braveWalletNftsEmptyStateSearch",
+     IDS_BRAVE_WALLET_NFTS_EMPTY_STATE_SEARCH_FILTER},
+    {"braveWalletAddAssetTokenTabTitle",
+     IDS_BRAVE_WALLET_ADD_ASSET_TOKEN_TAB_TITLE},
+    {"braveWalletAddAssetNftTabTitle",
+     IDS_BRAVE_WALLET_ADD_ASSET_NFT_TAB_TITLE}};
 
 // 0x swap constants
 constexpr char kRopstenSwapBaseAPIURL[] = "https://ropsten.api.0x.org/";

components/brave_wallet_ui/components/desktop/add-asset/add-asset.styles.ts

@@ -0,0 +1,13 @@
+// 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 AddAssetWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 100%;
+`

components/brave_wallet_ui/components/desktop/add-asset/add-asset.tsx

@@ -0,0 +1,80 @@
+// 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'
+
+// types
+import { TabNavTypes } from '../../../constants/types'
+
+// options
+import { CUSTOM_ASSET_NAV_OPTIONS } from '../../../options/add-custom-asset-nav-options'
+
+// components
+import { TopTabNav } from '../index'
+import { AddCustomTokenForm } from '../../shared/add-custom-token-form/add-custom-token-form'
+import { AddNftForm } from '../../shared/add-custom-token-form/add-nft-form'
+
+// styles
+import { AddAssetWrapper } from './add-asset.styles'
+
+interface Props {
+  contractAddress: string | undefined
+  onHideForm: () => void
+}
+
+export const AddAsset = (props: Props) => {
+  const {
+    contractAddress,
+    onHideForm
+  } = props
+  const [tokenContractAddress, setTokenContractAddress] = React.useState<string>(contractAddress || '')
+  const [selectedTab, setSelectedTab] = React.useState<TabNavTypes>('token')
+
+  const onSelectTab = React.useCallback((id: TabNavTypes) => {
+    // Reset contractAddress when a user switches tabs
+    // This will reset the form to avoid the tabs being auto selected based
+    // on found token type
+    if (tokenContractAddress !== '') setTokenContractAddress('')
+    setSelectedTab(id)
+  }, [tokenContractAddress])
+
+  const onNftAssetFound = React.useCallback((contractAddress: string) => {
+    setTokenContractAddress(contractAddress)
+    setSelectedTab('nft')
+  }, [])
+
+  const onTokenFound = React.useCallback((contractAddress: string) => {
+    setTokenContractAddress(contractAddress)
+    setSelectedTab('token')
+  }, [])
+
+  const onChangeContractAddress = React.useCallback((contractAddress: string) => {
+    setTokenContractAddress(contractAddress)
+  }, [])
+
+  return (
+    <AddAssetWrapper>
+      <TopTabNav
+        tabList={CUSTOM_ASSET_NAV_OPTIONS}
+        selectedTab={selectedTab}
+        onSelectTab={onSelectTab}
+      />
+
+      {selectedTab === 'token'
+        ? <AddCustomTokenForm
+          contractAddress={tokenContractAddress}
+          onHideForm={onHideForm}
+          onNftAssetFound={onNftAssetFound}
+          onChangeContractAddress={onChangeContractAddress}
+        />
+        : <AddNftForm
+          contractAddress={tokenContractAddress}
+          onHideForm={onHideForm}
+          onTokenFound={onTokenFound}
+          onChangeContractAddress={onChangeContractAddress}
+        />
+      }
+    </AddAssetWrapper>
+  )
+}

components/brave_wallet_ui/components/desktop/popup-modals/edit-visible-assets-modal/index.tsx

@@ -3,16 +3,21 @@ import {
   BraveWallet,
   WalletState
 } from '../../../../constants/types'
+
+// utils
+import { getLocale } from '../../../../../common/locale'
+
+// components
 import {
   PopupModal
 } from '../..'
 import { NavButton } from '../../../extension'
 import { SearchBar } from '../../../shared'
-import { getLocale } from '../../../../../common/locale'
+import { VirtualizedVisibleAssetsList } from './virtualized-visible-assets-list'
+import { AddAsset } from '../../add-asset/add-asset'
 
 // Styled Components
 import {
-  Divider,
   LoadIcon,
   LoadingWrapper,
   NoAssetButton,
@@ -25,8 +30,6 @@ import {
 // hooks
 import { useAssetManagement } from '../../../../common/hooks'
 import { useSelector } from 'react-redux'
-import { AddCustomTokenForm } from '../../../shared/add-custom-token-form/add-custom-token-form'
-import { VirtualizedVisibleAssetsList } from './virtualized-visible-assets-list'
 
 export interface Props {
   onClose: () => void
@@ -223,10 +226,6 @@ const EditVisibleAssetsModal = ({ onClose }: Props) => {
       }
       onClose={onClose}
     >
-      {showAddCustomToken &&
-        <Divider />
-      }
-
       <StyledWrapper>
         {(filteredTokenList.length === 0 && searchValue === '') || isLoading ? (
           <LoadingWrapper>
@@ -235,10 +234,10 @@ const EditVisibleAssetsModal = ({ onClose }: Props) => {
         ) : (
           <>
             {showAddCustomToken
-              ? <AddCustomTokenForm
-                contractAddress={tokenContractAddress}
-                onHideForm={toggleShowAddCustomToken}
-              />
+              ? <AddAsset
+                  contractAddress={tokenContractAddress}
+                  onHideForm={toggleShowAddCustomToken}
+                />
               : <>
                 <SearchBar
                   value={searchValue}

components/brave_wallet_ui/components/desktop/popup-modals/edit-visible-assets-modal/style.ts

@@ -13,7 +13,7 @@ export const StyledWrapper = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
   width: 100%;
   padding: 0px 15px 15px 15px;
   min-height: 320px;

components/brave_wallet_ui/components/desktop/top-tab-nav/index.tsx

@@ -1,9 +1,7 @@
 import * as React from 'react'
 import {
   TopTabNavObjectType,
-  TopTabNavTypes,
-  AddAccountNavTypes,
-  AccountSettingsNavTypes
+  TabNavTypes
 } from '../../../constants/types'
 
 // Styled Components
@@ -24,10 +22,10 @@ import {
 
 export interface Props {
   tabList: TopTabNavObjectType[]
-  selectedTab?: TopTabNavTypes | AddAccountNavTypes | AccountSettingsNavTypes
+  selectedTab?: TabNavTypes
   hasMoreButtons?: boolean
   showMore?: boolean
-  onSelectTab: (id: TopTabNavTypes | AddAccountNavTypes | AccountSettingsNavTypes) => void
+  onSelectTab: (id: TabNavTypes) => void
   onClickSettings?: () => void
   onClickBackup?: () => void
   onClickMore?: () => void
@@ -45,7 +43,7 @@ function TopTabNav (props: Props) {
     onSelectTab
   } = props
 
-  const onClickSelectTab = (id: TopTabNavTypes | AddAccountNavTypes | AccountSettingsNavTypes) => () => {
+  const onClickSelectTab = (id: TabNavTypes) => () => {
     onSelectTab(id)
   }