From bdd522603dbf608799b5c1a5f475e5c67aa36d4a Mon Sep 17 00:00:00 2001
From: Max Alekseenko <nnwen0609@gmail.com>
Date: Thu, 5 Sep 2024 18:13:59 +0200
Subject: [PATCH 1/2] add banner with countdown

---
 src/components/BannerWithCountdown/index.js | 115 ++++++++++++++++++++
 src/pages/index.js                          |   2 +
 2 files changed, 117 insertions(+)
 create mode 100644 src/components/BannerWithCountdown/index.js

diff --git a/src/components/BannerWithCountdown/index.js b/src/components/BannerWithCountdown/index.js
new file mode 100644
index 0000000..9e3c25b
--- /dev/null
+++ b/src/components/BannerWithCountdown/index.js
@@ -0,0 +1,115 @@
+import React, { useState, useEffect, useContext } from 'react';
+import styled from 'styled-components';
+import moment from 'moment';
+
+import { PoolContext } from 'contexts';
+import { NETWORKS } from 'constants';
+
+const CountdownUnit = ({ value, label }) => (
+  <UnitWrapper>
+    <UnitValue>{value}</UnitValue>
+    <UnitLabel>{label}</UnitLabel>
+  </UnitWrapper>
+);
+
+const Countdown = ({ endDate }) => {
+  const [timeLeft, setTimeLeft] = useState(moment.duration(moment(endDate).diff(moment())));
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      const updated = moment.duration(moment(endDate).diff(moment()));
+      setTimeLeft(updated);
+    }, 1000);
+
+    return () => clearInterval(timer);
+  }, [endDate]);
+
+  return (
+    <CountdownWrapper>
+      <CountdownUnit value={Math.floor(timeLeft.asDays())} label="days" />
+      <CountdownUnit value={timeLeft.hours()} label="hrs" />
+      <CountdownUnit value={timeLeft.minutes()} label="min" />
+      <CountdownUnit value={timeLeft.seconds()} label="sec" />
+    </CountdownWrapper>
+  );
+};
+
+export default () => {
+  const { currentPool } = useContext(PoolContext);
+
+  if (!currentPool?.closingDate) {
+    return null;
+  }
+
+  return (
+    <BannerWithCountdown>
+      <Text>
+        The {currentPool.tokenSymbol} pool on {NETWORKS[currentPool.chainId].name} will close on{' '}
+        {moment(currentPool.closingDate).format('MMMM D, YYYY')}. Please withdraw all funds before then
+      </Text>
+      <Countdown endDate={currentPool.closingDate} />
+    </BannerWithCountdown>
+  );
+};
+
+const BannerWithCountdown = styled.div`
+  width: 100%;
+  min-height: 40px;
+  box-sizing: border-box;
+  padding: 0 22px;
+  background: #754CFF;
+  color: ${props => props.theme.color.white};
+  font-size: 14px;
+  line-height: 22px;
+  font-weight: ${props => props.theme.text.weight.bold};
+  text-align: center;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 24px;
+  z-index: 1;
+  @media only screen and (max-width: 1200px) {
+    flex-direction: column;
+    padding: 10px 22px;
+    gap: 12px;
+  }
+`;
+
+const Text = styled.span`
+  font-size: 16px;
+  font-weight: ${props => props.theme.text.weight.bold};
+`;
+
+const CountdownWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  height: 40px;
+`;
+
+const UnitWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 10px;
+  border-left: 1px solid #6437C1E5;
+  background: #2A1B5B;
+  min-width: 60px;
+  height: 100%;
+
+  &:first-child {
+    border-left: none;
+  }
+`;
+
+const UnitValue = styled.span`
+  font-size: 24px;
+  font-weight: ${props => props.theme.text.weight.bold};
+  margin-right: 6px;
+`;
+
+const UnitLabel = styled.span`
+  font-size: 14px;
+  font-weight: ${props => props.theme.text.weight.normal};
+`;
diff --git a/src/pages/index.js b/src/pages/index.js
index 621c2c3..0a3d81f 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -26,6 +26,7 @@ import DemoBanner from 'components/DemoBanner';
 import RestrictionModal from 'components/RestrictionModal';
 import Layout from 'components/Layout';
 import PaymentLinkModal from 'components/PaymentLinkModal';
+import BannerWithCountdown from 'components/BannerWithCountdown';
 
 import Welcome from 'pages/Welcome';
 import Deposit from 'pages/Deposit';
@@ -133,6 +134,7 @@ const MainApp = () => {
         <Robot3Image src={robot3Image} />
       </BackgroundImages>
       {isDemo && <DemoBanner />}
+      <BannerWithCountdown />
       <Layout header={<Header />} footer={<Footer />}>
         <Tabs />
         <Routes showWelcome={showWelcome} params={location.search} />

From ce6548dcc2db03eb1bb3642bdb318dd53cdd55e1 Mon Sep 17 00:00:00 2001
From: Max Alekseenko <nnwen0609@gmail.com>
Date: Thu, 5 Sep 2024 18:14:15 +0200
Subject: [PATCH 2/2] add closing date for polygon pool

---
 src/config/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/config/index.js b/src/config/index.js
index c74688b..1d3c3b5 100644
--- a/src/config/index.js
+++ b/src/config/index.js
@@ -28,6 +28,7 @@ const config = {
         }],
         addressPrefix: 'zkbob_polygon',
         paymentContractAddress: '0x76a911E76fC78F39e73cE0c532F8866ac28Dfe43',
+        closingDate: '2025-02-01T00:00:00Z',
       },
       'BOB2USDC-optimism': {
         chainId: 10,