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

update

Browse Source
This commit is contained in:
Siddhesh More
2024-10-14 13:44:41 +05:30
parent 6e48eb133d
commit adce47b043
10 changed files with 175 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -52,8 +52,8 @@ const AmountCard = () => {
icon: <FaShoppingCart color="white" fontSize={"20px"} />,
},
{
label: "Pledged RBT",
value: "$173,000",
label: "Number of smart contracts",
value: "73,000",
icon: <FaShoppingCart color="white" fontSize={"20px"} />,
},
];
@@ -62,9 +62,10 @@ const AmountCard = () => {
<VStack>
<Container maxW="4xl">
<Grid
mb={2}
mb={8}
templateColumns="repeat(3, 2fr)"
gap={4}
gap={6}
bg={colorMode === "light" ? "light.100" : "black.900"}
justifyContent="center"
alignItems="center"
@@ -81,16 +82,18 @@ const AmountCard = () => {
justifyContent={"space-between"}
alignItems={"center"}
p={3}
rounded={10}
rounded={"lg"}
boxShadow={'md'}
>
<Box>
<Text
fontSize={"sm"}
fontSize={"xs"}
color={colorMode === "light" ? "#230A79" : "#A0AEC0"}
>
{item.label}
</Text>
<Text
fontWeight={600}
fontSize={"sm"}
color={colorMode === "light" ? "#230A79" : "#fff"}
>
@@ -115,7 +118,7 @@ const AmountCard = () => {
<Container maxW="6xl">
<Grid
templateColumns="repeat(4, 2fr)"
gap={4}
gap={6}
bg={colorMode === "light" ? "light.100" : "black.900"}
justifyContent="center"
alignItems="center"
@@ -132,17 +135,20 @@ const AmountCard = () => {
justifyContent={"space-between"}
alignItems={"center"}
p={3}
rounded={10}
rounded={"lg"}
boxShadow={'md'}
>
<Box>
<Text
fontSize={"sm"}
fontSize={"xs"}
color={colorMode === "light" ? "#230A79" : "#A0AEC0"}
>
{item.label}
</Text>
<Text
fontSize={"sm"}
fontWeight={600}
color={colorMode === "light" ? "#230A79" : "#fff"}
>
{item.value}

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

@@ -1,4 +1,4 @@
import { Box, Container, Grid, GridItem, HStack, Text, useColorMode } from "@chakra-ui/react";
import { Box, Container, Grid, GridItem, HStack, Text, VStack, useColorMode, useToast } from "@chakra-ui/react";
import React, { useContext } from "react";
import { MdContentCopy, MdOutlineErrorOutline } from "react-icons/md";
import Pagination from "../Pagination";
@@ -9,6 +9,7 @@ import ToastBox from "../ToastBox";
const LatestTransactions = () => {
const toast = useToast()
const { colorMode} = useColorMode();
const { transactions } = useContext(GlobalStateContext);
@@ -86,7 +87,7 @@ const LatestTransactions = () => {
mb={3}
>
<Box>
<Text mb={2} color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}>
<Text mb={2} color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}>
Smart contract ID dd :
</Text>
<Text color={colorMode === "light" ? "#230A79" : "#B09AFF"}>{transaction.contract}</Text>
@@ -106,23 +107,26 @@ const LatestTransactions = () => {
</HStack>
<HStack fontSize={"sm"} alignItems={"flex-start"}>
<MdOutlineErrorOutline
fontSize={"20px"}
style={{ paddingTop: "4px" }}
fontSize={"18px"}
style={{ marginTop: "1px" }}
color="#7B7B7B"
/>
<Box>
<HStack>
<VStack>
<HStack w={'100%'} justifyContent={'flex-start'}>
<Text color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}>Transaction type :</Text>
<Text color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
<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"}>
<Link to="/subnet-inner" style={{fontWeight:"inherit"}}>{transaction.subnetID}</Link>
</Text>
</HStack>
</Box>
</VStack>
</HStack>
</Box>
</GridItem>

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

@@ -12,7 +12,7 @@ import {
} from "@chakra-ui/react";
import { Outlet, Link, useLocation, NavLink } from "react-router-dom";
import logo from "../../assets/images/rubix.png";
import logoLight from "../../assets/images/light-logo.png";
import logoLight from "../../assets/images/rubixlogo.svg";
import { useEffect, useState } from "react";
import SwitchBtn from "../SwitchBtn/SwitchBtn";
@@ -53,9 +53,10 @@ const NavBar = () => {
id="navbar"
// bg={colorMode === "light" ? "light" : "black.900"}
color={colorMode === "light" ? "light" : "black.900"}
padding={"22px 0px"}
padding={"16px 0px"}
// borderBottom={"1px solid #ccc"}
borderBottom={colorMode === "light" ? "1px solid #ccc" : "none"}
// boxShadow={'md'}
>
<Container maxW="6xl">
<Box

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

@@ -19,8 +19,8 @@ const SwitchBtn = ({ isSwitchOn, setIsSwitchOn }) => {
display="flex"
justifyContent="normal"
alignItems="center"
width="80px"
height="35px"
width="50px"
height="25px"
borderRadius="50px"
// backgroundColor={"#27262B"}
onClick={switch_onChange_handle}
@@ -29,16 +29,17 @@ const SwitchBtn = ({ isSwitchOn, setIsSwitchOn }) => {
_before={{
content: '""',
position: "absolute",
width: "28px",
height: "28px",
width: "18px",
height: "18px",
borderRadius: "50%",
backgroundColor: colorMode === "light" ? "#fff" : "#D9D9D933",
boxShadow: "0 2px 4px rgba(0, 0, 0, 0.2)",
transform: isSwitchOn ? "translateX(42px)" : "translateX(0)",
transform: isSwitchOn ? "translateX(22px)" : "translateX(0)",
transition: "transform 0.2s",
left: "5px",
top:"3px"
}}
cursor={'pointer'}
>
<Icon
color={colorMode === "light" ? "#F49E09" : "#fff"}
@@ -46,9 +47,9 @@ const SwitchBtn = ({ isSwitchOn, setIsSwitchOn }) => {
// color={isSwitchOn ? "#fff" : "#fff"}
zIndex={1}
position="absolute"
left={isSwitchOn ? "10px" : "auto"}
right={isSwitchOn ? "auto" : "10px"}
fontSize={"24px"}
left={isSwitchOn ? "5px" : "auto"}
right={isSwitchOn ? "auto" : "5px"}
fontSize={"18px"}
/>
</Box>
</Stack>

21
src/components/ToastBox.jsx
View File

@@ -1,23 +1,18 @@
import { Box, Text } from "@chakra-ui/react";
import { Box, Text, useColorMode } 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>
const { colorMode} = useColorMode();
return (
<Box rounded={5} w={250} bg={colorMode === "light" ? "#fff" : "linear-gradient(126.97deg, rgba(6, 11, 38, 0.74) 28.26%, rgba(26, 31, 55, 1.5) 91.2%)"} color={colorMode === "light" ? "#230A79" : "#fff"} p={3} display={"flex"} alignItems={"center"}>
{status === "error" || status === "warn" ? <IoWarningOutline /> : <FaCheck /> }
<Text fontSize={"sm"} as={"span"} ml={2}>{message}</Text>
</Box>
);
};