Skip to content

Commit

Permalink
refactor: extract AccountElement and AccountModalState
Browse files Browse the repository at this point in the history
shoom3301 committed Oct 18, 2023
1 parent a133ca5 commit 0abd19e
Showing 17 changed files with 205 additions and 218 deletions.
25 changes: 0 additions & 25 deletions apps/cowswap-frontend/src/common/hooks/useOrdersPanel.ts

This file was deleted.

Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import React from 'react'

import { NATIVE_CURRENCY_BUY_TOKEN } from '@cowprotocol/common-const'
import { TokenAmount } from '@cowprotocol/ui'
import { useWalletInfo } from '@cowprotocol/wallet'

import { useToggleAccountModal } from 'modules/account'
import { useNativeCurrencyBalances } from 'modules/tokens/hooks/useCurrencyBalance'
import { Web3Status } from 'modules/wallet/containers/Web3Status'

import { useIsProviderNetworkUnsupported } from 'common/hooks/useIsProviderNetworkUnsupported'

import { Wrapper, BalanceText } from './styled'

interface AccountElementProps {
pendingActivities: string[]
isWidgetMode?: boolean
className?: string
}

export function AccountElement({ className, isWidgetMode, pendingActivities }: AccountElementProps) {
const { account, chainId } = useWalletInfo()
const isChainIdUnsupported = useIsProviderNetworkUnsupported()
const userEthBalance = useNativeCurrencyBalances(account ? [account] : [])?.[account ?? '']
const toggleAccountModal = useToggleAccountModal()
const nativeToken = NATIVE_CURRENCY_BUY_TOKEN[chainId].symbol

return (
<Wrapper className={className} active={!!account} onClick={() => account && toggleAccountModal()}>
{!isWidgetMode && account && !isChainIdUnsupported && userEthBalance && chainId && (
<BalanceText>
<TokenAmount amount={userEthBalance} tokenSymbol={{ symbol: nativeToken }} />
</BalanceText>
)}
<Web3Status pendingActivities={pendingActivities} />
</Wrapper>
)
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import { transparentize } from 'polished'
import { Text } from 'rebass'
import styled from 'styled-components/macro'

export const BalanceText = styled(Text)`
font-weight: 500;
font-size: 13px;
padding: 0 6px 0 12px;
min-width: initial;
${({ theme }) => theme.mediaWidth.upToExtraSmall`
display: none;
`};
${({ theme }) => theme.mediaWidth.upToMedium`
overflow: hidden;
max-width: 100px;
text-overflow: ellipsis;
`};
${({ theme }) => theme.mediaWidth.upToSmall`
display: none;
`};
`

export const Wrapper = styled.div<{ active: boolean }>`
display: flex;
flex-direction: row;
align-items: center;
background-color: ${({ theme, active }) => (!active ? theme.bg1 : theme.bg3)};
white-space: nowrap;
cursor: pointer;
background-color: ${({ theme, active }) => (!active ? theme.bg1 : theme.bg1)};
border-radius: 21px;
border: 2px solid transparent;
transition: border 0.2s ease-in-out;
pointer-events: auto;
width: auto;
:focus {
border: 1px solid blue;
}
&:hover {
border: 2px solid ${({ theme }) => transparentize(0.7, theme.text1)};
}
${({ theme }) => theme.mediaWidth.upToMedium`
height: 100%;
`}
${({ theme }) =>
theme.isInjectedWidgetMode &&
`
margin: 0 20px 0 auto!important;
border: 0!important;
`}
`
53 changes: 5 additions & 48 deletions apps/cowswap-frontend/src/legacy/components/Header/index.tsx
Original file line number Diff line number Diff line change
@@ -1,40 +1,32 @@
import React, { useCallback, useEffect, useMemo, useState } from 'react'
import React, { useCallback, useMemo, useState } from 'react'

import { toggleDarkModeAnalytics } from '@cowprotocol/analytics'
import { addBodyClass, removeBodyClass } from '@cowprotocol/common-utils'
import { SupportedChainId as ChainId, SupportedChainId } from '@cowprotocol/cow-sdk'
import { TokenAmount } from '@cowprotocol/ui'
import { SupportedChainId } from '@cowprotocol/cow-sdk'
import { useWalletInfo } from '@cowprotocol/wallet'

import SVG from 'react-inlinesvg'
import { useNavigate } from 'react-router-dom'

import CowBalanceButton from 'legacy/components/CowBalanceButton'
import { NetworkSelector } from 'legacy/components/Header/NetworkSelector'
import { LargeAndUp, upToLarge, upToMedium, upToSmall, useMediaQuery } from 'legacy/hooks/useMediaQuery'
import { upToLarge, upToSmall, useMediaQuery } from 'legacy/hooks/useMediaQuery'
import { useDarkModeManager } from 'legacy/state/user/hooks'
import { cowSwapLogo } from 'legacy/theme/cowSwapAssets'

import { OrdersPanel } from 'modules/account/containers/OrdersPanel'
import { useInjectedWidgetParams } from 'modules/injectedWidget'
import { MainMenuContext } from 'modules/mainMenu'
import { MenuTree } from 'modules/mainMenu/pure/MenuTree'
import { useSwapRawState } from 'modules/swap/hooks/useSwapRawState'
import { useNativeCurrencyBalances } from 'modules/tokens/hooks/useCurrencyBalance'
import { useTradeState } from 'modules/trade/hooks/useTradeState'
import { getDefaultTradeRawState } from 'modules/trade/types/TradeRawState'
import { Web3Status } from 'modules/wallet/containers/Web3Status'

import { Routes } from 'common/constants/routes'
import { useCategorizeRecentActivity } from 'common/hooks/useCategorizeRecentActivity'
import { useIsProviderNetworkUnsupported } from 'common/hooks/useIsProviderNetworkUnsupported'
import { useOrdersPanel } from 'common/hooks/useOrdersPanel'


import { AccountElement } from './AccountElement'
import MobileMenuIcon from './MobileMenuIcon'
import {
AccountElement,
BalanceText,
CustomLogoImg,
HeaderControls,
HeaderElement,
@@ -46,30 +38,6 @@ import {
Wrapper,
} from './styled'

const CHAIN_CURRENCY_LABELS: { [chainId in ChainId]?: string } = {
[ChainId.GNOSIS_CHAIN]: 'xDAI',
}

// Todo: fix 'any' types
export const AccountElementComponent = ({ isWidgetMode, pendingActivity, handleOpenOrdersPanel }: any) => {
const { account, chainId } = useWalletInfo()
const isChainIdUnsupported = useIsProviderNetworkUnsupported()
const nativeToken = CHAIN_CURRENCY_LABELS[chainId] || 'ETH'
const userEthBalance = useNativeCurrencyBalances(account ? [account] : [])?.[account ?? '']

return (
<AccountElement active={!!account} onClick={handleOpenOrdersPanel}>
{!isWidgetMode && account && !isChainIdUnsupported && userEthBalance && chainId && (
<BalanceText>
<TokenAmount amount={userEthBalance} tokenSymbol={{ symbol: nativeToken }} />
</BalanceText>
)}

<Web3Status pendingActivities={pendingActivity} />
</AccountElement>
)
}

export default function Header() {
const { account, chainId } = useWalletInfo()
const injectedWidgetParams = useInjectedWidgetParams()
@@ -83,14 +51,10 @@ export default function Header() {
const swapRawState = useSwapRawState()
const { state: tradeState } = useTradeState()

const { isOrdersPanelOpen, handleOpenOrdersPanel, handleCloseOrdersPanel } = useOrdersPanel();

const navigate = useNavigate()

const isUpToLarge = useMediaQuery(upToLarge)
const isUpToMedium = useMediaQuery(upToMedium)
const isUpToSmall = useMediaQuery(upToSmall)
const isLargeAndUp = useMediaQuery(LargeAndUp)

const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
const handleMobileMenuOnClick = useCallback(() => {
@@ -126,12 +90,6 @@ export default function Header() {
tradeContext: tradeMenuContext,
}

// Toggle the 'noScroll' class on body, whenever the mobile menu or orders panel is open.
// This removes the inner scrollbar on the page body, to prevent showing double scrollbars.
useEffect(() => {
isMobileMenuOpen || isOrdersPanelOpen ? addBodyClass('noScroll') : removeBodyClass('noScroll')
}, [isOrdersPanelOpen, isMobileMenuOpen, isUpToLarge, isUpToMedium, isUpToSmall, isLargeAndUp])

return (
<Wrapper isMobileMenuOpen={isMobileMenuOpen}>
<HeaderModWrapper>
@@ -165,12 +123,11 @@ export default function Header() {
/>
)}

<AccountElementComponent pendingActivity={pendingActivity} handleOpenOrdersPanel={handleOpenOrdersPanel} />
<AccountElement pendingActivities={pendingActivity} />
</HeaderElement>
</HeaderControls>

{isUpToLarge && <MobileMenuIcon isMobileMenuOpen={isMobileMenuOpen} onClick={handleMobileMenuOnClick} />}
{isOrdersPanelOpen && <OrdersPanel handleCloseOrdersPanel={handleCloseOrdersPanel} />}
</HeaderModWrapper>
</Wrapper>
)
59 changes: 0 additions & 59 deletions apps/cowswap-frontend/src/legacy/components/Header/styled.tsx
Original file line number Diff line number Diff line change
@@ -5,7 +5,6 @@ import { Row, RowFixed } from '@cowprotocol/ui'
import useScrollPosition from '@react-hook/window-scroll'
import { transparentize, darken } from 'polished'
import { NavLink } from 'react-router-dom'
import { Text } from 'rebass'
import styled, { css } from 'styled-components/macro'

import { MenuFlyout, MenuSection, Content as MenuContent, MenuTitle } from 'legacy/components/MenuDropdown/styled'
@@ -52,43 +51,6 @@ export const HeaderControlsUni = styled.div`
`};
`

export const BalanceTextUni = styled(Text)`
${({ theme }) => theme.mediaWidth.upToExtraSmall`
display: none;
`};
`

export const BalanceText = styled(BalanceTextUni)`
font-weight: 500;
font-size: 13px;
padding: 0 6px 0 12px;
${({ theme }) => theme.mediaWidth.upToMedium`
overflow: hidden;
max-width: 100px;
text-overflow: ellipsis;
`};
${({ theme }) => theme.mediaWidth.upToSmall`
display: none;
`};
`

export const AccountElementUni = styled.div<{ active: boolean }>`
display: flex;
flex-direction: row;
align-items: center;
border-radius: 12px;
background-color: ${({ theme, active }) => (!active ? theme.bg1 : theme.bg3)};
white-space: nowrap;
width: 100%;
cursor: pointer;
:focus {
border: 1px solid blue;
}
`

export const StyledNavLinkUni = styled(NavLink)`
${({ theme }) => theme.flexRowNoWrap}
align-items: left;
@@ -113,27 +75,6 @@ export const StyledNavLinkUni = styled(NavLink)`
}
`

export const AccountElement = styled(AccountElementUni)<{ active: boolean }>`
background-color: ${({ theme, active }) => (!active ? theme.bg1 : theme.bg1)};
border-radius: 21px;
border: 2px solid transparent;
transition: border 0.2s ease-in-out;
pointer-events: auto;
width: auto;
&:hover {
border: 2px solid ${({ theme }) => transparentize(0.7, theme.text1)};
}
${({ theme }) => theme.mediaWidth.upToMedium`
height: 100%;
`}
${BalanceText} {
min-width: initial;
}
`

export const StyledMenuButton = styled.button`
position: relative;
width: 100%;
Original file line number Diff line number Diff line change
@@ -13,6 +13,8 @@ import { toggleAccountSelectorModalAtom } from 'modules/wallet/containers/Accoun
import { UI } from 'common/constants/theme'
import { useCategorizeRecentActivity } from 'common/hooks/useCategorizeRecentActivity'

import { useAccountModalState } from '../../hooks/useAccountModalState'
import { useToggleAccountModal } from '../../hooks/useToggleAccountModal'
import { AccountDetails } from '../AccountDetails'

const SideBar = styled.div`
@@ -49,7 +51,7 @@ const SidebarBackground = styled.div`
position: fixed;
top: 0;
left: 0;
z-index: 1;
z-index: 4;
width: 100%;
height: 100%;
background: ${({ theme }) => transparentize(0.1, theme.black)};
@@ -123,21 +125,18 @@ const Wrapper = styled.div`
${({ theme }) => theme.colorScrollbar};
`

export interface OrdersPanelProps {
handleCloseOrdersPanel: () => void
}

export function OrdersPanel({ handleCloseOrdersPanel }: OrdersPanelProps) {
// TODO: rename the component into AccountModal
export function OrdersPanel() {
const { active } = useWalletInfo()
const { ensName } = useWalletDetails()
const toggleWalletModal = useToggleWalletModal()
const toggleAccountSelectorModal = useSetAtom(toggleAccountSelectorModalAtom)

const { isOpen } = useAccountModalState()
const { pendingActivity, confirmedActivity } = useCategorizeRecentActivity()

const ENSName = ensName
const handleCloseOrdersPanel = useToggleAccountModal()

if (!active) {
if (!active || !isOpen) {
return null
}

@@ -152,7 +151,7 @@ export function OrdersPanel({ handleCloseOrdersPanel }: OrdersPanelProps) {
</Header>

<AccountDetails
ENSName={ENSName}
ENSName={ensName}
pendingTransactions={pendingActivity}
confirmedTransactions={confirmedActivity}
toggleWalletModal={toggleWalletModal}
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import { useAtomValue } from 'jotai'

import { AccountModalState, accountModalStateAtom } from '../state/accountModalState'

export function useAccountModalState(): AccountModalState {
return useAtomValue(accountModalStateAtom)
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { useSetAtom } from 'jotai'

import { updateAccountModalStateAtom } from '../state/accountModalState'

export function useToggleAccountModal() {
const updateAccountModalState = useSetAtom(updateAccountModalStateAtom)

return () => updateAccountModalState((prev) => ({ isOpen: !prev.isOpen }))
}
3 changes: 3 additions & 0 deletions apps/cowswap-frontend/src/modules/account/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export { OrdersPanel } from './containers/OrdersPanel'
export { useToggleAccountModal } from './hooks/useToggleAccountModal'
export { useAccountModalState } from './hooks/useAccountModalState'
Loading

0 comments on commit 0abd19e

Please sign in to comment.