feat: maintenance

src/layouts/App.tsx

@@ -11,6 +11,55 @@ import { QueryClient, QueryClientProvider } from "react-query"
 import styled from "styled-components"
 import usePairs from "rest/usePairs"
 import useMigration from "hooks/useMigration"
+import Modal from "components/Modal"
+
+const ModalContent = styled.div`
+  width: 100%;
+  max-width: calc(100vw - 32px);
+  margin: 0 auto;
+  border-radius: 20px;
+  box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.35);
+  background-color: #fff;
+  padding: 30px 0px;
+  color: #5c5c5c;
+  & > div {
+    position: relative;
+    width: 100%;
+    height: auto;
+    max-height: 80vh;
+    overflow-y: auto;
+    padding: 0 30px;
+
+    font-size: 14px;
+    font-weight: normal;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: 1.71;
+    letter-spacing: normal;
+    text-align: center;
+    color: #5c5c5c;
+  }
+
+  @media screen and (max-width: ${({ theme }) => theme.breakpoint}) {
+    padding: 30px 0px;
+    & > div {
+      padding: 0 16px;
+    }
+  }
+`
+
+const ModalTitle = styled.div`
+  display: block;
+  font-size: 20px;
+  font-weight: bold;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.35;
+  letter-spacing: normal;
+  text-align: center;
+  color: #0222ba;
+  margin-bottom: 30px;
+`
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -84,6 +133,31 @@ const App = () => {
             </div>
           )}
           <Footer />
+
+          <Modal isOpen close={() => {}} open={() => {}}>
+            <ModalContent>
+              <div>
+                <ModalTitle>Under maintenance</ModalTitle>
+                <div style={{ marginBottom: 20 }}>
+                  Terraswap classic is under maintenance in preparation for
+                  migration for Cosmwasm version upgrade. Apologies for any
+                  inconvenience.
+                  <div
+                    style={{
+                      border: "1px solid #eeeeee",
+                      borderRadius: 8,
+                      padding: 10,
+                      marginTop: 10,
+                      fontWeight: 400,
+                      textAlign: "left",
+                    }}
+                  >
+                    <b>Target version:</b> v1.1.0
+                  </div>
+                </div>
+              </div>
+            </ModalContent>
+          </Modal>
         </ContractProvider>
       </ThemeProvider>
     </QueryClientProvider>

src/layouts/Header.tsx

@@ -39,7 +39,7 @@ const Banner = styled.div`
   font-style: normal;
   line-height: normal;
   letter-spacing: normal;
-  z-index: 9999999;
+  z-index: 1;
 
   :hover {
     background-color: rgba(241, 94, 126, 0.8);
@@ -84,11 +84,11 @@ const Header = () => {
   return (
     <>
       <Link to="/migration">
-          <Banner>
-            {isMigrationPage
-              ? "Terraswap Classic - Migration Center"
-              : "Terraswap Classic - Migration is now available, click here!"}
-          </Banner>
+        <Banner>
+          {isMigrationPage
+            ? "Terraswap Classic - Migration Center"
+            : "Terraswap Classic - Migration is now available, click here!"}
+        </Banner>
       </Link>
       <header className={styles.header}>
         <Container className={styles.container}>

src/layouts/Sidebar.tsx

@@ -191,7 +191,7 @@ const Sidebar = () => {
         ) : (
           <div>
             <NavLink
-              to="/"
+              to="/dashboard"
               className={location.pathname?.includes("/pairs") ? "active" : ""}
               onClick={() => close()}
             >

src/routes.tsx

@@ -6,7 +6,7 @@ import Swap from "./pages/Swap"
 
 export default () => (
   <Routes>
-    <Route index element={<Dashboard />} />
+    <Route path="/dashboard" element={<Dashboard />} />
     <Route path="/swap" element={<Swap />} />
     <Route path="/pairs/:address" element={<PairPage />} />
     <Route element={<Navigate to="/" replace />} />