diff --git a/src/pages/App.tsx b/src/pages/App.tsx index 02d20e041..87a478af5 100644 --- 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,6 +70,22 @@ 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() { @@ -75,6 +93,7 @@ export default function App() { 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() { + {isOpenBanner && ( + + + Make sure you are on  + + swapr.eth.limo + + + setIsOpenBanner(false)} /> + + )}