feat: ido initial

apps/web/src/pages/ido/index.tsx

@@ -0,0 +1,15 @@
+import { ChainId } from '@pancakeswap/chains'
+import IDo from '../../views/Idos/ido'
+import { IfoPageLayout } from '../../views/Ifos'
+
+const IDO_SUPPORT_CHAINS = [ChainId.BSC]
+
+const CurrentIfoPage = () => {
+  return <IDo />
+}
+
+CurrentIfoPage.Layout = IfoPageLayout
+
+CurrentIfoPage.chains = IDO_SUPPORT_CHAINS
+
+export default CurrentIfoPage

apps/web/src/views/Idos/CurrentIfo.tsx

@@ -0,0 +1,79 @@
+import { Ifo, isCrossChainIfoSupportedOnly } from '@pancakeswap/ifos'
+import { useMemo } from 'react'
+
+import { useFetchIfo } from 'state/pools/hooks'
+import useGetPublicIfoV8Data from 'views/Ifos/hooks/v8/useGetPublicIfoData'
+import useGetWalletIfoV8Data from 'views/Ifos/hooks/v8/useGetWalletIfoData'
+
+import IfoContainer from './components/IfoContainer'
+import { IfoCurrentCard } from './components/IfoFoldableCard'
+import IfoQuestions from './components/IfoQuestions'
+import IfoSteps from './components/IfoSteps'
+import { SectionBackground } from './components/SectionBackground'
+import { useICakeBridgeStatus } from './hooks/useIfoCredit'
+import { isBasicSale } from './hooks/v7/helpers'
+
+interface TypeProps {
+  activeIfo: Ifo
+}
+
+const CurrentIfo: React.FC<React.PropsWithChildren<TypeProps>> = ({ activeIfo }) => {
+  useFetchIfo()
+  const publicIfoData = useGetPublicIfoV8Data(activeIfo)
+  const walletIfoData = useGetWalletIfoV8Data(activeIfo)
+  const { hasBridged, sourceChainCredit, srcChainId, destChainCredit } = useICakeBridgeStatus({
+    ifoChainId: activeIfo.chainId,
+    ifoAddress: activeIfo.address,
+  })
+
+  const isCrossChainIfo = useMemo(() => isCrossChainIfoSupportedOnly(activeIfo.chainId), [activeIfo.chainId])
+
+  const { poolBasic, poolUnlimited } = walletIfoData
+
+  const isCommitted = useMemo(
+    () =>
+      poolBasic?.amountTokenCommittedInLP.isGreaterThan(0) || poolUnlimited.amountTokenCommittedInLP.isGreaterThan(0),
+    [poolBasic?.amountTokenCommittedInLP, poolUnlimited.amountTokenCommittedInLP],
+  )
+
+  const isBasicSaleOnly = useMemo(
+    () => isBasicSale(publicIfoData.poolBasic?.saleType) && publicIfoData.poolBasic?.distributionRatio === 1,
+    [publicIfoData.poolBasic?.saleType, publicIfoData.poolBasic?.distributionRatio],
+  )
+
+  const steps = isBasicSaleOnly ? null : (
+    <IfoSteps
+      sourceChainIfoCredit={sourceChainCredit}
+      dstChainIfoCredit={destChainCredit}
+      srcChainId={srcChainId}
+      ifoChainId={activeIfo.chainId}
+      isLive={publicIfoData.status === 'live'}
+      isFinished={publicIfoData.status === 'finished'}
+      hasClaimed={poolBasic?.hasClaimed || poolUnlimited.hasClaimed}
+      isCommitted={isCommitted}
+      ifoCurrencyAddress={activeIfo.currency.address}
+      isCrossChainIfo={isCrossChainIfo}
+      hasBridged={hasBridged}
+    />
+  )
+
+  const faq = isBasicSaleOnly ? (
+    <SectionBackground padding="32px 0">
+      <IfoQuestions />
+    </SectionBackground>
+  ) : (
+    <IfoQuestions />
+  )
+
+  return (
+    <IfoContainer
+      ifoAddress={activeIfo.address}
+      ifoBasicSaleType={publicIfoData?.poolBasic?.saleType}
+      ifoSection={<IfoCurrentCard ifo={activeIfo} publicIfoData={publicIfoData} walletIfoData={walletIfoData} />}
+      ifoSteps={steps}
+      faq={faq}
+    />
+  )
+}
+
+export default CurrentIfo

apps/web/src/views/Idos/IfoPlaceholder.tsx

@@ -0,0 +1,100 @@
+import { bscTokens } from '@pancakeswap/tokens'
+import { useMemo } from 'react'
+import {
+  Card,
+  IfoSkeletonCardTokens,
+  IfoSkeletonCardActions,
+  IfoSkeletonCardDetails,
+  Box,
+  IfoGenericIfoCard,
+} from '@pancakeswap/uikit'
+import { useTranslation } from '@pancakeswap/localization'
+import styled from 'styled-components'
+import { PoolIds } from '@pancakeswap/ifos'
+
+import { useFetchIfo } from 'state/pools/hooks'
+
+import { CardsWrapper } from './components/IfoCardStyles'
+import { StyledCardBody } from './components/IfoFoldableCard/index'
+import IfoContainer from './components/IfoContainer'
+import IfoSteps from './components/IfoSteps'
+import { cardConfig } from './components/IfoFoldableCard/IfoPoolCard'
+
+const CurveBox = styled(Box)`
+  border-bottom-left-radius: 100% 40px;
+  border-bottom-right-radius: 100% 40px;
+  background-color: ${({ theme }) => theme.colors.backgroundDisabled};
+`
+
+function Placeholder() {
+  const { t } = useTranslation()
+
+  const basicConfig = useMemo(
+    () =>
+      cardConfig(t, PoolIds.poolBasic, {
+        version: 7,
+      }),
+    [t],
+  )
+
+  const unlimitedConfig = useMemo(
+    () =>
+      cardConfig(t, PoolIds.poolUnlimited, {
+        version: 7,
+      }),
+    [t],
+  )
+
+  const skeletons = (
+    <Box width="100%">
+      <IfoSkeletonCardTokens />
+      <Box mt="1.5rem">
+        <IfoSkeletonCardActions />
+      </Box>
+      <Box mt="1.5rem">
+        <IfoSkeletonCardDetails />
+      </Box>
+    </Box>
+  )
+
+  return (
+    <Card
+      background="bubblegum"
+      style={{
+        width: '100%',
+      }}
+    >
+      <CurveBox height={[100, 110, 160, 160]} />
+      <StyledCardBody>
+        <CardsWrapper>
+          <IfoGenericIfoCard
+            title={unlimitedConfig?.title}
+            variant={unlimitedConfig?.variant}
+            tooltip={unlimitedConfig?.tooltip}
+            content={skeletons}
+            action={null}
+          />
+          <IfoGenericIfoCard
+            title={basicConfig?.title}
+            variant={basicConfig?.variant}
+            tooltip={basicConfig?.tooltip}
+            content={skeletons}
+            action={null}
+          />
+        </CardsWrapper>
+      </StyledCardBody>
+    </Card>
+  )
+}
+
+export function IfoPlaceholder() {
+  useFetchIfo()
+  return (
+    <IfoContainer
+      ifoSection={<Placeholder />}
+      ifoSteps={
+        <IfoSteps isLive={false} hasClaimed={false} isCommitted={false} ifoCurrencyAddress={bscTokens.cake.address} />
+      }
+    />
+  )
+}

apps/web/src/views/Idos/PastIfo.tsx

@@ -0,0 +1,41 @@
+import { Container } from '@pancakeswap/uikit'
+
+import { useInActiveIfoConfigs } from 'hooks/useIfoConfig'
+
+import IfoCardV1Data from './components/IfoCardV1Data'
+import IfoCardV2Data from './components/IfoCardV2Data'
+import IfoCardV3Data from './components/IfoCardV3Data'
+import { IfoCardV7Data } from './components/IfoCardV7Data'
+import { IfoCardV8Data } from './components/IfoCardV8Data'
+import IfoLayout from './components/IfoLayout'
+
+const PastIfo = () => {
+  const inactiveIfo = useInActiveIfoConfigs()
+
+  return (
+    <Container>
+      <IfoLayout maxWidth="736px" m="auto" width="100%" id="past-ifos" py={['24px', '24px', '40px']}>
+        {inactiveIfo?.map((ifo) => {
+          switch (ifo.version) {
+            case 1:
+              return <IfoCardV1Data key={ifo.id} ifo={ifo} />
+            case 2:
+              return <IfoCardV2Data key={ifo.id} ifo={ifo} />
+            case 3:
+            case 3.1:
+            case 3.2:
+              return <IfoCardV3Data key={ifo.id} ifo={ifo} />
+            case 7:
+              return <IfoCardV7Data key={ifo.id} ifo={ifo} />
+            case 8:
+              return <IfoCardV8Data key={ifo.id} ifo={ifo} />
+            default:
+              return null
+          }
+        })}
+      </IfoLayout>
+    </Container>
+  )
+}
+
+export default PastIfo

apps/web/src/views/Idos/SoonIfo.tsx

@@ -0,0 +1,33 @@
+import { bscTokens } from '@pancakeswap/tokens'
+
+import { useFetchIfo } from 'state/pools/hooks'
+import { useActiveChainId } from 'hooks/useActiveChainId'
+
+import IfoContainer from './components/IfoContainer'
+import IfoSteps from './components/IfoSteps'
+import ComingSoonSection from './components/ComingSoonSection'
+import { useICakeBridgeStatus } from './hooks/useIfoCredit'
+
+const SoonIfo = () => {
+  useFetchIfo()
+  const { chainId } = useActiveChainId()
+  const { sourceChainCredit } = useICakeBridgeStatus({
+    ifoChainId: chainId,
+  })
+  return (
+    <IfoContainer
+      ifoSection={<ComingSoonSection />}
+      ifoSteps={
+        <IfoSteps
+          isLive={false}
+          hasClaimed={false}
+          isCommitted={false}
+          ifoCurrencyAddress={bscTokens.cake.address}
+          sourceChainIfoCredit={sourceChainCredit}
+        />
+      }
+    />
+  )
+}
+
+export default SoonIfo

apps/web/src/views/Idos/components/ComingSoonSection.tsx

@@ -0,0 +1,88 @@
+import { useMemo } from 'react'
+import { Card, Text, BunnyPlaceholderIcon, Box, IfoGenericIfoCard, BunnyKnownPlaceholder } from '@pancakeswap/uikit'
+import { useTranslation } from '@pancakeswap/localization'
+import styled from 'styled-components'
+import { PoolIds } from '@pancakeswap/ifos'
+
+import { CardsWrapper } from './IfoCardStyles'
+import { StyledCardBody } from './IfoFoldableCard/index'
+import { cardConfig } from './IfoFoldableCard/IfoPoolCard'
+
+const CurveBox = styled(Box)`
+  border-bottom-left-radius: 100% 40px;
+  border-bottom-right-radius: 100% 40px;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center center;
+`
+
+export default function ComingSoonSection() {
+  const { t } = useTranslation()
+
+  const basicConfig = useMemo(
+    () =>
+      cardConfig(t, PoolIds.poolBasic, {
+        version: 3.1,
+      }),
+    [t],
+  )
+
+  const unlimitedConfig = useMemo(
+    () =>
+      cardConfig(t, PoolIds.poolUnlimited, {
+        version: 3.1,
+      }),
+    [t],
+  )
+
+  return (
+    <Card
+      background="bubblegum"
+      style={{
+        width: '100%',
+      }}
+    >
+      <CurveBox
+        height={[100, 110, 160, 160]}
+        backgroundImage={[
+          "url('/images/ifos/assets/ifo-coming-soon.png')",
+          "url('/images/ifos/assets/ifo-coming-soon.png')",
+          "url('/images/ifos/assets/ifo-coming-soon-desktop.png')",
+          "url('/images/ifos/assets/ifo-coming-soon-desktop.png')",
+        ]}
+      />
+      <StyledCardBody>
+        <CardsWrapper>
+          <IfoGenericIfoCard
+            title={unlimitedConfig?.title}
+            variant={unlimitedConfig?.variant}
+            tooltip={unlimitedConfig?.tooltip}
+            content={
+              <>
+                <BunnyKnownPlaceholder width={80} mb="16px" />
+                <Text textAlign="center" fontWeight={600}>
+                  {t('Follow our social channels to learn more about the next IFO.')}
+                </Text>
+              </>
+            }
+            action={null}
+          />
+          <IfoGenericIfoCard
+            title={basicConfig?.title}
+            variant={basicConfig?.variant}
+            tooltip={basicConfig?.tooltip}
+            content={
+              <>
+                <BunnyPlaceholderIcon width={80} mb="16px" />
+                <Text textAlign="center" fontWeight={600}>
+                  {t('Follow our social channels to learn more about the next IFO.')}
+                </Text>
+              </>
+            }
+            action={null}
+          />
+        </CardsWrapper>
+      </StyledCardBody>
+    </Card>
+  )
+}