Merge pull request #241 from CarmineOptions/feature/price-protect-vid…

…eo-popup

feat: add price protect video popup

src/App.tsx

@@ -33,6 +33,7 @@ import PriceGuardPage from "./pages/priceGuard";
 import "./style/base.css";
 import YieldPage from "./pages/yield";
 import SwapPage from "./pages/swap";
+import PriceProtectVideoPage from "./pages/priceProtectVideo";
 
 const App = () => {
   const [check, rerender] = useState(false);
@@ -76,6 +77,10 @@ const App = () => {
                 <Route path="/battlecharts" element={<BattlechartsPage />} />
                 <Route path="/priceprotect" element={<PriceGuardPage />} />
                 <Route path="/yield" element={<YieldPage />} />
+                <Route
+                  path="/price-protect-video"
+                  element={<PriceProtectVideoPage />}
+                />
                 <Route path="*" element={<NotFound />} />
               </Routes>
             </Router>

src/components/Announce/BraavosAnnounce.tsx

@@ -33,6 +33,11 @@ export const BraavosAnnounce = () => {
     }
   }, [account, data, show]);
 
+  if (window?.location?.pathname === "/price-protect-video") {
+    // do not show in video popup
+    return null;
+  }
+
   if (isLoading || isError || !data || !show || !account) {
     return null;
   }

src/components/Popup/Popup.tsx

@@ -0,0 +1 @@
+export const Popup = () => {};

src/components/Popup/index.ts

@@ -0,0 +1,27 @@
+export type PopupConfig = {
+  url: string;
+  width?: number;
+  height?: number;
+  left?: number;
+  top?: number;
+};
+
+export const openPopupWindow = (config: PopupConfig) => {
+  if (!window) {
+    return;
+  }
+
+  const { url, width, height, left, top } = {
+    width: 987,
+    height: 555,
+    left: 0,
+    top: 0,
+    ...config,
+  };
+
+  window.open(
+    url,
+    "popupWindow", // Window name
+    `width=${width},height=${height},top=${top},left=${left},resizable,scrollbars`
+  );
+};

src/pages/priceGuard.tsx

@@ -1,6 +1,48 @@
+/* eslint-disable no-unreachable */
+/* eslint-disable jsx-a11y/anchor-is-valid */
 import { Helmet } from "react-helmet";
 import { Layout } from "../components/Layout";
 import { UserPriceGuard, PriceGuard } from "../components/PriceGuard";
+import { openPopupWindow, PopupConfig } from "../components/Popup";
+
+const getVideoPopupConfig = (): PopupConfig => {
+  const url = "/price-protect-video";
+
+  return { url };
+
+  // video has fixed size, cannot use this unless video can be resized inside iframe
+  const defaultWidth = 987;
+  const defaultHeight = 555;
+  const aspectRatio = defaultWidth / defaultHeight;
+  const width = window.innerWidth;
+  const height = window.innerHeight;
+
+  if (width >= defaultWidth && height >= defaultHeight) {
+    return {
+      url,
+      width: defaultWidth,
+      height: defaultHeight,
+    };
+  }
+
+  const widthBasedHeight = width / aspectRatio;
+
+  if (height >= widthBasedHeight) {
+    return {
+      url,
+      width,
+      height: widthBasedHeight,
+    };
+  }
+
+  const heightBasedWidth = height * aspectRatio;
+
+  return {
+    url,
+    width: heightBasedWidth,
+    height,
+  };
+};
 
 const PriceGuardPage = () => {
   return (
@@ -18,7 +60,12 @@ const PriceGuardPage = () => {
         <a
           rel="noopener nofollow noreferrer"
           target="_blank"
-          href="https://docs.carmine.finance/carmine-options-amm/use-cases"
+          href="#"
+          onClick={() => {
+            const cfg = getVideoPopupConfig();
+            console.log(cfg);
+            openPopupWindow(cfg);
+          }}
         >
           Learn more
         </a>

src/pages/priceProtectVideo.tsx

@@ -0,0 +1,14 @@
+const PriceProtectVideoPage = () => (
+  <iframe
+    src="https://drive.google.com/file/d/1M7ROxzZ-d9XhePYe-15j0T--UGdoiYPi/preview"
+    style={{
+      border: "none",
+    }}
+    width="987"
+    height="555"
+    allow="autoplay"
+    title="CarmineOptions Price Protect"
+  ></iframe>
+);
+
+export default PriceProtectVideoPage;