From 4d225410b3607dbc944be2eb9bdbef523f4c1964 Mon Sep 17 00:00:00 2001 From: Denny San Date: Mon, 15 Jul 2024 18:34:38 +0200 Subject: [PATCH] style: fix partner theme image --- src/Layout.tsx | 4 -- src/app/[lng]/(main)/page.tsx | 4 +- src/app/ui/app/App.tsx | 12 +--- .../Alerts/InfoAlert/InfoAlert.style.ts | 8 ++- src/components/Alerts/InfoAlert/InfoAlert.tsx | 16 +++--- .../BackgroundGradient.style.tsx | 4 +- .../BackgroundGradient/BackgroundGradient.tsx | 12 ++-- .../SuperfestBackground.tsx | 12 ++++ src/components/Navbar/Navbar.tsx | 12 ++-- src/components/PartnerThemeFooterImage.tsx | 5 +- src/components/Widgets/Widget.tsx | 56 +++++++------------ src/components/Widgets/Widgets.style.tsx | 1 + src/components/Widgets/Widgets.tsx | 5 +- 13 files changed, 67 insertions(+), 84 deletions(-) create mode 100644 src/components/BackgroundGradient/SuperfestBackground.tsx diff --git a/src/Layout.tsx b/src/Layout.tsx index d660dec31..233398efb 100644 --- a/src/Layout.tsx +++ b/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> = ({ {children} - ); }; diff --git a/src/app/[lng]/(main)/page.tsx b/src/app/[lng]/(main)/page.tsx index 9da4b2992..f789ac3f3 100644 --- a/src/app/[lng]/(main)/page.tsx +++ b/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 diff --git a/src/app/ui/app/App.tsx b/src/app/ui/app/App.tsx index 0f340d737..62cd650f2 100644 --- a/src/app/ui/app/App.tsx +++ b/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) => { - - {children} - + {children} ); }; diff --git a/src/components/Alerts/InfoAlert/InfoAlert.style.ts b/src/components/Alerts/InfoAlert/InfoAlert.style.ts index 7452b76cb..19e04e97e 100644 --- a/src/components/Alerts/InfoAlert/InfoAlert.style.ts +++ b/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)(({ 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', }, })); diff --git a/src/components/Alerts/InfoAlert/InfoAlert.tsx b/src/components/Alerts/InfoAlert/InfoAlert.tsx index 07d628641..224f6f4ea 100644 --- a/src/components/Alerts/InfoAlert/InfoAlert.tsx +++ b/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, - ) => { - event.stopPropagation(); - setClosed(true); - }; + + // const handleClose = ( + // event: React.MouseEvent, + // ) => { + // event.stopPropagation(); + // setClosed(true); + // }; useEffect(() => { active && setClosed(false); diff --git a/src/components/BackgroundGradient/BackgroundGradient.style.tsx b/src/components/BackgroundGradient/BackgroundGradient.style.tsx index d05091316..e97df43d1 100644 --- a/src/components/BackgroundGradient/BackgroundGradient.style.tsx +++ b/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, diff --git a/src/components/BackgroundGradient/BackgroundGradient.tsx b/src/components/BackgroundGradient/BackgroundGradient.tsx index 555f2fa1b..1b5587b34 100644 --- a/src/components/BackgroundGradient/BackgroundGradient.tsx +++ b/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 ; + return ; } if (partnerName.includes('memecoins')) { diff --git a/src/components/BackgroundGradient/SuperfestBackground.tsx b/src/components/BackgroundGradient/SuperfestBackground.tsx new file mode 100644 index 000000000..ed4c01d0e --- /dev/null +++ b/src/components/BackgroundGradient/SuperfestBackground.tsx @@ -0,0 +1,12 @@ +import { PartnerThemeFooterImage } from '../PartnerThemeFooterImage'; +import { SuperfestBackgroundContainer } from './BackgroundGradient.style'; + +const SuperfestBackground = () => { + return ( + + + + ); +}; + +export default SuperfestBackground; diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx index 8c20fcb88..71a46c37e 100644 --- a/src/components/Navbar/Navbar.tsx +++ b/src/components/Navbar/Navbar.tsx @@ -1,13 +1,12 @@ '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, @@ -15,9 +14,6 @@ import { 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(); diff --git a/src/components/PartnerThemeFooterImage.tsx b/src/components/PartnerThemeFooterImage.tsx index f4d5f7d43..d5d34bc8c 100644 --- a/src/components/PartnerThemeFooterImage.tsx +++ b/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 } = diff --git a/src/components/Widgets/Widget.tsx b/src/components/Widgets/Widget.tsx index dd8417250..35630d0f1 100644 --- a/src/components/Widgets/Widget.tsx +++ b/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 ( diff --git a/src/components/Widgets/Widgets.style.tsx b/src/components/Widgets/Widgets.style.tsx index e11372f4b..e7278ac0d 100644 --- a/src/components/Widgets/Widgets.style.tsx +++ b/src/components/Widgets/Widgets.style.tsx @@ -15,6 +15,7 @@ export const WidgetContainer = styled(Box, { })( ({ theme, isActive, welcomeScreenClosed = false }) => ({ display: 'flex', + flexDirection: 'column-reverse', margin: '0 auto 24px', overflow: !welcomeScreenClosed ? 'hidden' : 'inherit', width: '100%', diff --git a/src/components/Widgets/Widgets.tsx b/src/components/Widgets/Widgets.tsx index f960c0015..7bd8c1715 100644 --- a/src/components/Widgets/Widgets.tsx +++ b/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 ( <> - );