Trajectfi · jaykayudo · May 4, 2025 · May 4, 2025
diff --git a/dapp/package-lock.json b/dapp/package-lock.json
diff --git a/dapp/package.json b/dapp/package.json
@@ -14,7 +14,8 @@
     "lucide-react": "^0.503.0",
     "next": "15.1.6",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "react-icons": "^5.5.0"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",

diff --git a/dapp/public/connectwallet_bg.jpg b/dapp/public/connectwallet_bg.jpg
diff --git a/dapp/public/trajectfilogo.svg b/dapp/public/trajectfilogo.svg
diff --git a/dapp/src/app/globals.css b/dapp/src/app/globals.css
@@ -16,6 +16,6 @@
 
 body {
   color: var(--foreground);
-  background: var(--background);
+  background: #06071B;
   font-family: Arial, Helvetica, sans-serif;
 }
diff --git a/dapp/src/app/layout.tsx b/dapp/src/app/layout.tsx
@@ -1,6 +1,9 @@
-import type { Metadata } from "next";
+"use client";
+// import type { Metadata } from "next";
+import React, { useState } from "react";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
+import { Header, Sidebar } from "@/components";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -12,22 +15,46 @@ const geistMono = Geist_Mono({
   subsets: ["latin"],
 });
 
-export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
-};
+// export const metadata: Metadata = {
+//   title: "Create Next App",
+//   description: "Generated by create next app",
+// };
 
 export default function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+  const toggleSidebar = () => {
+    setSidebarOpen(!sidebarOpen);
+  };
   return (
     <html lang="en">
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
-        {children}
+        <div className="flex h-screen">
+          {/* Mobile sidebar overlay */}
+          {sidebarOpen && (
+            <div
+              className="fixed inset-0 z-20 bg-[#06071B] transition-opacity lg:hidden"
+              onClick={() => setSidebarOpen(false)}
+            />
+          )}
+
+          {/* Sidebar */}
+          <Sidebar open={sidebarOpen} setOpen={setSidebarOpen} />
+
+          {/* Main content */}
+          <div className="flex flex-col flex-1 overflow-hidden">
+            <Header toggleSidebar={toggleSidebar} />
+
+            <main className="flex-1 overflow-y-auto p-4 md:p-6">
+              <div className="max-w-7xl mx-auto">{children}</div>
+            </main>
+          </div>
+        </div>
       </body>
     </html>
   );

diff --git a/dapp/src/app/page.tsx b/dapp/src/app/page.tsx
@@ -1,7 +1,24 @@
+"use client";
+import { MyAssets, ConnectWallet } from "@/components";
+import { useState } from "react";
+
 const Home = () => {
-    return ( 
-        <div></div>
-     );
-}
-
-export default Home;
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+  const toggleSidebar = () => {
+    setIsSidebarOpen(!isSidebarOpen);
+  };
+  return (
+    <div className="">
+      <button
+        onClick={toggleSidebar}
+        type="button"
+        className="hidden lg:flex items-center px-4 py-2 text-sm font-medium text-white bg-purple-700  rounded-lg hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500"
+      >
+        Toogle
+      </button>
+      {isSidebarOpen ? <MyAssets /> : <ConnectWallet />}
+    </div>
+  );
+};
+
+export default Home;
diff --git a/dapp/src/components/connectwallet.tsx b/dapp/src/components/connectwallet.tsx
@@ -0,0 +1,53 @@
+import React from "react";
+
+const Connectwallet = () => {
+  return (
+    <div className="min-h-screen text-white p-4">
+      <h1 className="text-xl font-medium mb-6">My Assets</h1>
+      <div className="border border-[#1c1f3f] rounded-[10px] h-[600px] relative bg-[#35355033] overflow-hidden">
+        <div
+          className="absolute inset-0"
+          style={{
+            backgroundImage: "url(/connectwallet_bg.jpg)",
+            backgroundSize: "cover",
+            backgroundPosition: "center",
+            backgroundRepeat: "no-repeat",
+            mixBlendMode: "multiply",
+            opacity: 1,
+          }}
+        />
+
+        <div className="absolute inset-0 flex justify-center items-center">
+          <div className="flex justify-center items-center gap-8 flex-col py-4 px-6">
+            <h2 className="text-[50px] font-extrabold">Connect Your Wallet</h2>
+            <p className="mt-[-20px]">
+              To view your assets, please connect your wallet.
+            </p>
+            <button
+              type="button"
+              className="hidden lg:flex items-center px-4 py-2 text-sm font-medium text-white bg-[#8358FF]  rounded-lg hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500"
+            >
+              Connect Wallet{" "}
+              <svg
+                width="21"
+                height="20"
+                viewBox="0 0 21 20"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M11.6075 6.14966C11.801 5.97766 12.0972 5.99509 12.2692 6.18859L15.3804 9.68857C15.5382 9.86619 15.5382 10.1338 15.3804 10.3114L12.2692 13.8114C12.0972 14.0049 11.801 14.0223 11.6075 13.8503C11.414 13.6784 11.3966 13.3821 11.5686 13.1886L13.9862 10.4688H5.96753C5.70864 10.4688 5.49878 10.2589 5.49878 10C5.49878 9.74113 5.70864 9.53126 5.96753 9.53126H13.9862L11.5686 6.81143C11.3966 6.61794 11.414 6.32165 11.6075 6.14966Z"
+                  fill="white"
+                />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Connectwallet;
diff --git a/dapp/src/components/header.tsx b/dapp/src/components/header.tsx
@@ -0,0 +1,72 @@
+"use client";
+import React from "react";
+import { CiBellOn } from "react-icons/ci";
+import { FaRegQuestionCircle } from "react-icons/fa";
+import { CiSearch } from "react-icons/ci";
+import { IoIosMenu } from "react-icons/io";
+interface HeaderProps {
+  toggleSidebar: () => void;
+}
+const Header: React.FC<HeaderProps> = ({ toggleSidebar }) => {
+  return (
+    <header className="bg-transparent border-b border-[#121428] sticky top-0 z-10">
+      <div className="flex items-center justify-between px-4 py-2 sm:px-6 lg:px-8">
+        {/* Left section: Sidebar toggle and mobile logo */}
+        <div className="flex items-center lg:hidden">
+          <button
+            type="button"
+            className="text-gray-500"
+            onClick={toggleSidebar}
+            aria-label="Open sidebar"
+          >
+            <IoIosMenu />
+          </button>
+        </div>
+
+        {/* Middle section: Search bar */}
+        <div className="flex-1 mx-4 max-w-2xl">
+          <form className="relative">
+            <input
+              type="text"
+              //   placeholder="Search to filter"
+              className="w-full bg-[#121428] border-none  focus:outline-none  rounded-lg  py-2 px-4 text-sm"
+            />
+            <svg
+              className="absolute left-2 top-2.5 w-4 h-4 text-gray-400"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+              ></path>
+            </svg>
+          </form>
+        </div>
+        <div className="flex items-center gap-4">
+          <div className="bg-[#121428] rounded-full p-[6px]">
+            <CiSearch size={24} className="font-extrabold" />
+          </div>
+          <div className="bg-[#121428] rounded-full p-[6px]">
+            <CiBellOn size={24} className="font-extrabold" />
+          </div>
+          <div className="bg-[#121428] rounded-full p-[6px]">
+            <FaRegQuestionCircle size={24} className="font-extrabold" />
+          </div>
+          <button
+            type="button"
+            className="hidden lg:flex items-center px-4 py-2 text-sm font-medium text-white bg-[#121428] rounded-lg hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500"
+          >
+            Connect Wallet
+          </button>
+        </div>
+      </div>
+    </header>
+  );
+};
+
+export default Header;
diff --git a/dapp/src/components/index.tsx b/dapp/src/components/index.tsx
@@ -0,0 +1,4 @@
+export { default as Header } from "./header";
+export { default as Sidebar } from "./sidebar";
+export { default as MyAssets } from "./myassets";
+export { default as ConnectWallet } from "./connectwallet";
diff --git a/...y_assets/components/CollectionSidebar.tsx → ...components/myassets/CollectionSidebar.tsx b/...y_assets/components/CollectionSidebar.tsx → ...components/myassets/CollectionSidebar.tsx
@@ -1,7 +1,7 @@
 // src/app/my_assets/components/CollectionsSidebar.tsx
 import Image from "next/image";
 import React from "react";
-import { Collection } from "../../types";
+import { Collection } from "@/app/types";
 
 interface CollectionsSidebarProps {
   collections: Collection[];
@@ -27,13 +27,24 @@ export const CollectionsSidebar = ({
         value={searchQuery}
         onChange={(e) => setSearchQuery(e.target.value)}
       />
-      <svg className="absolute left-2 top-2.5 w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+      <svg
+        className="absolute left-2 top-2.5 w-4 h-4 text-gray-400"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+        ></path>
       </svg>
     </div>
 
     <div className="space-y-5">
-      {collections.map(collection => (
+      {collections.map((collection) => (
         <div key={collection.id} className="flex items-center gap-3">
           <input
             type="checkbox"
@@ -43,12 +54,18 @@ export const CollectionsSidebar = ({
           />
           <div className="flex items-center gap-2">
             <div className="flex items-center justify-center">
-              <Image src={collection.icon} alt={collection.name} width={32} height={32} className="rounded-full" />
+              <Image
+                src={collection.icon}
+                alt={collection.name}
+                width={32}
+                height={32}
+                className="rounded-full"
+              />
             </div>
             <span className="text-sm">{collection.name}</span>
           </div>
         </div>
       ))}
     </div>
   </div>
-);
+);
diff --git a/.../src/app/my_assets/components/NFTGrid.tsx → dapp/src/components/myassets/NFTGrid.tsx b/.../src/app/my_assets/components/NFTGrid.tsx → dapp/src/components/myassets/NFTGrid.tsx
@@ -1,7 +1,7 @@
 // src/app/my_assets/components/NFTGrid.tsx
 import Image from "next/image";
 import React from "react";
-import { NFT } from "../../types";
+import { NFT } from "@/app/types";
 import Link from "next/link";
 
 interface NFTGridProps {

diff --git a/.../src/app/my_assets/components/NFTList.tsx → dapp/src/components/myassets/NFTList.tsx b/.../src/app/my_assets/components/NFTList.tsx → dapp/src/components/myassets/NFTList.tsx
@@ -1,7 +1,7 @@
 // src/app/my_assets/components/NFTList.tsx
 import Image from "next/image";
 import React from "react";
-import { NFT } from "../../types";
+import { NFT } from "@/app/types";
 import Link from "next/link";
 
 interface NFTListProps {

diff --git a/...c/app/my_assets/components/StatsCards.tsx → dapp/src/components/myassets/StatsCards.tsx b/...c/app/my_assets/components/StatsCards.tsx → dapp/src/components/myassets/StatsCards.tsx
@@ -1,10 +1,10 @@
 // src/app/my_assets/components/StatsCards.tsx
 import Image from "next/image";
 import React from "react";
-import purple from '../../../../public/images/purple.png';
-import pink from '../../../../public/images/pink.png';
-import orange from '../../../../public/images/orange.png';
-import green from '../../../../public/images/green.png';
+import purple from '../../../public/images/purple.png';
+import pink from '../../../public/images/pink.png';
+import orange from '../../../public/images/orange.png';
+import green from '../../../public/images/green.png';
 
 export const StatsCards = () => (
   <div className="grid grid-cols-4 gap-4 mb-8">

diff --git a/...c/app/my_assets/components/ViewToggle.tsx → dapp/src/components/myassets/ViewToggle.tsx b/...c/app/my_assets/components/ViewToggle.tsx → dapp/src/components/myassets/ViewToggle.tsx
diff --git a/dapp/src/app/my_assets/page.tsx → dapp/src/components/myassets/index.tsx b/dapp/src/app/my_assets/page.tsx → dapp/src/components/myassets/index.tsx
@@ -12,14 +12,14 @@ import Avatar3 from "../../../public/images/Avatar3.png";
 import Avatar4 from "../../../public/images/Avatar4.png";
 import Avatar5 from "../../../public/images/Avatar5.png";
 import Avatar6 from "../../../public/images/Avatar6.png";
-import { Collection, NFT } from "../types";
-import { StatsCards } from "./components/StatsCards";
-import { CollectionsSidebar } from "./components/CollectionSidebar";
-import { ViewToggle } from "./components/ViewToggle";
-import { NFTGrid } from "./components/NFTGrid";
-import { NFTList } from "./components/NFTList";
+import { Collection, NFT } from "@/app/types";
+import { StatsCards } from "@/components/myassets/StatsCards";
+import { CollectionsSidebar } from "@/components/myassets/CollectionSidebar";
+import { ViewToggle } from "@/components/myassets/ViewToggle";
+import { NFTGrid } from "@/components/myassets/NFTGrid";
+import { NFTList } from "@/components/myassets/NFTList";
 
-export default function NFTMarketplace() {
+export default function MyAssets() {
   const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
   const [activeTab, setActiveTab] = useState("All");
   const [searchQuery, setSearchQuery] = useState("");
@@ -108,7 +108,7 @@ export default function NFTMarketplace() {
   });
 
   return (
-    <div className="min-h-screen bg-[#06071B] text-white p-4">
+    <div className="min-h-screen  text-white p-4">
       <h1 className="text-xl font-medium mb-6">My Assets</h1>
 
       <StatsCards />