feat: New Alphaday Mobile (#722)

Author: Xavier-Charles

package.json

@@ -65,5 +65,9 @@
     "url": "https://github.com/AlphadayHQ/alphaday/issues"
   },
   "homepage": "https://github.com/AlphadayHQ/alphaday#readme",
-  "packageManager": "yarn@1.22.19"
+  "packageManager": "yarn@1.22.19",
+  "resolutions": {
+    "@types/react": "18.2.25",
+    "@types/react-dom": "18.2.6"
+  }
 }

packages/frontend/capacitor.config.ts

@@ -8,27 +8,15 @@
     "dev": "pwa-assets-generator && VITE_COMMIT=$(git rev-parse --short HEAD) VITE_COMMIT_TS=$(git log -1 --pretty='format:%cd' --date=format:'%Y-%m-%d %H:%M:%S') vite",
     "dev:ssl": "USE_SSL=true yarn dev --host --port 443",
     "build": "pwa-assets-generator && VITE_COMMIT=$(git rev-parse --short HEAD) VITE_COMMIT_TS=$(git log -1 --pretty='format:%cd' --date=format:'%Y-%m-%d %H:%M:%S') vite build",
-    "build:android:dev": "ionic capacitor build android -- --mode development",
-    "build:android:prod": "node env-check.cjs && ionic capacitor build android --prod",
-    "platform:add": "ionic capacitor add",
     "generate-pwa-assets": "pwa-assets-generator",
     "preview": "vite preview",
     "test.e2e": "cypress run",
     "test.unit": "vitest",
     "lint": "eslint --max-warnings=0 --ignore-path .gitignore . --ext ts --ext tsx",
-    "resources": "cordova-res ios --skip-config --copy && cordova-res android --skip-config --copy",
     "typecheck": "tsc"
   },
   "dependencies": {
     "@alphaday/ui-kit": "0.0.0",
-    "@capacitor/android": "5.4.1",
-    "@capacitor/app": "5.0.7",
-    "@capacitor/core": "5.7.4",
-    "@capacitor/haptics": "5.0.7",
-    "@capacitor/keyboard": "5.0.8",
-    "@capacitor/status-bar": "5.0.7",
-    "@ionic/react": "7.8.1",
-    "@ionic/react-router": "7.8.1",
     "@react-oauth/google": "0.12.1",
     "@reduxjs/toolkit": "1.8.0",
     "@sentry/react": "7.109.0",
@@ -43,7 +31,6 @@
     "html2canvas": "1.4.1",
     "i18next": "23.16.5",
     "i18next-browser-languagedetector": "8.2.0",
-    "ionicons": "7.3.0",
     "md5": "2.3.0",
     "moment": "2.30.1",
     "moment-with-locales-es6": "1.0.1",
@@ -74,8 +61,6 @@
     "web3-eth-accounts": "1.9.0"
   },
   "devDependencies": {
-    "@capacitor/cli": "5.4.1",
-    "@ionic/cli": "7.2.0",
     "@testing-library/react": "15.0.7",
     "@testing-library/react-hooks": "8.0.1",
     "@testing-library/user-event": "14.4.3",
@@ -89,7 +74,6 @@
     "@vite-pwa/assets-generator": "0.2.4",
     "@vitejs/plugin-basic-ssl": "1.2.0",
     "@vitejs/plugin-legacy": "5.3.2",
-    "cordova-res": "0.15.4",
     "cypress": "12.17.4",
     "dotenv": "16.4.5",
     "happy-dom": "20.0.11",

packages/frontend/ionic.config.json

@@ -1,16 +1,15 @@
 import { Suspense, memo, useMemo } from "react";
 import { ErrorModal } from "@alphaday/ui-kit";
-import { IonApp, IonRouterOutlet } from "@ionic/react";
-import { IonReactRouter } from "@ionic/react-router";
 import { Web3Modal } from "@web3modal/react";
-import { Redirect, Route } from "react-router-dom";
+import { BrowserRouter, Route } from "react-router-dom";
 import * as userStore from "src/api/store/slices/user";
 import ToastContainer from "src/containers/toasts/ToastContainer";
 import {
     useAppInit,
     useResolvedView,
     useViewRoute,
     useGaTracker,
+    useIsMobile,
 } from "./api/hooks";
 import { useGetRemoteStatusQuery } from "./api/services";
 import { useAppDispatch } from "./api/store/hooks";
@@ -20,7 +19,7 @@ import { getRtkErrorCode } from "./api/utils/errorHandling";
 import { Logger } from "./api/utils/logging";
 import CONFIG from "./config/config";
 import PreloaderPage from "./pages/preloader";
-import { EDesktopRoutePaths, desktopRoutes, errorRoutes } from "./routes";
+import { appRoutes, errorRoutes } from "./routes";
 import "@alphaday/ui-kit/global.scss";
 
 const landingPage = CONFIG.SEO.DOMAIN;
@@ -30,6 +29,7 @@ const goToLandingPage = () => {
 };
 
 const AppRoutes = () => {
+    const isMobile = useIsMobile();
     useGaTracker();
 
     const dispatch = useAppDispatch();
@@ -39,22 +39,33 @@ const AppRoutes = () => {
     });
 
     const resolvedView = useResolvedView();
-    const { pathContainsHashOrSlug, isRoot, isSuperfeed } = useViewRoute();
+    const {
+        pathContainsHashOrSlug,
+        isRoot,
+        isBoardsLibrary,
+        isWidgetsLibrary,
+    } = useViewRoute();
 
     const errorCode = useMemo<number | undefined>(() => {
         /**
          * At this moment, we do not support any other routes than the root and the hash/slug routes
          * If the path does not contain a hash or slug, we show the 404 error page
          */
-        if (!pathContainsHashOrSlug && !isRoot && !isSuperfeed) {
+        if (
+            !pathContainsHashOrSlug &&
+            !isRoot &&
+            !isBoardsLibrary &&
+            !isWidgetsLibrary
+        ) {
             return 404;
         }
         const errorInfo = error ?? resolvedView.error;
         return errorInfo && getRtkErrorCode(errorInfo);
     }, [
         pathContainsHashOrSlug,
         isRoot,
-        isSuperfeed,
+        isBoardsLibrary,
+        isWidgetsLibrary,
         error,
         resolvedView.error,
     ]);
@@ -63,7 +74,7 @@ const AppRoutes = () => {
         if (error || errorCode) {
             return errorRoutes;
         }
-        return desktopRoutes;
+        return appRoutes;
     }, [error, errorCode]);
 
     /**
@@ -76,16 +87,8 @@ const AppRoutes = () => {
         location.reload();
     }
 
-    if (isSuperfeed) {
-        return (
-            <Redirect
-                key={EDesktopRoutePaths.Superfeed}
-                path={EDesktopRoutePaths.Superfeed}
-                exact
-                to={EDesktopRoutePaths.Base}
-                push
-            />
-        );
+    if (!isMobile && (isBoardsLibrary || isWidgetsLibrary)) {
+        window.location.href = "/";
     }
 
     return (
@@ -117,24 +120,22 @@ const App: React.FC = () => {
 
     if (!isCookieEnabled()) {
         return (
-            <IonApp className="theme-dark">
+            <div className="theme-dark app-container">
                 <ErrorModal
                     title="Cookie Error"
                     onClose={goToLandingPage}
                     errorMessage="Cookies must be enabled to use Alphaday."
                     size="sm"
                 />
-            </IonApp>
+            </div>
         );
     }
 
     return (
-        <IonApp className="theme-dark">
-            <IonReactRouter>
-                <IonRouterOutlet>
-                    <AppRoutes />
-                </IonRouterOutlet>
-            </IonReactRouter>
+        <div className="theme-dark app-container">
+            <BrowserRouter>
+                <AppRoutes />
+            </BrowserRouter>
             <Web3Modal
                 projectId={CONFIG.WALLET_CONNECT.PROJECT_ID}
                 ethereumClient={walletConnectProvider}
@@ -152,7 +153,7 @@ const App: React.FC = () => {
                 duration={CONFIG.UI.TOAST_DURATION}
                 className="fontGroup-supportBold"
             />
-        </IonApp>
+        </div>
     );
 };