diff --git a/packages/shared/src/components/icons/BrowserPermission/chrome.svg b/packages/shared/src/components/icons/BrowserPermission/chrome.svg
new file mode 100644
index 0000000000..fbf29b41ea
--- /dev/null
+++ b/packages/shared/src/components/icons/BrowserPermission/chrome.svg
@@ -0,0 +1,21 @@
+
+
diff --git a/packages/shared/src/lib/constants.ts b/packages/shared/src/lib/constants.ts
index e95b22d31c..9b6fd1c7e3 100644
--- a/packages/shared/src/lib/constants.ts
+++ b/packages/shared/src/lib/constants.ts
@@ -51,6 +51,9 @@ export const isBrave = (): boolean => {
}
return typeof navigator.brave?.isBrave === 'function';
};
+export const isChrome = (): boolean =>
+ /Chrome/.test(globalThis?.navigator?.userAgent) &&
+ /Google Inc/.test(globalThis?.navigator?.vendor);
export const webappUrl = process.env.NEXT_PUBLIC_WEBAPP_URL;
export const onboardingUrl = `${webappUrl}onboarding`;
diff --git a/packages/webapp/pages/popup/notifications/enable.tsx b/packages/webapp/pages/popup/notifications/enable.tsx
index 85723adb8b..126552af71 100644
--- a/packages/webapp/pages/popup/notifications/enable.tsx
+++ b/packages/webapp/pages/popup/notifications/enable.tsx
@@ -1,15 +1,31 @@
+import React, { ComponentType, useEffect } from 'react';
import classNames from 'classnames';
-import BrowserPermissionIcon from '@dailydotdev/shared/src/components/icons/BrowserPermission/primary.svg';
import NotificationToggleIcon from '@dailydotdev/shared/src/components/icons/NotificationToggle/primary.svg';
import classed from '@dailydotdev/shared/src/lib/classed';
import { postWindowMessage } from '@dailydotdev/shared/src/lib/func';
-import React, { useEffect } from 'react';
import { ENABLE_NOTIFICATION_WINDOW_KEY } from '@dailydotdev/shared/src/hooks/useNotificationPermissionPopup';
import { useRouter } from 'next/router';
import { NotificationPromptSource } from '@dailydotdev/shared/src/lib/analytics';
import { useAnalyticsContext } from '@dailydotdev/shared/src/contexts/AnalyticsContext';
import { usePushNotificationContext } from '@dailydotdev/shared/src/contexts/PushNotificationContext';
import { usePushNotificationMutation } from '@dailydotdev/shared/src/hooks/notifications';
+import dynamic from 'next/dynamic';
+import { isChrome } from '@dailydotdev/shared/src/lib/constants';
+
+const BrowserPermissionIcon: ComponentType<{ className: string }> = dynamic(
+ () =>
+ import(
+ /* webpackChunkName: "browserPermissionIcon" */ '@dailydotdev/shared/src/components/icons/BrowserPermission/primary.svg'
+ ),
+);
+const ChromePermissionIcon: ComponentType<{ className: string }> = dynamic(
+ () =>
+ import(
+ /* webpackChunkName: "browserPermissionIcon" */ '@dailydotdev/shared/src/components/icons/BrowserPermission/chrome.svg'
+ ),
+);
+
+const BrowserIcon = isChrome() ? ChromePermissionIcon : BrowserPermissionIcon;
const InstructionContainer = classed(
'div',
@@ -81,8 +97,8 @@ function Enable(): React.ReactElement {
- 1. Click on the lock icon in the search bar
- 1. Click on the icon in the search bar
+