This commit is contained in:
2024-10-14 17:56:46 +05:30
parent 8843cde46d
commit f2c0112f0c
13 changed files with 247 additions and 58 deletions

View File

@@ -108,6 +108,7 @@ const AmountCard = () => {
alignItems={"center"}
justifyContent={"center"}
rounded={10}
p={2}
>
{item.icon}
</Box>
@@ -162,6 +163,7 @@ const AmountCard = () => {
alignItems={"center"}
justifyContent={"center"}
rounded={10}
p={2}
>
{item.icon}
</Box>

View File

@@ -3,13 +3,14 @@ import React, { useContext } from "react";
import { MdContentCopy, MdOutlineErrorOutline } from "react-icons/md";
import Pagination from "../Pagination";
import GlobalStateContext from "../../Contexts/GlobalStateContext";
import { Link } from "react-router-dom";
import { Link, useNavigate } from "react-router-dom";
import ToastBox from "../ToastBox";
const LatestTransactions = () => {
const toast = useToast()
const navigate = useNavigate()
const { colorMode} = useColorMode();
const { transactions } = useContext(GlobalStateContext);
@@ -40,8 +41,7 @@ const LatestTransactions = () => {
gap={0}
bg={colorMode === "light" ? "#230A79" : "#232127"}
// bg={"#232127"}
borderTopRightRadius={4}
borderTopLeftRadius={4}
roundedTop={'lg'}
>
<GridItem p={2}>
<Text color={"#fff"}>Sr. no</Text>
@@ -50,7 +50,7 @@ const LatestTransactions = () => {
<Text color={"#fff"}>Transactions</Text>
</GridItem>
</Grid>
<Box boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;"}>
<Box roundedBottom={'lg'} overflow={'hidden'} boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;"}>
{transactions.map((transaction, index) => (
<Grid
bg={index % 2 === 0 ? (colorMode === "light" ? "#F2EFFF" : "#312F35") : (colorMode === "light" ? "#fff" : "#232127")}
@@ -61,21 +61,28 @@ const LatestTransactions = () => {
<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"}>
<Link to="/did-info"> {transaction.description}</Link>
<Text display={'flex'} fontSize={"sm"} mb={2} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
<Link to={`/transaction/${transaction?.description}`}> {transaction.description}</Link>
<Text _hover={{bg:"gray.50"}} transition={'0.5s'} rounded={'sm'} p={1} as={"span"} ml={1} cursor={"pointer"}>
<MdContentCopy onClick={() => copyToClipboard(transaction.description)}/>
</Text>
</Text>
<HStack fontSize={"sm"} gap={4} mb={2}>
<Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>Sender :</Text>
<HStack color={colorMode === "light" ? "#230A79" : "#B09AFF"} textDecoration={"underline"}>
<Link to="/transaction" style={{fontWeight:"inherit"}}>{transaction.sender}</Link>
<Text as={"span"} ml={5} cursor={"pointer"}><MdContentCopy onClick={()=> copyToClipboard(transaction.sender)} /></Text>
<Text cursor={"pointer"} onClick={()=> navigate(`/did-info/${transaction.sender}`)} >{transaction.sender}</Text>
<Text _hover={{bg:"gray.50"}} transition={'0.5s'} rounded={'sm'} p={1} as={"span"} ml={1} cursor={"pointer"}>
<MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
</Text>
</HStack>
</HStack>
<HStack fontSize={"sm"} gap={4} mb={3}>
<HStack cursor={'pointer'} fontSize={"sm"} gap={4} mb={3}>
<Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>Receiver :</Text>
<HStack color={colorMode === "light" ? "#230A79" : "#B09AFF"} textDecoration={"underline"}>
<Link to="/transaction" style={{fontWeight:"inherit"}}>{transaction.receiver}</Link>
<Text as={"span"} ml={5} cursor={"pointer"}><MdContentCopy onClick={()=> copyToClipboard(transaction.receiver)} /></Text>
<HStack color={colorMode === "light" ? "#230A79" : "#B09AFF"} textDecoration={"underline"}>
<Text onClick={()=> navigate(`/did-info/${transaction.receiver}`)} >{transaction.receiver}</Text>
<Text _hover={{bg:"gray.50"}} transition={'0.5s'} rounded={'sm'} p={1} as={"span"} ml={1} cursor={"pointer"}><MdContentCopy onClick={()=> copyToClipboard(transaction.receiver)} /></Text>
</HStack>
</HStack>
<HStack
@@ -121,7 +128,7 @@ const LatestTransactions = () => {
<HStack>
<Text color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}>Subnet ID/Main net :</Text>
<Text color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
<Link to="/subnet-inner" style={{fontWeight:"inherit"}}>{transaction.subnetID}</Link>
<Link to={`/subnet-id-overview/${transaction.subnetID}`} style={{fontWeight:"inherit"}}>{transaction.subnetID}</Link>
</Text>
</HStack>

View File

@@ -1,32 +1,27 @@
/* eslint-disable no-unused-vars */
import {
Box,
Button,
Container,
Icon,
Image,
Stack,
Switch,
useColorMode,
VStack,
} from "@chakra-ui/react";
import { Outlet, Link, useLocation, NavLink } from "react-router-dom";
import { Link, NavLink } from "react-router-dom";
import logo from "../../assets/images/rubix.png";
import logoLight from "../../assets/images/rubixlogo.svg";
import { useEffect, useState } from "react";
import SwitchBtn from "../SwitchBtn/SwitchBtn";
const NavBar = () => {
// const [isHoveredCommunity, setIsHoveredCommunity] = useState(false);
const [windowWidth, setWindowWidth] = useState(window.innerWidth);
const { colorMode, toggleColorMode } = useColorMode();
const [isScrolled, setIsScrolled] = useState(false); // Declare isScrolled state
const { colorMode } = useColorMode();
const [isSwitchOn, setIsSwitchOn] = useState(true);
useEffect(() => {
const handleScroll = () => {
const scrollPosition = window.scrollY;
setIsScrolled(scrollPosition > 0);
setIsScrolled(scrollPosition > 0); // Update isScrolled based on scroll position
};
const handleResize = () => {
setWindowWidth(window.innerWidth);
};
@@ -40,8 +35,6 @@ const NavBar = () => {
};
}, []);
const theme = localStorage?.getItem("light");
return (
<>
<Box
@@ -51,12 +44,9 @@ const NavBar = () => {
top={0}
left={0}
id="navbar"
// bg={colorMode === "light" ? "light" : "black.900"}
color={colorMode === "light" ? "light" : "black.900"}
padding={"16px 0px"}
// borderBottom={"1px solid #ccc"}
borderBottom={colorMode === "light" ? "1px solid #ccc" : "none"}
// boxShadow={'md'}
>
<Container maxW="6xl">
<Box
@@ -78,7 +68,9 @@ const NavBar = () => {
style={({ isActive }) => ({
fontSize: "14px",
fontWeight: "400",
borderBottom: isActive ? "1px solid #DE858E" : "0px solid #fff", // Active style for MAIN NET
borderBottom: isActive
? "1px solid #DE858E"
: "0px solid #fff", // Active style for MAIN NET
})}
>
MAIN NET
@@ -88,7 +80,9 @@ const NavBar = () => {
style={({ isActive }) => ({
fontSize: "14px",
fontWeight: "400",
borderBottom: isActive ? "1px solid #DE858E" : "0px solid #fff", // Active style for SUBNETS
borderBottom: isActive
? "1px solid #DE858E"
: "0px solid #fff", // Active style for SUBNETS
})}
>
SUBNETS
@@ -101,7 +95,6 @@ const NavBar = () => {
</Box>
</Container>
</Box>
{/* <Box h={"74px"}></Box> */}
</>
);
};