Skip to content

Commit

Permalink
feat: Turkey meetup banner (#10811)
Browse files Browse the repository at this point in the history 
<!--
Before opening a pull request, please read the [contributing
guidelines](https://github.com/pancakeswap/pancake-frontend/blob/develop/CONTRIBUTING.md)
first
-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR introduces a new `TurkeyMeetupBanner` component and updates
various banners to utilize a centralized `Countdown` component with a
`startTime` prop. Additionally, it removes redundant countdown
implementations from several banner components.

### Detailed summary
- Added `TurkeyMeetupBanner` component with a `Countdown`.
- Updated `EigenpieIFOBanner`, `NewIFOBanner`, `SpainMeetupBanner`,
`BrasilMeetupBanner`, and `NigeriaMeetupBanner` to use the new
`Countdown` with `startTime`.
- Removed duplicate `Countdown` implementations from multiple banner
files.
- Introduced `Turkey` translation in `translations.json`.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your
question}`

<!-- end pr-codex -->
  • Loading branch information
@memoyil
memoyil authored Oct 11, 2024
1 parent 7fc888a commit 0416422
Show file tree
Hide file tree
Showing 9 changed files with 174 additions and 309 deletions.
83 changes: 4 additions & 79 deletions apps/web/src/views/Home/components/Banners/BrasilMeetupBanner.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
import { useCountdown } from '@pancakeswap/hooks'
import { useTranslation } from '@pancakeswap/localization'
import { Box, FlexGap, Text, useMatchBreakpoints } from '@pancakeswap/uikit'
import { memo, useMemo } from 'react'
import styled from 'styled-components'
import { Box, useMatchBreakpoints } from '@pancakeswap/uikit'
import { memo } from 'react'

import {
BackgroundGraphic,
Expand All @@ -16,80 +14,7 @@ import {
PancakeSwapBadge,
} from '@pancakeswap/widgets-internal'
import { ASSET_CDN } from 'config/constants/endpoints'

const NumberDisplayContainer = styled(FlexGap)`
border-radius: 1.5rem;
background: #190b36;
border: 2px solid #ffffff;
padding: 0 0.625rem;
width: 6rem;
height: 8.3rem;
`
const CountDownWrapper = styled.div`
display: flex;
background-color: white;
font-family: Kanit;
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 90%;
color: #08060b;
padding: 8px;
border-radius: 8px;
margin-top: 5px;
gap: 0px;
flex-direction: column;
width: max-content;
${({ theme }) => theme.mediaQueries.sm} {
flex-direction: row;
gap: 8px;
font-size: 20px;
line-height: 110%; /* 22px */
}
`

type NumberDisplayProps = {
label: string
value?: number
}

export function NumberDisplay({ label, value }: NumberDisplayProps) {
const valueDisplay = useMemo(() => (value === undefined ? '-' : String(value).padStart(2, '0')), [value])

return (
<NumberDisplayContainer flexDirection="column" alignItems="center" justifyContent="center" gap="0.5rem" flex={1}>
<Text fontSize="4rem" lineHeight="100%" fontFamily="Inter, Sans-Serif" color="white">
{valueDisplay}
</Text>
<Text textTransform="uppercase" fontSize="0.825rem" color="white">
{label}
</Text>
</NumberDisplayContainer>
)
}

export function Countdown() {
const { t } = useTranslation()
const { isMobile } = useMatchBreakpoints()
const countdown = useCountdown(1724961600)
if (!countdown) {
return null
}
const hours = countdown?.hours < 10 ? `0${countdown?.hours}` : countdown?.hours
const minutes = countdown?.minutes < 10 ? `0${countdown?.minutes}` : countdown?.minutes
const days = countdown?.days < 10 ? `0${countdown?.days}` : countdown?.days
return (
<CountDownWrapper>
<Box style={{ fontSize: isMobile ? '12px' : '20px' }}>{t('Starts in')}</Box>
<Box>
{days}
{t('d')} : {hours}
{t('h')} : {minutes}
{t('m')}
</Box>
</CountDownWrapper>
)
}
import { Countdown } from './Countdown'

type ActionsType = { href: string; text: string; icon?: 'arrowForward' | 'openNew' }
type IActions = ActionsType & Partial<CSSStyleDeclaration>
Expand All @@ -115,7 +40,7 @@ export const BrasilMeetupBanner = memo(function BrasilMeetupBanner() {
{t('PancakeSwap Meetup')}
</BannerTitle>
}
desc={<Countdown />}
desc={<Countdown startTime={1724961600} />}
actions={
<BannerActionContainer>
<Action
Expand Down
54 changes: 54 additions & 0 deletions apps/web/src/views/Home/components/Banners/Countdown.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import { Box, useMatchBreakpoints } from '@pancakeswap/uikit'
import styled from 'styled-components'
import { useCountdown } from '@pancakeswap/hooks'
import { useTranslation } from '@pancakeswap/localization'

const CountDownWrapper = styled.div`
display: flex;
background-color: #082814;
font-family: Kanit;
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 90%;
color: white;
padding: 8px;
border-radius: 8px;
margin-top: 5px;
gap: 0px;
flex-direction: column;
width: max-content;
${({ theme }) => theme.mediaQueries.sm} {
flex-direction: row;
gap: 8px;
font-size: 20px;
line-height: 110%; /* 22px */
}
`

type CountdownProps = {
startTime: number
}

export const Countdown: React.FC<CountdownProps> = ({ startTime }) => {
const { t } = useTranslation()
const { isMobile } = useMatchBreakpoints()
const countdown = useCountdown(startTime)
if (!countdown) {
return null
}
const hours = countdown?.hours < 10 ? `0${countdown?.hours}` : countdown?.hours
const minutes = countdown?.minutes < 10 ? `0${countdown?.minutes}` : countdown?.minutes
const days = countdown?.days < 10 ? `0${countdown?.days}` : countdown?.days
return (
<CountDownWrapper>
<Box style={{ fontSize: isMobile ? '12px' : '20px' }}>{t('Starts in')}</Box>
<Box>
{days}
{t('d')} : {hours}
{t('h')} : {minutes}
{t('m')}
</Box>
</CountDownWrapper>
)
}
49 changes: 2 additions & 47 deletions apps/web/src/views/Home/components/Banners/EigenpieIFOBanner.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { useCountdown } from '@pancakeswap/hooks'
import { useTranslation } from '@pancakeswap/localization'
import { Box, Flex, Text, useMatchBreakpoints } from '@pancakeswap/uikit'
import {
Expand All @@ -14,6 +13,7 @@ import {
} from '@pancakeswap/widgets-internal'
import { ASSET_CDN } from 'config/constants/endpoints'
import styled from 'styled-components'
import { Countdown } from './Countdown'

type ActionsType = { href: string; text: string; icon?: 'arrowForward' | 'openNew'; target?: string }
type IActions = ActionsType & Partial<CSSStyleDeclaration>
Expand Down Expand Up @@ -77,51 +77,6 @@ const DisclaimerText = styled(Text).attrs({ bold: true })`
}
`

const CountDownWrapper = styled.div`
display: flex;
justify-content: center;
align-items: self-start;
width: fit-content;
background-color: #b8b5d9;
font-family: Kanit;
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 90%;
color: #08060b;
padding: 6px;
border-radius: 8px;
margin-top: 10px;
gap: 0px;
flex-direction: column;
${({ theme }) => theme.mediaQueries.sm} {
flex-direction: row;
gap: 8px;
padding: 8px;
font-size: 20px;
line-height: 110%; /* 22px */
}
`

export function Countdown() {
const { t } = useTranslation()
const { isMobile } = useMatchBreakpoints()
const countdown = useCountdown(1727172900)
if (!countdown) {
return null
}
const hours = countdown?.hours < 10 ? `0${countdown?.hours}` : countdown?.hours
const minutes = countdown?.minutes < 10 ? `0${countdown?.minutes}` : countdown?.minutes
return (
<CountDownWrapper>
<Box style={{ fontSize: isMobile ? '12px' : '20px' }}>{t('Starts in')}</Box>
<Box>
0{countdown?.days}d:{hours}h:{minutes}m
</Box>
</CountDownWrapper>
)
}

export const EigenpieIFOBanner = () => {
const { t } = useTranslation()
const { isMobile } = useMatchBreakpoints()
Expand Down Expand Up @@ -149,7 +104,7 @@ export const EigenpieIFOBanner = () => {
</Flex>
}
title={<BannerTitle variant={yellowVariant}>{t('Eigenpie IFO')}</BannerTitle>}
desc={<Countdown />}
desc={<Countdown startTime={1727172900} />}
actions={
<BannerActionContainer>
<Action
Expand Down
50 changes: 3 additions & 47 deletions apps/web/src/views/Home/components/Banners/NewIFOBanner.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import { useTranslation } from '@pancakeswap/localization'
import { Box, Button, Flex, Link, OpenNewIcon, Text, useMatchBreakpoints } from '@pancakeswap/uikit'
import { Button, Flex, Link, OpenNewIcon, Text, useMatchBreakpoints } from '@pancakeswap/uikit'

import { useCountdown } from '@pancakeswap/hooks'
import { ASSET_CDN } from 'config/constants/endpoints'
import useTheme from 'hooks/useTheme'
import { memo } from 'react'
import { styled } from 'styled-components'
import * as S from './Styled'
import { Countdown } from './Countdown'

const { partnerCakePie, cakeLogo, partnerBnbChain, board, cakePie, cakePieMobile } = {
partnerBnbChain: `${ASSET_CDN}/web/banners/partner/bnbchain-partner.png`,
Expand Down Expand Up @@ -107,31 +107,6 @@ const StyledSubheading = styled.div`
}
`

export const CountDownWrapper = styled.div`
display: flex;
justify-content: center;
align-items: self-start;
background-color: #e8a571;
font-family: Kanit;
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 90%;
color: #08060b;
padding: 6px;
border-radius: 8px;
margin-top: 5px;
gap: 0px;
flex-direction: column;
${({ theme }) => theme.mediaQueries.sm} {
flex-direction: row;
gap: 8px;
padding: 8px;
font-size: 20px;
line-height: 110%; /* 22px */
}
`

const BackGroundCircle = styled.div`
position: absolute;
top: 41px;
Expand Down Expand Up @@ -167,25 +142,6 @@ const BackGroundCircle3 = styled.div`
filter: blur(64.5px);
`

export function Countdown() {
const { t } = useTranslation()
const { isMobile } = useMatchBreakpoints()
const countdown = useCountdown(1704369600)
if (!countdown) {
return null
}
const hours = countdown?.hours < 10 ? `0${countdown?.hours}` : countdown?.hours
const minutes = countdown?.minutes < 10 ? `0${countdown?.minutes}` : countdown?.minutes
return (
<CountDownWrapper>
<Box style={{ fontSize: isMobile ? '12px' : '20px' }}>{t('starts in')}</Box>
<Box>
0{countdown?.days}d:{hours}h:{minutes}m
</Box>
</CountDownWrapper>
)
}

const NewIFOBanner = () => {
const { t } = useTranslation()
const { isMobile } = useMatchBreakpoints()
Expand All @@ -211,7 +167,7 @@ const NewIFOBanner = () => {
<Image src={partnerBnbChain} alt="liquidStakingTitle" width={104} height={24} />
</Flex>
<StyledSubheading>{t('CKP cIFO')}</StyledSubheading>
<Countdown />
<Countdown startTime={1704369600} />
<Flex style={{ gap: isMobile ? 4 : 16 }}>
<Link href="/ifo" style={{ textDecoration: 'none' }}>
<Button variant="text" pl="0px" pt="0px" scale={isMobile ? 'sm' : 'md'}>
Expand Down
Loading

0 comments on commit 0416422

Please sign in to comment.