Feature/click to switch mode (allthatjazzleo#6)

* feat(route): Delete useless route

* feat(context): Add a context for state management

* feat(context): Implement the context for state management

Author: BigtoC

frontend/src/App.tsx

@@ -7,6 +7,7 @@ import {
 import { RouterProvider } from '@tanstack/react-router';
 import { useMemo } from 'react';
 
+import { LoveAppProvider } from '@/context/LoveAppContext.tsx';
 import { Toaster } from '@/shadcn/components/ui/toaster';
 import { useToast } from '@/shadcn/hooks/use-toast';
 
@@ -54,7 +55,9 @@ function App() {
           }
           walletConnectOptions={WALLET_CONNECT_OPTIONS}
         >
-          <RouterProvider router={router} />
+          <LoveAppProvider>
+            <RouterProvider router={router} />
+          </LoveAppProvider>
         </MantraProvider>
       </QueryClientProvider>
       <Toaster />

frontend/src/components/AppIcon.tsx

@@ -1,10 +1,21 @@
 import { HandHeart } from 'lucide-react';
 
+import { useLoveApp } from '@/context/LoveAppContext.tsx';
+
 export const AppIcon = () => {
+  const { isLoveApp, setIsLoveApp } = useLoveApp();
+
   return (
     <div className="flex flex-row items-center gap-2">
-      <HandHeart />
-      <div className="font-semibold">Proposal Manager</div>
+      <button
+        className="flex flex-row items-center gap-2"
+        onClick={() => setIsLoveApp(!isLoveApp)}
+      >
+        <HandHeart />
+      </button>
+      <div className="font-semibold">
+        {isLoveApp ? 'Love Manager 💖' : 'Proposal Manager'}
+      </div>
     </div>
   );
 };

frontend/src/components/CreateProposalCard.tsx

@@ -7,9 +7,9 @@ import { useMemo, useState } from 'react';
 
 import { ProposalManagerQueryClient } from '@/__generated__/ProposalManager.client';
 import { Coin } from '@/__generated__/ProposalManager.types';
+import { useLoveApp } from '@/context/LoveAppContext.tsx';
 import { useAllNativeTokenBalances } from '@/hooks/useAllNativeTokenBalances';
 import { useCreateProposalMutation } from '@/hooks/useCreateProposalMutation';
-import { isLoveApp } from '@/lib/utils.ts';
 import { Button } from '@/shadcn/components/ui/button';
 import {
   Card,
@@ -188,6 +188,8 @@ export const CreateProposalCard: React.FC<Props> = ({ onSuccess }) => {
     return formatTokenBalance(successfulProposalFee.amount);
   }, [successfulProposalFee]);
 
+  const { isLoveApp } = useLoveApp();
+
   return (
     <Card className="w-[900px]">
       <CardHeader>
@@ -212,7 +214,7 @@ export const CreateProposalCard: React.FC<Props> = ({ onSuccess }) => {
             className="font-mono"
             type="string"
             id="title"
-            placeholder={isLoveApp() ? 'Marry me' : "Let's collaborate!"}
+            placeholder={isLoveApp ? 'Marry me' : "Let's collaborate!"}
             value={title}
             onChange={(e) => setTitle(e.target.value)}
           />
@@ -223,7 +225,7 @@ export const CreateProposalCard: React.FC<Props> = ({ onSuccess }) => {
             className="font-mono"
             type="string"
             id="speech"
-            placeholder={isLoveApp() ? 'I love you' : 'Deal! Delay no more!'}
+            placeholder={isLoveApp ? 'I love you' : 'Deal! Delay no more!'}
             value={speech}
             onChange={(e) => setSpeech(e.target.value)}
           />

frontend/src/components/Main.tsx

@@ -2,7 +2,7 @@ import { useCosmWasmClients, useMantra } from '@mantrachain/connect';
 import { useQuery } from '@tanstack/react-query';
 
 import { ProposalManagerQueryClient } from '@/__generated__/ProposalManager.client';
-import { isLoveApp } from '@/lib/utils.ts';
+import { useLoveApp } from '@/context/LoveAppContext.tsx';
 import {
   Tabs,
   TabsContent,
@@ -75,14 +75,15 @@ const Connected = () => {
 
 export const Main = () => {
   const { address } = useMantra();
+  const { isLoveApp } = useLoveApp();
 
   return (
     <div className="container">
       <h1 className="text-4xl font-semibold text-center mt-10">
-        {isLoveApp() ? 'Love on the Chain ❤️' : 'Make a deal on chain'}
+        {isLoveApp ? 'Love on the Chain ❤️' : 'Make a deal on chain'}
       </h1>
       <p className="text-sm text-center mt-3">
-        {isLoveApp() ? 'Express your love' : 'Manage your proposals'} on Mantra
+        {isLoveApp ? 'Express your love' : 'Manage your proposals'} on MANTRA
         Chain!{' '}
         <span className="text-pink-400">Create or respond to proposals</span>{' '}
         with a gift of tokens.

frontend/src/context/LoveAppContext.tsx

@@ -0,0 +1,26 @@
+import { createContext, useContext, useState, ReactNode } from 'react';
+
+interface LoveAppContextType {
+  isLoveApp: boolean;
+  setIsLoveApp: (isLoveApp: boolean) => void;
+}
+
+const LoveAppContext = createContext<LoveAppContextType | undefined>(undefined);
+
+export const LoveAppProvider = ({ children }: { children: ReactNode }) => {
+  const [isLoveApp, setIsLoveApp] = useState(false);
+
+  return (
+    <LoveAppContext.Provider value={{ isLoveApp, setIsLoveApp }}>
+      {children}
+    </LoveAppContext.Provider>
+  );
+};
+
+export const useLoveApp = () => {
+  const context = useContext(LoveAppContext);
+  if (!context) {
+    throw new Error('useLoveApp must be used within a LoveAppProvider');
+  }
+  return context;
+};

frontend/src/lib/utils.ts

@@ -4,8 +4,3 @@ import { twMerge } from 'tailwind-merge';
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
-
-export function isLoveApp() {
-  // 💖-> %F0%9F%92%96
-  return window.location.pathname.includes('/love/%F0%9F%92%96');
-}

frontend/src/routeTree.gen.ts

@@ -17,9 +17,6 @@ import { Route as rootRoute } from './routes/__root'
 // Create Virtual Routes
 
 const ProposalManagerLazyImport = createFileRoute('/proposal-manager')()
-const ProposalManagerLoveLazyImport = createFileRoute(
-  '/proposal-manager/love/💖',
-)()
 
 // Create/Update Routes
 
@@ -31,14 +28,6 @@ const ProposalManagerLazyRoute = ProposalManagerLazyImport.update({
   import('./routes/proposal-manager.lazy').then((d) => d.Route),
 )
 
-const ProposalManagerLoveLazyRoute = ProposalManagerLoveLazyImport.update({
-  id: '/love/💖',
-  path: '/love/💖',
-  getParentRoute: () => ProposalManagerLazyRoute,
-} as any).lazy(() =>
-  import('./routes/proposal-manager.love.💖.lazy').then((d) => d.Route),
-)
-
 // Populate the FileRoutesByPath interface
 
 declare module '@tanstack/react-router' {
@@ -50,60 +39,39 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ProposalManagerLazyImport
       parentRoute: typeof rootRoute
     }
-    '/proposal-manager/love/💖': {
-      id: '/proposal-manager/love/💖'
-      path: '/love/💖'
-      fullPath: '/proposal-manager/love/💖'
-      preLoaderRoute: typeof ProposalManagerLoveLazyImport
-      parentRoute: typeof ProposalManagerLazyImport
-    }
   }
 }
 
 // Create and export the route tree
 
-interface ProposalManagerLazyRouteChildren {
-  ProposalManagerLoveLazyRoute: typeof ProposalManagerLoveLazyRoute
-}
-
-const ProposalManagerLazyRouteChildren: ProposalManagerLazyRouteChildren = {
-  ProposalManagerLoveLazyRoute: ProposalManagerLoveLazyRoute,
-}
-
-const ProposalManagerLazyRouteWithChildren =
-  ProposalManagerLazyRoute._addFileChildren(ProposalManagerLazyRouteChildren)
-
 export interface FileRoutesByFullPath {
-  '/proposal-manager': typeof ProposalManagerLazyRouteWithChildren
-  '/proposal-manager/love/💖': typeof ProposalManagerLoveLazyRoute
+  '/proposal-manager': typeof ProposalManagerLazyRoute
 }
 
 export interface FileRoutesByTo {
-  '/proposal-manager': typeof ProposalManagerLazyRouteWithChildren
-  '/proposal-manager/love/💖': typeof ProposalManagerLoveLazyRoute
+  '/proposal-manager': typeof ProposalManagerLazyRoute
 }
 
 export interface FileRoutesById {
   __root__: typeof rootRoute
-  '/proposal-manager': typeof ProposalManagerLazyRouteWithChildren
-  '/proposal-manager/love/💖': typeof ProposalManagerLoveLazyRoute
+  '/proposal-manager': typeof ProposalManagerLazyRoute
 }
 
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/proposal-manager' | '/proposal-manager/love/💖'
+  fullPaths: '/proposal-manager'
   fileRoutesByTo: FileRoutesByTo
-  to: '/proposal-manager' | '/proposal-manager/love/💖'
-  id: '__root__' | '/proposal-manager' | '/proposal-manager/love/💖'
+  to: '/proposal-manager'
+  id: '__root__' | '/proposal-manager'
   fileRoutesById: FileRoutesById
 }
 
 export interface RootRouteChildren {
-  ProposalManagerLazyRoute: typeof ProposalManagerLazyRouteWithChildren
+  ProposalManagerLazyRoute: typeof ProposalManagerLazyRoute
 }
 
 const rootRouteChildren: RootRouteChildren = {
-  ProposalManagerLazyRoute: ProposalManagerLazyRouteWithChildren,
+  ProposalManagerLazyRoute: ProposalManagerLazyRoute,
 }
 
 export const routeTree = rootRoute
@@ -120,14 +88,7 @@ export const routeTree = rootRoute
       ]
     },
     "/proposal-manager": {
-      "filePath": "proposal-manager.lazy.tsx",
-      "children": [
-        "/proposal-manager/love/💖"
-      ]
-    },
-    "/proposal-manager/love/💖": {
-      "filePath": "proposal-manager.love.💖.lazy.tsx",
-      "parent": "/proposal-manager"
+      "filePath": "proposal-manager.lazy.tsx"
     }
   }
 }

frontend/src/routes/proposal-manager.love.💖.lazy.tsx

@@ -8,7 +8,7 @@ import { routeTree } from './routeTree.gen';
 const queryClient = new QueryClient();
 
 const memoryHistory = createMemoryHistory({
-  initialEntries: ['/proposal-manager/love/💖'],
+  initialEntries: ['/proposal-manager/'],
 });
 
 const router = createRouter({