Merge pull request #1 from HORNET-Storage/my-tinker-branch

My tinker branch

.env.development

@@ -1,5 +1,5 @@
-REACT_APP_BASE_URL=http://localhost:9002
-# REACT_APP_BASE_URL=https://9ee32ecaf5a1.ngrok.app
+# REACT_APP_BASE_URL=http://localhost:9002
+REACT_APP_BASE_URL=https://046007d1dbe4.ngrok.app
 REACT_APP_ASSETS_BUCKET=http://localhost
 
 # more info https://create-react-app.dev/docs/advanced-configuration

src/components/PwaSupportChecker.tsx

@@ -0,0 +1,24 @@
+// components/PwaSupportChecker.tsx
+import React, { useEffect } from 'react';
+import { useAppDispatch } from '@app/hooks/reduxHooks';
+import { setPWASupported } from '@app/store/slices/pwaSlice';
+
+const PwaSupportChecker: React.FC = () => {
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+    const checkPWASupport = () => {
+      const isSupported = ('serviceWorker' in navigator) && ('BeforeInstallPromptEvent' in window);
+      console.log('PWA support check:', isSupported);
+      dispatch(setPWASupported(isSupported));
+    };
+
+    checkPWASupport();
+  }, [dispatch]);
+
+  return null; // This component doesn't render anything
+};
+
+export default PwaSupportChecker;
+
+

src/components/header/components/settingsDropdown/settingsOverlay/SettingsOverlay/SettingsOverlay.tsx

@@ -16,7 +16,7 @@ export const SettingsOverlay: React.FC = ({ ...props }) => {
   useEffect(() => {
     const handler = (e: Event) => {
       e.preventDefault();
-      // Cast the event to any to bypass type checking, adjust as needed based on actual usage
+      console.log('beforeinstallprompt event fired');
       setPromptEvent(e as any);
     };
 
@@ -27,6 +27,12 @@ export const SettingsOverlay: React.FC = ({ ...props }) => {
     };
   }, []);
 
+  useEffect(() => {
+    if (promptEvent) {
+      console.log('Prompt event set:', promptEvent);
+    }
+  }, [promptEvent]);
+
   return (
     <S.SettingsOverlayMenu {...props}>
       <DropdownCollapse bordered={false} expandIconPosition="end" ghost defaultActiveKey="themePicker">
@@ -51,6 +57,62 @@ export const SettingsOverlay: React.FC = ({ ...props }) => {
   );
 };
 
+
+
+
+// import React, { useState, useEffect } from 'react';
+// import { Link } from 'react-router-dom';
+// import { DropdownCollapse } from '@app/components/header/Header.styles';
+// import { useTranslation } from 'react-i18next';
+// import { NightModeSettings } from '../nightModeSettings/NightModeSettings';
+// import { ThemePicker } from '../ThemePicker/ThemePicker';
+// import { BaseButton } from '@app/components/common/BaseButton/BaseButton';
+// import { useAppSelector } from '@app/hooks/reduxHooks';
+// import * as S from './SettingsOverlay.styles';
+
+// export const SettingsOverlay: React.FC = ({ ...props }) => {
+//   const { t } = useTranslation();
+//   const { isPWASupported } = useAppSelector((state) => state.pwa);
+//   const [promptEvent, setPromptEvent] = useState<Event | null>(null);
+
+//   useEffect(() => {
+//     const handler = (e: Event) => {
+//       e.preventDefault();
+//       // Cast the event to any to bypass type checking, adjust as needed based on actual usage
+//       setPromptEvent(e as any);
+//     };
+
+//     window.addEventListener('beforeinstallprompt', handler as EventListener);
+
+//     return () => {
+//       window.removeEventListener('beforeinstallprompt', handler as EventListener);
+//     };
+//   }, []);
+
+//   return (
+//     <S.SettingsOverlayMenu {...props}>
+//       <DropdownCollapse bordered={false} expandIconPosition="end" ghost defaultActiveKey="themePicker">
+//         <DropdownCollapse.Panel header={t('header.changeTheme')} key="themePicker">
+//           <ThemePicker />
+//         </DropdownCollapse.Panel>
+//         <DropdownCollapse.Panel header={t('header.nightMode.title')} key="nightMode">
+//           <NightModeSettings />
+//         </DropdownCollapse.Panel>
+//       </DropdownCollapse>
+//       <S.Text>
+//         <Link to="/logout">{t('header.logout')}</Link>
+//       </S.Text>
+//       {isPWASupported && promptEvent && (
+//         <S.PwaInstallWrapper>
+//           <BaseButton block type="primary" onClick={() => (promptEvent as any).prompt()}>
+//             {t('common.pwa')}
+//           </BaseButton>
+//         </S.PwaInstallWrapper>
+//       )}
+//     </S.SettingsOverlayMenu>
+//   );
+// };
+
 // import React, { useState, useEffect } from 'react';
 // import { DropdownCollapse } from '@app/components/header/Header.styles';
 // import { useTranslation } from 'react-i18next';

src/components/nft-dashboard/activityStory/ActivityStory.styles.ts

@@ -32,3 +32,10 @@ export const EmptyState = styled.div`
   font-size: ${FONT_SIZE.md};
   color: var(--text-secondary);
 `;
+
+const TitleContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+`;