diff --git a/dapp/package-lock.json b/dapp/package-lock.json index 7e14661..1974134 100644 --- a/dapp/package-lock.json +++ b/dapp/package-lock.json @@ -13,7 +13,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", @@ -826,6 +827,35 @@ "node": ">= 10" } }, + "node_modules/@noble/curves": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/@noble/curves/-/curves-1.7.0.tgz", + "integrity": "sha512-UTMhXK9SeDhFJVrHeUJ5uZlI6ajXg10O6Ddocf9S6GjbSBVZsJo88HzKwXznNfGpMTRDyJkqMjNDPYgf0qFWnw==", + "license": "MIT", + "peer": true, + "dependencies": { + "@noble/hashes": "1.6.0" + }, + "engines": { + "node": "^14.21.3 || >=16" + }, + "funding": { + "url": "https://paulmillr.com/funding/" + } + }, + "node_modules/@noble/curves/node_modules/@noble/hashes": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.6.0.tgz", + "integrity": "sha512-YUULf0Uk4/mAA89w+k3+yUYh6NrEvxZa5T6SY3wlMvE2chHkxFUUIDI8/XW1QSC357iA5pSnqt7XEhvFOqmDyQ==", + "license": "MIT", + "peer": true, + "engines": { + "node": "^14.21.3 || >=16" + }, + "funding": { + "url": "https://paulmillr.com/funding/" + } + }, "node_modules/@noble/hashes": { "version": "1.7.1", "resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.7.1.tgz", @@ -911,6 +941,16 @@ "dev": true, "license": "MIT" }, + "node_modules/@scure/base": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@scure/base/-/base-1.2.1.tgz", + "integrity": "sha512-DGmGtC8Tt63J5GfHgfl5CuAXh96VF/LD8K9Hr/Gv0J2lAoRGlPOMpqMpMbCTOoOJMZCk2Xt+DskdDyn6dEFdzQ==", + "license": "MIT", + "peer": true, + "funding": { + "url": "https://paulmillr.com/funding/" + } + }, "node_modules/@scure/bip32": { "version": "1.6.2", "resolved": "https://registry.npmjs.org/@scure/bip32/-/bip32-1.6.2.tgz", @@ -971,6 +1011,33 @@ "url": "https://paulmillr.com/funding/" } }, + "node_modules/@scure/starknet": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@scure/starknet/-/starknet-1.1.0.tgz", + "integrity": "sha512-83g3M6Ix2qRsPN4wqLDqiRZ2GBNbjVWfboJE/9UjfG+MHr6oDSu/CWgy8hsBSJejr09DkkL+l0Ze4KVrlCIdtQ==", + "license": "MIT", + "peer": true, + "dependencies": { + "@noble/curves": "~1.7.0", + "@noble/hashes": "~1.6.0" + }, + "funding": { + "url": "https://paulmillr.com/funding/" + } + }, + "node_modules/@scure/starknet/node_modules/@noble/hashes": { + "version": "1.6.1", + "resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.6.1.tgz", + "integrity": "sha512-pq5D8h10hHBjyqX+cfBm0i8JUXJ0UhczFc4r74zbuT9XgewFo2E3J1cOaGtdZynILNmQ685YWGzGE1Zv6io50w==", + "license": "MIT", + "peer": true, + "engines": { + "node": "^14.21.3 || >=16" + }, + "funding": { + "url": "https://paulmillr.com/funding/" + } + }, "node_modules/@starknet-io/types-js": { "version": "0.7.10", "resolved": "https://registry.npmjs.org/@starknet-io/types-js/-/types-js-0.7.10.tgz", @@ -3013,6 +3080,17 @@ "reusify": "^1.0.4" } }, + "node_modules/fetch-cookie": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/fetch-cookie/-/fetch-cookie-3.0.1.tgz", + "integrity": "sha512-ZGXe8Y5Z/1FWqQ9q/CrJhkUD73DyBU9VF0hBQmEO/wPHe4A9PKTjplFDLeFX8aOsYypZUcX5Ji/eByn3VCVO3Q==", + "license": "Unlicense", + "peer": true, + "dependencies": { + "set-cookie-parser": "^2.4.8", + "tough-cookie": "^4.0.0" + } + }, "node_modules/file-entry-cache": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz", @@ -3228,6 +3306,17 @@ "node": ">= 0.4" } }, + "node_modules/get-starknet-core": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/get-starknet-core/-/get-starknet-core-4.0.0.tgz", + "integrity": "sha512-6pLmidQZkC3wZsrHY99grQHoGpuuXqkbSP65F8ov1/JsEI8DDLkhsAuLCKFzNOK56cJp+f1bWWfTJ57e9r5eqQ==", + "deprecated": "Package no longer supported. Please use @starknet-io/get-starknet-core", + "license": "MIT", + "peer": true, + "dependencies": { + "@starknet-io/types-js": "^0.7.7" + } + }, "node_modules/get-symbol-description": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.1.0.tgz", @@ -3952,6 +4041,17 @@ "dev": true, "license": "ISC" }, + "node_modules/isomorphic-fetch": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-3.0.0.tgz", + "integrity": "sha512-qvUtwJ3j6qwsF3jLxkZ72qCgjMysPzDfeV240JHiGZsANBYd+EEuu35v7dfrJ9Up0Ak07D7GGSkGhCHTqg/5wA==", + "license": "MIT", + "peer": true, + "dependencies": { + "node-fetch": "^2.6.1", + "whatwg-fetch": "^3.4.1" + } + }, "node_modules/isows": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/isows/-/isows-1.0.6.tgz", @@ -4193,6 +4293,13 @@ "loose-envify": "cli.js" } }, + "node_modules/lossless-json": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/lossless-json/-/lossless-json-4.0.2.tgz", + "integrity": "sha512-+z0EaLi2UcWi8MZRxA5iTb6m4Ys4E80uftGY+yG5KNFJb5EceQXOhdW/pWJZ8m97s26u7yZZAYMcKWNztSZssA==", + "license": "MIT", + "peer": true + }, "node_modules/lru-cache": { "version": "10.4.3", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz", @@ -4402,6 +4509,27 @@ "node": "^10 || ^12 || >=14" } }, + "node_modules/node-fetch": { + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz", + "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==", + "license": "MIT", + "peer": true, + "dependencies": { + "whatwg-url": "^5.0.0" + }, + "engines": { + "node": "4.x || >=6.0.0" + }, + "peerDependencies": { + "encoding": "^0.1.0" + }, + "peerDependenciesMeta": { + "encoding": { + "optional": true + } + } + }, "node_modules/normalize-path": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", @@ -4663,6 +4791,13 @@ "dev": true, "license": "BlueOak-1.0.0" }, + "node_modules/pako": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/pako/-/pako-2.1.0.tgz", + "integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==", + "license": "(MIT AND Zlib)", + "peer": true + }, "node_modules/parent-module": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", @@ -4941,16 +5076,35 @@ "react-is": "^16.13.1" } }, + "node_modules/psl": { + "version": "1.15.0", + "resolved": "https://registry.npmjs.org/psl/-/psl-1.15.0.tgz", + "integrity": "sha512-JZd3gMVBAVQkSs6HdNZo9Sdo0LNcQeMNP3CozBJb3JYC/QUYZTnKxP+f8oWRX4rHP5EurWxqAHTSwUCjlNKa1w==", + "license": "MIT", + "peer": true, + "dependencies": { + "punycode": "^2.3.1" + }, + "funding": { + "url": "https://github.com/sponsors/lupomontero" + } + }, "node_modules/punycode": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz", "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==", - "dev": true, "license": "MIT", "engines": { "node": ">=6" } }, + "node_modules/querystringify": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz", + "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==", + "license": "MIT", + "peer": true + }, "node_modules/queue-microtask": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", @@ -4993,6 +5147,15 @@ "react": "^19.0.0" } }, + "node_modules/react-icons": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz", + "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==", + "license": "MIT", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", @@ -5085,6 +5248,13 @@ "node": ">=0.10.0" } }, + "node_modules/requires-port": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz", + "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==", + "license": "MIT", + "peer": true + }, "node_modules/resolve": { "version": "1.22.10", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz", @@ -5235,6 +5405,13 @@ "node": ">=10" } }, + "node_modules/set-cookie-parser": { + "version": "2.7.1", + "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz", + "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==", + "license": "MIT", + "peer": true + }, "node_modules/set-function-length": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz", @@ -5462,6 +5639,47 @@ "dev": true, "license": "MIT" }, + "node_modules/starknet": { + "version": "6.24.1", + "resolved": "https://registry.npmjs.org/starknet/-/starknet-6.24.1.tgz", + "integrity": "sha512-g7tiCt73berhcNi41otlN3T3kxZnIvZhMi8WdC21Y6GC6zoQgbI2z1t7JAZF9c4xZiomlanwVnurcpyfEdyMpg==", + "license": "MIT", + "peer": true, + "dependencies": { + "@noble/curves": "1.7.0", + "@noble/hashes": "1.6.0", + "@scure/base": "1.2.1", + "@scure/starknet": "1.1.0", + "abi-wan-kanabi": "^2.2.3", + "fetch-cookie": "~3.0.0", + "isomorphic-fetch": "~3.0.0", + "lossless-json": "^4.0.1", + "pako": "^2.0.4", + "starknet-types-07": "npm:@starknet-io/types-js@^0.7.10", + "ts-mixer": "^6.0.3" + } + }, + "node_modules/starknet-types-07": { + "name": "@starknet-io/types-js", + "version": "0.7.10", + "resolved": "https://registry.npmjs.org/@starknet-io/types-js/-/types-js-0.7.10.tgz", + "integrity": "sha512-1VtCqX4AHWJlRRSYGSn+4X1mqolI1Tdq62IwzoU2vUuEE72S1OlEeGhpvd6XsdqXcfHmVzYfj8k1XtKBQqwo9w==", + "license": "MIT", + "peer": true + }, + "node_modules/starknet/node_modules/@noble/hashes": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.6.0.tgz", + "integrity": "sha512-YUULf0Uk4/mAA89w+k3+yUYh6NrEvxZa5T6SY3wlMvE2chHkxFUUIDI8/XW1QSC357iA5pSnqt7XEhvFOqmDyQ==", + "license": "MIT", + "peer": true, + "engines": { + "node": "^14.21.3 || >=16" + }, + "funding": { + "url": "https://paulmillr.com/funding/" + } + }, "node_modules/streamsearch": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz", @@ -5896,6 +6114,39 @@ "node": ">=8.0" } }, + "node_modules/tough-cookie": { + "version": "4.1.4", + "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.4.tgz", + "integrity": "sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==", + "license": "BSD-3-Clause", + "peer": true, + "dependencies": { + "psl": "^1.1.33", + "punycode": "^2.1.1", + "universalify": "^0.2.0", + "url-parse": "^1.5.3" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/tough-cookie/node_modules/universalify": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz", + "integrity": "sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==", + "license": "MIT", + "peer": true, + "engines": { + "node": ">= 4.0.0" + } + }, + "node_modules/tr46": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz", + "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==", + "license": "MIT", + "peer": true + }, "node_modules/ts-api-utils": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.0.0.tgz", @@ -5916,6 +6167,13 @@ "dev": true, "license": "Apache-2.0" }, + "node_modules/ts-mixer": { + "version": "6.0.4", + "resolved": "https://registry.npmjs.org/ts-mixer/-/ts-mixer-6.0.4.tgz", + "integrity": "sha512-ufKpbmrugz5Aou4wcr5Wc1UUFWOLhq+Fm6qa6P0w0K5Qw2yhaUoiWszhCVuNQyNwrlGiscHOmqYoAox1PtvgjA==", + "license": "MIT", + "peer": true + }, "node_modules/tsconfig-paths": { "version": "3.15.0", "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz", @@ -6030,7 +6288,7 @@ "version": "5.7.3", "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.3.tgz", "integrity": "sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==", - "dev": true, + "devOptional": true, "license": "Apache-2.0", "bin": { "tsc": "bin/tsc", @@ -6085,6 +6343,17 @@ "punycode": "^2.1.0" } }, + "node_modules/url-parse": { + "version": "1.5.10", + "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz", + "integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==", + "license": "MIT", + "peer": true, + "dependencies": { + "querystringify": "^2.1.1", + "requires-port": "^1.0.0" + } + }, "node_modules/util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", @@ -6137,6 +6406,31 @@ "url": "https://paulmillr.com/funding/" } }, + "node_modules/webidl-conversions": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz", + "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==", + "license": "BSD-2-Clause", + "peer": true + }, + "node_modules/whatwg-fetch": { + "version": "3.6.20", + "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.6.20.tgz", + "integrity": "sha512-EqhiFU6daOA8kpjOWTL0olhVOF3i7OrFzSYiGsEMB8GcXS+RrzauAERX65xMeNWVqxA6HXH2m69Z9LaKKdisfg==", + "license": "MIT", + "peer": true + }, + "node_modules/whatwg-url": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz", + "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==", + "license": "MIT", + "peer": true, + "dependencies": { + "tr46": "~0.0.3", + "webidl-conversions": "^3.0.0" + } + }, "node_modules/which": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", diff --git a/dapp/package.json b/dapp/package.json index dc12eae..de66fb4 100644 --- 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 new file mode 100644 index 0000000..18c0417 Binary files /dev/null and b/dapp/public/connectwallet_bg.jpg differ diff --git a/dapp/public/trajectfilogo.svg b/dapp/public/trajectfilogo.svg new file mode 100644 index 0000000..05c1e50 --- /dev/null +++ b/dapp/public/trajectfilogo.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/dapp/src/app/globals.css b/dapp/src/app/globals.css index 6b717ad..0c78e34 100644 --- 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 index f7fa87e..c0ba8d9 100644 --- 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 ( - {children} +
+ {/* Mobile sidebar overlay */} + {sidebarOpen && ( +
setSidebarOpen(false)} + /> + )} + + {/* Sidebar */} + + + {/* Main content */} +
+
+ +
+
{children}
+
+
+
); diff --git a/dapp/src/app/page.tsx b/dapp/src/app/page.tsx index 205f025..43283e8 100644 --- 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 ( -
- ); -} - -export default Home; \ No newline at end of file + const [isSidebarOpen, setIsSidebarOpen] = useState(false); + const toggleSidebar = () => { + setIsSidebarOpen(!isSidebarOpen); + }; + return ( +
+ + {isSidebarOpen ? : } +
+ ); +}; + +export default Home; diff --git a/dapp/src/components/connectwallet.tsx b/dapp/src/components/connectwallet.tsx new file mode 100644 index 0000000..dfe7a8a --- /dev/null +++ b/dapp/src/components/connectwallet.tsx @@ -0,0 +1,53 @@ +import React from "react"; + +const Connectwallet = () => { + return ( +
+

My Assets

+
+
+ +
+
+

Connect Your Wallet

+

+ To view your assets, please connect your wallet. +

+ +
+
+
+
+ ); +}; + +export default Connectwallet; diff --git a/dapp/src/components/header.tsx b/dapp/src/components/header.tsx new file mode 100644 index 0000000..c8e73dc --- /dev/null +++ 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 = ({ toggleSidebar }) => { + return ( +
+
+ {/* Left section: Sidebar toggle and mobile logo */} +
+ +
+ + {/* Middle section: Search bar */} +
+
+ + + + +
+
+
+
+ +
+
+ +
+
+ +
+ +
+
+
+ ); +}; + +export default Header; diff --git a/dapp/src/components/index.tsx b/dapp/src/components/index.tsx new file mode 100644 index 0000000..7f90f33 --- /dev/null +++ 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"; \ No newline at end of file diff --git a/dapp/src/app/my_assets/components/CollectionSidebar.tsx b/dapp/src/components/myassets/CollectionSidebar.tsx similarity index 67% rename from dapp/src/app/my_assets/components/CollectionSidebar.tsx rename to dapp/src/components/myassets/CollectionSidebar.tsx index abf7610..92ff639 100644 --- a/dapp/src/app/my_assets/components/CollectionSidebar.tsx +++ b/dapp/src/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)} /> - - + +
- {collections.map(collection => ( + {collections.map((collection) => (
- {collection.name} + {collection.name}
{collection.name}
@@ -51,4 +68,4 @@ export const CollectionsSidebar = ({ ))}
-); \ No newline at end of file +); diff --git a/dapp/src/app/my_assets/components/NFTGrid.tsx b/dapp/src/components/myassets/NFTGrid.tsx similarity index 98% rename from dapp/src/app/my_assets/components/NFTGrid.tsx rename to dapp/src/components/myassets/NFTGrid.tsx index e5049c3..ba19054 100644 --- a/dapp/src/app/my_assets/components/NFTGrid.tsx +++ b/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/dapp/src/app/my_assets/components/NFTList.tsx b/dapp/src/components/myassets/NFTList.tsx similarity index 97% rename from dapp/src/app/my_assets/components/NFTList.tsx rename to dapp/src/components/myassets/NFTList.tsx index f0d1afb..babc193 100644 --- a/dapp/src/app/my_assets/components/NFTList.tsx +++ b/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/dapp/src/app/my_assets/components/StatsCards.tsx b/dapp/src/components/myassets/StatsCards.tsx similarity index 87% rename from dapp/src/app/my_assets/components/StatsCards.tsx rename to dapp/src/components/myassets/StatsCards.tsx index c9bbf53..7ca83bd 100644 --- a/dapp/src/app/my_assets/components/StatsCards.tsx +++ b/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 = () => (
diff --git a/dapp/src/app/my_assets/components/ViewToggle.tsx b/dapp/src/components/myassets/ViewToggle.tsx similarity index 100% rename from dapp/src/app/my_assets/components/ViewToggle.tsx rename to dapp/src/components/myassets/ViewToggle.tsx diff --git a/dapp/src/app/my_assets/page.tsx b/dapp/src/components/myassets/index.tsx similarity index 91% rename from dapp/src/app/my_assets/page.tsx rename to dapp/src/components/myassets/index.tsx index 7e5290d..254686f 100644 --- a/dapp/src/app/my_assets/page.tsx +++ b/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 ( -
+

My Assets

diff --git a/dapp/src/components/sidebar.tsx b/dapp/src/components/sidebar.tsx new file mode 100644 index 0000000..61319f0 --- /dev/null +++ b/dapp/src/components/sidebar.tsx @@ -0,0 +1,98 @@ +"use client"; +import React from "react"; +import { usePathname } from "next/navigation"; +import Link from "next/link"; +import { IoIosClose } from "react-icons/io"; +import { MdDashboard } from "react-icons/md"; + +interface NavItem { + name: string; + icon: React.ReactNode; + path: string; +} + +interface SidebarProps { + open: boolean; + setOpen: (open: boolean) => void; +} +const Sidebar: React.FC = ({ open, setOpen }) => { + const location = usePathname(); + const navigation: NavItem[] = [ + { name: "My Assets", icon: , path: "/" }, + { name: "Get Loan", icon: , path: "/get_loan" }, + ]; + + return ( +
+
+ {/* Sidebar header */} +
+ + Logo + + + +
+ +
+ + + + +
+ {/* Navigation */} + +
+
+ ); +}; + +export default Sidebar;