api update

This commit is contained in:
2024-10-22 11:19:47 +05:30
parent 68aaa56d15
commit 5a424b3719
12 changed files with 606 additions and 339 deletions

2
.env
View File

@@ -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/"

View File

@@ -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"), {

View File

@@ -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
View 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" }
};

View File

@@ -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;

View File

@@ -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

View 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;

View File

@@ -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

View File

@@ -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 />

View File

@@ -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();

View File

@@ -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}`}

View File

@@ -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"}