diff --git a/package-lock.json b/package-lock.json index 08020fe83..67c95ac77 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,7 @@ "dependencies": { "@apollo/client": "^3.8.1", "@bosonprotocol/chat-sdk": "^1.3.1-alpha.9", - "@bosonprotocol/react-kit": "^0.32.0", + "@bosonprotocol/react-kit": "^0.34.0-alpha.20", "@davatar/react": "^1.10.4", "@ethersproject/address": "^5.6.1", "@ethersproject/units": "^5.7.0", @@ -2488,11 +2488,11 @@ } }, "node_modules/@bosonprotocol/common": { - "version": "1.28.0", - "resolved": "https://registry.npmjs.org/@bosonprotocol/common/-/common-1.28.0.tgz", - "integrity": "sha512-/YS9DIHLFlDa9khkwKSvvG69kZAw5NqZxdJALkfxD61C9PTp4awvDYo6peNMyXwNCK5lJ+KQ+TisEmiFm7Dn/Q==", + "version": "1.29.0-alpha.8", + "resolved": "https://registry.npmjs.org/@bosonprotocol/common/-/common-1.29.0-alpha.8.tgz", + "integrity": "sha512-k2CX7D/NfYi/7a8wERirokPhXzWhnJFSzdjfW3VmoxnhgvuIOvW1jQ9e/UPrPfJhxaqEI05OLVdG4JiJcu5w4Q==", "dependencies": { - "@bosonprotocol/metadata": "^1.16.1", + "@bosonprotocol/metadata": "^1.16.2", "@ethersproject/abi": "^5.5.0", "@ethersproject/address": "^5.5.0", "@ethersproject/bignumber": "^5.5.0", @@ -2502,11 +2502,11 @@ } }, "node_modules/@bosonprotocol/core-sdk": { - "version": "1.40.4", - "resolved": "https://registry.npmjs.org/@bosonprotocol/core-sdk/-/core-sdk-1.40.4.tgz", - "integrity": "sha512-3sWTM7TEGI0DBLuOwnzfDgJOlkOrBOo9DhSzXw6X7f1GTn3WeMVlBgCv1CBIpV721SOdQhhVZ1yliQM5Ff6m6g==", + "version": "1.41.0-alpha.22", + "resolved": "https://registry.npmjs.org/@bosonprotocol/core-sdk/-/core-sdk-1.41.0-alpha.22.tgz", + "integrity": "sha512-IyZT0Totig9Yyvww79r/suKQ7KiM8wW1QDuzH7OsM3GQRO6gOMEqfGyYRarevwPnb+yLFymst0mAN5hCSbZ/JA==", "dependencies": { - "@bosonprotocol/common": "^1.28.0", + "@bosonprotocol/common": "^1.29.0-alpha.8", "@ethersproject/abi": "^5.5.0", "@ethersproject/address": "^5.5.0", "@ethersproject/bignumber": "^5.5.0", @@ -2517,48 +2517,56 @@ "graphql": "^16.5.0", "graphql-request": "^4.3.0", "mustache": "^4.2.0", - "opensea-js": "^7.1.5", + "opensea-js": "^7.1.13", "schema-to-yup": "^1.11.11", "yup": "^0.32.11" } }, "node_modules/@bosonprotocol/ethers-sdk": { - "version": "1.14.4", - "resolved": "https://registry.npmjs.org/@bosonprotocol/ethers-sdk/-/ethers-sdk-1.14.4.tgz", - "integrity": "sha512-cvXJzHJwEjGGjmxeXS0q7Qe6KbfAtl3RLFh3Y696EFXpjGSVKeYS1VkAwA9p7VLe2qX9JSh6tdfLgkosx7HiLA==", + "version": "1.15.0-alpha.8", + "resolved": "https://registry.npmjs.org/@bosonprotocol/ethers-sdk/-/ethers-sdk-1.15.0-alpha.8.tgz", + "integrity": "sha512-ySi5/RKKN2baTBntO3kXtkhWtB39WULcUaX64tyAm+M0wZwx3eNYLxqU4jjzOXFgW9Skjovs/X6yJB8YNcpE2w==", "dependencies": { - "@bosonprotocol/common": "^1.28.0" + "@bosonprotocol/common": "^1.29.0-alpha.8" }, "peerDependencies": { "ethers": "^5.5.0" } }, "node_modules/@bosonprotocol/ipfs-storage": { - "version": "1.11.3", - "license": "Apache-2.0", + "version": "1.12.0-alpha.20", + "resolved": "https://registry.npmjs.org/@bosonprotocol/ipfs-storage/-/ipfs-storage-1.12.0-alpha.20.tgz", + "integrity": "sha512-W+apiSphIhYA25NW6lUhbaAmrkTvaQmmLEgeX2ls9411todpHx4ikco56/ps3+eptYHho3a3yPjpUn1H5w+n+Q==", "dependencies": { - "@bosonprotocol/metadata": "^1.16.1", + "@bosonprotocol/metadata-storage": "^1.0.1", "ipfs-http-client": "^56.0.1", "multiformats": "^9.6.4", "uint8arrays": "^3.0.0" } }, "node_modules/@bosonprotocol/metadata": { - "version": "1.16.1", - "license": "Apache-2.0", + "version": "1.16.2", + "resolved": "https://registry.npmjs.org/@bosonprotocol/metadata/-/metadata-1.16.2.tgz", + "integrity": "sha512-yA99IO+BHvc3AkCba/fsrrXr3npb7zxwPvz8PUJ9qrKd7Gid95hE5V5sG9tpbeNc/UuErQ3wX8G5pmitVNlaIQ==", "dependencies": { + "@bosonprotocol/metadata-storage": "^1.0.1", "schema-to-yup": "^1.11.11" } }, + "node_modules/@bosonprotocol/metadata-storage": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@bosonprotocol/metadata-storage/-/metadata-storage-1.0.1.tgz", + "integrity": "sha512-f2W2SQAvY5IKD6L9JwaiNye7gGRIIPd/HOB0i+otWLzMPBlwQtbN4JeWSuKeJvuaqu8tyMy7CHzN8EkhrJDB+A==" + }, "node_modules/@bosonprotocol/react-kit": { - "version": "0.32.0", - "resolved": "https://registry.npmjs.org/@bosonprotocol/react-kit/-/react-kit-0.32.0.tgz", - "integrity": "sha512-ePdqqrZuzw31DFfiTyaouBTU0joBO9lrGUpes2/qzpLOVkM9kFmXDgwx4jEETkUTps2ureTZ1PwFF7PrnmvDXQ==", + "version": "0.34.0-alpha.20", + "resolved": "https://registry.npmjs.org/@bosonprotocol/react-kit/-/react-kit-0.34.0-alpha.20.tgz", + "integrity": "sha512-5ofqFjWVATMS0zA63eX9GOk5sSNy0tAnLGf+YLQEkAo+RZngP+nVB7ZHCtxVWDKRmV6Gy2sJrUh/w6HDfenMTw==", "dependencies": { "@bosonprotocol/chat-sdk": "^1.3.1-alpha.9", - "@bosonprotocol/core-sdk": "^1.40.4", - "@bosonprotocol/ethers-sdk": "^1.14.4", - "@bosonprotocol/ipfs-storage": "^1.11.3", + "@bosonprotocol/core-sdk": "^1.41.0-alpha.22", + "@bosonprotocol/ethers-sdk": "^1.15.0-alpha.8", + "@bosonprotocol/ipfs-storage": "^1.12.0-alpha.20", "@davatar/react": "1.11.1", "@ethersproject/units": "5.6.0", "@glidejs/glide": "3.6.0", @@ -6463,7 +6471,8 @@ }, "node_modules/@ipld/dag-cbor": { "version": "7.0.3", - "license": "(Apache-2.0 AND MIT)", + "resolved": "https://registry.npmjs.org/@ipld/dag-cbor/-/dag-cbor-7.0.3.tgz", + "integrity": "sha512-1VVh2huHsuohdXC1bGJNE8WR72slZ9XE2T3wbBBq31dm7ZBatmKLLxrB+XAqafxfRFjv08RZmj/W/ZqaM13AuA==", "dependencies": { "cborg": "^1.6.0", "multiformats": "^9.5.4" @@ -6471,7 +6480,8 @@ }, "node_modules/@ipld/dag-json": { "version": "8.0.11", - "license": "(Apache-2.0 AND MIT)", + "resolved": "https://registry.npmjs.org/@ipld/dag-json/-/dag-json-8.0.11.tgz", + "integrity": "sha512-Pea7JXeYHTWXRTIhBqBlhw7G53PJ7yta3G/sizGEZyzdeEwhZRr0od5IQ0r2ZxOt1Do+2czddjeEPp+YTxDwCA==", "dependencies": { "cborg": "^1.5.4", "multiformats": "^9.5.4" @@ -6479,7 +6489,8 @@ }, "node_modules/@ipld/dag-pb": { "version": "2.1.18", - "license": "(Apache-2.0 AND MIT)", + "resolved": "https://registry.npmjs.org/@ipld/dag-pb/-/dag-pb-2.1.18.tgz", + "integrity": "sha512-ZBnf2fuX9y3KccADURG5vb9FaOeMjFkCrNysB0PtftME/4iCTjxfaLoNq/IAh5fTqUOMXvryN6Jyka4ZGuMLIg==", "dependencies": { "multiformats": "^9.5.4" } @@ -8993,13 +9004,13 @@ } }, "node_modules/@opensea/seaport-js": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/@opensea/seaport-js/-/seaport-js-4.0.1.tgz", - "integrity": "sha512-zcSXQ9XH55/9RG0dl8jwyUsUEmuZNfrh5OhHVUUAWYQvw1/allhqjwPdIZvKJp/EGXSB7vDBXR5j4T0fN9ssCA==", + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/@opensea/seaport-js/-/seaport-js-4.0.4.tgz", + "integrity": "sha512-pOBgU+y1H9Bh463ZdgFshFBxnBQvEaGfoOJFDHbkvZTNLSqIOyuDmICFTQJEiPjYsS6tMQTbw2oJBtcVLFUT2g==", "hasInstallScript": true, "dependencies": { "ethers": "^6.9.0", - "merkletreejs": "^0.3.11" + "merkletreejs": "^0.4.0" }, "engines": { "node": ">=20.0.0" @@ -9010,15 +9021,23 @@ "resolved": "https://registry.npmjs.org/@adraffy/ens-normalize/-/ens-normalize-1.10.1.tgz", "integrity": "sha512-96Z2IP3mYmF1Xg2cDm8f1gWGf/HUVedQ3FMifV4kG/PQ4yEP51xDtRAEfhVNt5f/uzpNkZHwWQuUcu6D6K+Ekw==" }, + "node_modules/@opensea/seaport-js/node_modules/@types/node": { + "version": "22.7.5", + "resolved": "https://registry.npmjs.org/@types/node/-/node-22.7.5.tgz", + "integrity": "sha512-jML7s2NAzMWc//QSJ1a3prpk78cOPchGvXJsC3C6R6PSMoooztvRVQEz89gmBTBY1SPMaqo5teB4uNHPdetShQ==", + "dependencies": { + "undici-types": "~6.19.2" + } + }, "node_modules/@opensea/seaport-js/node_modules/aes-js": { "version": "4.0.0-beta.5", "resolved": "https://registry.npmjs.org/aes-js/-/aes-js-4.0.0-beta.5.tgz", "integrity": "sha512-G965FqalsNyrPqgEGON7nIx1e/OVENSgiEIzyC63haUMuvNnwIgIjMs52hlTCKhkBny7A2ORNlfY9Zu+jmGk1Q==" }, "node_modules/@opensea/seaport-js/node_modules/ethers": { - "version": "6.13.0", - "resolved": "https://registry.npmjs.org/ethers/-/ethers-6.13.0.tgz", - "integrity": "sha512-+yyQQQWEntY5UVbCv++guA14RRVFm1rSnO1GoLFdrK7/XRWMoktNgyG9UjwxrQqGBfGyFKknNZ81YpUS2emCgg==", + "version": "6.13.4", + "resolved": "https://registry.npmjs.org/ethers/-/ethers-6.13.4.tgz", + "integrity": "sha512-21YtnZVg4/zKkCQPjrDj38B1r4nQvTZLopUGMLQ1ePU2zV/joCfDC3t3iKQjWRzjjjbzR+mdAIoikeBRNkdllA==", "funding": [ { "type": "individual", @@ -9033,30 +9052,30 @@ "@adraffy/ens-normalize": "1.10.1", "@noble/curves": "1.2.0", "@noble/hashes": "1.3.2", - "@types/node": "18.15.13", + "@types/node": "22.7.5", "aes-js": "4.0.0-beta.5", - "tslib": "2.4.0", - "ws": "8.5.0" + "tslib": "2.7.0", + "ws": "8.17.1" }, "engines": { "node": ">=14.0.0" } }, "node_modules/@opensea/seaport-js/node_modules/tslib": { - "version": "2.4.0", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz", - "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==" + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.7.0.tgz", + "integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==" }, "node_modules/@opensea/seaport-js/node_modules/ws": { - "version": "8.5.0", - "resolved": "https://registry.npmjs.org/ws/-/ws-8.5.0.tgz", - "integrity": "sha512-BWX0SWVgLPzYwF8lTzEy1egjhS4S4OEAHfsO8o65WOVsrnSRGaSiUaa9e0ggGlkMTtBlmOpEXiie9RUcBO86qg==", + "version": "8.17.1", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz", + "integrity": "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==", "engines": { "node": ">=10.0.0" }, "peerDependencies": { "bufferutil": "^4.0.1", - "utf-8-validate": "^5.0.2" + "utf-8-validate": ">=5.0.2" }, "peerDependenciesMeta": { "bufferutil": { @@ -14206,7 +14225,8 @@ }, "node_modules/@types/long": { "version": "4.0.2", - "license": "MIT" + "resolved": "https://registry.npmjs.org/@types/long/-/long-4.0.2.tgz", + "integrity": "sha512-MqTGEo5bj5t157U6fA/BiDynNkn0YknVdh48CMPkTSpFTVmvao5UQmm7uEF6xBEo7qIMAlY/JSleYaE6VOdpaA==" }, "node_modules/@types/lru-cache": { "version": "5.1.1", @@ -17150,7 +17170,8 @@ }, "node_modules/any-signal": { "version": "3.0.1", - "license": "MIT" + "resolved": "https://registry.npmjs.org/any-signal/-/any-signal-3.0.1.tgz", + "integrity": "sha512-xgZgJtKEa9YmDqXodIgl7Fl1C8yNXr8w6gXjqK3LW4GcEiYT+6AQfJSE/8SPsEpLLmcvbv8YU+qet94UewHxqg==" }, "node_modules/anymatch": { "version": "3.1.3", @@ -18174,7 +18195,8 @@ }, "node_modules/blob-to-it": { "version": "1.0.4", - "license": "ISC", + "resolved": "https://registry.npmjs.org/blob-to-it/-/blob-to-it-1.0.4.tgz", + "integrity": "sha512-iCmk0W4NdbrWgRRuxOriU8aM5ijeVLI61Zulsmg/lUHNr7pYjoj+U77opLefNagevtrrbMt3JQ5Qip7ar178kA==", "dependencies": { "browser-readablestream-to-it": "^1.0.3" } @@ -18356,7 +18378,8 @@ }, "node_modules/browser-readablestream-to-it": { "version": "1.0.3", - "license": "ISC" + "resolved": "https://registry.npmjs.org/browser-readablestream-to-it/-/browser-readablestream-to-it-1.0.3.tgz", + "integrity": "sha512-+12sHB+Br8HIh6VAMVEG5r3UXCyESIgDW7kzk3BjIXa43DVqVwL7GC5TW3jeh+72dtcH99pPVpw0X8i0jt+/kw==" }, "node_modules/browser-stdout": { "version": "1.3.1", @@ -18795,7 +18818,8 @@ }, "node_modules/cborg": { "version": "1.10.2", - "license": "Apache-2.0", + "resolved": "https://registry.npmjs.org/cborg/-/cborg-1.10.2.tgz", + "integrity": "sha512-b3tFPA9pUr2zCUiCfRd2+wok2/LBSNUMKOuRRok+WlvvAgEt/PlbgPTsZUcwCOs53IJvLgTp0eotwtosE6njug==", "bin": { "cborg": "cli.js" } @@ -20610,7 +20634,8 @@ }, "node_modules/dag-jose": { "version": "1.0.0", - "license": "(Apache-2.0 OR MIT)", + "resolved": "https://registry.npmjs.org/dag-jose/-/dag-jose-1.0.0.tgz", + "integrity": "sha512-U0b/YsIPBp6YZNTFrVjwLZAlY3qGRxZTIEcM/CcQmrVrCWq9MWQq9pheXVSPLIhF4SNwzp2SikPva4/BIrJY+g==", "dependencies": { "@ipld/dag-cbor": "^6.0.3", "multiformats": "^9.0.2" @@ -20618,7 +20643,8 @@ }, "node_modules/dag-jose/node_modules/@ipld/dag-cbor": { "version": "6.0.15", - "license": "(Apache-2.0 AND MIT)", + "resolved": "https://registry.npmjs.org/@ipld/dag-cbor/-/dag-cbor-6.0.15.tgz", + "integrity": "sha512-Vm3VTSTwlmGV92a3C5aeY+r2A18zbH2amehNhsX8PBa3muXICaWrN8Uri85A5hLH7D7ElhE8PdjxD6kNqUmTZA==", "dependencies": { "cborg": "^1.5.4", "multiformats": "^9.5.4" @@ -20641,7 +20667,8 @@ }, "node_modules/dashify": { "version": "2.0.0", - "license": "MIT", + "resolved": "https://registry.npmjs.org/dashify/-/dashify-2.0.0.tgz", + "integrity": "sha512-hpA5C/YrPjucXypHPPc0oJ1l9Hf6wWbiOL7Ik42cxnsUOhWiCB/fylKbKqqJalW9FgkNQCw16YO8uW9Hs0Iy1A==", "engines": { "node": ">=4" } @@ -26271,7 +26298,8 @@ }, "node_modules/interface-datastore": { "version": "6.1.1", - "license": "MIT", + "resolved": "https://registry.npmjs.org/interface-datastore/-/interface-datastore-6.1.1.tgz", + "integrity": "sha512-AmCS+9CT34pp2u0QQVXjKztkuq3y5T+BIciuiHDDtDZucZD8VudosnSdUyXJV6IsRkN5jc4RFDhCk1O6Q3Gxjg==", "dependencies": { "interface-store": "^2.0.2", "nanoid": "^3.0.2", @@ -26280,7 +26308,8 @@ }, "node_modules/interface-store": { "version": "2.0.2", - "license": "(Apache-2.0 OR MIT)" + "resolved": "https://registry.npmjs.org/interface-store/-/interface-store-2.0.2.tgz", + "integrity": "sha512-rScRlhDcz6k199EkHqT8NpM87ebN89ICOzILoBHgaG36/WX50N32BnU/kpZgCGPLhARRAWUUX5/cyaIjt7Kipg==" }, "node_modules/internal-slot": { "version": "1.0.7", @@ -26357,7 +26386,9 @@ }, "node_modules/ipfs-core-types": { "version": "0.10.3", - "license": "(Apache-2.0 OR MIT)", + "resolved": "https://registry.npmjs.org/ipfs-core-types/-/ipfs-core-types-0.10.3.tgz", + "integrity": "sha512-GNid2lRBjR5qgScCglgk7w9Hk3TZAwPHQXxOLQx72wgyc0jF2U5NXRoKW0GRvX8NPbHmsrFszForIqxd23I1Gw==", + "deprecated": "js-IPFS has been deprecated in favour of Helia - please see https://github.com/ipfs/js-ipfs/issues/4336 for details", "dependencies": { "@ipld/dag-pb": "^2.1.3", "interface-datastore": "^6.0.2", @@ -26368,7 +26399,9 @@ }, "node_modules/ipfs-core-utils": { "version": "0.14.3", - "license": "MIT", + "resolved": "https://registry.npmjs.org/ipfs-core-utils/-/ipfs-core-utils-0.14.3.tgz", + "integrity": "sha512-aBkewVhgAj3NWXPwu6imj0wADGiGVZmJzqKzODOJsibDjkx6FGdMv8kvvqtLnK8LS/dvSk9yk32IDtuDyYoV7Q==", + "deprecated": "js-IPFS has been deprecated in favour of Helia - please see https://github.com/ipfs/js-ipfs/issues/4336 for details", "dependencies": { "any-signal": "^3.0.0", "blob-to-it": "^1.0.1", @@ -26394,7 +26427,9 @@ }, "node_modules/ipfs-http-client": { "version": "56.0.3", - "license": "(Apache-2.0 OR MIT)", + "resolved": "https://registry.npmjs.org/ipfs-http-client/-/ipfs-http-client-56.0.3.tgz", + "integrity": "sha512-E3L5ylVl6BjyRUsNehvfuRBYp1hj8vQ8in4zskVPMNzXs6JiCFUbif5a6BtcAlSK4xPQyJCeLNNAWLUeFQTLNA==", + "deprecated": "js-IPFS has been deprecated in favour of Helia - please see https://github.com/ipfs/js-ipfs/issues/4336 for details", "dependencies": { "@ipld/dag-cbor": "^7.0.0", "@ipld/dag-json": "^8.0.1", @@ -26422,7 +26457,8 @@ }, "node_modules/ipfs-unixfs": { "version": "6.0.9", - "license": "Apache-2.0 OR MIT", + "resolved": "https://registry.npmjs.org/ipfs-unixfs/-/ipfs-unixfs-6.0.9.tgz", + "integrity": "sha512-0DQ7p0/9dRB6XCb0mVCTli33GzIzSVx5udpJuVM47tGcD+W+Bl4LsnoLswd3ggNnNEakMv1FdoFITiEnchXDqQ==", "dependencies": { "err-code": "^3.0.1", "protobufjs": "^6.10.2" @@ -26434,7 +26470,8 @@ }, "node_modules/ipfs-utils": { "version": "9.0.14", - "license": "Apache-2.0 OR MIT", + "resolved": "https://registry.npmjs.org/ipfs-utils/-/ipfs-utils-9.0.14.tgz", + "integrity": "sha512-zIaiEGX18QATxgaS0/EOQNoo33W0islREABAcxXE8n7y2MGAlB+hdsxXn4J0hGZge8IqVQhW8sWIb+oJz2yEvg==", "dependencies": { "any-signal": "^3.0.0", "browser-readablestream-to-it": "^1.0.0", @@ -26460,7 +26497,8 @@ }, "node_modules/ipfs-utils/node_modules/node-fetch": { "version": "2.7.0", - "license": "MIT", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz", + "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==", "dependencies": { "whatwg-url": "^5.0.0" }, @@ -27476,11 +27514,13 @@ }, "node_modules/it-first": { "version": "1.0.7", - "license": "ISC" + "resolved": "https://registry.npmjs.org/it-first/-/it-first-1.0.7.tgz", + "integrity": "sha512-nvJKZoBpZD/6Rtde6FXqwDqDZGF1sCADmr2Zoc0hZsIvnE449gRFnGctxDf09Bzc/FWnHXAdaHVIetY6lrE0/g==" }, "node_modules/it-glob": { "version": "1.0.2", - "license": "ISC", + "resolved": "https://registry.npmjs.org/it-glob/-/it-glob-1.0.2.tgz", + "integrity": "sha512-Ch2Dzhw4URfB9L/0ZHyY+uqOnKvBNeS/SMcRiPmJfpHiM0TsUZn+GkpcZxAoF3dJVdPm/PuIk3A4wlV7SUo23Q==", "dependencies": { "@types/minimatch": "^3.0.4", "minimatch": "^3.0.4" @@ -27496,7 +27536,8 @@ }, "node_modules/it-peekable": { "version": "1.0.3", - "license": "ISC" + "resolved": "https://registry.npmjs.org/it-peekable/-/it-peekable-1.0.3.tgz", + "integrity": "sha512-5+8zemFS+wSfIkSZyf0Zh5kNN+iGyccN02914BY4w/Dj+uoFEoPSvj5vaWn8pNZJNSxzjW0zHRxC3LUb2KWJTQ==" }, "node_modules/it-reader": { "version": "2.1.0", @@ -31294,7 +31335,8 @@ }, "node_modules/long": { "version": "4.0.0", - "license": "Apache-2.0" + "resolved": "https://registry.npmjs.org/long/-/long-4.0.0.tgz", + "integrity": "sha512-XsP+KhQif4bjX1kbuSiySJFNAehNxgLb6hPRGJ9QsUr8ajHkuXGdrHmFUTUUXhDwVX2R5bY4JNZEwbUiMhV+MA==" }, "node_modules/longest-streak": { "version": "3.0.1", @@ -31718,9 +31760,9 @@ } }, "node_modules/merkletreejs": { - "version": "0.3.11", - "resolved": "https://registry.npmjs.org/merkletreejs/-/merkletreejs-0.3.11.tgz", - "integrity": "sha512-LJKTl4iVNTndhL+3Uz/tfkjD0klIWsHlUzgtuNnNrsf7bAlXR30m+xYB7lHr5Z/l6e/yAIsr26Dabx6Buo4VGQ==", + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/merkletreejs/-/merkletreejs-0.4.0.tgz", + "integrity": "sha512-a48Ta5kWiVNBgeEbZVMm6FB1hBlp6vEuou/XnZdlkmd2zq6NZR6Sh2j+kR1B0iOZIXrTMcigBYzZ39MLdYhm1g==", "dependencies": { "bignumber.js": "^9.0.1", "buffer-reverse": "^1.0.1", @@ -33873,7 +33915,9 @@ }, "node_modules/multiaddr": { "version": "10.0.1", - "license": "MIT", + "resolved": "https://registry.npmjs.org/multiaddr/-/multiaddr-10.0.1.tgz", + "integrity": "sha512-G5upNcGzEGuTHkzxezPrrD6CaIHR9uo+7MwqhNVcXTs33IInon4y7nMiGxl2CY5hG7chvYQUQhz5V52/Qe3cbg==", + "deprecated": "This module is deprecated, please upgrade to @multiformats/multiaddr", "dependencies": { "dns-over-http-resolver": "^1.2.3", "err-code": "^3.0.1", @@ -33885,7 +33929,9 @@ }, "node_modules/multiaddr-to-uri": { "version": "8.0.0", - "license": "MIT", + "resolved": "https://registry.npmjs.org/multiaddr-to-uri/-/multiaddr-to-uri-8.0.0.tgz", + "integrity": "sha512-dq4p/vsOOUdVEd1J1gl+R2GFrXJQH8yjLtz4hodqdVbieg39LvBOdMQRdQnfbg5LSM/q1BYNVf5CBbwZFFqBgA==", + "deprecated": "This module is deprecated, please upgrade to @multiformats/multiaddr-to-uri", "dependencies": { "multiaddr": "^10.0.0" } @@ -37027,9 +37073,9 @@ } }, "node_modules/opensea-js": { - "version": "7.1.9", - "resolved": "https://registry.npmjs.org/opensea-js/-/opensea-js-7.1.9.tgz", - "integrity": "sha512-Ku3PAZXqgkLaR/3/h+PSpC7IPPbdKn+hD0zNlOSlGjQ1i6epxCZzFGJ1nZKDsX9aMybZR5J2JcrcYzvGV7pc4g==", + "version": "7.1.13", + "resolved": "https://registry.npmjs.org/opensea-js/-/opensea-js-7.1.13.tgz", + "integrity": "sha512-IwyBeGU/W6dBG3HCopzq1UdTXkxuIK9aWqucXFy6VUUxZQBKFbssX0OgkHl9RO6udHLC9Y9GG3HqSYDBfEiD7A==", "hasInstallScript": true, "dependencies": { "@opensea/seaport-js": "^4.0.0", @@ -37044,15 +37090,23 @@ "resolved": "https://registry.npmjs.org/@adraffy/ens-normalize/-/ens-normalize-1.10.1.tgz", "integrity": "sha512-96Z2IP3mYmF1Xg2cDm8f1gWGf/HUVedQ3FMifV4kG/PQ4yEP51xDtRAEfhVNt5f/uzpNkZHwWQuUcu6D6K+Ekw==" }, + "node_modules/opensea-js/node_modules/@types/node": { + "version": "22.7.5", + "resolved": "https://registry.npmjs.org/@types/node/-/node-22.7.5.tgz", + "integrity": "sha512-jML7s2NAzMWc//QSJ1a3prpk78cOPchGvXJsC3C6R6PSMoooztvRVQEz89gmBTBY1SPMaqo5teB4uNHPdetShQ==", + "dependencies": { + "undici-types": "~6.19.2" + } + }, "node_modules/opensea-js/node_modules/aes-js": { "version": "4.0.0-beta.5", "resolved": "https://registry.npmjs.org/aes-js/-/aes-js-4.0.0-beta.5.tgz", "integrity": "sha512-G965FqalsNyrPqgEGON7nIx1e/OVENSgiEIzyC63haUMuvNnwIgIjMs52hlTCKhkBny7A2ORNlfY9Zu+jmGk1Q==" }, "node_modules/opensea-js/node_modules/ethers": { - "version": "6.13.0", - "resolved": "https://registry.npmjs.org/ethers/-/ethers-6.13.0.tgz", - "integrity": "sha512-+yyQQQWEntY5UVbCv++guA14RRVFm1rSnO1GoLFdrK7/XRWMoktNgyG9UjwxrQqGBfGyFKknNZ81YpUS2emCgg==", + "version": "6.13.4", + "resolved": "https://registry.npmjs.org/ethers/-/ethers-6.13.4.tgz", + "integrity": "sha512-21YtnZVg4/zKkCQPjrDj38B1r4nQvTZLopUGMLQ1ePU2zV/joCfDC3t3iKQjWRzjjjbzR+mdAIoikeBRNkdllA==", "funding": [ { "type": "individual", @@ -37067,30 +37121,30 @@ "@adraffy/ens-normalize": "1.10.1", "@noble/curves": "1.2.0", "@noble/hashes": "1.3.2", - "@types/node": "18.15.13", + "@types/node": "22.7.5", "aes-js": "4.0.0-beta.5", - "tslib": "2.4.0", - "ws": "8.5.0" + "tslib": "2.7.0", + "ws": "8.17.1" }, "engines": { "node": ">=14.0.0" } }, "node_modules/opensea-js/node_modules/tslib": { - "version": "2.4.0", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz", - "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==" + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.7.0.tgz", + "integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==" }, "node_modules/opensea-js/node_modules/ws": { - "version": "8.5.0", - "resolved": "https://registry.npmjs.org/ws/-/ws-8.5.0.tgz", - "integrity": "sha512-BWX0SWVgLPzYwF8lTzEy1egjhS4S4OEAHfsO8o65WOVsrnSRGaSiUaa9e0ggGlkMTtBlmOpEXiie9RUcBO86qg==", + "version": "8.17.1", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz", + "integrity": "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==", "engines": { "node": ">=10.0.0" }, "peerDependencies": { "bufferutil": "^4.0.1", - "utf-8-validate": "^5.0.2" + "utf-8-validate": ">=5.0.2" }, "peerDependenciesMeta": { "bufferutil": { @@ -37344,7 +37398,8 @@ }, "node_modules/parse-duration": { "version": "1.1.0", - "license": "MIT" + "resolved": "https://registry.npmjs.org/parse-duration/-/parse-duration-1.1.0.tgz", + "integrity": "sha512-z6t9dvSJYaPoQq7quMzdEagSFtpGu+utzHqqxmpVWNNZRIXnvqyCvn9XsTdh7c/w0Bqmdz3RB3YnRaKtpRtEXQ==" }, "node_modules/parse-filepath": { "version": "1.0.2", @@ -38981,8 +39036,9 @@ }, "node_modules/protobufjs": { "version": "6.11.4", + "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-6.11.4.tgz", + "integrity": "sha512-5kQWPaJHi1WoCpjTGszzQ32PG2F4+wRY6BmAT4Vfw56Q2FZ4YZzK20xUYQH4YkfehY1e6QSICrJquM6xXZNcrw==", "hasInstallScript": true, - "license": "BSD-3-Clause", "dependencies": { "@protobufjs/aspromise": "^1.1.2", "@protobufjs/base64": "^1.1.2", @@ -39784,7 +39840,8 @@ }, "node_modules/react-native-fetch-api": { "version": "3.0.0", - "license": "MIT", + "resolved": "https://registry.npmjs.org/react-native-fetch-api/-/react-native-fetch-api-3.0.0.tgz", + "integrity": "sha512-g2rtqPjdroaboDKTsJCTlcmtw54E25OjyaunUP0anOZn4Fuo2IKs8BVfe02zVggA/UysbmfSnRJIqtNkAgggNA==", "dependencies": { "p-defer": "^3.0.0" } @@ -41378,7 +41435,8 @@ }, "node_modules/retimer": { "version": "3.0.0", - "license": "MIT" + "resolved": "https://registry.npmjs.org/retimer/-/retimer-3.0.0.tgz", + "integrity": "sha512-WKE0j11Pa0ZJI5YIk0nflGI7SQsfl2ljihVy7ogh7DeQSeYAUi0ubZ/yEueGtDfUPk6GH5LRw1hBdLq4IwUBWA==" }, "node_modules/retry": { "version": "0.13.1", @@ -41765,7 +41823,8 @@ }, "node_modules/schema-to-yup": { "version": "1.12.18", - "license": "MIT", + "resolved": "https://registry.npmjs.org/schema-to-yup/-/schema-to-yup-1.12.18.tgz", + "integrity": "sha512-rzMtnIQpkokOzyb6JfsuCB+/BklFB5J7pFcvc/SnybOtmks8uW4SJXfMpzMQT98f826XgI3/mlPGQf0HBhF8FQ==", "dependencies": { "dashify": "^2.0.0", "uniq": "^1.0.1", @@ -41775,7 +41834,8 @@ }, "node_modules/schema-to-yup/node_modules/type-fest": { "version": "2.19.0", - "license": "(MIT OR CC0-1.0)", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz", + "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==", "engines": { "node": ">=12.20" }, @@ -41785,7 +41845,8 @@ }, "node_modules/schema-to-yup/node_modules/yup": { "version": "1.4.0", - "license": "MIT", + "resolved": "https://registry.npmjs.org/yup/-/yup-1.4.0.tgz", + "integrity": "sha512-wPbgkJRCqIf+OHyiTBQoJiP5PFuAXaWiJK6AmYkzQAh5/c2K9hzSApBZG5wV9KoKSePF7sAxmNSvh/13YHkFDg==", "dependencies": { "property-expr": "^2.0.5", "tiny-case": "^1.0.3", @@ -43459,14 +43520,16 @@ }, "node_modules/timeout-abort-controller": { "version": "3.0.0", - "license": "MIT", + "resolved": "https://registry.npmjs.org/timeout-abort-controller/-/timeout-abort-controller-3.0.0.tgz", + "integrity": "sha512-O3e+2B8BKrQxU2YRyEjC/2yFdb33slI22WRdUaDx6rvysfi9anloNZyR2q0l6LnePo5qH7gSM7uZtvvwZbc2yA==", "dependencies": { "retimer": "^3.0.0" } }, "node_modules/tiny-case": { "version": "1.0.3", - "license": "MIT" + "resolved": "https://registry.npmjs.org/tiny-case/-/tiny-case-1.0.3.tgz", + "integrity": "sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q==" }, "node_modules/tiny-invariant": { "version": "1.3.1", @@ -44234,6 +44297,11 @@ "node": ">=14.0" } }, + "node_modules/undici-types": { + "version": "6.19.8", + "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz", + "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==" + }, "node_modules/unenv": { "version": "1.9.0", "license": "MIT", @@ -44320,7 +44388,8 @@ }, "node_modules/uniq": { "version": "1.0.1", - "license": "MIT" + "resolved": "https://registry.npmjs.org/uniq/-/uniq-1.0.1.tgz", + "integrity": "sha512-Gw+zz50YNKPDKXs+9d+aKAjVwpjNwqzvNpLigIruT4HA9lMZNdMqs9x07kKHB/L9WRzqp4+DlTU5s4wG2esdoA==" }, "node_modules/unique-string": { "version": "2.0.0", @@ -44621,7 +44690,8 @@ }, "node_modules/uppercamelcase": { "version": "3.0.0", - "license": "MIT", + "resolved": "https://registry.npmjs.org/uppercamelcase/-/uppercamelcase-3.0.0.tgz", + "integrity": "sha512-zTWmRiOJACCdFGWjzye3L5cjSuVdZ/c8C0iHIwVbfORFD8IhGNAO6BOWkZ+fj+SI6/aFbdjGXE6gwPG780H4gQ==", "dependencies": { "camelcase": "^4.1.0" }, @@ -44631,7 +44701,8 @@ }, "node_modules/uppercamelcase/node_modules/camelcase": { "version": "4.1.0", - "license": "MIT", + "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-4.1.0.tgz", + "integrity": "sha512-FxAv7HpHrXbh3aPo4o2qxHay2lkLY3x5Mw3KeE4KQE8ysVfziWeRZDwcjauvwBSGEC/nXUPzZy8zeh4HokqOnw==", "engines": { "node": ">=4" } diff --git a/package.json b/package.json index 1fca92c78..6fc38b6d5 100644 --- a/package.json +++ b/package.json @@ -46,7 +46,7 @@ "dependencies": { "@apollo/client": "^3.8.1", "@bosonprotocol/chat-sdk": "^1.3.1-alpha.9", - "@bosonprotocol/react-kit": "^0.32.0", + "@bosonprotocol/react-kit": "^0.34.0-alpha.20", "@davatar/react": "^1.10.4", "@ethersproject/address": "^5.6.1", "@ethersproject/units": "^5.7.0", diff --git a/src/abis/types/commons.ts b/src/abis/types/commons.ts index 8d8e66ce5..d271c7e07 100644 --- a/src/abis/types/commons.ts +++ b/src/abis/types/commons.ts @@ -25,12 +25,7 @@ export type TypedListener< export type MinEthersFactory = { deploy(...a: ARGS[]): Promise; }; -export type GetContractTypeFromFactory = F extends MinEthersFactory< - infer C, - any -> - ? C - : never; -export type GetARGsTypeFromFactory = F extends MinEthersFactory - ? Parameters - : never; +export type GetContractTypeFromFactory = + F extends MinEthersFactory ? C : never; +export type GetARGsTypeFromFactory = + F extends MinEthersFactory ? Parameters : never; diff --git a/src/components/exchange/Exchange.tsx b/src/components/exchange/Exchange.tsx index cee21175c..30cd52aa7 100644 --- a/src/components/exchange/Exchange.tsx +++ b/src/components/exchange/Exchange.tsx @@ -256,7 +256,7 @@ export default function Exchange({ } }} onAvatarNameClick={handleOnAvatarClick} - price={Number(price)} + price={price} currency={offer.exchangeToken.symbol as Currencies} productType={isPhygital ? ProductType.phygital : ProductType.physical} {...createSpecificCardConfig()} diff --git a/src/components/modal/components/Explore/Collections/CollectionsCard.tsx b/src/components/modal/components/Explore/Collections/CollectionsCard.tsx index 398d5852c..989479939 100644 --- a/src/components/modal/components/Explore/Collections/CollectionsCard.tsx +++ b/src/components/modal/components/Explore/Collections/CollectionsCard.tsx @@ -1,18 +1,16 @@ -import { AuthTokenType, subgraph } from "@bosonprotocol/react-kit"; -import { Fragment, useMemo, useState } from "react"; +import { AuthTokenType, Grid, subgraph } from "@bosonprotocol/react-kit"; +import { useMemo, useState } from "react"; import { generatePath } from "react-router-dom"; import styled, { css } from "styled-components"; import { UrlParameters } from "../../../../../lib/routing/parameters"; import { BosonRoutes } from "../../../../../lib/routing/routes"; import { colors } from "../../../../../lib/styles/colors"; -import { zIndex } from "../../../../../lib/styles/zIndex"; import { Profile } from "../../../../../lib/utils/hooks/lens/graphql/generated"; import { useKeepQueryParamsNavigate } from "../../../../../lib/utils/hooks/useKeepQueryParamsNavigate"; import useSellerNumbers from "../../../../../lib/utils/hooks/useSellerNumbers"; import { useCustomStoreQueryParameter } from "../../../../../pages/custom-store/useCustomStoreQueryParameter"; import { ExtendedSeller } from "../../../../../pages/explore/WithAllOffers"; -import { Grid } from "../../../../ui/Grid"; import Image from "../../../../ui/Image"; import { Typography } from "../../../../ui/Typography"; @@ -20,23 +18,15 @@ const CardContainer = styled.div<{ $isUpperCardBgColorDefined: boolean; }>` position: relative; - padding-bottom: 7.8125rem; - background: ${colors.lightGrey}; + background: ${colors.lightGrey2}; display: flex; + cursor: pointer; flex-direction: column; - border: 1px solid ${colors.black}20; - transition: all 300ms ease-in-out; - box-shadow: 0px 4px 110px rgb(21 30 52 / 10%); - &:hover { - box-shadow: - 0px 0px 0px rgb(0 0 0 / 5%), - 4px 4px 4px rgb(0 0 0 / 5%), - 8px 8px 8px rgb(0 0 0 / 5%), - 16px 16px 16px rgb(0 0 0 / 5%); - img[data-testid] { - transform: translate(-50%, -50%) scale(1.05); - } - } + box-shadow: 0 0 0 2px ${colors.lightGrey}; + filter: drop-shadow(0 0 2px ${colors.lightGrey}); + border-radius: 4px; + transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); + min-width: 16.5625rem; ${({ $isUpperCardBgColorDefined }) => { if ($isUpperCardBgColorDefined) { return css` @@ -46,32 +36,96 @@ const CardContainer = styled.div<{ return css``; }} `; + const ImagesContainer = styled.div` - display: grid; - grid-template-columns: 50% 50%; + display: flex; + padding: 1rem; + gap: 1rem; + background: ${colors.lightGrey2}; + height: 13rem; + max-height: 13rem; +`; + +const LargeImageContainer = styled.div` + flex: 2; + height: 6.375rem; + position: relative; + max-height: 6.375rem; + min-height: 6.375rem; +`; + +const SmallImagesContainer = styled.div` + flex: 1; + display: flex; + flex-direction: column; + gap: 1rem; + height: 100%; +`; + +const LargeImage = styled(Image)` + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 4px; + height: 6.375rem; + max-height: 6.375rem; + position: relative; + left: 0; + height: 6.375rem; + max-height: 6.375rem; + img { + height: 6.375rem; + max-height: 6.375rem; + object-fit: contain; + transform: none; + left: 0; + top: 30px; + box-shadow: 0 0 0 2px ${colors.lightGrey}; + width: inherit; + } +`; + +const BaseSmallImage = css` + width: 100%; + height: 3.125rem; + max-height: 3.125rem; + object-fit: cover; + border-radius: 4px; + position: relative; padding: 0; - margin: 0; - overflow: hidden; + overflow: visible; + img { + height: 3.125rem; + max-height: 3.125rem; + object-fit: contain; + box-shadow: 0 0 0 2px ${colors.lightGrey}; + width: 100%; + left: unset; + transform: none; + } +`; + +const SmallImageTop = styled(Image)` + ${BaseSmallImage} + img { + top: 1.25rem; + } +`; + +const SmallImageBottom = styled(Image)` + ${BaseSmallImage} `; const DataContainer = styled.div<{ $isLowerCardBgColorDefined: boolean; }>` - padding: 1rem 1.5rem 1rem 1.5rem; - background: ${colors.white}; - position: absolute; - bottom: 0; - left: 0; - right: 0; - z-index: ${zIndex.OfferCard}; - + padding: 16px; + background: white; ${({ $isLowerCardBgColorDefined }) => { if ($isLowerCardBgColorDefined) { return css` color: var(--textColor); - background: var(--lowerCardBgColor); - * { color: var(--textColor); } @@ -81,15 +135,26 @@ const DataContainer = styled.div<{ }} `; -const StyledGrid = styled(Grid)` - max-width: 6.5625rem; +const ProfileImage = styled.img` + width: 2.25rem; + height: 2.25rem; + border-radius: 50%; + margin-right: 8px; +`; + +const NameContainer = styled.div` + display: flex; + align-items: center; + margin-bottom: 8px; `; interface Props { collection: ExtendedSeller; lensProfile?: Profile; } -const imagesNumber = 4; + +const imagesNumber = 3; + export default function CollectionsCard({ collection, lensProfile }: Props) { const [sellerId] = useState(collection.id); @@ -111,7 +176,7 @@ export default function CollectionsCard({ collection, lensProfile }: Props) { const images = useMemo(() => { const array = (collection && collection?.additional?.images) || []; - if (array.length < 3) { + if (array.length < imagesNumber) { for (let index = 0; index < imagesNumber; index++) { array.push(""); } @@ -119,8 +184,8 @@ export default function CollectionsCard({ collection, lensProfile }: Props) { return array.slice(0, imagesNumber); }, [collection]); - const upperCardBgColor = useCustomStoreQueryParameter("upperCardBgColor"); + const upperCardBgColor = useCustomStoreQueryParameter("upperCardBgColor"); const lowerCardBgColor = useCustomStoreQueryParameter("lowerCardBgColor"); return ( @@ -135,41 +200,61 @@ export default function CollectionsCard({ collection, lensProfile }: Props) { }} > - {images && - images?.map( - (img: string, index: number) => - img !== "" && ( - - - - ) + + {images[0] && ( + + )} + + + {images[1] && ( + + )} + {images[2] && ( + )} + -
- - {name} - - + + {metadata?.images && metadata.images.length > 0 && ( + image.tag === "profile")?.url + } + alt={name} + /> + )} +
+ + + {name} + + - Products - - - - - {numProducts} + {numProducts} Products - -
+
+ ); diff --git a/src/components/modal/components/Profile/bosonAccount/BosonAccountForm.tsx b/src/components/modal/components/Profile/bosonAccount/BosonAccountForm.tsx index c8fcd2299..6ae0fde58 100644 --- a/src/components/modal/components/Profile/bosonAccount/BosonAccountForm.tsx +++ b/src/components/modal/components/Profile/bosonAccount/BosonAccountForm.tsx @@ -40,15 +40,20 @@ export default function BosonAccountForm({ if (contractURI && !formValues) { (async () => { try { - const openSeaMetadata = await ipfsMetadataStorage.get<{ + type OpenSeaMetadata = { name: string; description: string; image: string; external_link: string; seller_fee_basis_points: string; fee_recipient: string; - }>(contractURI, true); - if (typeof openSeaMetadata !== "string") { + }; + const openSeaMetadata = + (await ipfsMetadataStorage.get( + contractURI, + true + )) as OpenSeaMetadata; + if (typeof openSeaMetadata === "object") { setInitialValues({ secondaryRoyalties: Number(openSeaMetadata.seller_fee_basis_points) / 100, diff --git a/src/components/offers/OfferList.tsx b/src/components/offers/OfferList.tsx index b513db17a..5a7db8b72 100644 --- a/src/components/offers/OfferList.tsx +++ b/src/components/offers/OfferList.tsx @@ -40,7 +40,7 @@ interface Props { const Container = styled.div<{ $isPrimaryBgChanged: boolean }>` background: ${({ $isPrimaryBgChanged }) => - $isPrimaryBgChanged ? "var(--secondaryBgColor)" : colors.lightGrey}; + $isPrimaryBgChanged ? "var(--secondaryBgColor)" : colors.white}; `; const ViewMoreButton = styled.button` @@ -169,15 +169,17 @@ export default function OfferList({ : offers?.map((offer: Offer | ExtendedOffer) => { return ( (offer.isValid || (showInvalidOffers && !offer.isValid)) && ( - + <> + + ) ); })} diff --git a/src/components/productCard/ProductCard.tsx b/src/components/productCard/ProductCard.tsx index a7929532c..14300cf1e 100644 --- a/src/components/productCard/ProductCard.tsx +++ b/src/components/productCard/ProductCard.tsx @@ -21,7 +21,6 @@ import { BosonRoutes } from "../../lib/routing/routes"; import { colors } from "../../lib/styles/colors"; import { isTruthy } from "../../lib/types/helpers"; import { Offer } from "../../lib/types/offer"; -import { displayFloat } from "../../lib/utils/calcPrice"; import { Profile } from "../../lib/utils/hooks/lens/graphql/generated"; import { useHandleText } from "../../lib/utils/hooks/useHandleText"; import { useKeepQueryParamsNavigate } from "../../lib/utils/hooks/useKeepQueryParamsNavigate"; @@ -54,8 +53,13 @@ const ProductCardWrapper = styled.div<{ $avatarTextColor: string; }>` [data-card="product-card"] { - height: 500px; - background: var(--upperCardBgColor); + background: transparent; + box-shadow: none; + &:hover { + box-shadow: 0 0 0 2px ${colors.lightGrey}; + filter: drop-shadow(0 0 2px ${colors.lightGrey}); + border-radius: 4px; + } ${({ $isLowerCardBgColorDefined, $bottomCardTextColor }) => { if ($isLowerCardBgColorDefined) { return css` @@ -77,14 +81,6 @@ const ProductCardWrapper = styled.div<{ object-fit: contain; } } - ${({ $isCustomStoreFront }) => { - if (!$isCustomStoreFront) { - return css` - border: 1px solid rgba(85, 96, 114, 0.15); - `; - } - return ""; - }} } [data-avatarname="product-card"] { max-width: 100%; @@ -277,7 +273,7 @@ export default function ProductCard({ }); } }} - price={Number(displayFloat(price?.price || 0))} + price={price?.price || "0"} asterisk={hasVariantsWithDifferentPrice} tooltip={ hasVariantsWithDifferentPrice @@ -289,7 +285,7 @@ export default function ProductCard({ imageProps={{ src: imageSrc, fallbackSrc: getFallbackImageUrl(imageSrc), - withLoading: true, + withLoading: false, errorConfig: { errorIcon: } diff --git a/src/lib/utils/hooks/seller/useStoreSellerMetadata.ts b/src/lib/utils/hooks/seller/useStoreSellerMetadata.ts index b14cec7d0..fab4ec40d 100644 --- a/src/lib/utils/hooks/seller/useStoreSellerMetadata.ts +++ b/src/lib/utils/hooks/seller/useStoreSellerMetadata.ts @@ -1,11 +1,11 @@ -import { CoreSDK, OfferOrSellerMetadata } from "@bosonprotocol/react-kit"; +import { CoreSDK, seller } from "@bosonprotocol/react-kit"; import { useMutation } from "react-query"; import { ContactPreference } from "../../../../components/modal/components/Profile/const"; import { useCoreSDK } from "../../useCoreSdk"; type CreateSellerMetadata = Omit< - Extract, + seller.SellerMetadata, "__typename" | "id" | "createdAt" | "type" | "contactPreference" > & { contactPreference: ContactPreference }; type Props = Parameters[1]; diff --git a/src/lib/utils/hooks/seller/useUpdateSellerMetadata.ts b/src/lib/utils/hooks/seller/useUpdateSellerMetadata.ts index bc2ac35b6..faa94197f 100644 --- a/src/lib/utils/hooks/seller/useUpdateSellerMetadata.ts +++ b/src/lib/utils/hooks/seller/useUpdateSellerMetadata.ts @@ -1,5 +1,5 @@ import { SellerFieldsFragment } from "@bosonprotocol/core-sdk/dist/cjs/subgraph"; -import { AuthTokenType, OfferOrSellerMetadata } from "@bosonprotocol/react-kit"; +import { AuthTokenType, seller } from "@bosonprotocol/react-kit"; import { useMutation } from "react-query"; import { @@ -17,7 +17,7 @@ import useStoreSellerMetadata from "./useStoreSellerMetadata"; import useUpdateSeller from "./useUpdateSeller"; type Props = Parameters[0]; -type SellerMetadata = Extract; +type SellerMetadata = seller.SellerMetadata; type SalesChannels = SellerMetadata["salesChannels"]; type UpdateSellerFn = ReturnType["mutateAsync"]; type StoreSellerMetadataFn = ReturnType< diff --git a/src/lib/utils/hooks/useIpfsStorage.ts b/src/lib/utils/hooks/useIpfsStorage.ts index 027124969..00e0ac2df 100644 --- a/src/lib/utils/hooks/useIpfsStorage.ts +++ b/src/lib/utils/hooks/useIpfsStorage.ts @@ -1,3 +1,4 @@ +import { validateMetadata } from "@bosonprotocol/core-sdk"; import { hooks } from "@bosonprotocol/react-kit"; import { useConfigContext } from "components/config/ConfigContext"; import { CONFIG } from "lib/config"; @@ -7,6 +8,7 @@ export function useIpfsStorage() { const storage = hooks.useIpfsMetadataStorage( config.envName, config.envConfig.configId, + validateMetadata, config.ipfsMetadataStorageUrl, CONFIG.ipfsMetadataStorageHeaders ); diff --git a/src/lib/utils/hooks/useRenderTemplate.ts b/src/lib/utils/hooks/useRenderTemplate.ts index 217883566..fc49bd367 100644 --- a/src/lib/utils/hooks/useRenderTemplate.ts +++ b/src/lib/utils/hooks/useRenderTemplate.ts @@ -36,10 +36,10 @@ export function useRenderTemplate( setRenderStatus(ExtendedProgressStatus.LOADING); if (ipfsMetadataStorage && coreSDK) { try { - const rawTemplate = await ipfsMetadataStorage.get( + const rawTemplate = (await ipfsMetadataStorage.get( templateUrl, false - ); + )) as Uint8Array; const template = Buffer.from(rawTemplate).toString("utf-8"); let theOfferData = offerData; if ( diff --git a/src/lib/utils/hooks/useResolveUrlFromIPFS.ts b/src/lib/utils/hooks/useResolveUrlFromIPFS.ts new file mode 100644 index 000000000..34152a009 --- /dev/null +++ b/src/lib/utils/hooks/useResolveUrlFromIPFS.ts @@ -0,0 +1,5 @@ +import { getIpfsGatewayUrl } from "../ipfs"; + +export function resolveUrlFromIPFS(uri: string, ipfsGateway: string): string { + return getIpfsGatewayUrl(uri, { gateway: ipfsGateway }); +} diff --git a/src/pages/create-product/CreateProductInner.tsx b/src/pages/create-product/CreateProductInner.tsx index 1701b0865..21ee13044 100644 --- a/src/pages/create-product/CreateProductInner.tsx +++ b/src/pages/create-product/CreateProductInner.tsx @@ -580,7 +580,9 @@ function CreateProductInner({ }); } } - let metadatas: AnyMetadata[]; + let metadatas: + | productV1Item.ProductV1Item[] + | productV1.ProductV1Metadata[]; if (isPhygital) { const productItemV1Metadata = await getProductItemV1Metadata({ uuid: bundleUuid, diff --git a/src/pages/explore/WithAllOffers.tsx b/src/pages/explore/WithAllOffers.tsx index 3be212b64..3fe63ac05 100644 --- a/src/pages/explore/WithAllOffers.tsx +++ b/src/pages/explore/WithAllOffers.tsx @@ -39,7 +39,7 @@ const TopContainer = styled.div` `; const ExploreOffersContainer = styled.div<{ $isPrimaryBgChanged: boolean }>` background: ${({ $isPrimaryBgChanged }) => - $isPrimaryBgChanged ? "var(--primaryBgColor)" : colors.lightGrey}; + $isPrimaryBgChanged ? "var(--primaryBgColor)" : colors.white}; padding: 3rem 0 4rem 0; min-height: 55.5vh; `; diff --git a/src/pages/landing/AnimatedImageGrid.tsx b/src/pages/landing/AnimatedImageGrid.tsx new file mode 100644 index 000000000..ad42dfdbe --- /dev/null +++ b/src/pages/landing/AnimatedImageGrid.tsx @@ -0,0 +1,173 @@ +import { Grid } from "@bosonprotocol/react-kit"; +import { CONFIG } from "lib/config"; +import { resolveUrlFromIPFS } from "lib/utils/hooks/useResolveUrlFromIPFS"; +import React, { useEffect, useMemo, useRef, useState } from "react"; +import styled, { css, keyframes } from "styled-components"; + +const Container = styled.div` + position: relative; + width: 100%; + height: 100%; + overflow: hidden; +`; + +const fadeIn = keyframes` + from { opacity: 0; } + to { opacity: 1; } +`; + +const ImageItem = styled.div` + position: absolute; + top: ${(props) => props.top}; + left: ${(props) => props.left}; + width: ${(props) => props.width}; + height: ${(props) => props.height}; + transition: all 0.5s ease-in-out; + opacity: 0.7; + filter: blur(3px); + animation: ${fadeIn} 0.5s ease-in-out; + z-index: ${(props) => (props.isActive || props.isTransitioning ? 10 : 1)}; + + ${(props) => + props.isActive && + css` + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 40%; + height: 40%; + opacity: 1; + filter: blur(0); + `} +`; + +const StyledImage = styled.img` + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 8px; +`; + +const LoadingContainer = styled(Grid)` + height: 100%; + font-size: 1.125rem; + color: #333; +`; + +interface ImageItemProps { + top: string; + left: string; + width: string; + height: string; + isActive: boolean; + isTransitioning: boolean; +} + +interface AnimatedImageGridProps { + images: string[]; +} + +const AnimatedImageGrid: React.FC = ({ images }) => { + const [activeIndex, setActiveIndex] = useState(0); + const [transitioningIndex, setTransitioningIndex] = useState( + null + ); + const [loadedImages, setLoadedImages] = useState([]); + const timeoutRef = useRef(null); + + const imageItems: Omit[] = + useMemo( + () => [ + { top: "0%", left: "40%", width: "20%", height: "20%" }, + { top: "3%", left: "84%", width: "20%", height: "20%" }, + { top: "45%", left: "86%", width: "20%", height: "20%" }, + { top: "85%", left: "60%", width: "20%", height: "20%" }, + { top: "20%", left: "10%", width: "20%", height: "20%" }, + { top: "45%", left: "0%", width: "20%", height: "20%" }, + { top: "85%", left: "25%", width: "20%", height: "20%" }, + { top: "43%", left: "43%", width: "20%", height: "20%" } + ], + [] + ); + + useEffect(() => { + const loadImages = async () => { + const resolvedUrls = images.map((url) => + resolveUrlFromIPFS(url, CONFIG.ipfsImageGateway) + ); + const loadedUrls = await Promise.all( + resolvedUrls.map(async (url) => { + try { + const response = await fetch(url); + if (!response.ok) throw new Error("Network response was not ok"); + const blob = await response.blob(); + return URL.createObjectURL(blob); + } catch (error) { + console.error("Error loading image:", error); + return null; + } + }) + ); + setLoadedImages(loadedUrls.filter(Boolean) as string[]); + }; + + loadImages(); + }, [images]); + + useEffect(() => { + if (loadedImages.length === images.length) { + const interval = setInterval(() => { + setActiveIndex((prevIndex) => { + setTransitioningIndex(prevIndex); + if (timeoutRef.current) { + clearTimeout(timeoutRef.current); + } + timeoutRef.current = setTimeout(() => { + setTransitioningIndex(null); + }, 50); + return (prevIndex + 1) % imageItems.length; + }); + }, 2000); + + return () => { + clearInterval(interval); + if (timeoutRef.current) { + clearTimeout(timeoutRef.current); + } + }; + } + }, [loadedImages, images.length, imageItems.length]); + + if (loadedImages.length !== images.length) { + return ( + + Loading images... + + ); + } + + return ( + + {imageItems.map((item, index) => ( + + + + ))} + + ); +}; + +export default AnimatedImageGrid; diff --git a/src/pages/landing/FeaturedOffers.tsx b/src/pages/landing/FeaturedOffers.tsx index 34fdc4783..5e62e00f6 100644 --- a/src/pages/landing/FeaturedOffers.tsx +++ b/src/pages/landing/FeaturedOffers.tsx @@ -1,17 +1,14 @@ -import * as Sentry from "@sentry/browser"; -import { CaretRight } from "phosphor-react"; -import { useMemo } from "react"; +import { buttonText } from "components/ui/styles"; +import { Profile } from "lib/utils/hooks/lens/graphql/generated"; +import { ExtendedOffer } from "pages/explore/WithAllOffers"; +import React from "react"; import styled from "styled-components"; import { LinkWithQuery } from "../../components/customNavigation/LinkWithQuery"; import OfferList from "../../components/offers/OfferList"; import { Grid } from "../../components/ui/Grid"; -import { buttonText } from "../../components/ui/styles"; import { Typography } from "../../components/ui/Typography"; import { BosonRoutes } from "../../lib/routing/routes"; -import useProductsByFilteredOffers from "../../lib/utils/hooks/product/useProductsByFilteredOffers"; -import { useBreakpoints } from "../../lib/utils/hooks/useBreakpoints"; -import extractUniqueRandomProducts from "../../lib/utils/product/extractUniqueRandomProducts"; const Root = styled.div` width: 100%; @@ -30,12 +27,16 @@ const Title = styled(Typography)` line-height: 1.2; `; -const ViewMore = styled(LinkWithQuery)` +export const ViewMore = styled(LinkWithQuery)` all: unset; display: flex; gap: 0.5rem; align-items: center; cursor: pointer; + margin-left: 1.5rem; + font-size: 0.875rem; + font-weight: 600; + margin-bottom: 0.0625rem; ${() => buttonText}; color: var(--accent); @@ -54,49 +55,35 @@ const ViewMore = styled(LinkWithQuery)` interface IFeaturedOffers { title?: string; + offers: ExtendedOffer[]; + isLoading: boolean; + isError: boolean; + numOffers: number; + sellerLensProfilePerSellerId?: Map; } const FeaturedOffers: React.FC = ({ - title = "Explore Offers" + title = "Explore Offers", + offers, + isLoading, + isError, + numOffers, + sellerLensProfilePerSellerId }) => { - const { isLteXS } = useBreakpoints(); - const numOffers = isLteXS ? 6 : 12; - const { products, isLoading, isError, sellerLensProfilePerSellerId } = - useProductsByFilteredOffers({ - voided: false, - valid: true, - first: numOffers, - quantityAvailable_gte: 1 - }); - const shuffledOffers = useMemo(() => { - try { - return extractUniqueRandomProducts({ - products, - quantity: numOffers - }); - } catch (error) { - console.error(error); - Sentry.captureException(error); - return products; - } - }, [products, numOffers]); return ( {title} - - View more - - + View all = ({ xs: 1, s: 2, m: 3, - l: 4, - xl: 4 + l: 5, + xl: 5 }} sellerLensProfilePerSellerId={sellerLensProfilePerSellerId} /> diff --git a/src/pages/landing/Landing.tsx b/src/pages/landing/Landing.tsx index 4cd9c2985..8f7e3da1f 100644 --- a/src/pages/landing/Landing.tsx +++ b/src/pages/landing/Landing.tsx @@ -1,5 +1,15 @@ -import { useConfigContext } from "components/config/ConfigContext"; -import { ReactNode, useState } from "react"; +import { CollectionsCardSkeleton } from "@bosonprotocol/react-kit"; +import CollectionsCard from "components/modal/components/Explore/Collections/CollectionsCard"; +import { useSortOffers } from "components/price/useSortOffers"; +import { colors } from "lib/styles/colors"; +import { Profile } from "lib/utils/hooks/lens/graphql/generated"; +import useProducts from "lib/utils/hooks/product/useProducts"; +import useProductsByFilteredOffers from "lib/utils/hooks/product/useProductsByFilteredOffers"; +import { getOfferDetails } from "lib/utils/offer/getOfferDetails"; +import extractUniqueRandomProducts from "lib/utils/product/extractUniqueRandomProducts"; +import { ExtendedSeller } from "pages/explore/WithAllOffers"; +import { ProductGridContainer } from "pages/profile/ProfilePage.styles"; +import { Fragment, ReactNode, useMemo, useState } from "react"; import styled, { css } from "styled-components"; import Layout, { LayoutRoot } from "../../components/layout/Layout"; @@ -12,10 +22,9 @@ import { breakpoint } from "../../lib/styles/breakpoint"; import { zIndex } from "../../lib/styles/zIndex"; import { useBreakpoints } from "../../lib/utils/hooks/useBreakpoints"; import { useKeepQueryParamsNavigate } from "../../lib/utils/hooks/useKeepQueryParamsNavigate"; -import FeaturedOffers from "../../pages/landing/FeaturedOffers"; +import FeaturedOffers, { ViewMore } from "../../pages/landing/FeaturedOffers"; import { useCustomStoreQueryParameter } from "../custom-store/useCustomStoreQueryParameter"; -import Carousel from "./Carousel"; -import Step from "./Step"; +import AnimatedImageGrid from "./AnimatedImageGrid"; const LandingPage = styled.div<{ isCustomStoreFront: string }>` width: 100%; @@ -44,15 +53,9 @@ const StyledGridWithZindex = styled(GridWithZindex)` `; const Title = styled(Typography)` - margin-bottom: 1rem; - margin-top: 1rem; - - font-size: 2.5rem; - line-height: 1.3; - ${breakpoint.s} { - font-size: 3.15rem; - line-height: 1.2; - } + font-size: 2rem; + font-weight: 600; + line-height: 1.2; `; const SubTitle = styled(Typography)` margin-bottom: 0.5rem; @@ -62,7 +65,7 @@ const ExploreContainer = styled.div` `; const DarkerBackground = styled.div.attrs({ id: "darker-background" })` - background-color: var(--secondary); + background-color: ${colors.white}; width: 100vw; position: relative; left: 50%; @@ -79,11 +82,27 @@ const ExploreProductsButton = styled(BosonButton)` color: var(--buttonTextColor); `; +const LandingContainer = styled.div` + border: 2px solid ${colors.lightGrey}; + border-radius: 0.5rem; + background-color: ${colors.white}; + margin-bottom: 3.813rem; +`; + +const AnimatedGridContainer = styled.div` + width: 96%; + height: 355px; + margin-left: 2rem; + position: relative; +`; + const Div = ({ children }: { children: ReactNode }) => { return
{children}
; }; + +const numOffers = 10; + export default function Landing() { - const { config } = useConfigContext(); const { isLteS } = useBreakpoints(); const navigate = useKeepQueryParamsNavigate(); const isCustomStoreFront = useCustomStoreQueryParameter("isCustomStoreFront"); @@ -107,6 +126,61 @@ export default function Landing() { const withUnderBanner = bannerUrl && realBannerImgPosition === "under"; const TitleAndDescriptionWrapper = withUnderBanner ? Layout : Div; const LayoutWrapper = isSideNavBar ? Grid : DarkerBackground; + const { products, isLoading, isError, sellerLensProfilePerSellerId } = + useProductsByFilteredOffers({ + voided: false, + valid: true, + first: numOffers, + quantityAvailable_gte: 1 + }); + + const shuffledOffers = useMemo(() => { + try { + return extractUniqueRandomProducts({ + products, + quantity: numOffers + }); + } catch (error) { + console.error(error); + return products; + } + }, [products]); + + const offerImages = useMemo(() => { + return shuffledOffers + ?.slice(0, 8) + .map((offer) => { + const { mainImage } = getOfferDetails(offer.metadata); + return mainImage || offer?.metadata?.imageUrl; + }) + .filter((image): image is string => !!image); + }, [shuffledOffers]); + + const allProducts = useProducts( + { + onlyNotVoided: true, + onlyValid: true + }, + { + enableCurationList: true, + withNumExchanges: true, + refetchOnMount: true + } + ); + const collections = useSortOffers({ + type: "sellers", + data: allProducts?.sellers || [] + }); + + const sellerLensProfilePerSellerIdAllProducts = ( + allProducts?.sellers || [] + ).reduce((map, seller) => { + if (!map.has(seller.id) && !!seller.lensProfile) { + map.set(seller.id, seller.lensProfile); + } + return map; + }, new Map()); + return ( {isCustomStoreFront ? ( @@ -159,18 +233,21 @@ export default function Landing() { ) : ( - <> + - - + <GridWithZindex + alignItems="flex-start" + flexDirection="column" + padding="0.9375rem 2.5rem 2.5rem 2.5rem" + > + <Title tag="h1" fontWeight="600" fontSize="2.0625rem"> Tokenize, transfer and trade any physical asset as an NFT - + The first decentralized marketplace built on Boson Protocol @@ -183,36 +260,69 @@ export default function Landing() { - + + {offerImages.length > 0 && ( + + )} + - - - Commit to an Offer to receive a Redeemable NFT (rNFT) that can be - exchanged for the real-world item it represents - - - You can hold, transfer or easily trade your rNFT on the secondary - market - - - Redeem your rNFT to receive the underlying item. The rNFT will be - destroyed in the process. - - - + )} + - + + + Brands & Sellers + + View all + + + {isLoading + ? new Array(4) + .fill(0) + .map((_, index) => ) + : collections?.slice(0, 4)?.map((collection) => ( + + + + ))} + + + +