diff --git a/src/pages/App.tsx b/src/pages/App.tsx index 89648990c7..3f15ce0356 100644 --- a/src/pages/App.tsx +++ b/src/pages/App.tsx @@ -97,12 +97,10 @@ export default function App() { const location = useLocation() const { pathname } = location const currentPage = getCurrentPageFromLocation(pathname) - const isDarkMode = useIsDarkMode() - const [routerPreference] = useRouterPreference() + const [scrollY, setScrollY] = useState(0) const scrolledState = scrollY > 0 - const isUniswapXDefaultEnabled = useUniswapXDefaultEnabled() - const userOptedOutOfUniswapX = useUserOptedOutOfUniswapX() + const routerConfig = useRouterConfig() const originCountry = useAppSelector((state: AppState) => state.user.originCountry) @@ -122,53 +120,6 @@ export default function App() { } }, [searchParams, setShouldDisableNFTRoutes]) - useEffect(() => { - // User properties *must* be set before sending corresponding event properties, - // so that the event contains the correct and up-to-date user properties. - user.set(CustomUserProperties.USER_AGENT, navigator.userAgent) - user.set(CustomUserProperties.BROWSER, getBrowser()) - user.set(CustomUserProperties.SCREEN_RESOLUTION_HEIGHT, window.screen.height) - user.set(CustomUserProperties.SCREEN_RESOLUTION_WIDTH, window.screen.width) - user.set(CustomUserProperties.GIT_COMMIT_HASH, process.env.REACT_APP_GIT_COMMIT_HASH ?? 'unknown') - - // Service Worker analytics - const isServiceWorkerInstalled = Boolean(window.navigator.serviceWorker?.controller) - const isServiceWorkerHit = Boolean((window as any).__isDocumentCached) - const serviceWorkerProperty = isServiceWorkerInstalled ? (isServiceWorkerHit ? 'hit' : 'miss') : 'uninstalled' - - const pageLoadProperties = { service_worker: serviceWorkerProperty } - sendInitializationEvent(SharedEventName.APP_LOADED, pageLoadProperties) - const sendWebVital = - (metric: string) => - ({ delta }: Metric) => - sendAnalyticsEvent(SharedEventName.WEB_VITALS, { ...pageLoadProperties, [metric]: delta }) - getCLS(sendWebVital('cumulative_layout_shift')) - getFCP(sendWebVital('first_contentful_paint_ms')) - getFID(sendWebVital('first_input_delay_ms')) - getLCP(sendWebVital('largest_contentful_paint_ms')) - }, []) - - useEffect(() => { - user.set(CustomUserProperties.DARK_MODE, isDarkMode) - }, [isDarkMode]) - - useEffect(() => { - // If we're not in the transition period to UniswapX opt-out, set the router preference to whatever is specified. - if (!isUniswapXDefaultEnabled) { - user.set(CustomUserProperties.ROUTER_PREFERENCE, routerPreference) - return - } - - // In the transition period, override the stored API preference to UniswapX if the user hasn't opted out. - if (routerPreference === RouterPreference.API && !userOptedOutOfUniswapX) { - user.set(CustomUserProperties.ROUTER_PREFERENCE, RouterPreference.X) - return - } - - // Otherwise, the user has opted out or their preference is UniswapX/client, so set the preference to whatever is specified. - user.set(CustomUserProperties.ROUTER_PREFERENCE, routerPreference) - }, [routerPreference, isUniswapXDefaultEnabled, userOptedOutOfUniswapX]) - useEffect(() => { const scrollListener = () => { setScrollY(window.scrollY) @@ -221,6 +172,7 @@ export default function App() { api: process.env.REACT_APP_STATSIG_PROXY_URL, }} > + {renderUkBannner && } @@ -255,3 +207,59 @@ export default function App() { ) } + +function UserPropertyUpdater() { + const isDarkMode = useIsDarkMode() + + const [routerPreference] = useRouterPreference() + const userOptedOutOfUniswapX = useUserOptedOutOfUniswapX() + const isUniswapXDefaultEnabled = useUniswapXDefaultEnabled() + + useEffect(() => { + // User properties *must* be set before sending corresponding event properties, + // so that the event contains the correct and up-to-date user properties. + user.set(CustomUserProperties.USER_AGENT, navigator.userAgent) + user.set(CustomUserProperties.BROWSER, getBrowser()) + user.set(CustomUserProperties.SCREEN_RESOLUTION_HEIGHT, window.screen.height) + user.set(CustomUserProperties.SCREEN_RESOLUTION_WIDTH, window.screen.width) + user.set(CustomUserProperties.GIT_COMMIT_HASH, process.env.REACT_APP_GIT_COMMIT_HASH ?? 'unknown') + + // Service Worker analytics + const isServiceWorkerInstalled = Boolean(window.navigator.serviceWorker?.controller) + const isServiceWorkerHit = Boolean((window as any).__isDocumentCached) + const serviceWorkerProperty = isServiceWorkerInstalled ? (isServiceWorkerHit ? 'hit' : 'miss') : 'uninstalled' + + const pageLoadProperties = { service_worker: serviceWorkerProperty } + sendInitializationEvent(SharedEventName.APP_LOADED, pageLoadProperties) + const sendWebVital = + (metric: string) => + ({ delta }: Metric) => + sendAnalyticsEvent(SharedEventName.WEB_VITALS, { ...pageLoadProperties, [metric]: delta }) + getCLS(sendWebVital('cumulative_layout_shift')) + getFCP(sendWebVital('first_contentful_paint_ms')) + getFID(sendWebVital('first_input_delay_ms')) + getLCP(sendWebVital('largest_contentful_paint_ms')) + }, []) + + useEffect(() => { + user.set(CustomUserProperties.DARK_MODE, isDarkMode) + }, [isDarkMode]) + + useEffect(() => { + // If we're not in the transition period to UniswapX opt-out, set the router preference to whatever is specified. + if (!isUniswapXDefaultEnabled) { + user.set(CustomUserProperties.ROUTER_PREFERENCE, routerPreference) + return + } + + // In the transition period, override the stored API preference to UniswapX if the user hasn't opted out. + if (routerPreference === RouterPreference.API && !userOptedOutOfUniswapX) { + user.set(CustomUserProperties.ROUTER_PREFERENCE, RouterPreference.X) + return + } + + // Otherwise, the user has opted out or their preference is UniswapX/client, so set the preference to whatever is specified. + user.set(CustomUserProperties.ROUTER_PREFERENCE, routerPreference) + }, [routerPreference, isUniswapXDefaultEnabled, userOptedOutOfUniswapX]) + return null +}