chore(base): cleaned up module federation, use react v6 routes

src/ui/src/Apps/Calls/Contacts/index.tsx

@@ -1,4 +1,4 @@
-import { Link, Outlet } from 'react-router-dom';
+import { Link, Outlet, useSearchParams } from 'react-router-dom';
 import { TopNavigation } from '../../../components/Navigation/TopNavigation';
 import { useCurrentDevice } from '../../../api/hooks/useCurrentDevice';
 import { useContacts } from '../../../api/hooks/useContacts';
@@ -7,6 +7,9 @@ export const ContactsView = () => {
   const device = useCurrentDevice();
   const [contacts] = useContacts();
 
+  const [searchParams] = useSearchParams();
+  const referal = searchParams.get('referal');
+
   return (
     <main className="flex flex-col">
       <TopNavigation
@@ -30,7 +33,11 @@ export const ContactsView = () => {
           <Link
             key={contact.id}
             className="bg-secondary p-4"
-            to={`/apps/calls/call/${contact.phone_number}`}
+            to={
+              referal
+                ? `${referal}?data=${encodeURIComponent(JSON.stringify(contact))}`
+                : `/apps/calls/call/${contact.phone_number}`
+            }
           >
             <li className="text-xl font-bold rounded-lg bg-secondary">{contact.name}</li>
           </Link>

src/ui/src/Apps/Calls/index.tsx

@@ -41,7 +41,7 @@ export const CallsApp = () => {
         <Outlet />
       </section>
 
-      <div className="flex gap-2 justify-between mt-auto border-t p-4">
+      <div className="flex gap-2 justify-between mt-auto border-t p-4 mb-4">
         <Link to="/apps/calls/latest" className="p-4 bg-secondary rounded-lg">
           Latest
         </Link>

src/ui/src/Frame.tsx

@@ -7,7 +7,7 @@ export const Frame = ({ children }: { children: React.ReactNode }) => {
   return (
     <div
       className={clsx(
-        'w-[390px] h-[844px] text-primary flex flex-col shadow-2xl rounded-[40px] overflow-hidden',
+        'w-[390px] h-[844px] text-primary flex flex-col shadow-2xl rounded-[40px] overflow-hidden relative',
         isGame && 'fixed bottom-0 right-0 scale-90',
       )}
     >

src/ui/src/Providers.tsx

@@ -1,9 +1,9 @@
 import { QueryCache, QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
-import { PropsWithChildren, useContext } from 'react';
+import { PropsWithChildren } from 'react';
 import { NuiProvider } from 'react-fivem-hooks';
-import { RouterProvider } from './RouterContext';
+import { InnerRouterProvider, RouterProvider } from './contexts/RouterContext';
 import { routes } from './routes';
+import { AppsProvider } from './contexts/AppsContext';
 
 export const queryClient = new QueryClient({
   defaultOptions: {
@@ -19,13 +19,14 @@ export const queryClient = new QueryClient({
   }),
 });
 
-export const Providers = ({ children }: PropsWithChildren) => {
+export const Providers = () => {
   return (
     <QueryClientProvider client={queryClient}>
       <NuiProvider>
         <RouterProvider initialRoutes={routes}>
-          {/* <ReactQueryDevtools initialIsOpen={false} /> */}
-          {children}
+          <AppsProvider>
+            <InnerRouterProvider />
+          </AppsProvider>
         </RouterProvider>
       </NuiProvider>
     </QueryClientProvider>

src/ui/src/components/Main/Footer/index.tsx

@@ -4,7 +4,7 @@ import { useLocation, useNavigate } from 'react-router';
 interface FooterProps extends MotionConfigProps {
   y: MotionValue<number>;
 }
-export const Footer = ({ y, scale, ...props }: FooterProps) => {
+export const Footer = ({ y, ...props }: FooterProps) => {
   const navigate = useNavigate();
   const { pathname } = useLocation();
 
@@ -21,7 +21,7 @@ export const Footer = ({ y, scale, ...props }: FooterProps) => {
   }
 
   return (
-    <footer>
+    <footer className="absolute bottom-0 w-full">
       <motion.div
         className="h-8 px-6 flex gap-4 items-center mt-auto"
         drag="y"

src/ui/src/contexts/AppsContext/index.tsx

@@ -0,0 +1,76 @@
+import { useExternalApps } from '@/hooks/useExternalApps';
+import { createContext, PropsWithChildren, ReactNode, useMemo, useState } from 'react';
+
+export interface App {
+  id: string;
+  name: string;
+  path: string;
+  Icon: string | ReactNode;
+}
+
+interface AppsContext {
+  hasInitialised: boolean;
+  apps: App[];
+  setApps: React.Dispatch<React.SetStateAction<App[]>>;
+}
+
+export const AppsContext = createContext<AppsContext>({
+  hasInitialised: false,
+  apps: [],
+  setApps: () => {},
+});
+
+/** List of apps */
+const defaultApps: App[] = [
+  {
+    id: 'calls',
+    name: 'Calls',
+    Icon: '📞',
+    path: '/calls',
+  },
+  {
+    id: 'casino',
+    name: 'Casino',
+    Icon: '🎰',
+    path: '/casino',
+  },
+  {
+    id: 'messages',
+    name: 'Messages',
+    Icon: '💬',
+    path: '/messages',
+  },
+  {
+    id: 'photos',
+    name: 'Photos',
+    Icon: '📷',
+    path: '/photos',
+  },
+  {
+    id: 'camera',
+    name: 'Camera',
+    Icon: '📸',
+    path: '/camera',
+  },
+  {
+    id: 'settings',
+    name: 'Settings',
+    Icon: '⚙️',
+    path: '/settings',
+  },
+];
+
+export const AppsProvider = ({ children }: PropsWithChildren) => {
+  const [apps, setApps] = useState<App[]>(defaultApps);
+  const { apps: externalApps, hasLoaded } = useExternalApps();
+
+  const memoizedReturn = useMemo(() => {
+    return {
+      hasInitialised: true,
+      apps: hasLoaded ? apps.concat(externalApps) : [],
+      setApps,
+    };
+  }, [apps, externalApps, hasLoaded]);
+
+  return <AppsContext.Provider value={memoizedReturn}>{children}</AppsContext.Provider>;
+};

src/ui/src/contexts/AppsContext/useApps.ts

@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+import { AppsContext } from '.';
+
+export const useApps = () => {
+  const { hasInitialised, apps } = useContext(AppsContext);
+
+  if (!hasInitialised) {
+    throw new Error('useApps must be used within a AppsProvider');
+  }
+
+  return apps;
+};

src/ui/src/RouterContext.tsx → src/ui/src/contexts/RouterContext.tsx

@@ -1,6 +1,7 @@
-import { createContext, PropsWithChildren, useState } from 'react';
-import { RouteObject, RouteProps } from 'react-router';
+import { createContext, PropsWithChildren, useMemo, useState } from 'react';
+import { RouteObject } from 'react-router';
 import { createHashRouter, RouterProvider as ReactRouterProvider } from 'react-router-dom';
+import { useRoutes } from '@/hooks/useRouter';
 
 export const RouterContext = createContext<{
   routes: RouteObject[];
@@ -14,16 +15,26 @@ interface RouterProviderProps extends PropsWithChildren {
   initialRoutes?: RouteObject[];
 }
 
-export const RouterProvider = ({ initialRoutes = [] }: RouterProviderProps) => {
+export const RouterProvider = ({ initialRoutes = [], children }: RouterProviderProps) => {
   const [routes, setRoutes] = useState(initialRoutes);
 
   if (!routes?.length) {
     throw new Error('No routes provided to RouterProvider');
   }
 
   return (
-    <RouterContext.Provider value={{ routes, setRoutes }}>
-      <ReactRouterProvider router={createHashRouter(routes)} />
+    <RouterContext.Provider
+      value={{
+        routes,
+        setRoutes,
+      }}
+    >
+      {children}
     </RouterContext.Provider>
   );
 };
+
+export const InnerRouterProvider = () => {
+  const { routes } = useRoutes();
+  return <ReactRouterProvider router={createHashRouter(routes)} />;
+};

src/ui/src/hooks/useBroadcastEvent.ts

@@ -1,8 +1,8 @@
 import { useNuiEvent } from 'react-fivem-hooks';
 import { NUI_BROADCAST_EVENT } from '../../../shared/network';
 
-export const useBroadcastEvent = <T>(eventName: string, callback: (data: T) => void) => {
-  useNuiEvent<{ data: T; event: string }>({
+export const useBroadcastEvent = <T>(eventName: string, callback: (data: T | null) => void) => {
+  useNuiEvent<{ data: T | null; event: string }>({
     event: NUI_BROADCAST_EVENT,
     callback: ({ data, event }) => {
       if (event === eventName) {