diff --git a/src/App.tsx b/src/App.tsx
index 787109a7..45e7cae4 100644
--- a/src/App.tsx
+++ b/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 = () => {
} />
} />
} />
+ }
+ />
} />
diff --git a/src/components/Announce/BraavosAnnounce.tsx b/src/components/Announce/BraavosAnnounce.tsx
index 6cec8687..83b3556c 100644
--- a/src/components/Announce/BraavosAnnounce.tsx
+++ b/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;
}
diff --git a/src/components/Popup/Popup.tsx b/src/components/Popup/Popup.tsx
new file mode 100644
index 00000000..dcdc7895
--- /dev/null
+++ b/src/components/Popup/Popup.tsx
@@ -0,0 +1 @@
+export const Popup = () => {};
diff --git a/src/components/Popup/index.ts b/src/components/Popup/index.ts
new file mode 100644
index 00000000..a9b8a075
--- /dev/null
+++ b/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`
+ );
+};
diff --git a/src/pages/priceGuard.tsx b/src/pages/priceGuard.tsx
index 9b012a28..9d7028c0 100644
--- a/src/pages/priceGuard.tsx
+++ b/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 = () => {
{
+ const cfg = getVideoPopupConfig();
+ console.log(cfg);
+ openPopupWindow(cfg);
+ }}
>
Learn more
diff --git a/src/pages/priceProtectVideo.tsx b/src/pages/priceProtectVideo.tsx
new file mode 100644
index 00000000..b1696fae
--- /dev/null
+++ b/src/pages/priceProtectVideo.tsx
@@ -0,0 +1,14 @@
+const PriceProtectVideoPage = () => (
+
+);
+
+export default PriceProtectVideoPage;