New source found from dndbeyond.com

ddb_main/index.tsx

@@ -1,18 +1,22 @@
-import ReactDOM from "react-dom";
-import { QueryClient, QueryClientProvider } from "react-query";
+import "core-js/stable";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { createRoot } from "react-dom/client";
 import { BrowserRouter } from "react-router-dom";
 
-import { FontProvider } from "@dndbeyond/ftui-components";
 import "@dndbeyond/ttui/styles/palette.css";
+import "@dndbeyond/ttui/styles/typography.css";
 import wayOfLight from "@dndbeyond/ttui/themes/wayOfLight";
 
 import { Layout } from "./components/Layout";
-import { AuthProvider } from "./contexts/Authentication";
-import { FeatureFlagProvider } from "./contexts/FeatureFlag";
+import config from "./config";
+import { AuthProvider, useAuth } from "./contexts/Authentication";
+import { FeatureFlagProvider, useFeatureFlags } from "./contexts/FeatureFlag";
 import { FiltersProvider } from "./contexts/Filters";
 import { HeadContextProvider } from "./contexts/Head";
 import { ThemeManagerProvider } from "./contexts/ThemeManager";
 import { reportWebVitals } from "./helpers/reportWebVitals";
+import { useDatadogRum } from "./hooks/useDatadogRum";
 import { Routes } from "./routes";
 import "./styles/global.css";
 import "./styles/index.scss";
@@ -24,18 +28,19 @@ const queryClient = new QueryClient({
   defaultOptions: { queries: { staleTime: 60 * 60 * 1000 } },
 });
 
-const fonts = [
-  {
-    family: "Tiamat Condensed SC",
-    type: "woff2",
-    url: "https://www.dndbeyond.com/fonts/tiamatcondensedsc-regular-webfont.woff2",
-  },
-  {
-    family: "MrsEavesSmallCaps",
-    type: "truetype",
-    url: "https://www.dndbeyond.com/content/skins/waterdeep/fonts/MrsEavesSmallCaps.ttf",
-  },
-];
+const DatadogGate = () => {
+  const { datadogRumCharactersAppFlag } = useFeatureFlags();
+  return datadogRumCharactersAppFlag ? <DatadogBootstrap /> : null;
+};
+
+const DatadogBootstrap = () => {
+  const user = useAuth();
+  useDatadogRum(user ?? null);
+
+  return null;
+};
+
+const environment = config.environment;
 
 const App = () => (
   <>
@@ -43,10 +48,10 @@ const App = () => (
     <BrowserRouter>
       <QueryClientProvider client={queryClient}>
         <ThemeManagerProvider manager={{ lightOrDark: "light" }}>
-          <FontProvider fonts={fonts} />
           <HeadContextProvider>
             <AuthProvider>
               <FeatureFlagProvider>
+                {environment !== "development" && <DatadogGate />}
                 <FiltersProvider>
                   <Layout>
                     <Routes />
@@ -61,7 +66,9 @@ const App = () => (
   </>
 );
 
-ReactDOM.render(<App />, document.getElementById("character-tools-target"));
+const root = createRoot(document.getElementById("character-tools-target")!);
+
+root.render(<App />);
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))