feat[SWA-130]: add URL warning banner

SwaprHQ · Dec 28, 2023 · 10dddfd · 10dddfd
1 parent f3b62d6
commit 10dddfd
Showing 1 changed file with 30 additions and 0 deletions.
diff --git a/src/pages/App.tsx b/src/pages/App.tsx
@@ -4,6 +4,7 @@ import { Suspense, useEffect, useState } from 'react'
 import { SkeletonTheme } from 'react-loading-skeleton'
 import { useLocation } from 'react-router-dom'
 import { Slide, ToastContainer, toast } from 'react-toastify'
+import { Text } from 'rebass'
 import styled, { useTheme } from 'styled-components'
 
 import { defaultSubgraphClient, subgraphClients } from '../apollo/client'
@@ -16,6 +17,7 @@ import Web3ReactManager from '../components/Web3ReactManager'
 import { useActiveWeb3React } from '../hooks'
 import { useStacklyPopup } from '../state/application/hooks'
 import { useUpdateStacklyPopupOpen } from '../state/user/hooks'
+import { CloseIcon } from '../theme'
 import { SWPRSupportedChains } from '../utils/chainSupportsSWPR'
 
 import { Routes } from './Routes'
@@ -68,13 +70,30 @@ const BodyWrapper = styled.div<{
 const Marginer = styled.div`
   margin-top: 5rem;
 `
+
+const WarningBanner = styled.div`
+  display: flex;
+  min-height: 30px;
+  width: 100%;
+  background-color: ${({ theme }) => theme.bg1And2};
+  font-size: 12px;
+  z-index: 2;
+  align-items: center;
+  padding: 0 14px;
+`
+
+const TextBanner = styled.p`
+  margin: 0 auto;
+`
+
 const showStacklyPopup = process.env.REACT_APP_SHOW_STACKLY_POPUP === 'true'
 
 export default function App() {
   const { chainId } = useActiveWeb3React()
   const location = useLocation()
   const theme = useTheme()
   const [isSwapPage, setIsSwapPage] = useState(false)
+  const [isOpenBanner, setIsOpenBanner] = useState(true)
   const isAdvancedTradeMode = location.pathname.includes('/swap/pro')
 
   useEffect(() => {
@@ -111,6 +130,17 @@ export default function App() {
             <NetworkWarningModal />
             <Web3ReactManager>
               <AppWrapper id="app-wrapper">
+                {isOpenBanner && (
+                  <WarningBanner>
+                    <TextBanner>
+                      Make sure you are on&nbsp;
+                      <Text as="span" fontWeight="bold">
+                        swapr.eth.limo
+                      </Text>
+                    </TextBanner>
+                    <CloseIcon height={16} width={16} onClick={() => setIsOpenBanner(false)} />
+                  </WarningBanner>
+                )}
                 <HeaderWrapper>
                   <Header />
                 </HeaderWrapper>