diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx index d7301f9a2..4ba8120f6 100644 --- a/src/components/Navbar/Navbar.tsx +++ b/src/components/Navbar/Navbar.tsx @@ -3,65 +3,46 @@ import { usePathname, useRouter } from 'next/navigation'; import { JUMPER_LEARN_PATH, - JUMPER_LOYALTY_PATH, - JUMPER_QUESTS_PATH, JUMPER_SCAN_PATH, JUMPER_TX_PATH, JUMPER_WALLET_PATH, } from '@/const/urls'; import { useWelcomeScreen } from '@/hooks/useWelcomeScreen'; import { useMenuStore } from '@/stores/menu'; -import { useSuperfest } from 'src/hooks/useSuperfest'; -import { - NavbarContainer as Container, - Logo, - LogoLink, - NavbarButtons, - NavbarTabs, -} from '.'; +import { NavbarContainer as Container, Logo, LogoLink, NavbarButtons } from '.'; export const Navbar = ({ disableNavbar = false }) => { const router = useRouter(); const pathname = usePathname(); const isLearnPage = pathname?.includes(JUMPER_LEARN_PATH); - const isLoyaltyPage = pathname?.includes(JUMPER_LOYALTY_PATH); const isScanPage = pathname?.includes(JUMPER_SCAN_PATH) || pathname?.includes(JUMPER_TX_PATH) || pathname?.includes(JUMPER_WALLET_PATH); - const isQuestsPage = pathname?.includes(JUMPER_QUESTS_PATH); - const { isSuperfest } = useSuperfest(); const { setWelcomeScreenClosed } = useWelcomeScreen(); const { closeAllMenus } = useMenuStore((state) => state); const handleClick = () => { closeAllMenus(); setWelcomeScreenClosed(false); - - if (pathname === '/gas' || pathname === '/buy') { - return; - } - if (isLearnPage) { - router.push(JUMPER_LEARN_PATH); - } else if (isScanPage) { - router.push(JUMPER_SCAN_PATH); - } else { - router.push('/'); - } }; + let logoHref; + if (isLearnPage) { + logoHref = JUMPER_LEARN_PATH; + } else if (isScanPage) { + logoHref = JUMPER_SCAN_PATH; + } else { + logoHref = '/'; + } + return ( - ); diff --git a/src/components/Navbar/NavbarButtons/RedirectToApp.style.ts b/src/components/Navbar/NavbarButtons/RedirectToApp.style.ts new file mode 100644 index 000000000..2f0c7d6e5 --- /dev/null +++ b/src/components/Navbar/NavbarButtons/RedirectToApp.style.ts @@ -0,0 +1,31 @@ +'use client'; + +import SwapHorizIcon from '@mui/icons-material/SwapHoriz'; +import { Typography } from '@mui/material'; +import { styled } from '@mui/material/styles'; +import { ConnectButton } from '../WalletButton.style'; + +export const RedirectAppButton = styled(ConnectButton)(({ theme }) => ({ + [theme.breakpoints.down('md')]: { + width: 48, + minWidth: 48, + }, +})); + +export const RedirectAppLabel = styled(Typography)(({ theme }) => ({ + display: 'none', + [theme.breakpoints.up('md')]: { + overflow: 'hidden', + textOverflow: 'ellipsis', + display: '-webkit-box', + WebkitLineClamp: 2, + WebkitBoxOrient: 'vertical', + }, +})); + +export const RedirectAppIcon = styled(SwapHorizIcon)(({ theme }) => ({ + display: 'block', + [theme.breakpoints.up('md')]: { + display: 'none', + }, +})); diff --git a/src/components/Navbar/NavbarButtons/RedirectToApp.tsx b/src/components/Navbar/NavbarButtons/RedirectToApp.tsx index 791633316..2f872f640 100644 --- a/src/components/Navbar/NavbarButtons/RedirectToApp.tsx +++ b/src/components/Navbar/NavbarButtons/RedirectToApp.tsx @@ -1,10 +1,14 @@ 'use client'; -import { Typography, useTheme } from '@mui/material'; +import { useTheme } from '@mui/material'; import Link from 'next/link'; import { useTranslation } from 'react-i18next'; import { TrackingAction, TrackingCategory } from 'src/const/trackingKeys'; import { useUserTracking } from 'src/hooks/userTracking'; -import { ConnectButton as RedirectAppButton } from '../WalletButton.style'; +import { + RedirectAppButton, + RedirectAppIcon, + RedirectAppLabel, +} from './RedirectToApp.style'; interface RedirectToAppProps { hideConnectButton: boolean; @@ -33,18 +37,10 @@ export const RedirectToApp = ({ hideConnectButton }: RedirectToAppProps) => { ...(!hideConnectButton && { marginRight: theme.spacing(1) }), }} > - + + {t('blog.openApp')} - + ); }; diff --git a/src/components/Navbar/WalletButton.style.ts b/src/components/Navbar/WalletButton.style.ts index 57a069266..70589535b 100644 --- a/src/components/Navbar/WalletButton.style.ts +++ b/src/components/Navbar/WalletButton.style.ts @@ -1,9 +1,16 @@ import { ButtonPrimary } from '@/components/Button'; -import { alpha, Avatar, Badge, Skeleton, styled } from '@mui/material'; +import { + alpha, + Avatar, + Badge, + Skeleton, + styled, + Typography, +} from '@mui/material'; +import Image from 'next/image'; import { getContrastAlphaColor } from 'src/utils/colors'; import { ButtonTransparent } from '../Button'; import { avatarMask12 } from '../Mask.style'; -import Image from 'next/image'; export const WalletMgmtWalletAvatar = styled(Avatar)(() => ({ height: 32, @@ -35,6 +42,14 @@ export const ConnectButton = styled(ButtonPrimary)(({ theme }) => ({ textWrap: 'nowrap', })); +export const ConnectButtonLabel = styled(Typography)(({ theme }) => ({ + display: '-webkit-box', + overflow: 'hidden', + textOverflow: 'ellipsis', + WebkitLineClamp: 2, + WebkitBoxOrient: 'vertical', +})); + export const WalletMenuButton = styled(ButtonTransparent)(({ theme }) => ({ padding: theme.spacing(1), paddingRight: theme.spacing(1.5), @@ -78,3 +93,10 @@ export const SkeletonWalletMenuButton = styled(Skeleton)(({ theme }) => ({ marginRight: 1.1, marginLeft: 1.1, })); + +export const WalletLabel = styled(Typography)(({ theme }) => ({ + display: 'block', + marginRight: theme.spacing(0.25), + marginLeft: theme.spacing(0.75), + width: 'auto', +})); diff --git a/src/components/Navbar/WalletButton.tsx b/src/components/Navbar/WalletButton.tsx index ed861249b..4bcb22ae2 100644 --- a/src/components/Navbar/WalletButton.tsx +++ b/src/components/Navbar/WalletButton.tsx @@ -20,8 +20,10 @@ import { XPIcon } from '../illustrations/XPIcon'; import { PromoLabel } from '../PromoLabel.style'; import { ConnectButton, + ConnectButtonLabel, ImageWalletMenuButton, SkeletonWalletMenuButton, + WalletLabel, WalletMenuButton, WalletMgmtBadge, WalletMgmtChainAvatar, @@ -72,18 +74,9 @@ export const WalletButtons = () => { openWalletMenu(); }} > - + {t('navbar.connect')} - + ) : ( @@ -143,14 +136,9 @@ export const WalletButtons = () => { /> ) : null} - + {_walletDigest} - + )} diff --git a/src/components/Portfolio/Portfolio.styles.ts b/src/components/Portfolio/Portfolio.styles.ts index 20caf8c87..a7df3c821 100644 --- a/src/components/Portfolio/Portfolio.styles.ts +++ b/src/components/Portfolio/Portfolio.styles.ts @@ -1,19 +1,15 @@ import { Accordion, - AvatarGroup, Avatar, - Typography, - circularProgressClasses, - CircularProgress as MuiCircularProgress, - keyframes, + AvatarGroup, + Box, darken, Divider, - Box, + Typography, } from '@mui/material'; -import { styled } from '@mui/system'; import { lighten } from '@mui/material/styles'; -import { AccordionProps } from '@mui/material/Accordion'; import SvgIcon from '@mui/material/SvgIcon/SvgIcon'; // Import AccordionProps +import { styled } from '@mui/system'; export const TotalValue = styled(Typography)(({ theme }) => ({ color: theme.palette.text.primary, @@ -105,9 +101,7 @@ export const PortfolioBox = styled(Box)(({ theme }) => ({ flexDirection: 'column', display: 'flex', justifyContent: 'center', - padding: '16px', - paddingTop: '0px', - paddingBottom: '0px', + padding: theme.spacing(0, 2), })); export const NoTokenImageBox = styled(Box)(() => ({ diff --git a/src/hooks/useImageStatus.ts b/src/hooks/useImageStatus.ts index 13e6e2f52..daa69a1df 100644 --- a/src/hooks/useImageStatus.ts +++ b/src/hooks/useImageStatus.ts @@ -1,4 +1,4 @@ -import { useState, useEffect } from 'react'; +import { useEffect, useState } from 'react'; import { DEFAULT_EFFIGY } from 'src/const/urls'; const useImageStatus = (address: string | undefined) => {