add pw units

src/@types/playwire.d.ts

@@ -0,0 +1,17 @@
+interface PlaywireUnit {
+    type: string;
+    selectorId?: string;
+}
+
+interface Window {
+    ramp: {
+        que: unknown[];
+        passiveMode: boolean;
+        addUnits: (units: PlaywireUnit[]) => Promise<void>;
+        displayUnits: () => void;
+    };
+
+    _pwGA4PageviewId: string;
+    dataLayer: unknown[];
+    gtag: (...args: unknown[]) => void;
+}

src/app.tsx

@@ -3,10 +3,8 @@
 import "./i18n";
 import { store } from "./store";
 /* eslint-enable simple-import-sort/imports */
-
 import { registerSW } from "virtual:pwa-register";
-import { ThemeProvider } from "@mui/material";
-import { Slide } from "@mui/material";
+import { Slide, ThemeProvider } from "@mui/material";
 import About from "@src/pages/about/About";
 import Privacy from "@src/pages/about/Privacy";
 import { SnackbarProvider } from "notistack";
@@ -30,6 +28,8 @@ import useIsMobile from "@src/hooks/is-mobile";
 import log from "@src/utils/logger";
 import { useAppSelector } from "@src/hooks/redux";
 import { selectConfiguration } from "@src/reducers/configuration/configuration-slice";
+import SomethingWentWrong from "@src/components/SometingWentWrong";
+import { ErrorBoundary } from "react-error-boundary";
 
 const DauntlessBuilderApp = () => {
     const isMobile = useIsMobile();
@@ -40,76 +40,81 @@ const DauntlessBuilderApp = () => {
 
     return (
         <ThemeProvider theme={theme}>
-            <BrowserRouter>
-                <SnackbarProvider
-                    TransitionComponent={Slide}
-                    anchorOrigin={{
-                        horizontal: isMobile ? "center" : "right",
-                        vertical: "bottom",
-                    }}
-                    maxSnack={3}
-                >
-                    <Layout>
-                        <Routes>
-                            <Route path="/">
-                                <Route
-                                    element={<Home />}
-                                    index
-                                />
-
-                                <Route path="b">
+            <ErrorBoundary
+                FallbackComponent={SomethingWentWrong}
+                onError={(e, info) => log.error(e.message, { info })}
+            >
+                <BrowserRouter>
+                    <SnackbarProvider
+                        TransitionComponent={Slide}
+                        anchorOrigin={{
+                            horizontal: isMobile ? "center" : "right",
+                            vertical: "bottom",
+                        }}
+                        maxSnack={3}
+                    >
+                        <Layout>
+                            <Routes>
+                                <Route path="/">
                                     <Route
-                                        element={<Navigate to={"/b/new"} />}
+                                        element={<Home />}
                                         index
                                     />
+
+                                    <Route path="b">
+                                        <Route
+                                            element={<Navigate to={"/b/new"} />}
+                                            index
+                                        />
+                                        <Route
+                                            element={<NewBuild />}
+                                            path="new"
+                                        />
+                                        <Route
+                                            element={<BuildFinder />}
+                                            path="finder"
+                                        />
+                                        <Route
+                                            element={<MetaBuilds />}
+                                            path="meta"
+                                        />
+                                        <Route
+                                            element={<Build />}
+                                            path=":buildId"
+                                        />
+                                    </Route>
+
+                                    <Route
+                                        element={<Favorites />}
+                                        path="/favorites"
+                                    />
+
                                     <Route
-                                        element={<NewBuild />}
-                                        path="new"
+                                        element={<About />}
+                                        path="/about"
                                     />
+
                                     <Route
-                                        element={<BuildFinder />}
-                                        path="finder"
+                                        element={<Privacy />}
+                                        path="/privacy"
                                     />
+
                                     <Route
-                                        element={<MetaBuilds />}
-                                        path="meta"
+                                        element={<Settings />}
+                                        path="/settings"
                                     />
+
                                     <Route
-                                        element={<Build />}
-                                        path=":buildId"
+                                        element={<NotFound />}
+                                        path="*"
                                     />
                                 </Route>
-
-                                <Route
-                                    element={<Favorites />}
-                                    path="/favorites"
-                                />
-
-                                <Route
-                                    element={<About />}
-                                    path="/about"
-                                />
-
-                                <Route
-                                    element={<Privacy />}
-                                    path="/privacy"
-                                />
-
-                                <Route
-                                    element={<Settings />}
-                                    path="/settings"
-                                />
-
-                                <Route
-                                    element={<NotFound />}
-                                    path="*"
-                                />
-                            </Route>
-                        </Routes>
-                        <BackgroundTasks />
-                    </Layout>
-                </SnackbarProvider>
-            </BrowserRouter>
+                            </Routes>
+                            <BackgroundTasks />
+                        </Layout>
+                    </SnackbarProvider>
+                </BrowserRouter>
+            </ErrorBoundary>
         </ThemeProvider>
     );
 };

src/components/AdSpace.tsx

@@ -1,11 +1,51 @@
 import { FeaturedVideo } from "@mui/icons-material";
 import { Box, useTheme } from "@mui/material";
+import { useAppSelector } from "@src/hooks/redux";
+import { selectEvents } from "@src/reducers/events/events-slice";
 import { adsEnabled } from "@src/utils/env-tools";
+import log from "@src/utils/logger";
+import React, { useEffect } from "react";
 
-const AdSpace = () => {
+export enum UnitType {
+    RightRail = "right_rail",
+    BottomRail = "bottom_rail",
+    LeftRail = "left_rail",
+}
+
+interface AdSpaceProps {
+    unitType: UnitType;
+}
+
+const AdSpace: React.FC<AdSpaceProps> = ({ unitType }) => {
     const theme = useTheme();
 
-    if (!adsEnabled()) {
+    const events = useAppSelector(selectEvents);
+
+    const selectorName = `db_unit_${unitType.toString()}`;
+
+    useEffect(() => {
+        if (!events.playwireSetupHasFinished) {
+            return;
+        }
+
+        const initUnit = async () => {
+            try {
+                await window.ramp.addUnits([
+                    {
+                        selectorId: selectorName,
+                        type: unitType,
+                    },
+                ]);
+                window.ramp.displayUnits();
+            } catch (error) {
+                log.error("ramp: could not add unit", { error });
+                window.ramp.displayUnits();
+            }
+        };
+        initUnit();
+    }, [events.playwireSetupHasFinished, selectorName, unitType]);
+
+    if (!adsEnabled) {
         return null;
     }
 
@@ -28,7 +68,7 @@ const AdSpace = () => {
         );
     }
 
-    return null;
+    return <div id={selectorName} />;
 };
 
-export default AdSpace;
+export default React.memo(AdSpace);

src/components/AdSpaceFloating.tsx

@@ -1,5 +1,5 @@
 import { Box, useTheme } from "@mui/material";
-import AdSpace from "@src/components/AdSpace";
+import AdSpace, { UnitType } from "@src/components/AdSpace";
 import useIsMobile from "@src/hooks/is-mobile";
 import useWindowSize from "@src/hooks/window-size";
 import { adsEnabled } from "@src/utils/env-tools";
@@ -13,7 +13,7 @@ const AdSpaceFloating = () => {
     const isMobile = useIsMobile();
     const { width } = useWindowSize();
 
-    if (!adsEnabled()) {
+    if (!adsEnabled) {
         return null;
     }
 
@@ -49,7 +49,7 @@ const AdSpaceFloating = () => {
 
     return (
         <Box sx={style}>
-            <AdSpace />
+            <AdSpace unitType={isMobile ? UnitType.BottomRail : UnitType.RightRail} />
         </Box>
     );
 };

src/components/BuildMenu.tsx

@@ -94,7 +94,7 @@ const BuildMenu: React.FC = () => {
                         color="primary"
                         onClick={handleCopyToClipboardClicked}
                         sx={{
-                            bottom: adsEnabled() ? `${adSpaceMobileBannerHeight}px` : theme.spacing(2),
+                            bottom: adsEnabled ? `${adSpaceMobileBannerHeight}px` : theme.spacing(2),
                             position: "fixed",
                             right: theme.spacing(3),
                         }}

src/components/Layout.tsx

@@ -31,14 +31,14 @@ import {
     Typography,
     useTheme,
 } from "@mui/material";
-import AdSpace from "@src/components/AdSpace";
+import AdSpace, { UnitType } from "@src/components/AdSpace";
 import AdSpaceFloating, { adSpaceRightSideMinSize } from "@src/components/AdSpaceFloating";
 import BuildMenu from "@src/components/BuildMenu";
 import LinkBox from "@src/components/LinkBox";
 import SomethingWentWrong from "@src/components/SometingWentWrong";
 import Spacer from "@src/components/Spacer";
 import { drawerWidth } from "@src/components/theme";
-import Tracking from "@src/components/Tracking";
+import TrackingRampSetup from "@src/components/TrackingRampSetup";
 import { crowdinLink, discordServerUrl, githubUrl, xTwitterUrl } from "@src/constants";
 import dauntlessBuilderData from "@src/data/Data";
 import useIsMobile from "@src/hooks/is-mobile";
@@ -88,7 +88,7 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
         { icon: <Settings />, link: "/settings", text: t("drawer.settings") },
     ];
 
-    const showLeftSideAdSpace = adsEnabled() && (width - theme.breakpoints.values.xl) * 0.5 <= adSpaceRightSideMinSize;
+    const showLeftSideAdSpace = adsEnabled && (width - theme.breakpoints.values.xl) * 0.5 <= adSpaceRightSideMinSize;
 
     return (
         <Box sx={{ display: "flex" }}>
@@ -190,7 +190,7 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
                     ))}
                 </List>
 
-                {isMobile ? <Spacer /> : showLeftSideAdSpace ? <AdSpace /> : <Spacer />}
+                {isMobile ? <Spacer /> : showLeftSideAdSpace ? <AdSpace unitType={UnitType.LeftRail} /> : <Spacer />}
 
                 <Box
                     sx={{
@@ -269,7 +269,7 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
                 </ErrorBoundary>
             </Container>
 
-            <Tracking />
+            <TrackingRampSetup />
             <AdSpaceFloating />
         </Box>
     );