api update
This commit is contained in:
2
.env
2
.env
@@ -1,2 +1,2 @@
|
||||
VITE_BASE_URL="https://rexplorerapi.azurewebsites.net/"
|
||||
VITE_BASE_URL="https://rexplorerapi.azurewebsites.net/api/"
|
||||
VITE_IMAGE_URL="https://regroup.betadelivery.com/"
|
||||
|
||||
@@ -82,7 +82,7 @@ define(['./workbox-b5f7729d'], (function (workbox) { 'use strict';
|
||||
"revision": "3ca0b8505b4bec776b69afdba2768812"
|
||||
}, {
|
||||
"url": "index.html",
|
||||
"revision": "0.0iof9eg3rjg"
|
||||
"revision": "0.6ket85o3c1"
|
||||
}], {});
|
||||
workbox.cleanupOutdatedCaches();
|
||||
workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {
|
||||
|
||||
@@ -24,3 +24,7 @@ export function formatRelativeDate(dateString) {
|
||||
return `${timeAgo}, ${formattedDate}`;
|
||||
}
|
||||
|
||||
|
||||
export const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
|
||||
console.log(timeZone); // e.g., "America/New_York"
|
||||
|
||||
|
||||
23
src/Layout/animations.jsx
Normal file
23
src/Layout/animations.jsx
Normal file
@@ -0,0 +1,23 @@
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
export const OPACITY_ON_LOAD = {
|
||||
as: motion.div,
|
||||
initial: { opacity: 0 },
|
||||
animate: { opacity: 1 }
|
||||
}
|
||||
|
||||
export const SLIDE_IN_BOTTOM = {
|
||||
as: motion.div,
|
||||
initial: { opacity: 0, y: 50 },
|
||||
animate: { opacity: 1, y: 0 },
|
||||
transition: { duration: 1, ease: "easeInOut" }
|
||||
};
|
||||
|
||||
|
||||
export const FADE_IN_SCALE_UP = {
|
||||
as: motion.div,
|
||||
initial: { opacity: 0, scale: 0.9 },
|
||||
animate: { opacity: 1, scale: 1 },
|
||||
transition: { duration: 0.5, ease: "easeInOut" }
|
||||
};
|
||||
|
||||
@@ -12,35 +12,68 @@ export const rubix = createApi({
|
||||
"getTransCount",
|
||||
"getTransAll",
|
||||
"getTransById",
|
||||
"getMainNet"
|
||||
"getMainNet",
|
||||
"getAllMainNetCount"
|
||||
],
|
||||
endpoints: (builder) => ({
|
||||
|
||||
getTransCount: builder.query({
|
||||
query: () => `api/Analytics/Transactions/GetCount`,
|
||||
query: () => `Analytics/Transactions/GetCount`,
|
||||
providesTags: ["getTransCount"],
|
||||
}),
|
||||
|
||||
getTransAll: builder.query({
|
||||
query: ({ pageNumber = 1, pageSize = 10 }) => `api/Analytics/Transactions/GetAll?pageNumber=${pageNumber}&pageSize=${pageSize}`,
|
||||
query: ({ pageNumber = 1, pageSize = 10 }) => `Analytics/Transactions/GetAll?pageNumber=${pageNumber}&pageSize=${pageSize}`,
|
||||
providesTags: ["getTransAll"],
|
||||
}),
|
||||
|
||||
getTransById: builder.query({
|
||||
query: (id) => `/api/Transaction/GetById/${id}`,
|
||||
query: (id) => `Transaction/GetById/${id}`,
|
||||
providesTags: ["getTransById"],
|
||||
}),
|
||||
|
||||
|
||||
getMainNetCount: builder.query({
|
||||
query: () => `MainNet/Transactions/GetCount`,
|
||||
providesTags: ["getAllMainNetCount"],
|
||||
}),
|
||||
|
||||
getMainNet: builder.query({
|
||||
query: ({ pageNumber = 1, pageSize = 10 }) => `api/MainNet/Transactions/GetAll?pageNumber=${pageNumber}&pageSize=${pageSize}`,
|
||||
query: ({ pageNumber = 1, pageSize = 10 }) => `MainNet/Transactions/GetAll?pageNumber=${pageNumber}&pageSize=${pageSize}`,
|
||||
providesTags: ["getMainNet"],
|
||||
}),
|
||||
|
||||
getDidById: builder.query({
|
||||
query: (id) => `DIDInfo/GetById/${id}`,
|
||||
providesTags: ["getTransById"],
|
||||
}),
|
||||
|
||||
getMonthlyData: builder.query({
|
||||
query: (timeZoneId) => `/Analytics/monthly-summary?timeZoneId=${timeZoneId}`,
|
||||
providesTags: ["getMonthlyData"],
|
||||
}),
|
||||
|
||||
getDailyData: builder.query({
|
||||
query: (timeZoneId) => `/Analytics/daily-summary?clientTimeZoneId=${timeZoneId}`,
|
||||
providesTags: ["getDailyData"],
|
||||
}),
|
||||
|
||||
getDateWiseData: builder.query({
|
||||
query: (timeZoneId) => `/Analytics/datewise-summary?clientTimeZoneId=${timeZoneId}`,
|
||||
providesTags: ["getDateWiseData"],
|
||||
}),
|
||||
|
||||
|
||||
}),
|
||||
});
|
||||
export const {
|
||||
useGetTransCountQuery,
|
||||
useGetTransAllQuery,
|
||||
useGetTransByIdQuery,
|
||||
useGetMainNetCountQuery,
|
||||
useGetMainNetQuery,
|
||||
useGetDidByIdQuery,
|
||||
useGetMonthlyDataQuery,
|
||||
useGetDailyDataQuery,
|
||||
useGetDateWiseDataQuery
|
||||
} = rubix;
|
||||
|
||||
@@ -13,6 +13,8 @@ import {
|
||||
import { Box, Heading, useColorMode } from "@chakra-ui/react";
|
||||
import ChartsTabs from "../ChartsTabs";
|
||||
import dayjs from "dayjs"; // Import for date handling
|
||||
import { useGetDailyDataQuery, useGetDateWiseDataQuery, useGetMonthlyDataQuery } from "../../Services/api.service";
|
||||
import { timeZone } from "../../Constants/Constants";
|
||||
|
||||
// Register the components of Chart.js you need
|
||||
ChartJS.register(
|
||||
@@ -25,56 +27,77 @@ ChartJS.register(
|
||||
Legend
|
||||
);
|
||||
|
||||
|
||||
|
||||
function formatAndSortDataByDayName(data=[]) {
|
||||
console.log("======", data);
|
||||
|
||||
// Create a shallow copy of the data array before sorting
|
||||
const sortedData = [...data]?.sort((a, b) => a.dayId - b.dayId);
|
||||
|
||||
return sortedData?.map(item => {
|
||||
return {
|
||||
dayName: item.dayName,
|
||||
year: item.year,
|
||||
transactionCount: item.transactionCount,
|
||||
totalPrice: item.totalPrice,
|
||||
totalGasFee: item.totalGasFee,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
const LineChart = () => {
|
||||
const { colorMode } = useColorMode();
|
||||
const [selectedValue, setSelectedValue] = useState("24 Hrs");
|
||||
const [labels, setLabels] = useState([]);
|
||||
const [dataset, setDataset] = useState([]);
|
||||
|
||||
const {
|
||||
data: monthlyData,
|
||||
isLoading: monthlyDataLoading,
|
||||
refetch
|
||||
} = useGetMonthlyDataQuery(timeZone)
|
||||
const dataSetMonthly = monthlyData?.map((data)=>data?.transactionCount)
|
||||
const dataLableMonthly = monthlyData?.map((data) => data?.monthName)
|
||||
|
||||
const {
|
||||
data: dailyData,
|
||||
isLoading: dailyDataLoading,
|
||||
} = useGetDailyDataQuery(timeZone)
|
||||
const dataSetDaily = dailyData?.map((data)=>data?.transactionCount)
|
||||
const dataLableDaily = dailyData?.map((data) => data?.hour)
|
||||
|
||||
const {
|
||||
data: dateData,
|
||||
isLoading: dateDataLoading,
|
||||
} = useGetDateWiseDataQuery(timeZone)
|
||||
|
||||
console.log(formatAndSortDataByDayName(dateData?.data));
|
||||
// console.log(formatAndSortDataByDayName(dateData?.data));
|
||||
|
||||
const dataSetDate = dateData?.data?.map((data)=>data?.transactionCount)
|
||||
const dataLableDate = dateData?.data?.map((data) => data?.dayName)
|
||||
// const dataSetDate = [...(dateData?.data || [])].reverse().map((data) => data?.transactionCount);
|
||||
// const dataLableDate = [...(dateData?.data || [])].reverse().map((data) => data?.dayName);
|
||||
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedValue === "24 Hrs") {
|
||||
// Create hourly labels for 24 hours
|
||||
const hours = Array.from({ length: 24 }, (_, index) => `${index}:00`);
|
||||
setLabels(hours);
|
||||
// Generate random data for each hour
|
||||
const dailyData = Array.from({ length: 24 }, () =>
|
||||
Math.floor(Math.random() * 5000 + 1000)
|
||||
);
|
||||
setDataset(dailyData);
|
||||
setLabels(dataLableDaily);
|
||||
// Generate random data for each day
|
||||
setDataset(dataSetDaily);
|
||||
} else if (selectedValue === `${dayjs().daysInMonth()} Days`) {
|
||||
// Create labels for the current month (days)
|
||||
const daysInMonth = dayjs().daysInMonth();
|
||||
const days = Array.from(
|
||||
{ length: daysInMonth },
|
||||
(_, index) => `Day ${index + 1}`
|
||||
);
|
||||
setLabels(days);
|
||||
setLabels(dataLableDate);
|
||||
// Generate random data for each day
|
||||
const monthlyData = Array.from({ length: daysInMonth }, () =>
|
||||
Math.floor(Math.random() * 5000 + 1000)
|
||||
);
|
||||
setDataset(monthlyData);
|
||||
setDataset(dataSetDate);
|
||||
} else if (selectedValue === "12 Months") {
|
||||
// Labels for months (already set up)
|
||||
setLabels([
|
||||
"Jan",
|
||||
"Feb",
|
||||
"Mar",
|
||||
"Apr",
|
||||
"May",
|
||||
"Jun",
|
||||
"Jul",
|
||||
"Aug",
|
||||
"Sep",
|
||||
"Oct",
|
||||
"Nov",
|
||||
"Dec",
|
||||
]);
|
||||
// Generate random data for each month
|
||||
const yearlyData = Array.from({ length: 12 }, () =>
|
||||
Math.floor(Math.random() * 5000 + 1000)
|
||||
);
|
||||
setDataset(yearlyData);
|
||||
setLabels(dataLableMonthly);
|
||||
setDataset(dataSetMonthly);
|
||||
}
|
||||
}, [selectedValue]);
|
||||
|
||||
@@ -146,6 +169,8 @@ const LineChart = () => {
|
||||
},
|
||||
};
|
||||
|
||||
console.log(data);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box
|
||||
|
||||
30
src/components/FullScreenLoaader/FullScreenLoaader.jsx
Normal file
30
src/components/FullScreenLoaader/FullScreenLoaader.jsx
Normal file
@@ -0,0 +1,30 @@
|
||||
import { Box, Spinner, Text, useColorMode } from "@chakra-ui/react";
|
||||
import React from "react";
|
||||
import bannerImage from "../../assets/images/bannerImg.png";
|
||||
|
||||
const FullScreenLoaader = () => {
|
||||
const { colorMode } = useColorMode();
|
||||
return (
|
||||
<Box
|
||||
backgroundImage={colorMode !== "light" ? `url(${bannerImage})` : "none"}
|
||||
position={"relative"}
|
||||
backgroundSize="contain"
|
||||
backgroundRepeat="no-repeat"
|
||||
h={"100vh"}
|
||||
w={"100vw"}
|
||||
display={"flex"}
|
||||
justifyContent={"center"}
|
||||
alignItems={"center"}
|
||||
>
|
||||
<Spinner
|
||||
thickness="2px"
|
||||
speed="0.65s"
|
||||
emptyColor={colorMode === "light" ? "#fff" : "#000"}
|
||||
color="purple.700"
|
||||
size="lg"
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default FullScreenLoaader;
|
||||
@@ -27,7 +27,7 @@ import rbtLogoOutline from "../../assets/images/rubix-filled.svg";
|
||||
import { HiOutlineRefresh } from "react-icons/hi";
|
||||
|
||||
// Define the keyframes
|
||||
const rotate = keyframes`
|
||||
export const rotate = keyframes`
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
@@ -369,7 +369,7 @@ rounded={"full"}
|
||||
Date and Time Stamp :
|
||||
</Text>
|
||||
<Text color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
|
||||
{formatRelativeDate(timestamp)}
|
||||
{timestamp}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
@@ -423,11 +423,13 @@ rounded={"full"}
|
||||
</Text>
|
||||
</HStack>
|
||||
|
||||
<HStack>
|
||||
|
||||
|
||||
<HStack w={"100%"} justifyContent={'flex-start'}>
|
||||
<Text
|
||||
color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
|
||||
>
|
||||
{subNetworkId === "MainNet" ? "Main net" : "Subnet ID"}{" "}
|
||||
{subNetworkId === "MainNet" ? "Main net" : "Subnet ID"}
|
||||
:
|
||||
</Text>
|
||||
<Text
|
||||
|
||||
@@ -4,6 +4,7 @@ import {
|
||||
Divider,
|
||||
Heading,
|
||||
HStack,
|
||||
Image,
|
||||
Text,
|
||||
useColorMode,
|
||||
useToast,
|
||||
@@ -14,6 +15,11 @@ import { Link, useNavigate, useParams } from "react-router-dom";
|
||||
import RelatedTransactions from "../components/RelatedTransactions/RelatedTransactions";
|
||||
import bannerImage from "../assets/images/bannerImg.png";
|
||||
import ToastBox from "../components/ToastBox";
|
||||
import { useGetDidByIdQuery } from "../Services/api.service";
|
||||
import rbtLogoOutline from "../assets/images/rubix-filled.svg";
|
||||
import Search from '../assets/images/search.png'
|
||||
import FullScreenLoaader from "../components/FullScreenLoaader/FullScreenLoaader";
|
||||
import { OPACITY_ON_LOAD } from "../Layout/animations";
|
||||
|
||||
const DidInfo = () => {
|
||||
useEffect(() => {
|
||||
@@ -42,8 +48,19 @@ const DidInfo = () => {
|
||||
});
|
||||
}
|
||||
|
||||
const {
|
||||
data,
|
||||
isLoading,
|
||||
} = useGetDidByIdQuery(params?.id)
|
||||
console.log(data?.message);
|
||||
|
||||
|
||||
|
||||
return (
|
||||
isLoading?
|
||||
<FullScreenLoaader />:
|
||||
<Box
|
||||
{...OPACITY_ON_LOAD}
|
||||
h={"100vh"}
|
||||
display={"flex"}
|
||||
justifyContent={"space-between"}
|
||||
@@ -64,6 +81,9 @@ const DidInfo = () => {
|
||||
>
|
||||
DID Info
|
||||
</Heading>
|
||||
|
||||
|
||||
{data?.data ?
|
||||
<Box
|
||||
boxShadow={colorMode === "light" && "md"}
|
||||
bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"}
|
||||
@@ -85,17 +105,17 @@ const DidInfo = () => {
|
||||
>
|
||||
<Text
|
||||
isTruncated
|
||||
><Link style={{ fontWeight: "inherit" }}>{params?.id}</Link></Text>
|
||||
><Link style={{ fontWeight: "inherit" }}>{data?.data?.userDID}</Link></Text>
|
||||
<Text as={"span"} ml={5} cursor={"pointer"}>
|
||||
<MdContentCopy
|
||||
onClick={() => copyToClipboard(transaction.sender)}
|
||||
onClick={() => copyToClipboard(data?.data?.userDID)}
|
||||
/>
|
||||
</Text>
|
||||
</HStack>
|
||||
</HStack>
|
||||
<Divider mt={4} mb={5} />
|
||||
<Text
|
||||
color={colorMode === "light" ? "#000" : "#fff"}
|
||||
color={colorMode === "light" ? "#000" : "#969696"}
|
||||
fontSize={"sm"}
|
||||
>
|
||||
Balance
|
||||
@@ -105,14 +125,24 @@ const DidInfo = () => {
|
||||
pb={3}
|
||||
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
|
||||
>
|
||||
<Link style={{ fontWeight: "inherit" }}>$ 10000.12345</Link>
|
||||
<Text
|
||||
display={"flex"}
|
||||
gap={2}
|
||||
alignItems={"center"} ><Image w={4} src={rbtLogoOutline} /> {data?.data?.balance}</Text>
|
||||
<Text as={"span"} ml={5} cursor={"pointer"}>
|
||||
<MdContentCopy
|
||||
{/* <MdContentCopy
|
||||
onClick={() => copyToClipboard(transaction.sender)}
|
||||
/>
|
||||
/> */}
|
||||
</Text>
|
||||
</HStack>
|
||||
</Box>
|
||||
</Box>:
|
||||
<HStack h={'35vh'} justifyContent={"center"} mt={10}>
|
||||
<Image w={"40px"} src={Search}/>
|
||||
<Text as={"span"} color={"#787878"}>{data?.message}</Text>
|
||||
</HStack>}
|
||||
|
||||
|
||||
|
||||
</Container>
|
||||
</Box>
|
||||
<RelatedTransactions />
|
||||
|
||||
@@ -23,6 +23,8 @@ import bannerImage from "../assets/images/bannerImg.png";
|
||||
import bannerImageMobile from "../assets/images/bannerImgmobile.png";
|
||||
import { BiSearchAlt } from "react-icons/bi";
|
||||
|
||||
|
||||
|
||||
const Home = () => {
|
||||
const [isSwitchOn, setIsSwitchOn] = useState(true);
|
||||
const { colorMode, toggleColorMode } = useColorMode();
|
||||
|
||||
@@ -1,4 +1,18 @@
|
||||
import { Box, Container, Grid, GridItem, Heading, HStack, Icon, Image, Select, Text, useColorMode, useToast, VStack } from "@chakra-ui/react";
|
||||
import {
|
||||
Box,
|
||||
Container,
|
||||
Grid,
|
||||
GridItem,
|
||||
Heading,
|
||||
HStack,
|
||||
Icon,
|
||||
Image,
|
||||
Select,
|
||||
Text,
|
||||
useColorMode,
|
||||
useToast,
|
||||
VStack,
|
||||
} from "@chakra-ui/react";
|
||||
import React, { useContext, useEffect, useState } from "react";
|
||||
import bannerImage from "../assets/images/bannerImg.png";
|
||||
import GlobalStateContext from "../Contexts/GlobalStateContext";
|
||||
@@ -6,16 +20,22 @@ import Pagination from "../components/Pagination";
|
||||
import { MdContentCopy, MdOutlineErrorOutline } from "react-icons/md";
|
||||
import ToastBox from "../components/ToastBox";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import { useGetMainNetQuery } from "../Services/api.service";
|
||||
import {
|
||||
useGetMainNetCountQuery,
|
||||
useGetMainNetQuery,
|
||||
} from "../Services/api.service";
|
||||
import { formatRelativeDate } from "../Constants/Constants";
|
||||
import rbtLogoOutline from "../assets/images/rubix-filled.svg";
|
||||
import FullScreenLoaader from "../components/FullScreenLoaader/FullScreenLoaader";
|
||||
import { OPACITY_ON_LOAD } from "../Layout/animations";
|
||||
import { HiOutlineRefresh } from "react-icons/hi";
|
||||
import { rotate } from "../components/LatestTransactions/LatestTransactions";
|
||||
|
||||
const MainNet = () => {
|
||||
const { overview } = useContext(GlobalStateContext);
|
||||
const { colorMode } = useColorMode();
|
||||
const navigate = useNavigate()
|
||||
const toast = useToast()
|
||||
|
||||
const navigate = useNavigate();
|
||||
const toast = useToast();
|
||||
|
||||
const [isRotating, setIsRotating] = useState(false);
|
||||
const [currentPage, setCurrentPage] = useState(1); // Tracks the current page
|
||||
@@ -24,22 +44,28 @@ const MainNet = () => {
|
||||
const [lastRefreshedTime, setLastRefreshedTime] = useState(new Date()); // Store the last refresh time
|
||||
const [relativeRefreshTime, setRelativeRefreshTime] = useState("Just now");
|
||||
|
||||
const {
|
||||
data: transGetMainNetCount,
|
||||
isLoading: isTransGetMainNetCountLoading,
|
||||
refetch: transGetMainNetCountRefetch,
|
||||
} = useGetMainNetCountQuery();
|
||||
|
||||
console.log(transGetMainNetCount?.data);
|
||||
|
||||
const {
|
||||
data: mainNetData,
|
||||
isLoading: isMainNetDataLoading,
|
||||
refetch: mainNetRefetch
|
||||
refetch: mainNetRefetch,
|
||||
} = useGetMainNetQuery({
|
||||
pageNumber: currentPage,
|
||||
pageSize: pageSize,
|
||||
})
|
||||
});
|
||||
|
||||
console.log(mainNetData);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
setTotalItems(mainNetData?.data?.totalCount);
|
||||
}, [mainNetData]);
|
||||
|
||||
setTotalItems(transGetMainNetCount?.data?.transactionCount);
|
||||
}, [transGetMainNetCount]);
|
||||
|
||||
function copyToClipboard(text) {
|
||||
navigator.clipboard
|
||||
@@ -56,8 +82,39 @@ const MainNet = () => {
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<Box p={"6rem 0 4rem 0"} backgroundImage={colorMode !== "light" ? `url(${bannerImage})` : "none"} position={"relative"} backgroundSize="contain" backgroundRepeat="no-repeat">
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
// Update relative time every minute
|
||||
const intervalId = setInterval(() => {
|
||||
updateRelativeTime();
|
||||
}, 60000); // 60 seconds = 60000ms
|
||||
|
||||
return () => clearInterval(intervalId); // Cleanup the interval on unmount
|
||||
}, [lastRefreshedTime]);
|
||||
|
||||
|
||||
const handleRefreshClick = () => {
|
||||
setIsRotating(true); // Start rotation
|
||||
mainNetRefetch();
|
||||
setTimeout(() => {
|
||||
setIsRotating(false); // Stop rotation after 500ms
|
||||
}, 500);
|
||||
setLastRefreshedTime(new Date()); // Set the new refresh time
|
||||
setRelativeRefreshTime("Just now"); // Reset relative time to "Just now"
|
||||
};
|
||||
|
||||
return isTransGetMainNetCountLoading || isMainNetDataLoading ? (
|
||||
<FullScreenLoaader />
|
||||
) : (
|
||||
<Box
|
||||
{...OPACITY_ON_LOAD}
|
||||
p={"6rem 0 4rem 0"}
|
||||
backgroundImage={colorMode !== "light" ? `url(${bannerImage})` : "none"}
|
||||
position={"relative"}
|
||||
backgroundSize="contain"
|
||||
backgroundRepeat="no-repeat"
|
||||
>
|
||||
<Container
|
||||
maxW="6xl"
|
||||
color="white"
|
||||
@@ -65,7 +122,12 @@ const MainNet = () => {
|
||||
justifyContent={"space-between"}
|
||||
mb={10}
|
||||
>
|
||||
<Heading fontSize={"md"} fontWeight={400} color={colorMode === "light" ? "#000" : "#fff"} mb={{base :"10px" ,md : "0px"}}>
|
||||
<Heading
|
||||
fontSize={"md"}
|
||||
fontWeight={400}
|
||||
color={colorMode === "light" ? "#000" : "#fff"}
|
||||
mb={{ base: "10px", md: "0px" }}
|
||||
>
|
||||
Main Net - Overview
|
||||
</Heading>
|
||||
{/* <Text to="" style={{ fontSize: "14px" }} color={colorMode === "light" ? "#000" : "#fff"} display={"flex"} gap={"3"}>
|
||||
@@ -80,6 +142,7 @@ const MainNet = () => {
|
||||
<Box>
|
||||
<Container maxW="6xl">
|
||||
<Grid
|
||||
position={"relative"}
|
||||
templateColumns={{ base: "100% 0%", md: "10% 90%" }}
|
||||
gap={0}
|
||||
bg={colorMode === "light" ? "#230A79" : "#232127"}
|
||||
@@ -87,12 +150,39 @@ const MainNet = () => {
|
||||
borderTopRightRadius={4}
|
||||
borderTopLeftRadius={4}
|
||||
>
|
||||
<GridItem p={2} display={{ base: "none", md: "grid" }}>
|
||||
<GridItem ps={3} p={2} display={{ base: "none", md: "grid" }}>
|
||||
<Text color={"#fff"}>Sr. no</Text>
|
||||
</GridItem>
|
||||
<GridItem p={2}>
|
||||
<Text color={"#fff"}>Transactions</Text>
|
||||
</GridItem>
|
||||
|
||||
<Box
|
||||
as="span"
|
||||
cursor={"pointer"}
|
||||
position={"absolute"}
|
||||
right={0}
|
||||
m={1.5}
|
||||
display={'flex'}
|
||||
alignItems={'center'}
|
||||
gap={2}
|
||||
onClick={handleRefreshClick} // Trigger the rotation when clicked
|
||||
>
|
||||
<Text as={'span'} fontSize={'xs'} color={colorMode==="light"?'#fff':"#ccc"}>Last refresh {relativeRefreshTime} </Text>
|
||||
<Icon
|
||||
|
||||
bg={colorMode==="light"?'#fff':"#434147"}
|
||||
p={1.5}
|
||||
boxSize={7}
|
||||
rounded={"full"}
|
||||
as={HiOutlineRefresh}
|
||||
animation={
|
||||
isRotating || isMainNetDataLoading
|
||||
? `${rotate} 1s linear infinite`
|
||||
: "none"
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
</Grid>
|
||||
<Box boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;"}>
|
||||
{mainNetData?.data?.items?.map(
|
||||
@@ -146,7 +236,9 @@ const MainNet = () => {
|
||||
textOverflow={"ellipsis"}
|
||||
isTruncated
|
||||
cursor={"pointer"}
|
||||
onClick={() => navigate(`/transaction/${transactionId}`)}
|
||||
onClick={() =>
|
||||
navigate(`/transaction/${transactionId}`)
|
||||
}
|
||||
>
|
||||
{transactionId}
|
||||
</Text>
|
||||
@@ -171,7 +263,9 @@ const MainNet = () => {
|
||||
gap={{ base: 2, md: 4 }}
|
||||
mb={2}
|
||||
>
|
||||
<Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
|
||||
<Text
|
||||
color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}
|
||||
>
|
||||
Sender:
|
||||
</Text>
|
||||
|
||||
@@ -202,7 +296,9 @@ const MainNet = () => {
|
||||
ml={1}
|
||||
cursor={"pointer"}
|
||||
>
|
||||
<MdContentCopy onClick={() => copyToClipboard(sender)} />
|
||||
<MdContentCopy
|
||||
onClick={() => copyToClipboard(sender)}
|
||||
/>
|
||||
</Text>
|
||||
</HStack>
|
||||
</HStack>
|
||||
@@ -212,7 +308,9 @@ const MainNet = () => {
|
||||
gap={{ base: 2, md: 4 }}
|
||||
mb={3}
|
||||
>
|
||||
<Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
|
||||
<Text
|
||||
color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}
|
||||
>
|
||||
Receiver:
|
||||
</Text>
|
||||
<HStack
|
||||
@@ -262,12 +360,16 @@ const MainNet = () => {
|
||||
<Text
|
||||
mb={2}
|
||||
// fontSize={{base:"xs", md:"sm" }}
|
||||
color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
|
||||
color={
|
||||
colorMode === "light" ? "#7B7B7B" : "#E8E8E8"
|
||||
}
|
||||
>
|
||||
Smart contract ID :
|
||||
</Text>
|
||||
<Text
|
||||
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
|
||||
color={
|
||||
colorMode === "light" ? "#230A79" : "#B09AFF"
|
||||
}
|
||||
>
|
||||
<Link to="/smart-contract">{smartContract}</Link>
|
||||
</Text>
|
||||
@@ -280,7 +382,9 @@ const MainNet = () => {
|
||||
>
|
||||
Date and Time Stamp :
|
||||
</Text>
|
||||
<Text color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
|
||||
<Text
|
||||
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
|
||||
>
|
||||
{formatRelativeDate(timestamp)}
|
||||
</Text>
|
||||
</Box>
|
||||
@@ -324,26 +428,36 @@ const MainNet = () => {
|
||||
<VStack fontSize={{ base: "xs", md: "sm" }}>
|
||||
<HStack w={"100%"} justifyContent={"flex-start"}>
|
||||
<Text
|
||||
color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
|
||||
color={
|
||||
colorMode === "light" ? "#7B7B7B" : "#E8E8E8"
|
||||
}
|
||||
>
|
||||
Transaction type :
|
||||
</Text>
|
||||
<Text
|
||||
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
|
||||
color={
|
||||
colorMode === "light" ? "#230A79" : "#B09AFF"
|
||||
}
|
||||
>
|
||||
<Text>{transactionType}</Text>
|
||||
</Text>
|
||||
</HStack>
|
||||
|
||||
<HStack>
|
||||
<HStack w={"100%"} justifyContent={'flex-start'}>
|
||||
<Text
|
||||
color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
|
||||
color={
|
||||
colorMode === "light" ? "#7B7B7B" : "#E8E8E8"
|
||||
}
|
||||
>
|
||||
{subNetworkId === "MainNet" ? "Main net" : "Subnet ID"}{" "}
|
||||
{subNetworkId === "MainNet"
|
||||
? "Main net"
|
||||
: "Subnet ID"}{" "}
|
||||
:
|
||||
</Text>
|
||||
<Text
|
||||
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
|
||||
color={
|
||||
colorMode === "light" ? "#230A79" : "#B09AFF"
|
||||
}
|
||||
>
|
||||
<Link
|
||||
to={`/subnet-id-overview/${subNetworkId}`}
|
||||
|
||||
@@ -123,13 +123,13 @@ const TransactionDetails = () => {
|
||||
</HStack>
|
||||
</HStack>
|
||||
<Divider mt={4} mb={5} />
|
||||
<Text
|
||||
{data?.data?.tokenList || data?.data?.blockHash&&<Text
|
||||
fontSize={"md"}
|
||||
mb={2}
|
||||
color={colorMode === "light" ? "#230A79" : "#fff"}
|
||||
>
|
||||
Token Information
|
||||
</Text>
|
||||
</Text>}
|
||||
{data?.data?.tokenList &&
|
||||
<Box
|
||||
fontSize={"sm"}
|
||||
@@ -202,6 +202,10 @@ const TransactionDetails = () => {
|
||||
</Text>
|
||||
</Box>}
|
||||
</Box>
|
||||
|
||||
|
||||
|
||||
|
||||
<Box
|
||||
boxShadow={colorMode === "light" && "md"}
|
||||
bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"}
|
||||
@@ -214,7 +218,7 @@ const TransactionDetails = () => {
|
||||
color={colorMode === "light" ? "#000" : "#fff"}
|
||||
fontSize={"sm"}
|
||||
>
|
||||
Main net / Subnet Id
|
||||
{data?.data?.netWorkType}
|
||||
</Text>
|
||||
<HStack
|
||||
fontSize={"sm"}
|
||||
@@ -228,7 +232,7 @@ const TransactionDetails = () => {
|
||||
isTruncated
|
||||
cursor={"pointer"}
|
||||
>
|
||||
{data?.data?.netWorkType}
|
||||
{data?.data?.subNetworkId}
|
||||
</Text>
|
||||
<Text
|
||||
_hover={{ bg: "gray.50" }}
|
||||
@@ -258,7 +262,7 @@ const TransactionDetails = () => {
|
||||
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
|
||||
>
|
||||
<Text
|
||||
onClick={() => navigate(`/did-info/${filteredData.sender}`)}
|
||||
onClick={() => navigate(`/did-info/${data?.data?.sender}`)}
|
||||
fontWeight={"inherit"}
|
||||
whiteSpace={"nowrap"} // Prevent the text from wrapping
|
||||
textOverflow={"ellipsis"}
|
||||
@@ -277,7 +281,7 @@ const TransactionDetails = () => {
|
||||
cursor={"pointer"}
|
||||
>
|
||||
<MdContentCopy
|
||||
onClick={() => copyToClipboard(data?.data?.sender)}
|
||||
onClick={() => copyToClipboard(data?.data?.receiver)}
|
||||
/>
|
||||
</Text>
|
||||
</HStack>
|
||||
@@ -295,7 +299,7 @@ const TransactionDetails = () => {
|
||||
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
|
||||
>
|
||||
<Text
|
||||
onClick={() => navigate(`/did-info/${filteredData.receiver}`)}
|
||||
onClick={() => navigate(`/did-info/${data?.data?.receiver}`)}
|
||||
fontWeight={"inherit"}
|
||||
whiteSpace={"nowrap"} // Prevent the text from wrapping
|
||||
textOverflow={"ellipsis"}
|
||||
|
||||
Reference in New Issue
Block a user