diff --git a/packages/frontend/src/MobileApp.tsx b/packages/frontend/src/MobileApp.tsx index 6be59e311..054b0f9e5 100644 --- a/packages/frontend/src/MobileApp.tsx +++ b/packages/frontend/src/MobileApp.tsx @@ -1,4 +1,4 @@ -import { Suspense, memo } from "react"; +import { memo } from "react"; import { IonApp, IonRouterOutlet, @@ -15,10 +15,13 @@ import { useAuth } from "./api/hooks"; import { useGetFeaturesQuery } from "./api/services"; import CONFIG from "./config"; import ToastContainer from "./containers/toasts/ToastContainer"; -import PreloaderPage from "./pages/preloader"; import "@alphaday/ui-kit/global.scss"; import "./customIonicStyles.scss"; -import { EMobileRoutePaths, mobileRoutes } from "./routes"; +import { + EMobileRoutePaths, + EMobileTabRoutePaths, + mobileRoutes, +} from "./routes"; const { IS_DEV } = CONFIG; @@ -51,49 +54,62 @@ const MobileApp: React.FC = () => { - }> - {mobileRoutes.map((route) => { - if (route.type === "redirect") { - return ( - - ); - } - // if the route is authwalled, let's just redirect to superfeed page. - if (route.authWalled && !isAuthenticated) { - return ( - - ); - } + {mobileRoutes.map((route) => { + if (route.type === "redirect") { + return ( + + ); + } + if (route.type === "fallback") { return ( ( + + )} + /> + ); + } + // if the route is authwalled, let's just redirect to superfeed page. + if (route.authWalled && !isAuthenticated) { + return ( + } /> ); - })} - + } + return ( + } + /> + ); + })} - + {IS_DEV && ( - + { )} { + const history = useRRDHistory(); + + /** + * we shouldn't need this ideally, but adding a listener + * ensures route navigation to tabs route paths which is great + */ + history.listen(() => {}); + + const backNavigation = useCallback(() => { + if (history.length > 0) { + history.goBack(); + } else { + history.push(EMobileTabRoutePaths.Superfeed); + } + }, [history]); + + return { + ...history, + backNavigation, + }; +}; diff --git a/packages/frontend/src/api/hooks/useIsMobile.tsx b/packages/frontend/src/api/hooks/useIsMobile.ts similarity index 100% rename from packages/frontend/src/api/hooks/useIsMobile.tsx rename to packages/frontend/src/api/hooks/useIsMobile.ts diff --git a/packages/frontend/src/layout/PagedMobileLayout.tsx b/packages/frontend/src/layout/PagedMobileLayout.tsx index 326397ed1..b6975cfdc 100644 --- a/packages/frontend/src/layout/PagedMobileLayout.tsx +++ b/packages/frontend/src/layout/PagedMobileLayout.tsx @@ -1,5 +1,6 @@ import { FC, ReactNode } from "react"; import { Pager, ScrollBar } from "@alphaday/ui-kit"; +import { useHistory } from "src/api/hooks"; const PagedMobileLayout: FC<{ title: string; @@ -8,11 +9,15 @@ const PagedMobileLayout: FC<{ handleClose?: () => void; handleBack?: () => void; }> = ({ children, title, onScroll, handleBack, handleClose }) => { + const { backNavigation } = useHistory(); return ( { + handleBack?.(); + backNavigation(); + }} handleClose={handleClose} />
{children}
diff --git a/packages/frontend/src/mobile-components/portfolio/AddHolding.tsx b/packages/frontend/src/mobile-components/portfolio/AddHolding.tsx index 316e2ee2d..2bce4af93 100644 --- a/packages/frontend/src/mobile-components/portfolio/AddHolding.tsx +++ b/packages/frontend/src/mobile-components/portfolio/AddHolding.tsx @@ -1,7 +1,7 @@ import { FC } from "react"; import { FormInput, Pager, ScrollBar } from "@alphaday/ui-kit"; import moment from "moment"; -import { useHistory } from "react-router"; +import { useHistory } from "src/api/hooks"; import { TCoin, THolding } from "src/api/types"; interface IAddHolding { @@ -54,9 +54,7 @@ const AddHolding: FC = ({ {selectedCoin.name} } - handleClose={() => - history.length > 1 ? history.goBack() : history.push("/") - } + handleClose={history.backNavigation} handleBack={() => setSelectedCoin(undefined)} />
diff --git a/packages/frontend/src/mobile-components/portfolio/SelectHoldingCoin.tsx b/packages/frontend/src/mobile-components/portfolio/SelectHoldingCoin.tsx index 81192fd5e..4d5617a12 100644 --- a/packages/frontend/src/mobile-components/portfolio/SelectHoldingCoin.tsx +++ b/packages/frontend/src/mobile-components/portfolio/SelectHoldingCoin.tsx @@ -1,6 +1,6 @@ import React, { FC, FormEvent } from "react"; import { Input, Pager, ScrollBar, Spinner } from "@alphaday/ui-kit"; -import { useHistory } from "react-router"; +import { useHistory } from "src/api/hooks"; import { TCoin } from "src/api/types"; import { ReactComponent as ChevronSVG } from "src/assets/icons/chevron-right.svg"; import { ReactComponent as SearchSVG } from "src/assets/svg/search.svg"; @@ -26,12 +26,7 @@ const SelectHoldingCoin: FC = ({ return ( - - history.length > 1 ? history.goBack() : history.push("/") - } - /> +

Search or select the desired crypto coin that you have in your portfolio. diff --git a/packages/frontend/src/mobile-pages/add-wallet.tsx b/packages/frontend/src/mobile-pages/add-wallet.tsx index c6fcbf680..9383f0fe5 100644 --- a/packages/frontend/src/mobile-pages/add-wallet.tsx +++ b/packages/frontend/src/mobile-pages/add-wallet.tsx @@ -1,7 +1,6 @@ import { useState } from "react"; import { FormInput, MiniDialog, Pager } from "@alphaday/ui-kit"; -import { useHistory } from "react-router"; -import { usePortfolioAccount } from "src/api/hooks"; +import { usePortfolioAccount, useHistory } from "src/api/hooks"; import { validateEthAddr } from "src/api/utils/accountUtils"; import { ReactComponent as GreenCheckSVG } from "src/assets/icons/green-check.svg"; import { EMobileRoutePaths } from "src/routes"; @@ -37,9 +36,7 @@ const AddWalletPage = () => { <> - history.length > 1 ? history.goBack() : history.push("/") - } + handleClose={history.backNavigation} />

{ const [email, setEmail] = useState(""); @@ -66,44 +66,36 @@ const AuthPage: React.FC = () => { * If user is already authenticated, redirect to home page */ if (isInitiallyAuthenticated) { - history.push("/"); + history.push(EMobileRoutePaths.Superfeed); return null; } - const handleBack = () => { - resetAuthState(); - if (history.length > 1) history.goBack(); - else history.push("/"); - }; - return ( - - + + } + title="CONGRATS" + onActionClick={() => { + history.push(EMobileRoutePaths.Superfeed); + }} > - - } - title="CONGRATS" - onActionClick={() => { - history.push("/"); - }} - > -
- Your account has been created! -
-
-
-
+
+ Your account has been created! +
+ + ); }; diff --git a/packages/frontend/src/mobile-pages/connect-wallet.tsx b/packages/frontend/src/mobile-pages/connect-wallet.tsx index 454ace2ec..3e9f7f645 100644 --- a/packages/frontend/src/mobile-pages/connect-wallet.tsx +++ b/packages/frontend/src/mobile-pages/connect-wallet.tsx @@ -1,5 +1,5 @@ import { OutlineButton, Pager } from "@alphaday/ui-kit"; -import { useHistory } from "react-router"; +import { useHistory } from "src/api/hooks"; import { ReactComponent as MetamaskSVG } from "src/assets/icons/metamask.svg"; import { ReactComponent as WalletConnectSVG } from "src/assets/icons/wallet-connect.svg"; @@ -7,12 +7,7 @@ const ConnectWalletPage = () => { const history = useHistory(); return ( <> - - history.length > 1 ? history.goBack() : history.push("/") - } - /> +
Select your preferred wallet provider to conect to your portfolio diff --git a/packages/frontend/src/mobile-pages/notifications.tsx b/packages/frontend/src/mobile-pages/notifications.tsx index cefa16ab5..40c19be8d 100644 --- a/packages/frontend/src/mobile-pages/notifications.tsx +++ b/packages/frontend/src/mobile-pages/notifications.tsx @@ -1,6 +1,4 @@ import { useState } from "react"; -import { IonPage } from "@ionic/react"; -import { useHistory } from "react-router"; import { useAuth } from "src/api/hooks"; import { EFeedItemType } from "src/api/types"; import PagedMobileLayout from "src/layout/PagedMobileLayout"; @@ -82,7 +80,6 @@ const mockNotifications = [ ]; const NotificationsPage = () => { - const history = useHistory(); const { isAuthenticated } = useAuth(); const [notifications, setNotifications] = useState(mockNotifications); @@ -96,21 +93,14 @@ const NotificationsPage = () => { setNotifications((prev) => prev.filter((n) => n.id !== id)); }; return ( - - - history.length > 1 ? history.goBack() : history.push("/") - } - > - - - + + + ); }; diff --git a/packages/frontend/src/mobile-pages/placeholder.tsx b/packages/frontend/src/mobile-pages/placeholder.tsx index c44eae597..cc377d306 100644 --- a/packages/frontend/src/mobile-pages/placeholder.tsx +++ b/packages/frontend/src/mobile-pages/placeholder.tsx @@ -1,13 +1,10 @@ -import { IonPage } from "@ionic/react"; import MobileLayout from "src/layout/MobileLayout"; const PlaceholderPage: React.FC = () => { return ( - - -

Placeholder

-
-
+ +

Placeholder

+
); }; diff --git a/packages/frontend/src/mobile-pages/portfolio.tsx b/packages/frontend/src/mobile-pages/portfolio.tsx index 5ef3866a6..558dacbde 100644 --- a/packages/frontend/src/mobile-pages/portfolio.tsx +++ b/packages/frontend/src/mobile-pages/portfolio.tsx @@ -1,7 +1,6 @@ import { FC } from "react"; import { Pager } from "@alphaday/ui-kit"; -import { useHistory } from "react-router"; -import { useAuth } from "src/api/hooks"; +import { useAuth, useHistory } from "src/api/hooks"; import { ReactComponent as CloseSVG } from "src/assets/icons/close.svg"; import { ReactComponent as InfoSVG } from "src/assets/icons/Info2.svg"; import WalletConnectionOptions from "src/mobile-components/portfolio/WalletConnectionOptions"; @@ -37,12 +36,7 @@ const PortfolioPage = () => { // TODO if user has holdings route to holdings return ( <> - - history.length > 1 ? history.goBack() : history.push("/") - } - /> + { const toggleFeedFilters = () => history.push(EMobileRoutePaths.UserFilters); return ( - - setShowSearchBar((show) => !show)} - > - - - - + setShowSearchBar((show) => !show)} + > + + + ); }; diff --git a/packages/frontend/src/mobile-pages/user-filters.tsx b/packages/frontend/src/mobile-pages/user-filters.tsx index 5543edbda..026197fe2 100644 --- a/packages/frontend/src/mobile-pages/user-filters.tsx +++ b/packages/frontend/src/mobile-pages/user-filters.tsx @@ -1,22 +1,11 @@ -import { IonPage } from "@ionic/react"; -import { useHistory } from "react-router-dom"; import PagedMobileLayout from "src/layout/PagedMobileLayout"; import UserFiltersContainer from "src/mobile-containers/UserFiltersContainer"; const UserSettings: React.FC = () => { - const history = useHistory(); - return ( - - - history.length > 1 ? history.goBack() : history.push("/") - } - > - - - + + + ); }; diff --git a/packages/frontend/src/mobile-pages/user-settings.tsx b/packages/frontend/src/mobile-pages/user-settings.tsx index d35afa2ea..5eb8135db 100644 --- a/packages/frontend/src/mobile-pages/user-settings.tsx +++ b/packages/frontend/src/mobile-pages/user-settings.tsx @@ -1,22 +1,11 @@ -import { IonPage } from "@ionic/react"; -import { useHistory } from "react-router-dom"; import PagedMobileLayout from "src/layout/PagedMobileLayout"; import UserSettingsContainer from "src/mobile-containers/UserSettingsContainer"; const UserSettings: React.FC = () => { - const history = useHistory(); - return ( - - - history.length > 1 ? history.goBack() : history.push("/") - } - > - - - + + + ); }; diff --git a/packages/frontend/src/routes.ts b/packages/frontend/src/routes.ts index 25c984174..6a1c26e9f 100644 --- a/packages/frontend/src/routes.ts +++ b/packages/frontend/src/routes.ts @@ -101,6 +101,13 @@ export const errorRoutes: IRoute[] = [ */ const BASE_TABS_ROUTE = "/"; + +export enum EMobileTabRoutePaths { + Superfeed = `${BASE_TABS_ROUTE}superfeed`, + Portfolio = `${BASE_TABS_ROUTE}portfolio`, + Market = `${BASE_TABS_ROUTE}market`, +} + export enum EMobileRoutePaths { Base = BASE_TABS_ROUTE, Superfeed = `${BASE_TABS_ROUTE}superfeed`, @@ -132,13 +139,17 @@ type TMobileRoute = redirectTo: string; exact?: boolean; type: "redirect"; + } + | { + redirectTo: string; + type: "fallback"; }; export const mobileRoutes: TMobileRoute[] = [ { path: EMobileRoutePaths.Base, - component: SuperfeedPage, + redirectTo: EMobileRoutePaths.Superfeed, exact: true, - type: "regular", + type: "redirect", }, { path: EMobileRoutePaths.Superfeed, @@ -220,30 +231,12 @@ export const mobileRoutes: TMobileRoute[] = [ type: "regular", }, /** - * The following are desktop routes. - * Ideally we would just use a wildcard `*` to handle all routes that doesn't - * match those listed above. However, that approach is not working correctly for some - * reason. + * Fallback route. + * + * This redirects all non-existing routes to the superfeed tab. */ { - path: EDesktopRoutePaths.Boards, - redirectTo: EMobileRoutePaths.Superfeed, - type: "redirect", - }, - { - path: EDesktopRoutePaths.Calendar, redirectTo: EMobileRoutePaths.Superfeed, - type: "redirect", - }, - { - path: EDesktopRoutePaths.CalendarEvent, - redirectTo: EMobileRoutePaths.Superfeed, - type: "redirect", + type: "fallback", }, - // this doesn't work with IonTabs - // { - // path: "*", - // redirectTo: EMobileRoutePaths.Superfeed, - // type: "redirect", - // }, ];