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

update pages

Browse Source
This commit is contained in:
YasinShaikh123
2024-10-01 13:02:09 +05:30
parent 4482aad236
commit 12542e51cf
22 changed files with 1885 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

299
src/components/AmountCard/AmountCard.jsx Normal file
View File

@@ -0,0 +1,299 @@
import {
Box,
Container,
Grid,
GridItem,
HStack,
Text,
useColorMode,
VStack,
} from "@chakra-ui/react";
import React from "react";
import { PiWalletFill } from "react-icons/pi";
const AmountCard = () => {
const { colorMode, toggleColorMode } = useColorMode();
return (
<VStack>
<Container maxW="6xl">
<Grid
templateColumns="repeat(4, 2fr)"
gap={4}
bg={colorMode === "light" ? "light.100" : "black.900"}
justifyContent="center"
alignItems="center"
>
<GridItem
bg={
colorMode === "light"
? "#230A7926"
: "linear-gradient(126.97deg, rgba(6, 11, 38, 0.74) 28.26%, rgba(26, 31, 55, 0.5) 91.2%)"
}
display={"flex"}
justifyContent={"space-between"}
alignItems={"center"}
p={3}
rounded={10}
>
<Box>
<Text
fontSize={"sm"}
color={colorMode === "light" ? "#230A79" : "#A0AEC0"}
>
RBT Price
</Text>
<Text
fontSize={"sm"}
color={colorMode === "light" ? "#230A79" : "#fff"}
>
$53,000
</Text>
</Box>
<Box
backgroundColor={"#4023A6"}
w={30}
h={30}
display={"flex"}
alignItems={"center"}
justifyContent={"center"}
rounded={10}
>
<PiWalletFill color="white" fontSize={"20px"} />
</Box>
</GridItem>
<GridItem
bg={
colorMode === "light"
? "#230A7926"
: "linear-gradient(126.97deg, rgba(6, 11, 38, 0.74) 28.26%, rgba(26, 31, 55, 0.5) 91.2%)"
}
display={"flex"}
justifyContent={"space-between"}
alignItems={"center"}
p={3}
rounded={10}
>
<Box>
<Text
fontSize={"sm"}
color={colorMode === "light" ? "#230A79" : "#A0AEC0"}
>
RBT Price
</Text>
<Text
fontSize={"sm"}
color={colorMode === "light" ? "#230A79" : "#fff"}
>
$53,000
</Text>
</Box>
<Box
backgroundColor={"#4023A6"}
w={30}
h={30}
display={"flex"}
alignItems={"center"}
justifyContent={"center"}
rounded={10}
>
<PiWalletFill color="white" fontSize={"20px"} />
</Box>
</GridItem>
<GridItem
bg={
colorMode === "light"
? "#230A7926"
: "linear-gradient(126.97deg, rgba(6, 11, 38, 0.74) 28.26%, rgba(26, 31, 55, 0.5) 91.2%)"
}
display={"flex"}
justifyContent={"space-between"}
alignItems={"center"}
p={3}
rounded={10}
>
<Box>
<Text
fontSize={"sm"}
color={colorMode === "light" ? "#230A79" : "#A0AEC0"}
>
RBT Price
</Text>
<Text
fontSize={"sm"}
color={colorMode === "light" ? "#230A79" : "#fff"}
>
$53,000
</Text>
</Box>
<Box
backgroundColor={"#4023A6"}
w={30}
h={30}
display={"flex"}
alignItems={"center"}
justifyContent={"center"}
rounded={10}
>
<PiWalletFill color="white" fontSize={"20px"} />
</Box>
</GridItem>
<GridItem
bg={
colorMode === "light"
? "#230A7926"
: "linear-gradient(126.97deg, rgba(6, 11, 38, 0.74) 28.26%, rgba(26, 31, 55, 0.5) 91.2%)"
}
display={"flex"}
justifyContent={"space-between"}
alignItems={"center"}
p={3}
rounded={10}
>
<Box>
<Text
fontSize={"sm"}
color={colorMode === "light" ? "#230A79" : "#A0AEC0"}
>
RBT Price
</Text>
<Text
fontSize={"sm"}
color={colorMode === "light" ? "#230A79" : "#fff"}
>
$53,000
</Text>
</Box>
<Box
backgroundColor={"#4023A6"}
w={30}
h={30}
display={"flex"}
alignItems={"center"}
justifyContent={"center"}
rounded={10}
>
<PiWalletFill color="white" fontSize={"20px"} />
</Box>
</GridItem>
<GridItem
bg={
colorMode === "light"
? "#230A7926"
: "linear-gradient(126.97deg, rgba(6, 11, 38, 0.74) 28.26%, rgba(26, 31, 55, 0.5) 91.2%)"
}
display={"flex"}
justifyContent={"space-between"}
alignItems={"center"}
p={3}
rounded={10}
>
<Box>
<Text
fontSize={"sm"}
color={colorMode === "light" ? "#230A79" : "#A0AEC0"}
>
RBT Price
</Text>
<Text
fontSize={"sm"}
color={colorMode === "light" ? "#230A79" : "#fff"}
>
$53,000
</Text>
</Box>
<Box
backgroundColor={"#4023A6"}
w={30}
h={30}
display={"flex"}
alignItems={"center"}
justifyContent={"center"}
rounded={10}
>
<PiWalletFill color="white" fontSize={"20px"} />
</Box>
</GridItem>
<GridItem
bg={
colorMode === "light"
? "#230A7926"
: "linear-gradient(126.97deg, rgba(6, 11, 38, 0.74) 28.26%, rgba(26, 31, 55, 0.5) 91.2%)"
}
display={"flex"}
justifyContent={"space-between"}
alignItems={"center"}
p={3}
rounded={10}
>
<Box>
<Text
fontSize={"sm"}
color={colorMode === "light" ? "#230A79" : "#A0AEC0"}
>
RBT Price
</Text>
<Text
fontSize={"sm"}
color={colorMode === "light" ? "#230A79" : "#fff"}
>
$53,000
</Text>
</Box>
<Box
backgroundColor={"#4023A6"}
w={30}
h={30}
display={"flex"}
alignItems={"center"}
justifyContent={"center"}
rounded={10}
>
<PiWalletFill color="white" fontSize={"20px"} />
</Box>
</GridItem>
<GridItem
bg={
colorMode === "light"
? "#230A7926"
: "linear-gradient(126.97deg, rgba(6, 11, 38, 0.74) 28.26%, rgba(26, 31, 55, 0.5) 91.2%)"
}
display={"flex"}
justifyContent={"space-between"}
alignItems={"center"}
p={3}
rounded={10}
>
<Box>
<Text
fontSize={"sm"}
color={colorMode === "light" ? "#230A79" : "#A0AEC0"}
>
RBT Price
</Text>
<Text
fontSize={"sm"}
color={colorMode === "light" ? "#230A79" : "#fff"}
>
$53,000
</Text>
</Box>
<Box
backgroundColor={"#4023A6"}
w={30}
h={30}
display={"flex"}
alignItems={"center"}
justifyContent={"center"}
rounded={10}
>
<PiWalletFill color="white" fontSize={"20px"} />
</Box>
</GridItem>
</Grid>
</Container>
</VStack>
);
};
export default AmountCard;

94
src/components/Doughnut/LineChart.jsx Normal file
View File

@@ -0,0 +1,94 @@
// LineChart.jsx
import React from "react";
import { Line } from "react-chartjs-2";
import {
Chart as ChartJS,
Title,
Tooltip,
Legend,
LineElement,
PointElement,
LinearScale,
CategoryScale,
} from "chart.js";
// Register the necessary components
ChartJS.register(
Title,
Tooltip,
Legend,
LineElement,
PointElement,
LinearScale,
CategoryScale
);
// Sample options for the chart
// Sample options for the chart
const options = {
responsive: true,
plugins: {
legend: {
position: "top",
},
tooltip: {
callbacks: {
label: function (context) {
let label = context.dataset.label || "";
if (label) {
label += ": ";
}
if (context.parsed.y !== null) {
label += `${context.parsed.y}`;
}
return label;
},
},
},
},
animation: {
tension: {
duration: 2000,
easing: "linear",
from: 1,
to: 0,
loop: false,
},
},
};
const Utils = {
numbers: ({ count, min, max }) =>
Array.from(
{ length: count },
() => Math.floor(Math.random() * (max - min + 1)) + min
),
CHART_COLORS: {
darkGreen: "#978FED ",
},
transparentize: (color, opacity) => {
return color.replace(/(rgba\(\d+, \d+, \d+, )\d+(\))/, `$1${opacity}$2`);
},
};
const LineChart = ({ width = 300, height = 250 }) => {
const data = {
labels: ["JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC",],
datasets: [
{
label: "Exchange rate",
data: [0, 3, 2, 4, 6, 2, 4, 4, 5, 4, 4, 5],
borderColor: Utils.CHART_COLORS.darkGreen,
backgroundColor: Utils.transparentize(
Utils.CHART_COLORS.darkGreen,0.5
),
pointStyle: "rectRounded",
pointRadius: 1,
pointHoverRadius: 5,
},
],
};
return <Line data={data} options={options} />;
};
export default LineChart;

11
src/components/Footer/Footer.jsx Normal file
View File

@@ -0,0 +1,11 @@
import React from 'react'
const Footer = () => {
return (
<div>
</div>
)
}
export default Footer

109
src/components/LatestTransactions/LatestTransactions.jsx Normal file
View File

@@ -0,0 +1,109 @@
import { Box, Container, Grid, GridItem, HStack, Text, useColorMode } from "@chakra-ui/react";
import React, { useContext } from "react";
import { MdOutlineErrorOutline } from "react-icons/md";
import Pagination from "../Pagination";
import GlobalStateContext from "../../Contexts/GlobalStateContext";
const LatestTransactions = () => {
const { colorMode, toggleColorMode } = useColorMode();
const { transactions } = useContext(GlobalStateContext);
return (
<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;"}>
{transactions.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 color={colorMode === "light" ? "#230A79" : "#B09AFF"} textDecoration={"underline"}>{transaction.sender}</Text>
</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>
<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>
<HStack>
<Text color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}>Subnet ID/Main net :</Text>
<Text color={colorMode === "light" ? "#230A79" : "#B09AFF"}>{transaction.subnetID}</Text>
</HStack>
</Box>
</HStack>
</Box>
</GridItem>
</Grid>
))}
</Box>
<Pagination />
</Container>
</Box>
);
};
export default LatestTransactions;

100
src/components/NavBar/NavBar.jsx Normal file
View File

@@ -0,0 +1,100 @@
/* eslint-disable no-unused-vars */
import {
Box,
Button,
Container,
Icon,
Image,
Stack,
Switch,
useColorMode,
VStack,
} from "@chakra-ui/react";
import { Outlet, Link, useLocation } from "react-router-dom";
import logo from "../../assets/images/rubix.png";
import logoLight from "../../assets/images/light-logo.png";
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 [isSwitchOn, setIsSwitchOn] = useState(true);
useEffect(() => {
const handleScroll = () => {
const scrollPosition = window.scrollY;
setIsScrolled(scrollPosition > 0);
};
const handleResize = () => {
setWindowWidth(window.innerWidth);
};
window.addEventListener("scroll", handleScroll);
window.addEventListener("resize", handleResize);
return () => {
window.removeEventListener("scroll", handleScroll);
window.removeEventListener("resize", handleResize);
};
}, []);
const theme = localStorage?.getItem("light");
return (
<>
<Box
position={"absolute"}
zIndex={"999"}
width={"100%"}
top={0}
left={0}
id="navbar"
// bg={colorMode === "light" ? "light" : "black.900"}
color={colorMode === "light" ? "light" : "black.900"}
padding={"15px 0px"}
// borderBottom={"1px solid #ccc"}
borderBottom={colorMode === "light" ? "1px solid #ccc" : "none"}
>
<Container maxW="6xl">
<Box
display={"flex"}
alignItems={"center"}
justifyContent={"space-between"}
w={"100%"}
>
<Link to="/">
<Image
src={colorMode === "light" ? logoLight : logo}
width={"120px"}
/>
</Link>
<Box display={"flex"} alignItems={"center"} gap={7}>
<Link
to="/mainNet"
style={{ fontSize: "14px", fontWeight: "400" }}
>
MAIN NET
</Link>
<Link
to="/subnet"
style={{ fontSize: "14px", fontWeight: "400" }}
>
SUBNETS
</Link>
<SwitchBtn
isSwitchOn={isSwitchOn}
setIsSwitchOn={setIsSwitchOn}
/>
</Box>
</Box>
</Container>
</Box>
{/* <Box h={"74px"}></Box> */}
</>
);
};
export default NavBar;

100
src/components/Pagination.jsx Normal file
View File

@@ -0,0 +1,100 @@
import React, { useState } from "react";
import {
Select,
HStack,
Text,
Box,
IconButton,
Button,
useColorMode,
} from "@chakra-ui/react";
import { FaArrowLeftLong, FaArrowRightLong } from "react-icons/fa6";
// import { ChevronLeftIcon, ChevronRightIcon } from '@chakra-ui/icons';
const Pagination = ({
pageSize,
setPageSize,
totalItems,
isLoading,
setCurrentPage,
currentPage,
}) => {
// const [] = useState(itemsPerPageOptions[0]);
const { colorMode, toggleColorMode } = useColorMode();
const totalPages = Math.ceil(totalItems / pageSize);
const handlePageSizeChange = (e) => {
setPageSize(Number(e.target.value));
setCurrentPage(1); // Reset to first page whenever page size changes
};
const paginationPrev = () => {
if (currentPage > 1) {
setCurrentPage(currentPage - 1);
}
};
const paginationNext = () => {
if (currentPage < totalPages) {
setCurrentPage(currentPage + 1);
}
};
const displayRange = {
start: (currentPage - 1) * pageSize + 1,
end: Math.min(currentPage * pageSize, totalItems),
};
return (
<HStack mt={16}>
{/* <Text className='web-text-small'>Tanami v0.1</Text> */}
<HStack justifyContent={"space-between"} w={"100%"}>
<Button
mt={1}
size={"sm"}
rounded="md"
leftIcon={<FaArrowLeftLong />} // Icon on the left
onClick={paginationPrev}
className="link pointer"
isDisabled={currentPage === 1}
aria-label="Previous Page"
bg={colorMode === "light" ? "light.100" : "#757575"}
border={colorMode === "light" ? "1px solid #a39797" : "#757575"}
>
Previous
</Button>
{/* <Text
w={"100px"}
display={"flex"}
justifyContent={"center"}
className="web-text-medium"
as={"span"}
>
{isLoading ? "0" : displayRange?.start} - {" "}
{isLoading ? "00" : displayRange?.end} of {" "}
{isLoading ? "00" : totalItems}
</Text> */
}
<Text><Text as={"span"} me={3}>1</Text> <Text as={"span"} me={3}>2</Text> <Text as={"span"} me={3}>3</Text> <Text as={"span"} me={3}>4</Text><Text as={"span"} >....</Text></Text>
<Button
mt={1}
size={"sm"}
rounded="md"
rightIcon={<FaArrowRightLong />} // Icon on the left
onClick={paginationNext}
className="link pointer"
isDisabled={currentPage === totalPages}
aria-label="Previous Page"
bg={colorMode === "light" ? "light.100" : "#757575"}
border={colorMode === "light" ? "1px solid #a39797" : "#757575"}
>
Next
</Button>
</HStack>
</HStack>
);
};
export default Pagination;

59
src/components/SwitchBtn/SwitchBtn.jsx Normal file
View File

@@ -0,0 +1,59 @@
import React from "react";
import { Stack, Switch, Icon, Box, Button, useColorMode } from "@chakra-ui/react";
import { MdLightMode, MdDarkMode } from "react-icons/md";
const SwitchBtn = ({ isSwitchOn, setIsSwitchOn }) => {
const { colorMode, toggleColorMode } = useColorMode();
const switch_onChange_handle = () => {
setIsSwitchOn(!isSwitchOn);
};
return (
<Box onClick={toggleColorMode}>
{/* {colorMode === "light" ? "Dark" : "Light"} */}
<Stack align="center" direction="row" spacing={4}>
<Box
bg={colorMode === "light" ? "#DFDFE1" : "#27262B"}
// as="span"
display="flex"
justifyContent="normal"
alignItems="center"
width="90px"
height="45px"
borderRadius="50px"
// backgroundColor={"#27262B"}
onClick={switch_onChange_handle}
position="relative"
transition="background-color 0.2s"
_before={{
content: '""',
position: "absolute",
width: "32px",
height: "32px",
borderRadius: "50%",
backgroundColor: colorMode === "light" ? "#fff" : "#D9D9D933",
boxShadow: "0 2px 4px rgba(0, 0, 0, 0.2)",
transform: isSwitchOn ? "translateX(48px)" : "translateX(0)",
transition: "transform 0.2s",
left: "5px",
top:"6px"
}}
>
<Icon
color={colorMode === "light" ? "#F49E09" : "#fff"}
as={isSwitchOn ? MdLightMode : MdDarkMode}
// color={isSwitchOn ? "#fff" : "#fff"}
zIndex={1}
position="absolute"
left={isSwitchOn ? "10px" : "auto"}
right={isSwitchOn ? "auto" : "10px"}
fontSize={"25px"}
/>
</Box>
</Stack>
</Box>
);
};
export default SwitchBtn;

67
src/components/SwitchBtn/SwitchCharts.jsx Normal file
View File

@@ -0,0 +1,67 @@
import React from "react";
import {
Stack,
Box,
Text,
useColorMode,
} from "@chakra-ui/react";
const SwitchCharts = ({ isSwitchOn, setIsSwitchOn }) => {
const { colorMode, toggleColorMode } = useColorMode();
const switch_onChange_handle = () => {
setIsSwitchOn(!isSwitchOn);
};
return (
<Box>
<Stack align="center" direction="row" spacing={4}>
<Box
bg={colorMode === "light" ? "#fff" : "#27262B"}
cursor={"pointer"}
display="flex"
justifyContent="normal"
alignItems="center"
width="150px"
height="45px"
borderRadius="10px"
// backgroundColor={"#27262B"}
onClick={switch_onChange_handle}
position="relative"
transition="background-color 0.2s"
_before={{
content: '""',
position: "absolute",
width: "60px",
height: "32px",
borderRadius: "10px",
backgroundColor: "#fff",
boxShadow: "0 2px 4px rgba(0, 0, 0, 0.2)",
transform: isSwitchOn ? "translateX(80px)" : "translateX(0)",
transition: "transform 0.2s",
left: "5px",
top: "6px",
}}
>
<Text
color={colorMode === "light" ? "#000" : "#ccc"}
fontWeight="400"
zIndex={1}
position="absolute"
mb={0}
// color={isSwitchOn ? "#A9A9A9" : "#A9A9A9"}
left={isSwitchOn ? "10px" : "auto"}
right={isSwitchOn ? "auto" : "10px"}
>
{isSwitchOn ? "Monthly" : "Daily"}
</Text>
</Box>
</Stack>
</Box>
);
};
export default SwitchCharts;