GoodDollar · Agneskoinange · Jan 12, 2026 · Jan 12, 2026 · Jan 12, 2026 · Feb 2, 2026
diff --git a/.hintrc b/.hintrc
@@ -0,0 +1,13 @@
+{
+  "extends": [
+    "development"
+  ],
+  "hints": {
+    "axe/name-role-value": [
+      "default",
+      {
+        "button-name": "off"
+      }
+    ]
+  }
+}
diff --git a/package.json b/package.json
@@ -26,5 +26,8 @@
     "celo-composer",
     "celo"
   ],
-  "packageManager": "yarn@4.5.1"
+  "packageManager": "yarn@4.5.1",
+  "dependencies": {
+    "@wagmi/core": "^2.18.1"
+  }
 }
diff --git a/packages/react-app/index.html b/packages/react-app/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/logo1.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Trust squared</title>
+    <title>Trust2</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/packages/react-app/package.json b/packages/react-app/package.json
@@ -21,6 +21,7 @@
     "@radix-ui/react-toast": "^1.2.2",
     "@tanstack/react-query": "^5.60.5",
     "@wagmi/connectors": "^5.4.0",
+    "@wagmi/core": "^2.18.1",
     "@yudiel/react-qr-scanner": "^2.0.8",
     "algosdk": "^3.0.0",
     "class-variance-authority": "^0.7.0",
@@ -45,13 +46,13 @@
     "@types/react-blockies": "^1.4.4",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.3",
-    "autoprefixer": "^10.4.20",
+    "autoprefixer": "^10.4.21",
     "eslint": "^9.13.0",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.14",
     "globals": "^15.11.0",
-    "postcss": "^8.4.49",
-    "tailwindcss": "^3.4.15",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^3.4.17",
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.11.0",
     "vite": "^5.4.10"

diff --git a/packages/react-app/public/logo1.svg b/packages/react-app/public/logo1.svg
diff --git a/packages/react-app/public/logo2.svg b/packages/react-app/public/logo2.svg
diff --git a/packages/react-app/src/App.tsx b/packages/react-app/src/App.tsx
@@ -2,13 +2,14 @@ import { BrowserRouter, Route, Routes } from "react-router-dom";
 import { useAccount } from "wagmi";
 import "./App.css";
 import BottomNavbar from "./components/BottomNavbar";
-import Navbar from "./components/Navbar";
+// import Navbar from "./components/Navbar";
 import Trustees from "./screens/Trustees";
 import Home from "./screens/Home";
 import Layout from "./screens/Layout";
 import Login from "./screens/Login";
+import Dashborad from "./screens/Dashborad";
 import { QrScan } from "./screens/TrustAction";
-import Trusters from "./screens/Trusters";
+
 import {  useIsLoggedIn } from "@dynamic-labs/sdk-react-core";
 
 function App() {
@@ -28,7 +29,7 @@ function App() {
             path="/*"
             element={
               <>
-                <Navbar />
+                {/* <Navbar /> */}
                 <Routes>
                   {/* Add your other routes here */}
                   <Route
@@ -48,10 +49,10 @@ function App() {
                     }
                   />
                   <Route
-                    path="/truster"
+                    path="/dashboard"
                     element={
                       <Layout>
-                        <Trusters />
+                    <Dashborad />
                       </Layout>
                     }
                   />

diff --git a/packages/react-app/src/components/BottomNavbar.tsx b/packages/react-app/src/components/BottomNavbar.tsx
@@ -1,97 +1,147 @@
-import { CiHome as IconHome, CiUser as IconTrusters } from "react-icons/ci";
-import {
-  FaHandHoldingUsd as IconTrustees,
-  FaChartArea as IconHistory,
-} from "react-icons/fa";
-import { Link } from "react-router-dom";
-
-const navbarItems = {
-  home: {
-    icon: <IconHome className="w-8 h-auto bg-white rounded-sm p-1" />,
-    label: "Home",
-    route: "/",
-  },
-  profile: {
-    icon: <IconTrusters className="w-8 h-auto bg-white rounded-sm p-1" />,
-    label: "Profile",
-    route: "/profile",
-  },
-  history: {
-    icon: <IconHistory className="w-8 h-auto bg-white rounded-sm p-1" />,
-    label: "History",
-    route: "/history",
-  },
-  trustees: {
-    icon: <IconTrustees className="w-8 h-auto bg-white rounded-sm p-1" />,
-    label: "Trustees",
-    route: "/trustees",
-  },
-};
+import { Home, Users, BarChart3, Heart, Settings, LogOut } from "lucide-react";
+import { Link, useLocation } from "react-router-dom";
+import { useState } from "react";
+import { useAccount, useDisconnect } from "wagmi";
+import { useDynamicContext } from "@dynamic-labs/sdk-react-core";
 
 export default function BottomNavbar() {
+  const location = useLocation();
+  const [showLogoutMenu, setShowLogoutMenu] = useState(false);
+  const { disconnect } = useDisconnect();
+  const { handleLogOut } = useDynamicContext();
+
+  const isActive = (route: string) => {
+    if (route === "/") {
+      return location.pathname === "/";
+    }
+    if (route === "/trust") {
+      return location.pathname === "/trust";
+    }
+    return location.pathname.startsWith(route);
+  };
+
+  const handleLogout = async () => {
+    try {
+      disconnect();
+      await handleLogOut();
+      setShowLogoutMenu(false);
+    } catch (error) {
+      console.error("Logout error:", error);
+    }
+  };
+
   return (
-    <div className="fixed bottom-0 left-0 right-0 flex justify-center pb-4">
-      <div className="flex flex-col w-[440px] mx-auto gap-8 p-4 px-8 rounded-tl-3xl rounded-tr-3xl">
-        <div className="max-w-[440px] w-full flex justify-between items-center gap-2">
+    <div className="fixed bottom-0 left-0 right-0 flex justify-center pb-6 px-4">
+      <div className="bg-gray-800 rounded-2xl px-4 py-3 shadow-lg">
+        <div className="flex items-center gap-4">
+          {/* Home */}
           <Link
-            style={{
-              boxShadow: "0px 4px 4px 0px #00000040",
-            }}
-            to={`/truster`}
-            className={`flex bg-[#36B82A4D] justify-end rounded-xl items-center flex-grow px-2 `}
+            to="/"
+            className={`p-3 rounded-full transition-all duration-200 ${
+              isActive("/")
+                ? 'bg-green-600 text-white shadow-lg'
+                : 'text-gray-400 hover:text-white hover:bg-gray-700'
+            }`}
           >
-            <div className="flex  items-center p-2">
-              <IconTrusters
-                className="w-full h-8 rounded-sm p-0"
-                color="#36B82A"
-              />
-              <span className="text-md   text-[#36B82A]">Supporters</span>
-            </div>
+            <Home className="h-5 w-5" />
           </Link>
 
+          {/* Dashboard */}
           <Link
-            to={`/trust`}
-            style={{
-              boxShadow: "0px 4px 4px 0px #00000040",
-            }}
-            className="w-[90px] h-[90px] rounded-xl bg-[#36B82A4D] flex-grow flex items-center justify-center gap-1"
+            to="/dashboard"
+            className={`p-3 rounded-full transition-all duration-200 ${
+              isActive("/dashboard")
+                ? 'bg-green-600 text-white shadow-lg'
+                : 'text-gray-400 hover:text-white hover:bg-gray-700'
+            }`}
           >
-            <img src={`/qrlogo.svg`} width={66} height={"auto"} alt="profile" />
+            <BarChart3 className="h-5 w-5" />
           </Link>
 
+          {/* QR Scan Button */}
           <Link
-            to={`/trustees`}
-            style={{
-              boxShadow: "0px 4px 4px 0px #00000040",
-            }}
-            className={`flex bg-[#36B82A4D] justify-end rounded-xl items-center flex-grow  px-2 `}
+            to="/trust"
+            className={`p-3 rounded-full transition-all duration-200 ${
+              isActive("/trust")
+                ? 'bg-green-600 text-white shadow-lg'
+                : 'bg-gray-700 text-gray-300 hover:bg-gray-600 hover:text-white'
+            }`}
           >
-            <div className="flex  items-center p-2 gap-1">
-              <IconTrustees
-                className="w-full h-8 rounded-sm p-0"
-                color="#AC481E"
-              />
-              <span className="text-md text-[#AC481E]">Trustees</span>
+            <div className="w-6 h-6 flex items-center justify-center">
+              <div className="grid grid-cols-3 gap-0.5">
+                <div className="w-1 h-1 bg-white rounded-sm"></div>
+                <div className="w-1 h-1 bg-white rounded-sm"></div>
+                <div className="w-1 h-1 bg-white rounded-sm"></div>
+                <div className="w-1 h-1 bg-white rounded-sm"></div>
+                <div className="w-1 h-1 bg-transparent"></div>
+                <div className="w-1 h-1 bg-white rounded-sm"></div>
+                <div className="w-1 h-1 bg-white rounded-sm"></div>
+                <div className="w-1 h-1 bg-white rounded-sm"></div>
+                <div className="w-1 h-1 bg-white rounded-sm"></div>
+              </div>
             </div>
-            {/* <IconTrustees className="w-full h-14 rounded-sm p-1" color="#AC481E" />
-            <span className="text-xl text-[#AC481E]">$200</span> */}
           </Link>
 
-          {/* {Object.entries(navbarItems).map(([key, item]) => (
-            <Link
-              key={key}
-              to={item.route}
-              className={`flex flex-col items-center gap-1`}
+          {/* History
+          <Link
+            to="/history"
+            className={`p-3 rounded-full transition-all duration-200 ${
+              isActive("/history")
+                ? 'bg-green-600 text-white shadow-lg'
+                : 'text-gray-400 hover:text-white hover:bg-gray-700'
+            }`}
+          >
+            <Users className="h-5 w-5" />
+          </Link> */}
+
+          {/* Trustees */}
+          <Link
+            to="/trustees"
+            className={`p-3 rounded-full transition-all duration-200 ${
+              isActive("/trustees")
+                ? 'bg-green-600 text-white shadow-lg'
+                : 'text-gray-400 hover:text-white hover:bg-gray-700'
+            }`}
+          >
+            <Heart className="h-5 w-5" />
+          </Link>
+
+          {/* Settings with Logout Dropdown */}
+          <div className="relative">
+            <button
+              className={`p-3 rounded-full transition-all duration-200 ${
+                showLogoutMenu 
+                  ? 'bg-green-600 text-white shadow-lg'
+                  : 'text-gray-400 hover:text-white hover:bg-gray-700'
+              }`}
+              onClick={() => setShowLogoutMenu(!showLogoutMenu)}
             >
-              {item.icon}
-              <span className="text-xs">{item.label}</span>
-            </Link>
-          ))} */}
+              <Settings className="h-5 w-5" />
+            </button>
+
+            {/* Logout Dropdown */}
+            {showLogoutMenu && (
+              <div className="absolute right-0 bottom-full mb-2 bg-gray-700 rounded-lg shadow-lg border border-gray-600 min-w-[150px] z-50">
+                <button
+                  onClick={handleLogout}
+                  className="w-full flex items-center gap-3 px-4 py-3 text-left text-white hover:bg-gray-600 rounded-lg transition-colors"
+                >
+                  <LogOut className="h-4 w-4" />
+                  <span>Logout</span>
+                </button>
+              </div>
+            )}
+          </div>
         </div>
-        {/* <Button size={"lg"} className="bg-white text-black">
-          Trust Someone
-        </Button> */}
       </div>
+
+      {/* Click outside to close dropdown */}
+      {showLogoutMenu && (
+        <div 
+          className="fixed inset-0 z-40" 
+          onClick={() => setShowLogoutMenu(false)}
+        />
+      )}
     </div>
   );
-}
+}
diff --git a/packages/react-app/src/components/TrustAccount.tsx b/packages/react-app/src/components/TrustAccount.tsx
@@ -1,26 +1,26 @@
 import { getAddressLink } from "@/utils";
-import { useMemo } from "react";
 import Blockies from "react-blockies";
 import { Link } from "react-router-dom";
 
 interface ProfileCardProps {
   address: string;
   name?: string;
 }
-// export const randomWalletAddress = () => {
-//   const chars = "0123456789abcdef";
-//   let address = "0x";
-//   for (let i = 0; i < 40; i++) {
-//     address += chars[Math.floor(Math.random() * chars.length)];
-//   }
-//   return address;
-// };
+
+// Helper function to truncate address
+function truncateAddress(address: string): string {
+  return `${address.slice(0, 6)}...${address.slice(-4)}`;
+}
 
 export default function TrustAccount({ address, name = "" }: ProfileCardProps) {
+  console.log("TrustAccount received:", { address, name }); // للـ debugging
+
+  const displayName = name?.trim() || truncateAddress(address);
+
   return (
-    <div className="flex items-centerp-4 rounded-lg px-4">
+    <div className="flex items-center p-4 rounded-lg px-4">
       {/* Profile Picture */}
-      <Blockies
+      <Blockies as any
         seed={address.toLowerCase()}
         size={10}
         scale={5}
@@ -30,23 +30,17 @@ export default function TrustAccount({ address, name = "" }: ProfileCardProps) {
       {/* Name and Wallet */}
       <div className="ml-4 flex flex-col">
         <Link
-
           to={getAddressLink(address)}
-          className="font-medium text-lg underline"
+          className="font-medium text-lg underline text-white hover:text-green-400"
           target="_blank"
           rel="noopener noreferrer"
         >
-          {name || truncateAddress(address)}
+          {displayName}
         </Link>
         <span className="text-sm text-gray-500 mt-1">
           {truncateAddress(address)}
         </span>
       </div>
     </div>
   );
-}
-
-// Helper function to truncate address
-function truncateAddress(address: string): string {
-  return `${address.slice(0, 6)}...${address.slice(-4)}`;
-}
+}