diff --git a/client/src/App.js b/client/src/App.js
index 9ba7ff78..0d8420fa 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -248,7 +248,10 @@ function App() {
}
/>
+
{nftsFromOwner?.map((nft, i, apiNftData) => (
<>
{isNftSpam ? (
@@ -17,8 +27,8 @@ const NftCard = ({ userFrom, nftsFromOwner, isNftSpam, nftCardRef, hidePrice })
) : (
<>
@@ -56,4 +68,4 @@ const NftCard = ({ userFrom, nftsFromOwner, isNftSpam, nftCardRef, hidePrice })
);
};
-export default NftCard;
\ No newline at end of file
+export default NftCard;
diff --git a/client/src/Components/UserActivityTab/UserActivityTab.css b/client/src/Components/UserActivityTab/UserActivityTab.css
new file mode 100644
index 00000000..fc1beb13
--- /dev/null
+++ b/client/src/Components/UserActivityTab/UserActivityTab.css
@@ -0,0 +1,240 @@
+.useractivitytab-component {
+ display: flex;
+ flex-direction: column;
+}
+.useractivitytab-table-container {
+ width: 100%;
+ height: 48px;
+ display: grid;
+ align-items: center;
+ grid-template-columns: 1.2fr 2.4fr 1.3fr 1.2fr 0.95fr 2fr 2.66fr 1fr;
+ position: relative;
+ font-family: "britanica-black";
+ font-size: 14px;
+ line-height: normal;
+}
+.useractivitytab-table-container::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ width: 100%;
+ height: 1px;
+ background-color: black;
+}
+.useractivitytab-table-container::after {
+ content: "";
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ height: 1px;
+ background-color: black;
+}
+.useractivitytab-table-container-price,
+.useractivitytab-table-container-qty {
+ display: flex;
+ justify-content: flex-end;
+}
+.useractivitytab-content-container-wrap {
+ display: grid;
+ align-items: center;
+ grid-template-columns: 1.2fr 2.4fr 1.3fr 1.2fr 0.95fr 2fr 2.66fr 1fr;
+ font-family: "britanica-heavy";
+ font-size: 14px;
+ line-height: normal;
+}
+.useractivitytab-content-container-wrap:nth-child(1n) {
+ margin-top: 20px;
+}
+.useractivitytab-content-container-methods-wrap {
+ font-family: "britanica-black";
+}
+.useractivitytab-content-container-nft-wrap {
+ display: flex;
+ align-items: center;
+}
+.useractivitytab-content-container-nft-wrap > img {
+ width: 50px;
+ height: 50px;
+ border-radius: 5px;
+}
+.useractivitytab-content-container-nft-wrap-info-wrap {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ margin-left: 9px;
+ height: 40px;
+}
+.useractivitytab-content-container-price-container {
+ display: flex;
+ justify-content: flex-end;
+ width: 100%;
+}
+.useractivitytab-content-container-price-wrap {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+ justify-content: space-between;
+ height: 40px;
+}
+.useractivitytab-content-container-price-wrap > span:nth-child(2) {
+ font-family: "britanica-regular";
+}
+.useractivitytab-content-container-qty-wrap {
+ display: flex;
+ justify-content: flex-end;
+}
+.useractivitytab-content-container-clipboard {
+ font-size: 14px;
+ position: absolute;
+ left: 110px;
+ top: -2px;
+ font-family: "britanica-black";
+ color: #f6d463;
+ /* background-color: red; */
+ animation: slide-bottom-up 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+.useractivitytab-content-container-clipboardlogo {
+ width: 14px;
+ height: 14px;
+ margin-left: 4px;
+}
+.useractivitytab-content-container-clipboardlogo:active {
+ transform: scale(0.85);
+}
+.useractivitytab-content-container-address-wrap {
+ position: relative;
+}
+@keyframes slide-bottom-up {
+ 0% {
+ transform: translateY(50px);
+ opacity: 0;
+ }
+ 100% {
+ transform: translateY(0);
+ opacity: 1;
+ }
+}
+.useractivitytab-address-copied {
+ width: 200px;
+ height: 30px;
+ font-size: 14px;
+ font-family: "britanica-black";
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: fixed;
+ left: 5vh;
+ top: 90vh;
+ border: 2px solid #f6d463;
+ padding: 5px;
+ border-radius: 10px;
+ animation: slide-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+ box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1);
+ background-color: white;
+}
+.home-post-link-copied-hide {
+ width: 200px;
+ height: 30px;
+ font-size: 14px;
+ font-family: "britanica-black";
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: fixed;
+ left: 5vh;
+ top: 90vh;
+ border: 2px solid #f6d463;
+ padding: 5px;
+ border-radius: 10px;
+ animation: hide-smooth 300ms;
+ box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1);
+ background-color: white;
+}
+@keyframes slide-in {
+ 0% {
+ transform: translateX(-150px);
+ }
+ 100% {
+ transform: translateX(0);
+ }
+}
+@keyframes hide-smooth {
+ 0% {
+ opacity: 100%;
+ }
+ 100% {
+ opacity: 0%;
+ }
+}
+@media (max-width: 1150px) {
+ .useractivitytab-table-container {
+ font-size: 12.6px; /* 0.9 */
+ height: 43.2px; /* 0.9 */
+ }
+ .useractivitytab-content-container-wrap {
+ font-size: 12.6px; /* 0.9 */
+ }
+ .useractivitytab-content-container-wrap:nth-child(1n) {
+ margin-top: 18px; /* 0.9 */
+ }
+ .useractivitytab-content-container-nft-wrap > img {
+ width: 45px; /* 0.9 */
+ height: 45px; /* 0.9 */
+ border-radius: 4.5px; /* 0.9 */
+ }
+ .useractivitytab-content-container-nft-wrap-info-wrap {
+ margin-left: 8.1px; /* 0.9 */
+ height: 36px; /* 0.9 */
+ }
+ .useractivitytab-content-container-price-wrap {
+ height: 36px; /* 0.9 */
+ }
+}
+@media (max-width: 1080px) {
+ .useractivitytab-table-container {
+ font-size: 11.9px; /* 0.85 */
+ height: 40.8px; /* 0.85 */
+ }
+ .useractivitytab-content-container-wrap {
+ font-size: 11.9px; /* 0.85 */
+ }
+ .useractivitytab-content-container-wrap:nth-child(1n) {
+ margin-top: 17px; /* 0.85 */
+ }
+ .useractivitytab-content-container-nft-wrap > img {
+ width: 42.5px; /* 0.85 */
+ height: 42.5px; /* 0.85 */
+ border-radius: 4.25px; /* 0.85 */
+ }
+ .useractivitytab-content-container-nft-wrap-info-wrap {
+ margin-left: 7.65px; /* 0.85 */
+ height: 34px; /* 0.85 */
+ }
+ .useractivitytab-content-container-price-wrap {
+ height: 34px; /* 0.85 */
+ }
+}
+@media (max-width: 870px) {
+ .useractivitytab-table-container {
+ height: 38.4px; /* 0.8 */
+ font-size: 11.2px; /* 0.85 */
+ }
+ .useractivitytab-content-container-wrap {
+ font-size: 11.2px; /* 0.85 */
+ }
+ .useractivitytab-content-container-wrap:nth-child(1n) {
+ margin-top: 16px; /* 0.8 */
+ }
+ .useractivitytab-content-container-nft-wrap > img {
+ width: 40px; /* 0.8 */
+ height: 40px; /* 0.8 */
+ border-radius: 4px; /* 0.8 */
+ }
+ .useractivitytab-content-container-nft-wrap-info-wrap {
+ margin-left: 7.2px; /* 0.8 */
+ height: 32px; /* 0.8 */
+ }
+ .useractivitytab-content-container-price-wrap {
+ height: 32px; /* 0.8 */
+ }
+}
diff --git a/client/src/Components/UserActivityTab/UserActivityTab.js b/client/src/Components/UserActivityTab/UserActivityTab.js
new file mode 100644
index 00000000..e4a052fc
--- /dev/null
+++ b/client/src/Components/UserActivityTab/UserActivityTab.js
@@ -0,0 +1,1008 @@
+import React, { useEffect, useMemo, useState } from "react";
+import "./UserActivityTab.css";
+import { v4 as uuidv4 } from "uuid";
+import Web3 from "web3";
+import useEth from "../../contexts/EthContext/useEth";
+import { Alchemy, Network } from "alchemy-sdk";
+import { concatStringFromTo } from "../../Utils/concatString";
+import { fr } from "date-fns/locale";
+import { formatDistanceToNow } from "date-fns";
+import copyLogo from "../../Assets/Image/copy-logo.svg";
+import {
+ collection,
+ query,
+ where,
+ orderBy,
+ onSnapshot,
+ getDocs,
+ getDoc,
+} from "@firebase/firestore";
+import { db } from "../../Configs/firebase";
+import { Link } from "react-router-dom";
+const UserActivityTab = ({ ethPrice, currentProfileUserWallet }) => {
+ const [concatArray, setConcatArray] = useState([]);
+ const [alchemyArray, setAlchemyArray] = useState([]);
+ const [final, setFinal] = useState([]);
+ const [AllTx, setAllTx] = useState([]);
+ const [AllSofanCollection, setAllSofanCollection] = useState([]);
+ const [allErc721Event, setAllErc721Event] = useState([]);
+ const [allErc20Event, setAllErc20Event] = useState([]);
+ const [web3Instance, setWeb3Instance] = useState();
+ const [isAddressCopiedClicked, setIsAddressCopiedClicked] = useState(false);
+ const [copyAddressAnimationHide, setCopyAddressAnimationHide] =
+ useState(false);
+ const [tempClipboard, setTempClipboard] = useState([]);
+ const [
+ isCopyClipboardAddressConfirmWalletClicked,
+ setIsCopyClipboardAddressConfirmWalletClicked,
+ ] = useState([]);
+ const [displayInfoFromBackendAvailable, setDisplayInfoFromBackendAvailable] =
+ useState(true);
+ const [userProfileSpecificData, setUserProfileSpecificData] = useState();
+ const { marketplaceAddress } = useEth();
+
+ const settings = {
+ apiKey: "34lcNFh-vbBqL9ignec_nN40qLHVOfSo",
+ network: Network.ETH_GOERLI,
+ maxRetries: 10,
+ };
+ const alchemy = new Alchemy(settings);
+ useMemo(() => {
+ if (
+ AllTx.length != 0 &&
+ AllSofanCollection.length != 0 &&
+ allErc721Event.length != 0 &&
+ allErc20Event.length != 0
+ ) {
+ console.log("Alltx", AllTx);
+ console.log("all Sofan Collection", AllSofanCollection);
+ let tempConcatArray = [];
+ let tempAlchemyArray = [];
+ for (let i = 0; i < AllTx.result.length; i++) {
+ const txElement = AllTx.result[i];
+ // Handle Collection specific tx
+ for (let i = 0; i < AllSofanCollection.length; i++) {
+ const collectionAddressElement = AllSofanCollection[i];
+ // Check if Mint
+ if (
+ collectionAddressElement.toLowerCase() ===
+ txElement.to.toLowerCase() &&
+ txElement.functionName.split("(")[0] === "mint" &&
+ txElement.isError === "0"
+ ) {
+ // Add tx to mint array
+ const decodedParams = web3Instance.eth.abi.decodeParameters(
+ [
+ { type: "address", name: "to" },
+ { type: "uint256", name: "quantity" },
+ { type: "uint256", name: "value" },
+ ],
+ txElement.input.slice(
+ txElement.methodId.length,
+ txElement.input.length
+ )
+ );
+ let tempObj = {
+ ...txElement,
+ functionName: "Mint",
+ quantity: decodedParams.quantity,
+ usdcValue: decodedParams.value,
+ };
+
+ // console.log(allErc721Event);
+ for (let i = 0; i < allErc721Event.result.length; i++) {
+ const allErc721EventElement = allErc721Event.result[i];
+ if (
+ txElement.hash.toLowerCase() ===
+ allErc721EventElement.hash.toLowerCase()
+ ) {
+ let tempObjForAlchemy = {
+ contractAddress: txElement.to,
+ tokenId: allErc721EventElement.tokenID,
+ tokenType: "ERC721",
+ };
+ tempAlchemyArray.push(tempObjForAlchemy);
+ tempConcatArray.push({
+ ...tempObj,
+ tokenId: allErc721EventElement.tokenID,
+ nftContract: txElement.to,
+ });
+ }
+ }
+ } else if (
+ collectionAddressElement.toLowerCase() ===
+ txElement.to.toLowerCase() &&
+ txElement.functionName.split("(")[0] === "transferFrom" &&
+ txElement.isError === "0"
+ ) {
+ // transfer
+ const decodedParams = web3Instance.eth.abi.decodeParameters(
+ [
+ { type: "address", name: "from" },
+ { type: "address", name: "to" },
+ { type: "uint256", name: "tokens" },
+ ],
+ txElement.input.slice(
+ txElement.methodId.length,
+ txElement.input.length
+ )
+ );
+ let tempObj = {
+ ...txElement,
+ functionName: "transferFrom",
+ tokenId: decodedParams.tokens,
+ nftContract: txElement.to,
+ };
+ tempConcatArray.push(tempObj);
+ let tempObjForAlchemy = {
+ contractAddress: txElement.to,
+ tokenId: decodedParams.tokens,
+ tokenType: "ERC721",
+ };
+ tempAlchemyArray.push(tempObjForAlchemy);
+ }
+ } // TODO: Maybe: add else if to detect if someone transfered to us a nft linked to Sofan with the allErc721Event array
+ // add if else to handle marketPlace address tx
+ if (
+ // TODO: only for test. should be replaced by marketplaceAddress.
+ "0x7082cc65e582de32a7cad11fdc396b02490b97dd".toLowerCase() ===
+ txElement.to.toLowerCase() &&
+ txElement.functionName.split("(")[0] === "listToSell" &&
+ txElement.isError === "0"
+ ) {
+ const decodedParams = web3Instance.eth.abi.decodeParameters(
+ [
+ { type: "address", name: "_contract" },
+ { type: "uint256", name: "_tokenId" },
+ { type: "uint256", name: "_price" },
+ ],
+ txElement.input.slice(
+ txElement.methodId.length,
+ txElement.input.length
+ )
+ );
+
+ let tempObj = {
+ ...txElement,
+ functionName: "List",
+ tokenId: decodedParams._tokenId,
+ price: decodedParams._price,
+ nftContract: decodedParams._contract,
+ };
+ tempConcatArray.push(tempObj);
+
+ let tempObjForAlchemy = {
+ contractAddress: decodedParams._contract,
+ tokenId: decodedParams._tokenId,
+ tokenType: "ERC721",
+ };
+ tempAlchemyArray.push(tempObjForAlchemy);
+ }
+ if (
+ // TODO: only for test. should be replaced by marketplaceAddress.
+ "0x7082cc65e582de32a7cad11fdc396b02490b97dd".toLowerCase() ===
+ txElement.to.toLowerCase() &&
+ txElement.functionName.split("(")[0] === "cancelListing" &&
+ txElement.isError === "0"
+ ) {
+ const decodedParams = web3Instance.eth.abi.decodeParameters(
+ [{ type: "address", name: "itemId" }],
+ txElement.input.slice(
+ txElement.methodId.length,
+ txElement.input.length
+ )
+ );
+ let tempObj = {
+ ...txElement,
+ functionName: "Cancel",
+ listingId: decodedParams.itemId,
+ // nftContract: decodedParams._contract
+ };
+ tempConcatArray.push(tempObj);
+ // request token Id from Listing Id
+ // let tempObjForAlchemy = {
+ // contractAddress: txElement.to,
+ // tokenId: decodedParams._tokenId,
+ // tokenType: "ERC721",
+ // };
+ // tempAlchemyArray.push(tempObjForAlchemy);
+ }
+ if (
+ // TODO: only for test. should be replaced by marketplaceAddress.
+ "0x7082cc65e582de32a7cad11fdc396b02490b97dd".toLowerCase() ===
+ txElement.to.toLowerCase() &&
+ txElement.functionName.split("(")[0] === "buyListing" &&
+ txElement.isError === "0"
+ ) {
+ const decodedParams = web3Instance.eth.abi.decodeParameters(
+ [
+ { type: "address", name: "nftAddress" }, // correspond à _receiverAddress
+ { type: "uint256", name: "tokenId" },
+ ],
+ txElement.input.slice(
+ txElement.methodId.length,
+ txElement.input.length
+ )
+ );
+ let tempObj = {
+ ...txElement,
+ functionName: "Buy",
+ tokenId: decodedParams.tokenId,
+ };
+ // tempConcatArray.push(tempObj);
+ for (let i = 0; i < allErc721Event.result.length; i++) {
+ const allErc721EventElement = allErc721Event.result[i];
+ if (
+ txElement.hash.toLowerCase() ===
+ allErc721EventElement.hash.toLowerCase()
+ ) {
+ let tempObjForAlchemy = {
+ contractAddress: txElement.to,
+ tokenId: allErc721EventElement.tokenID,
+ tokenType: "ERC721",
+ };
+ tempAlchemyArray.push(tempObjForAlchemy);
+ tempConcatArray.push({
+ ...tempObj,
+ tokenId: allErc721EventElement.tokenID,
+ nftContract: allErc721EventElement.contractAddress,
+ });
+ }
+ }
+ }
+ if (
+ // TODO: only for test. should be replaced by marketplaceAddress.
+ "0x7082cc65e582de32a7cad11fdc396b02490b97dd".toLowerCase() ===
+ txElement.to.toLowerCase() &&
+ txElement.functionName.split("(")[0] === "acceptBid" &&
+ txElement.isError === "0"
+ ) {
+ const decodedParams = web3Instance.eth.abi.decodeParameters(
+ [
+ { type: "address", name: "_contract" },
+ { type: "uint256", name: "_tokenId" },
+ { type: "uint256", name: "_offerPrice" },
+ { type: "address", name: "_receiver" },
+ ],
+ txElement.input.slice(
+ txElement.methodId.length,
+ txElement.input.length
+ )
+ );
+ let tempObj = {
+ ...txElement,
+ functionName: "Sell",
+ tokenId: decodedParams._tokenId,
+ usdc: decodedParams._offerPrice,
+ nftContract: decodedParams._contract,
+ };
+ tempConcatArray.push(tempObj);
+ let tempObjForAlchemy = {
+ contractAddress: decodedParams._contract,
+ tokenId: decodedParams._tokenId,
+ tokenType: "ERC721",
+ };
+ tempAlchemyArray.push(tempObjForAlchemy);
+ }
+ if (
+ // TODO: only for test. should be replaced by marketplaceAddress. Use this if in offer made
+ // Not display in Activity but in offers made so use different array
+ "0x7082cc65e582de32a7cad11fdc396b02490b97dd".toLowerCase() ===
+ txElement.to.toLowerCase() &&
+ txElement.functionName.split("(")[0] === "placeBid" &&
+ txElement.isError === "0"
+ ) {
+ // Not needed
+ let tempObj = { ...txElement, functionName: "placeBid" };
+ }
+ }
+ for (let i = 0; i < allErc721Event.result.length; i++) {
+ const allErc721Element = allErc721Event.result[i];
+ for (let i = 0; i < AllSofanCollection.length; i++) {
+ const sofanCollectionElement = AllSofanCollection[i];
+ for (let i = 0; i < allErc20Event.result.length; i++) {
+ const allErc20Element = allErc20Event.result[i];
+ if (
+ // handle Buy from bid accepted by other user and Sell from other user that buy user's listing
+ //
+ allErc721Element.contractAddress.toLowerCase() ===
+ sofanCollectionElement.toLowerCase() &&
+ allErc20Element.hash.toLowerCase() ===
+ allErc721Element.hash.toLowerCase() &&
+ allErc721Element.from.toLowerCase() !==
+ "0x0000000000000000000000000000000000000000".toLowerCase() &&
+ (i != 0
+ ? allErc20Element.hash !== allErc20Event.result[i - 1].hash
+ : true)
+ ) {
+ // TODO: mimic object from final array but add only used property in DOM
+ // console.log(currentProfileUserWallet.toLowerCase());
+ let tempObj = {
+ blockNumber: allErc721Element.blockNumber,
+ hash: allErc721Element.hash,
+ from: allErc721Element.from,
+ to: allErc721Element.to,
+ value: allErc20Element.value, // + part de sofan et part de l'athlete => call le contrat pour connaitre le montant de royalties ou call les transfert erc20 de l'autre user puis les 2 avec le meme hash alors somme la value
+ timeStamp: allErc20Element.timeStamp,
+ tokenId: allErc721Element.tokenID,
+ nftContract: allErc721Element.contractAddress,
+ functionName:
+ allErc721Element.from.toLowerCase() ===
+ currentProfileUserWallet.toLowerCase()
+ ? "Sell Bid"
+ : "Buy Bid",
+ };
+ tempConcatArray.push(tempObj);
+ }
+ }
+ }
+ }
+ // console.log("before", tempConcatArray);
+ if (tempConcatArray) {
+ for (let i = 0; i < tempConcatArray.length; i++) {
+ const element = tempConcatArray[i];
+ // element.from = concatStringFromTo(element.from, 1, 4, true, true, 5);
+ // element.to = concatStringFromTo(element.to, 1, 4, true, true, 5);
+ element.timeStamp = formatDistanceToNow(element.timeStamp * 1000, {
+ locale: fr,
+ addSuffix: true,
+ });
+ element.timeStamp = element.timeStamp.replace("environ ", "");
+ const tempObj = {
+ ...element,
+ fromDisplay: concatStringFromTo(element.from, 1, 4, true, true, 5),
+ toDisplay: concatStringFromTo(element.to, 1, 4, true, true, 5),
+ };
+ tempConcatArray[i] = tempObj;
+ }
+ }
+ console.log("after first useEffect", tempConcatArray);
+ setConcatArray(tempConcatArray);
+ setAlchemyArray(tempAlchemyArray);
+ }
+ }, [AllTx, AllSofanCollection, allErc721Event, allErc20Event]);
+ useMemo(() => {
+ // TODO: call API pour image, collection name, prix
+ const tryMe = async () => {
+ if (alchemyArray.length != 0) {
+ console.log("Lachemy Array to get metadata", alchemyArray);
+ try {
+ const res = await alchemy.nft.getNftMetadataBatch(alchemyArray, {
+ refreshCache: false,
+ });
+ console.log("getNftMetadata response", res);
+ // console.log("should be the same as after first useEffect", concatArray);
+ var tempConcatArray = [...concatArray];
+ // console.log(tempConcatArray);
+ for (let i = 0; i < res.length; i++) {
+ const alchemyMetadataElement = res[i];
+ for (let i = 0; i < concatArray.length; i++) {
+ const tempConcatArrayElement = concatArray[i];
+ if (
+ alchemyMetadataElement.tokenId ===
+ tempConcatArrayElement.tokenId &&
+ alchemyMetadataElement.contract.address.toLowerCase() ===
+ tempConcatArrayElement.nftContract.toLowerCase()
+ ) {
+ const tempobj = {
+ ...tempConcatArrayElement,
+ title: concatStringFromTo(
+ alchemyMetadataElement.rawMetadata.name,
+ 22,
+ 22,
+ true,
+ false,
+ 0
+ ),
+ image: alchemyMetadataElement.rawMetadata.image,
+ };
+ tempConcatArray[i] = tempobj;
+ }
+ }
+ }
+
+ for (let i = 0; i < tempConcatArray.length; i++) {
+ const tempConcatArrayElement = tempConcatArray[i];
+ const tempArray = [];
+ // console.log("tempCVsdfArray", allErc20Event.result.length);
+ for (let i = 0; i < allErc20Event.result.length; i++) {
+ const allErc20Element = allErc20Event.result[i];
+ // console.log(i);
+ if (
+ tempConcatArrayElement.hash.toLowerCase() ===
+ allErc20Element.hash.toLowerCase()
+ ) {
+ // console.log("push");
+ tempArray.push(allErc20Element);
+ }
+ }
+ if (tempArray.length != 0) {
+ const sumOfUsdcValues = tempArray.reduce((sum, current) => {
+ return sum + parseInt(current.value);
+ }, 0);
+ // console.log(sumOfUsdcValues, tempConcatArrayElement);
+ if (sumOfUsdcValues.toString().length > 6) {
+ const beginning = sumOfUsdcValues
+ .toString()
+ .slice(0, sumOfUsdcValues.toString().length - 6);
+ const ending = sumOfUsdcValues
+ .toString()
+ .slice(
+ sumOfUsdcValues.toString().length - 6,
+ sumOfUsdcValues.toString().length - 4
+ );
+ const tempObj = {
+ ...tempConcatArrayElement,
+ usdc: beginning + "," + ending,
+ };
+ tempConcatArray[i] = tempObj;
+ } else if (sumOfUsdcValues.toString().length === 6) {
+ const ending = sumOfUsdcValues.toString().slice(0, 2);
+ const tempObj = {
+ ...tempConcatArrayElement,
+ usdc: "0," + ending,
+ };
+ tempConcatArray[i] = tempObj;
+ } else if (sumOfUsdcValues.toString().length === 5) {
+ const ending = sumOfUsdcValues.toString().slice(0, 1);
+ const tempObj = {
+ ...tempConcatArrayElement,
+ usdc: "0,0" + ending,
+ };
+ tempConcatArray[i] = tempObj;
+ } else if (0 === sumOfUsdcValues.toString().length) {
+ const tempObj = {
+ ...tempConcatArrayElement,
+ usdc: "error",
+ };
+ tempConcatArray[i] = tempObj;
+ } else if (
+ sumOfUsdcValues.toString().length > 0 &&
+ sumOfUsdcValues.toString().length < 6
+ ) {
+ const tempObj = {
+ ...tempConcatArrayElement,
+ usdc: "--",
+ };
+ tempConcatArray[i] = tempObj;
+ }
+
+ //
+ }
+ }
+ setFinal(tempConcatArray);
+ console.log("final array mapped", tempConcatArray);
+
+ //
+ let tempTempClipboard = [];
+ for (let i = 0; i < tempConcatArray.length; i++) {
+ // const element = tempConcatArray[i];
+ // const tempObj = {
+ // i: uuidv4()
+ // }
+ tempTempClipboard.push(false);
+ tempTempClipboard.push(false);
+ }
+ setTempClipboard(tempTempClipboard);
+ setIsCopyClipboardAddressConfirmWalletClicked(tempTempClipboard);
+ } catch (error) {
+ console.error(error);
+ }
+ }
+ };
+ tryMe();
+ }, [alchemyArray]);
+
+ useEffect(() => {
+ const web3Instance = new Web3(
+ new Web3.providers.HttpProvider(process.env.REACT_APP_INFURA_ID)
+ );
+ setWeb3Instance(web3Instance);
+ const { abi } = require("../../contracts/Sofan.json");
+ const contract = new web3Instance.eth.Contract(
+ abi,
+ // Replace this with the address of your deployed contract
+ marketplaceAddress
+ );
+ const load = async () => {
+ // TODO: V2 Can be optimizied be querying NFT contract that user historically interact with. Meaning the upper for loop will loop through less adresses (we can assume that nb of contract interacted with << all Sofan collection)
+ const tempAllSofanCollectionArray = await contract.methods
+ .getAllCollection()
+ .call();
+ setAllSofanCollection(tempAllSofanCollectionArray);
+ console.log("je suis", tempAllSofanCollectionArray);
+ const fetchAllTx = await fetch(
+ `https://api-goerli.etherscan.io/api?module=account&action=txlist&address=${currentProfileUserWallet}&startblock=9458446&endblock=99999999&page=1&offset=25&sort=desc&apikey=${process.env.REACT_APP_ETHERSCAN_ID}`
+ );
+ const dataAllTx = await fetchAllTx.json();
+ setAllTx(dataAllTx);
+
+ const fetchAllErc721TransferEvent = await fetch(
+ `https://api-goerli.etherscan.io/api?module=account&action=tokennfttx&address=${currentProfileUserWallet}&page=1&offset=25&startblock=9458446&endblock=99999999&sort=desc&apikey=${process.env.REACT_APP_ETHERSCAN_ID}`
+ );
+ const dataAllErc721TransferEvent =
+ await fetchAllErc721TransferEvent.json();
+ console.log("ERC721", dataAllErc721TransferEvent);
+ setAllErc721Event(dataAllErc721TransferEvent);
+
+ const fetchAllErc20TransferEvent = await fetch(
+ `https://api-goerli.etherscan.io/api?module=account&action=tokentx&address=${currentProfileUserWallet}&page=1&offset=100&startblock=9458446&endblock=27025780&sort=asc&apikey=${process.env.REACT_APP_ETHERSCAN_ID}`
+ );
+ const dataAllErc20TransferEvent = await fetchAllErc20TransferEvent.json();
+ setAllErc20Event(dataAllErc20TransferEvent);
+ console.log("ERC20", dataAllErc20TransferEvent);
+ };
+ load();
+ }, []);
+
+ function handleClickCopyConfirmWallet(e) {
+ navigator.clipboard.writeText(
+ e.target.parentElement.children[0].attributes[0].value
+ );
+ // setIsCopyClipboardAddressConfirmWalletClicked((prevState) => {
+ // const tt = [...tempClipboard];
+ // tt[e.target.name] = true;
+ // return tt;
+ // });
+ console.log(window);
+ setIsAddressCopiedClicked(true);
+ // const timeOutAnimationCopyClicked =
+ setTimeout(() => {
+ setCopyAddressAnimationHide(true);
+ }, 2000);
+ // clearTimeout(timeOutAnimationCopyClicked);
+ // const timeOutHideCopyClicked =
+ setTimeout(() => {
+ setIsAddressCopiedClicked(false);
+ setCopyAddressAnimationHide(false);
+ }, 2300);
+ }
+ // useEffect(() => {
+ // console.log(
+ // isCopyClipboardAddressConfirmWalletClicked[0] === tempClipboard[0]
+ // );
+ // let timeoutCopyConfirmWallet;
+ // for (
+ // let i = 0;
+ // i < isCopyClipboardAddressConfirmWalletClicked.length;
+ // i++
+ // ) {
+ // if (
+ // isCopyClipboardAddressConfirmWalletClicked[i] != tempClipboard[i] &&
+ // tempClipboard.length != 0
+ // ) {
+ // console.log("Timeout est lancé");
+ // timeoutCopyConfirmWallet = setTimeout(() => {
+ // setIsCopyClipboardAddressConfirmWalletClicked([...tempClipboard]);
+ // }, 3000);
+ // }
+ // }
+ // return () => clearTimeout(timeoutCopyConfirmWallet);
+ // }, [isCopyClipboardAddressConfirmWalletClicked]);
+
+ useEffect(() => {
+ const displayInfoFromBackend = async () => {
+ if (
+ final.length != 0 &&
+ currentProfileUserWallet &&
+ displayInfoFromBackendAvailable === true
+ ) {
+ const feedPostCollectionRef = collection(db, "users");
+ var userSpecificData;
+ try {
+ const tempUserSpecificQueryMetamask = query(
+ feedPostCollectionRef,
+ where("metamask", "==", currentProfileUserWallet)
+ );
+ const querySnapshot = await getDocs(tempUserSpecificQueryMetamask);
+ if (!querySnapshot.empty) {
+ querySnapshot.forEach((doc) => {
+ const userInfo = doc.data();
+ userSpecificData = userInfo;
+ console.log(userInfo);
+ });
+ } else {
+ // try web3auth
+ console.log("No metamask found");
+ const tempUserSpecificQueryWeb3auth = query(
+ feedPostCollectionRef,
+ where("web3auth", "==", currentProfileUserWallet)
+ );
+ const querySnapshot = await getDocs(tempUserSpecificQueryWeb3auth);
+ if (!querySnapshot.empty) {
+ querySnapshot.forEach((doc) => {
+ const userInfo = doc.data();
+ userSpecificData = userInfo;
+ console.log(userInfo);
+ });
+ } else {
+ console.log("No metamask or web3auth found");
+ }
+ }
+ } catch (error) {
+ console.error(error);
+ }
+ // console.log(userSpecificData);
+ const finalCopy = [...final];
+ for (let i = 0; i < finalCopy.length; i++) {
+ const element = finalCopy[i];
+ // Change fromDisplay address to UserSpecificQuery.username + add property linkId: UserSpecificQuery.id + if else for athlete redirection if needed
+ // Change toDisplay address to tempOtherUserSpecificQuery.username + add property linkId: UserSpecificQuery.id + if else for athlete redirection if needed
+ let tempOtherUserSpecificQuery;
+ if (
+ element.from.toLowerCase() ===
+ currentProfileUserWallet.toLowerCase()
+ ) {
+ // set element to new object with
+ const otherUserSpecificQuery = query(
+ feedPostCollectionRef,
+ where("metamask", "==", element.to)
+ );
+ const querySnapshot = await getDocs(otherUserSpecificQuery);
+ if (!querySnapshot.empty) {
+ querySnapshot.forEach((doc) => {
+ const userInfo = doc.data();
+ tempOtherUserSpecificQuery = userInfo;
+ console.log(userInfo);
+ });
+ } else {
+ console.log("No metamask found");
+ const tempUserSpecificQueryWeb3auth = query(
+ feedPostCollectionRef,
+ where("web3auth", "==", element.to)
+ );
+ const querySnapshot = await getDocs(
+ tempUserSpecificQueryWeb3auth
+ );
+ if (!querySnapshot.empty) {
+ querySnapshot.forEach((doc) => {
+ const userInfo = doc.data();
+ tempOtherUserSpecificQuery = userInfo;
+ console.log(userInfo);
+ });
+ } else {
+ console.log("No metamask or web3auth found");
+ }
+ }
+ let tempNewObject;
+ if (userSpecificData) {
+ let tempObj = {
+ ...element,
+ fromAccountType: userSpecificData.account_type,
+ fromAccountId: userSpecificData.id,
+ oldFromDisplay: element.fromDisplay,
+ firebaseFromId: userSpecificData.id,
+ };
+ // handle string display
+ tempObj.fromDisplay = userSpecificData.display_name;
+ tempNewObject = tempObj;
+ }
+ if (tempOtherUserSpecificQuery) {
+ let tempObj = tempNewObject
+ ? {
+ ...tempNewObject,
+ toAccountType: tempOtherUserSpecificQuery.account_type,
+ toAccountId: tempOtherUserSpecificQuery.id,
+ oldToDisplay: element.toDisplay,
+ firebaseToId: tempOtherUserSpecificQuery.id,
+ }
+ : {
+ ...element,
+ toAccountType: tempOtherUserSpecificQuery.account_type,
+ toAccountId: tempOtherUserSpecificQuery.id,
+ oldToDisplay: element.toDisplay,
+ firebaseToId: tempOtherUserSpecificQuery.id,
+ };
+ // handle string display
+ tempObj.toDisplay = tempOtherUserSpecificQuery.display_name;
+ tempNewObject = tempObj;
+ }
+ if (tempNewObject) {
+ finalCopy[i] = tempNewObject;
+ }
+ // else do nothing
+ } else if (
+ element.to.toLowerCase() === currentProfileUserWallet.toLowerCase()
+ ) {
+ // set element to new object with
+ const otherUserSpecificQuery = query(
+ feedPostCollectionRef,
+ where("metamask", "==", element.from)
+ );
+ const querySnapshot = await getDocs(otherUserSpecificQuery);
+ if (!querySnapshot.empty) {
+ querySnapshot.forEach((doc) => {
+ const userInfo = doc.data();
+ tempOtherUserSpecificQuery = userInfo;
+ console.log(userInfo);
+ });
+ } else {
+ console.log("No metamask found");
+ const tempUserSpecificQueryWeb3auth = query(
+ feedPostCollectionRef,
+ where("web3auth", "==", element.from)
+ );
+ const querySnapshot = await getDocs(
+ tempUserSpecificQueryWeb3auth
+ );
+ if (!querySnapshot.empty) {
+ querySnapshot.forEach((doc) => {
+ const userInfo = doc.data();
+ tempOtherUserSpecificQuery = userInfo;
+ console.log(userInfo);
+ });
+ } else {
+ console.log("No metamask or web3auth found");
+ }
+ }
+ let tempNewObject;
+ if (userSpecificData) {
+ let tempObj = {
+ ...element,
+ toAccountType: userSpecificData.account_type,
+ toAccountId: userSpecificData.id,
+ oldToDisplay: element.toDisplay,
+ firebaseToId: userSpecificData.id,
+ };
+ // handle string display
+ tempObj.toDisplay = userSpecificData.display_name;
+ tempNewObject = tempObj;
+ }
+ if (tempOtherUserSpecificQuery) {
+ let tempObj = tempNewObject
+ ? {
+ ...tempNewObject,
+ fromAccountType: tempOtherUserSpecificQuery.account_type,
+ fromAccountId: tempOtherUserSpecificQuery.id,
+ oldFromDisplay: element.fromDisplay,
+ firebaseFromId: tempOtherUserSpecificQuery.id,
+ }
+ : {
+ ...element,
+ fromAccountType: tempOtherUserSpecificQuery.account_type,
+ fromAccountId: tempOtherUserSpecificQuery.id,
+ oldFromDisplay: element.fromDisplay,
+ firebaseFromId: tempOtherUserSpecificQuery.id,
+ };
+ // handle string display
+ tempObj.fromDisplay = tempOtherUserSpecificQuery.display_name;
+ tempNewObject = tempObj;
+ }
+ if (tempNewObject) {
+ finalCopy[i] = tempNewObject;
+ }
+ // else do nothing
+ }
+ }
+ // console.log(finalCopy);
+ setUserProfileSpecificData(userSpecificData);
+ setDisplayInfoFromBackendAvailable(false);
+ setFinal(finalCopy);
+ }
+ };
+ displayInfoFromBackend();
+ }, [final]);
+
+ return (
+ <>
+
+
+
+
NFT
+
Price
+
Quantity
+
+
from
+
To
+
Date
+
+
+ {final.length != 0
+ ? final.length != 0 &&
+ final?.map((tx, index, apiNftData) => (
+
+
+ {tx.functionName}
+
+
+
+
+ {tx?.title ? tx.title : "CollectionName"}
+ #{tx.tokenId}
+
+
+
+
+ {tx?.usdc ? tx.usdc : "--"} €
+
+ {/* {(
+ apiNftData[index]?.contract?.openSea?.floorPrice *
+ ethPrice
+ ).toLocaleString("fr-FR", {
+ maximumFractionDigits: 1,
+ })} */}
+ {tx?.usdc ? "0.00" + " ETH" : "--"}
+
+
+
+
+ {tx?.quantity ? tx.quantity : "1"}
+
+
+ {tx.fromDisplay.slice(0, 2) != "0x" ? (
+
+ {tx.firebaseFromId === userProfileSpecificData.id ? (
+
{tx.fromDisplay}
+ ) : (
+
+ {tx.fromDisplay}
+
+ )}
+
+
+ {tx.oldFromDisplay}
+
+
+
+
+ ) : (
+
+ {/* tout le contenu n'est display que si l'adresse n'appartient pas à un compte Sofan
+ Si l'adresse appartient à un compte Sofan alors il faut display le nom + redirection vers le profil.
+ */}
+
{tx.fromDisplay}
+
+
+ )}
+ {tx.toDisplay.slice(0, 2) != "0x" ? (
+
+ {tx.firebaseToId === userProfileSpecificData.id ? (
+
{tx.toDisplay}
+ ) : (
+
+ {tx.toDisplay}
+
+ )}
+
+
+ {tx.oldToDisplay}
+
+
+
+
+ ) : (
+
+ {/* tout le contenu n'est display que si l'adresse n'appartient pas à un compte Sofan
+ Si l'adresse appartient à un compte Sofan alors il faut display le nom + redirection vers le profil.
+ */}
+
{tx.toDisplay}
+
+
+ )}
+ {/*
*/}
+
+ {/* TODO: convert to date */}
+ {tx.timeStamp}
+
+
+ ))
+ : concatArray.length != 0 &&
+ concatArray?.map((tx, index, apiNftData) => (
+
+
+ {tx.functionName}
+
+
+
+
+ {"CollectionName"}
+ #{tx.tokenId}
+
+
+
+
+ {"Price"} ETH
+
+ {/* {(
+ apiNftData[index]?.contract?.openSea?.floorPrice *
+ ethPrice
+ ).toLocaleString("fr-FR", {
+ maximumFractionDigits: 1,
+ })} */}
+ €
+
+
+
+
+ {tx?.quantity}
+
+
+
+ {tx.fromDisplay}
+
+
+ {tx.toDisplay}
+
+
+
+ {/* TODO: convert to date */}
+ {tx.timeStamp}
+
+
+ ))}
+
+
+ {isAddressCopiedClicked && (
+ <>
+
+ Copié dans le presse-papier !
+
+
+ )}
+
+ );
+};
+
+export default UserActivityTab;
diff --git a/client/src/Components/UserOffersMade/UserOffersMade.css b/client/src/Components/UserOffersMade/UserOffersMade.css
new file mode 100644
index 00000000..b325cac0
--- /dev/null
+++ b/client/src/Components/UserOffersMade/UserOffersMade.css
@@ -0,0 +1,162 @@
+.useroffersmade-component {
+ display: flex;
+ flex-direction: column;
+}
+.useroffersmade-table-container {
+ width: 100%;
+ height: 48px;
+ display: grid;
+ align-items: center;
+ grid-template-columns: 2.1fr 2fr 1fr 1.5fr 1.5fr 1.1fr 1fr;
+ position: relative;
+ font-family: "britanica-black";
+ font-size: 14px;
+ line-height: normal;
+}
+.useroffersmade-table-container::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ width: 100%;
+ height: 1px;
+ background-color: rgba(0, 0, 0, 0.5);
+}
+.useroffersmade-table-container::after {
+ content: "";
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ height: 1px;
+ background-color: rgba(0, 0, 0, 0.5);
+}
+.useroffersmade-table-container-offer {
+ display: flex;
+ justify-content: flex-end;
+}
+.useroffersmade-table-container-date {
+ display: flex;
+ justify-content: flex-end;
+}
+.useroffersmade-content-container-wrap {
+ display: grid;
+ align-items: center;
+ grid-template-columns: 2.1fr 2fr 1fr 1.5fr 1.5fr 1.1fr 1fr;
+ font-family: "britanica-heavy";
+ font-size: 14px;
+ line-height: normal;
+}
+.useroffersmade-content-container-wrap:nth-child(1n) {
+ margin-top: 20px;
+}
+.useroffersmade-content-container-nft-wrap {
+ display: flex;
+ align-items: center;
+}
+.useroffersmade-content-container-nft-wrap > img {
+ width: 50px;
+ height: 50px;
+ border-radius: 5px;
+}
+.useroffersmade-content-container-nft-wrap-info-wrap {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ margin-left: 9px;
+ height: 40px;
+}
+.useroffersmade-content-container-offer-wrap {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+ justify-content: space-between;
+ height: 40px;
+}
+.useroffersmade-content-container-offer-wrap > span:nth-child(2) {
+ font-family: "britanica-regular";
+}
+.useroffersmade-content-container-date {
+ display: flex;
+ justify-content: flex-end;
+}
+/* @media (max-width: 1250px) {
+ .useroffersmade-table-container {
+ grid-template-columns: 3.8fr 2.4fr 2.3fr 2.5fr 1.5fr 2fr 2.2fr 1.1fr 0.75fr;
+ }
+ .useroffersmade-content-container-wrap {
+ grid-template-columns: 3.8fr 2.4fr 2.3fr 2.5fr 1.5fr 2fr 2.2fr 1.1fr 0.75fr;
+ }
+ } */
+@media (max-width: 1150px) {
+ .useroffersmade-table-container {
+ font-size: 12.6px; /* 0.9 */
+ height: 43.2px; /* 0.9 */
+ /* grid-template-columns: 3.8fr 2.4fr 2.3fr 2.5fr 1.5fr 2fr 2.2fr 1.1fr 0.8fr; */
+ }
+ .useroffersmade-content-container-wrap {
+ font-size: 12.6px; /* 0.9 */
+ /* grid-template-columns: 3.8fr 2.4fr 2.3fr 2.5fr 1.5fr 2fr 2.2fr 1.1fr 0.8fr; */
+ }
+ .useroffersmade-content-container-wrap:nth-child(1n) {
+ margin-top: 18px; /* 0.9 */
+ }
+ .useroffersmade-content-container-nft-wrap > img {
+ width: 45px; /* 0.9 */
+ height: 45px; /* 0.9 */
+ border-radius: 4.5px; /* 0.9 */
+ }
+ .useroffersmade-content-container-nft-wrap-info-wrap {
+ margin-left: 8.1px; /* 0.9 */
+ height: 36px; /* 0.9 */
+ }
+ .useroffersmade-content-container-offer-wrap {
+ height: 36px; /* 0.9 */
+ }
+}
+@media (max-width: 1080px) {
+ .useroffersmade-table-container {
+ height: 40.8px; /* 0.85 */
+ /* grid-template-columns: 3.8fr 2.4fr 2.3fr 2.5fr 1.5fr 2fr 2.2fr 1.1fr 0.83fr; */
+ }
+ .useroffersmade-content-container-wrap {
+ /* grid-template-columns: 3.8fr 2.4fr 2.3fr 2.5fr 1.5fr 2fr 2.2fr 1.1fr 0.83fr; */
+ }
+ .useroffersmade-content-container-wrap:nth-child(1n) {
+ margin-top: 17px; /* 0.85 */
+ }
+ .useroffersmade-content-container-nft-wrap > img {
+ width: 42.5px; /* 0.85 */
+ height: 42.5px; /* 0.85 */
+ border-radius: 4.25px; /* 0.85 */
+ }
+ .useroffersmade-content-container-nft-wrap-info-wrap {
+ margin-left: 7.65px; /* 0.85 */
+ height: 34px; /* 0.85 */
+ }
+ .useroffersmade-content-container-offer-wrap {
+ height: 34px; /* 0.85 */
+ }
+}
+@media (max-width: 870px) {
+ .useroffersmade-table-container {
+ height: 38.4px; /* 0.8 */
+ /* grid-template-columns: 3.8fr 2.4fr 2.3fr 2.5fr 1.5fr 2fr 2.2fr 1.1fr 0.88fr; */
+ }
+ .useroffersmade-content-container-wrap {
+ /* grid-template-columns: 3.8fr 2.4fr 2.3fr 2.5fr 1.5fr 2fr 2.2fr 1.1fr 0.88fr; */
+ }
+ .useroffersmade-content-container-wrap:nth-child(1n) {
+ margin-top: 16px; /* 0.8 */
+ }
+ .useroffersmade-content-container-nft-wrap > img {
+ width: 40px; /* 0.8 */
+ height: 40px; /* 0.8 */
+ border-radius: 4px; /* 0.8 */
+ }
+ .useroffersmade-content-container-nft-wrap-info-wrap {
+ margin-left: 7.2px; /* 0.8 */
+ height: 32px; /* 0.8 */
+ }
+ .useroffersmade-content-container-offer-wrap {
+ height: 32px; /* 0.8 */
+ }
+}
diff --git a/client/src/Components/UserOffersMade/UserOffersMade.js b/client/src/Components/UserOffersMade/UserOffersMade.js
new file mode 100644
index 00000000..f8e28998
--- /dev/null
+++ b/client/src/Components/UserOffersMade/UserOffersMade.js
@@ -0,0 +1,101 @@
+import React, { useEffect, useState } from "react";
+import "./UserOffersMade.css"
+const UserOffersMade = () => {
+ const [data, setData] = useState([]);
+
+ useEffect(() => {
+ const data = [
+ {
+ nft: {
+ image:
+ "https://firebasestorage.googleapis.com/v0/b/sofan-app.appspot.com/o/Rectangle%20131.png?alt=media&token=f394cf39-6fa3-475a-9f3e-9ac5a63c0027",
+ name: "JCVD",
+ id: "0",
+ },
+ price: {
+ eth: "0.50",
+ eur: "692.04",
+ },
+ methods: "Mint",
+ param: {
+ quantity: "1",
+ },
+ from: "Alexia Barrier",
+ to: "Gr3goir3",
+ time: "1 hour ago",
+ status: "Pending",
+ },
+ {
+ nft: {
+ image:
+ "https://firebasestorage.googleapis.com/v0/b/sofan-app.appspot.com/o/Rectangle%20131.png?alt=media&token=f394cf39-6fa3-475a-9f3e-9ac5a63c0027",
+ name: "JCVD",
+ id: "0",
+ },
+ price: {
+ eth: "0.50",
+ eur: "692.04",
+ },
+ methods: "Mint",
+ param: {
+ quantity: "1",
+ },
+ from: "Alexia Barrier",
+ to: "Gr3goir3",
+ time: "1 hour ago",
+ status: "Cancelled",
+ },
+ ];
+ setData(data);
+ }, []);
+
+ return (
+ <>
+
+
+
NFT
+
Offer
+
+
from
+
To
+
Status
+
Date
+
+
+ {data?.map((tx) => (
+
+
+
+
+ {tx.nft.name}
+ #{tx.nft.id}
+
+
+
+ {tx.price.eth} ETH
+ {tx.price.eur} €
+
+
+
+ {tx.from}
+
+
+ {tx.to}
+
+
+ {tx.status}
+
+
+
+ {tx.time}
+
+
+
+ ))}
+
+
+
+ );
+};
+
+export default UserOffersMade;
diff --git a/client/src/Components/UserOffersReceived/UserOffersReceived.css b/client/src/Components/UserOffersReceived/UserOffersReceived.css
new file mode 100644
index 00000000..95e94009
--- /dev/null
+++ b/client/src/Components/UserOffersReceived/UserOffersReceived.css
@@ -0,0 +1,183 @@
+.useroffersreceived-component {
+ display: flex;
+ flex-direction: column;
+}
+.useroffersreceived-table-container {
+ width: 100%;
+ height: 48px;
+ display: grid;
+ align-items: center;
+ grid-template-columns: 3.8fr 2.4fr 2.3fr 2.5fr 1.5fr 2fr 2.2fr 1.1fr 0.7fr;
+ position: relative;
+ font-family: "britanica-black";
+ font-size: 14px;
+ line-height: normal;
+}
+.useroffersreceived-table-container::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ width: 100%;
+ height: 1px;
+ background-color: rgba(0, 0, 0, 0.5);
+}
+.useroffersreceived-table-container::after {
+ content: "";
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ height: 1px;
+ background-color: rgba(0, 0, 0, 0.5);
+}
+.useroffersreceived-table-container-offer {
+ display: flex;
+ justify-content: flex-end;
+}
+.useroffersreceived-table-container-date {
+ display: flex;
+ justify-content: flex-end;
+}
+.useroffersreceived-content-container-wrap {
+ display: grid;
+ align-items: center;
+ grid-template-columns: 3.8fr 2.4fr 2.3fr 2.5fr 1.5fr 2fr 2.2fr 1.1fr 0.7fr;
+ font-family: "britanica-heavy";
+ font-size: 14px;
+ line-height: normal;
+}
+.useroffersreceived-content-container-wrap:nth-child(1n) {
+ margin-top: 20px;
+}
+.useroffersreceived-content-container-nft-wrap {
+ display: flex;
+ align-items: center;
+}
+.useroffersreceived-content-container-nft-wrap > img {
+ width: 50px;
+ height: 50px;
+ border-radius: 5px;
+}
+.useroffersreceived-content-container-nft-wrap-info-wrap {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ margin-left: 9px;
+ height: 40px;
+}
+.useroffersreceived-content-container-offer-wrap {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+ justify-content: space-between;
+ height: 40px;
+}
+.useroffersreceived-content-container-offer-wrap > span:nth-child(2) {
+ font-family: "britanica-regular";
+}
+.useroffersreceived-content-container-date {
+ display: flex;
+ justify-content: flex-end;
+}
+.useroffersreceived-content-container-bid {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.useroffersreceived-content-container-bid > img {
+ width: 20px;
+ height: 20px;
+}
+@media (max-width: 1250px) {
+ .useroffersreceived-table-container {
+ grid-template-columns: 3.8fr 2.4fr 2.3fr 2.5fr 1.5fr 2fr 2.2fr 1.1fr 0.75fr;
+ }
+ .useroffersreceived-content-container-wrap {
+ grid-template-columns: 3.8fr 2.4fr 2.3fr 2.5fr 1.5fr 2fr 2.2fr 1.1fr 0.75fr;
+ }
+}
+@media (max-width: 1150px) {
+ .useroffersreceived-table-container {
+ font-size: 12.6px; /* 0.9 */
+ height: 43.2px; /* 0.9 */
+ grid-template-columns: 3.8fr 2.4fr 2.3fr 2.5fr 1.5fr 2fr 2.2fr 1.1fr 0.8fr;
+ }
+ .useroffersreceived-content-container-wrap {
+ font-size: 12.6px; /* 0.9 */
+ grid-template-columns: 3.8fr 2.4fr 2.3fr 2.5fr 1.5fr 2fr 2.2fr 1.1fr 0.8fr;
+ }
+ .useroffersreceived-content-container-wrap:nth-child(1n) {
+ margin-top: 18px; /* 0.9 */
+ }
+ .useroffersreceived-content-container-nft-wrap > img {
+ width: 45px; /* 0.9 */
+ height: 45px; /* 0.9 */
+ border-radius: 4.5px; /* 0.9 */
+ }
+ .useroffersreceived-content-container-nft-wrap-info-wrap {
+ margin-left: 8.1px; /* 0.9 */
+ height: 36px; /* 0.9 */
+ }
+ .useroffersreceived-content-container-offer-wrap {
+ height: 36px; /* 0.9 */
+ }
+ .useroffersreceived-content-container-bid > img {
+ width: 18px; /* 0.9 */
+ height: 18px; /* 0.9 */
+ }
+}
+@media (max-width: 1080px) {
+ .useroffersreceived-table-container {
+ height: 40.8px; /* 0.85 */
+ grid-template-columns: 3.8fr 2.4fr 2.3fr 2.5fr 1.5fr 2fr 2.2fr 1.1fr 0.83fr;
+ }
+ .useroffersreceived-content-container-wrap {
+ grid-template-columns: 3.8fr 2.4fr 2.3fr 2.5fr 1.5fr 2fr 2.2fr 1.1fr 0.83fr;
+ }
+ .useroffersreceived-content-container-wrap:nth-child(1n) {
+ margin-top: 17px; /* 0.85 */
+ }
+ .useroffersreceived-content-container-nft-wrap > img {
+ width: 42.5px; /* 0.85 */
+ height: 42.5px; /* 0.85 */
+ border-radius: 4.25px; /* 0.85 */
+ }
+ .useroffersreceived-content-container-nft-wrap-info-wrap {
+ margin-left: 7.65px; /* 0.85 */
+ height: 34px; /* 0.85 */
+ }
+ .useroffersreceived-content-container-offer-wrap {
+ height: 34px; /* 0.85 */
+ }
+ .useroffersreceived-content-container-bid > img {
+ width: 17px; /* 0.85 */
+ height: 17px; /* 0.85 */
+ }
+}
+@media (max-width: 870px) {
+ .useroffersreceived-table-container {
+ height: 38.4px; /* 0.8 */
+ grid-template-columns: 3.8fr 2.4fr 2.3fr 2.5fr 1.5fr 2fr 2.2fr 1.1fr 0.88fr;
+ }
+ .useroffersreceived-content-container-wrap {
+ grid-template-columns: 3.8fr 2.4fr 2.3fr 2.5fr 1.5fr 2fr 2.2fr 1.1fr 0.88fr;
+ }
+ .useroffersreceived-content-container-wrap:nth-child(1n) {
+ margin-top: 16px; /* 0.8 */
+ }
+ .useroffersreceived-content-container-nft-wrap > img {
+ width: 40px; /* 0.8 */
+ height: 40px; /* 0.8 */
+ border-radius: 4px; /* 0.8 */
+ }
+ .useroffersreceived-content-container-nft-wrap-info-wrap {
+ margin-left: 7.2px; /* 0.8 */
+ height: 32px; /* 0.8 */
+ }
+ .useroffersreceived-content-container-offer-wrap {
+ height: 32px; /* 0.8 */
+ }
+ .useroffersreceived-content-container-bid > img {
+ width: 16px; /* 0.8 */
+ height: 16px; /* 0.8 */
+ }
+}
diff --git a/client/src/Components/UserOffersReceived/UserOffersReceived.js b/client/src/Components/UserOffersReceived/UserOffersReceived.js
new file mode 100644
index 00000000..12cce7a1
--- /dev/null
+++ b/client/src/Components/UserOffersReceived/UserOffersReceived.js
@@ -0,0 +1,103 @@
+import React, { useEffect, useState } from "react";
+import "./UserOffersReceived.css";
+import { redCrossOffers, greenCrossOffers } from "../../data/constants";
+const UserOffersReceived = () => {
+ const [data, setData] = useState([]);
+
+ useEffect(() => {
+ const data = [
+ {
+ nft: {
+ image:
+ "https://firebasestorage.googleapis.com/v0/b/sofan-app.appspot.com/o/Rectangle%20131.png?alt=media&token=f394cf39-6fa3-475a-9f3e-9ac5a63c0027",
+ name: "JCVD",
+ id: "0",
+ },
+ price: {
+ eth: "0.50",
+ eur: "692.04",
+ },
+ methods: "Mint",
+ param: {
+ quantity: "1",
+ },
+ from: "Alexia Barrier",
+ to: "Gr3goir3",
+ time: "1 hour ago",
+ },
+ {
+ nft: {
+ image:
+ "https://firebasestorage.googleapis.com/v0/b/sofan-app.appspot.com/o/Rectangle%20131.png?alt=media&token=f394cf39-6fa3-475a-9f3e-9ac5a63c0027",
+ name: "JCVD",
+ id: "0",
+ },
+ price: {
+ eth: "0.50",
+ eur: "692.04",
+ },
+ methods: "Mint",
+ param: {
+ quantity: "1",
+ },
+ from: "Alexia Barrier",
+ to: "Gr3goir3",
+ time: "1 hour ago",
+ },
+ ];
+ setData(data);
+ }, []);
+
+ return (
+ <>
+
+
+
NFT
+
+
from
+
Offer
+
+
To
+
Date
+
+
+
+
+ {data?.map((tx) => (
+
+
+
+
+ {tx.nft.name}
+ #{tx.nft.id}
+
+
+
+
+ {tx.from}
+
+
+ {tx.price.eth} ETH
+ {tx.price.eur} €
+
+
+
+ {tx.to}
+
+
+ {tx.time}
+
+
+
+
+
+
+
+ ))}
+
+
+
+ );
+};
+
+export default UserOffersReceived;
diff --git a/client/src/Pages/Test/Test.js b/client/src/Pages/Test/Test.js
index 22a67bfe..5aa84cea 100644
--- a/client/src/Pages/Test/Test.js
+++ b/client/src/Pages/Test/Test.js
@@ -3,13 +3,12 @@ import "./Test.css";
import PopUpBlockchainError from "../../Components/PopUpBlockchainError/PopUpBlockchainError";
import Modal from "../../Components/Modal/Modal";
import PopUpAddFundToWallet from "../../Components/PopUpAddFundToWallet/PopUpAddFundToWallet";
+import UserActivityTab from "../../Components/UserActivityTab/UserActivityTab";
const Test = () => {
return (
- <>
-
-
-
+
+
);
};
diff --git a/client/src/Pages/UserProfilePage/UserProfilePage.js b/client/src/Pages/UserProfilePage/UserProfilePage.js
index b3f05761..11f0d86e 100644
--- a/client/src/Pages/UserProfilePage/UserProfilePage.js
+++ b/client/src/Pages/UserProfilePage/UserProfilePage.js
@@ -20,7 +20,12 @@ import { db } from "../../Configs/firebase";
import EditProfilePopUp from "../../Components/EditProfilePopUp/EditProfilePopUp";
import PopUpEditProfile from "../../Components/PopUpEditProfile/PopUpEditProfile";
import useUserCollection from "../../contexts/UserContext/useUserCollection";
-
+import UserActivityTab from "../../Components/UserActivityTab/UserActivityTab";
+import UserOffersReceived from "../../Components/UserOffersReceived/UserOffersReceived";
+import UserOffersMade from "../../Components/UserOffersMade/UserOffersMade";
+import useEth from "../../contexts/EthContext/useEth";
+import Web3 from "web3";
+import { concatStringFromTo } from "../../Utils/concatString";
function UserProfilePage({
setIsUSerProfileSeortBySelectorClicked,
isUSerProfileSeortBySelectorClicked,
@@ -46,9 +51,6 @@ function UserProfilePage({
// backend states
const [dataConcat, setDataConcat] = useState(); // objet de tableau d'objet
// api states
- const [nftDataApi, setNftDataApi] = useState();
- const [collectionFloorPriceApiData, setCollectionFloorPriceApiData] =
- useState();
const [nftsFromOwner, setNftsFromOwner] = useState([]);
const [transferNftDataApi, setTransferNftDataApi] = useState();
const [nftsSalesDataApi, setNftsSalesDataApi] = useState();
@@ -56,7 +58,8 @@ function UserProfilePage({
const [allUserInfo, setAllUserInfo] = useState(null);
const { id } = useParams();
const { loggedInUser } = useUserCollection();
-
+ const { marketplaceAddress } = useEth();
+ const [currentProfileUserWallet, setCurrentProfileUserWallet] = useState("");
useEffect(() => {
const fetchData = async () => {
const q = query(collection(db, "users"), where("id", "==", id)); // Use the correct parameter name here
@@ -70,6 +73,7 @@ function UserProfilePage({
};
// Do something with the user info
setAllUserInfo(AllUserInfo);
+ console.log(AllUserInfo);
});
} else {
// Handle case when no user is found with the given ID
@@ -83,90 +87,54 @@ function UserProfilePage({
// Api Alchemy setup
const settings = {
apiKey: "34lcNFh-vbBqL9ignec_nN40qLHVOfSo",
- network: Network.ETH_MAINNET,
+ network: Network.ETH_GOERLI,
maxRetries: 10,
};
const alchemy = new Alchemy(settings);
- async function getNft() {
- const metadata = await alchemy.nft.getContractMetadata(
- "0x5180db8F5c931aaE63c74266b211F580155ecac8"
- );
- const dataCollection = await alchemy.nft.getNftsForContract(
- "0x34d85c9CDeB23FA97cb08333b511ac86E1C4E258"
- );
- const contractFromOwners = await alchemy.nft.getContractsForOwner(
- "0xaBA7161A7fb69c88e16ED9f455CE62B791EE4D03"
- ); // BoredApe creator adress (not the contract)
- const nfts = await alchemy.nft.getNftsForOwner("vitalik.eth");
- setNftDataApi(nfts);
- // console.log(nfts);
- }
- // getFloorprice for Bored Ape Yacht Club:
- async function getCollectionFloorPrice() {
- const alchemy = new Alchemy(settings);
- const collectionFloorPrice = await alchemy.nft.getFloorPrice(
- "0xbc4ca0eda7647a8ab7c2061c2e118a18a936f13d"
- );
- setCollectionFloorPriceApiData(collectionFloorPrice.openSea.floorPrice);
- }
- // console.log(collectionFloorPriceApiData)
- // get Nfts from Owner and Contracts
- async function getNftsForOwner() {
- // we select all the nfts hold by an address for a specific collection
- const nftsFromOwner = await alchemy.nft.getNftsForOwner(
- "0xf2018871debce291588B4034DBf6b08dfB0EE0DC",
- {
- contractAddresses: [
- "0x8a90CAb2b38dba80c64b7734e58Ee1dB38B8992e", // Doodles
- // "0x5CC5B05a8A13E3fBDB0BB9FcCd98D38e50F90c38", // Sandbox
- "0x60E4d786628Fea6478F785A6d7e704777c86a7c6", // MutantApe
- "0x34d85c9CDeB23FA97cb08333b511ac86E1C4E258",
- "0xbc4ca0eda7647a8ab7c2061c2e118a18a936f13d", // BoredApe
- ],
- } // filter
- );
- const nftsSale = await alchemy.nft.getFloorPrice(
- "0xbc4ca0eda7647a8ab7c2061c2e118a18a936f13d"
- );
- setNftsFromOwner(nftsFromOwner?.ownedNfts);
- // console.log(nftsFromOwner?.ownedNfts)
- }
- async function getTransferData() {
- const nftsTransferData = await alchemy.core.getAssetTransfers({
- toAddress: "0xf2018871debce291588B4034DBf6b08dfB0EE0DC",
- excludeZeroValue: true,
- category: ["erc721", "erc1155"],
- contractAddresses: [
- "0x34d85c9CDeB23FA97cb08333b511ac86E1C4E258",
- "0xbc4ca0eda7647a8ab7c2061c2e118a18a936f13d",
- ],
- withMetadata: true,
- });
-
- setTransferNftDataApi(nftsTransferData);
- }
- async function getNftMinted() {
- const nftsTransferData = await alchemy.core.getAssetTransfers({
- fromAddress: "0x0000000000000000000000000000000000000000",
- contractAddresses: [
- // "0x34d85c9CDeB23FA97cb08333b511ac86E1C4E258",
-
- "0xbc4ca0eda7647a8ab7c2061c2e118a18a936f13d",
- ],
- excludeZeroValue: true,
- category: ["erc721", "erc1155"],
- // pageKey:"31a37a38-7ff0-4094-9ab3-1fb744166171"
- });
- // console.log(nftsTransferData.pageKey )
- }
useEffect(() => {
- getNft();
- getCollectionFloorPrice();
+ // get Nfts from Owner and Contracts
+ async function getNftsForOwner() {
+ // we select all the nfts hold by an address for a specific collection
+ const web3Instance = new Web3(
+ new Web3.providers.HttpProvider(process.env.REACT_APP_INFURA_ID)
+ );
+ const { abi } = require("../../contracts/Sofan.json");
+ const contract = new web3Instance.eth.Contract(
+ abi,
+ // Replace this with the address of your deployed contract
+ marketplaceAddress
+ );
+ const arraySofanCollection = await contract.methods
+ .getAllCollection()
+ .call();
+ console.log("array sofan", arraySofanCollection);
+ let curentProfileWalletAddresses;
+ if (allUserInfo?.metamask) {
+ curentProfileWalletAddresses = allUserInfo.metamask;
+ setCurrentProfileUserWallet(allUserInfo.metamask);
+ } else if (allUserInfo?.web3auth) {
+ curentProfileWalletAddresses = allUserInfo.web3auth;
+ setCurrentProfileUserWallet(allUserInfo.web3auth);
+ }
+ console.log(curentProfileWalletAddresses);
+ try {
+ const nftsFromOwner = await alchemy.nft.getNftsForOwner(
+ // TODO: Comes from backend
+ curentProfileWalletAddresses,
+ {
+ contractAddresses: arraySofanCollection,
+ } // filter
+ );
+ setNftsFromOwner(nftsFromOwner?.ownedNfts);
+ console.log("yess", nftsFromOwner);
+ } catch (error) {
+ console.error(error);
+ }
+ }
getNftsForOwner();
- getTransferData();
- getNftMinted();
- }, []);
+ }, [allUserInfo]);
+
// API Coingecko --> Get ETH price
useEffect(() => {
fetch(
@@ -176,276 +144,6 @@ function UserProfilePage({
.then((data) => setEthPrice(data.ethereum.eur))
.catch((error) => console.log(error));
}, []); // API Coingecko --> Get ETH price
- useEffect(() => {
- const data = {
- userPageInfo: {
- username: "Gr3goir3",
- followingAthletes: 145,
- athleteSupporting: 16,
- nftOwned: 159,
- banner: "https://i.imgur.com/sJTNEVk.png",
- avatar: "https://i.imgur.com/cCVIcNS.png",
- description:
- "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris posuere tellus vehicula leo iaculis luctus. Ut vulputate elit risus, eget faucibus justo consectetur in.",
- },
- received: [
- {
- from: "DonOfSomething",
- nftTitle: "Explore the World with Alexia",
- nftId: "#393",
- nftPriceEth: "0.50009",
- date: "1 hours ago",
- nftImg: "https://i.imgur.com/BrRKHpT.png",
- },
- {
- from: "AlexiaBarrier",
- nftTitle: "Explore the World with Voile",
- nftId: "#394",
- nftPriceEth: "0.80",
- date: "4 years ago",
- nftImg: "https://i.imgur.com/BrRKHpT.png",
- },
- ],
- made: [
- {
- nftTitle: "Explore the World with Alexia Barrier",
- nftId: "#393",
- nftPriceEth: "0.50009",
- from: "you",
- to: "Alexia Barrier",
- status: "Pending",
- date: "5 months ago",
- nftImg: "https://i.imgur.com/BrRKHpT.png",
- },
- {
- nftTitle: "Explore the World with Voile",
- nftId: "#394",
- nftPriceEth: "0.808447444",
- from: "you",
- to: "Alexia Barrier",
- status: "Pending",
- date: "4 years ago",
- nftImg: "https://i.imgur.com/BrRKHpT.png",
- },
- ],
- activities: [
- {
- function: "Mint",
- nftTitle: "Explore the World with Alexia Barrier",
- nftId: "#393",
- nftPriceEth: "0.500098484874",
- from: "0x388C818CA8B9251b393131C08a736A67ccB19297",
- to: "Gr3goir3",
- date: "5 months ago",
- nftImg: "https://i.imgur.com/BrRKHpT.png",
- },
- {
- function: "Mint",
- nftTitle: "Explore the World with Alexia Barrier",
- nftId: "#393",
- nftPriceEth: "0.50009",
- from: "0x388C818CA8B9251b393131C08a736A67ccB19297",
- to: "Gr3goir3",
- date: "5 months ago",
- nftImg: "https://i.imgur.com/BrRKHpT.png",
- },
- ],
- collected: [
- {
- athleteName: "Alexia Barrier",
- nftTitle:
- "Explore the World with Alexia Barrier Explore the World with Alexia Barrier",
- nftId: "#393",
- img: "https://i.imgur.com/6UKdMup.png",
- nftPriceEth: "0.50009854",
- bid: "0.7592845864",
- nftImg: "https://i.imgur.com/BrRKHpT.png",
- },
- {
- athleteName: "Alexia Barrier",
- nftTitle:
- "Explore the World with Alexia Barrier Explore the World with Alexia Barrier",
- nftId: "#393",
- img: "https://i.imgur.com/6UKdMup.png",
- nftPriceEth: "0.50009854",
- bid: "0.7592845864",
- nftImg: "https://i.imgur.com/BrRKHpT.png",
- },
- {
- athleteName: "Alexia Barrier",
- nftTitle:
- "Explore the World with Alexia Barrier Explore the World with Alexia Barrier",
- nftId: "#393",
- img: "https://i.imgur.com/6UKdMup.png",
- nftPriceEth: "0.50009854",
- bid: "0.7592845864",
- },
- {
- athleteName: "Alexia Barrier",
- nftTitle:
- "Explore the World with Alexia Barrier Explore the World with Alexia Barrier",
- nftId: "#393",
- img: "https://i.imgur.com/6UKdMup.png",
- nftPriceEth: "0.50009854",
- bid: "0.7592845864",
- },
- {
- athleteName: "Alexia Barrier",
- nftTitle:
- "Explore the World with Alexia Barrier Explore the World with Alexia Barrier",
- nftId: "#393",
- img: "https://i.imgur.com/6UKdMup.png",
- nftPriceEth: "0.50009854",
- bid: "0.7592845864",
- },
- ],
- };
- // console.log(data.userPageInfo.description.length);
- function concatStringFromTo(
- string,
- maxLentgth,
- from0To_NUMBER_,
- isDotDotDot,
- isEnd
- ) {
- if (string.length > maxLentgth) {
- const stringBegin = string.slice(0, from0To_NUMBER_);
- const dotDotDot = "...";
- const stringEnd = string.slice(string.length - 3, string.length);
- if (!isDotDotDot && !isEnd) {
- return stringBegin;
- } else if (isDotDotDot && !isEnd) {
- return stringBegin + dotDotDot;
- } else if (isDotDotDot && isEnd) {
- return stringBegin + dotDotDot + stringEnd;
- } else {
- return string;
- }
- } else {
- return string;
- }
- }
- // Boucle pour received
- for (let i = 0; i < data.received.length; i++) {
- data.received[i].from = concatStringFromTo(
- data?.received[i]?.from,
- 9,
- 4,
- true,
- true
- );
- data.received[i].nftTitle = concatStringFromTo(
- data?.received[i]?.nftTitle,
- 28,
- 29,
- true,
- false
- );
- data.received[i].to = concatStringFromTo(
- data.userPageInfo.username,
- 9,
- 4,
- true,
- true
- );
- data.received[i].nftPriceEth = concatStringFromTo(
- data?.received[i]?.nftPriceEth,
- 7,
- 7,
- false,
- false
- );
- }
- // Boucle pour made
- for (let i = 0; i < data.made.length; i++) {
- data.made[i].from = concatStringFromTo(
- data?.made[i]?.from,
- 9,
- 4,
- true,
- true
- );
- data.made[i].nftTitle = concatStringFromTo(
- data?.made[i]?.nftTitle,
- 28,
- 29,
- true,
- false
- );
- data.made[i].to = concatStringFromTo(data?.made[i].to, 9, 4, true, true);
- data.made[i].nftPriceEth = concatStringFromTo(
- data?.made[i]?.nftPriceEth,
- 7,
- 7,
- false,
- false
- );
- }
- // Boucle pour activities
- for (let i = 0; i < data.activities.length; i++) {
- data.activities[i].from = concatStringFromTo(
- data?.activities[i]?.from,
- 9,
- 4,
- true,
- true
- );
- data.activities[i].nftTitle = concatStringFromTo(
- data?.activities[i]?.nftTitle,
- 25,
- 25,
- true,
- false
- );
- data.activities[i].to = concatStringFromTo(
- data?.activities[i].to,
- 9,
- 4,
- true,
- true
- );
- data.activities[i].nftPriceEth = concatStringFromTo(
- data?.activities[i]?.nftPriceEth,
- 7,
- 7,
- false,
- false
- );
- data.activities[i].function = concatStringFromTo(
- data?.activities[i]?.function,
- 7,
- 7,
- false,
- false
- );
- }
- // Boucle pour Collected NFT
- for (let i = 0; i < data.collected.length; i++) {
- data.collected[i].nftTitle = concatStringFromTo(
- data?.collected[i]?.nftTitle,
- 58,
- 58,
- true,
- false
- );
- data.collected[i].nftPriceEth = concatStringFromTo(
- data?.collected[i]?.nftPriceEth,
- 7,
- 7,
- false,
- false
- );
- data.collected[i].bid = concatStringFromTo(
- data?.collected[i]?.bid,
- 7,
- 7,
- false,
- false
- );
- }
-
- setDataConcat(data);
- }, []);
//----------------------------
// const handlePixelScrolledUserProfilePage = () => {
@@ -568,34 +266,40 @@ function UserProfilePage({
);
} else if (isProfileSubMenuButtonClicked[1] === true) {
return (
-
+
);
} else if (isProfileSubMenuButtonClicked[2] === true) {
return (
-
+ //
+
);
} else if (isProfileSubMenuButtonClicked[3] === true) {
return (
-
+ //
+
);
}
}
@@ -624,12 +328,14 @@ function UserProfilePage({
allUserInfo={allUserInfo}
/>
- {loggedInUser?.id == id &&
-
-
}
+ {loggedInUser?.id == id && (
+
+
+
+ )}
+ 
+ 
+ 
+ 
+ 
-