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

updted

Browse Source
This commit is contained in:
YasinShaikh123
2024-10-01 20:15:44 +05:30
parent fad753e60e
commit 4bc7338ebf
8 changed files with 170 additions and 290 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 MiB

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

@@ -9,13 +9,107 @@ import {
VStack,
} from "@chakra-ui/react";
import React from "react";
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 statsData = [
{
label: "RBT Price",
value: "$53,000",
icon: <FaWallet color="white" fontSize={"20px"} />,
},
{
label: "Transaction",
value: "2,300",
icon: <FaGlobe color="white" fontSize={"20px"} />,
},
{
label: "DID count",
value: "+3,052",
icon: <FaFileAlt color="white" fontSize={"20px"} />,
},
];
const statsDataFour = [
{
label: "Total Supply",
value: "$173,000",
icon: <FaShoppingCart color="white" fontSize={"20px"} />,
},
{
label: "Circulating Supply",
value: "$173,000",
icon: <FaShoppingCart color="white" fontSize={"20px"} />,
},
{
label: "Pledged RBT",
value: "$173,000",
icon: <FaShoppingCart color="white" fontSize={"20px"} />,
},
{
label: "Pledged RBT",
value: "$173,000",
icon: <FaShoppingCart color="white" fontSize={"20px"} />,
},
];
return (
<VStack>
<Container maxW="4xl">
<Grid
templateColumns="repeat(3, 2fr)"
gap={4}
bg={colorMode === "light" ? "light.100" : "black.900"}
justifyContent="center"
alignItems="center"
>
{statsData.map((item, index) => (
<GridItem
key={index}
bg={
colorMode === "light"
? "#230A7926"
: "linear-gradient(126.97deg, rgba(6, 11, 38, 0.74) 28.26%, rgba(26, 31, 55, 1.5) 91.2%)"
}
display={"flex"}
justifyContent={"space-between"}
alignItems={"center"}
p={3}
rounded={10}
>
<Box>
<Text
fontSize={"sm"}
color={colorMode === "light" ? "#230A79" : "#A0AEC0"}
>
{item.label}
</Text>
<Text
fontSize={"sm"}
color={colorMode === "light" ? "#230A79" : "#fff"}
>
{item.value}
</Text>
</Box>
<Box
backgroundColor={"#4023A6"}
w={30}
h={30}
display={"flex"}
alignItems={"center"}
justifyContent={"center"}
rounded={10}
>
{item.icon}
</Box>
</GridItem>
))}
</Grid>
</Container>
<Container maxW="6xl">
<Grid
templateColumns="repeat(4, 2fr)"
@@ -24,272 +118,47 @@ const AmountCard = () => {
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}
{statsDataFour.map((item, index) => (
<GridItem
key={index}
bg={
colorMode === "light"
? "#230A7926"
: "linear-gradient(126.97deg, rgba(6, 11, 38, 0.74) 28.26%, rgba(26, 31, 55, 1.5) 91.2%)"
}
display={"flex"}
justifyContent={"space-between"}
alignItems={"center"}
justifyContent={"center"}
p={3}
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"}
<Box>
<Text
fontSize={"sm"}
color={colorMode === "light" ? "#230A79" : "#A0AEC0"}
>
{item.label}
</Text>
<Text
fontSize={"sm"}
color={colorMode === "light" ? "#230A79" : "#fff"}
>
{item.value}
</Text>
</Box>
<Box
backgroundColor={"#4023A6"}
w={30}
h={30}
display={"flex"}
alignItems={"center"}
justifyContent={"center"}
rounded={10}
>
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>
{item.icon}
</Box>
</GridItem>
))}
</Grid>
</Container>
</VStack>

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

@@ -3,6 +3,7 @@ import React, { useContext } from "react";
import { MdOutlineErrorOutline } from "react-icons/md";
import Pagination from "../Pagination";
import GlobalStateContext from "../../Contexts/GlobalStateContext";
import { Link } from "react-router-dom";
@@ -45,7 +46,9 @@ 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"}>{transaction.sender}</Text>
<Text color={colorMode === "light" ? "#230A79" : "#B09AFF"} textDecoration={"underline"}>
<Link>{transaction.sender}</Link>
</Text>
</HStack>
<HStack fontSize={"sm"} gap={4} mb={3}>
<Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>Receiver :</Text>

2
src/components/NavBar/NavBar.jsx
View File

@@ -53,7 +53,7 @@ const NavBar = () => {
id="navbar"
// bg={colorMode === "light" ? "light" : "black.900"}
color={colorMode === "light" ? "light" : "black.900"}
padding={"15px 0px"}
padding={"22px 0px"}
// borderBottom={"1px solid #ccc"}
borderBottom={colorMode === "light" ? "1px solid #ccc" : "none"}
>

4
src/components/Pagination.jsx
View File

@@ -60,7 +60,7 @@ const Pagination = ({
className="link pointer"
isDisabled={currentPage === 1}
aria-label="Previous Page"
bg={colorMode === "light" ? "light.100" : "#757575"}
bg={colorMode === "light" ? "light.100" : "#232127"}
border={colorMode === "light" ? "1px solid #a39797" : "#757575"}
>
Previous
@@ -87,7 +87,7 @@ const Pagination = ({
className="link pointer"
isDisabled={currentPage === totalPages}
aria-label="Previous Page"
bg={colorMode === "light" ? "light.100" : "#757575"}
bg={colorMode === "light" ? "light.100" : "#232127"}
border={colorMode === "light" ? "1px solid #a39797" : "#757575"}
>
Next

14
src/components/SwitchBtn/SwitchBtn.jsx
View File

@@ -19,8 +19,8 @@ const SwitchBtn = ({ isSwitchOn, setIsSwitchOn }) => {
display="flex"
justifyContent="normal"
alignItems="center"
width="90px"
height="45px"
width="80px"
height="35px"
borderRadius="50px"
// backgroundColor={"#27262B"}
onClick={switch_onChange_handle}
@@ -29,15 +29,15 @@ const SwitchBtn = ({ isSwitchOn, setIsSwitchOn }) => {
_before={{
content: '""',
position: "absolute",
width: "32px",
height: "32px",
width: "28px",
height: "28px",
borderRadius: "50%",
backgroundColor: colorMode === "light" ? "#fff" : "#D9D9D933",
boxShadow: "0 2px 4px rgba(0, 0, 0, 0.2)",
transform: isSwitchOn ? "translateX(48px)" : "translateX(0)",
transform: isSwitchOn ? "translateX(42px)" : "translateX(0)",
transition: "transform 0.2s",
left: "5px",
top:"6px"
top:"3px"
}}
>
<Icon
@@ -48,7 +48,7 @@ const SwitchBtn = ({ isSwitchOn, setIsSwitchOn }) => {
position="absolute"
left={isSwitchOn ? "10px" : "auto"}
right={isSwitchOn ? "auto" : "10px"}
fontSize={"25px"}
fontSize={"24px"}
/>
</Box>
</Stack>

18
src/components/SwitchBtn/SwitchCharts.jsx
View File

@@ -24,8 +24,8 @@ const SwitchCharts = ({ isSwitchOn, setIsSwitchOn }) => {
display="flex"
justifyContent="normal"
alignItems="center"
width="150px"
height="45px"
width="130px"
height="40px"
borderRadius="10px"
// backgroundColor={"#27262B"}
onClick={switch_onChange_handle}
@@ -34,20 +34,20 @@ const SwitchCharts = ({ isSwitchOn, setIsSwitchOn }) => {
_before={{
content: '""',
position: "absolute",
width: "60px",
height: "32px",
width: "40px",
height: "25px",
borderRadius: "10px",
backgroundColor: "#fff",
backgroundColor: colorMode === "light" ? "#DEDBEB" : "#fff", // Correct usage of backgroundColor
boxShadow: "0 2px 4px rgba(0, 0, 0, 0.2)",
transform: isSwitchOn ? "translateX(80px)" : "translateX(0)",
transition: "transform 0.2s",
left: "5px",
top: "6px",
left: "4px",
top: "7px",
}}
>
<Text
color={colorMode === "light" ? "#000" : "#ccc"}
color={colorMode === "light" ? "#000" : "#ccc"}
fontWeight="400"
zIndex={1}
position="absolute"

26
src/pages/Home.jsx
View File

@@ -19,6 +19,7 @@ import SwitchCharts from "../components/SwitchBtn/SwitchCharts";
import LatestTransactions from "../components/LatestTransactions/LatestTransactions";
import { Link } from "react-router-dom";
import Pagination from "../components/Pagination";
import bannerImage from "../assets/images/bannerImg.png";
const Home = () => {
const [isSwitchOn, setIsSwitchOn] = useState(true);
@@ -26,9 +27,11 @@ const Home = () => {
return (
<>
<Box
// bg={colorMode === "light" ? "#fff" : "linear-gradient(126.97deg, rgba(6, 11, 38, 0.74) 28.26%, rgba(26, 31, 55, 0.5) 91.2%);"}
bg={colorMode === "light" ? "#fff" : "#000"}
<Box
bg={colorMode === "light" ? "#fff" : "none"}
backgroundImage={colorMode !== "light" ? `url(${bannerImage})` : "none"}
backgroundSize="contain"
backgroundRepeat="no-repeat"
>
<VStack mb={"5rem"}>
<Container maxW="container.sm" position={"relative"}>
@@ -37,21 +40,24 @@ const Home = () => {
width={"100%"}
size="sm"
bg={colorMode === "light" ? "light.100" : "#393939"}
border={"none"}
// border={"none"}
rounded={5}
>
<Input
roundedLeft={8}
w={"77%"}
border={`1px solid ${
colorMode === "light" ? "#230A79" : "#393939"
}`}
h={"42px"}
type="search"
placeholder="Search by Transaction hash, token hash , DID or smart contract"
rounded="md"
focusBorderColor="#3725EA"
// value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
_placeholder={colorMode === "light" ? "red" : "red"}
_focusVisible={{
borderColor:
colorMode === "light" ? "none" : "1px solid #230A79",
}}
/>
<Button
zIndex={99}
@@ -61,9 +67,12 @@ const Home = () => {
right={"0"}
top={"0"}
fontSize={"sm"}
rounded={0}
border={`1px solid ${
colorMode === "light" ? "#230A79" : "#393939"
}`}
borderLeft={0}
borderRight={0}
bg={colorMode === "light" ? "transparent" : "#565252"}
_hover={{
border: `1px solid ${
@@ -80,9 +89,8 @@ const Home = () => {
pointerEvents="none"
position={"inherit"}
right={"0"}
// bg={"#393939"}
h={"42px"}
rounded={7}
roundedRight={7}
w={"42px"}
display={"flex"}
justifyContent={"center"}