Past IFOs redirect button (pancakeswap#254)

* feat: Adding Button Menu component

* feat: Adding routes

* fix: Adjusting the route

* style: Removing Card wrapper margins

* fix: Adding react router dom link-to

* feat: Adding the new structure route

* feat: Adding the inactive Ifo Cards

* feat: Running prettier

* refactor(menu): Update menu links

* fix(ifo): Spacing issues with Ifo grid

- Added a "finished" state

* fix: Menu

* fix(ifo): Header image dimensions

* fix(ifo): Use external link

* build: Upgrade UI Kit

* chore: Rebase fixes

Co-authored-by: hachiojidev <[email protected]>

src/App.tsx

@@ -11,7 +11,7 @@ import Home from './views/Home'
 import Stake from './views/Stake'
 import Lottery from './views/Lottery'
 import Pools from './views/Pools'
-import Ifo from './views/Ifo'
+import Ifos from './views/Ifos'
 import NotFound from './views/NotFound'
 import Nft from './views/Nft'
 import NftGlobalNotification from './views/Nft/components/NftGlobalNotification'
@@ -54,7 +54,7 @@ const App: React.FC = () => {
             <Lottery />
           </Route>
           <Route path="/ifo">
-            <Ifo />
+            <Ifos />
           </Route>
           <Route path="/nft">
             <Nft />

src/components/Menu/config.ts

@@ -74,7 +74,16 @@ const config: MenuEntry[] = [
   {
     label: 'IFO',
     icon: 'IfoIcon',
-    href: '/ifo',
+    items: [
+      {
+        label: 'Next',
+        href: '/ifo',
+      },
+      {
+        label: 'History',
+        href: '/ifo/history',
+      },
+    ],
   },
   {
     label: 'More',

src/views/Ifos/CurrentIfo.tsx

@@ -0,0 +1,106 @@
+import React from 'react'
+import styled from 'styled-components'
+import { Text, Heading, BaseLayout, Button, LinkExternal, Flex } from '@pancakeswap-libs/uikit'
+import { ifosConfig } from 'config/constants'
+import useI18n from 'hooks/useI18n'
+import Container from 'components/layout/Container'
+import IfoCard from './components/IfoCard'
+import Title from './components/Title'
+import IfoCards from './components/IfoCards'
+
+const LaunchIfoCallout = styled(BaseLayout)`
+  border-top: 2px solid ${({ theme }) => theme.colors.textSubtle};
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-gap: 32px;
+  margin: 0 auto;
+  padding: 32px 0;
+
+  ${({ theme }) => theme.mediaQueries.sm} {
+    grid-template-columns: 1fr 1fr;
+  }
+`
+
+const List = styled.ul`
+  color: ${({ theme }) => theme.colors.text};
+  margin-bottom: 16px;
+
+  & > li {
+    line-height: 1.4;
+    margin-bottom: 8px;
+  }
+`
+
+/**
+ * Note: currently there should be only 1 active IFO at a time
+ */
+const activeIfo = ifosConfig.find((ifo) => ifo.isActive)
+
+const Ifo = () => {
+  const TranslateString = useI18n()
+
+  return (
+    <Container>
+      <IfoCards isSingle>
+        <IfoCard ifo={activeIfo} />
+      </IfoCards>
+      <LaunchIfoCallout>
+        <div>
+          <Title as="h2">{TranslateString(592, 'How to take part')}</Title>
+          <Heading mb="16px">{TranslateString(594, 'Before Sale')}:</Heading>
+          <List>
+            <li>{TranslateString(596, 'Buy CAKE and BNB tokens')}</li>
+            <li>{TranslateString(598, 'Get CAKE-BNB LP tokens by adding CAKE and BNB liquidity')}</li>
+          </List>
+          <Flex mb="16px">
+            <LinkExternal href="https://exchange.pancakeswap.finance/#/swap" mr="16px">
+              {TranslateString(999, 'Buy cake')}
+            </LinkExternal>
+            <LinkExternal href="https://exchange.pancakeswap.finance/#/add/ETH/0x0E09FaBB73Bd3Ade0a17ECC321fD13a19e81cE82">
+              {TranslateString(999, 'Get LP tokens')}
+            </LinkExternal>
+          </Flex>
+          <Heading mb="16px">{TranslateString(600, 'During Sale')}:</Heading>
+          <List>
+            <li>{TranslateString(602, 'While the sale is live, commit your CAKE-LP tokens to buy the IFO tokens')}</li>
+          </List>
+          <Heading mb="16px">{TranslateString(604, 'After Sale')}:</Heading>
+          <List>
+            <li>{TranslateString(606, 'Claim the tokens you bought, along with any unspent funds.')}</li>
+            <li>{TranslateString(608, 'Done!')}</li>
+          </List>
+          <Text as="div" pt="16px">
+            <Button
+              as="a"
+              variant="secondary"
+              href="https://docs.pancakeswap.finance/core-products/ifo-initial-farm-offering"
+            >
+              {TranslateString(610, 'Read more')}
+            </Button>
+          </Text>
+        </div>
+        <div>
+          <img src="/images/ifo-bunny.svg" alt="ifo bunny" />
+          <div>
+            <Title as="h2">{TranslateString(512, 'Want to launch your own IFO?')}</Title>
+            <Text mb={3}>
+              {TranslateString(
+                514,
+                'Launch your project with PancakeSwap, Binance Smart Chain’s most-used AMM project and liquidity provider, to bring your token directly to the most active and rapidly growing community on BSC.',
+              )}
+            </Text>
+            <Button
+              as="a"
+              href="https://docs.google.com/forms/d/e/1FAIpQLScGdT5rrVMr4WOWr08pvcroSeuIOtEJf1sVdQGVdcAOqryigQ/viewform"
+              external
+            >
+              {TranslateString(516, 'Apply to launch')}
+            </Button>
+          </div>
+        </div>
+      </LaunchIfoCallout>
+    </Container>
+  )
+}
+
+export default Ifo

src/views/Ifos/PastIfo.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { ifosConfig } from 'config/constants'
+import { Ifo } from 'config/constants/types'
+import IfoCard from './components/IfoCard'
+import IfoCards from './components/IfoCards'
+
+const inactiveIfo: Ifo[] = ifosConfig.filter((ifo) => !ifo.isActive)
+
+const PastIfo = () => {
+  return (
+    <IfoCards>
+      {inactiveIfo.map((ifo) => (
+        <IfoCard key={ifo.id} ifo={ifo} />
+      ))}
+    </IfoCards>
+  )
+}
+
+export default PastIfo

src/views/Ifo/components/IfoCard/IfoCardHeader.tsx → src/views/Ifos/components/IfoCard/IfoCardHeader.tsx

@@ -1,21 +1,17 @@
 import React from 'react'
 import styled from 'styled-components'
-import { Heading, Text } from '@pancakeswap-libs/uikit'
+import { Heading, Text, Flex } from '@pancakeswap-libs/uikit'
 
 interface IfoCardHeaderProps {
   ifoId: string
   name: string
   subTitle: string
 }
 
-const StyledIfoCardHeader = styled.div`
-  align-items: center;
-  display: flex;
-  margin-bottom: 32px;
-`
-
-const Details = styled.div`
-  flex: 1;
+const StyledIfoCardHeader = styled(Flex)`
+  & > div {
+    flex: 1;
+  }
 `
 
 const Name = styled(Heading).attrs({ as: 'h3', size: 'lg' })`
@@ -31,12 +27,12 @@ const Description = styled(Text)`
 
 const IfoCardHeader: React.FC<IfoCardHeaderProps> = ({ ifoId, name, subTitle }) => {
   return (
-    <StyledIfoCardHeader>
-      <img src={`/images/ifos/${ifoId}.svg`} alt={ifoId} />
-      <Details>
+    <StyledIfoCardHeader mb="24px" alignItems="center">
+      <img src={`/images/ifos/${ifoId}.svg`} alt={ifoId} width="64px" height="64px" />
+      <div>
         <Name>{name}</Name>
         <Description>{subTitle}</Description>
-      </Details>
+      </div>
     </StyledIfoCardHeader>
   )
 }

src/views/Ifo/components/IfoCard/IfoCardTime.tsx → src/views/Ifos/components/IfoCard/IfoCardTime.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
-import { Link } from '@pancakeswap-libs/uikit'
+import { Link, Text } from '@pancakeswap-libs/uikit'
 import { IfoStatus } from 'config/constants/types'
 import getTimePeriods from 'utils/getTimePeriods'
 import useI18n from 'hooks/useI18n'
@@ -30,13 +30,22 @@ const Countdown = styled.div`
 
 const IfoCardTime: React.FC<IfoCardTimeProps> = ({ isLoading, status, secondsUntilStart, secondsUntilEnd, block }) => {
   const TranslateString = useI18n()
-  const timeUntil = getTimePeriods(status === 'coming_soon' ? secondsUntilStart : secondsUntilEnd)
+  const countdownToUse = status === 'coming_soon' ? secondsUntilStart : secondsUntilEnd
+  const timeUntil = getTimePeriods(countdownToUse)
   const suffix = status === 'coming_soon' ? 'start' : 'finish'
 
   if (isLoading) {
     return <Details>{TranslateString(656, 'Loading...')}</Details>
   }
 
+  if (countdownToUse <= 0) {
+    return (
+      <Details>
+        <Text bold>{TranslateString(999, 'Finished!')}</Text>
+      </Details>
+    )
+  }
+
   return (
     <Details>
       <Countdown>{`${timeUntil.days}d, ${timeUntil.hours}h, ${timeUntil.minutes}m until ${suffix}`}</Countdown>

src/views/Ifo/components/IfoCard/index.tsx → src/views/Ifos/components/IfoCard/index.tsx

@@ -28,6 +28,7 @@ const StyledIfoCard = styled(Card)<{ ifoId: string }>`
   margin-left: auto;
   margin-right: auto;
   max-width: 437px;
+  width: 100%;
 `
 
 const getStatus = (currentBlock: number, startBlock: number, endBlock: number): IfoStatus | null => {
@@ -151,7 +152,7 @@ const IfoCard: React.FC<IfoCardProps> = ({ ifo }) => {
           block={isActive || isFinished ? state.endBlockNum : state.startBlockNum}
         />
         {!account && <UnlockButton fullWidth />}
-        {(isActive || isFinished) && (
+        {isActive && !isFinished && (
           <IfoCardContribute
             address={address}
             currency={currency}