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 (
-
+
- {/* {!isScanPage && !isLearnPage && !disableNavbar && (
-
- )} */}
);
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) => {