Develop Release

src/app/[lng]/layout.tsx

@@ -18,7 +18,7 @@ import type { ActiveThemeResult } from '../lib/getActiveTheme';
 import { getActiveTheme } from '../lib/getActiveTheme';
 import { description, siteName, title } from '../lib/metadata';
 import { getSiteUrl } from '@/const/urls';
-import ForceReloadOnUpdate from '@/components/ForceReloadOnUpdate';
+import { Banner } from 'src/components/Banner/Banner';
 
 export const metadata: Metadata = {
   title,
@@ -181,8 +181,10 @@ export default async function RootLayout({
                   <SettingsStoreProvider
                     welcomeScreenClosed={welcomeScreenClosed}
                   >
-                    <ForceReloadOnUpdate />
-                    <WalletProvider>{children}</WalletProvider>
+                    <WalletProvider>
+                      <Banner />
+                      {children}
+                    </WalletProvider>
                   </SettingsStoreProvider>
                 </ThemeProvider>
               </NextThemeProvider>

src/components/Banner/Banner.style.ts

@@ -0,0 +1,20 @@
+import { Box, darken, lighten, styled } from '@mui/material';
+
+export const BannerContainer = styled(Box)(({ theme }) => ({
+  flex: 1,
+  display: 'flex',
+  justifyContent: 'center',
+  textAlign: 'center',
+  alignItems: 'center',
+  width: '100%',
+  padding: '10px',
+  background: theme.palette.mode === 'dark' ? '#30007A' : '#CEADFF',
+  fontWeight: 700,
+  cursor: 'pointer',
+  ':hover': {
+    backgroundColor:
+      theme.palette.mode === 'dark'
+        ? lighten('#30007A', 0.04)
+        : darken('#CEADFF', 0.04),
+  },
+}));

src/components/Banner/Banner.tsx

@@ -0,0 +1,80 @@
+'use client';
+import { Theme, Typography, useMediaQuery, useTheme } from '@mui/material';
+import Image from 'next/image';
+import { BannerContainer } from './Banner.style';
+import { useUserTracking } from 'src/hooks/userTracking';
+import {
+  TrackingAction,
+  TrackingCategory,
+  TrackingEventParameter,
+} from '@/const/trackingKeys';
+
+export const Banner = () => {
+  const theme = useTheme();
+  const { trackEvent } = useUserTracking();
+
+  const handleClick = () => {
+    trackEvent({
+      category: TrackingCategory.Banner,
+      action: TrackingAction.ClickBanner,
+      label: 'click-banner-cta',
+      data: {
+        [TrackingEventParameter.ActiveCampaign]: 'wrapped-2024',
+      },
+    });
+  };
+
+  const isSmallScreen = useMediaQuery((theme: Theme) =>
+    theme.breakpoints.down('md'),
+  );
+
+  return (
+    <a
+      href="https://wrapped.jumper.exchange"
+      target="_blank"
+      style={{ textDecoration: 'none', color: 'inherit' }}
+    >
+      <BannerContainer onClick={handleClick}>
+        <Image
+          alt="jumper-logo"
+          width={24}
+          height={24}
+          style={{ marginRight: 8 }}
+          src={
+            theme.palette.mode === 'dark'
+              ? 'https://strapi.jumper.exchange/uploads/jumper_04f15d06be.svg'
+              : 'https://strapi.jumper.exchange/uploads/jumper_57348536c0.svg'
+          }
+        />
+        <Typography
+          color={
+            theme.palette.mode === 'dark'
+              ? '#FFFFFFD6'
+              : theme.palette.accent1.main
+          }
+          sx={{
+            fontSize: '16px',
+            fontWeight: 700,
+            lineHeight: '20px',
+          }}
+        >
+          {' '}
+          {isSmallScreen
+            ? 'Your 2024 Jumper Wrapped is here'
+            : 'Your 2024 Jumper Wrapped is here. Wrap your year'}{' '}
+        </Typography>
+        <Image
+          alt="arrow-icon"
+          width={24}
+          height={24}
+          style={{ marginLeft: 8 }}
+          src={
+            theme.palette.mode === 'dark'
+              ? 'https://strapi.jumper.exchange/uploads/button_darkl_70bedec2df.svg'
+              : 'https://strapi.jumper.exchange/uploads/theme_c92ac9f474.svg'
+          }
+        />
+      </BannerContainer>
+    </a>
+  );
+};

src/components/Menus/MainMenu/useMainMenuContent.tsx

@@ -12,6 +12,7 @@ import {
   JUMPER_LOYALTY_PATH,
   JUMPER_SCAN_PATH,
   JUMPER_WASH_PATH,
+  JUMPER_WRAPPED_URL,
   X_URL,
 } from '@/const/urls';
 import { useUserTracking } from '@/hooks/userTracking/useUserTracking';
@@ -21,8 +22,8 @@ import { getContrastAlphaColor } from '@/utils/colors';
 import AccountCircleIcon from '@mui/icons-material/AccountCircle';
 import DeveloperModeIcon from '@mui/icons-material/DeveloperMode';
 import LanguageIcon from '@mui/icons-material/Language';
-import LocalLaundryServiceIcon from '@mui/icons-material/LocalLaundryService';
 import SchoolIcon from '@mui/icons-material/School';
+import ViewCarouselIcon from '@mui/icons-material/ViewCarousel';
 import SearchOutlinedIcon from '@mui/icons-material/SearchOutlined';
 import XIcon from '@mui/icons-material/X';
 import { Typography } from '@mui/material';
@@ -160,6 +161,21 @@ export const useMainMenuContent = () => {
         router.push(JUMPER_LOYALTY_PATH);
       },
     },
+    {
+      label: 'Jumper Wrapped',
+      prefixIcon: <ViewCarouselIcon />,
+      showMoreIcon: false,
+      link: { url: JUMPER_WRAPPED_URL, external: true },
+      onClick: () => {
+        trackEvent({
+          category: TrackingCategory.Menu,
+          label: 'click-jumper-learn-link',
+          action: TrackingAction.ClickJumperLearnLink,
+          data: { [TrackingEventParameter.Menu]: 'jumper_wrapped' },
+        });
+        closeAllMenus();
+      },
+    },
     {
       label: 'Jumper Learn',
       prefixIcon: <SchoolIcon />,

src/components/Widgets/Widget.tsx

@@ -149,11 +149,9 @@ export function Widget({
       },
       bridges: {
         allow: configTheme?.allowedBridges,
-        deny: ['allbridge', 'celerim', 'squid'],
       },
       exchanges: {
         allow: configTheme?.allowedExchanges,
-        deny: ['bebop', 'paraswap', '0x'],
       },
       languages: {
         default: i18n.language as LanguageKey,

src/const/trackingKeys.ts

@@ -78,6 +78,9 @@ export enum TrackingAction {
   JoinDiscordCommunity = 'action_join_discord_community',
   OpenDiscordSupport = 'action_open_discord_support',
   PoweredBy = 'action_click_powered_by',
+
+  //Banner
+  ClickBanner = 'action_click_banner',
 }
 
 export enum TrackingCategory {
@@ -107,6 +110,7 @@ export enum TrackingCategory {
   BlogArticle = 'cat_blog_article',
   Missions = 'cat_missions',
   Quests = 'cat_quests',
+  Banner = 'cat_banner',
 }
 
 // can be used as custom dimensions / metrics
@@ -222,4 +226,7 @@ export enum TrackingEventParameter {
   SearchFirstResultName = 'param_search_first_result_name',
   SearchFirstResultSymbol = 'param_search_first_result_symbol',
   SearchFirstResultChainId = 'param_search_first_result_chain_id',
+
+  //Banner
+  ActiveCampaign = 'param_banner_campaign',
 }

src/const/urls.ts

@@ -18,6 +18,7 @@ export const JUMPER_WALLET_PATH = '/wallet';
 export const JUMPER_FEST_PATH = '/superfest';
 export const JUMPER_MEMECOIN_PATH = '/memecoins';
 export const JUMPER_QUESTS_PATH = '/quests';
+export const JUMPER_WRAPPED_URL = 'https://wrapped.jumper.exchange';
 
 export const GALXE_ENDPOINT = 'https://graphigo.prd.galaxy.eco/query';
 

src/hooks/useStrapi.ts

@@ -186,6 +186,8 @@ export const useStrapi = <T>({
   // show drafts ONLY on development env
   process.env.NEXT_PUBLIC_ENVIRONMENT === 'development' &&
     apiUrl.searchParams.set('publicationState', 'preview');
+  process.env.NEXT_PUBLIC_ENVIRONMENT === 'development' &&
+    apiUrl.searchParams.set('pagination[pageSize]', '50');
 
   // use local strapi on develop || prod strapi
   const apiAccesToken =

src/middleware.ts

@@ -21,5 +21,5 @@ export function middleware(request: NextRequest) {
 // Applies this middleware only to specific paths
 export const config = {
   matcher:
-    '/((?!api|static|_next|favicon\\.ico|.*\\.(?:png|jp?eg|gif|webp|svg|ico|riv)).*)',
+    '/((?!api|static|_next|favicon\\.ico|.*\\.(?:png|jp?eg|gif|webp|svg|ico|xml|txt|riv)).*)',
 };

tests/e2e.spec.ts

@@ -74,7 +74,7 @@ test.describe('Jumper full e2e flow', () => {
     page,
   }) => {
     await openOrCloseMainMenu(page);
-    await checkTheNumberOfMenuItems(page, 9);
+    await checkTheNumberOfMenuItems(page, 10);
     await page.locator('body').click();
     await expect(page.getByRole('menu')).not.toBeVisible();
   });