seamless-protocol · ry-animal · Oct 23, 2023 · Oct 23, 2023 · Oct 23, 2023 · Oct 24, 2023
diff --git a/frontend/craco.config.js b/frontend/craco.config.js
@@ -5,4 +5,7 @@ module.exports = {
       plugins: [require('tailwindcss'), require('autoprefixer')],
     },
   },
+  eslint: {
+    enable: false,
+  },
 }
diff --git a/frontend/package.json b/frontend/package.json
@@ -9,14 +9,6 @@
     "@headlessui/react": "^1.4.1",
     "@heroicons/react": "^1.0.4",
     "@sentry/react": "^7.68.0",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
-    "@types/jest": "^26.0.15",
-    "@types/node": "^12.0.0",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
-    "@types/styled-components": "^5.1.9",
     "bnc-onboard": "^1.25.0",
     "coingecko-api": "^1.0.10",
     "graphql": "^15.5.0",
@@ -37,7 +29,7 @@
   },
   "scripts": {
     "start": "craco start --openssl-legacy-provider",
-    "build": "craco build --openssl-legacy-provider",
+    "build": "craco build --openssl-legacy-provider --legacy-bundling",
     "test": "craco test",
     "eject": "react-scripts eject",
     "lint:fix": "eslint src --ext .ts,.tsx --fix",
@@ -74,9 +66,18 @@
     }
   },
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^11.1.0",
+    "@testing-library/user-event": "^12.1.10",
     "@types/coingecko-api": "^1.0.0",
     "@typescript-eslint/eslint-plugin": "^4.26.0",
     "@typescript-eslint/parser": "^4.26.0",
+    "@types/jest": "^26.0.15",
+    "@types/node": "^12.0.0",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "@types/styled-components": "^5.1.9",
     "autoprefixer": "^9.8.6",
     "eslint": "^7.27.0",
     "eslint-config-airbnb": "^18.2.1",
@@ -89,9 +90,9 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "husky": "^6.0.0",
     "lint-staged": "^11.0.0",
-    "postcss": "^7.0.35",
+    "postcss": "^8.4.31",
     "prettier": "^2.3.0",
     "react-is": "^17.0.2",
-    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.1.2"
+    "tailwindcss": "^3.3.3"
   }
 }
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -19,7 +19,14 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-
+    <!-- Google tag (gtag.js) -->
+    <script async src=“https://www.googletagmanager.com/gtag/js?id=G-LPNNND6R3G”></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag("js", new Date());
+      gtag("config", "G-LPNNND6R3G");
+    </script>
     <!-- Ample additions start -->
     <link
       rel="preload"

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -13,6 +13,7 @@ import { DropdownsContainer } from 'components/DropdownsContainer'
 import { useEffect } from 'react'
 
 import BottomFooter from 'components/BottomFooter'
+import Banner from 'components/Banner'
 
 Sentry.init({
   dsn: 'https://65d10bb3c46af974c9c1c1bba9095149@o4505863051542528.ingest.sentry.io/4505863214465024',
@@ -44,6 +45,7 @@ function App() {
               <WalletContextProvider>
                 <StatsContextProvider>
                   <div className="flex flex-col gap-4">
+                    <Banner />
                     <Header />
                     <DropdownsContainer />
                     <Body />

diff --git a/frontend/src/assets/close.svg b/frontend/src/assets/close.svg
diff --git a/frontend/src/components/Banner.tsx b/frontend/src/components/Banner.tsx
@@ -0,0 +1,55 @@
+import { useState } from 'react'
+import styled from 'styled-components'
+import tw from 'twin.macro'
+import close from 'assets/close.svg'
+
+const Banner = () => {
+  const [showBanner, setShowBanner] = useState(true)
+
+  return (
+    <>
+      {showBanner ? (
+        <BannerContainer>
+          <TextContainer>
+            <p>
+              <b>Staking Farms will be temporarily inactive starting November 8th.</b> If your are currently using the
+              Staking Farms, you will need to unstake and withdraw your position on November 8th to continue earning OG
+              points. Learn more about how to unstake/withdraw{' '}
+              <a
+                href="https://seamlessprotocol.medium.com/unstaking-withdrawing-on-seamless-protocol-a-step-by-step-guide-e25e72d2b73b"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <b>here</b>
+              </a>
+              .
+            </p>
+          </TextContainer>
+          <button onClick={() => setShowBanner(false)} type="button">
+            <CloseImage
+              src={close}
+              alt="close banner icon"
+              width={20}
+              height={20}
+              className="absolute right-2 top-3 sm:right-6 sm:top-3"
+            />
+          </button>
+        </BannerContainer>
+      ) : null}
+    </>
+  )
+}
+
+export default Banner
+
+const BannerContainer = styled.div`
+  ${tw`flex w-full items-center justify-center bg-banner text-black sm:p-3 -mb-4`}
+`
+
+const TextContainer = styled.div`
+  ${tw`text-xs sm:text-sm w-3/4 text-center py-4 sm:py-2 md:py-0`}
+`
+
+const CloseImage = styled.img`
+  ${tw`absolute right-2 top-3 sm:right-6 sm:top-3`}
+`
diff --git a/frontend/src/components/HeaderWalletButton.tsx b/frontend/src/components/HeaderWalletButton.tsx
@@ -27,7 +27,7 @@ const ButtonContainer = styled.div`
 // const pink = `bg-footer hover:bg-[#FF6ED7/50]`
 const Button = styled.button`
   ${tw`w-full px-8 py-4 rounded-bl-2xl float-right bg-lightBlue`}
-  ${tw`sm:px-8 sm:py-5 md:pr-12 lg:px-16`}
+  ${tw`sm:px-8 sm:py-5 md:pr-12 lg:px-16 lg:-mt-1`}
 `
 const StyledParagraph = styled(Paragraph)`
   ${tw`md:text-xs lg:text-lg`}

diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
@@ -37,6 +37,7 @@ module.exports = {
       cream: '#F8F0E5',
       lightBlue: '#3AB0FF',
       surface: '#77037B',
+      banner: '#fabc44',
     },
     container: {
       center: true,