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;