Skip to content

Commit 479828b

Browse files
muliswilliammuliswilliam
committed
Separated NFT form from token form
1 parent 6ab9568 commit 479828b

File tree

12 files changed

+456
-77
lines changed

12 files changed

+456
-77
lines changed

‎components/brave_wallet/browser/brave_wallet_constants.h

+6-1
Original file line numberDiff line numberDiff line change
@@ -937,7 +937,12 @@ constexpr webui::LocalizedString kLocalizedStrings[] = {
937937
{"braveWalletEnsOffchainDontShowAgain",
938938
IDS_BRAVE_WALLET_ENS_OFFCHAIN_DONT_SHOW_AGAIN},
939939
{"braveWalletEnsOffchainWarning", IDS_BRAVE_WALLET_ENS_OFFCHAIN_WARNING},
940-
};
940+
{"braveWalletNftsEmptyStateSearch",
941+
IDS_BRAVE_WALLET_NFTS_EMPTY_STATE_SEARCH_FILTER},
942+
{"braveWalletAddAssetTokenTabTitle",
943+
IDS_BRAVE_WALLET_ADD_ASSET_TOKEN_TAB_TITLE},
944+
{"braveWalletAddAssetNftTabTitle",
945+
IDS_BRAVE_WALLET_ADD_ASSET_NFT_TAB_TITLE}};
941946

942947
// 0x swap constants
943948
constexpr char kRopstenSwapBaseAPIURL[] = "https://ropsten.api.0x.org/";

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

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
// Copyright (c) 2022 The Brave Authors. All rights reserved.
2+
// This Source Code Form is subject to the terms of the Mozilla Public
3+
// License, v. 2.0. If a copy of the MPL was not distributed with this file,
4+
// you can obtain one at http://mozilla.org/MPL/2.0/.
5+
6+
import styled from 'styled-components'
7+
8+
export const AddAssetWrapper = styled.div`
9+
display: flex;
10+
flex-direction: column;
11+
justify-content: center;
12+
width: 100%;
13+
`

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

+80
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
// Copyright (c) 2022 The Brave Authors. All rights reserved.
2+
// This Source Code Form is subject to the terms of the Mozilla Public
3+
// License, v. 2.0. If a copy of the MPL was not distributed with this file,
4+
// you can obtain one at http://mozilla.org/MPL/2.0/.
5+
import * as React from 'react'
6+
7+
// types
8+
import { TabNavTypes } from '../../../constants/types'
9+
10+
// options
11+
import { CUSTOM_ASSET_NAV_OPTIONS } from '../../../options/add-custom-asset-nav-options'
12+
13+
// components
14+
import { TopTabNav } from '../index'
15+
import { AddCustomTokenForm } from '../../shared/add-custom-token-form/add-custom-token-form'
16+
import { AddNftForm } from '../../shared/add-custom-token-form/add-nft-form'
17+
18+
// styles
19+
import { AddAssetWrapper } from './add-asset.styles'
20+
21+
interface Props {
22+
contractAddress: string | undefined
23+
onHideForm: () => void
24+
}
25+
26+
export const AddAsset = (props: Props) => {
27+
const {
28+
contractAddress,
29+
onHideForm
30+
} = props
31+
const [tokenContractAddress, setTokenContractAddress] = React.useState<string>(contractAddress || '')
32+
const [selectedTab, setSelectedTab] = React.useState<TabNavTypes>('token')
33+
34+
const onSelectTab = React.useCallback((id: TabNavTypes) => {
35+
// Reset contractAddress when a user switches tabs
36+
// This will reset the form to avoid the tabs being auto selected based
37+
// on found token type
38+
if (tokenContractAddress !== '') setTokenContractAddress('')
39+
setSelectedTab(id)
40+
}, [tokenContractAddress])
41+
42+
const onNftAssetFound = React.useCallback((contractAddress: string) => {
43+
setTokenContractAddress(contractAddress)
44+
setSelectedTab('nft')
45+
}, [])
46+
47+
const onTokenFound = React.useCallback((contractAddress: string) => {
48+
setTokenContractAddress(contractAddress)
49+
setSelectedTab('token')
50+
}, [])
51+
52+
const onChangeContractAddress = React.useCallback((contractAddress: string) => {
53+
setTokenContractAddress(contractAddress)
54+
}, [])
55+
56+
return (
57+
<AddAssetWrapper>
58+
<TopTabNav
59+
tabList={CUSTOM_ASSET_NAV_OPTIONS}
60+
selectedTab={selectedTab}
61+
onSelectTab={onSelectTab}
62+
/>
63+
64+
{selectedTab === 'token'
65+
? <AddCustomTokenForm
66+
contractAddress={tokenContractAddress}
67+
onHideForm={onHideForm}
68+
onNftAssetFound={onNftAssetFound}
69+
onChangeContractAddress={onChangeContractAddress}
70+
/>
71+
: <AddNftForm
72+
contractAddress={tokenContractAddress}
73+
onHideForm={onHideForm}
74+
onTokenFound={onTokenFound}
75+
onChangeContractAddress={onChangeContractAddress}
76+
/>
77+
}
78+
</AddAssetWrapper>
79+
)
80+
}

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

+11-12
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,21 @@ import {
33
BraveWallet,
44
WalletState
55
} from '../../../../constants/types'
6+
7+
// utils
8+
import { getLocale } from '../../../../../common/locale'
9+
10+
// components
611
import {
712
PopupModal
813
} from '../..'
914
import { NavButton } from '../../../extension'
1015
import { SearchBar } from '../../../shared'
11-
import { getLocale } from '../../../../../common/locale'
16+
import { VirtualizedVisibleAssetsList } from './virtualized-visible-assets-list'
17+
import { AddAsset } from '../../add-asset/add-asset'
1218

1319
// Styled Components
1420
import {
15-
Divider,
1621
LoadIcon,
1722
LoadingWrapper,
1823
NoAssetButton,
@@ -25,8 +30,6 @@ import {
2530
// hooks
2631
import { useAssetManagement } from '../../../../common/hooks'
2732
import { useSelector } from 'react-redux'
28-
import { AddCustomTokenForm } from '../../../shared/add-custom-token-form/add-custom-token-form'
29-
import { VirtualizedVisibleAssetsList } from './virtualized-visible-assets-list'
3033

3134
export interface Props {
3235
onClose: () => void
@@ -223,10 +226,6 @@ const EditVisibleAssetsModal = ({ onClose }: Props) => {
223226
}
224227
onClose={onClose}
225228
>
226-
{showAddCustomToken &&
227-
<Divider />
228-
}
229-
230229
<StyledWrapper>
231230
{(filteredTokenList.length === 0 && searchValue === '') || isLoading ? (
232231
<LoadingWrapper>
@@ -235,10 +234,10 @@ const EditVisibleAssetsModal = ({ onClose }: Props) => {
235234
) : (
236235
<>
237236
{showAddCustomToken
238-
? <AddCustomTokenForm
239-
contractAddress={tokenContractAddress}
240-
onHideForm={toggleShowAddCustomToken}
241-
/>
237+
? <AddAsset
238+
contractAddress={tokenContractAddress}
239+
onHideForm={toggleShowAddCustomToken}
240+
/>
242241
: <>
243242
<SearchBar
244243
value={searchValue}

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export const StyledWrapper = styled.div`
1313
display: flex;
1414
flex-direction: column;
1515
align-items: center;
16-
justify-content: center;
16+
justify-content: flex-start;
1717
width: 100%;
1818
padding: 0px 15px 15px 15px;
1919
min-height: 320px;

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

+4-6
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
import * as React from 'react'
22
import {
33
TopTabNavObjectType,
4-
TopTabNavTypes,
5-
AddAccountNavTypes,
6-
AccountSettingsNavTypes
4+
TabNavTypes
75
} from '../../../constants/types'
86

97
// Styled Components
@@ -24,10 +22,10 @@ import {
2422

2523
export interface Props {
2624
tabList: TopTabNavObjectType[]
27-
selectedTab?: TopTabNavTypes | AddAccountNavTypes | AccountSettingsNavTypes
25+
selectedTab?: TabNavTypes
2826
hasMoreButtons?: boolean
2927
showMore?: boolean
30-
onSelectTab: (id: TopTabNavTypes | AddAccountNavTypes | AccountSettingsNavTypes) => void
28+
onSelectTab: (id: TabNavTypes) => void
3129
onClickSettings?: () => void
3230
onClickBackup?: () => void
3331
onClickMore?: () => void
@@ -45,7 +43,7 @@ function TopTabNav (props: Props) {
4543
onSelectTab
4644
} = props
4745

48-
const onClickSelectTab = (id: TopTabNavTypes | AddAccountNavTypes | AccountSettingsNavTypes) => () => {
46+
const onClickSelectTab = (id: TabNavTypes) => () => {
4947
onSelectTab(id)
5048
}
5149

0 commit comments

Comments
 (0)