style: fix partner theme image

src/Layout.tsx

@@ -1,11 +1,8 @@
 import type { PropsWithChildren } from 'react';
 import { BackgroundGradient } from './components/BackgroundGradient/BackgroundGradient';
 import { Navbar } from './components/Navbar/Navbar';
-import { PoweredBy } from './components/PoweredBy/PoweredBy';
 import { Snackbar } from './components/Snackbar/Snackbar';
-import { SuperfestPresentedByBox } from './components/Superfest/SuperfestPresentedBy/SuperfestPresentedByBox';
 import { SupportModal } from './components/SupportModal/SupportModal';
-import { PartnerThemeFooterImage } from './components/PartnerThemeFooterImage';
 
 interface LayoutProps {
   fixedPoweredBy?: boolean | undefined;
@@ -22,7 +19,6 @@ export const Layout: React.FC<PropsWithChildren<LayoutProps>> = ({
       {children}
       <SupportModal />
       <Snackbar />
-      <PartnerThemeFooterImage />
     </>
   );
 };

src/app/[lng]/(main)/page.tsx

@@ -1,7 +1,7 @@
-import App from '../../ui/app/App';
+import { getCookies } from '@/app/lib/getCookies';
 import { WidgetContainer, Widgets } from '@/components/Widgets';
 import { Widget } from '@/components/Widgets/Widget';
-import { getCookies } from '@/app/lib/getCookies';
+import App from '../../ui/app/App';
 
 export default function Page() {
   const variant = 'default'; // exchange

src/app/ui/app/App.tsx

@@ -1,12 +1,11 @@
 'use client';
 
 import { WelcomeScreen } from '@/components/WelcomeScreen/WelcomeScreen';
-import type { StarterVariantType } from '@/types/internal';
-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 type { StarterVariantType } from '@/types/internal';
+import { EventTrackingTool } from '@/types/userTracking';
 import { Box } from '@mui/material';
 import { StyledSlide } from './App.style';
 
@@ -62,12 +61,7 @@ const App = ({ starterVariant, isWelcomeScreenClosed, children }: AppProps) => {
           <WelcomeScreen closed={welcomeScreen.welcomeScreenClosed!} />
         </Box>
       </StyledSlide>
-      <WidgetContainer
-        welcomeScreenClosed={welcomeScreen.welcomeScreenClosed!}
-        className="widget-container"
-      >
-        {children}
-      </WidgetContainer>
+      {children}
     </Box>
   );
 };

src/components/Alerts/InfoAlert/InfoAlert.style.ts

@@ -2,22 +2,24 @@ import type { BoxProps, Breakpoint } from '@mui/material';
 import { Box } from '@mui/material';
 
 import { darken, lighten, styled } from '@mui/material/styles';
+import { ButtonPrimary } from 'src/components/Button';
 import { IconButtonAlpha } from 'src/components/IconButton';
 import { getContrastAlphaColor } from 'src/utils/colors';
 import { InfoMessageCard } from '../../MessageCard/';
-import { ButtonPrimary } from 'src/components/Button';
 
 export const InfoAlertContainer = styled(Box)<BoxProps>(({ theme }) => ({
   display: 'flex',
   width: '100%',
   flexDirection: 'row',
   justifyContent: 'flex-start',
-  position: 'fixed',
   left: 0,
   padding: theme.spacing(1.5),
+  marginTop: theme.spacing(3),
   bottom: 0,
   zIndex: 2,
-  [theme.breakpoints.up('sm' as Breakpoint)]: {
+  [theme.breakpoints.up('md' as Breakpoint)]: {
+    marginTop: 0,
+    position: 'fixed',
     width: 'auto',
   },
 }));

src/components/Alerts/InfoAlert/InfoAlert.tsx

@@ -2,11 +2,10 @@ import {
   InfoMessageCard,
   InfoMessageCardTitle,
 } from '@/components/MessageCard';
-import CloseIcon from '@mui/icons-material/Close';
 import InfoIcon from '@mui/icons-material/Info';
 import { Slide, Typography, useTheme } from '@mui/material';
 import { useEffect, useState } from 'react';
-import { InfoAlertButton, InfoAlertContainer } from '.';
+import { InfoAlertContainer } from '.';
 
 export interface InfoAlertProps {
   title: string;
@@ -17,12 +16,13 @@ export interface InfoAlertProps {
 export const InfoAlert = ({ title, subtitle, active }: InfoAlertProps) => {
   const [closed, setClosed] = useState(false);
   const theme = useTheme();
-  const handleClose = (
-    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
-  ) => {
-    event.stopPropagation();
-    setClosed(true);
-  };
+
+  // const handleClose = (
+  //   event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+  // ) => {
+  //   event.stopPropagation();
+  //   setClosed(true);
+  // };
 
   useEffect(() => {
     active && setClosed(false);

src/components/BackgroundGradient/BackgroundGradient.style.tsx

@@ -144,14 +144,14 @@ export const BlogBackgroundGradient = styled(BackgroundGradient)(
   }),
 );
 
-export const SuperfestBackgroundContainer = styled('div')(({ theme }) => ({
+export const SuperfestBackgroundContainer = styled('div')(() => ({
   position: 'fixed',
   backgroundRepeat: 'repeat',
   width: '100%',
   height: '100%',
   backgroundImage: `url(https://strapi.li.finance/uploads/Superfest_OP_9e52e7917e.svg)`,
   overflow: 'hidden',
-  pointerEvents: 'none',
+  // pointerEvents: 'none',
   left: 0,
   bottom: 0,
   right: 0,

src/components/BackgroundGradient/BackgroundGradient.tsx

@@ -1,18 +1,18 @@
 'use client';
 import { useTheme, type CSSObject } from '@mui/material';
+import { useMemo } from 'react';
+import { useMainPaths } from 'src/hooks/useMainPaths';
+import { usePartnerTheme } from 'src/hooks/usePartnerTheme';
+import { useSuperfest } from 'src/hooks/useSuperfest';
 import {
   BackgroundGradientBottomLeft,
   BackgroundGradientBottomRight,
   BackgroundGradientContainer,
   BackgroundGradientTopCenter,
-  SuperfestBackgroundContainer,
 } from '.';
 import { SirBridgeLot } from '../illustrations/SirBridgeLot';
 import { FixBoxWithNoOverflow, MovingBox } from './MovingBox.style';
-import { usePartnerTheme } from 'src/hooks/usePartnerTheme';
-import { useSuperfest } from 'src/hooks/useSuperfest';
-import { useMainPaths } from 'src/hooks/useMainPaths';
-import { useMemo } from 'react';
+import SuperfestBackground from './SuperfestBackground';
 
 interface BackgroundGradientProps {
   styles?: CSSObject;
@@ -44,7 +44,7 @@ export const BackgroundGradient = ({ styles }: BackgroundGradientProps) => {
   ]);
 
   if (isSuperfest || isMainPaths) {
-    return <SuperfestBackgroundContainer sx={styles} />;
+    return <SuperfestBackground />;
   }
 
   if (partnerName.includes('memecoins')) {

src/components/BackgroundGradient/SuperfestBackground.tsx

@@ -0,0 +1,12 @@
+import { PartnerThemeFooterImage } from '../PartnerThemeFooterImage';
+import { SuperfestBackgroundContainer } from './BackgroundGradient.style';
+
+const SuperfestBackground = () => {
+  return (
+    <SuperfestBackgroundContainer>
+      <PartnerThemeFooterImage />
+    </SuperfestBackgroundContainer>
+  );
+};
+
+export default SuperfestBackground;

src/components/Navbar/Navbar.tsx

@@ -1,23 +1,19 @@
 'use client';
 import { usePathname, useRouter } from 'next/navigation';
 
-import {
-  JUMPER_FEST_PATH,
-  JUMPER_LEARN_PATH,
-  JUMPER_LOYALTY_PATH,
-} from '@/const/urls';
+import { JUMPER_LEARN_PATH, JUMPER_LOYALTY_PATH } from '@/const/urls';
 import { useWelcomeScreen } from '@/hooks/useWelcomeScreen';
 import { useMenuStore } from '@/stores/menu';
+import { useMainPaths } from 'src/hooks/useMainPaths';
+import { usePartnerTheme } from 'src/hooks/usePartnerTheme';
+import { useSuperfest } from 'src/hooks/useSuperfest';
 import {
   NavbarContainer as Container,
   Logo,
   LogoLink,
   NavbarButtons,
   NavbarTabs,
 } from '.';
-import { useSuperfest } from 'src/hooks/useSuperfest';
-import { useMainPaths } from 'src/hooks/useMainPaths';
-import { usePartnerTheme } from 'src/hooks/usePartnerTheme';
 
 export const Navbar = () => {
   const router = useRouter();

src/components/PartnerThemeFooterImage.tsx

@@ -4,11 +4,12 @@ import { ChainId } from '@lifi/sdk';
 import Link from 'next/link';
 import { useChainTokenSelectionStore } from 'src/stores/chainTokenSelection';
 
+import type { Theme } from '@mui/material';
+import { useMediaQuery } from '@mui/material';
 import { useMainPaths } from 'src/hooks/useMainPaths';
-import { Theme, useMediaQuery } from '@mui/material';
-import { BackgroundFooterImage } from './Widgets';
 import { usePartnerTheme } from 'src/hooks/usePartnerTheme';
 import { useSuperfest } from 'src/hooks/useSuperfest';
+import { BackgroundFooterImage } from './Widgets';
 
 export const PartnerThemeFooterImage = () => {
   const { sourceChainToken, destinationChainToken } =

src/components/Widgets/Widget.tsx

@@ -12,25 +12,20 @@ import type { MenuState } from '@/types/menu';
 import { EVM } from '@lifi/sdk';
 import type { WidgetConfig } from '@lifi/widget';
 import { HiddenUI, LiFiWidget } from '@lifi/widget';
-import type { Breakpoint } from '@mui/material/styles';
-import { useTheme } from '@mui/material/styles';
 import { getWalletClient, switchChain } from '@wagmi/core';
+import { PrefetchKind } from 'next/dist/client/components/router-reducer/router-reducer-types';
+import { useRouter } from 'next/navigation';
 import { useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { publicRPCList } from 'src/const/rpcList';
 import { ThemesMap } from 'src/const/themesMap';
 import { useMemelist } from 'src/hooks/useMemelist';
-import { darkTheme } from 'src/theme/theme';
+import { usePartnerTheme } from 'src/hooks/usePartnerTheme';
 import { useConfig } from 'wagmi';
 import { WidgetWrapper } from '.';
 import type { WidgetProps } from './Widget.types';
 import { refuelAllowChains, themeAllowChains } from './Widget.types';
 import { WidgetSkeleton } from './WidgetSkeleton';
-import { usePartnerTheme } from 'src/hooks/usePartnerTheme';
-import { useMediaQuery } from '@mui/material';
-import type { Theme } from '@mui/material';
-import { publicRPCList } from 'src/const/rpcList';
-import { useRouter } from 'next/navigation';
-import { PrefetchKind } from 'next/dist/client/components/router-reducer/router-reducer-types';
 import { useWidgetTheme } from './useWidgetTheme';
 
 export function Widget({
@@ -44,12 +39,9 @@ export function Widget({
   widgetIntegrator,
   activeTheme,
 }: WidgetProps) {
-  const theme = useTheme();
   const widgetTheme = useWidgetTheme();
-  const themeMode = useSettingsStore((state) => state.themeMode);
   const { i18n } = useTranslation();
   const wagmiConfig = useConfig();
-  const isDesktop = useMediaQuery((theme: Theme) => theme.breakpoints.up('md'));
   const { isMultisigSigner, getMultisigWidgetConfig } = useMultisig();
   const { isBridgeFiltered, isDexFiltered, partnerName } = usePartnerTheme();
   const { multisigWidget, multisigSdkConfig } = getMultisigWidgetConfig();
@@ -98,7 +90,7 @@ export function Widget({
     }
 
     return process.env.NEXT_PUBLIC_WIDGET_INTEGRATOR;
-  }, [widgetIntegrator, isGasVariant, isDesktop]) as string;
+  }, [widgetIntegrator, isGasVariant]) as string;
 
   const partnerNameArray = useMemo(() => {
     if (partnerName) {
@@ -192,37 +184,29 @@ export function Widget({
         partnerName === ThemesMap.Memecoins && tokens ? { allow: tokens } : {},
     };
   }, [
-    allowChains,
-    allowedChainsByVariant,
-    fromAmount,
+    starterVariant,
+    partnerName,
     fromChain,
     fromToken,
+    toChain,
+    toToken,
+    fromAmount,
+    allowChains,
+    allowedChainsByVariant,
+    isBridgeFiltered,
+    partnerNameArray,
+    isDexFiltered,
     i18n.language,
     i18n.languages,
-    integratorStringByType,
+    widgetTheme.config.appearance,
+    widgetTheme.config.theme,
+    multisigWidget,
     isMultisigSigner,
     multisigSdkConfig,
-    multisigWidget,
-    setWalletSelectMenuState,
-    starterVariant,
-    theme.breakpoints,
-    theme.palette.accent1.main,
-    theme.palette.grey,
-    theme.palette.mode,
-    theme.palette.surface1.main,
-    theme.palette.surface2.main,
-    theme.typography.fontFamily,
-    themeMode,
-    toChain,
-    toToken,
+    integratorStringByType,
     tokens,
+    setWalletSelectMenuState,
     wagmiConfig,
-    widgetIntegrator,
-    partnerNameArray,
-    isDexFiltered,
-    isBridgeFiltered,
-    integratorStringByType,
-    widgetTheme,
   ]);
 
   return (

src/components/Widgets/Widgets.style.tsx

@@ -15,6 +15,7 @@ export const WidgetContainer = styled(Box, {
 })<WidgetContainerProps>(
   ({ theme, isActive, welcomeScreenClosed = false }) => ({
     display: 'flex',
+    flexDirection: 'column-reverse',
     margin: '0 auto 24px',
     overflow: !welcomeScreenClosed ? 'hidden' : 'inherit',
     width: '100%',

src/components/Widgets/Widgets.tsx

@@ -5,11 +5,9 @@ import { TabsMap } from '@/const/tabsMap';
 import { useActiveTabStore } from '@/stores/activeTab';
 import type { StarterVariantType } from '@/types/internal';
 import { useCallback, useLayoutEffect, useMemo, useState } from 'react';
+import { useMetaMask } from 'src/hooks/useMetaMask';
 import type { ThemeModesSupported } from 'src/types/settings';
 import { WidgetEvents } from './WidgetEvents';
-import { useMetaMask } from 'src/hooks/useMetaMask';
-import { WalletAlert } from '../Alerts/WalletAlert/WalletAlert';
-import { PartnerThemeFooterImage } from '../PartnerThemeFooterImage';
 
 interface WidgetsProps {
   widgetVariant: StarterVariantType;
@@ -70,7 +68,6 @@ export function Widgets({ widgetVariant, closedWelcomeScreen }: WidgetsProps) {
   return (
     <>
       <ChainAlert />
-      <PartnerThemeFooterImage />
       <WidgetEvents />
     </>
   );