Implement Dashboard with Token and NFT Vaults components.

frontend/app/dapp/layout.tsx

@@ -4,16 +4,17 @@ import { ReactNode } from 'react'
 import { useState, useEffect } from 'react'
 import Sidebar from '../dapp/Sidebar'
 import Navbar from './Navbar'
-import Dashboard from '@/public/Images/Dash.png'
-import Trade from '@/public/Images/Trade.png'
-import Transactions from '@/public/Images/Transactions.png'
-import Stake from '@/public/Images/Stake.png'
-import Treasury from '@/public/Images/Treasury.png'
-import Payments from '@/public/Images/Payments.png'
-import Apps from '@/public/Images/Apps.png'
-import Settings from '@/public/Images/Settings.png'
-import Support from '@/public/Images/Support.png'
-import { getSelectedPage, NavItem } from '@/app/dapp/navigation'
+import Dashboard from 'public/Images/Dash.png'
+import Trade from 'public/Images/Trade.png'
+import Transactions from 'public/Images/Transactions.png'
+import Token_NFTVaults from 'components/Token_NFTVaults'
+import Stake from 'public/Images/Stake.png'
+import Treasury from 'public/Images/Treasury.png'
+import Payments from 'public/Images/Payments.png'
+import Apps from 'public/Images/Apps.png'
+import Settings from 'public/Images/Settings.png'
+import Support from 'public/Images/Support.png'
+import { getSelectedPage, NavItem } from 'app/dapp/navigation'
 import { usePathname } from 'next/navigation'
 
 interface DappLayoutProps {
@@ -67,17 +68,20 @@ export default function DappLayout({ children }: DappLayoutProps) {
 
   const pathname = usePathname()
   const selectedPage = getSelectedPage(pathname)
-  return (
-    <div className="flex h-screen">
-      <Sidebar navItems={navItems} selectedPage={selectedPage} />
-      <div
-        className={`flex-1 flex flex-col transition-all duration-300 ${
-          sidebarExpanded ? 'ml-64' : 'ml-16'
-        }`}
-      >
-        <Navbar title={selectedPage} />
-        <main className="flex-1 overflow-auto p-4">{children}</main>
-      </div>
+  return (  
+    <div>
+      <Token_NFTVaults /> 
+      <div className="flex h-screen">
+        <Sidebar navItems={navItems} selectedPage={selectedPage} />
+        <div
+          className={`flex-1 flex flex-col transition-all duration-300 ${
+            sidebarExpanded ? 'ml-64' : 'ml-16'
+          }`}
+        >
+          <Navbar title={selectedPage} />
+          <main className="flex-1 overflow-auto p-4">{children}</main>
+        </div>  
+      </div>  
     </div>
   )
 }

frontend/app/page.tsx

@@ -1,4 +1,4 @@
-import Welcome from '../components/welcome'
+import Welcome from '@/components/welcome'
 
 export default function Home() {
   return (

frontend/components/NFTVaults.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import Image from "next/image"; 
+
+// Import images
+import nft1 from "../assets/3d-rendering-holographic-layering.png";
+import nft2 from "../assets/beautiful-vintage-collage-composition.png";
+import nft3 from "../assets/3d-view-adorable-pet-cat.png";
+import nft4 from "../assets/7705305.png";
+import nft5 from "../assets/2631268 (1).png";
+import nft6 from "../assets/9121999.png";
+import nft7 from "../assets/5086933.png";
+import nft8 from "../assets/6398924.png";
+
+import { StaticImageData } from "next/image"; // Import StaticImageData
+
+interface NFTCardProps {
+  image: StaticImageData; 
+  username: string;
+  price: string;
+}
+
+
+const NFTCard: React.FC<NFTCardProps> = ({ image, username, price }) => {
+  return (
+    <div className="bg-[#272729]  rounded-sm shadow-lg">
+      <Image src={image} alt="NFT" width={300} height={200} className="object-cover " />
+      <div className="flex justify-between p-3 items-center mt-3">
+        <span className="text-white text-sm">{username}</span>
+        <span className="text-gray-300">${price}</span>
+      </div>
+    </div>
+  );
+};
+
+const NFTVaults: React.FC = () => {
+  const nfts = [
+    { image: nft1, username: "Jackfackson24", price: "23" },
+    { image: nft2, username: "yhahhiHIHI", price: "25" },
+    { image: nft3, username: "Unami45", price: "30" },
+    { image: nft4, username: "Yamalilfon", price: "50" },
+    { image: nft5, username: "Jackfackson24", price: "45" },
+    { image: nft6, username: "Jackfackson24", price: "40" },
+    { image: nft7, username: "Jackfackson24", price: "10" },
+    { image: nft8, username: "Jackfackson24", price: "20" },
+  ];
+
+  return (
+    <div className="bg-black min-h-screen p-10">
+      <div className="grid grid-cols-4 gap-6">
+        {nfts.map((nft, index) => (
+          <NFTCard key={index} {...nft} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default NFTVaults;

frontend/components/TokenVaults.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import Image from 'next/image';
+import Logo from '../assets/Coin Facecard-2.png';
+
+const TokenVaults: React.FC = () => {
+  const data = [
+    { coin: "STRK", price: 0.46, balance: 5, value: 460.43, size: "100%" },
+    { coin: "STRK", price: 0.46, balance: 2, value: 700.20, size: "25%" },
+    { coin: "STRK", price: 0.46, balance: 3, value: 527.00, size: "50%" },
+  ];
+
+  return (
+    <div className="overflow-x-auto p-4 bg-black text-white">
+      <table className="min-w-full">
+        <thead>
+          <tr className=" text-[#8E9BAE]">
+            <th className="py-2 px-4 text-left">Coin</th>
+            <th className="py-2 px-4 text-left">Price</th>
+            <th className="py-2 px-4 text-left">Balance</th>
+            <th className="py-2 px-4 text-left">Value</th>
+            <th className="py-2 px-4 text-left">Size</th>
+          </tr>
+        </thead>
+        <tbody>
+          {data.map((item, index) => (
+            <tr key={index}>
+              <td className="py-2 px-4 flex items-center">
+                <Image src={Logo} alt="New Icon" className="w-5 h-5 mr-2" />
+                {item.coin}
+              </td>
+              <td className="py-2 px-4">${item.price.toFixed(2)}</td>
+              <td className="py-2 px-4">{item.balance}</td>
+              <td className="py-2 px-4">${item.value.toFixed(2)}</td>
+              <td className="py-2 px-4 text-center">
+                <div className="relative w-24">
+                  <div className="absolute -top-5 left-1/2 transform -translate-x-1/2 text-sm  font-semibold">
+                    {item.size}
+                  </div>
+                  <div className="bg-gray-700 h-2 rounded relative">
+                    <div
+                      className="absolute top-0 left-0 h-2 bg-white rounded"
+                      style={{ width: item.size }}
+                    ></div>
+                  </div>
+                </div>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default TokenVaults;

frontend/components/Token_NFTVaults.tsx

@@ -0,0 +1,21 @@
+import React, { useState } from "react";
+import TokenVaults from "./TokenVaults"; 
+import NFTVaults from "./NFTVaults"; 
+const Token_NFTVaults: React.FC = () => {
+  const [activeComponent, setActiveComponent] = useState<"tokens" | "nfts">("tokens");
+
+  return (
+    <div>
+      <nav className="flex gap-4 text-white hover-gray-300 mt-2">
+        <button onClick={() => setActiveComponent("tokens")}>Tokens</button>
+        <button onClick={() => setActiveComponent("nfts")}>NFTVaults</button>
+      </nav>
+      <div>
+        {activeComponent === "tokens" && <TokenVaults />}
+        {activeComponent === "nfts" && <NFTVaults />}
+      </div>
+    </div>
+  );
+};
+
+export default Token_NFTVaults;