chore: merge develop

package.json

@@ -77,7 +77,7 @@
     "prettier": "^3.3.1",
     "rollup-plugin-polyfill-node": "^0.13.0",
     "typescript": "^5.4.5",
-    "web-vitals": "^3.5.2"
+    "web-vitals": "^4.1.0"
   },
   "scripts": {
     "dev": "next dev",

src/app/[lng]/[partnerTheme]/page.tsx

@@ -1,4 +1,7 @@
 import App from '../../ui/app/App';
+import { WidgetContainer, Widgets } from '@/components/Widgets';
+import { Widget } from '@/components/Widgets/Widget';
+import { getCookies } from '@/app/lib/getCookies';
 
 export const dynamicParams = false;
 
@@ -23,5 +26,20 @@ export async function generateStaticParams() {
 }
 
 export default function Page() {
-  return <App starterVariant="default" />;
+  const variant = 'default'; // exchange
+  const { activeTheme, welcomeScreenClosed } = getCookies();
+  const isWelcomeScreenClosed = welcomeScreenClosed === 'true';
+
+  return (
+    <App starterVariant={variant} isWelcomeScreenClosed={isWelcomeScreenClosed}>
+      <WidgetContainer welcomeScreenClosed={true}>
+        <Widgets
+          activeTheme={activeTheme}
+          closedWelcomeScreen={isWelcomeScreenClosed}
+          widgetVariant={variant}
+        />
+        <Widget starterVariant={variant} activeTheme={activeTheme} />
+      </WidgetContainer>
+    </App>
+  );
 }

src/app/[lng]/buy/page.tsx

@@ -1,7 +1,26 @@
 import App from '@/app/ui/app/App';
+import { WidgetContainer, Widgets } from '@/components/Widgets';
+import { OnRamper } from '@/components/OnRamper';
+import { getCookies } from '@/app/lib/getCookies';
 
-const Page = async () => {
-  return <App starterVariant="buy" />;
+const Page = () => {
+  const variant = 'buy';
+  const { activeTheme, welcomeScreenClosed } = getCookies();
+  const isWelcomeScreenClosed = welcomeScreenClosed === 'true';
+
+  return (
+    <App starterVariant={variant} isWelcomeScreenClosed={isWelcomeScreenClosed}>
+      <WidgetContainer welcomeScreenClosed={true}>
+        <Widgets
+          activeTheme={activeTheme}
+          closedWelcomeScreen={!!welcomeScreenClosed}
+          widgetVariant={variant}
+        />
+
+        <OnRamper />
+      </WidgetContainer>
+    </App>
+  );
 };
 
 export default Page;

src/app/[lng]/gas/page.tsx

@@ -1,7 +1,25 @@
 import App from '@/app/ui/app/App';
+import { WidgetContainer, Widgets } from '@/components/Widgets';
+import { Widget } from '@/components/Widgets/Widget';
+import { getCookies } from '@/app/lib/getCookies';
 
-const Page = async () => {
-  return <App starterVariant="refuel" />;
+const Page = () => {
+  const variant = 'refuel';
+  const { activeTheme, welcomeScreenClosed } = getCookies();
+  const isWelcomeScreenClosed = welcomeScreenClosed === 'true';
+
+  return (
+    <App starterVariant={variant} isWelcomeScreenClosed={isWelcomeScreenClosed}>
+      <WidgetContainer welcomeScreenClosed={true}>
+        <Widgets
+          activeTheme={activeTheme}
+          closedWelcomeScreen={!!welcomeScreenClosed}
+          widgetVariant={variant}
+        />
+        <Widget starterVariant={variant} activeTheme={activeTheme} />
+      </WidgetContainer>
+    </App>
+  );
 };
 
 export default Page;

src/app/[lng]/layout.tsx

@@ -1,6 +1,9 @@
 import { AppProvider } from '@/providers/AppProvider';
 import i18nConfig from 'i18nconfig';
 import React from 'react';
+import { FeatureCards } from '@/components/FeatureCards';
+import { Snackbar } from '@/components/Snackbar';
+import { PixelBg } from '@/components/illustrations/PixelBg';
 
 export default async function RootLayout({
   children,
@@ -9,7 +12,14 @@ export default async function RootLayout({
   children: React.ReactNode;
   params: { lng: string };
 }) {
-  return <AppProvider lang={lng}>{children}</AppProvider>;
+  return (
+    <AppProvider lang={lng}>
+      {children}
+      <FeatureCards />
+      <Snackbar />
+      <PixelBg />
+    </AppProvider>
+  );
 }
 
 export function generateStaticParams() {

src/app/[lng]/page.tsx

@@ -1,5 +1,24 @@
 import App from '../ui/app/App';
+import { WidgetContainer, Widgets } from '@/components/Widgets';
+import { Widget } from '@/components/Widgets/Widget';
+import { getCookies } from '@/app/lib/getCookies';
+import { WidgetSkeleton } from '@/components/Widgets/WidgetSkeleton';
 
 export default function Page() {
-  return <App starterVariant="default" />;
+  const variant = 'default'; // exchange
+  const { activeTheme, welcomeScreenClosed } = getCookies();
+  const isWelcomeScreenClosed = welcomeScreenClosed === 'true';
+
+  return (
+    <App starterVariant={variant} isWelcomeScreenClosed={isWelcomeScreenClosed}>
+      <WidgetContainer welcomeScreenClosed={true}>
+        <Widgets
+          activeTheme={activeTheme}
+          closedWelcomeScreen={isWelcomeScreenClosed}
+          widgetVariant={variant}
+        />
+        <Widget starterVariant={variant} activeTheme={activeTheme} />
+      </WidgetContainer>
+    </App>
+  );
 }

src/app/ui/app/App.style.ts

@@ -0,0 +1,20 @@
+import { Slide, styled } from '@mui/material';
+
+export const StyledSlide = styled(Slide)(({ theme }) => ({
+  // widget wrappers -> animations
+  '& +.widget-container .widget-wrapper > div': {
+    [`@media screen and (min-height: 700px)`]: {
+      marginTop: 'calc( 50vh - 680px / 2.75 - 40px - 24px )',
+      '&:hover': {
+        marginTop: 'calc( 50vh - 680px / 2.75 - 40px - 48px )',
+      },
+    },
+
+    [`@media screen and (min-height: 900px)`]: {
+      marginTop: 'calc( 50vh - 680px / 2.75 - 104px - 24px)',
+      '&:hover': {
+        marginTop: 'calc( 50vh - 680px / 2.75 - 104px - 48px)',
+      },
+    },
+  },
+}));

src/app/ui/app/App.tsx

@@ -1,31 +1,74 @@
-import { getCookies } from '@/app/lib/getCookies';
-import { FeatureCards } from '@/components/FeatureCards/FeatureCards';
-import { Snackbar } from '@/components/Snackbar/Snackbar';
+'use client';
+
 import { WelcomeScreen } from '@/components/WelcomeScreen/WelcomeScreen';
-import { Widgets } from '@/components/Widgets/Widgets';
 import type { StarterVariantType } from '@/types/internal';
-import { PixelBg } from '@/components/illustrations/PixelBg';
+import { WidgetContainer } from '@/components/Widgets';
+import { TrackingAction, TrackingCategory } from '@/const/trackingKeys';
+import { EventTrackingTool } from '@/types/userTracking';
+import { useWelcomeScreen } from '@/hooks/useWelcomeScreen';
+import { useUserTracking } from '@/hooks/userTracking';
+import { Box } from '@mui/material';
+import { StyledSlide } from './App.style';
 
 export interface AppProps {
   starterVariant: StarterVariantType;
+  children: React.ReactNode;
+  isWelcomeScreenClosed: boolean;
 }
 
-const App = ({ starterVariant }: AppProps) => {
-  const { activeTheme, welcomeScreenClosed } = getCookies();
-  const isWelcomeScreenClosed = welcomeScreenClosed === 'true';
+const App = ({ starterVariant, isWelcomeScreenClosed, children }: AppProps) => {
+  const { trackEvent } = useUserTracking();
+
+  const welcomeScreen = useWelcomeScreen(isWelcomeScreenClosed);
+
+  const handleWelcomeScreenEnter = () => {
+    if (!welcomeScreen.welcomeScreenClosed) {
+      welcomeScreen.setWelcomeScreenClosed(true);
+
+      trackEvent({
+        category: TrackingCategory.WelcomeScreen,
+        action: TrackingAction.CloseWelcomeScreen,
+        label: 'enter_welcome_screen_on_widget-click',
+        data: { widgetVariant: starterVariant },
+        disableTrackingTool: [
+          EventTrackingTool.ARCx,
+          EventTrackingTool.Cookie3,
+        ],
+        enableAddressable: true,
+      });
+    }
+  };
 
   return (
-    <>
-      <WelcomeScreen closed={isWelcomeScreenClosed} />
-      <Widgets
-        widgetVariant={starterVariant}
-        activeTheme={activeTheme}
-        closedWelcomeScreen={isWelcomeScreenClosed}
-      />
-      <FeatureCards />
-      <Snackbar />
-      <PixelBg />
-    </>
+    <Box onClick={handleWelcomeScreenEnter}>
+      <StyledSlide
+        direction="up"
+        in={!welcomeScreen.welcomeScreenClosed}
+        appear={false}
+        timeout={400}
+        className="welcome-screen-container"
+        mountOnEnter
+        unmountOnExit
+      >
+        <Box
+          style={{
+            zIndex: 1000,
+            position: 'absolute',
+            bottom: 0,
+            left: 0,
+            right: 0,
+          }}
+        >
+          <WelcomeScreen closed={isWelcomeScreenClosed} />
+        </Box>
+      </StyledSlide>
+      <WidgetContainer
+        welcomeScreenClosed={isWelcomeScreenClosed}
+        className="widget-container"
+      >
+        {children}
+      </WidgetContainer>
+    </Box>
   );
 };
 

src/components/FeatureCards/FeatureCard.tsx

@@ -187,6 +187,12 @@ export const FeatureCard = ({ data, isSuccess }: FeatureCardProps) => {
         <FeatureCardContent>
           <FeatureCardCloseButton
             disableRipple={true}
+            aria-label="close"
+            sx={{
+              position: 'absolute',
+              right: 1,
+              top: 1,
+            }}
             onClick={(e) => handleClose(e)}
           >
             <CloseIcon

src/components/Navbar/Navbar.tsx

@@ -22,6 +22,11 @@ export const Navbar = () => {
   const handleClick = () => {
     closeAllMenus();
     setWelcomeScreenClosed(false);
+
+    if (pathname === '/gas/') {
+      return;
+    }
+
     isLearnPage ? router.push(JUMPER_LEARN_PATH) : router.push('/');
   };
 

src/components/Navbar/NavbarButtons/NavbarButtons.tsx

@@ -58,6 +58,7 @@ export const NavbarButtons = () => {
         <MenuToggle
           ref={mainMenuAnchor}
           id="main-burger-menu-button"
+          aria-label="Main Menu"
           aria-controls={openMainMenu ? 'main-burger-menu' : undefined}
           aria-expanded={openMainMenu ? 'true' : undefined}
           aria-haspopup="true"

src/components/Navbar/NavbarTabs/useNavbarTabs.tsx

@@ -5,12 +5,11 @@ import {
 } from '@/const/trackingKeys';
 import { useUserTracking } from '@/hooks/userTracking/useUserTracking';
 import { EventTrackingTool } from '@/types/userTracking';
-import { replacePathInUrl } from '@/utils/replacePathInUr';
 import CreditCardIcon from '@mui/icons-material/CreditCard';
 import EvStationOutlinedIcon from '@mui/icons-material/EvStationOutlined';
 import SwapHorizIcon from '@mui/icons-material/SwapHoriz';
 import { useTheme } from '@mui/material';
-import { usePathname, useRouter } from 'next/navigation';
+import { useRouter } from 'next/navigation';
 import { useTranslation } from 'react-i18next';
 
 interface useNavbarTabsProps {
@@ -22,15 +21,24 @@ export const useNavbarTabs = ({ navbarPageReload }: useNavbarTabsProps) => {
   const { t } = useTranslation();
   const theme = useTheme();
   const router = useRouter();
-  const pathname = usePathname();
 
   const handleClickTab =
     (tab: string) => (event: React.MouseEvent<HTMLDivElement>) => {
-      window.history.replaceState(null, document.title, `/${tab}`);
-      pathname && replacePathInUrl(pathname, tab);
-      if (navbarPageReload) {
-        router.push(`/${tab}`);
+      // Does not get updated if taken from the hook for some reasons
+      const searchParams = new URLSearchParams(window.location.search);
+
+      // Only replace it if exists
+      if (searchParams.has('toToken')) {
+        searchParams.set(
+          'toToken',
+          '0x0000000000000000000000000000000000000000',
+        );
       }
+
+      let path = searchParams.toString();
+      path = path.startsWith('?') ? path.substring(1) : path;
+
+      router.push(`/${tab}?${path}`);
       trackEvent({
         category: TrackingCategory.Navigation,
         action: TrackingAction.SwitchTab,
@@ -60,11 +68,11 @@ export const useNavbarTabs = ({ navbarPageReload }: useNavbarTabsProps) => {
           }}
         />
       ),
-      onClick: handleClickTab('exchange'),
+      onClick: handleClickTab(''),
     },
     {
       label: t('navbar.links.refuel'),
-      onClick: handleClickTab('refuel'),
+      onClick: handleClickTab('gas/'),
       value: 1,
       icon: (
         <EvStationOutlinedIcon
@@ -81,7 +89,7 @@ export const useNavbarTabs = ({ navbarPageReload }: useNavbarTabsProps) => {
     },
     {
       label: t('navbar.links.buy'),
-      onClick: handleClickTab('buy'),
+      onClick: handleClickTab('buy/'),
       value: 2,
       icon: (
         <CreditCardIcon

src/components/OnRamper/OnRamper.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { WidgetWrapper } from '@/components/Widgets';
 import { useSettingsStore } from '@/stores/settings';
 import { removeHash } from '@/utils/removeHash';

src/components/Tabs/Tabs.tsx

@@ -51,6 +51,7 @@ export const Tabs = ({
             icon={el.icon}
             label={el.label}
             id={`tab-${el.label ?? 'key'}-${el.value}`}
+            aria-label={el.label}
             aria-controls={`simple-tabpanel-${index}`}
             sx={tabStyles}
           />