feat: try

.pnpmfile.cjs

@@ -6,7 +6,7 @@ function switchDependency(pkg, dep, newDep) {
 
 function readPackage(pkg) {
   if (pkg.dependencies) {
-    switchDependency(pkg, '@growthbook/growthbook', 'https://gitpkg.now.sh/dailydotdev/growthbook/packages/sdk-js?b8f31f9e80879fe2bcc42b275087b50e1357f1cb');
+    // switchDependency(pkg, '@growthbook/growthbook', 'https://gitpkg.now.sh/dailydotdev/growthbook/packages/sdk-js?b8f31f9e80879fe2bcc42b275087b50e1357f1cb');
   }
   return pkg
 }

packages/shared/package.json

@@ -99,7 +99,7 @@
     "typescript": "5.6.3"
   },
   "dependencies": {
-    "@growthbook/growthbook": "https://gitpkg.now.sh/dailydotdev/growthbook/packages/sdk-js?b8f31f9e80879fe2bcc42b275087b50e1357f1cb",
+    "@growthbook/growthbook": "^0.17.0",
     "@growthbook/growthbook-react": "^0.17.0",
     "@paddle/paddle-js": "^1.3.2",
     "@tippyjs/react": "^4.2.6",

packages/shared/src/components/PostOptionsMenu.tsx

@@ -1,7 +1,6 @@
 import React, { ReactElement, useContext, useMemo } from 'react';
 import dynamic from 'next/dynamic';
 import { useQueryClient } from '@tanstack/react-query';
-import { useRouter } from 'next/router';
 import classNames from 'classnames';
 import useFeedSettings from '../hooks/useFeedSettings';
 import useReportPost from '../hooks/useReportPost';
@@ -60,6 +59,7 @@ import { useContentPreference } from '../hooks/contentPreference/useContentPrefe
 import { ContentPreferenceType } from '../graphql/contentPreference';
 import { isFollowingContent } from '../hooks/contentPreference/types';
 import { useIsSpecialUser } from '../hooks/auth/useIsSpecialUser';
+import { useRouter } from '../hooks/useRouter';
 
 const ContextMenu = dynamic(
   () => import(/* webpackChunkName: "contextMenu" */ './fields/ContextMenu'),

packages/shared/src/components/auth/AuthOptions.tsx

@@ -6,7 +6,6 @@ import React, {
   useState,
 } from 'react';
 import classNames from 'classnames';
-import { useRouter } from 'next/router';
 import dynamic from 'next/dynamic';
 import { useAuthContext } from '../../contexts/AuthContext';
 import { Tab, TabContainer } from '../tabs/TabContainer';
@@ -43,6 +42,7 @@ import { AnonymousUser, LoggedUser } from '../../lib/user';
 import { labels } from '../../lib';
 import { ButtonProps } from '../buttons/Button';
 import usePersistentState from '../../hooks/usePersistentState';
+import { useRouter } from '../../hooks/useRouter';
 
 const AuthDefault = dynamic(
   () => import(/* webpackChunkName: "authDefault" */ './AuthDefault'),

packages/shared/src/components/fields/ImageInput.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React, {
   ChangeEvent,
@@ -14,6 +16,11 @@ import { IconSize } from '../Icon';
 import { useToastNotification } from '../../hooks/useToastNotification';
 import { ButtonSize, ButtonVariant } from '../buttons/common';
 import CloseButton from '../CloseButton';
+import {
+  ACCEPTED_TYPES,
+  acceptedTypesList,
+  MEGABYTE,
+} from '../../lib/constants';
 
 type Size = 'medium' | 'large' | 'cover';
 
@@ -40,8 +47,6 @@ interface ImageInputProps {
   fileSizeLimitMB?: number;
 }
 
-export const MEGABYTE = 1024 * 1024;
-
 const componentSize: Record<Size, string> = {
   medium: 'w-24 h-24 rounded-26',
   large: 'w-40 h-40 rounded-40',
@@ -52,8 +57,6 @@ const sizeToIconSize: Record<Size, IconSize> = {
   large: IconSize.Medium,
   cover: IconSize.Small,
 };
-export const ACCEPTED_TYPES = 'image/png,image/jpeg';
-export const acceptedTypesList = ACCEPTED_TYPES.split(',');
 
 function ImageInput({
   initialValue,

packages/shared/src/components/fields/MarkdownInput/index.tsx

@@ -25,9 +25,8 @@ import {
   useMarkdownInput,
   UseMarkdownInputProps,
 } from '../../../hooks/input';
-import { ACCEPTED_TYPES } from '../ImageInput';
 import { MarkdownUploadLabel } from './MarkdownUploadLabel';
-import { markdownGuide } from '../../../lib/constants';
+import { ACCEPTED_TYPES, markdownGuide } from '../../../lib/constants';
 import useSidebarRendered from '../../../hooks/useSidebarRendered';
 import ConditionalWrapper from '../../ConditionalWrapper';
 import { TabContainer, Tab } from '../../tabs/TabContainer';

packages/shared/src/components/post/GoBackHeaderMobile.tsx

@@ -1,5 +1,4 @@
 import React, { PropsWithChildren, ReactElement, useCallback } from 'react';
-import { useRouter } from 'next/router';
 import classNames from 'classnames';
 import { Button, ButtonSize, ButtonVariant } from '../buttons/Button';
 import { ArrowIcon } from '../icons';
@@ -9,6 +8,7 @@ import Logo, { LogoPosition } from '../Logo';
 import { useFeatureTheme } from '../../hooks/utils/useFeatureTheme';
 import { useScrollTopClassName } from '../../hooks/useScrollTopClassName';
 import { useViewSize, ViewSize } from '../../hooks';
+import { useRouter } from '../../hooks/useRouter';
 
 const checkSameSite = () => {
   const referrer = globalThis?.document?.referrer;

packages/shared/src/components/post/NewComment.tsx

@@ -8,7 +8,6 @@ import React, {
   useState,
 } from 'react';
 import classNames from 'classnames';
-import { useRouter } from 'next/router';
 import dynamic from 'next/dynamic';
 import {
   getProfilePictureClasses,
@@ -25,6 +24,7 @@ import { postLogEvent } from '../../lib/feed';
 import { LogEvent, Origin } from '../../lib/log';
 import { PostType } from '../../graphql/posts';
 import { AuthTriggers } from '../../lib/auth';
+import { useRouter } from '../../hooks/useRouter';
 
 const CommentInputOrModal = dynamic(
   () =>

packages/shared/src/components/tabs/TabContainer.tsx

@@ -7,9 +7,9 @@ import React, {
   useState,
 } from 'react';
 import classNames from 'classnames';
-import { useRouter } from 'next/router';
 import TabList, { AllowedTabTags, TabListProps } from './TabList';
 import { RenderTab } from './common';
+import { useRouter } from '../../hooks/useRouter';
 
 export interface TabProps<T extends string> {
   children?: ReactNode;

packages/shared/src/graphql/posts.ts

@@ -10,9 +10,9 @@ import {
   SOURCE_SHORT_INFO_FRAGMENT,
   USER_AUTHOR_FRAGMENT,
 } from './fragments';
-import { acceptedTypesList, MEGABYTE } from '../components/fields/ImageInput';
 import { Bookmark } from './bookmarks';
 import { SourcePostModeration } from './squads';
+import { acceptedTypesList, MEGABYTE } from '../lib/constants';
 
 export type TocItem = { text: string; id?: string; children?: TocItem[] };
 export type Toc = TocItem[];

packages/shared/src/hooks/log/useLogSharedProps.ts

@@ -5,11 +5,11 @@ import {
   useRef,
   useState,
 } from 'react';
-import { useRouter } from 'next/router';
 import { LogEvent } from './useLogQueue';
 import SettingsContext from '../../contexts/SettingsContext';
 import AuthContext from '../../contexts/AuthContext';
 import { getCookies } from '../../lib/cookie';
+import { useRouter } from '../useRouter';
 
 const COOKIES = ['_ga', '_fbp', '_fbc'];
 

packages/shared/src/hooks/referral/useJoinReferral.ts

@@ -1,4 +1,3 @@
-import { useRouter } from 'next/router';
 import { useQuery } from '@tanstack/react-query';
 import { expireCookie, setCookie } from '../../lib/cookie';
 import { isDevelopment } from '../../lib/constants';
@@ -7,6 +6,7 @@ import { ApiErrorResult, gqlClient } from '../../graphql/common';
 import { useAuthContext } from '../../contexts/AuthContext';
 import { disabledRefetch } from '../../lib/func';
 import { oneYear } from '../../lib/dateFormat';
+import { useRouter } from '../useRouter';
 
 export const useJoinReferral = (): void => {
   const { user, refetchBoot, isAuthReady } = useAuthContext();

packages/shared/src/hooks/source/usePrivateSourceJoin.ts

@@ -1,9 +1,9 @@
-import { useRouter } from 'next/router';
 import { useEffect, useMemo } from 'react';
 import { getPathnameWithQuery } from '../../lib';
 import { webappUrl } from '../../lib/constants';
 import { SourceType } from '../../graphql/sources';
 import { useAuthContext } from '../../contexts/AuthContext';
+import { useRouter } from '../useRouter';
 
 export type UsePrivateSourceJoinProps = {
   postId?: string;

packages/shared/src/hooks/useRouter.ts

@@ -0,0 +1,72 @@
+import {
+  usePathname,
+  useRouter as useRouterNavigation,
+  useSearchParams,
+  useSelectedLayoutSegment,
+} from 'next/navigation';
+import { useRouter as useRouterPages } from 'next/router';
+import { useMemo } from 'react';
+
+const useRouteName = (): string => {
+  let pathname = usePathname();
+
+  try {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    pathname = useSelectedLayoutSegment() as string;
+  } catch (error) {
+    // throws because we are inside pages directory
+  }
+
+  try {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const pagesRouter = useRouterPages();
+    pathname = pagesRouter.pathname;
+  } catch (error) {
+    // throws because we are inside apps directory
+  }
+
+  return pathname as string;
+};
+
+export const useRouter: typeof useRouterPages = () => {
+  const route = useRouteName();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const routerNavigation = useRouterNavigation();
+
+  return {
+    pathname,
+    push: async (url, as, options) => {
+      routerNavigation.push(as?.toString() || url.toString(), options);
+
+      return true;
+    },
+    replace: async (url, as, options) => {
+      routerNavigation.replace(as?.toString() || url.toString(), options);
+
+      return true;
+    },
+    query: useMemo(() => {
+      return Object.fromEntries(searchParams.entries());
+    }, [searchParams]),
+    route,
+    basePath: pathname,
+    asPath: pathname,
+    isLocaleDomain: false,
+    isReady: true,
+    isFallback: false,
+    events: {
+      on: () => {},
+      off: () => {},
+      emit: () => {},
+    },
+    back: routerNavigation.back,
+    forward: routerNavigation.forward,
+    prefetch: async (url, as) => {
+      routerNavigation.prefetch(as?.toString() || url.toString());
+    },
+    beforePopState: () => {},
+    reload: routerNavigation.refresh,
+    isPreview: false,
+  };
+};

packages/shared/src/hooks/useSquadNavigation.ts

@@ -1,11 +1,11 @@
-import { useRouter } from 'next/router';
 import { useCallback, useEffect } from 'react';
 import { Origin } from '../lib/log';
 import { AuthTriggers } from '../lib/auth';
 import { useAuthContext } from '../contexts/AuthContext';
 import { webappUrl } from '../lib/constants';
 import { useLazyModal } from './useLazyModal';
 import { LazyModal } from '../components/modals/common/types';
+import { useRouter } from './useRouter';
 
 type OpenNewSquadProps = {
   event?: React.MouseEvent;

packages/shared/src/hooks/utils/useFeatureTheme.ts

@@ -1,9 +1,9 @@
 import { useEffect, useMemo } from 'react';
-import { useRouter } from 'next/router';
 import { ThemeMode, useSettingsContext } from '../../contexts/SettingsContext';
 import { useFeature } from '../../components/GrowthBookProvider';
 import { feature } from '../../lib/featureManagement';
 import { FeatureTheme, FeatureThemeVariant } from '../../lib/featureValues';
+import { useRouter } from '../useRouter';
 
 interface UseFeatureThemeResult
   extends Pick<FeatureTheme, 'version' | 'cursor'>,

packages/shared/src/lib/constants.ts

@@ -78,3 +78,7 @@ export const squadCategoriesPaths = {
   discover: '/squads/discover',
   featured: '/squads/discover/featured',
 };
+
+export const MEGABYTE = 1024 * 1024;
+export const ACCEPTED_TYPES = 'image/png,image/jpeg';
+export const acceptedTypesList = ACCEPTED_TYPES.split(',');

packages/webapp/app/Providers.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import { BootDataProvider } from '@dailydotdev/shared/src/contexts/BootProvider';
+import { ProgressiveEnhancementContextProvider } from '@dailydotdev/shared/src/contexts/ProgressiveEnhancementContext';
+import { PushNotificationContextProvider } from '@dailydotdev/shared/src/contexts/PushNotificationContext';
+import { SubscriptionContextProvider } from '@dailydotdev/shared/src/contexts/SubscriptionContext';
+import { useManualScrollRestoration } from '@dailydotdev/shared/src/hooks';
+import useDeviceId from '@dailydotdev/shared/src/hooks/log/useDeviceId';
+import { useError } from '@dailydotdev/shared/src/hooks/useError';
+import { BootApp } from '@dailydotdev/shared/src/lib/boot';
+import { defaultQueryClientConfig } from '@dailydotdev/shared/src/lib/query';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import React, { ReactElement, ReactNode, useState } from 'react';
+import useWebappVersion from '../hooks/useWebappVersion';
+
+const getRedirectUri = () =>
+  `${window.location.origin}${window.location.pathname}`;
+
+const getPage = () => window.location.pathname;
+
+export const Providers = ({
+  children,
+}: Readonly<{
+  children: ReactNode;
+}>): ReactElement => {
+  const [queryClient] = useState(
+    () => new QueryClient(defaultQueryClientConfig),
+  );
+  const version = useWebappVersion();
+  const deviceId = useDeviceId();
+  useError();
+  useManualScrollRestoration();
+
+  return (
+    <ProgressiveEnhancementContextProvider>
+      <QueryClientProvider client={queryClient}>
+        <BootDataProvider
+          app={BootApp.Webapp}
+          getRedirectUri={getRedirectUri}
+          getPage={getPage}
+          version={version}
+          deviceId={deviceId}
+        >
+          <PushNotificationContextProvider>
+            <SubscriptionContextProvider>
+              {children}
+            </SubscriptionContextProvider>
+          </PushNotificationContextProvider>
+        </BootDataProvider>
+        <ReactQueryDevtools />
+      </QueryClientProvider>
+    </ProgressiveEnhancementContextProvider>
+  );
+};

packages/webapp/app/layout.tsx

@@ -0,0 +1,40 @@
+import '@dailydotdev/shared/src/styles/globals.css';
+
+import React, { ReactElement, ReactNode } from 'react';
+import { Providers } from './Providers';
+
+const RootLayout = ({
+  children,
+}: Readonly<{
+  children: ReactNode;
+}>): ReactElement => {
+  return (
+    <html lang="en">
+      <head>
+        <link
+          rel="apple-touch-icon"
+          sizes="180x180"
+          href="/apple-touch-icon.png"
+        />
+        <link
+          rel="icon"
+          type="image/png"
+          sizes="32x32"
+          href="/favicon-32x32.png"
+        />
+        <link
+          rel="icon"
+          type="image/png"
+          sizes="16x16"
+          href="/favicon-16x16.png"
+        />
+        <link rel="manifest" href="/site.webmanifest" />
+      </head>
+      <body>
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  );
+};
+
+export default RootLayout;