Skip to content

style(wallet): use nala for wallet settings menu #25095

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
josheleonard wants to merge 1 commit into
base: master
Choose a base branch
from
Draft

style(wallet): use nala for wallet settings menu #25095

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 9 additions & 37 deletions components/brave_wallet_ui/components/desktop/account-list-item/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,6 @@ import {
import { getLocale } from '../../../../common/locale'
import { getEntitiesListFromEntityState } from '../../../utils/entities.utils'

// hooks
import { useOnClickOutside } from '../../../common/hooks/useOnClickOutside'

// Selectors
import { UISelectors } from '../../../common/selectors'
import { useSafeUISelector } from '../../../common/hooks/use-safe-selector'
Expand Down Expand Up @@ -73,9 +70,6 @@ import { RewardsLogin } from '../rewards_login/rewards_login'
import {
StyledWrapper,
NameAndIcon,
AccountMenuWrapper,
AccountMenuButton,
AccountMenuIcon,
AccountBalanceText,
AccountDescription,
AccountNameWrapper,
Expand Down Expand Up @@ -128,19 +122,6 @@ export const AccountListItem = ({
} = emptyRewardsInfo
} = useGetRewardsInfoQuery()

// state
const [showAccountMenu, setShowAccountMenu] = React.useState<boolean>(false)

// refs
const accountMenuRef = React.useRef<HTMLDivElement>(null)

// hooks
useOnClickOutside(
accountMenuRef,
() => setShowAccountMenu(false),
showAccountMenu
)

// methods
const onSelectAccount = React.useCallback(() => {
onClick(account)
Expand Down Expand Up @@ -398,25 +379,16 @@ export const AccountListItem = ({
</AccountButton>

{!isDisconnectedRewardsAccount && (
<AccountMenuWrapper ref={accountMenuRef}>
<AccountMenuButton
onClick={() => setShowAccountMenu((prev) => !prev)}
>
<AccountMenuIcon />
</AccountMenuButton>
{showAccountMenu && (
<>
{isRewardsAccount ? (
<RewardsMenu />
) : (
<AccountActionsMenu
onClick={onClickButtonOption}
options={buttonOptions}
/>
)}
</>
<>
{isRewardsAccount ? (
<RewardsMenu />
) : (
<AccountActionsMenu
onClick={onClickButtonOption}
options={buttonOptions}
/>
)}
</AccountMenuWrapper>
</>
)}
</Row>
{isDisconnectedRewardsAccount && (
Expand Down
24 changes: 0 additions & 24 deletions components/brave_wallet_ui/components/desktop/account-list-item/style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,10 +63,6 @@ export const NameAndIcon = styled.div`
flex-direction: row;
`

export const AccountMenuWrapper = styled.div`
position: relative;
`

export const ButtonIcon = styled(Icon)`
--leo-icon-size: 14px;
color: ${leo.color.icon.default};
Expand Down Expand Up @@ -97,26 +93,6 @@ export const OvalButtonText = styled.span`
font-weight: 600;
`

export const AccountMenuButton = styled(WalletButton)`
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
outline: none;
background: none;
pointer-events: auto;
border: none;
margin: 0px;
padding: 0px;
`

export const AccountMenuIcon = styled(Icon).attrs({
name: 'more-vertical'
})`
--leo-icon-size: 24px;
color: ${leo.color.icon.default};
`

export const AccountBalanceText = styled(Text)`
color: ${leo.color.text.primary};
margin-right: 12px;
Expand Down
46 changes: 12 additions & 34 deletions components/brave_wallet_ui/components/desktop/card-headers/account-details-header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,9 +49,6 @@ import {
} from '../../../common/slices/entities/token-balance.entity'
import { querySubscriptionOptions60s } from '../../../common/slices/constants'

// Hooks
import { useOnClickOutside } from '../../../common/hooks/useOnClickOutside'

// Components
import {
CreateAccountIcon //
Expand All @@ -71,7 +68,6 @@ import {
import {
MenuButton,
ButtonIcon,
MenuWrapper,
HorizontalDivider
} from './shared-card-headers.style'
import { Row, Column, HorizontalSpace } from '../../shared/style'
Expand All @@ -82,9 +78,11 @@ interface Props {
tokenBalancesRegistry: TokenBalancesRegistry | undefined | null
}

export const AccountDetailsHeader = (props: Props) => {
const { account, onClickMenuOption, tokenBalancesRegistry } = props

export const AccountDetailsHeader = ({
account,
onClickMenuOption,
tokenBalancesRegistry
}: Props) => {
// routing
const history = useHistory()

Expand All @@ -99,20 +97,6 @@ export const AccountDetailsHeader = (props: Props) => {
})
const { data: defaultFiatCurrency } = useGetDefaultFiatCurrencyQuery()

// state
const [showAccountDetailsMenu, setShowAccountDetailsMenu] =
React.useState<boolean>(false)

// refs
const accountDetailsMenuRef = React.useRef<HTMLDivElement>(null)

// hooks
useOnClickOutside(
accountDetailsMenuRef,
() => setShowAccountDetailsMenu(false),
showAccountDetailsMenu
)

// Memos
const accountsFungibleTokens = React.useMemo(() => {
return userVisibleTokensInfo
Expand Down Expand Up @@ -208,10 +192,12 @@ export const AccountDetailsHeader = (props: Props) => {
return options
}, [account])

// methods
const goBack = React.useCallback(() => {
history.push(WalletRoutes.Accounts)
}, [history])

// render
return (
<Row
padding={isPanel ? '16px' : '24px 0px'}
Expand Down Expand Up @@ -280,19 +266,11 @@ export const AccountDetailsHeader = (props: Props) => {
<HorizontalSpace space='16px' />
</>
)}
<MenuWrapper ref={accountDetailsMenuRef}>
<MenuButton
onClick={() => setShowAccountDetailsMenu((prev) => !prev)}
>
<ButtonIcon name='more-vertical' />
</MenuButton>
{showAccountDetailsMenu && (
<AccountDetailsMenu
options={menuOptions}
onClickMenuOption={onClickMenuOption}
/>
)}
</MenuWrapper>

<AccountDetailsMenu
options={menuOptions}
onClickMenuOption={onClickMenuOption}
/>
</Row>
</Row>
)
Expand Down
32 changes: 3 additions & 29 deletions components/brave_wallet_ui/components/desktop/card-headers/accounts-header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,38 +18,19 @@ import { DefaultPanelHeader } from './default-panel-header'
import { getLocale } from '../../../../common/locale'

// Hooks
import { useOnClickOutside } from '../../../common/hooks/useOnClickOutside'
import { useSafeUISelector } from '../../../common/hooks/use-safe-selector'

import { AccountsMenu } from '../wallet-menus/accounts-menu'

// Styled Components
import {
HeaderTitle,
MenuButton,
ButtonIcon,
MenuWrapper
} from './shared-card-headers.style'
import { HeaderTitle } from './shared-card-headers.style'
import { Row } from '../../shared/style'

export const AccountsHeader = () => {
// UI Selectors (safe)
const isPanel = useSafeUISelector(UISelectors.isPanel)

// State
const [showPortfolioOverviewMenu, setShowPortfolioOverviewMenu] =
React.useState<boolean>(false)

// Refs
const portfolioOverviewMenuRef = React.useRef<HTMLDivElement>(null)

// Hooks
useOnClickOutside(
portfolioOverviewMenuRef,
() => setShowPortfolioOverviewMenu(false),
showPortfolioOverviewMenu
)

// render
return isPanel ? (
<DefaultPanelHeader
title={getLocale('braveWalletTopNavAccounts')}
Expand All @@ -61,14 +42,7 @@ export const AccountsHeader = () => {
justifyContent='space-between'
>
<HeaderTitle>{getLocale('braveWalletTopNavAccounts')}</HeaderTitle>
<MenuWrapper ref={portfolioOverviewMenuRef}>
<MenuButton
onClick={() => setShowPortfolioOverviewMenu((prev) => !prev)}
>
<ButtonIcon name='plus-add' />
</MenuButton>
{showPortfolioOverviewMenu && <AccountsMenu />}
</MenuWrapper>
<AccountsMenu />
</Row>
)
}
Expand Down
42 changes: 8 additions & 34 deletions components/brave_wallet_ui/components/desktop/card-headers/asset-details-header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,6 @@ import {
import { querySubscriptionOptions60s } from '../../../common/slices/constants'

// Hooks
import { useOnClickOutside } from '../../../common/hooks/useOnClickOutside'
import useExplorer from '../../../common/hooks/explorer'

// Components
Expand All @@ -48,7 +47,6 @@ import { CreateNetworkIcon } from '../../shared/create-network-icon'
import {
MenuButton,
ButtonIcon,
MenuWrapper,
HorizontalDivider
} from './shared-card-headers.style'
import {
Expand Down Expand Up @@ -99,36 +97,20 @@ export const AssetDetailsHeader = (props: Props) => {
useGetNetworkQuery(selectedAsset ?? skipToken)
const { data: defaultFiatCurrency } = useGetDefaultFiatCurrencyQuery()

// state
const [showAssetDetailsMenu, setShowAssetDetailsMenu] =
React.useState<boolean>(false)

// refs
const assetDetailsMenuRef = React.useRef<HTMLDivElement>(null)

// hooks
useOnClickOutside(
assetDetailsMenuRef,
() => setShowAssetDetailsMenu(false),
showAssetDetailsMenu
)

const openExplorer = useExplorer(selectedAssetsNetwork)

// methods
const handleOnClickHideToken = React.useCallback(() => {
setShowAssetDetailsMenu(false)
onClickHideToken()
}, [onClickHideToken])

const handleOnClickTokenDetails = React.useCallback(() => {
setShowAssetDetailsMenu(false)
onClickTokenDetails()
}, [onClickTokenDetails])

const handleOnClickEditToken = React.useCallback(() => {
if (onClickEditToken) {
setShowAssetDetailsMenu(false)
onClickEditToken()
}
}, [onClickEditToken])
Expand Down Expand Up @@ -283,22 +265,14 @@ export const AssetDetailsHeader = (props: Props) => {
<HorizontalSpace space='16px' />
<HorizontalDivider />
<HorizontalSpace space='16px' />
<MenuWrapper ref={assetDetailsMenuRef}>
<MenuButton
onClick={() => setShowAssetDetailsMenu((prev) => !prev)}
>
<ButtonIcon name='more-vertical' />
</MenuButton>
{showAssetDetailsMenu && (
<AssetDetailsMenu
assetSymbol={selectedAsset?.symbol ?? ''}
onClickHideToken={handleOnClickHideToken}
onClickTokenDetails={handleOnClickTokenDetails}
onClickViewOnExplorer={onClickViewOnExplorer}
onClickEditToken={handleOnClickEditToken}
/>
)}
</MenuWrapper>

<AssetDetailsMenu
assetSymbol={selectedAsset?.symbol ?? ''}
onClickHideToken={handleOnClickHideToken}
onClickTokenDetails={handleOnClickTokenDetails}
onClickViewOnExplorer={onClickViewOnExplorer}
onClickEditToken={handleOnClickEditToken}
/>
</>
)}
</Row>
Expand Down
Loading