improve ramp setup

Author: atomicptr

src/app.tsx

@@ -27,6 +27,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ErrorBoundary } from "react-error-boundary";
 import SomethingWentWrong from "@src/components/SometingWentWrong";
 import Privacy from "./pages/about/Privacy";
+import TrackingRampSetup from "@src/components/TrackingRampSetup";
 
 const DauntlessBuilderApp = () => {
     const isMobile = useIsMobile();
@@ -43,6 +44,7 @@ const DauntlessBuilderApp = () => {
                 FallbackComponent={SomethingWentWrong}
                 onError={(e, info) => log.error(e.message, { info })}
             >
+                <TrackingRampSetup />
                 <QueryClientProvider client={queryClient}>
                     <BrowserRouter>
                         <SnackbarProvider

src/components/AdSpace.tsx

@@ -5,23 +5,28 @@ import { adsEnabled } from "@src/utils/env-tools";
 import log from "@src/utils/logger";
 import { useAtomValue } from "jotai";
 import React, { useEffect } from "react";
+import useDevMode from "@src/hooks/dev-mode";
+import md5 from "md5";
 
 export enum UnitType {
     RightRail = "right_rail",
     BottomRail = "bottom_rail",
     LeftRail = "left_rail",
+    Skyscraper = "sky_atf",
 }
 
 interface AdSpaceProps {
+    name: string;
     unitType: UnitType;
 }
 
-const AdSpace: React.FC<AdSpaceProps> = ({ unitType }) => {
+const AdSpace: React.FC<AdSpaceProps> = ({ name, unitType }) => {
     const theme = useTheme();
+    const isDevMode = useDevMode();
 
     const events = useAtomValue(eventsAtom);
 
-    const selectorName = `db_unit_${unitType.toString()}`;
+    const selectorName = `dbu_${md5(name + unitType.toString())}`;
 
     useEffect(() => {
         if (!events.playwireSetupHasFinished) {
@@ -49,7 +54,7 @@ const AdSpace: React.FC<AdSpaceProps> = ({ unitType }) => {
         return null;
     }
 
-    if (DB_DEVMODE) {
+    if (isDevMode) {
         return (
             <Box
                 sx={{

src/components/AdSpaceFloating.tsx

@@ -49,7 +49,7 @@ const AdSpaceFloating = () => {
 
     return (
         <Box sx={style}>
-            <AdSpace unitType={isMobile ? UnitType.BottomRail : UnitType.RightRail} />
+            <AdSpace name={"AdSpaceFloating"} unitType={isMobile ? UnitType.BottomRail : UnitType.Skyscraper} />
         </Box>
     );
 };

src/components/Layout.tsx

@@ -38,15 +38,12 @@ 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 TrackingRampSetup from "@src/components/TrackingRampSetup";
 import { crowdinLink, discordServerUrl, githubUrl, xTwitterUrl } from "@src/constants";
 import dauntlessBuilderData from "@src/data/Data";
 import useDevMode from "@src/hooks/dev-mode";
 import useIsMobile from "@src/hooks/is-mobile";
-import useWindowSize from "@src/hooks/window-size";
 import { currentLanguage, getNativeLanguageName, isBetaLanguage, Language } from "@src/i18n";
 import { favoritesView } from "@src/state/favorites";
-import { adsEnabled } from "@src/utils/env-tools";
 import log from "@src/utils/logger";
 import { useAtomValue } from "jotai";
 import React, { ReactNode, useState } from "react";
@@ -67,7 +64,6 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
     const theme = useTheme();
 
     const isMobile = useIsMobile();
-    const { width } = useWindowSize();
     const [open, setOpen] = useState(false);
     const { t } = useTranslation();
     const devMode = useDevMode();
@@ -88,8 +84,6 @@ 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;
-
     return (
         <Box sx={{ display: "flex" }}>
             <CssBaseline />
@@ -190,7 +184,7 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
                     ))}
                 </List>
 
-                {isMobile ? <Spacer /> : showLeftSideAdSpace ? <AdSpace unitType={UnitType.LeftRail} /> : <Spacer />}
+                <Spacer />
 
                 <Box
                     sx={{
@@ -269,7 +263,6 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
                 </ErrorBoundary>
             </Container>
 
-            <TrackingRampSetup />
             <AdSpaceFloating />
         </Box>
     );

src/components/TrackingRampSetup.tsx

@@ -42,25 +42,8 @@ const TrackingRampSetup = () => {
                 });
             }
 
-            window.ramp.que.push(async () => {
-                try {
-                    await window.ramp.addUnits([
-                        {
-                            type: UnitType.RightRail,
-                        },
-                        {
-                            type: UnitType.BottomRail,
-                        },
-                        {
-                            type: UnitType.LeftRail,
-                        },
-                    ]);
-                    window.ramp.displayUnits();
-                } catch (error) {
-                    log.error("ramp: could not add units", { error });
-                    window.ramp.displayUnits();
-                }
-
+            window.ramp.que.push(() => {
+                log.debug("playwire has been setup")
                 setEvents(playwireSetupHasFinished());
             });