From 6207cc111eb96f1a30997f7f90e56318430fffca Mon Sep 17 00:00:00 2001 From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com> Date: Thu, 3 Oct 2024 21:07:26 +0530 Subject: [PATCH] updated --- src/Constants/Constants.js | 1 + src/assets/images/search.png | Bin 0 -> 1152 bytes src/components/AmountCard/AmountCard.jsx | 4 +- .../LatestTransactions/LatestTransactions.jsx | 42 +++- .../RelatedTransactions.jsx | 23 +++ src/components/ToastBox.jsx | 24 +++ src/index.css | 5 + src/pages/DidInfo.jsx | 54 +++++ src/pages/Home.jsx | 6 +- src/pages/MainNet.jsx | 7 +- src/pages/SmartContract.jsx | 149 ++++++++++++++ src/pages/Subnet.jsx | 3 +- src/pages/SubnetInner.jsx | 194 ++++++++++++++++++ src/pages/Transaction.jsx | 132 ++++++++++++ src/routes/_routes.jsx | 20 ++ 15 files changed, 648 insertions(+), 16 deletions(-) create mode 100644 src/Constants/Constants.js create mode 100644 src/assets/images/search.png create mode 100644 src/components/RelatedTransactions/RelatedTransactions.jsx create mode 100644 src/components/ToastBox.jsx create mode 100644 src/pages/DidInfo.jsx create mode 100644 src/pages/SmartContract.jsx create mode 100644 src/pages/SubnetInner.jsx create mode 100644 src/pages/Transaction.jsx diff --git a/src/Constants/Constants.js b/src/Constants/Constants.js new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/src/Constants/Constants.js @@ -0,0 +1 @@ + diff --git a/src/assets/images/search.png b/src/assets/images/search.png new file mode 100644 index 0000000000000000000000000000000000000000..f7679e2918758d1ffcea9ad43cc6f230acd3561d GIT binary patch literal 1152 zcmV-`1b_R9P)Q~Om1UNf8tL1XJZ?CVf6-f!`uba>3?Pjyt3%ySa z0a6W|8ZsSp=jP^`VdM&8faBw1T1b;})Zqcv>q&wDf#S={OG!Pu0&A`C{QUfE;j8aK z|7S$3P$<;#a5lS}o10BZ5w>ktpPrstXjUxCDhF9DF9sMG!5c{#jYgxR+pt>T+>W#u z0|ZTvNn0NHy2d~FuBzr*B7mE@kB^VNg@uK`QNbY!p~Q560D+)eYU)S?@C42&T0+jx z&-XSqHm=1Gfy7QvPuD~R2oUSQYOZ_^M%~Ht4D`2$f$d=qJ7R!9Vj!bQwJ~x(B_%N8 z!fLC!{k<{TD7L`Fr7URP2^5^ir4?z4ayu{1Gm zT83qz6m%`q7DH-R47xUR#jIgQENhq%%Nl0HvW6M4tied78pXlEK?$f*8^QM8O+vGn z6cZ8Sh7)GeT${E#WYh!`zJ zC01F9yItFL-Bk!LUwGhi6W2UT;d*@<zF%5iUM@;X@Fljsz8)!msh}}cglQwOT@efLgKCbY*(1>Oiy61Kw-1sM zOv1em1~t~FqHe~huBmfpcXxMUD=U>c60wObE-tpU8=?Sr6c!LJE-va^z`c(0`IaPr z`T6-3-NxD(IL~9RW1N2|@$92{NNpWC;w3CMw3eydu@1NGhxq&Zdy^tz3CoM6KXC2D zGy8fz`Z&b(p?{z}j>9%upppNz@j$Lo{Nc<(uJGB>ox?ii(KL$#fDGgYX;>>pg3M?1 z=dw?o?!!FiJuDy^C&65NVL8^#m@bv&y~;^)Uep|@)OZ8H3`G4VJKCenl6tEU`kR8xfQh6T=Rw(*yOqJ{VWhPf* z(vPGJRXpd~G?cZ_-M6;3jwB(Zu2Qjhj;P4jls;ALnTq_T$?3NP0EY{=B#3{Sa_xx6 S?d+KV0000 { - const { colorMode, toggleColorMode } = useColorMode(); + const { colorMode} = useColorMode(); const statsData = [ { @@ -61,6 +62,7 @@ const AmountCard = () => { { - const { colorMode, toggleColorMode } = useColorMode(); + const { colorMode} = useColorMode(); const { transactions } = useContext(GlobalStateContext); + + 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); + }); + } + + return ( @@ -46,13 +66,17 @@ const LatestTransactions = () => { Sender : - - {transaction.sender} - + + {transaction.sender} + copyToClipboard(transaction.sender)} /> + Receiver : - {transaction.receiver} + + {transaction.receiver} + copyToClipboard(transaction.receiver)} /> + { Transaction type : - {transaction.transactionType} + {transaction.transactionType} Subnet ID/Main net : - {transaction.subnetID} + + {transaction.subnetID} + diff --git a/src/components/RelatedTransactions/RelatedTransactions.jsx b/src/components/RelatedTransactions/RelatedTransactions.jsx new file mode 100644 index 0000000..1ad2846 --- /dev/null +++ b/src/components/RelatedTransactions/RelatedTransactions.jsx @@ -0,0 +1,23 @@ +import { Box, Container, Heading, HStack, Image, Text, useColorMode } from '@chakra-ui/react' +import React from 'react' +import Search from '../../assets/images/search.png' + +const RelatedTransactions = () => { + const { colorMode} = useColorMode(); + + return ( + + + + Related transactions info + + + + No records found + + + + ) +} + +export default RelatedTransactions diff --git a/src/components/ToastBox.jsx b/src/components/ToastBox.jsx new file mode 100644 index 0000000..bbddff2 --- /dev/null +++ b/src/components/ToastBox.jsx @@ -0,0 +1,24 @@ + +import { Box, Text } from "@chakra-ui/react"; +import React from "react"; +import { FaCheck } from "react-icons/fa"; +import { IoWarningOutline } from "react-icons/io5"; + +const ToastBox = ({ message, status }) => { + return ( + + + {status === "error" || status === "warn" ? : } + {message} + + ); +}; + +export default ToastBox; diff --git a/src/index.css b/src/index.css index f2d0c7b..4271550 100644 --- a/src/index.css +++ b/src/index.css @@ -59,6 +59,11 @@ button:focus-visible { outline: 4px auto -webkit-focus-ring-color; } +a:hover { + color: inherit !important; + font-weight: inherit; +} + @media (prefers-color-scheme: light) { :root { color: #213547; diff --git a/src/pages/DidInfo.jsx b/src/pages/DidInfo.jsx new file mode 100644 index 0000000..736764a --- /dev/null +++ b/src/pages/DidInfo.jsx @@ -0,0 +1,54 @@ +import { + Box, + Container, + Divider, + Heading, + HStack, + Text, + useColorMode, + } from "@chakra-ui/react"; + import React from "react"; + import { MdContentCopy} from "react-icons/md"; + import { Link } from "react-router-dom"; + import RelatedTransactions from "../components/RelatedTransactions/RelatedTransactions"; + import bannerImage from "../assets/images/bannerImg.png"; + + const DidInfo = () => { + const { colorMode } = useColorMode(); + + return ( + <> + + + + DID Info + + + DID + + + abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz !"§ $%& + + copyToClipboard(transaction.sender)}/> + + + + + Balance + + $ 10000.12345 + + copyToClipboard(transaction.sender)}/> + + + + + + + + ); + }; + + export default DidInfo; + \ No newline at end of file diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index e58f376..78d54d9 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -45,7 +45,7 @@ const Home = () => { > { border: `1px solid ${ colorMode === "light" ? "#230A79" : "#393939" }`, + borderLeft:"0px", + borderRight:"0px", outline: "0px", }} _focus={{ outline: "none" }} @@ -118,7 +120,7 @@ const Home = () => { justifyContent={"space-between"} alignItems={"center"} > - Transaction History + Transaction History { const { overview } = useContext(GlobalStateContext); - const { colorMode, toggleColorMode } = useColorMode(); + const { colorMode} = useColorMode(); return ( - + { + const { colorMode } = useColorMode(); + + return ( + <> + + + + Smart Contract Info + + + Smart Contract Token + + + abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz !"§ $%& + + copyToClipboard(transaction.sender)}/> + + + + + Transaction ID + + abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz !"§ $%& + + copyToClipboard(transaction.sender)}/> + + + + Block + + + + Block ID: + + + + abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz + !"§ $%& + + + copyToClipboard(transaction.sender)}/> + + + + + + Block Hash: + + + + abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz!"§ $%& + + + copyToClipboard(transaction.receiver)}/> + + + + Network + + abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz !"§ $%& + + copyToClipboard(transaction.sender)}/> + + + + + Executor + + abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz !"§ $%& + + copyToClipboard(transaction.sender)}/> + + + Deployer + + abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz !"§ $%& + + copyToClipboard(transaction.sender)}/> + + + Creator + + abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz !"§ $%& + + copyToClipboard(transaction.sender)}/> + + + + + + + Pledge amount + $ 100 + + + Timestamp + 18 hours ago, 29/07/2024 + + + Quorum list + + bafybmibqle4w7k6acjbznk6ksapiyfwff6vwbwyaqx25wmzagt3awzbeky + + copyToClipboard(transaction.sender)}/> + + + + + Pledge Token + + bafybmibqle4w7k6acjbznk6ksapiyfwff6vwbwyaqx25wmzagt3awzbeky + + copyToClipboard(transaction.sender)}/> + + + + + + + + ); + }; + + export default Transaction; + \ No newline at end of file diff --git a/src/pages/Subnet.jsx b/src/pages/Subnet.jsx index 38a3def..964da80 100644 --- a/src/pages/Subnet.jsx +++ b/src/pages/Subnet.jsx @@ -5,6 +5,7 @@ import LatestTransactions from "../components/LatestTransactions/LatestTransacti import GlobalStateContext from "../Contexts/GlobalStateContext"; import Pagination from "../components/Pagination"; import { MdOutlineErrorOutline } from "react-icons/md"; +import bannerImage from "../assets/images/bannerImg.png"; const Subnet = () => { @@ -12,7 +13,7 @@ const Subnet = () => { const { colorMode, toggleColorMode } = useColorMode(); return ( - + { + + const { overview } = useContext(GlobalStateContext); + const { colorMode} = useColorMode(); + + 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); + }); + } + + return ( + + + + Main Net - A1B2C3D4E5 + + + View total number of records + + + + + + + + Sr. no + + + Transactions + + + + {overview.map((transaction, index) => ( + + + {index + 1}. + + + + + {transaction.description} + + + + Sender : + + + {transaction.sender} + copyToClipboard(transaction.sender)} /> + + + + + Receiver : + + + {transaction.receiver} + copyToClipboard(transaction.receiver)} /> + + + + + + Smart contract ID dd : + + + {transaction.contract} + + + + + Date and Time Stamp : + + + {transaction.date} + + + + + Amount: + + + {transaction.amount} + + + + + + + + + Transaction type : + + + {transaction.transactionType} + + + + + + + + ))} + + + + + + ); +}; + +export default SubnetInner; diff --git a/src/pages/Transaction.jsx b/src/pages/Transaction.jsx new file mode 100644 index 0000000..8447cd8 --- /dev/null +++ b/src/pages/Transaction.jsx @@ -0,0 +1,132 @@ +import { + Box, + Container, + Divider, + Heading, + HStack, + Text, + useColorMode, +} from "@chakra-ui/react"; +import React from "react"; +import { MdContentCopy} from "react-icons/md"; +import { Link } from "react-router-dom"; +import RelatedTransactions from "../components/RelatedTransactions/RelatedTransactions"; +import bannerImage from "../assets/images/bannerImg.png"; + +const Transaction = () => { + const { colorMode } = useColorMode(); + + return ( + <> + + + + Transaction Info + + + Transaction ID + + + abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz !"§ $%& + + copyToClipboard(transaction.sender)}/> + + + + + + Super Title + + + Token ID : + + + abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz!"§ $%& + + + copyToClipboard(transaction.sender)}/> + + + + + + Block ID : + + + + abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz!"§ $%& + + + copyToClipboard(transaction.receiver)}/> + + + + + + Network + + abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz !"§ $%& + + copyToClipboard(transaction.sender)}/> + + + Sender + + abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz !"§ $%& + + copyToClipboard(transaction.sender)}/> + + + Receiver + + abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz !"§ $%& + + copyToClipboard(transaction.sender)}/> + + + + + + + Amount + $ 100 + + + $ 100 + 18 hours ago, 29/07/2024 + + + Quorum list + + bafybmibqle4w7k6acjbznk6ksapiyfwff6vwbwyaqx25wmzagt3awzbeky + + copyToClipboard(transaction.sender)}/> + + + + + Pledge Token + + bafybmibqle4w7k6acjbznk6ksapiyfwff6vwbwyaqx25wmzagt3awzbeky + + copyToClipboard(transaction.sender)}/> + + + + + + + + ); +}; + +export default Transaction; diff --git a/src/routes/_routes.jsx b/src/routes/_routes.jsx index 9facc83..ad1ef6d 100644 --- a/src/routes/_routes.jsx +++ b/src/routes/_routes.jsx @@ -2,6 +2,10 @@ import Home from "../pages/Home"; import MainNet from "../pages/MainNet"; import Subnet from "../pages/Subnet"; +import SubnetInner from "../pages/SubnetInner"; +import Transaction from "../pages/Transaction"; +import SmartContract from "../pages/SmartContract"; +import DidInfo from "../pages/DidInfo"; export const route = [ { @@ -16,4 +20,20 @@ export const route = [ path: "/subnet", element: , }, + { + path: "/subnet-inner", + element: , + }, + { + path: "/transaction", + element: , + }, + { + path: "/smart-contract", + element: , + }, + { + path: "/did-info", + element: , + }, ];