From 44b6cb1b8c779b478b6cf143d32d88baee4c555c Mon Sep 17 00:00:00 2001 From: chiscookeke11 Date: Sun, 1 Jun 2025 16:25:58 +0100 Subject: [PATCH 1/9] update --- dapp/package-lock.json | 288 +----------------- dapp/public/images/CryptoPunk.svg | 18 ++ dapp/public/images/back-icon.svg | 3 + dapp/public/images/triangle.svg | 3 + dapp/public/images/undo.svg | 10 + dapp/public/images/world.svg | 9 + .../component/AcceptOfferComponent.tsx | 123 ++++++++ .../view-listed-asset/component/FilterBar.tsx | 6 +- .../component/ListingInfo.tsx | 40 ++- dapp/src/app/view-listed-asset/page.tsx | 9 +- 10 files changed, 209 insertions(+), 300 deletions(-) create mode 100644 dapp/public/images/CryptoPunk.svg create mode 100644 dapp/public/images/back-icon.svg create mode 100644 dapp/public/images/triangle.svg create mode 100644 dapp/public/images/undo.svg create mode 100644 dapp/public/images/world.svg create mode 100644 dapp/src/app/view-listed-asset/component/AcceptOfferComponent.tsx diff --git a/dapp/package-lock.json b/dapp/package-lock.json index 1974134..9065970 100644 --- a/dapp/package-lock.json +++ b/dapp/package-lock.json @@ -827,35 +827,6 @@ "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", @@ -941,16 +912,6 @@ "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", @@ -1011,33 +972,6 @@ "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", @@ -3080,17 +3014,6 @@ "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", @@ -3306,17 +3229,6 @@ "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", @@ -4041,17 +3953,6 @@ "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", @@ -4293,13 +4194,6 @@ "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", @@ -4509,27 +4403,6 @@ "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", @@ -4791,13 +4664,6 @@ "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", @@ -5076,35 +4942,16 @@ "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", @@ -5248,13 +5095,6 @@ "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", @@ -5405,13 +5245,6 @@ "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", @@ -5639,47 +5472,6 @@ "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", @@ -6114,39 +5906,6 @@ "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", @@ -6167,13 +5926,6 @@ "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", @@ -6288,7 +6040,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==", - "devOptional": true, + "dev": true, "license": "Apache-2.0", "bin": { "tsc": "bin/tsc", @@ -6343,17 +6095,6 @@ "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", @@ -6406,31 +6147,6 @@ "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/public/images/CryptoPunk.svg b/dapp/public/images/CryptoPunk.svg new file mode 100644 index 0000000..bc5bbf5 --- /dev/null +++ b/dapp/public/images/CryptoPunk.svg @@ -0,0 +1,18 @@ + +
 + + + + + + + + + + + + + + + + diff --git a/dapp/public/images/back-icon.svg b/dapp/public/images/back-icon.svg new file mode 100644 index 0000000..24fc3c4 --- /dev/null +++ b/dapp/public/images/back-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/dapp/public/images/triangle.svg b/dapp/public/images/triangle.svg new file mode 100644 index 0000000..eaf3234 --- /dev/null +++ b/dapp/public/images/triangle.svg @@ -0,0 +1,3 @@ + + + diff --git a/dapp/public/images/undo.svg b/dapp/public/images/undo.svg new file mode 100644 index 0000000..69e60b8 --- /dev/null +++ b/dapp/public/images/undo.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/dapp/public/images/world.svg b/dapp/public/images/world.svg new file mode 100644 index 0000000..dd35b54 --- /dev/null +++ b/dapp/public/images/world.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/dapp/src/app/view-listed-asset/component/AcceptOfferComponent.tsx b/dapp/src/app/view-listed-asset/component/AcceptOfferComponent.tsx new file mode 100644 index 0000000..1445f50 --- /dev/null +++ b/dapp/src/app/view-listed-asset/component/AcceptOfferComponent.tsx @@ -0,0 +1,123 @@ +import { X } from "lucide-react"; +import Image from "next/image"; + + + + +export default function AcceptOfferComponent() { + + + + + const optionButtons = [ + { + imageSrc: "/images/world.svg", + path: "#" + }, + { + imageSrc: "/images/triangle.svg", + path: "#" + }, + { + imageSrc: "/images/undo.svg", + path: "#" + }, + ] + + + + const offerSummary = [ + { + title: "Lender", + value: "09b73a42", + }, + { + title: "Currency", + value: "STRK", + }, + { + title: "Acceptable Amount", + value: "0.001 STRK", + }, + { + title: "Loan Duration", + value: "14 days", + }, + { + title: "APR", + value: "8%", + }, + { + title: "Repayment", + value: "0.0001023 STRK", + }, + ] + + + + return ( +
+
+
+
+ +
+

Cryptopunk #1232

+

Cryptopunk VQ (Wrapped ETH)

+
+ + + + + Listed + +
+
+ + + +
+ +
+

Accept Offer

+ +
+ + +
    + + {offerSummary.map((item, index) => ( +
  • {item.title} {item.value}
    • + ))} + +
+ + + + + + +
+ {optionButtons.map((button, index) => ( + + ))} +
+ + + + + +
+
+
+ ) +} \ No newline at end of file diff --git a/dapp/src/app/view-listed-asset/component/FilterBar.tsx b/dapp/src/app/view-listed-asset/component/FilterBar.tsx index edea660..b701d66 100644 --- a/dapp/src/app/view-listed-asset/component/FilterBar.tsx +++ b/dapp/src/app/view-listed-asset/component/FilterBar.tsx @@ -3,9 +3,9 @@ export default function FilterBar() {

filter:

- - - + + +
diff --git a/dapp/src/app/view-listed-asset/component/ListingInfo.tsx b/dapp/src/app/view-listed-asset/component/ListingInfo.tsx index 105fda1..bfc3345 100644 --- a/dapp/src/app/view-listed-asset/component/ListingInfo.tsx +++ b/dapp/src/app/view-listed-asset/component/ListingInfo.tsx @@ -1,24 +1,48 @@ import Image from "next/image"; -import Punk from "@/assets/punk.png"; -import Net from "@/assets/net.png"; -import Reload from "@/assets/reload.png"; -import Angle from "@/assets/angle.png"; + export default function ListingInfo() { + + + const optionButtons = [ + { + imageSrc: "/images/world.svg", + path: "#" + }, + { + imageSrc: "/images/triangle.svg", + path: "#" + }, + { + imageSrc: "/images/undo.svg", + path: "#" + }, + ] + + + + + return (

Listing Information

- network - angle - reload + + {optionButtons.map((button, index) => ( + + )) + + } +
CryptoPunk { return ( -
-
@@ -16,6 +18,7 @@ const Page = () => {
+
); }; From 221d7edd38d27396d89ecf232e3a1431234410c9 Mon Sep 17 00:00:00 2001 From: chiscookeke11 Date: Mon, 2 Jun 2025 05:16:54 +0100 Subject: [PATCH 2/9] update --- .../app/view-listed-asset/component/AcceptOfferComponent.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dapp/src/app/view-listed-asset/component/AcceptOfferComponent.tsx b/dapp/src/app/view-listed-asset/component/AcceptOfferComponent.tsx index 1445f50..d12da50 100644 --- a/dapp/src/app/view-listed-asset/component/AcceptOfferComponent.tsx +++ b/dapp/src/app/view-listed-asset/component/AcceptOfferComponent.tsx @@ -113,7 +113,7 @@ export default function AcceptOfferComponent() {
From 78eca8fc849b5d4e298b47378d607b600ed3b521 Mon Sep 17 00:00:00 2001 From: chiscookeke11 Date: Mon, 2 Jun 2025 09:40:05 +0100 Subject: [PATCH 3/9] updates --- .../component/AcceptOfferComponent.tsx | 139 +++++++++++++----- .../view-listed-asset/component/LoanRow.tsx | 17 ++- .../view-listed-asset/component/LoanTable.tsx | 13 +- dapp/src/app/view-listed-asset/page.tsx | 15 +- 4 files changed, 138 insertions(+), 46 deletions(-) diff --git a/dapp/src/app/view-listed-asset/component/AcceptOfferComponent.tsx b/dapp/src/app/view-listed-asset/component/AcceptOfferComponent.tsx index d12da50..083c3ee 100644 --- a/dapp/src/app/view-listed-asset/component/AcceptOfferComponent.tsx +++ b/dapp/src/app/view-listed-asset/component/AcceptOfferComponent.tsx @@ -1,10 +1,21 @@ +"use client" + + import { X } from "lucide-react"; import Image from "next/image"; +import React, { SetStateAction, useState } from "react"; + + + +interface AcceptOfferComponentProps { + setOpenModal: React.Dispatch> +} -export default function AcceptOfferComponent() { +export default function AcceptOfferComponent({ setOpenModal }: AcceptOfferComponentProps) { + const [currentStep, setCurrentStep] = useState(1); @@ -56,67 +67,117 @@ export default function AcceptOfferComponent() { return ( -
-
-
-
- -
-

Cryptopunk #1232

-

Cryptopunk VQ (Wrapped ETH)

+
+ + +
+ + + + + {/* step 1 */} + <> +
+
+
+ +
+

Cryptopunk #1232

+

Cryptopunk VQ (Wrapped ETH)

+
+ + + + + Listed + +
- - Listed - -
-
+
+
+

Accept Offer

+ +
-
+
    -
    -

    Accept Offer

    - -
    + {offerSummary.map((item, index) => ( +
  • {item.title} {item.value}
    • + ))} +
-
    - {offerSummary.map((item, index) => ( -
  • {item.title} {item.value}
    • - ))} -
+ +
+ {optionButtons.map((button, index) => ( + + ))} +
- -
- {optionButtons.map((button, index) => ( - - ))} + +
+ - + {/* step 2 */} + <> +
+
+

Accept Offer

+ +
+ + +
+
Sign Transaction
+

Please click 'Sign' to open your wallet, confirm the transaction, and begin the loan.

+
+ + + +

By Signing this transaction you Agree to our Terms of Service and Terms of Use.

+ + + +
+ + + + +
+ + +
+ + -
) diff --git a/dapp/src/app/view-listed-asset/component/LoanRow.tsx b/dapp/src/app/view-listed-asset/component/LoanRow.tsx index 9eb829b..82e5af9 100644 --- a/dapp/src/app/view-listed-asset/component/LoanRow.tsx +++ b/dapp/src/app/view-listed-asset/component/LoanRow.tsx @@ -1,4 +1,17 @@ -export default function LoanRow() { +import React from "react"; + + +interface LoanRowProps { + setOpenModal: React.Dispatch> +} + + + +export default function LoanRow({setOpenModal}: LoanRowProps) { + + + + return ( 2,856.41 @@ -8,7 +21,7 @@ export default function LoanRow() { 30 days 2,891.75 - diff --git a/dapp/src/app/view-listed-asset/component/LoanTable.tsx b/dapp/src/app/view-listed-asset/component/LoanTable.tsx index 045a31d..66920a0 100644 --- a/dapp/src/app/view-listed-asset/component/LoanTable.tsx +++ b/dapp/src/app/view-listed-asset/component/LoanTable.tsx @@ -1,7 +1,16 @@ +import React from 'react'; import FilterBar from './FilterBar'; import LoanRow from './LoanRow'; -export default function LoanTable() { + + + +interface LoanTableProps { + setOpenModal: React.Dispatch> +} + + +export default function LoanTable({setOpenModal}: LoanTableProps) { return (
@@ -20,7 +29,7 @@ export default function LoanTable() { {[...Array(6)].map((_, i) => ( - + ))} diff --git a/dapp/src/app/view-listed-asset/page.tsx b/dapp/src/app/view-listed-asset/page.tsx index ab06de8..fadc587 100644 --- a/dapp/src/app/view-listed-asset/page.tsx +++ b/dapp/src/app/view-listed-asset/page.tsx @@ -1,10 +1,19 @@ -import React from 'react'; +"use client" + + + +import React, { useState } from 'react'; import ListingInfo from './component/ListingInfo'; import LoanTable from './component/LoanTable'; import Image from 'next/image'; import AcceptOfferComponent from './component/AcceptOfferComponent'; const Page = () => { +const [openModal, setOpenModal] = useState(false) + + + + return (
- + {openModal && }
); }; From 325ccffc6a851742e09942d4a242dab6bc0fac85 Mon Sep 17 00:00:00 2001 From: chiscookeke11 Date: Mon, 2 Jun 2025 18:59:46 +0100 Subject: [PATCH 4/9] upgraded loan table --- dapp/public/images/Icon.svg | 6 + .../component/AcceptOfferComponent.tsx | 30 +++- .../view-listed-asset/component/FilterBar.tsx | 14 +- .../component/ListingInfo.tsx | 4 +- .../view-listed-asset/component/LoanRow.tsx | 16 +- .../view-listed-asset/component/LoanTable.tsx | 36 +++- dapp/src/app/view-listed-asset/data.ts | 164 ++++++++++++++++++ dapp/src/app/view-listed-asset/page.tsx | 15 +- dapp/src/utils/interface.ts | 11 ++ 9 files changed, 266 insertions(+), 30 deletions(-) create mode 100644 dapp/public/images/Icon.svg create mode 100644 dapp/src/app/view-listed-asset/data.ts create mode 100644 dapp/src/utils/interface.ts diff --git a/dapp/public/images/Icon.svg b/dapp/public/images/Icon.svg new file mode 100644 index 0000000..d87d299 --- /dev/null +++ b/dapp/public/images/Icon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/dapp/src/app/view-listed-asset/component/AcceptOfferComponent.tsx b/dapp/src/app/view-listed-asset/component/AcceptOfferComponent.tsx index 083c3ee..894712e 100644 --- a/dapp/src/app/view-listed-asset/component/AcceptOfferComponent.tsx +++ b/dapp/src/app/view-listed-asset/component/AcceptOfferComponent.tsx @@ -16,6 +16,7 @@ interface AcceptOfferComponentProps { export default function AcceptOfferComponent({ setOpenModal }: AcceptOfferComponentProps) { const [currentStep, setCurrentStep] = useState(1); + const [agreed, setAgreed] = useState(false) @@ -65,9 +66,14 @@ export default function AcceptOfferComponent({ setOpenModal }: AcceptOfferCompon ] + const handleCheck = (e: React.ChangeEvent) => { + setAgreed(e.target.checked); + }; + + return ( -
+
setOpenModal(false)} className=" w-full min-h-screen fixed top-0 left-0 backdrop-blur-md bg-white/10 px-5 py-10" >
@@ -77,7 +83,10 @@ export default function AcceptOfferComponent({ setOpenModal }: AcceptOfferCompon {/* step 1 */} <> -
+
{ + e.stopPropagation() + } } + className={`w-full flex-col md:flex-row max-w-[900px] py-3 px-6 bg-[#121428] h-full md:max-h-[512px] flex items-stretch justify-between rounded-2xl gap-6 absolute top-[50%] left-[50%] translate-y-[-50%] transform transition-all duration-200 ${currentStep === 1 ? "translate-x-[-50%] " : "translate-x-[-500%] "} `} >
@@ -115,7 +124,7 @@ export default function AcceptOfferComponent({ setOpenModal }: AcceptOfferCompon