diff --git a/src/custom/components/Header/index.tsx b/src/custom/components/Header/index.tsx index 4cab009b31..549a5dda2e 100644 --- a/src/custom/components/Header/index.tsx +++ b/src/custom/components/Header/index.tsx @@ -17,7 +17,7 @@ import HeaderMod, { HeaderFrame, UNIWrapper, } from './HeaderMod' -// import Menu from 'components/Menu' +import MenuDropdown from 'components/MenuDropdown' // import { Moon, Sun } from 'react-feather' import styled from 'styled-components/macro' import { useActiveWeb3React } from 'hooks/web3' @@ -27,18 +27,13 @@ import { AMOUNT_PRECISION } from 'constants/index' import { darken } from 'polished' // import TwitterImage from 'assets/cow-swap/twitter.svg' import OrdersPanel from 'components/OrdersPanel' -import { ApplicationModal } from 'state/application/reducer' import { supportedChainId } from 'utils/supportedChainId' import { formatSmart } from 'utils/format' import Web3Status from 'components/Web3Status' import NetworkSelector from 'components/Header/NetworkSelector' // import SVG from 'react-inlinesvg' -import { - useModalOpen, - /*useShowClaimPopup,*/ - // useToggleSelfClaimModal -} from 'state/application/hooks' + //import { useUserHasAvailableClaim } from 'state/claim/hooks' // import Modal from 'components/Modal' @@ -80,7 +75,7 @@ const StyledNavLink = styled(StyledNavLinkUni)` const BalanceText = styled(BalanceTextUni)` font-weight: 500; - padding: 0 0 0 12px; + padding: 0 6px 0 12px; ${({ theme }) => theme.mediaWidth.upToMedium` overflow: hidden; @@ -250,18 +245,17 @@ export default function Header() { const [isOrdersPanelOpen, setIsOrdersPanelOpen] = useState(false) const closeOrdersPanel = () => setIsOrdersPanelOpen(false) const openOrdersPanel = () => setIsOrdersPanelOpen(true) - const isMenuOpen = useModalOpen(ApplicationModal.MENU) const history = useHistory() const handleBalanceButtonClick = () => history.push('/account') - // Toggle the 'noScroll' class on body, whenever the orders panel or flyout menu is open. + // Toggle the 'noScroll' class on body, whenever the orders panel is open. // This removes the inner scrollbar on the page body, to prevent showing double scrollbars. useEffect(() => { - isOrdersPanelOpen || isMenuOpen - ? document.body.classList.add('noScroll') - : document.body.classList.remove('noScroll') - }, [isOrdersPanelOpen, isMenuOpen]) + isOrdersPanelOpen ? document.body.classList.add('noScroll') : document.body.classList.remove('noScroll') + }, [isOrdersPanelOpen]) + + // const close = useToggleModal(ApplicationModal.MENU) return ( @@ -279,7 +273,25 @@ export default function Header() { Swap Account FAQ - More + +
+ Account + Account + Account + Account + Account + Account +
+ +
+ Account + Account + Account + Account + Account + Account +
+ diff --git a/src/custom/components/Menu/MenuMod.tsx b/src/custom/components/Menu/MenuMod.tsx deleted file mode 100644 index a53f262bce..0000000000 --- a/src/custom/components/Menu/MenuMod.tsx +++ /dev/null @@ -1,371 +0,0 @@ -// eslint-disable-next-line no-restricted-imports -import { t /*, Trans*/ } from '@lingui/macro' -// import { PrivacyPolicyModal } from 'components/PrivacyPolicy' -// import { L2_CHAIN_IDS } from 'constants/chains' -// import { LOCALE_LABEL, SUPPORTED_LOCALES, SupportedLocale } from 'constants/locales' -// import { useActiveLocale } from 'hooks/useActiveLocale' -// import useActiveWeb3React from 'hooks/useActiveWeb3React' -// import { useLocationLinkProps } from 'hooks/useLocationLinkProps' -import React, { /*useEffect,*/ useRef /*, useState*/ } from 'react' -// import { -// BookOpen, -// Check, -// ChevronLeft, -// Coffee, -// FileText, -// Globe, -// HelpCircle, -// Info, -// MessageCircle, -// Moon, -// Sun, -// } from 'react-feather' -import { Link } from 'react-router-dom' -// import { useDarkModeManager } from 'state/user/hooks' -import styled, { css } from 'styled-components/macro' - -import { ReactComponent as MenuIcon } from 'assets/images/menu.svg' -import { useOnClickOutside } from 'hooks/useOnClickOutside' -import { useModalOpen, useToggleModal } from 'state/application/hooks' -import { ApplicationModal } from 'state/application/reducer' -import { ExternalLink } from 'theme' -import { ButtonPrimary } from 'components/Button' - -// MOD imports -import { WithClassName } from 'types' - -export enum FlyoutAlignment { - LEFT = 'LEFT', - RIGHT = 'RIGHT', -} - -const StyledMenuIcon = styled(MenuIcon)` - path { - stroke: ${({ theme }) => theme.text1}; - } -` - -export const StyledMenuButton = styled.button` - width: 100%; - //height: 100%; - border: none; - //background-color: transparent; - margin: 0; - //padding: 0; - height: 35px; - background-color: ${({ theme }) => theme.bg3}; - //border: 1px solid ${({ theme }) => theme.bg0}; - padding: 0.15rem 0.5rem; - border-radius: 0.5rem; - - :hover, - :focus { - cursor: pointer; - outline: none; - background-color: ${({ theme }) => theme.bg4}; - } - - svg { - margin-top: 2px; - } -` - -export const UNIbutton = styled(ButtonPrimary)` - background-color: ${({ theme }) => theme.bg3}; - background: radial-gradient(174.47% 188.91% at 1.84% 0%, #ff007a 0%, #2172e5 100%), #edeef2; - border: none; -` - -export const StyledMenu = styled.div` - margin-left: 0.5rem; // mod - display: flex; - justify-content: center; - align-items: center; - position: relative; - border: none; - text-align: left; -` - -export const MenuFlyout = styled.span<{ flyoutAlignment?: FlyoutAlignment }>` - min-width: 8.125rem; - background-color: ${({ theme }) => theme.bg3}; - box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04), - 0px 24px 32px rgba(0, 0, 0, 0.01); - border-radius: 12px; - padding: 0.5rem; - display: flex; - flex-direction: column; - font-size: 1rem; - position: absolute; - top: 3rem; - right: 0rem; - z-index: 100; - - ${({ flyoutAlignment = FlyoutAlignment.RIGHT }) => - flyoutAlignment === FlyoutAlignment.RIGHT - ? css` - right: 0rem; - ` - : css` - left: 0rem; - `}; - ${({ theme }) => theme.mediaWidth.upToMedium` - top: -17.25rem; - `}; -` - -export const MenuItemBase = css` - display: flex; - flex: 1; - flex-direction: row; - align-items: center; - padding: 0.5rem 0.5rem; - //justify-content: space-between; - color: ${({ theme }) => theme.text2}; - :hover { - color: ${({ theme }) => theme.text1}; - cursor: pointer; - text-decoration: none; - } - > svg { - margin-right: 8px; - } -` - -export const MenuItem = styled(ExternalLink)` - ${MenuItemBase} -` - -export const InternalMenuItem = styled(Link)` - flex: 1; - padding: 0.5rem 0.5rem; - color: ${({ theme }) => theme.text2}; - font-weight: 500; // mod - :hover { - color: ${({ theme }) => theme.text1}; - cursor: pointer; - text-decoration: none; - } - > svg { - margin-right: 8px; - } -` - -/* const InternalLinkMenuItem = styled(InternalMenuItem)` - display: flex; - flex-direction: row; - align-items: center; - padding: 0.5rem 0.5rem; - justify-content: space-between; - text-decoration: none; - :hover { - color: ${({ theme }) => theme.text1}; - cursor: pointer; - text-decoration: none; - } -` - -const ToggleMenuItem = styled.button` - background-color: transparent; - margin: 0; - padding: 0; - border: none; - display: flex; - flex: 1; - flex-direction: row; - align-items: center; - padding: 0.5rem 0.5rem; - justify-content: space-between; - font-size: 1rem; - font-weight: 500; - color: ${({ theme }) => theme.text2}; - :hover { - color: ${({ theme }) => theme.text1}; - cursor: pointer; - text-decoration: none; - } -` - -function LanguageMenuItem({ locale, active, key }: { locale: SupportedLocale; active: boolean; key: string }) { - const { to, onClick } = useLocationLinkProps(locale) - - if (!to) return null - - return ( - -
{LOCALE_LABEL[locale]}
- {active && } - - ) -} - -function LanguageMenu({ close }: { close: () => void }) { - const activeLocale = useActiveLocale() - - return ( - - - - - {SUPPORTED_LOCALES.map((locale) => ( - - ))} - - ) -} */ - -export default function Menu(props: { children?: React.ReactNode } & WithClassName) { - // const { account, chainId } = useActiveWeb3React() - - const node = useRef() - const open = useModalOpen(ApplicationModal.MENU) - const toggleMenu = useToggleModal(ApplicationModal.MENU) - useOnClickOutside(node, open ? toggleMenu : undefined) - /* const togglePrivacyPolicy = useToggleModal(ApplicationModal.PRIVACY_POLICY) - const openClaimModal = useToggleModal(ApplicationModal.ADDRESS_CLAIM) - const showUNIClaimOption = Boolean(!!account && !!chainId && !L2_CHAIN_IDS.includes(chainId)) - const { infoLink } = CHAIN_INFO[chainId ? chainId : SupportedChainId.MAINNET] - - const [darkMode, toggleDarkMode] = useDarkModeManager() - - const [menu, setMenu] = useState<'main' | 'lang'>('main') - - useEffect(() => { - setMenu('main') - }, [open]) - */ - return ( - <> - {/* // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/30451 */} - - - - - - {open && - /* (() => { - switch (menu) { - case 'lang': - return setMenu('main')} /> - case 'main': - default: - return ( - - -
- About -
- - - -
- Help Center -
- - - -
- Request Features -
- - - -
- Discord -
- - - setMenu('lang')}> -
- Language -
- - - toggleDarkMode()}> -
{darkMode ? Light Theme : Dark Theme}
- {darkMode ? : } - - -
- Docs -
- - - togglePrivacyPolicy()}> -
- Legal & Privacy -
- - - {showUNIClaimOption && ( - - Claim UNI - - )} - - ) - } - })()} */ - props?.children} - - {/* */} - - ) -} - -interface NewMenuProps { - flyoutAlignment?: FlyoutAlignment - ToggleUI?: React.FunctionComponent - menuItems: { - content: any - link: string - external: boolean - }[] -} - -const NewMenuFlyout = styled(MenuFlyout)` - top: 3rem !important; -` -const NewMenuItem = styled(InternalMenuItem)` - width: max-content; - text-decoration: none; -` - -const ExternalMenuItem = styled(MenuItem)` - width: max-content; - text-decoration: none; -` - -export const NewMenu = ({ flyoutAlignment = FlyoutAlignment.RIGHT, ToggleUI, menuItems, ...rest }: NewMenuProps) => { - const node = useRef() - const open = useModalOpen(ApplicationModal.POOL_OVERVIEW_OPTIONS) - const toggle = useToggleModal(ApplicationModal.POOL_OVERVIEW_OPTIONS) - useOnClickOutside(node, open ? toggle : undefined) - const ToggleElement = ToggleUI || StyledMenuIcon - return ( - - - {open && ( - - {menuItems.map(({ content, link, external }, i) => - external ? ( - - {content} - - ) : ( - - {content} - - ) - )} - - )} - - ) -} diff --git a/src/custom/components/Menu/index.tsx b/src/custom/components/Menu/index.tsx deleted file mode 100644 index fcca539e28..0000000000 --- a/src/custom/components/Menu/index.tsx +++ /dev/null @@ -1,390 +0,0 @@ -import { Code, HelpCircle, BookOpen, PieChart, Moon, Sun, Repeat, Star, User, ExternalLink } from 'react-feather' - -import MenuMod, { - MenuItem, - InternalMenuItem, - MenuFlyout as MenuFlyoutUni, - MenuItemBase, - StyledMenuButton, -} from './MenuMod' -import { useToggleModal } from 'state/application/hooks' -import styled from 'styled-components/macro' -import { useActiveWeb3React } from 'hooks/web3' - -import { Separator as SeparatorBase } from 'components/SearchModal/styleds' -import { CONTRACTS_CODE_LINK, DISCORD_LINK, DOCS_LINK, DUNE_DASHBOARD_LINK, TWITTER_LINK } from 'constants/index' -import cowRunnerImage from 'assets/cow-swap/game.gif' -import ninjaCowImage from 'assets/cow-swap/ninja-cow.png' -import { ApplicationModal } from 'state/application/reducer' -import { getExplorerAddressLink } from 'utils/explorer' -import { useHasOrders } from 'api/gnosisProtocol/hooks' -import { useHistory } from 'react-router-dom' -import CowBalanceButton, { Wrapper as BalanceButtonWrapper } from 'components/CowBalanceButton' - -import twitterImage from 'assets/cow-swap/twitter.svg' -import discordImage from 'assets/cow-swap/discord.svg' -import SVG from 'react-inlinesvg' - -export * from './MenuMod' - -const ResponsiveInternalMenuItem = styled(InternalMenuItem)` - display: none; - - ${({ theme }) => theme.mediaWidth.upToLarge` - display: flex; - `}; -` - -const MenuItemResponsiveBase = styled.div` - ${MenuItemBase} - display: none; - - ${({ theme }) => theme.mediaWidth.upToSmall` - display: flex; - `}; -` - -const MenuItemResponsive = styled(MenuItemResponsiveBase)` - font-weight: 500; - flex: 0 1 auto; - padding: 16px; - font-size: 18px; - - svg { - width: 18px; - height: 18px; - object-fit: contain; - margin: 0 8px 0 0; - } -` - -export const StyledMenu = styled(MenuMod)` - hr { - margin: 15px 0; - } - - ${MenuItem}, - ${InternalMenuItem}, - ${MenuItemResponsive} { - color: ${({ theme }) => theme.header.menuFlyout.color}; - background: ${({ theme }) => theme.header.menuFlyout.background}; - font-size: 16px; - width: 100%; - - ${({ theme }) => theme.mediaWidth.upToSmall` - padding: 16px; - `}; - - &:hover { - color: ${({ theme }) => theme.header.menuFlyout.colorHover}; - background: ${({ theme }) => theme.header.menuFlyout.colorHoverBg}; - } - } - - ${InternalMenuItem} > a > svg { - width: 18px; - height: 18px; - stroke: transparent; - - > path { - fill: ${({ theme }) => theme.header.menuFlyout.color}; - } - } - - span[aria-label='Play CowGame'] > img { - width: 25px; - height: 20px; - object-fit: contain; - padding: 0 6px 0 0; - } - - ${BalanceButtonWrapper} { - margin: 0 0 12px; - display: none; - - ${({ theme }) => theme.mediaWidth.upToSmall` - display: flex; - margin: 0 12px 12px; - width: 100%; - height: 56px; - justify-content: center; - font-size: 19px; - - > span { - height: 30px; - width: 30px; - border-radius: 30px; - margin: 0 5px 0 0; - } - `} - } - - ${StyledMenuButton} { - height: 38px; - border-radius: 12px; - - ${({ theme }) => theme.mediaWidth.upToSmall` - &::before, - &::after { - content: ''; - position: absolute; - left: -1px; - top: -1px; - background: ${({ theme }) => - `linear-gradient(45deg, ${theme.primary1}, ${theme.primary2}, ${theme.primary3}, ${theme.bg4}, ${theme.primary1}, ${theme.primary2})`}; - background-size: 800%; - width: calc(100% + 2px); - height: calc(100% + 2px); - z-index: -1; - animation: glow 50s linear infinite; - transition: background-position 0.3s ease-in-out; - border-radius: 12px; - } - - &::after { - filter: blur(8px); - } - - &:hover::before, - &:hover::after { - animation: glow 12s linear infinite; - } - } - - `}; -` - -const Policy = styled(InternalMenuItem).attrs((attrs) => ({ - ...attrs, -}))` - font-size: 0.8em; - text-decoration: underline; -` - -const MenuFlyout = styled(MenuFlyoutUni)` - min-width: 240px; - box-shadow: 0 0 100vh 100vw rgb(0 0 0 / 25%); - top: calc(100% + 16px); - order: 1; - - ${({ theme }) => theme.mediaWidth.upToSmall` - top: 0; - left: 0; - position: fixed; - height: 100%; - width: 100%; - border-radius: 0; - box-shadow: none; - overflow-y: auto; - flex-flow: row wrap; - padding: 12px 0 100px; - align-items: flex-start; - align-content: flex-start; - `}; - - > a:not(${ResponsiveInternalMenuItem}) { - display: flex; - } - - > a { - transition: background 0.2s ease-in-out; - align-items: center; - text-decoration: none; - - ${({ theme }) => theme.mediaWidth.upToSmall` - flex: 0 1 auto; - padding: 16px; - font-size: 18px; - `}; - - > span { - display: flex; - align-items: center; - } - } - - > a:hover { - background: ${({ theme }) => theme.disabled}; - border-radius: 6px; - } - - > a > span > svg { - width: 18px; - height: 18px; - object-fit: contain; - margin: 0 8px 0 0; - } -` -export const StyledSVG = styled(SVG)` - fill: ${({ theme }) => theme.text1}; -` - -export const Separator = styled(SeparatorBase)` - background-color: ${({ theme }) => theme.disabled}; - margin: 0.3rem auto; - width: 90%; - - ${({ theme }) => theme.mediaWidth.upToMedium` - width: 100%; - margin: 16px auto; - `}; -` - -export const CloseMenu = styled.button` - display: grid; - align-items: center; - background: ${({ theme }) => theme.header.menuFlyout.closeButtonBg}; - border: 0; - color: ${({ theme }) => theme.black}; - height: 36px; - position: sticky; - top: 0; - cursor: pointer; - border-radius: 6px; - justify-content: center; - padding: 0; - margin: 8px 0 0; - - ${({ theme }) => theme.mediaWidth.upToSmall` - height: 56px; - border-radius: 0; - margin: 0; - width: 100%; - position: fixed; - bottom: 0; - top: initial; - `}; - - &::after { - content: '✕'; - display: block; - font-size: 20px; - margin: 0; - - ${({ theme }) => theme.mediaWidth.upToSmall` - margin: 0 14px 0 0; - font-size: 24px; - `}; - } -` - -interface MenuProps { - darkMode: boolean - toggleDarkMode: () => void -} - -export function Menu({ darkMode, toggleDarkMode }: MenuProps) { - const { account, chainId } = useActiveWeb3React() - const hasOrders = useHasOrders(account) - const showOrdersLink = account && hasOrders - const close = useToggleModal(ApplicationModal.MENU) - const history = useHistory() - const handleBalanceButtonClick = () => { - close() - history.push('/account') - } - - return ( - - - - - - Swap - - - Account - - - - About - - - - - FAQ - - - - - Docs - - - - - Stats - - - - - - {showOrdersLink && ( - - - - )} - - - - - - - - - - - - - - - - Play Cow MEV Slicer - {' '} - MEV Slicer - - - - - Play Cow Runner Game - {' '} - Cow Runner - - toggleDarkMode()}> - {darkMode ? ( - <> - Dark Theme - - ) : ( - <> - - Light Theme - - )} - - - - Terms and conditions - - {/* - Privacy policy - Cookie policy - */} - - - - - ) -} - -export default Menu diff --git a/src/custom/components/MenuDropdown/index.tsx b/src/custom/components/MenuDropdown/index.tsx new file mode 100644 index 0000000000..4a39788bea --- /dev/null +++ b/src/custom/components/MenuDropdown/index.tsx @@ -0,0 +1,29 @@ +import { useState } from 'react' +import { MenuFlyout, Content } from './styled' + +interface MenuProps { + title: string + children: React.ReactNode +} + +export function Menu({ title, children }: MenuProps) { + const [showMenu, setShowMenu] = useState(false) + const handleOnClick = () => setShowMenu(true) + const handleMouseEnter = () => setShowMenu(true) + const handleMouseLeave = () => setShowMenu(false) + + return ( + + + {showMenu && ( + + {children} + + )} + + ) +} + +export default Menu diff --git a/src/custom/components/MenuDropdown/styled.ts b/src/custom/components/MenuDropdown/styled.ts new file mode 100644 index 0000000000..1a02750998 --- /dev/null +++ b/src/custom/components/MenuDropdown/styled.ts @@ -0,0 +1,25 @@ +import styled from 'styled-components/macro' + +export const MenuFlyout = styled.ol` + display: flex; + padding: 0; + margin: 0; + position: relative; +` +export const Content = styled.div` + display: flex; + position: absolute; + top: 100%; + left: 0; + background: red; + border-radius: 16px; + background: #091e32; + box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25); + padding: 16px; + gap: 16px; + + > div { + display: flex; + flex-flow: column wrap; + } +` diff --git a/src/custom/components/Web3Status/index.tsx b/src/custom/components/Web3Status/index.tsx index 556de811cf..9f6b4aab74 100644 --- a/src/custom/components/Web3Status/index.tsx +++ b/src/custom/components/Web3Status/index.tsx @@ -11,7 +11,7 @@ import { STORAGE_KEY_LAST_PROVIDER } from 'constants/index' export const Wrapper = styled.div` color: ${({ theme }) => theme.wallet?.color}; - padding: 1px 1px 1px 6px; + padding: 1px; height: 40px; border: 1px solid transparent; width: 100%;