Added Plus Button to Select Asset Views

This commit is contained in:
Douglas Daniel
2021-12-14 08:54:07 -07:00
parent 5a17c95445
commit 8ce14fd8c0
19 changed files with 120 additions and 38 deletions
@@ -23,6 +23,7 @@ export interface Props {
networkList: EthereumChain[]
assetOptions: AccountAssetOptionType[]
selectedNetwork: EthereumChain
onAddAsset: () => void
onClickSelectAccount: (account: UserAccountType) => () => void
onClickSelectNetwork: (network: EthereumChain) => () => void
onSelectedAsset: (account: AccountAssetOptionType) => () => void
@@ -37,6 +38,7 @@ function SelectHeader (props: Props) {
networkList,
assetOptions,
selectedNetwork,
onAddAsset,
onClickSelectAccount,
goBack,
onSelectedAsset,
@@ -55,6 +57,7 @@ function SelectHeader (props: Props) {
}
{selectedView === 'assets' &&
<SelectAsset
onAddAsset={onAddAsset}
assets={assetOptions}
onSelectAsset={onSelectedAsset}
onBack={goBack}
@@ -41,7 +41,7 @@ function SelectAccountWithHeader (props: Props) {
<Header
title={getLocale('braveWalletSelectAccount')}
onBack={onBack}
onAddAccount={onAddAccount}
onClickAdd={onAddAccount}
hasAddButton={hasAddButton}
/>
<SearchBar placeholder={getLocale('braveWalletSearchAccount')} action={filterAccountList} />
@@ -16,12 +16,18 @@ import {
export interface Props {
assets: AccountAssetOptionType[]
onAddAsset: () => void
onSelectAsset: (asset: AccountAssetOptionType) => () => void
onBack: () => void
}
function SelectAsset (props: Props) {
const { assets, onBack, onSelectAsset } = props
const {
assets,
onAddAsset,
onBack,
onSelectAsset
} = props
const fuse = React.useMemo(() => new Fuse(assets, {
shouldSort: true,
@@ -51,7 +57,12 @@ function SelectAsset (props: Props) {
return (
<SelectWrapper>
<Header title={getLocale('braveWalletSelectAsset')} onBack={onBack} />
<Header
title={getLocale('braveWalletSelectAsset')}
onBack={onBack}
hasAddButton={true}
onClickAdd={onAddAsset}
/>
<SearchBar placeholder={getLocale('braveWalletSearchAsset')} action={filterAssetList} />
<SelectScrollSearchContainer>
{
@@ -13,18 +13,18 @@ import {
export interface Props {
title: string
hasAddButton?: boolean
onAddAccount?: () => void
onClickAdd?: () => void
onBack: () => void
}
function SelectHeader (props: Props) {
const { onBack, title, hasAddButton, onAddAccount } = props
const { onBack, title, hasAddButton, onClickAdd } = props
return (
<Header>
<Button onClick={onBack}><BackIcon /></Button>
<HeaderText>{title}</HeaderText>
{hasAddButton ? (
<Button onClick={onAddAccount}>
<Button onClick={onClickAdd}>
<PlusIcon />
</Button>
) : (
@@ -24,8 +24,9 @@ function SelectNetworkWithHeader (props: Props) {
<SelectWrapper>
<Header
title={getLocale('braveWalletSelectNetwork')}
onBack={onBack} hasAddButton={hasAddButton}
onAddAccount={onAddNetwork}/>
onBack={onBack}
hasAddButton={hasAddButton}
onClickAdd={onAddNetwork} />
<SelectScrollContainer>
<SelectNetwork
selectedNetwork={selectedNetwork}
@@ -26,6 +26,7 @@ export interface Props {
onSelectAccount: (account: UserAccountType) => void
onSetBuyAmount: (value: string) => void
onAddNetwork: () => void
onAddAsset: () => void
}
function BuyTab (props: Props) {
@@ -38,6 +39,7 @@ function BuyTab (props: Props) {
showHeader,
assetOptions,
defaultCurrencies,
onAddAsset,
onSubmit,
onSelectNetwork,
onSelectAccount,
@@ -113,6 +115,7 @@ function BuyTab (props: Props) {
onSelectedAsset={onSelectedAsset}
selectedView={buyView}
onAddNetwork={onAddNetwork}
onAddAsset={onAddAsset}
/>
}
</>
@@ -33,6 +33,7 @@ export interface Props {
onSelectPresetAmount: (percent: number) => void
networkList: EthereumChain[]
onAddNetwork: () => void
onAddAsset: () => void
}
function SendTab (props: Props) {
@@ -56,7 +57,8 @@ function SendTab (props: Props) {
onSetSendAmount,
onSetToAddressOrUrl,
onSelectPresetAmount,
onAddNetwork
onAddNetwork,
onAddAsset
} = props
const [sendView, setSendView] = React.useState<BuySendSwapViewTypes>('send')
@@ -132,6 +134,7 @@ function SendTab (props: Props) {
onSelectedAsset={onSelectedAsset}
selectedView={sendView}
onAddNetwork={onAddNetwork}
onAddAsset={onAddAsset}
/>
}
</>
@@ -51,6 +51,7 @@ export interface Props {
onSelectPresetAmount: (percent: number) => void
onQuoteRefresh: () => void
onAddNetwork: () => void
onAddAsset: () => void
}
function SwapTab (props: Props) {
@@ -88,7 +89,8 @@ function SwapTab (props: Props) {
onSetToAmount,
onSelectPresetAmount,
onQuoteRefresh,
onAddNetwork
onAddNetwork,
onAddAsset
} = props
const [swapView, setSwapView] = React.useState<BuySendSwapViewTypes>('swap')
const [isSelectingAsset, setIsSelectingAsset] = React.useState<ToOrFromType>('from')
@@ -189,6 +191,7 @@ function SwapTab (props: Props) {
onSelectedAsset={onSelectAsset}
selectedView={swapView}
onAddNetwork={onAddNetwork}
onAddAsset={onAddAsset}
/>
}
</>
@@ -45,7 +45,6 @@ export interface Props {
onShowAddModal: () => void
onHideAddModal: () => void
onSelectNetwork: (network: EthereumChain) => void
fetchFullTokenList: () => void
onRemoveAccount: (address: string, hardware: boolean) => void
onViewPrivateKey: (address: string, isDefault: boolean) => void
onDoneViewingPrivateKey: () => void
@@ -84,6 +83,8 @@ export interface Props {
onRetryTransaction: (transaction: TransactionInfo) => void
onSpeedupTransaction: (transaction: TransactionInfo) => void
onCancelTransaction: (transaction: TransactionInfo) => void
onShowVisibleAssetsModal: (showModal: boolean) => void
showVisibleAssetsModal: boolean
}
const CryptoView = (props: Props) => {
@@ -99,7 +100,6 @@ const CryptoView = (props: Props) => {
getBalance,
onImportAccount,
onUpdateAccountName,
fetchFullTokenList,
onSelectNetwork,
onRemoveAccount,
onViewPrivateKey,
@@ -112,6 +112,8 @@ const CryptoView = (props: Props) => {
onOpenWalletSettings,
onShowAddModal,
onHideAddModal,
onShowVisibleAssetsModal,
showVisibleAssetsModal,
defaultCurrencies,
defaultWallet,
addUserAssetError,
@@ -156,9 +158,13 @@ const CryptoView = (props: Props) => {
React.useEffect(() => {
if (category === 'portfolio') {
if (id !== undefined) {
const asset = userVisibleTokensInfo.find((token) => token.symbol.toLowerCase() === id?.toLowerCase())
onSelectAsset(asset)
setHideNav(true)
if (id === 'add-asset') {
onShowVisibleAssetsModal(true)
} else {
const asset = userVisibleTokensInfo.find((token) => token.symbol.toLowerCase() === id?.toLowerCase())
onSelectAsset(asset)
setHideNav(true)
}
} else {
onSelectAsset(undefined)
setHideNav(false)
@@ -274,7 +280,6 @@ const CryptoView = (props: Props) => {
onSelectAccount={onSelectAccount}
onClickAddAccount={onClickAddAccount}
onSelectNetwork={onSelectNetwork}
fetchFullTokenList={fetchFullTokenList}
onAddUserAsset={onAddUserAsset}
onSetUserAssetVisible={onSetUserAssetVisible}
onRemoveUserAsset={onRemoveUserAsset}
@@ -292,6 +297,8 @@ const CryptoView = (props: Props) => {
isFetchingPortfolioPriceHistory={isFetchingPortfolioPriceHistory}
transactionSpotPrices={transactionSpotPrices}
addUserAssetError={addUserAssetError}
showVisibleAssetsModal={showVisibleAssetsModal}
onShowVisibleAssetsModal={onShowVisibleAssetsModal}
onRetryTransaction={onRetryTransaction}
onSpeedupTransaction={onSpeedupTransaction}
onCancelTransaction={onCancelTransaction}
@@ -79,11 +79,12 @@ export interface Props {
onSelectAsset: (asset: ERCToken | undefined) => void
onSelectAccount: (account: WalletAccountType) => void
onClickAddAccount: () => void
fetchFullTokenList: () => void
onSelectNetwork: (network: EthereumChain) => void
onAddUserAsset: (token: ERCToken) => void
onSetUserAssetVisible: (token: ERCToken, isVisible: boolean) => void
onShowVisibleAssetsModal: (showModal: boolean) => void
onRemoveUserAsset: (token: ERCToken) => void
showVisibleAssetsModal: boolean
defaultCurrencies: DefaultCurrencies
addUserAssetError: boolean
selectedNetwork: EthereumChain
@@ -117,10 +118,11 @@ const Portfolio = (props: Props) => {
onSelectAccount,
onClickAddAccount,
onSelectNetwork,
fetchFullTokenList,
onAddUserAsset,
onSetUserAssetVisible,
onRemoveUserAsset,
onShowVisibleAssetsModal,
showVisibleAssetsModal,
defaultCurrencies,
addUserAssetError,
userVisibleTokensInfo,
@@ -151,7 +153,6 @@ const Portfolio = (props: Props) => {
const [hoverBalance, setHoverBalance] = React.useState<string>()
const [hoverPrice, setHoverPrice] = React.useState<string>()
const [showNetworkDropdown, setShowNetworkDropdown] = React.useState<boolean>(false)
const [showVisibleAssetsModal, setShowVisibleAssetsModal] = React.useState<boolean>(false)
const parseTransaction = useTransactionParser(selectedNetwork, accounts, transactionSpotPrices, userVisibleTokensInfo)
const toggleShowNetworkDropdown = () => {
@@ -229,10 +230,7 @@ const Portfolio = (props: Props) => {
}
const toggleShowVisibleAssetModal = () => {
if (fullAssetList.length === 0) {
fetchFullTokenList()
}
setShowVisibleAssetsModal(!showVisibleAssetsModal)
onShowVisibleAssetsModal(!showVisibleAssetsModal)
}
const getFiatBalance = (account: WalletAccountType, asset: ERCToken) => {
@@ -513,6 +513,7 @@ export enum WalletRoutes {
PortfolioSub = '/crypto/portfolio/:id?',
Accounts = '/crypto/accounts',
AddAccountModal = '/crypto/accounts/add-account',
AddAssetModal = '/crypto/portfolio/add-asset',
AccountsSub = '/crypto/accounts/:id?',
Backup = '/crypto/backup-wallet',
CryptoPage = '/crypto/:category/:id?'
+17 -1
View File
@@ -118,6 +118,7 @@ function Container (props: Props) {
const [inputValue, setInputValue] = React.useState<string>('')
const [buyAmount, setBuyAmount] = React.useState('')
const [selectedWidgetTab, setSelectedWidgetTab] = React.useState<BuySendSwapTypes>('buy')
const [showVisibleAssetsModal, setShowVisibleAssetsModal] = React.useState<boolean>(false)
const {
tokenOptions,
@@ -463,6 +464,18 @@ function Container (props: Props) {
props.walletActions.expandWalletNetworks()
}
const onShowVisibleAssetsModal = (showModal: boolean) => {
if (showModal) {
if (tokenOptions.length === 0) {
fetchFullTokenList()
}
history.push(`${WalletRoutes.AddAssetModal}`)
} else {
history.push(`${WalletRoutes.Portfolio}`)
}
setShowVisibleAssetsModal(showModal)
}
React.useEffect(() => {
// Creates a list of Accepted Portfolio Routes
const acceptedPortfolioRoutes = userVisibleTokenOptions.map((token) => {
@@ -489,6 +502,7 @@ function Container (props: Props) {
walletLocation !== WalletRoutes.Backup &&
walletLocation !== WalletRoutes.Accounts &&
walletLocation !== WalletRoutes.AddAccountModal &&
walletLocation !== WalletRoutes.AddAssetModal &&
acceptedAccountRoutes.length !== 0 &&
!acceptedAccountRoutes.includes(walletLocation) &&
walletLocation !== WalletRoutes.Portfolio &&
@@ -598,7 +612,6 @@ function Container (props: Props) {
showAddModal={showAddModal}
onHideAddModal={onHideAddModal}
onUpdateAccountName={onUpdateAccountName}
fetchFullTokenList={fetchFullTokenList}
selectedNetwork={selectedNetwork}
onSelectNetwork={onSelectNetwork}
isFetchingPortfolioPriceHistory={isFetchingPortfolioPriceHistory}
@@ -624,6 +637,8 @@ function Container (props: Props) {
onRetryTransaction={onRetryTransaction}
onSpeedupTransaction={onSpeedupTransaction}
onCancelTransaction={onCancelTransaction}
onShowVisibleAssetsModal={onShowVisibleAssetsModal}
showVisibleAssetsModal={showVisibleAssetsModal}
/>
}
</Route>
@@ -685,6 +700,7 @@ function Container (props: Props) {
onSwapQuoteRefresh={onSwapQuoteRefresh}
onSelectSendAsset={onSelectSendAsset}
onAddNetwork={onAddNetwork}
onAddAsset={onShowVisibleAssetsModal}
/>
</WalletWidgetStandIn>
}
@@ -42,6 +42,7 @@ export const openWalletSettings = createAction('openWalletSettings')
export const openWalletApps = createAction('openWalletApps')
export const expandRestoreWallet = createAction('expandRestoreWallet')
export const expandWalletAccounts = createAction('expandWalletAccounts')
export const expandWalletAddAsset = createAction('expandWalletAddAsset')
export const navigateTo = createAction<string>('navigateTo')
export const navigateToMain = createAction('navigateToMain')
export const setPanelSwapQuote = createAction<SwapResponse>('setPanelSwapQuote')
@@ -19,7 +19,8 @@ import {
WalletPanelState,
PanelState,
WalletState,
HardwareInfo
HardwareInfo,
WalletRoutes
} from '../../constants/types'
import {
AccountPayloadType,
@@ -386,8 +387,9 @@ handler.on(PanelActions.signMessageHardware.getType(), async (store, messageData
}
}
const payload: SignMessageHardwareProcessedPayload =
signed.success ? { success: signed.success, id: messageData.id, signature: signed.payload }
: { success: signed.success, id: messageData.id, error: signed.error }
signed.success
? { success: signed.success, id: messageData.id, signature: signed.payload }
: { success: signed.success, id: messageData.id, error: signed.error }
store.dispatch(PanelActions.signMessageHardwareProcessed(payload))
await store.dispatch(PanelActions.navigateToMain())
apiProxy.panelHandler.closeUI()
@@ -452,7 +454,7 @@ handler.on(PanelActions.openWalletApps.getType(), async (store) => {
})
handler.on(PanelActions.expandRestoreWallet.getType(), async (store) => {
chrome.tabs.create({ url: 'chrome://wallet/crypto/restore-wallet' }, () => {
chrome.tabs.create({ url: `chrome://wallet${WalletRoutes.Restore}` }, () => {
if (chrome.runtime.lastError) {
console.error('tabs.create failed: ' + chrome.runtime.lastError.message)
}
@@ -460,7 +462,15 @@ handler.on(PanelActions.expandRestoreWallet.getType(), async (store) => {
})
handler.on(PanelActions.expandWalletAccounts.getType(), async (store) => {
chrome.tabs.create({ url: 'chrome://wallet/crypto/accounts/add-account' }, () => {
chrome.tabs.create({ url: `chrome://wallet${WalletRoutes.AddAccountModal}` }, () => {
if (chrome.runtime.lastError) {
console.error('tabs.create failed: ' + chrome.runtime.lastError.message)
}
})
})
handler.on(PanelActions.expandWalletAddAsset.getType(), async (store) => {
chrome.tabs.create({ url: `chrome://wallet${WalletRoutes.AddAssetModal}` }, () => {
if (chrome.runtime.lastError) {
console.error('tabs.create failed: ' + chrome.runtime.lastError.message)
}
@@ -469,6 +469,10 @@ function Container (props: Props) {
props.walletPanelActions.expandWalletAccounts()
}
const onAddAsset = () => {
props.walletPanelActions.expandWalletAddAsset()
}
const onAddSuggestedToken = () => {
if (!suggestedToken) {
return
@@ -656,6 +660,7 @@ function Container (props: Props) {
assets={assets}
onSelectAsset={onSelectAsset}
onBack={onHideSelectAsset}
onAddAsset={onAddAsset}
/>
</SelectContainer>
</PanelWrapper>
@@ -74,6 +74,7 @@ export interface Props {
onSwapQuoteRefresh: () => void
onSelectSendAsset: (asset: AccountAssetOptionType, toOrFrom: ToOrFromType) => void
onAddNetwork: () => void
onAddAsset: (value: boolean) => void
}
function BuySendSwap (props: Props) {
@@ -130,7 +131,8 @@ function BuySendSwap (props: Props) {
onSelectTab,
onSwapQuoteRefresh,
onSelectSendAsset,
onAddNetwork
onAddNetwork,
onAddAsset
} = props
// Switched this to useLayoutEffect to fix bad setState call error
@@ -157,6 +159,10 @@ function BuySendSwap (props: Props) {
onSelectTab(tab)
}
const onClickAddAsset = () => {
onAddAsset(true)
}
return (
<Layout
selectedNetwork={selectedNetwork}
@@ -201,6 +207,7 @@ function BuySendSwap (props: Props) {
assetOptions={swapAssetOptions}
onQuoteRefresh={onSwapQuoteRefresh}
onAddNetwork={onAddNetwork}
onAddAsset={onClickAddAsset}
/>
}
{selectedTab === 'send' &&
@@ -225,6 +232,7 @@ function BuySendSwap (props: Props) {
showHeader={true}
assetOptions={sendAssetOptions}
onAddNetwork={onAddNetwork}
onAddAsset={onClickAddAsset}
/>
}
{selectedTab === 'buy' &&
@@ -242,6 +250,7 @@ function BuySendSwap (props: Props) {
showHeader={true}
assetOptions={buyAssetOptions}
onAddNetwork={onAddNetwork}
onAddAsset={onClickAddAsset}
/>
}
</Layout>
@@ -66,7 +66,6 @@ export interface Props {
onDoneViewingPrivateKey: () => void
onViewPrivateKey: (address: string, isDefault: boolean) => void
onRemoveAccount: (address: string, hardware: boolean) => void
fetchFullTokenList: () => void
onSelectNetwork: (network: EthereumChain) => void
onToggleAddModal: () => void
onUpdateAccountName: (payload: UpdateAccountNamePayloadType) => { success: boolean }
@@ -78,6 +77,8 @@ export interface Props {
onSelectAsset: (asset: ERCToken | undefined) => void
onChangeTimeline: (path: AssetPriceTimeframe) => void
onShowBackup: () => void
onShowVisibleAssetsModal: (value: boolean) => void
showVisibleAssetsModal: boolean
}
const CryptoStoryView = (props: Props) => {
@@ -105,6 +106,8 @@ const CryptoStoryView = (props: Props) => {
isLoading,
showAddModal,
isFetchingPortfolioPriceHistory,
showVisibleAssetsModal,
onShowVisibleAssetsModal,
onAddUserAsset,
onSetUserAssetVisible,
onRemoveUserAsset,
@@ -118,7 +121,6 @@ const CryptoStoryView = (props: Props) => {
getBalance,
onImportAccount,
onUpdateAccountName,
fetchFullTokenList,
onSelectNetwork,
onToggleAddModal,
onRemoveAccount,
@@ -277,7 +279,6 @@ const CryptoStoryView = (props: Props) => {
onSelectAccount={onSelectAccount}
onClickAddAccount={onClickAddAccount}
onSelectNetwork={onSelectNetwork}
fetchFullTokenList={fetchFullTokenList}
addUserAssetError={false}
onAddUserAsset={onAddUserAsset}
onRemoveUserAsset={onRemoveUserAsset}
@@ -298,6 +299,8 @@ const CryptoStoryView = (props: Props) => {
onRetryTransaction={onClickRetryTransaction}
onSpeedupTransaction={onClickSpeedupTransaction}
onCancelTransaction={onClickCancelTransaction}
onShowVisibleAssetsModal={onShowVisibleAssetsModal}
showVisibleAssetsModal={showVisibleAssetsModal}
/>
}
{selectedTab === 'accounts' &&
@@ -256,6 +256,7 @@ export const _DesktopWalletConcept = (args: { onboarding: boolean, locked: boole
const [importWalletError, setImportWalletError] = React.useState<ImportWalletError>({ hasError: false })
const [selectedWidgetTab, setSelectedWidgetTab] = React.useState<BuySendSwapTypes>('buy')
const [customTolerance, setCustomTolerance] = React.useState('')
const [showVisibleAssetsModal, setShowVisibleAssetsModal] = React.useState<boolean>(false)
const onToggleRestore = () => {
setIsRestoring(!isRestoring)
@@ -634,10 +635,6 @@ export const _DesktopWalletConcept = (args: { onboarding: boolean, locked: boole
console.log(accounts)
}
const fetchFullTokenList = () => {
// Doesnt fetch anything in storybook
}
const onViewPrivateKey = () => {
// Doesnt do anything in storybook
}
@@ -679,6 +676,10 @@ export const _DesktopWalletConcept = (args: { onboarding: boolean, locked: boole
alert('Will redirect to Wallet Network Settings')
}
const onShowVisibleAssetsModal = (value: boolean) => {
setShowVisibleAssetsModal(value)
}
return (
<WalletPageLayout>
{/* <SideNav
@@ -760,7 +761,6 @@ export const _DesktopWalletConcept = (args: { onboarding: boolean, locked: boole
showAddModal={showAddModal}
onToggleAddModal={onToggleAddModal}
onUpdateAccountName={onUpdateAccountName}
fetchFullTokenList={fetchFullTokenList}
selectedNetwork={selectedNetwork}
onSelectNetwork={onSelectNetwork}
isFetchingPortfolioPriceHistory={false}
@@ -778,6 +778,8 @@ export const _DesktopWalletConcept = (args: { onboarding: boolean, locked: boole
onRemoveUserAsset={onRemoveUserAsset}
transactionSpotPrices={[]}
userVisibleTokensInfo={[]}
onShowVisibleAssetsModal={onShowVisibleAssetsModal}
showVisibleAssetsModal={showVisibleAssetsModal}
/>
)}
</>
@@ -849,6 +851,7 @@ export const _DesktopWalletConcept = (args: { onboarding: boolean, locked: boole
onSwapQuoteRefresh={onSwapQuoteRefresh}
onSelectSendAsset={onSelectTransactAsset}
onAddNetwork={onAddNetwork}
onAddAsset={onShowVisibleAssetsModal}
/>
</WalletWidgetStandIn>
}
@@ -478,6 +478,10 @@ export const _ConnectedPanel = (args: { locked: boolean }) => {
console.log('Will redirect user to network settings')
}
const onAddAsset = () => {
alert('Will redirect to brave://wallet/crypto/portfolio/add-asset')
}
const connectedAccounts = accounts.slice(0, 2)
return (
@@ -511,6 +515,7 @@ export const _ConnectedPanel = (args: { locked: boolean }) => {
assets={AccountAssetOptions}
onSelectAsset={onSelectAsset}
onBack={onHideSelectAsset}
onAddAsset={onAddAsset}
/>
</SelectContainer>
}