diff --git a/.changeset/rare-donuts-pump.md b/.changeset/rare-donuts-pump.md new file mode 100644 index 0000000000000..9818b832adef2 --- /dev/null +++ b/.changeset/rare-donuts-pump.md @@ -0,0 +1,5 @@ +--- +'@pancakeswap/widgets-internal': patch +--- + +Added BannerDesc Component. diff --git a/.vscode/settings.json b/.vscode/settings.json index 54fecae4677ad..85c5b7250447f 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -33,6 +33,7 @@ "LINEA", "Merkl", "multicall", + "Multichain", "OPBNB", "pancakeswap", "preinstall", diff --git a/apps/web/src/views/Home/components/Banners/MultichainBanner.tsx b/apps/web/src/views/Home/components/Banners/MultichainBanner.tsx new file mode 100644 index 0000000000000..3c287005221f0 --- /dev/null +++ b/apps/web/src/views/Home/components/Banners/MultichainBanner.tsx @@ -0,0 +1,60 @@ +import { useTranslation } from '@pancakeswap/localization' +import { ArrowForwardIcon, Flex, useMatchBreakpoints } from '@pancakeswap/uikit' +import { + BackgroundGraphic, + BannerActionContainer, + BannerContainer, + BannerDesc, + BannerGraphics, + BannerMain, + BannerTitle, + GraphicDetail, + LinkExternalAction, + PancakeSwapBadge, +} from '@pancakeswap/widgets-internal' +import { ASSET_CDN } from 'config/constants/endpoints' + +const bgMobile = `${ASSET_CDN}/web/banners/multichain/bg-mobile.png` +const bgDesktop = `${ASSET_CDN}/web/banners/multichain/bg-desktop.png` + +const bgSmVariant: GraphicDetail = { + src: bgMobile, + width: 272, + height: 224, +} + +const bgXsVariant: GraphicDetail = { + src: bgMobile, + width: 218, + height: 182, +} + +const participateLink = 'https://app.questn.com/PancakeSwap' + +export const MultiChainBanner = () => { + const { t } = useTranslation() + const { isMobile } = useMatchBreakpoints() + + const participateAction = ( + + + {t('Participate Now')} + + + + ) + + return ( + + } + title={{t('PancakeSwap Multichain Celebration')}} + desc={isMobile ? null : {t('Starting MAR 14 - Over $3500 in prizes!')}} + actions={{participateAction}} + /> + + + + + ) +} diff --git a/apps/web/src/views/Home/components/Banners/WBNBFixedStakingBanner.tsx b/apps/web/src/views/Home/components/Banners/WBNBFixedStakingBanner.tsx index b0379641662b6..69339b7388b3c 100644 --- a/apps/web/src/views/Home/components/Banners/WBNBFixedStakingBanner.tsx +++ b/apps/web/src/views/Home/components/Banners/WBNBFixedStakingBanner.tsx @@ -1,4 +1,4 @@ -import { Trans, useTranslation } from '@pancakeswap/localization' +import { useTranslation } from '@pancakeswap/localization' import { ArrowForwardIcon, Flex, Text } from '@pancakeswap/uikit' import { BackgroundGraphic, @@ -49,14 +49,6 @@ const VerticalDivider = styled.span` margin: auto 8px; ` -const Desc = () => { - return ( - - $5,000 extra reward pool - - ) -} - const Floating = styled(FloatingGraphic)` left: 3%; top: 10%; @@ -135,7 +127,7 @@ export function WBNBFixedStakingBanner() { {isMobile ? t('Stake WBNB, Win Combo Rewards!') : t('Stake WBNB to Win Combo Rewards')} } - desc={isMobile ? null : } + desc={isMobile ? null : {t('$5,000 extra reward pool')}} actions={ {stakeAction} diff --git a/apps/web/src/views/Home/components/Banners/hooks/useMultipleBannerConfig.tsx b/apps/web/src/views/Home/components/Banners/hooks/useMultipleBannerConfig.tsx index eec350a5844e1..9049145b1a9a6 100644 --- a/apps/web/src/views/Home/components/Banners/hooks/useMultipleBannerConfig.tsx +++ b/apps/web/src/views/Home/components/Banners/hooks/useMultipleBannerConfig.tsx @@ -4,6 +4,7 @@ import { ReactElement, useMemo } from 'react' import CompetitionBanner from '../CompetitionBanner' import { GalxeTraverseBanner } from '../GalxeTraverseBanner' import GameBanner from '../GameBanner' +import { MultiChainBanner } from '../MultichainBanner' import { NemesisDownfallBanner } from '../NemesisDownfallBanner' import NewIFOBanner from '../NewIFOBanner' import PerpetualBanner from '../PerpetualBanner' @@ -47,6 +48,10 @@ export const useMultipleBannerConfig = () => { banner: , }, { shouldRender: isRenderIFOBanner || Boolean(countdown), banner: }, + { + shouldRender: true, + banner: , + }, { shouldRender: true, banner: , diff --git a/packages/localization/src/config/translations.json b/packages/localization/src/config/translations.json index 357da6ee787ef..faa8b74fa4cbc 100644 --- a/packages/localization/src/config/translations.json +++ b/packages/localization/src/config/translations.json @@ -3268,5 +3268,9 @@ "Registration Error": "Registration Error", "Stake your WBNB here": "Stake your WBNB here", "Stake WBNB, Win Combo Rewards!": "Stake WBNB, Win Combo Rewards!", - "Stake WBNB to Win Combo Rewards": "Stake WBNB to Win Combo Rewards" + "Stake WBNB to Win Combo Rewards": "Stake WBNB to Win Combo Rewards", + "$5,000 extra reward pool": "$5,000 extra reward pool", + "PancakeSwap Multichain Celebration": "PancakeSwap Multichain Celebration", + "Starting MAR 14 - Over $3500 in prizes!": "Starting MAR 14 - Over $3500 in prizes!", + "Participate Now": "Participate Now" } diff --git a/packages/widgets-internal/components/Banner/BannerDesc.tsx b/packages/widgets-internal/components/Banner/BannerDesc.tsx new file mode 100644 index 0000000000000..3087c2352b92d --- /dev/null +++ b/packages/widgets-internal/components/Banner/BannerDesc.tsx @@ -0,0 +1,13 @@ +import { Text } from "@pancakeswap/uikit"; +import styled from "styled-components"; + +export const BannerDesc = styled(Text)` + font-size: 14px; + font-weight: 600; + line-height: 120%; + + ${({ theme }) => theme.mediaQueries.sm} { + font-size: 16px; + white-space: nowrap; + } +`; diff --git a/packages/widgets-internal/components/Banner/index.ts b/packages/widgets-internal/components/Banner/index.ts index 203788f704cde..75140033bb59a 100644 --- a/packages/widgets-internal/components/Banner/index.ts +++ b/packages/widgets-internal/components/Banner/index.ts @@ -1,5 +1,6 @@ export * from "./BannerActionContainer"; export * from "./BannerContainer"; +export * from "./BannerDesc"; export * from "./BannerGraphics"; export * from "./BannerMain"; export * from "./BannerTitle";