From 83a694be85a1255d40d461d176c367fe73e0cf23 Mon Sep 17 00:00:00 2001
From: wormat <wormat@maelstrom.finance>
Date: Thu, 13 Oct 2022 21:18:39 +0200
Subject: [PATCH] feat(ui): Add Wormhole page

---
 apps/ui/src/App.tsx                 |  2 ++
 apps/ui/src/pages/WormholePage.scss | 10 ++++++++
 apps/ui/src/pages/WormholePage.tsx  | 38 +++++++++++++++++++++++++++++
 3 files changed, 50 insertions(+)
 create mode 100644 apps/ui/src/pages/WormholePage.scss
 create mode 100644 apps/ui/src/pages/WormholePage.tsx

diff --git a/apps/ui/src/App.tsx b/apps/ui/src/App.tsx
index 9f4b05fcd..fde766901 100644
--- a/apps/ui/src/App.tsx
+++ b/apps/ui/src/App.tsx
@@ -23,6 +23,7 @@ import StakePage from "./pages/StakePage";
 import SwapPage from "./pages/SwapPage";
 import SwapPageV2 from "./pages/SwapPageV2";
 import TosPage from "./pages/TosPage";
+import WormholePage from "./pages/WormholePage";
 
 function App(): ReactElement {
   return (
@@ -64,6 +65,7 @@ function App(): ReactElement {
               {process.env.REACT_APP_ENABLE_POOL_RESTRUCTURE && (
                 <Route path="swapV2" element={<SwapPageV2 />} />
               )}
+              <Route path="wormhole" element={<WormholePage />} />
               <Route path="collectibles" element={<CollectiblesPage />} />
               <Route path="tos" element={<TosPage />} />
               <Route path="media" element={<MediaPage />} />
diff --git a/apps/ui/src/pages/WormholePage.scss b/apps/ui/src/pages/WormholePage.scss
new file mode 100644
index 000000000..010e88b94
--- /dev/null
+++ b/apps/ui/src/pages/WormholePage.scss
@@ -0,0 +1,10 @@
+.wormholeForm {
+  width: 500px;
+  transition: all 0.5s ease;
+}
+
+@media (min-width: 768px) {
+  .wormholeForm {
+    min-width: 460px;
+  }
+}
diff --git a/apps/ui/src/pages/WormholePage.tsx b/apps/ui/src/pages/WormholePage.tsx
new file mode 100644
index 000000000..3d12a9f16
--- /dev/null
+++ b/apps/ui/src/pages/WormholePage.tsx
@@ -0,0 +1,38 @@
+import {
+  EuiPage,
+  EuiPageBody,
+  EuiPageContent,
+  EuiPageContentBody,
+  EuiSpacer,
+  EuiTitle,
+} from "@elastic/eui";
+import type { ReactElement } from "react";
+import { useTranslation } from "react-i18next";
+
+import { WormholeForm } from "../components/WormholeForm";
+import { useTitle } from "../hooks";
+
+import "./WormholePage.scss";
+
+const WormholePage = (): ReactElement => {
+  const { t } = useTranslation();
+  useTitle(t("nav.wormhole"));
+
+  return (
+    <EuiPage restrictWidth={620}>
+      <EuiPageBody>
+        <EuiPageContent verticalPosition="center">
+          <EuiPageContentBody>
+            <EuiTitle>
+              <h2>{"Wormhole"}</h2>
+            </EuiTitle>
+            <EuiSpacer />
+            <WormholeForm />
+          </EuiPageContentBody>
+        </EuiPageContent>
+      </EuiPageBody>
+    </EuiPage>
+  );
+};
+
+export default WormholePage;