feat: move content of main page to /dev and root/main page is a redirection page to the widgets page of docs.bosonprotocol.io

package.json

@@ -3,14 +3,15 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@bosonprotocol/react-kit": "^0.29.0-alpha.6",
+    "@bosonprotocol/react-kit": "^0.29.0-alpha.7",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.2",
     "@types/node": "^16.18.16",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
+    "cross-env": "^7.0.3",
     "crypto-browserify": "^3.12.0",
     "react": "^18.2.0",
     "react-codecopy": "^5.0.1",
@@ -23,7 +24,7 @@
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "react-app-rewired start",
+    "start": "cross-env PORT=3006 react-app-rewired start",
     "dev": "npm run start",
     "build": "react-app-rewired build",
     "test": "react-app-rewired test",

src/App.tsx

@@ -1,20 +1,30 @@
 import { HashRouter, Route, Routes } from "react-router-dom";
 
-import { Index, indexPath } from "./components/Index";
+import { Index } from "./components/Index";
+import {
+  redirectPath,
+  RedirectToDocs
+} from "./components/redirect/RedirectToDocs";
 import { Commit, commitPath } from "./components/widgets/commit/Commit";
 import { Finance, financePath } from "./components/widgets/finance/Finance";
+import { indexPath } from "./components/widgets/path";
 import { Redeem, redeemPath } from "./components/widgets/redeem/Redeem";
+import { GlobalStyle } from "./globalStyles";
 
 function App() {
   return (
-    <HashRouter>
-      <Routes>
-        <Route path={indexPath} element={<Index />} />
-        <Route path={financePath} element={<Finance />}></Route>
-        <Route path={commitPath} element={<Commit />}></Route>
-        <Route path={redeemPath} element={<Redeem />}></Route>
-      </Routes>
-    </HashRouter>
+    <>
+      <GlobalStyle />
+      <HashRouter>
+        <Routes>
+          <Route path={redirectPath} element={<RedirectToDocs />} />
+          <Route path={indexPath} element={<Index />} />
+          <Route path={financePath} element={<Finance />}></Route>
+          <Route path={commitPath} element={<Commit />}></Route>
+          <Route path={redeemPath} element={<Redeem />}></Route>
+        </Routes>
+      </HashRouter>
+    </>
   );
 }
 

src/components/Index.tsx

@@ -5,8 +5,6 @@ import { CommitDisplay } from "./widgets/commit/CommitDisplay";
 import { FinanceDisplay } from "./widgets/finance/FinanceDisplay";
 import { RedeemDisplay } from "./widgets/redeem/RedeemDisplay";
 
-export const indexPath = "/";
-
 const envConfigs = getEnvConfigs(CONFIG.envName);
 
 export function Index() {

src/components/redirect/RedirectToDocs.tsx

@@ -0,0 +1,53 @@
+import React, { useEffect } from "react";
+import styled from "styled-components";
+
+import { ReactComponent as BosonLogo } from "../../logo.svg";
+export const redirectPath = "/";
+
+const widgetsPage = "https://docs.bosonprotocol.io/docs/category/widgets";
+
+const Redirecting = styled.div`
+  width: 104px;
+  @keyframes ellipsis {
+    to {
+      width: 1.25em;
+    }
+  }
+  &:after {
+    overflow: hidden;
+    display: inline-block;
+    vertical-align: bottom;
+    animation: ellipsis steps(4, end) 900ms infinite;
+    content: "...";
+    width: 0px;
+  }
+`;
+
+export const RedirectToDocs: React.FC = () => {
+  useEffect(() => {
+    window.location.href = widgetsPage;
+  }, []);
+  return (
+    <div
+      style={{
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        flexDirection: "column",
+        height: "100%"
+      }}
+    >
+      <BosonLogo width="300px" style={{ maxWidth: "100%" }} />
+      <Redirecting>Redirecting</Redirecting>
+      <p
+        style={{
+          wordBreak: "break-word",
+          textAlign: "center"
+        }}
+      >
+        If you don't get automatically redirected, click on{" "}
+        <a href={widgetsPage}>{widgetsPage}</a>
+      </p>
+    </div>
+  );
+};

src/components/widgets/path.ts

@@ -0,0 +1 @@
+export const indexPath = "/dev";

src/globalStyles.tsx

@@ -0,0 +1,17 @@
+import { createGlobalStyle } from "styled-components";
+
+export const GlobalStyle = createGlobalStyle`
+  html, body, #root {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+
+    font-family: "Plus Jakarta Sans", sans-serif;
+
+    margin: 0;
+    padding: 0;
+    font-style: normal;
+
+    height: 100vh;
+  }
+`;