From 68db8b3e23e25b82f01c87843f34d186b17f05f3 Mon Sep 17 00:00:00 2001 From: aballerr Date: Tue, 23 Aug 2022 11:00:36 -0400 Subject: [PATCH] feat: wallet hover styling and moving wallet to correct navbar (#4444) * updating wallet to have correct hover highlighting and have correct scrolling Co-authored-by: Alex Ball --- src/components/AccountDetailsV2/index.tsx | 5 ++ .../FeatureFlagModal/FeatureFlagModal.tsx | 7 --- src/components/Header/index.tsx | 14 ------ .../WalletDropdown/AuthenticatedHeader.tsx | 8 ++- src/components/WalletDropdown/DefaultMenu.tsx | 9 ++-- src/components/WalletDropdown/IconButton.tsx | 2 +- .../WalletDropdown/LanguageMenu.tsx | 2 + .../WalletDropdown/SlideOutMenu.tsx | 50 +++++++++++++------ src/components/WalletDropdown/index.tsx | 35 ++++++++++--- src/components/Web3Status/index.tsx | 41 ++++++++++----- src/featureFlags/flags/wallet.ts | 7 --- src/state/application/hooks.ts | 4 ++ src/state/application/reducer.ts | 1 + 13 files changed, 116 insertions(+), 69 deletions(-) delete mode 100644 src/featureFlags/flags/wallet.ts diff --git a/src/components/AccountDetailsV2/index.tsx b/src/components/AccountDetailsV2/index.tsx index d75499e699..a721fa21d4 100644 --- a/src/components/AccountDetailsV2/index.tsx +++ b/src/components/AccountDetailsV2/index.tsx @@ -25,6 +25,11 @@ const Grid = styled.a` text-decoration: none; border-bottom: ${({ theme }) => `1px solid ${theme.backgroundOutline}`}; padding: 12px; + + &:hover { + background-color: ${({ theme }) => theme.backgroundModule}; + transition: 250ms background-color ease; + } ` const TextContainer = styled.span` diff --git a/src/components/FeatureFlagModal/FeatureFlagModal.tsx b/src/components/FeatureFlagModal/FeatureFlagModal.tsx index 0a38afb0b4..cd424ba2ac 100644 --- a/src/components/FeatureFlagModal/FeatureFlagModal.tsx +++ b/src/components/FeatureFlagModal/FeatureFlagModal.tsx @@ -5,7 +5,6 @@ import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign' import { TokensVariant, useTokensFlag } from 'featureFlags/flags/tokens' import { TokenSafetyVariant, useTokenSafetyFlag } from 'featureFlags/flags/tokenSafety' import { TokensNetworkFilterVariant, useTokensNetworkFilterFlag } from 'featureFlags/flags/tokensNetworkFilter' -import { useWalletFlag, WalletVariant } from 'featureFlags/flags/wallet' import { useAtomValue } from 'jotai/utils' import { ReactNode, useState } from 'react' import { X } from 'react-feather' @@ -203,12 +202,6 @@ export default function FeatureFlagModal() { featureFlag={FeatureFlag.tokenSafety} label="Token Safety" /> - window.location.reload()}>Save Settings ) diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index 1db0f70ce3..e533ada6d8 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -1,11 +1,9 @@ import { Trans } from '@lingui/macro' import useScrollPosition from '@react-hook/window-scroll' import { useWeb3React } from '@web3-react/core' -import WalletDropdown from 'components/WalletDropdown' import { getChainInfoOrDefault } from 'constants/chainInfo' import { SupportedChainId } from 'constants/chains' import { TokensVariant, useTokensFlag } from 'featureFlags/flags/tokens' -import { useWalletFlag, WalletVariant } from 'featureFlags/flags/wallet' import { darken } from 'polished' import { NavLink, useLocation } from 'react-router-dom' import { Text } from 'rebass' @@ -219,12 +217,6 @@ const StyledNavLink = styled(NavLink)` } ` -const WalletDropdownWrapper = styled.div` - position: absolute; - top: 75px; - right: 20px; -` - const StyledExternalLink = styled(ExternalLink)` ${({ theme }) => theme.flexRowNoWrap} align-items: left; @@ -252,7 +244,6 @@ const StyledExternalLink = styled(ExternalLink)` ` export default function Header() { - const walletFlag = useWalletFlag() const tokensFlag = useTokensFlag() const { account, chainId } = useWeb3React() @@ -355,11 +346,6 @@ export default function Header() { ) : null} - {walletFlag === WalletVariant.Enabled && ( - - - - )} diff --git a/src/components/WalletDropdown/AuthenticatedHeader.tsx b/src/components/WalletDropdown/AuthenticatedHeader.tsx index 2bce37a6b4..7d41e52f16 100644 --- a/src/components/WalletDropdown/AuthenticatedHeader.tsx +++ b/src/components/WalletDropdown/AuthenticatedHeader.tsx @@ -81,6 +81,10 @@ const HeaderWrapper = styled.div` justify-content: space-between; ` +const AuthenticatedHeaderWrapper = styled.div` + padding: 0 16px; +` + const AuthenticatedHeader = () => { const { account, chainId, connector } = useWeb3React() const [isCopied, setCopied] = useCopyClipboard() @@ -115,7 +119,7 @@ const AuthenticatedHeader = () => { }, [balanceString, nativeCurrencyPrice]) return ( - <> + @@ -144,7 +148,7 @@ const AuthenticatedHeader = () => { )} - + ) } diff --git a/src/components/WalletDropdown/DefaultMenu.tsx b/src/components/WalletDropdown/DefaultMenu.tsx index 24cc0e05be..13ca2f9d56 100644 --- a/src/components/WalletDropdown/DefaultMenu.tsx +++ b/src/components/WalletDropdown/DefaultMenu.tsx @@ -18,6 +18,8 @@ const ConnectButton = styled(ButtonPrimary)` width: 288px; font-weight: 600; font-size: 16px; + margin-left: auto; + margin-right: auto; ` const Divider = styled.div` @@ -35,16 +37,16 @@ const ToggleMenuItem = styled.button` flex: 1; flex-direction: row; align-items: center; - padding: 8px 0px; justify-content: space-between; font-size: 14px; font-weight: 400; width: 100%; - margin-bottom: 8px; + padding: 12px 16px; color: ${({ theme }) => theme.textSecondary}; :hover { color: ${({ theme }) => theme.textPrimary}; - transition: 250ms color ease; + background-color: ${({ theme }) => theme.backgroundModule}; + transition: 250ms all ease; } ` @@ -69,7 +71,6 @@ const IconWrap = styled.span` ` const DefaultMenuWrap = styled.div` - padding: 0 16px; width: 100%; height: 100%; ` diff --git a/src/components/WalletDropdown/IconButton.tsx b/src/components/WalletDropdown/IconButton.tsx index 2b34cd35b4..21625684e4 100644 --- a/src/components/WalletDropdown/IconButton.tsx +++ b/src/components/WalletDropdown/IconButton.tsx @@ -24,7 +24,7 @@ const IconStyles = css` color: ${({ theme }) => theme.textPrimary}; :hover { background-color: ${({ theme }) => theme.hoverState}; - transition: background-color 200ms linear; + transition: 250ms background-color ease; ${IconHoverText} { opacity: 1; diff --git a/src/components/WalletDropdown/LanguageMenu.tsx b/src/components/WalletDropdown/LanguageMenu.tsx index 0f32be5191..604e6d6f11 100644 --- a/src/components/WalletDropdown/LanguageMenu.tsx +++ b/src/components/WalletDropdown/LanguageMenu.tsx @@ -29,6 +29,8 @@ const InternalLinkMenuItem = styled(InternalMenuItem)<{ isActive: boolean }>` color: ${({ theme }) => theme.textPrimary}; :hover { cursor: pointer; + background-color: ${({ isActive, theme }) => !isActive && theme.backgroundModule}; + transition: 250ms background-color ease; } ` diff --git a/src/components/WalletDropdown/SlideOutMenu.tsx b/src/components/WalletDropdown/SlideOutMenu.tsx index d7c4730f2f..0eebfffdd4 100644 --- a/src/components/WalletDropdown/SlideOutMenu.tsx +++ b/src/components/WalletDropdown/SlideOutMenu.tsx @@ -1,17 +1,6 @@ import { ChevronLeft } from 'react-feather' import styled from 'styled-components/macro' -const BackSection = styled.div` - position: relative; - display: flex; - padding: 0 16px; - color: ${({ theme }) => theme.textSecondary}; - cursor: default; - :hover { - text-decoration: none; - } -` - const Menu = styled.div` width: 100%; height: 100%; @@ -29,12 +18,16 @@ const Header = styled.span` const ClearAll = styled.div` display: inline-block; cursor: pointer; - margin-left: auto; color: ${({ theme }) => theme.accentAction}; font-weight: 600; font-size: 14px; margin-top: auto; margin-bottom: auto; + + :hover { + opacity: 0.6; + transition: 250ms opacity ease; + } ` const StyledChevron = styled(ChevronLeft)` @@ -46,6 +39,28 @@ const StyledChevron = styled(ChevronLeft)` } ` +const BackSection = styled.div` + position: absolute; + background-color: ${({ theme }) => theme.backgroundSurface}; + width: 100%; + padding: 0 16px 16px 16px; + color: ${({ theme }) => theme.textSecondary}; + cursor: default; + display: flex; + justify-content: space-between; +` + +const BackSectionContainer = styled.div` + display: flex; + justify-content: space-between; + position: relative; + width: 100%; +` + +const ChildrenContainer = styled.div` + margin-top: 40px; +` + export const SlideOutMenu = ({ children, onClose, @@ -59,10 +74,13 @@ export const SlideOutMenu = ({ }) => ( - -
{title}
- {onClear && Clear All} + + +
{title}
+ {onClear && Clear All} + - {children} + + {children} ) diff --git a/src/components/WalletDropdown/index.tsx b/src/components/WalletDropdown/index.tsx index ab8de718e9..d035f1966b 100644 --- a/src/components/WalletDropdown/index.tsx +++ b/src/components/WalletDropdown/index.tsx @@ -1,6 +1,8 @@ import { useState } from 'react' import styled from 'styled-components/macro' +import { useModalIsOpen } from '../../state/application/hooks' +import { ApplicationModal } from '../../state/application/reducer' import DefaultMenu from './DefaultMenu' import LanguageMenu from './LanguageMenu' import { TransactionHistoryMenu } from './TransactionMenu' @@ -9,7 +11,6 @@ const WalletWrapper = styled.div` border-radius: 12px; width: 320px; max-height: 376px; - display: flex; flex-direction: column; font-size: 16px; @@ -25,15 +26,37 @@ export enum MenuState { TRANSACTIONS = 'TRANSACTIONS', } +const WalletDropdownWrapper = styled.div` + position: absolute; + + @media only screen and (min-width: 1280px) { + top: 65px; + right: 20px; + } + + @media only screen and (max-width: 1280px) { + left: 50%; + bottom: 45px; + transform: translateX(-50%); + } +` + const WalletDropdown = () => { const [menu, setMenu] = useState(MenuState.DEFAULT) + const walletDropdownOpen = useModalIsOpen(ApplicationModal.WALLET_DROPDOWN) return ( - - {menu === MenuState.TRANSACTIONS && setMenu(MenuState.DEFAULT)} />} - {menu === MenuState.LANGUAGE && setMenu(MenuState.DEFAULT)} />} - {menu === MenuState.DEFAULT && } - + <> + {walletDropdownOpen && ( + + + {menu === MenuState.TRANSACTIONS && setMenu(MenuState.DEFAULT)} />} + {menu === MenuState.LANGUAGE && setMenu(MenuState.DEFAULT)} />} + {menu === MenuState.DEFAULT && } + + + )} + ) } diff --git a/src/components/Web3Status/index.tsx b/src/components/Web3Status/index.tsx index 90728f9814..5a095e4ebd 100644 --- a/src/components/Web3Status/index.tsx +++ b/src/components/Web3Status/index.tsx @@ -3,17 +3,22 @@ import { t, Trans } from '@lingui/macro' import { useWeb3React } from '@web3-react/core' import { ElementName, Event, EventName } from 'components/AmplitudeAnalytics/constants' import { TraceEvent } from 'components/AmplitudeAnalytics/TraceEvent' +import WalletDropdown from 'components/WalletDropdown' import { getConnection } from 'connection/utils' +import { NavBarVariant, useNavBarFlag } from 'featureFlags/flags/navBar' import { getIsValidSwapQuote } from 'pages/Swap' import { darken } from 'polished' -import { useMemo } from 'react' +import { useMemo, useRef } from 'react' import { AlertTriangle } from 'react-feather' import { useAppSelector } from 'state/hooks' import { useDerivedSwapInfo } from 'state/swap/hooks' import styled, { css } from 'styled-components/macro' +import { useOnClickOutside } from '../../hooks/useOnClickOutside' import { useHasSocks } from '../../hooks/useSocksBalance' -import { useToggleWalletModal } from '../../state/application/hooks' +import { useModalIsOpen, useToggleWalletDropdown, useToggleWalletModal } from '../../state/application/hooks' +import { useCloseModal } from '../../state/application/hooks' +import { ApplicationModal } from '../../state/application/reducer' import { isTransactionRecent, useAllTransactions } from '../../state/transactions/hooks' import { TransactionDetails } from '../../state/transactions/types' import { shortenAddress } from '../../utils' @@ -133,6 +138,9 @@ function Web3StatusInner() { inputError: swapInputError, } = useDerivedSwapInfo() const validSwapQuote = getIsValidSwapQuote(trade, tradeState, swapInputError) + const navbarFlag = useNavBarFlag() + const toggleWalletDropdown = useToggleWalletDropdown() + const toggleWalletModal = useToggleWalletModal() const error = useAppSelector((state) => state.connection.errorByConnectionType[getConnection(connector).type]) @@ -147,13 +155,13 @@ function Web3StatusInner() { const hasPendingTransactions = !!pending.length const hasSocks = useHasSocks() - const toggleWalletModal = useToggleWalletModal() + const toggleWallet = navbarFlag === NavBarVariant.Enabled ? toggleWalletDropdown : toggleWalletModal if (!chainId) { return null } else if (error) { return ( - + Error @@ -162,11 +170,7 @@ function Web3StatusInner() { ) } else if (account) { return ( - + {hasPendingTransactions ? ( @@ -191,7 +195,7 @@ function Web3StatusInner() { properties={{ received_swap_quote: validSwapQuote }} element={ElementName.CONNECT_WALLET_BUTTON} > - + Connect Wallet @@ -201,10 +205,22 @@ function Web3StatusInner() { } } +const useIsOpen = () => { + const walletDropdownOpen = useModalIsOpen(ApplicationModal.WALLET_DROPDOWN) + const navbarFlag = useNavBarFlag() + + return useMemo(() => navbarFlag === NavBarVariant.Enabled && walletDropdownOpen, [navbarFlag, walletDropdownOpen]) +} + export default function Web3Status() { const { ENSName } = useWeb3React() const allTransactions = useAllTransactions() + const ref = useRef(null) + const closeModal = useCloseModal(ApplicationModal.WALLET_DROPDOWN) + const isOpen = useIsOpen() + + useOnClickOutside(ref, isOpen ? closeModal : undefined) const sortedRecentTransactions = useMemo(() => { const txs = Object.values(allTransactions) @@ -215,9 +231,10 @@ export default function Web3Status() { const confirmed = sortedRecentTransactions.filter((tx) => tx.receipt).map((tx) => tx.hash) return ( - <> + - + + ) } diff --git a/src/featureFlags/flags/wallet.ts b/src/featureFlags/flags/wallet.ts deleted file mode 100644 index 79ab5451c7..0000000000 --- a/src/featureFlags/flags/wallet.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { BaseVariant, FeatureFlag, useBaseFlag } from '../index' - -export function useWalletFlag(): BaseVariant { - return useBaseFlag(FeatureFlag.wallet) -} - -export { BaseVariant as WalletVariant } diff --git a/src/state/application/hooks.ts b/src/state/application/hooks.ts index 872b251612..cce7e667d9 100644 --- a/src/state/application/hooks.ts +++ b/src/state/application/hooks.ts @@ -30,6 +30,10 @@ export function useToggleWalletModal(): () => void { return useToggleModal(ApplicationModal.WALLET) } +export function useToggleWalletDropdown(): () => void { + return useToggleModal(ApplicationModal.WALLET_DROPDOWN) +} + export function useToggleSettingsMenu(): () => void { return useToggleModal(ApplicationModal.SETTINGS) } diff --git a/src/state/application/reducer.ts b/src/state/application/reducer.ts index b2e5396864..8a94a5bef1 100644 --- a/src/state/application/reducer.ts +++ b/src/state/application/reducer.ts @@ -26,6 +26,7 @@ export enum ApplicationModal { SETTINGS, VOTE, WALLET, + WALLET_DROPDOWN, QUEUE, EXECUTE, TIME_SELECTOR,