Siddhesh.More/rubix-explore
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

updated

Browse Source
This commit is contained in:
YasinShaikh123
2024-10-03 21:07:26 +05:30
parent 4bc7338ebf
commit 6207cc111e
15 changed files with 648 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/Constants/Constants.js Normal file
View File

@@ -0,0 +1 @@

BIN
src/assets/images/search.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

4
src/components/AmountCard/AmountCard.jsx
View File

@@ -13,8 +13,9 @@ import { FaFileAlt, FaShoppingCart } from "react-icons/fa";
import { FaClipboard, FaGlobe, FaWallet } from "react-icons/fa6";
import { PiWalletFill } from "react-icons/pi";
const AmountCard = () => {
const { colorMode, toggleColorMode } = useColorMode();
const { colorMode} = useColorMode();
const statsData = [
{
@@ -61,6 +62,7 @@ const AmountCard = () => {
<VStack>
<Container maxW="4xl">
<Grid
mb={2}
templateColumns="repeat(3, 2fr)"
gap={4}
bg={colorMode === "light" ? "light.100" : "black.900"}

42
src/components/LatestTransactions/LatestTransactions.jsx
View File

@@ -1,17 +1,37 @@
import { Box, Container, Grid, GridItem, HStack, Text, useColorMode } from "@chakra-ui/react";
import React, { useContext } from "react";
import { MdOutlineErrorOutline } from "react-icons/md";
import { MdContentCopy, MdOutlineErrorOutline } from "react-icons/md";
import Pagination from "../Pagination";
import GlobalStateContext from "../../Contexts/GlobalStateContext";
import { Link } from "react-router-dom";
import ToastBox from "../ToastBox";
const LatestTransactions = () => {
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: () => (
<ToastBox status={"warn"} message={"Text copied to clipboard"} />
),
});
})
.catch((err) => {
console.error("Failed to copy text: ", err);
});
}
return (
<Box>
<Container maxW="6xl">
@@ -46,13 +66,17 @@ const LatestTransactions = () => {
</Text>
<HStack fontSize={"sm"} gap={4} mb={2}>
<Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>Sender :</Text>
<Text color={colorMode === "light" ? "#230A79" : "#B09AFF"} textDecoration={"underline"}>
<Link>{transaction.sender}</Link>
</Text>
<HStack color={colorMode === "light" ? "#230A79" : "#B09AFF"} textDecoration={"underline"}>
<Link style={{fontWeight:"inherit"}}>{transaction.sender}</Link>
<Text as={"span"} ml={5} cursor={"pointer"}><MdContentCopy onClick={()=> copyToClipboard(transaction.sender)} /></Text>
</HStack>
</HStack>
<HStack fontSize={"sm"} gap={4} mb={3}>
<Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>Receiver :</Text>
<Text color={colorMode === "light" ? "#230A79" : "#B09AFF"} textDecoration={"underline"}>{transaction.receiver}</Text>
<HStack color={colorMode === "light" ? "#230A79" : "#B09AFF"} textDecoration={"underline"}>
<Link style={{fontWeight:"inherit"}}>{transaction.receiver}</Link>
<Text as={"span"} ml={5} cursor={"pointer"}><MdContentCopy onClick={()=> copyToClipboard(transaction.receiver)} /></Text>
</HStack>
</HStack>
<HStack
display={"flex"}
@@ -89,12 +113,14 @@ const LatestTransactions = () => {
<HStack>
<Text color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}>Transaction type :</Text>
<Text color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
{transaction.transactionType}
<Link to="/transaction" style={{fontWeight:"inherit"}}>{transaction.transactionType}</Link>
</Text>
</HStack>
<HStack>
<Text color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}>Subnet ID/Main net :</Text>
<Text color={colorMode === "light" ? "#230A79" : "#B09AFF"}>{transaction.subnetID}</Text>
<Text color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
<Link to="/subnet-inner" style={{fontWeight:"inherit"}}>{transaction.subnetID}</Link>
</Text>
</HStack>
</Box>
</HStack>

23
src/components/RelatedTransactions/RelatedTransactions.jsx Normal file
View File

@@ -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 (
<Box p={"4rem 0"} bg={colorMode === "light" ? "#F3F3F3" : "#101015"}>
<Container maxW="6xl">
<Heading fontSize={"md"} fontWeight={400}>
Related transactions info
</Heading>
<HStack justifyContent={"center"} mt={10}>
<Image w={"40px"} src={Search}/>
<Text as={"span"} color={"#787878"}>No records found</Text>
</HStack>
</Container>
</Box>
)
}
export default RelatedTransactions

24
src/components/ToastBox.jsx Normal file
View File

@@ -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 (
<Box
className="web-text-large d-flex gap-2 align-items-center"
p={3}
color={status === "error" ? "red.500" : status === "warn" ? "blue.500" : "green.500"}
bg={"#fff"}
boxShadow={'md'}
rounded={'md'}
>
{status === "error" || status === "warn" ? <IoWarningOutline /> : <FaCheck /> }
<Text as={"span"}>{message}</Text>
</Box>
);
};
export default ToastBox;

5
src/index.css
View File

@@ -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;

54
src/pages/DidInfo.jsx Normal file
View File

@@ -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 (
<>
<Box backgroundImage={colorMode !== "light" ? `url(${bannerImage})` : "none"} backgroundSize="cover"
backgroundRepeat="no-repeat" pb={"8rem"}>
<Container maxW="6xl" pt={"8rem"}>
<Heading mb={5} fontSize={"sm"} fontWeight={400} color={colorMode === "light" ? "#000" : "#fff"}>
DID Info
</Heading>
<Box bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"} p={4} mb={5} rounded={6}>
<Text color={"#969696"} fontSize={"sm"}>DID</Text>
<HStack fontSize={"sm"}>
<HStack color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
<Link style={{ fontWeight: "inherit" }}> abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz !"§ $%& </Link>
<Text as={"span"} ml={5} cursor={"pointer"}>
<MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
</Text>
</HStack>
</HStack>
<Divider mt={4} mb={5} />
<Text color={colorMode === "light" ? "#000" : "#fff"} fontSize={"sm"}>Balance</Text>
<HStack fontSize={"sm"} pb={3} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
<Link style={{ fontWeight: "inherit" }}>$ 10000.12345</Link>
<Text as={"span"} ml={5} cursor={"pointer"}>
<MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
</Text>
</HStack>
</Box>
</Container>
</Box>
<RelatedTransactions />
</>
);
};
export default DidInfo;

6
src/pages/Home.jsx
View File

@@ -45,7 +45,7 @@ const Home = () => {
>
<Input
roundedLeft={8}
w={"77%"}
w={"76%"}
border={`1px solid ${
colorMode === "light" ? "#230A79" : "#393939"
}`}
@@ -78,6 +78,8 @@ 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"}
>
<Heading fontSize={"md"}>Transaction History</Heading>
<Heading fontSize={"md"} fontWeight={500}>Transaction History</Heading>
<SwitchCharts
isSwitchOn={isSwitchOn}
setIsSwitchOn={setIsSwitchOn}

7
src/pages/MainNet.jsx
View File

@@ -1,7 +1,6 @@
import { Box, Container, Grid, GridItem, Heading, HStack, Select, Text, useColorMode } from "@chakra-ui/react";
import React, { useContext } from "react";
import { Link } from "react-router-dom";
import LatestTransactions from "../components/LatestTransactions/LatestTransactions";
import bannerImage from "../assets/images/bannerImg.png";
import GlobalStateContext from "../Contexts/GlobalStateContext";
import Pagination from "../components/Pagination";
import { MdOutlineErrorOutline } from "react-icons/md";
@@ -9,10 +8,10 @@ import { MdOutlineErrorOutline } from "react-icons/md";
const MainNet = () => {
const { overview } = useContext(GlobalStateContext);
const { colorMode, toggleColorMode } = useColorMode();
const { colorMode} = useColorMode();
return (
<Box p={"10rem 0 4rem 0"} bg={colorMode === "light" ? "#fff" : "#000"}>
<Box p={"10rem 0 4rem 0"} backgroundImage={colorMode !== "light" ? `url(${bannerImage})` : "none"} position={"relative"} backgroundSize="contain" backgroundRepeat="no-repeat">
<Container
maxW="6xl"
color="white"

149
src/pages/SmartContract.jsx Normal file
View File

@@ -0,0 +1,149 @@
import {
Box,
Container,
Divider,
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 (
<>
<Box backgroundImage={colorMode !== "light" ? `url(${bannerImage})` : "none"} backgroundSize="cover"
backgroundRepeat="no-repeat" pb={"5rem"}>
<Container maxW="6xl" pt={"8rem"}>
<Heading mb={5} fontSize={"sm"} fontWeight={400} color={colorMode === "light" ? "#000" : "#fff"}>
Smart Contract Info
</Heading>
<Box bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"} p={4} mb={5} rounded={6}>
<Text color={"#969696"} fontSize={"sm"}>Smart Contract Token</Text>
<HStack fontSize={"sm"}>
<HStack color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
<Link style={{ fontWeight: "inherit" }}>abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz !"§ $%&</Link>
<Text as={"span"} ml={5} cursor={"pointer"}>
<MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
</Text>
</HStack>
</HStack>
<Divider mt={4} mb={5} />
<Text color={colorMode === "light" ? "#000" : "#fff"} fontSize={"sm"}>Transaction ID</Text>
<HStack fontSize={"sm"} pb={3} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
<Link style={{ fontWeight: "inherit" }}> abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz !"§ $%& </Link>
<Text as={"span"} ml={5} cursor={"pointer"}>
<MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
</Text>
</HStack>
<Text fontSize={"md"} mb={2} color={colorMode === "light" ? "#230A79" : "#fff"}>
Block
</Text>
<HStack fontSize={"sm"} gap={4} mb={2}>
<Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
Block ID:
</Text>
<HStack
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
textDecoration={"underline"}
>
<Link style={{ fontWeight: "inherit" }}>
abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz
!"§ $%&
</Link>
<Text as={"span"} ml={5} cursor={"pointer"}>
<MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
</Text>
</HStack>
</HStack>
<HStack fontSize={"sm"} gap={4} mb={3}>
<Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
Block Hash:
</Text>
<Text
display={"flex"}
alignItems={"center"}
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
textDecoration={"underline"}
>
<Link style={{ fontWeight: "inherit" }}>
abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz!"§ $%&
</Link>
<Text as={"span"} ml={5} cursor={"pointer"}>
<MdContentCopy onClick={() => copyToClipboard(transaction.receiver)}/>
</Text>
</Text>
</HStack>
<Text color={colorMode === "light" ? "#000" : "#fff"} fontSize={"sm"}>Network</Text>
<HStack fontSize={"sm"} pb={3} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
<Link style={{ fontWeight: "inherit" }}> abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz !"§ $%& </Link>
<Text as={"span"} ml={5} cursor={"pointer"}>
<MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
</Text>
</HStack>
</Box>
<Box bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"} p={4} mb={5} rounded={6}>
<Text color={colorMode === "light" ? "#000" : "#fff"} fontSize={"sm"}>Executor</Text>
<HStack fontSize={"sm"} pb={3} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
<Link style={{ fontWeight: "inherit" }}> abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz !"§ $%& </Link>
<Text as={"span"} ml={5} cursor={"pointer"}>
<MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
</Text>
</HStack>
<Text color={colorMode === "light" ? "#000" : "#fff"} fontSize={"sm"}>Deployer</Text>
<HStack fontSize={"sm"} pb={3} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
<Link style={{ fontWeight: "inherit" }}> abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz !"§ $%& </Link>
<Text as={"span"} ml={5} cursor={"pointer"}>
<MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
</Text>
</HStack>
<Text color={colorMode === "light" ? "#000" : "#fff"} fontSize={"sm"}>Creator</Text>
<HStack fontSize={"sm"} pb={3} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
<Link style={{ fontWeight: "inherit" }}> abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz !"§ $%& </Link>
<Text as={"span"} ml={5} cursor={"pointer"}>
<MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
</Text>
</HStack>
</Box>
<Box bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"} p={4} mb={5} rounded={6}>
<HStack fontSize={"sm"} gap={"8rem"} mb={5}>
<Box>
<Text>Pledge amount</Text>
<Text color={"#A1A1A1"}>$ 100</Text>
</Box>
<Box>
<Text>Timestamp</Text>
<Text color={"#A1A1A1"}>18 hours ago, 29/07/2024</Text>
</Box>
</HStack>
<Text color={colorMode === "light" ? "#000" : "#fff"} fontSize={"sm"}>Quorum list</Text>
<HStack fontSize={"sm"} pb={3} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
<Link style={{ fontWeight: "inherit" }}>bafybmibqle4w7k6acjbznk6ksapiyfwff6vwbwyaqx25wmzagt3awzbeky</Link>
<Text as={"span"} ml={5} cursor={"pointer"}>
<MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
</Text>
</HStack>
</Box>
<Box bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"} p={4} rounded={6}>
<Text color={colorMode === "light" ? "#000" : "#fff"} fontSize={"sm"}>Pledge Token</Text>
<HStack fontSize={"sm"} pb={3} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
<Link style={{ fontWeight: "inherit" }}>bafybmibqle4w7k6acjbznk6ksapiyfwff6vwbwyaqx25wmzagt3awzbeky</Link>
<Text as={"span"} ml={5} cursor={"pointer"}>
<MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
</Text>
</HStack>
</Box>
</Container>
</Box>
<RelatedTransactions />
</>
);
};
export default Transaction;

3
src/pages/Subnet.jsx
View File

@@ -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 (
<Box p={"10rem 0 4rem 0"} bg={colorMode === "light" ? "#fff" : "#000"}>
<Box p={"10rem 0 4rem 0"} backgroundImage={colorMode !== "light" ? `url(${bannerImage})` : "none"} position={"relative"} backgroundSize="contain" backgroundRepeat="no-repeat">
<Container
maxW="6xl"
color="white"

194
src/pages/SubnetInner.jsx Normal file
View File

@@ -0,0 +1,194 @@
import { Box, Container, Grid, GridItem, Heading, HStack, Link, Select, Text, useColorMode } from "@chakra-ui/react";
import React, { useContext } from "react";
import GlobalStateContext from "../Contexts/GlobalStateContext";
import Pagination from "../components/Pagination";
import { MdContentCopy, MdOutlineErrorOutline } from "react-icons/md";
import ToastBox from "../components/ToastBox";
import bannerImage from "../assets/images/bannerImg.png";
const SubnetInner = () => {
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: () => (
<ToastBox status={"warn"} message={"Text copied to clipboard"} />
),
});
})
.catch((err) => {
console.error("Failed to copy text: ", err);
});
}
return (
<Box p={"10rem 0 4rem 0"} backgroundImage={colorMode !== "light" ? `url(${bannerImage})` : "none"} position={"relative"} backgroundSize="contain" backgroundRepeat="no-repeat">
<Container
maxW="6xl"
color="white"
display={"flex"}
justifyContent={"space-between"}
mb={10}
>
<Heading fontSize={"md"} fontWeight={400} color={colorMode === "light" ? "#000" : "#fff"}>
Main Net - A1B2C3D4E5
</Heading>
<Text to="" style={{ fontSize: "14px" }} color={colorMode === "light" ? "#000" : "#fff"} display={"flex"} gap={"3"}>
View total number of records
<Select width={"70px"} rounded="md" size="xs">
<option value='option1'>10</option>
<option value='option2'>20</option>
<option value='option3'>30</option>
</Select>
</Text>
</Container>
<Box>
<Container maxW="6xl">
<Grid
templateColumns="10% 90%"
gap={0}
bg={colorMode === "light" ? "#230A79" : "#232127"}
// bg={"#232127"}
borderTopRightRadius={4}
borderTopLeftRadius={4}
>
<GridItem p={2}>
<Text color={"#fff"}>Sr. no</Text>
</GridItem>
<GridItem p={2}>
<Text color={"#fff"}>Transactions</Text>
</GridItem>
</Grid>
<Box boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;"}>
{overview.map((transaction, index) => (
<Grid
bg={
index % 2 === 0
? colorMode === "light"
? "#F2EFFF"
: "#312F35"
: colorMode === "light"
? "#fff"
: "#232127"
}
key={transaction.id}
templateColumns="10% 90%"
gap={0}
>
<GridItem p={4} color={colorMode === "light" ? "#000" : "#fff"}>
{index + 1}.
</GridItem>
<GridItem p={4}>
<Box>
<Text
fontSize={"sm"}
mb={2}
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
>
{transaction.description}
</Text>
<HStack fontSize={"sm"} gap={4} mb={2}>
<Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
Sender :
</Text>
<Text display={"flex"} alignItems={"center"} color={colorMode === "light" ? "#230A79" : "#B09AFF"} textDecoration={"underline"}>
<Link style={{fontWeight:"inherit"}}>{transaction.sender}</Link>
<Text as={"span"} ml={5} cursor={"pointer"}><MdContentCopy onClick={()=> copyToClipboard(transaction.sender)} /></Text>
</Text>
</HStack>
<HStack fontSize={"sm"} gap={4} mb={3}>
<Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
Receiver :
</Text>
<Text display={"flex"} alignItems={"center"} color={colorMode === "light" ? "#230A79" : "#B09AFF"} textDecoration={"underline"}>
<Link style={{fontWeight:"inherit"}}>{transaction.receiver}</Link>
<Text as={"span"} ml={5} cursor={"pointer"}><MdContentCopy onClick={()=> copyToClipboard(transaction.receiver)} /></Text>
</Text>
</HStack>
<HStack
display={"flex"}
justifyContent={"space-between"}
w={"80%"}
fontSize={"sm"}
mb={3}
>
<Box>
<Text
mb={2}
color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
>
Smart contract ID dd :
</Text>
<Text
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
>
{transaction.contract}
</Text>
</Box>
<Box>
<Text
mb={2}
color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
>
Date and Time Stamp :
</Text>
<Text
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
>
{transaction.date}
</Text>
</Box>
<Box>
<Text
mb={2}
color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
>
Amount:
</Text>
<Text
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
>
{transaction.amount}
</Text>
</Box>
</HStack>
<HStack fontSize={"sm"} alignItems={"flex-start"}>
<MdOutlineErrorOutline
fontSize={"20px"}
style={{ paddingTop: "4px" }}
/>
<Box>
<HStack>
<Text
color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
>
Transaction type :
</Text>
<Text
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
>
{transaction.transactionType}
</Text>
</HStack>
</Box>
</HStack>
</Box>
</GridItem>
</Grid>
))}
</Box>
<Pagination />
</Container>
</Box>
</Box>
);
};
export default SubnetInner;

132
src/pages/Transaction.jsx Normal file
View File

@@ -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 (
<>
<Box backgroundImage={colorMode !== "light" ? `url(${bannerImage})` : "none"} backgroundSize="cover"
backgroundRepeat="no-repeat" pb={"5rem"}>
<Container maxW="6xl" pt={"8rem"}>
<Heading mb={5} fontSize={"sm"} fontWeight={400} color={colorMode === "light" ? "#000" : "#fff"}>
Transaction Info
</Heading>
<Box bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"} p={4} mb={5} rounded={6}>
<Text color={"#969696"} fontSize={"sm"}>Transaction ID</Text>
<HStack fontSize={"sm"}>
<HStack color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
<Link style={{ fontWeight: "inherit" }}> abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz !"§ $%& </Link>
<Text as={"span"} ml={5} cursor={"pointer"}>
<MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
</Text>
</HStack>
</HStack>
<Divider mt={4} mb={5} />
<Text fontSize={"md"} mb={2} color={colorMode === "light" ? "#230A79" : "#fff"}>
Super Title
</Text>
<HStack fontSize={"sm"} gap={4} mb={2}>
<Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>Token ID :</Text>
<HStack
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
textDecoration={"underline"}
>
<Link style={{ fontWeight: "inherit" }}>
abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz!"§ $%&
</Link>
<Text as={"span"} ml={5} cursor={"pointer"}>
<MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
</Text>
</HStack>
</HStack>
<HStack fontSize={"sm"} gap={4} mb={3}>
<Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
Block ID :
</Text>
<Text
display={"flex"}
alignItems={"center"}
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
textDecoration={"underline"}
>
<Link style={{ fontWeight: "inherit" }}>
abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz!"§ $%&
</Link>
<Text as={"span"} ml={5} cursor={"pointer"}>
<MdContentCopy onClick={() => copyToClipboard(transaction.receiver)}/>
</Text>
</Text>
</HStack>
</Box>
<Box bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"} p={4} mb={5} rounded={6}>
<Text color={colorMode === "light" ? "#000" : "#fff"} fontSize={"sm"}>Network</Text>
<HStack fontSize={"sm"} pb={3} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
<Link style={{ fontWeight: "inherit" }}> abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz !"§ $%& </Link>
<Text as={"span"} ml={5} cursor={"pointer"}>
<MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
</Text>
</HStack>
<Text color={colorMode === "light" ? "#000" : "#fff"} fontSize={"sm"}>Sender</Text>
<HStack fontSize={"sm"} pb={3} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
<Link style={{ fontWeight: "inherit" }}> abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz !"§ $%& </Link>
<Text as={"span"} ml={5} cursor={"pointer"}>
<MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
</Text>
</HStack>
<Text color={colorMode === "light" ? "#000" : "#fff"} fontSize={"sm"}>Receiver</Text>
<HStack fontSize={"sm"} pb={3} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
<Link style={{ fontWeight: "inherit" }}> abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz !"§ $%& </Link>
<Text as={"span"} ml={5} cursor={"pointer"}>
<MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
</Text>
</HStack>
</Box>
<Box bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"} p={4} mb={5} rounded={6}>
<HStack fontSize={"sm"} gap={"8rem"} mb={5}>
<Box>
<Text>Amount</Text>
<Text color={"#A1A1A1"}>$ 100</Text>
</Box>
<Box>
<Text>$ 100</Text>
<Text color={"#A1A1A1"}>18 hours ago, 29/07/2024</Text>
</Box>
</HStack>
<Text color={colorMode === "light" ? "#000" : "#fff"} fontSize={"sm"}>Quorum list</Text>
<HStack fontSize={"sm"} pb={3} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
<Link style={{ fontWeight: "inherit" }}>bafybmibqle4w7k6acjbznk6ksapiyfwff6vwbwyaqx25wmzagt3awzbeky</Link>
<Text as={"span"} ml={5} cursor={"pointer"}>
<MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
</Text>
</HStack>
</Box>
<Box bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"} p={4} rounded={6}>
<Text color={colorMode === "light" ? "#000" : "#fff"} fontSize={"sm"}>Pledge Token</Text>
<HStack fontSize={"sm"} pb={3} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
<Link style={{ fontWeight: "inherit" }}>bafybmibqle4w7k6acjbznk6ksapiyfwff6vwbwyaqx25wmzagt3awzbeky</Link>
<Text as={"span"} ml={5} cursor={"pointer"}>
<MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
</Text>
</HStack>
</Box>
</Container>
</Box>
<RelatedTransactions />
</>
);
};
export default Transaction;

20
src/routes/_routes.jsx
View File

@@ -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: <Subnet />,
},
{
path: "/subnet-inner",
element: <SubnetInner />,
},
{
path: "/transaction",
element: <Transaction />,
},
{
path: "/smart-contract",
element: <SmartContract />,
},
{
path: "/did-info",
element: <DidInfo />,
},
];