feat: Add banner and infostripe for PCSX (#10826)

Add new banner and info stripe for PCS X see: https://linear.app/pancakeswap/issue/PAN-3937/add-new-banner-and-info-stripe-for-pcs-x  --- ## PR-Codex overview This PR introduces the `PCSXBanner` component to the application, enhancing the user interface with new banners and features. It also refines the phishing banner logic and updates localization strings. ### Detailed summary - Added `PCSXBanner` component with promotional content. - Integrated `Step3` component into the `PhishingWarningBanner`. - Updated `useMultipleBannerConfig` to include `PCSXBanner`. - Modified phishing banner logic for better condition handling. - Expanded localization strings in `translations.json`. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`
pancakeswap · Oct 17, 2024 · f4230b6 · f4230b6
1 parent 300373f
commit f4230b6
Show file tree

Hide file tree

Showing 7 changed files with 254 additions and 4 deletions.
diff --git a/apps/web/src/components/PhishingWarningBanner/Step3.tsx b/apps/web/src/components/PhishingWarningBanner/Step3.tsx
@@ -0,0 +1,60 @@
+import { useTranslation } from '@pancakeswap/localization'
+import { ArrowForwardIcon, Box, Link, Text } from '@pancakeswap/uikit'
+import { VerticalDivider } from '@pancakeswap/widgets-internal'
+
+export const Step3 = () => {
+  const { t } = useTranslation()
+
+  return (
+    <Box mr={['6px']}>
+      <Text bold as="span" color="#FFFFFF" fontSize={['12px', '12px', '14px']}>
+        {t('Enjoy')}
+      </Text>
+      <Text bold as="span" color="#FCC631" fontSize={['12px', '12px', '14px']}>
+        {t('Zero')}
+      </Text>
+      <Text bold as="span" color="#FFFFFF" fontSize={['12px', '12px', '14px']}>
+        {t('trading and gas fees on Ethereum and Arbitrum with')}
+      </Text>
+      <Text bold as="span" color="#FCC631" fontSize={['12px', '12px', '14px']}>
+        PancakeSwapX
+      </Text>
+      <Link
+        external
+        display="inline-flex !important"
+        verticalAlign="baseline"
+        showExternalIcon
+        fontSize={['12px', '12px', '14px']}
+        href="https://pancakeswap.finance/swap?utm_source=Website&utm_medium=homepage&utm_campaign=PCSX&utm_id=PCSX"
+      >
+        {t('Swap Now')}
+        <ArrowForwardIcon
+          style={{
+            fill: '#53DEE9',
+          }}
+        />
+      </Link>
+      <VerticalDivider
+        bg="#53DEE9"
+        style={{
+          display: 'inline-block',
+          verticalAlign: 'middle',
+          height: '18px',
+          opacity: 0.4,
+          width: '1px',
+          marginLeft: '0px',
+          marginRight: '8px',
+        }}
+      />
+      <Link
+        external
+        display="inline !important"
+        showExternalIcon
+        fontSize={['12px', '12px', '14px']}
+        href="https://blog.pancakeswap.finance/articles/introducing-pancake-swap-x-zero-fee-and-gasless-swaps-on-ethereum-and-arbitrum?utm_source=Website&utm_medium=homepage&utm_campaign=PCSX&utm_id=PCSX"
+      >
+        {t('Learn More')}
+      </Link>
+    </Box>
+  )
+}
diff --git a/apps/web/src/components/PhishingWarningBanner/index.tsx b/apps/web/src/components/PhishingWarningBanner/index.tsx
@@ -7,8 +7,10 @@ import 'swiper/css/effect-fade'
 
 import { ASSET_CDN } from 'config/constants/endpoints'
 import { Countdown } from './Countdown'
+
 import { Step1 } from './Step1'
 import { Step2 } from './Step2'
+import { Step3 } from './Step3'
 
 const Container = styled(Flex).withConfig({ shouldForwardProp: (prop) => !['$background'].includes(prop) })<{
   $background?: string
@@ -108,6 +110,12 @@ const CONFIG: BannerConfig[] = [
     stripeImageWidth: '92px',
     stripeImageAlt: 'Phishing Warning',
   },
+  {
+    component: Step3,
+    stripeImage: `${ASSET_CDN}/web/banners/pcsx/pcsx-bg-medium.png`,
+    stripeImageWidth: '92px',
+    stripeImageAlt: 'PCSX',
+  },
 ]
 
 const PhishingWarningBanner: React.FC<React.PropsWithChildren> = () => {

diff --git a/apps/web/src/views/Home/components/Banners/PCSXBanner.tsx b/apps/web/src/views/Home/components/Banners/PCSXBanner.tsx
@@ -0,0 +1,171 @@
+import { useTranslation } from '@pancakeswap/localization'
+import { Box, Flex, Text, useMatchBreakpoints } from '@pancakeswap/uikit'
+import {
+  BackgroundGraphic,
+  BannerActionContainer,
+  BannerContainer,
+  BannerGraphics,
+  BannerMain,
+  BannerTitle,
+  FloatingGraphic,
+  LinkExternalAction,
+  PancakeSwapBadge,
+  VerticalDivider,
+  type GraphicDetail,
+} from '@pancakeswap/widgets-internal'
+import { ASSET_CDN } from 'config/constants/endpoints'
+import styled from 'styled-components'
+
+const StyledBackgroundGraphic = styled(BackgroundGraphic)`
+  & > div {
+    background-size: contain !important;
+  }
+  ${({ theme }) => theme.mediaQueries.sm} {
+    left: calc(100% - 272px);
+  }
+
+  ${({ theme }) => theme.mediaQueries.md} {
+    left: 5%;
+  }
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    left: 50%;
+    transform: translateX(-50%);
+  }
+`
+
+const StyledBannerDesc = styled(Text)`
+  color: #080808;
+  font-style: normal;
+  font-weight: 600;
+  font-size: 11px;
+
+  ${({ theme }) => theme.mediaQueries.md} {
+    font-size: 16px;
+  }
+`
+
+const StyledBannerTitle = styled(BannerTitle)`
+  color: 'white',
+  strokeColor: '#143360',
+  strokeSize: 2,
+  lineHeight: 30,
+  fontWeight: 800,
+  ${({ theme }) => theme.mediaQueries.md} {
+    font-size: 20px;
+  }
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    font-size: 23px;
+  }
+`
+
+const PATH = `${ASSET_CDN}/web/banners/pcsx`
+const BG = `${PATH}/pcsx-bg-large.png`
+const BG_MEDIUM = `${PATH}/pcsx-bg-medium.png`
+const XLOGO = `${PATH}/pcsx-xlogo.png`
+
+const bgSmVariant: GraphicDetail = {
+  src: BG_MEDIUM,
+  width: 196,
+  height: 112,
+}
+
+const bgXsVariant: GraphicDetail = {
+  src: BG_MEDIUM,
+  width: 170,
+  height: 140,
+}
+
+const Desc = () => {
+  const { t } = useTranslation()
+
+  return (
+    <StyledBannerDesc>
+      {t('0 Trading Fees, Gasless Swaps, MEV Protection, and a Wide Range of Tokens — ALL on PancakeSwapX')}
+    </StyledBannerDesc>
+  )
+}
+
+export const PCSXBanner = () => {
+  const { t } = useTranslation()
+  const { isMobile, isSm, isDesktop } = useMatchBreakpoints()
+
+  const PlayNowAction = (
+    <LinkExternalAction
+      href="https://pancakeswap.finance/swap?utm_source=Website&utm_medium=homepage&utm_campaign=PCSX&utm_id=PCSX"
+      color="#280D5F"
+      externalIcon="arrowForward"
+    >
+      <Flex color="#280D5F" alignItems="center" style={{ whiteSpace: 'nowrap' }}>
+        {t('Swap Now')}
+      </Flex>
+    </LinkExternalAction>
+  )
+
+  const LearnMoreAction = (
+    <LinkExternalAction
+      href="https://blog.pancakeswap.finance/articles/introducing-pancake-swap-x-zero-fee-and-gasless-swaps-on-ethereum-and-arbitrum?utm_source=Website&utm_medium=homepage&utm_campaign=PCSX&utm_id=PCSX"
+      color="#280D5F"
+    >
+      <Flex color="#280D5F" alignItems="center" style={{ whiteSpace: 'nowrap' }}>
+        {t('Learn More')}
+      </Flex>
+    </LinkExternalAction>
+  )
+
+  return (
+    <BannerContainer background="linear-gradient(359.55deg, #6A5ED2 -2.68%, #B8B8E1 41.3%, #4A78AF 99.43%)">
+      <BannerMain
+        badges={
+          <Flex>
+            <PancakeSwapBadge whiteText />
+          </Flex>
+        }
+        title={
+          <StyledBannerTitle variant="white" marginTop={isSm ? '-6px' : '0px'} strokeSize={isMobile ? 1 : 2}>
+            <span
+              style={{
+                color: '#FFE33E',
+                textShadow: isMobile
+                  ? `1px 1px 0 #143360, -1px -1px 0 #143360, 
+                   1px -1px 0 #143360, -1px 1px 0 #143360`
+                  : `2px 2px 0 #143360, -2px -2px 0 #143360, 
+                   2px -2px 0 #143360, -2px 2px 0 #143360`,
+              }}
+            >
+              {t('ZERO')}
+            </span>
+            &nbsp;
+            {t('Fee Swaps on Ethereum and Arbitrum')}
+          </StyledBannerTitle>
+        }
+        desc={isMobile ? null : <Desc />}
+        actions={
+          <BannerActionContainer>
+            {PlayNowAction}
+            {!isMobile && (
+              <>
+                <VerticalDivider
+                  bg="#1F084B"
+                  style={{
+                    opacity: 0.4,
+                  }}
+                />
+
+                {LearnMoreAction}
+              </>
+            )}
+          </BannerActionContainer>
+        }
+      />
+
+      <BannerGraphics>
+        <StyledBackgroundGraphic src={BG} sm={bgSmVariant} xs={bgXsVariant} width={468} height={224} className="" />
+        <Box position="absolute" width="100%" top={isMobile ? '10%' : '0'} left="3%">
+          <FloatingGraphic src={XLOGO} width={isMobile ? 70 : 100} height={isMobile ? 70 : 100} />
+        </Box>
+      </BannerGraphics>
+    </BannerContainer>
+  )
+}
diff --git a/apps/web/src/views/Home/components/Banners/hooks/useMultipleBannerConfig.tsx b/apps/web/src/views/Home/components/Banners/hooks/useMultipleBannerConfig.tsx
@@ -5,6 +5,7 @@ import CompetitionBanner from '../CompetitionBanner'
 import { EigenpieIFOBanner } from '../EigenpieIFOBanner'
 import { FourMemeBanner } from '../FourMemeBanner'
 import { OptionsBanner } from '../OptionsBanner'
+import { PCSXBanner } from '../PCSXBanner'
 import { QuestBanner } from '../QuestBanner'
 import { TgPredictionBotBanner } from '../TgPredictionBotBanner'
 import UserBanner from '../UserBanner'
@@ -52,6 +53,10 @@ export const useMultipleBannerConfig = () => {
         shouldRender: isRenderIFOBannerFromConfig,
         banner: <EigenpieIFOBanner />,
       },
+      {
+        shouldRender: true,
+        banner: <PCSXBanner />,
+      },
       {
         shouldRender: true,
         banner: <TgPredictionBotBanner />,

diff --git a/apps/web/src/views/Home/components/UserBanner/index.tsx b/apps/web/src/views/Home/components/UserBanner/index.tsx
@@ -1,5 +1,5 @@
-import { useCallback } from 'react'
 import { Box, Flex } from '@pancakeswap/uikit'
+import { useCallback } from 'react'
 import { styled } from 'styled-components'
 import { useSwiper } from 'swiper/react'
 import HarvestCard from './HarvestCard'

diff --git a/packages/localization/src/config/translations.json b/packages/localization/src/config/translations.json
@@ -3540,5 +3540,12 @@
   "Nigeria": "Nigeria",
   "PancakeSwap Workshop": "PancakeSwap Workshop",
   "DeFiEdge will stop maintaining its vaults from 10 Oct 2024 onwards. Please remove your funds before that to avoid any issues. Beyond 10 Oct, they will place the liquidity in a wide range, and will no longer actively manage it.": "DeFiEdge will stop maintaining its vaults from 10 Oct 2024 onwards. Please remove your funds before that to avoid any issues. Beyond 10 Oct, they will place the liquidity in a wide range, and will no longer actively manage it.",
-  "Turkey": "Turkey"
+  "Turkey": "Turkey",
+  "Swap Now": "Swap Now",
+  "Enjoy": "Enjoy",
+  "Zero": "Zero",
+  "trading and gas fees on Ethereum and Arbitrum with": "trading and gas fees on Ethereum and Arbitrum with",
+  "0 Trading Fees, Gasless Swaps, MEV Protection, and a Wide Range of Tokens — ALL on PancakeSwapX": "0 Trading Fees, Gasless Swaps, MEV Protection, and a Wide Range of Tokens — ALL on PancakeSwapX",
+  "ZERO": "ZERO",
+  "Fee Swaps on Ethereum and Arbitrum": "Fee Swaps on Ethereum and Arbitrum"
 }
diff --git a/packages/utils/user/phishingBanner.ts b/packages/utils/user/phishingBanner.ts
@@ -8,8 +8,7 @@ const hidePhishingBannerAtom = atom(
   (get) => {
     const now = dayjs()
     const last = dayjs(get(phishingBannerAtom)).add(1, 'day')
-    const notPreview = process.env.NEXT_PUBLIC_VERCEL_ENV !== 'preview'
-    return last ? now.unix() > last.unix() && notPreview : notPreview
+    return last && now.unix() > last.unix()
   },
   (_, set) => set(phishingBannerAtom, Date.now()),
 )