Merge pull request #1333 from brave/master

Production Release 2024-08-28

src/App.tsx

@@ -1,26 +1,28 @@
-import { useState } from "react";
+import { useState, lazy, Suspense } from "react";
 
 import { Redirect, Route, Switch } from "react-router-dom";
 
 import { DraftContext, getAllDrafts } from "@/state/context";
-import { User } from "@/user/User";
 import {
+  CircularProgress,
   CssBaseline,
   StyledEngineProvider,
   ThemeProvider,
 } from "@mui/material";
 import { theme } from "./theme";
 import { CampaignForm } from "@/user/views/adsManager/types";
 import { AuthVerify } from "@/auth/views/AuthVerify";
-import { Login } from "@/auth/views/Login";
-import { MagicLink } from "@/auth/views/MagicLink";
-import { Register } from "@/auth/registration/Register";
 import { LandingPage } from "@/auth/views/LandingPage";
 import { BraveAdsContactFrame } from "@/auth/registration/BraveAdsContactFrame";
 import { useMatomo } from "@jonkoops/matomo-tracker-react";
-import { SearchLandingPage } from "@/search/SearchLandingPage";
 import { BasicAttentionTokenLandingPage } from "@/basic-attention-token/BasicAttentionTokenLandingPage";
-import { SearchPreviewPage } from "./search/preview/SearchPreviewPage";
+
+const UserView = lazy(() => import("@/user/User"));
+const SearchPreview = lazy(() => import("@/search/preview/SearchPreviewPage"));
+const SignIn = lazy(() => import("@/auth/views/Login"));
+const Register = lazy(() => import("@/auth/registration/Register"));
+const AuthLink = lazy(() => import("@/auth/views/MagicLink"));
+const SearchLandingPage = lazy(() => import("@/search/SearchLandingPage"));
 
 export function App() {
   const { enableLinkTracking } = useMatomo();
@@ -40,19 +42,26 @@ export function App() {
             },
           }}
         >
-          <Switch>
-            <Route path="/auth/signin" component={Login} />
-            <Route path="/auth/link" component={MagicLink} />
-            <Route path="/auth/verify" component={AuthVerify} />
-            <Route path="/register" component={Register} />
-            <Route path="/contact" component={BraveAdsContactFrame} />
-            <Route path="/bat" component={BasicAttentionTokenLandingPage} />
-            <Route path="/search/preview/:slug" component={SearchPreviewPage} />
-            <Route path="/search" component={SearchLandingPage} />
-            <Route path="/user/main" component={User} />
-            <Route path="/" exact={true} component={LandingPage} />
-            <Redirect to="/user/main" />
-          </Switch>
+          <Suspense fallback={<CircularProgress />}>
+            <Switch>
+              <Route path="/auth/signin" component={SignIn} />
+              <Route path="/auth/link" component={AuthLink} />
+              <Route path="/auth/verify" component={AuthVerify} />
+              <Route path="/register" component={Register} />
+              <Route path="/contact" component={BraveAdsContactFrame} />
+              <Route
+                path="/bat"
+                component={() => (
+                  <BasicAttentionTokenLandingPage reroute={true} />
+                )}
+              />
+              <Route path="/search/preview/:slug" component={SearchPreview} />
+              <Route path="/search" component={SearchLandingPage} />
+              <Route path="/user/main" component={UserView} />
+              <Route path="/" exact={true} component={LandingPage} />
+              <Redirect to="/user/main" />
+            </Switch>
+          </Suspense>
         </DraftContext.Provider>
       </ThemeProvider>
     </StyledEngineProvider>

src/auth/registration/Register.tsx

@@ -2,7 +2,7 @@ import { AdvertiserRegistered } from "@/auth/registration/AdvertiserRegistered";
 import { Redirect, Route, Switch } from "react-router-dom";
 import { BrowserRegister } from "@/auth/registration/BrowserRegister";
 
-export function Register() {
+export default function Register() {
   return (
     <Switch>
       <Route path="/register/browser" component={BrowserRegister} />

src/auth/views/Login.tsx

@@ -8,7 +8,7 @@ import { useTrackWithMatomo } from "@/hooks/useTrackWithMatomo";
 import { Trans, msg } from "@lingui/macro";
 import { useLingui } from "@lingui/react";
 
-export function Login() {
+export default function Login() {
   const { trackMatomoEvent } = useTrackWithMatomo({
     documentTitle: "Password Login",
   });

src/auth/views/MagicLink.tsx

@@ -9,7 +9,7 @@ import { useTrackWithMatomo } from "@/hooks/useTrackWithMatomo";
 import { msg, Trans } from "@lingui/macro";
 import { useLingui } from "@lingui/react";
 
-export function MagicLink() {
+export default function MagicLink() {
   const { trackMatomoEvent } = useTrackWithMatomo({
     documentTitle: "Magic Link Login",
   });

src/basic-attention-token/BasicAttentionTokenLandingPage.tsx

@@ -3,18 +3,29 @@ import {
   useTrackMatomoPageView,
 } from "@/hooks/useTrackWithMatomo";
 import { Box, Button, Link, Stack, Typography } from "@mui/material";
-import { Link as RouterLink } from "react-router-dom";
+import { Link as RouterLink, Redirect } from "react-router-dom";
 import { Trans } from "@lingui/macro";
 import basicattentiontoken from "@/assets/images/basic-attention-token.svg";
 import { LandingPageAppBar } from "@/components/AppBar/LandingPageAppBar";
 import { Background } from "@/components/Background/Background";
 import { BottomSwoop } from "@/components/Assets/BottomSwoop";
 import { TopSwoop } from "@/components/Assets/TopSwoop";
 
-export function BasicAttentionTokenLandingPage() {
+interface Props {
+  reroute: boolean;
+}
+
+export function BasicAttentionTokenLandingPage({ reroute }: Props) {
   useTrackMatomoPageView({
     documentTitle: "Basic Attention Token Landing Page",
   });
+
+  if (reroute) {
+    // Not fully removing page (2024-08-23), but discounts need further evaluation
+    window.open("https://basicattentiontoken.org/", "_blank", "noopener");
+    return <Redirect to="/" />;
+  }
+
   return (
     <Background>
       <LandingPageAppBar />

src/search/SearchLandingPage.tsx

@@ -7,7 +7,7 @@ import { SearchRegister } from "@/auth/registration/SearchRegister";
 import braveSearch from "@/assets/videos/setting_up_brave_search_ads.mp4";
 import { SearchTalkingPoints } from "@/search/SearchTalkingPoints";
 
-export function SearchLandingPage() {
+export default function SearchLandingPage() {
   useTrackMatomoPageView({ documentTitle: "Search Landing Page" });
 
   return (

src/search/preview/SearchPreviewPage.tsx

@@ -9,7 +9,7 @@ import { NoPreviewAvailable } from "./NoPreviewAvailable";
 
 /* eslint-disable lingui/no-unlocalized-strings */
 
-export function SearchPreviewPage() {
+export default function SearchPreviewPage() {
   const { slug } = useParams<{ slug: string }>();
   const { loading, data } = useLandingPageData(slug);
   return (

src/user/User.tsx

@@ -65,7 +65,7 @@ const buildApolloClient = () => {
   });
 };
 
-export function User() {
+export default function User() {
   const client = useMemo(() => buildApolloClient(), []);
   const [fromDate, setFromDate] = useState<Date | null>(
     dayjs().subtract(6, "month").startOf("day").toDate(),

vite.config.mts

@@ -55,6 +55,19 @@ export default defineConfig(({ mode }) => {
       sourcemap: true,
       // vite automagically decides whether to inline assets depending on their size. We are explicitly disabling this.
       assetsInlineLimit: 0,
+      rollupOptions: {
+        output: {
+          manualChunks: {
+            lodash: ["lodash"],
+            highcharts: ["highcharts"],
+            "highcharts-react-official": ["highcharts-react-official"],
+            "react-dom": ["react-dom"],
+            forms: ["yup", "formik", "bignumber.js"],
+          },
+          minifyInternalExports: true,
+          assetFileNames: "static/[name].[hash][extname]",
+        },
+      },
     },
     test: {
       // see https://vitest.dev/config/#globals