update button

This commit is contained in:
YasinShaikh123
2024-11-04 17:13:39 +05:30
parent 50999e1462
commit 002849afdc
5 changed files with 91 additions and 30 deletions

View File

@@ -90,16 +90,16 @@ export const rubix = createApi({
}),
// getSubnetAll: builder.query({
// query: ({ pageNumber = 1, pageSize = 10 }) => `SubNet/GetAllSubnetworks?pageNumber=${pageNumber}&pageSize=${pageSize}`,
// providesTags: ["getTransAll"],
// }),
getSubnetAll: builder.query({
query: ({ pageNumber = 1, pageSize = 10 }) => `SubNet/GetAllSubnetworks?pageNumber=${pageNumber}&pageSize=${pageSize}?subnetId=${searchTerm || ""}`,
query: ({ pageNumber = 1, pageSize = 10 }) => `SubNet/GetAllSubnetworks?pageNumber=${pageNumber}&pageSize=${pageSize}`,
providesTags: ["getTransAll"],
}),
// getSubnetAll: builder.query({
// query: ({ pageNumber = 1, pageSize = 10 }) => `SubNet/GetAllSubnetworks?pageNumber=${pageNumber}&pageSize=${pageSize}?subnetId=${searchTerm || ""}`,
// providesTags: ["getTransAll"],
// }),
gnerateShortUrl: builder.mutation({
query: (data) => ({

View File

@@ -1,5 +1,6 @@
import {
Box,
Button,
Container,
Divider,
Heading,
@@ -9,7 +10,7 @@ import {
useColorMode,
useToast,
} from "@chakra-ui/react";
import React, { useEffect } from "react";
import React, { useEffect, useState } from "react";
import { MdContentCopy } from "react-icons/md";
import { Link, useNavigate, useParams } from "react-router-dom";
import RelatedTransactions from "../components/RelatedTransactions/RelatedTransactions";
@@ -22,6 +23,9 @@ import FullScreenLoaader from "../components/FullScreenLoaader/FullScreenLoaader
import { OPACITY_ON_LOAD } from "../Layout/animations";
const DidInfo = () => {
const [ isLoadingURL, setIsLoading ] = useState(false)
useEffect(() => {
window.scrollTo({ top: 0, behavior: "smooth" }); // Scroll to top smoothly when params change
}, []);
@@ -42,6 +46,7 @@ const DidInfo = () => {
<ToastBox status={"warn"} message={"Text copied to clipboard"} />
),
});
setIsLoading(false)
})
.catch((err) => {
console.error("Failed to copy text: ", err);
@@ -55,6 +60,31 @@ const DidInfo = () => {
console.log(data?.message);
const handleGenrateShortURL = async () => {
setIsLoading(true)
const fullUrl = window.location.href;
try {
const response = await fetch('https://rexplorerapi.azurewebsites.net/api/ShortUrl/create', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(fullUrl), // Sending searchTerm as a JSON string
});
if (!response.ok) {
throw new Error('Failed to generate short URL');
}
const result = await response.json();
copyToClipboard(result?.shortUrl)
// You can handle the result here, e.g., by updating a state with the short URL
} catch (error) {
console.error("Error generating short URL:", error);
}
};
return (
isLoading?
@@ -73,15 +103,20 @@ const DidInfo = () => {
pb={"8rem"}
>
<Container maxW="6xl" pt={"6rem"}>
<Heading
mb={5}
fontSize={"sm"}
fontWeight={400}
color={colorMode === "light" ? "#000" : "#fff"}
>
DID Info
</Heading>
<Box display={"flex"} justifyContent={"space-between"} alignItems={"center"} mb={8}>
<Heading
fontSize={"sm"}
fontWeight={400}
color={colorMode === "light" ? "#000" : "#fff"}
>
DID Info
</Heading>
<Button fontWeight={400} color={"#fff"} border={"none"} bg={colorMode === "light" ? "#4023A6" : "#312F35"} _hover={{bg: colorMode === "light" ? "#4023A6" : "#312F35"}} _focus={{outline:"none"}}
display={'flex'} gap={2} alignItems={'center'} rounded={'sm'} size={"sm"} isLoading={isLoadingURL} onClick={handleGenrateShortURL}>
<MdContentCopy/> Copy short url
</Button>
</Box>
{data?.data ?
<Box

View File

@@ -319,7 +319,7 @@ boxShadow={
color: colorMode === "light" ? "#000" : "#fff",
}}
>
View all
<Box as="span" _hover={{color: colorMode === "light" ? "#000" : "#fff"}}> View all</Box>
</Link>
</Container>
<LatestTransactions />

View File

@@ -1,4 +1,4 @@
import { Box, Container, Grid, Image,GridItem, Heading, HStack, Icon, Link, Select, Text, useColorMode, useToast, VStack } from "@chakra-ui/react";
import { Box, Container, Grid, Image,GridItem, Heading, HStack, Icon, Link, Select, Text, useColorMode, useToast, VStack, Button } from "@chakra-ui/react";
import React, { useContext, useEffect, useState } from "react";
import GlobalStateContext from "../Contexts/GlobalStateContext";
import Pagination from "../components/Pagination";
@@ -26,6 +26,7 @@ const SubnetInner = () => {
const [totalItems, setTotalItems] = useState(null); // Total items in the dataset
const [lastRefreshedTime, setLastRefreshedTime] = useState(new Date()); // Store the last refresh time
const [relativeRefreshTime, setRelativeRefreshTime] = useState("Just now");
const [ isLoadingURL, setIsLoading ] = useState(false)
const toast = useToast()
useEffect(() => {
@@ -43,6 +44,7 @@ const SubnetInner = () => {
<ToastBox status={"warn"} message={"Text copied to clipboard"} />
),
});
setIsLoading(false)
})
.catch((err) => {
console.error("Failed to copy text: ", err);
@@ -96,6 +98,31 @@ const SubnetInner = () => {
}
};
const handleGenrateShortURL = async () => {
setIsLoading(true)
const fullUrl = window.location.href;
try {
const response = await fetch('https://rexplorerapi.azurewebsites.net/api/ShortUrl/create', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(fullUrl), // Sending searchTerm as a JSON string
});
if (!response.ok) {
throw new Error('Failed to generate short URL');
}
const result = await response.json();
copyToClipboard(result?.shortUrl)
// You can handle the result here, e.g., by updating a state with the short URL
} catch (error) {
console.error("Error generating short URL:", error);
}
};
return (
<Box minH={"100vh"} p={"6rem 0 4rem 0"} backgroundImage={colorMode !== "light" ? `url(${bannerImage})` : "none"} position={"relative"} backgroundSize="contain" backgroundRepeat="no-repeat">
@@ -104,7 +131,7 @@ const SubnetInner = () => {
color="white"
display={{base :"block",md : "flex"}}
justifyContent={"space-between"}
mb={10}
mb={5}
>
<Heading fontSize={"md"} fontWeight={400} color={colorMode === "light" ? "#000" : "#fff"} mb={{base :"10px" ,md : "0px"}}>
Subnet ID - {params?.id}
@@ -121,6 +148,12 @@ const SubnetInner = () => {
</Select>
</Text> */}
</Container>
<Container maxW="6xl" display={"flex"} justifyContent={"end"} mb={6}>
<Button fontWeight={400} color={"#fff"} border={"none"} bg={colorMode === "light" ? "#4023A6" : "#312F35"} _hover={{bg: colorMode === "light" ? "#4023A6" : "#312F35"}} _focus={{outline:"none"}}
display={'flex'} gap={2} alignItems={'center'} rounded={'sm'} size={"sm"} isLoading={isLoadingURL} onClick={handleGenrateShortURL}>
<MdContentCopy/> Copy short url
</Button>
</Container>
<Box>
{data?.data?.items?.length===0 || isLoading?<HStack h={'35vh'} justifyContent={"center"} mt={10}>
<Image w={"40px"} src={Search}/>

View File

@@ -127,16 +127,6 @@ const TransactionDetails = () => {
};
return (
<>
<Box
@@ -158,7 +148,10 @@ const TransactionDetails = () => {
? "Smart Contract Info"
: "Transaction Info"}
</Heading>
<Button display={'flex'} gap={2} alignItems={'center'} rounded={'sm'} size={"sm"} isLoading={isLoadingURL} onClick={handleGenrateShortURL}><MdContentCopy/> Copy short url</Button>
<Button fontWeight={400} color={"#fff"} border={"none"} bg={colorMode === "light" ? "#4023A6" : "#312F35"} _hover={{bg: colorMode === "light" ? "#4023A6" : "#312F35"}} _focus={{outline:"none"}}
display={'flex'} gap={2} alignItems={'center'} rounded={'sm'} size={"sm"} isLoading={isLoadingURL} onClick={handleGenrateShortURL}>
<MdContentCopy/> Copy short url
</Button>
</HStack>
<Box
boxShadow={colorMode === "light" && "md"}