Refactor Dashboard, Treasury Account Setup, and Routing

frontend/package.json

@@ -30,13 +30,16 @@
     "eth-crypto": "^2.7.0",
     "ethereum-unit-converter": "^0.0.17",
     "ethers": "^6.13.5",
+    "framer-motion": "^12.23.0",
     "html2canvas": "^1.4.1",
     "jspdf": "^3.0.0",
     "lucide-react": "^0.471.1",
     "react": "^18.3.1",
     "react-day-picker": "^8.10.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.54.2",
+    "react-hot-toast": "^2.5.2",
+    "react-icons": "^5.5.0",
     "react-router-dom": "^7.1.1",
     "react-to-print": "^3.0.5",
     "tailwind-merge": "^2.6.0",

frontend/src/App.jsx

@@ -1,80 +1,78 @@
-import '@rainbow-me/rainbowkit/styles.css';
+import "@rainbow-me/rainbowkit/styles.css";
 import {
   getDefaultConfig,
   RainbowKitProvider,
   darkTheme,
 } from "@rainbow-me/rainbowkit";
-import { WagmiProvider } from 'wagmi';
-import {
-  QueryClientProvider,
-  QueryClient,
-} from "@tanstack/react-query";
+import { WagmiProvider } from "wagmi";
+import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
 import * as chains from "wagmi/chains";
-import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'
-import Landing from './page/Landing'
-import Applayout from './page/Applayout'
-
-import { citreaTestnet } from './utils/CitreaTestnet';
-import Home from './page/Home';
-import Feature from './page/Feature';
-import About from './page/About';
-import Working from './page/Working';
-import Treasure from './page/Treasure';
-import CreateInvoice from './components/CreateInvoice';
-import SentInvoice from './page/SentInvoice';
-import ReceivedInvoice from './page/ReceivedInvoice';
 
-const AllChains = [
-  ...Object.values(chains),
-];
-// citreaTestnet,
+import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
+import Landing from "./page/Landing";
+import Applayout from "./page/Applayout";
+
+import { citreaTestnet } from "./utils/CitreaTestnet";
+import Home from "./page/Home";
+import Feature from "./page/Feature";
+import About from "./page/About";
+import Working from "./page/Working";
+import Treasure from "./page/Treasure";
+import CreateInvoice from "./components/CreateInvoice";
+import SentInvoice from "./page/SentInvoice";
+import ReceivedInvoice from "./page/ReceivedInvoice";
+
+const AllChains = [...Object.values(chains), citreaTestnet];
+
 export const config = getDefaultConfig({
   appName: "My RainbowKit App",
   projectId: "YOUR_PROJECT_ID",
   chains: AllChains,
   ssr: true,
 });
 const queryClient = new QueryClient();
+import { Toaster } from "react-hot-toast";
 
 function App() {
-
   return (
-    <div className='bg-[#161920]'> 
-    <WagmiProvider config={config}>
-      <QueryClientProvider client={queryClient}>
-        <RainbowKitProvider
-          coolMode
-          // initialChain={citreaTestnet}
-          theme={darkTheme({
-            accentColor: "#22c55e",
-            accentColorForeground: "white",
-            borderRadius: "medium",
-            fontStack: "system",
-            overlayBlur: "small",
-          })}>
-          <div className='font-Montserrat h-screen'>
-            <Router>
-              <Routes>
-                <Route path="/" element={<Applayout />}>
-                  <Route index element={<Landing/>} />
-                  <Route path="home" element={<Home/>} >
-                      <Route path='create' element={<CreateInvoice/>}/>
-                      <Route path='sent' element={<SentInvoice/>}/>
-                      <Route path='pending' element={<ReceivedInvoice/>}/>
+    <div className="bg-[#161920]">
+      <Toaster position="top-center" reverseOrder={false} />
+      <WagmiProvider config={config}>
+        <QueryClientProvider client={queryClient}>
+          <RainbowKitProvider
+            coolMode
+            initialChain={citreaTestnet}
+            theme={darkTheme({
+              accentColor: "#22c55e",
+              accentColorForeground: "white",
+              borderRadius: "medium",
+              fontStack: "system",
+              overlayBlur: "small",
+            })}
+          >
+            <div className="font-Montserrat h-screen">
+              <Router>
+                <Routes>
+                  <Route path="/" element={<Applayout />}>
+                    <Route index element={<Landing />} />
+                    <Route path="dashboard" element={<Home />}>
+                      <Route path="create" element={<CreateInvoice />} />
+                      <Route path="sent" element={<SentInvoice />} />
+                      <Route path="pending" element={<ReceivedInvoice />} />
+                    </Route>
+                    <Route path="feature" element={<Feature />} />
+                    <Route path="about" element={<About />} />
+                    <Route path="working" element={<Working />} />
+                    <Route path="treasure" element={<Treasure />} />
                   </Route>
-                  <Route path="feature" element={<Feature/>} />
-                  <Route path="about" element={<About/>} />
-                  <Route path="working" element={<Working/>} />
-                  <Route path="treasure" element={<Treasure/>} />
-                </Route>
-              </Routes>
-            </Router>
-          </div>
-        </RainbowKitProvider>
-      </QueryClientProvider>
-    </WagmiProvider>
+                </Routes>
+              </Router>
+            </div>
+          </RainbowKitProvider>
+        </QueryClientProvider>
+      </WagmiProvider>
     </div>
-  )
+  );
 }
 
-export default App;
+export default App;