Merge pull request #73 from compolabs/feat/dummy-error

[1197] Add unser construction page

Author: EchoDex

src/App.tsx

@@ -7,20 +7,20 @@ import { Column } from "@components/Flex";
 
 import Header from "./components/Header";
 import { usePrivateKeyAsAuth } from "./hooks/usePrivateKeyAsAuth";
+import UnderConstruction from "./screens/Errors/UnderConstruction";
 import Faucet from "./screens/Faucet";
 import TradeScreen from "./screens/TradeScreen";
-import { ROUTES } from "./constants";
+import { isProduction, ROUTES } from "./constants";
 
-const Root = styled(Column)`
-  width: 100%;
-  align-items: center;
-  background: ${({ theme }) => theme.colors.bgPrimary};
-  height: 100vh;
-`;
+const isUnderConstruction = isProduction;
 
 const App: React.FC = observer(() => {
   usePrivateKeyAsAuth();
 
+  if (isUnderConstruction) {
+    return <UnderConstruction />;
+  }
+
   return (
     <Root>
       <Header />
@@ -37,3 +37,10 @@ const App: React.FC = observer(() => {
 });
 
 export default App;
+
+const Root = styled(Column)`
+  width: 100%;
+  align-items: center;
+  background: ${({ theme }) => theme.colors.bgPrimary};
+  height: 100vh;
+`;

src/components/Loader.tsx

@@ -10,11 +10,12 @@ interface Props {
   size?: number;
   hideText?: boolean;
   text?: string;
+  className?: string;
 }
 
-const Loader: React.FC<Props> = ({ size = 64, hideText, text = "Loading" }) => {
+const Loader: React.FC<Props> = ({ size = 64, hideText, text = "Loading", className }) => {
   return (
-    <SmartFlex gap="8px" height="100%" width="100%" center column>
+    <SmartFlex className={className} gap="8px" height="100%" width="100%" center column>
       <LoaderLogoImage alt="loader" height={size} src={sparkLogoIcon} width={size} />
       {!hideText && <Text primary>{text}</Text>}
     </SmartFlex>

src/constants/index.ts

@@ -14,6 +14,10 @@ export const CHARTS_STORAGE = "https://tv-backend-v4.herokuapp.com/";
 export const DEFAULT_DECIMALS = 9;
 export const USDC_DECIMALS = 6;
 
+export const TWITTER_LINK = "https://twitter.com/Sprkfi";
+export const GITHUB_LINK = "https://github.com/compolabs/spark";
+export const DOCS_LINK = "https://docs.sprk.fi";
+
 type TMenuItem = {
   title: string;
   route?: string;
@@ -23,11 +27,13 @@ type TMenuItem = {
 export const MENU_ITEMS: Array<TMenuItem> = [
   { title: "TRADE", route: ROUTES.ROOT },
   { title: "FAUCET", route: ROUTES.FAUCET },
-  { title: "DOCS", link: "https://docs.sprk.fi" },
-  { title: "GITHUB", link: "https://github.com/compolabs/spark" },
-  { title: "TWITTER", link: "https://twitter.com/Sprkfi" },
+  { title: "DOCS", link: DOCS_LINK },
+  { title: "GITHUB", link: GITHUB_LINK },
+  { title: "TWITTER", link: TWITTER_LINK },
 ];
 
+export const isProduction = window.location.host === "app.sprk.fi";
+
 export const FUEL_CONFIG = {
   connectors: [
     new FuelWalletConnector(),

src/screens/Errors/UnderConstruction.tsx

@@ -0,0 +1,48 @@
+import React, { useEffect } from "react";
+import styled from "@emotion/styled";
+
+import Text, { TEXT_TYPES } from "@components/Text";
+import Button from "@src/components/Button";
+import Loader from "@src/components/Loader";
+import { SmartFlex } from "@src/components/SmartFlex";
+import { DOCS_LINK, TWITTER_LINK } from "@src/constants";
+
+const UnderConstruction: React.FC = () => {
+  useEffect(() => {
+    document.title = `Spark | Work in progress...`;
+  }, []);
+
+  return (
+    <SmartFlex gap="16px" width="100%" center column>
+      <LoaderStyled hideText />
+      <Text type={TEXT_TYPES.H} primary>
+        🛠️ Website Under Maintenance 🛠️
+      </Text>
+      <SmartFlex gap="12px" center column>
+        <Text type={TEXT_TYPES.BODY} secondary>
+          Our website is currently undergoing maintenance.
+        </Text>
+        <Text type={TEXT_TYPES.BODY} secondary>
+          We are working hard to fix the current issues and improve the site.
+        </Text>
+        <Text type={TEXT_TYPES.BODY} secondary>
+          Please check back later. We will let you know as soon as everything is ready!
+        </Text>
+      </SmartFlex>
+      <SmartFlex gap="16px" center>
+        <a href={TWITTER_LINK} rel="noreferrer noopener" target="_blank">
+          <Button green>Twitter</Button>
+        </a>
+        <a href={DOCS_LINK} rel="noreferrer noopener" target="_blank">
+          <Button green>Docs</Button>
+        </a>
+      </SmartFlex>
+    </SmartFlex>
+  );
+};
+
+export default UnderConstruction;
+
+const LoaderStyled = styled(Loader)`
+  height: fit-content;
+`;

src/screens/TradeScreen/StatusBar/StatusBar.tsx

@@ -4,6 +4,7 @@ import { observer } from "mobx-react";
 
 import { Row } from "@components/Flex";
 import Text, { TEXT_TYPES } from "@components/Text";
+import { TWITTER_LINK } from "@src/constants";
 
 import tweets from "./tweets";
 
@@ -17,7 +18,7 @@ const StatusBar: React.FC = observer(() => {
   return (
     <Root>
       <Row alignItems="center" mainAxisSize="fit-content" style={{ flex: 1 }}>
-        <a href="https://twitter.com/Sprkfi" rel="noreferrer noopener" target="_blank">
+        <a href={TWITTER_LINK} rel="noreferrer noopener" target="_blank">
           <LinkText type={TEXT_TYPES.SUPPORTING}>Twitter</LinkText>
         </a>
       </Row>
@@ -89,12 +90,10 @@ const Divider = styled.div`
 
 const LinkText = styled(Text)`
   ${TEXT_TYPES.SUPPORTING};
-  transition: .4s;
+  transition: 0.4s;
   cursor: pointer;
 
   &:hover {
     color: ${({ theme }) => theme.colors.textPrimary};
   }
-;
-}
 `;