Ramp fixes

app/components/layout/index.tsx

@@ -12,6 +12,7 @@ import { ThemeChanger } from "./ThemeChanger";
 import { LinkButton } from "../Button";
 import { SUPPORT_PAGE } from "~/utils/urls";
 import { HeartIcon } from "../icons/Heart";
+import { useIsMounted } from "~/hooks/useIsMounted";
 
 function useBreadcrumbs() {
   const { t } = useTranslation();
@@ -111,7 +112,7 @@ export const Layout = React.memo(function Layout({
         </div>
       </header>
       {!isFrontPage ? <SideNav /> : null}
-      {showLeaderboard ? <div id="top-leaderboard" /> : null}
+      {showLeaderboard ? <MyRampUnit /> : null}
       {children}
       <Footer patrons={data?.patrons} />
     </div>
@@ -133,3 +134,12 @@ function BreadcrumbLink({ data }: { data: Breadcrumb }) {
     </Link>
   );
 }
+const RampUnit = React.lazy(() => import("../ramp/RampUnit"));
+function MyRampUnit() {
+  const isMounted = useIsMounted();
+  if (!isMounted) {
+    return <div className="top-leaderboard" />;
+  }
+
+  return <RampUnit type="leaderboard_atf" cssClass="top-leaderboard" />;
+}

app/components/ramp/RampUnit.tsx

@@ -0,0 +1,91 @@
+/* eslint-disable */
+// @ts-nocheck
+
+//
+// From: https://github.com/intergi/pw-react-component
+//
+
+import React from "react";
+import store from "./store";
+
+window.ramp = window.ramp || {};
+window.ramp.que = window.ramp.que || [];
+
+const inPageUnits = [
+  "leaderboard_atf",
+  "leaderboard_btf",
+  "med_rect_atf",
+  "med_rect_btf",
+  "sky_atf",
+  "sky_btf",
+];
+
+// find a new unique element ID to place this ad
+const getUniqueId = (type) => {
+  return store.getUnitId(type);
+};
+
+// sets up the object and adds a selectorId if necessary
+const getInitialUnit = (props) => {
+  const unit = {
+    type: props.type,
+  };
+  if (inPageUnits.includes(props.type)) {
+    unit.selectorId = getUniqueId(props.type);
+  }
+  return unit;
+};
+
+// destroy the unit when componenent unmounts
+const cleanUp = (parentId) => {
+  // possible that component was removed before first ad was created
+  if (!window.ramp.settings || !window.ramp.settings.slots) return;
+
+  let slotToRemove = null;
+  Object.entries(window.ramp.settings.slots).forEach(([slotName, slot]) => {
+    if (
+      slot.element &&
+      slot.element.parentElement &&
+      slot.element.parentElement.id === parentId
+    ) {
+      slotToRemove = slotName;
+    }
+  });
+
+  if (slotToRemove) {
+    window.ramp.destroyUnits(slotToRemove);
+  }
+};
+
+export default class RampUnit extends React.Component {
+  constructor(props) {
+    super(props);
+    this.rendered = false;
+    this.unitToAdd = getInitialUnit(props);
+  }
+  componentDidMount() {
+    if (this.rendered) return;
+
+    this.rendered = true;
+    window.ramp.que.push(() => {
+      window.ramp
+        .addUnits([this.unitToAdd])
+        .catch((e) => {
+          console.warn(e);
+        })
+        .finally(() => {
+          window.ramp.displayUnits();
+        });
+    });
+  }
+  componentWillUnmount() {
+    window.ramp.que.push(() => {
+      cleanUp(this.unitToAdd.selectorId);
+    });
+  }
+  render() {
+    return (
+      <div id={this.unitToAdd.selectorId} className={this.props.cssClass}></div>
+    );
+  }
+}

app/components/ramp/store.ts

@@ -0,0 +1,20 @@
+/* eslint-disable */
+// @ts-nocheck
+
+//
+// From: https://github.com/intergi/pw-react-component
+//
+
+class Store {
+  units = {};
+  getUnitId = (unit) => {
+    if (typeof this.units[unit] === "undefined") {
+      this.units[unit] = 1;
+      return `pw-${unit}`;
+    } else {
+      ++this.units[unit];
+      return `pw-${unit}${this.units[unit]}`;
+    }
+  };
+}
+export default new Store();

app/root.tsx

@@ -458,9 +458,8 @@ function PWALinks() {
   );
 }
 
-const Ramp = React.lazy(() => import("./components/Ramp"));
+const Ramp = React.lazy(() => import("./components/ramp/Ramp"));
 function MyRamp({ data }: { data: RootLoaderData | undefined }) {
-  const location = useLocation();
   if (
     !data ||
     !data.publisherId ||
@@ -471,11 +470,5 @@ function MyRamp({ data }: { data: RootLoaderData | undefined }) {
     return null;
   }
 
-  return (
-    <Ramp
-      publisherId={data.publisherId}
-      id={data.websiteId}
-      forcePath={location.pathname}
-    />
-  );
+  return <Ramp publisherId={data.publisherId} id={data.websiteId} />;
 }

app/styles/common.css

@@ -1015,7 +1015,7 @@ dialog::backdrop {
   text-align: center;
 }
 
-#top-leaderboard {
+.top-leaderboard {
   min-height: 110px;
   margin-block-start: var(--s-20);
 }