From a5f9d69419405b71f3fae43d2044f74e68f66985 Mon Sep 17 00:00:00 2001 From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com> Date: Tue, 15 Oct 2024 19:07:44 +0530 Subject: [PATCH] =?UTF-8?q?navbar=20=F0=9F=91=B7=E2=80=8D=E2=99=82?= =?UTF-8?q?=EF=B8=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../LatestTransactions/LatestTransactions.jsx | 3 +- src/components/NavBar/NavBar.jsx | 27 +- src/pages/DidInfo.jsx | 159 +++-- src/pages/SmartContract.jsx | 92 ++- src/pages/Transaction.jsx | 2 +- src/pages/Transaction/TransactionDetails.jsx | 543 +++++++++++++----- 6 files changed, 567 insertions(+), 259 deletions(-) diff --git a/src/components/LatestTransactions/LatestTransactions.jsx b/src/components/LatestTransactions/LatestTransactions.jsx index e06db9f..6dac53b 100644 --- a/src/components/LatestTransactions/LatestTransactions.jsx +++ b/src/components/LatestTransactions/LatestTransactions.jsx @@ -98,13 +98,12 @@ const LatestTransactions = () => { // overflow={'hidden'} // Ensure overflow is hidden whiteSpace={"nowrap"} // Prevent the text from wrapping textOverflow={"ellipsis"} - isTruncated + isTruncated cursor={"pointer"} onClick={() => navigate(`/transaction/${transaction?.description}`) } > - {" "} {transaction.description} diff --git a/src/components/NavBar/NavBar.jsx b/src/components/NavBar/NavBar.jsx index ab48f86..a21d469 100644 --- a/src/components/NavBar/NavBar.jsx +++ b/src/components/NavBar/NavBar.jsx @@ -2,6 +2,7 @@ import { Box, Container, Image, + Text, useColorMode, } from "@chakra-ui/react"; import { Link, NavLink } from "react-router-dom"; @@ -58,22 +59,22 @@ const NavBar = () => { - - ({ - fontSize: "14px", - fontWeight: "400", - borderBottom: isActive - ? "1px solid #DE858E" - : "0px solid #fff", // Active style for MAIN NET - })} - > - MAIN NET + + + {({ isActive }) => ( + + MAIN NET + + )} { - useEffect(() => { - window.scrollTo({ top: 0, behavior: "smooth" }); // Scroll to top smoothly when params change - }, []); - const { colorMode } = useColorMode(); - const params = useParams() - const navigate = useNavigate() - const toast = useToast() - +const DidInfo = () => { + useEffect(() => { + window.scrollTo({ top: 0, behavior: "smooth" }); // Scroll to top smoothly when params change + }, []); + const { colorMode } = useColorMode(); + const params = useParams(); + const navigate = useNavigate(); + + const toast = useToast(); + function copyToClipboard(text) { navigator.clipboard .writeText(text) @@ -41,40 +41,81 @@ import ToastBox from "../components/ToastBox"; console.error("Failed to copy text: ", err); }); } - - return ( - - - - - DID Info - - - DID - - - {params?.id} - - copyToClipboard(transaction.sender)}/> - - - - - Balance - - $ 10000.12345 - - copyToClipboard(transaction.sender)}/> - - - - + + return ( + + + + + DID Info + + + + DID + + + + {params?.id} + + copyToClipboard(transaction.sender)} + /> + + + + + + Balance + + + $ 10000.12345 + + copyToClipboard(transaction.sender)} + /> + + - + - ); - }; - - export default DidInfo; - \ No newline at end of file + + + ); +}; + +export default DidInfo; diff --git a/src/pages/SmartContract.jsx b/src/pages/SmartContract.jsx index be972d4..d53346b 100644 --- a/src/pages/SmartContract.jsx +++ b/src/pages/SmartContract.jsx @@ -52,17 +52,25 @@ import ToastBox from "../components/ToastBox"; Smart Contract Token - - abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz !"§ $%& - {/* - copyToClipboard(transaction.sender)}/> - */} + + abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz + {/* + copyToClipboard(transaction.sender)}/> + */} Transaction ID - - abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz !"§ $%& + + abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz copyToClipboard(transaction.sender)}/> @@ -70,24 +78,27 @@ import ToastBox from "../components/ToastBox"; Block - + Block ID: abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz - !"§ $%& copyToClipboard(transaction.sender)}/> - - + + Block Hash: @@ -96,42 +107,65 @@ import ToastBox from "../components/ToastBox"; alignItems={"center"} color={colorMode === "light" ? "#230A79" : "#B09AFF"} textDecoration={"underline"} + whiteSpace={"nowrap"} // Prevent the text from wrapping + textOverflow={"ellipsis"} + isTruncated + cursor={"pointer"} > - abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz!"§ $%& + abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz! copyToClipboard(transaction.receiver)}/> - + Network - - navigate(`/did-info/abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz`)}> abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz !"§ $%& - - copyToClipboard(transaction.sender)}/> - + + navigate(`/did-info/abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz`)}> abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz + + copyToClipboard(transaction.sender)}/> + Executor - + navigate(`/did-info/abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz`)}> abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz !"§ $%& copyToClipboard(transaction.sender)}/> Deployer - - navigate(`/did-info/abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz`)}> abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz !"§ $%& + + navigate(`/did-info/abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz`)}> abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz copyToClipboard(transaction.sender)}/> Creator - + navigate(`/did-info/abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz`)}> abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz !"§ $%& - + copyToClipboard(transaction.sender)}/> @@ -148,7 +182,10 @@ import ToastBox from "../components/ToastBox"; Quorum list - + bafybmibqle4w7k6acjbznk6ksapiyfwff6vwbwyaqx25wmzagt3awzbeky copyToClipboard(transaction.sender)}/> @@ -157,9 +194,12 @@ import ToastBox from "../components/ToastBox"; Pledge Token - + bafybmibqle4w7k6acjbznk6ksapiyfwff6vwbwyaqx25wmzagt3awzbeky - + copyToClipboard(transaction.sender)}/> diff --git a/src/pages/Transaction.jsx b/src/pages/Transaction.jsx index 779e931..e4a0e39 100644 --- a/src/pages/Transaction.jsx +++ b/src/pages/Transaction.jsx @@ -87,7 +87,7 @@ const Transaction = () => { abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz!"§ $%& - copyToClipboard(transaction.receiver)}/> + copyToClipboard(transaction.receiver)}/> diff --git a/src/pages/Transaction/TransactionDetails.jsx b/src/pages/Transaction/TransactionDetails.jsx index 6ed784e..127b380 100644 --- a/src/pages/Transaction/TransactionDetails.jsx +++ b/src/pages/Transaction/TransactionDetails.jsx @@ -1,167 +1,394 @@ import { - Box, - Container, - Divider, - Heading, - HStack, - Text, - useColorMode, - useToast, - } from "@chakra-ui/react"; - import React, { useContext, useEffect, useState } from "react"; - import { MdContentCopy} from "react-icons/md"; - import { Link, useNavigate, useParams } from "react-router-dom"; - import RelatedTransactions from "../../components/RelatedTransactions/RelatedTransactions"; - import bannerImage from "../../assets/images/bannerImg.png"; - import ToastBox from "../../components/ToastBox"; + Box, + Container, + Divider, + Heading, + HStack, + Text, + useColorMode, + useToast, +} from "@chakra-ui/react"; +import React, { useContext, useEffect, useState } from "react"; +import { MdContentCopy } from "react-icons/md"; +import { Link, useNavigate, useParams } from "react-router-dom"; +import RelatedTransactions from "../../components/RelatedTransactions/RelatedTransactions"; +import bannerImage from "../../assets/images/bannerImg.png"; +import ToastBox from "../../components/ToastBox"; import GlobalStateContext from "../../Contexts/GlobalStateContext"; - - const TransactionDetails = () => { - const navigate = useNavigate() - const params = useParams() - const { colorMode } = useColorMode(); + +const TransactionDetails = () => { + const navigate = useNavigate(); + const params = useParams(); + const { colorMode } = useColorMode(); console.log(params?.id); - // Scroll to top when component mounts or params change - useEffect(() => { + // Scroll to top when component mounts or params change + useEffect(() => { window.scrollTo({ top: 0, behavior: "smooth" }); // Scroll to top smoothly when params change }, [params]); - - - const { transactions } = useContext(GlobalStateContext); - const filteredData = transactions?.find((item)=> item?.description === params?.id) - console.log(filteredData); - const toast = useToast() - - function copyToClipboard(text) { - navigator.clipboard - .writeText(text) - .then(() => { - // console.log('Text copied to clipboard'); - // alert('Text copied to clipboard'); - toast({ - render: () => ( - - ), - }); - }) - .catch((err) => { - console.error("Failed to copy text: ", err); + const filteredData = transactions?.find( + (item) => item?.description === params?.id + ); + console.log(filteredData); + const toast = useToast(); + + function copyToClipboard(text) { + navigator.clipboard + .writeText(text) + .then(() => { + // console.log('Text copied to clipboard'); + // alert('Text copied to clipboard'); + toast({ + render: () => ( + + ), }); - } - - return ( - <> - - - - Transaction Info - - - Transaction ID - - - {filteredData?.description} - - copyToClipboard(filteredData.sender)}/> - - - - - - Token Information - - - Token ID : - - - {filteredData?.sender} - - copyToClipboard(filteredData.sender)}/> - - - - - - Block ID : - - - - {filteredData?.receiver} - - - copyToClipboard(filteredData.receiver)}/> - - - - - - Main net / Subnet Id - - {filteredData?.sender} - - copyToClipboard(filteredData.sender)}/> - - - Sender - - navigate(`/did-info/${filteredData.sender}`)} style={{ fontWeight: "inherit" }}> {filteredData?.sender} - - copyToClipboard(filteredData.sender)}/> - - - Receiver - - navigate(`/did-info/${filteredData.receiver}`)} style={{ fontWeight: "inherit" }}> {filteredData?.receiver} - - copyToClipboard(filteredData.receiver)}/> - - - - - - - Amount - $ 100 - - - Timestamp - 18 hours ago, 29/07/2024 - - - Quorum list - - {filteredData?.receiver} - - copyToClipboard(filteredData.sender)}/> - - - - - Pledge Token - - {filteredData?.receiver} - - copyToClipboard(filteredData.sender)}/> - - - - + }) + .catch((err) => { + console.error("Failed to copy text: ", err); + }); + } + + return ( + <> + + + + Transaction Info + + + + Transaction ID + + + + {filteredData?.description} + + copyToClipboard(filteredData.sender)} + /> + + + + + + Token Information + + + + Token ID : + + + + {filteredData?.sender} + + + copyToClipboard(filteredData.sender)} + /> + + + + + + Block ID : + + + {filteredData?.receiver} + + copyToClipboard(filteredData.receiver)} + /> + + + - - - ); - }; - - export default TransactionDetails; - \ No newline at end of file + + + Main net / Subnet Id + + + + {filteredData?.sender} + + + copyToClipboard(filteredData.sender)} + /> + + + + Sender + + + navigate(`/did-info/${filteredData.sender}`)} + fontWeight={"inherit"} + whiteSpace={"nowrap"} // Prevent the text from wrapping + textOverflow={"ellipsis"} + isTruncated + cursor={"pointer"} + > + {filteredData?.sender} + + + copyToClipboard(filteredData.sender)} + /> + + + + Receiver + + + navigate(`/did-info/${filteredData.receiver}`)} + fontWeight={"inherit"} + whiteSpace={"nowrap"} // Prevent the text from wrapping + textOverflow={"ellipsis"} + isTruncated + cursor={"pointer"} + > + {filteredData?.receiver} + + + copyToClipboard(filteredData.receiver)} + /> + + + + + + + Amount + $ 100 + + + Timestamp + 18 hours ago, 29/07/2024 + + + + Quorum list + + + + {filteredData?.receiver} + + + copyToClipboard(filteredData.sender)} + /> + + + + + + Pledge Token + + + + {filteredData?.receiver} + + + copyToClipboard(filteredData.sender)} + /> + + + + + + + + ); +}; + +export default TransactionDetails;