From 44bf9d156229e5abfc0656d89d18786d8dff0994 Mon Sep 17 00:00:00 2001
From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com>
Date: Wed, 16 Oct 2024 13:28:34 +0530
Subject: [PATCH] =?UTF-8?q?working=20subnet=20mobile=F0=9F=91=B7=E2=80=8D?=
 =?UTF-8?q?=E2=99=82=EF=B8=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dev-dist/sw.js                                |  2 +-
 .../LatestTransactions/LatestTransactions.jsx | 12 +--
 src/pages/DidInfo.jsx                         |  6 +-
 src/pages/SmartContract.jsx                   | 96 +++++++++++--------
 src/pages/SubnetIdOverview.jsx                | 12 +--
 src/pages/Transaction.jsx                     |  2 +-
 src/pages/Transaction/TransactionDetails.jsx  | 44 +++++----
 7 files changed, 95 insertions(+), 79 deletions(-)

diff --git a/dev-dist/sw.js b/dev-dist/sw.js
index c855d9f..86fe1e3 100644
--- a/dev-dist/sw.js
+++ b/dev-dist/sw.js
@@ -82,7 +82,7 @@ define(['./workbox-b5f7729d'], (function (workbox) { 'use strict';
     "revision": "3ca0b8505b4bec776b69afdba2768812"
   }, {
     "url": "index.html",
-    "revision": "0.kb4eps7ip5"
+    "revision": "0.75helcmbjto"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {
diff --git a/src/components/LatestTransactions/LatestTransactions.jsx b/src/components/LatestTransactions/LatestTransactions.jsx
index 74badcc..a24b4a4 100644
--- a/src/components/LatestTransactions/LatestTransactions.jsx
+++ b/src/components/LatestTransactions/LatestTransactions.jsx
@@ -28,8 +28,6 @@ const LatestTransactions = () => {
     navigator.clipboard
       .writeText(text)
       .then(() => {
-        // console.log('Text copied to clipboard');
-        // alert('Text copied to clipboard');
         toast({
           render: () => (
             <ToastBox status={"warn"} message={"Text copied to clipboard"} />
@@ -40,7 +38,6 @@ const LatestTransactions = () => {
         console.error("Failed to copy text: ", err);
       });
   }
-
   return (
     <Box>
       <Container maxW="6xl">
@@ -161,10 +158,7 @@ const LatestTransactions = () => {
                         onClick={() => copyToClipboard(transaction.sender)}
                       />
                     </Text>
-                  </HStack>
-
-
-
+                  </HStack> 
                 </HStack>
                 <HStack fontSize={{base:"xs", md:"sm" }} cursor={"pointer"}  gap={{base:2,md:4}} mb={3}>
                   <Text  color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
@@ -177,12 +171,10 @@ const LatestTransactions = () => {
                   >
                     <Text
                       cursor={"pointer"} 
-                      maxW={{base:"55%",md:"100%"}} // Set a max-width to control when the truncation happens
-                      // overflow={'hidden'} // Ensure overflow is hidden
+                      maxW={{base:"55%",md:"100%"}}
                       whiteSpace={"nowrap"} // Prevent the text from wrapping
                       textOverflow={"ellipsis"}
                       isTruncated
-                      
                       onClick={() =>
                         navigate(`/did-info/${transaction.receiver}`)
                       }
diff --git a/src/pages/DidInfo.jsx b/src/pages/DidInfo.jsx
index ef92bce..c36433b 100644
--- a/src/pages/DidInfo.jsx
+++ b/src/pages/DidInfo.jsx
@@ -74,7 +74,7 @@ const DidInfo = () => {
             <Text color={"#969696"} fontSize={"sm"}>
               DID
             </Text>
-            <HStack fontSize={"sm"}>
+            <HStack fontSize={"sm"} >
               <HStack
                 fontWeight={"inherit"}
                 whiteSpace={"nowrap"} // Prevent the text from wrapping
@@ -83,7 +83,9 @@ const DidInfo = () => {
                 cursor={"pointer"}
                 color={colorMode === "light" ? "#230A79" : "#B09AFF"}
               >
-                <Link style={{ fontWeight: "inherit" }}>{params?.id}</Link>
+                <Text
+                 isTruncated
+                ><Link style={{ fontWeight: "inherit" }}>{params?.id}</Link></Text>
                 <Text as={"span"} ml={5} cursor={"pointer"}>
                   <MdContentCopy
                     onClick={() => copyToClipboard(transaction.sender)}
diff --git a/src/pages/SmartContract.jsx b/src/pages/SmartContract.jsx
index d53346b..40e453c 100644
--- a/src/pages/SmartContract.jsx
+++ b/src/pages/SmartContract.jsx
@@ -53,14 +53,13 @@ import ToastBox from "../components/ToastBox";
                   <Text color={"#969696"} fontSize={"sm"}>Smart Contract Token</Text>
                   <HStack fontSize={"sm"}>
                   <HStack whiteSpace={"nowrap"} // Prevent the text from wrapping
-                    textOverflow={"ellipsis"}
-                    isTruncated
-                    cursor={"pointer"}
-                    color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
-                    <Link  style={{ fontWeight: "inherit" }}>abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz</Link>   
-                    {/* <Text as={"span"} ml={5} cursor={"pointer"}>
-                        <MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
-                    </Text> */}
+                      textOverflow={"ellipsis"}
+                      isTruncated
+                      cursor={"pointer"}
+                      color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
+                    <Text isTruncated>
+                      <Link  style={{ fontWeight: "inherit" }}>abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577</Link>
+                    </Text>
                   </HStack>
                   </HStack>
                   <Divider mt={4} mb={5} />
@@ -70,7 +69,7 @@ import ToastBox from "../components/ToastBox";
                     isTruncated
                     cursor={"pointer"}
                     fontSize={"sm"} pb={3} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
-                      <Link  style={{ fontWeight: "inherit" }}> abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz</Link>
+                      <Text isTruncated><Link  style={{ fontWeight: "inherit" }}> abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz</Link></Text>
                       <Text as={"span"} ml={5} cursor={"pointer"}>
                           <MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
                       </Text>
@@ -83,19 +82,20 @@ import ToastBox from "../components/ToastBox";
                         Block ID:
                     </Text>
                     <HStack
-                        whiteSpace={"nowrap"} // Prevent the text from wrapping
-                        textOverflow={"ellipsis"}
-                        isTruncated
                         cursor={"pointer"}
                         color={colorMode === "light" ? "#230A79" : "#B09AFF"}
                         textDecoration={"underline"}
                     >
+                      <Text  
+                        whiteSpace={"nowrap"} // Prevent the text from wrapping
+                        textOverflow={"ellipsis"}
+                        isTruncated>
                         <Link style={{ fontWeight: "inherit" }}>
                             abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz
-                        </Link>
+                        </Link></Text>
                         <Text as={"span"} ml={5} cursor={"pointer"}>
                         <MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
-                        </Text>
+                      </Text>
                     </HStack>
                   </Box>
                   <Box fontSize={"sm"} gap={4} mb={3}   display={{ base: "block", md: "flex" }}>
@@ -107,14 +107,15 @@ import ToastBox from "../components/ToastBox";
                         alignItems={"center"}
                         color={colorMode === "light" ? "#230A79" : "#B09AFF"}
                         textDecoration={"underline"}
-                        whiteSpace={"nowrap"} // Prevent the text from wrapping
-                        textOverflow={"ellipsis"}
-                        isTruncated
                         cursor={"pointer"}
                     >
+                       <Text
+                        whiteSpace={"nowrap"} // Prevent the text from wrapping
+                        textOverflow={"ellipsis"}
+                        isTruncated>
                         <Link style={{ fontWeight: "inherit" }}>
                             abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz!
-                        </Link>
+                        </Link></Text> 
                         <Text as={"span"} ml={5} cursor={"pointer"}>
                         <MdContentCopy onClick={() => copyToClipboard(transaction.receiver)}/>
                         </Text>
@@ -122,15 +123,14 @@ import ToastBox from "../components/ToastBox";
                   </Box>
                   <Text color={colorMode === "light" ? "#000" : "#fff"} fontSize={"sm"}>Network</Text>
                   <HStack  
-                    whiteSpace={"nowrap"} // Prevent the text from wrapping
-                    textOverflow={"ellipsis"}
-                    isTruncated
                     cursor={"pointer"} 
                     fontSize={"sm"} pb={3} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
-                    <Link   style={{ fontWeight: "inherit" }} onClick={()=> navigate(`/did-info/abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz`)}> abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz</Link>
-                    <Text whiteSpace={"nowrap"} // Prevent the text from wrapping
-                    textOverflow={"ellipsis"}
-                    isTruncated as={"span"} ml={5} cursor={"pointer"} >
+                    <Text 
+                      whiteSpace={"nowrap"} // Prevent the text from wrapping
+                      textOverflow={"ellipsis"}
+                      isTruncated><Link  style={{ fontWeight: "inherit" }} onClick={()=> navigate(`/did-info/abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz`)}> abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz</Link>
+                      </Text>
+                    <Text  as={"span"} ml={5} cursor={"pointer"} >
                         <MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
                     </Text>
                   </HStack>
@@ -138,33 +138,39 @@ import ToastBox from "../components/ToastBox";
               <Box bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"} p={4} mb={5} rounded={6}>
                   <Text color={colorMode === "light" ? "#000" : "#fff"} fontSize={"sm"}>Executor</Text>
                   <HStack 
-                    whiteSpace={"nowrap"} // Prevent the text from wrapping
-                    textOverflow={"ellipsis"}
-                    isTruncated
                      fontSize={"sm"} pb={3} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
-                      <Link  style={{ fontWeight: "inherit" }} onClick={()=> navigate(`/did-info/abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz`)}> abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz !"§ $%& </Link>
+                     <Text 
+                      whiteSpace={"nowrap"} // Prevent the text from wrapping
+                      textOverflow={"ellipsis"}
+                      isTruncated><Link  style={{ fontWeight: "inherit" }} onClick={()=> navigate(`/did-info/abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz`)}> abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz !"§ $%& </Link>
+                      </Text>
                       <Text as={"span"} ml={5} cursor={"pointer"}>
                           <MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
                       </Text>
                   </HStack>
                   <Text color={colorMode === "light" ? "#000" : "#fff"} fontSize={"sm"}>Deployer</Text>
                   <HStack 
-                  whiteSpace={"nowrap"} // Prevent the text from wrapping
-                  textOverflow={"ellipsis"}
-                  isTruncated 
-                  cursor={"pointer"}
+                   cursor={"pointer"}
                    fontSize={"sm"} pb={3} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
+                    <Text 
+                      whiteSpace={"nowrap"} // Prevent the text from wrapping
+                      textOverflow={"ellipsis"}
+                      isTruncated>
                       <Link  style={{ fontWeight: "inherit" }} onClick={()=> navigate(`/did-info/abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz`)}> abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz</Link>
+                    </Text>
                       <Text as={"span"} ml={5} cursor={"pointer"}>
                           <MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
                       </Text>
                   </HStack>
                   <Text color={colorMode === "light" ? "#000" : "#fff"} fontSize={"sm"}>Creator</Text>
-                  <HStack whiteSpace={"nowrap"} // Prevent the text from wrapping
-                    textOverflow={"ellipsis"}
-                    isTruncated 
+                  <HStack
                     cursor={"pointer"} fontSize={"sm"} pb={3} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
-                      <Link  style={{ fontWeight: "inherit" }} onClick={()=> navigate(`/did-info/abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz`)}> abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz !"§ $%& </Link>
+                    <Text 
+                      whiteSpace={"nowrap"} // Prevent the text from wrapping
+                      textOverflow={"ellipsis"}
+                      isTruncated>
+                        <Link  style={{ fontWeight: "inherit" }} onClick={()=> navigate(`/did-info/abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz`)}> abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz !"§ $%& </Link>
+                      </Text> 
                       <Text  as={"span"} ml={5} cursor={"pointer"}>
                           <MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
                       </Text>
@@ -186,7 +192,12 @@ import ToastBox from "../components/ToastBox";
                     textOverflow={"ellipsis"}
                     isTruncated 
                     cursor={"pointer"} fontSize={"sm"} pb={3} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
+                    <Text 
+                      whiteSpace={"nowrap"} // Prevent the text from wrapping
+                      textOverflow={"ellipsis"}
+                      isTruncated> 
                       <Link  style={{ fontWeight: "inherit" }}>bafybmibqle4w7k6acjbznk6ksapiyfwff6vwbwyaqx25wmzagt3awzbeky</Link>
+                    </Text> 
                       <Text as={"span"} ml={5} cursor={"pointer"}>
                           <MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
                       </Text>
@@ -194,11 +205,14 @@ import ToastBox from "../components/ToastBox";
               </Box>
               <Box bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"} p={4} rounded={6}>
                   <Text color={colorMode === "light" ? "#000" : "#fff"} fontSize={"sm"}>Pledge Token</Text>
-                  <HStack whiteSpace={"nowrap"} // Prevent the text from wrapping
-                    textOverflow={"ellipsis"}
-                    isTruncated 
+                  <HStack
                     cursor={"pointer"}  fontSize={"sm"} pb={3} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
-                      <Link  style={{ fontWeight: "inherit" }}>bafybmibqle4w7k6acjbznk6ksapiyfwff6vwbwyaqx25wmzagt3awzbeky</Link>
+                    <Text 
+                      whiteSpace={"nowrap"} // Prevent the text from wrapping
+                      textOverflow={"ellipsis"}
+                      isTruncated>
+                        <Link  style={{ fontWeight: "inherit" }}>bafybmibqle4w7k6acjbznk6ksapiyfwff6vwbwyaqx25wmzagt3awzbeky</Link>
+                    </Text>  
                       <Text  as={"span"} ml={5} cursor={"pointer"}>
                           <MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
                       </Text>
diff --git a/src/pages/SubnetIdOverview.jsx b/src/pages/SubnetIdOverview.jsx
index 7370736..48afa3d 100644
--- a/src/pages/SubnetIdOverview.jsx
+++ b/src/pages/SubnetIdOverview.jsx
@@ -31,7 +31,7 @@ const SubnetInner = () => {
         });
       })
       .catch((err) => {
-        console.error("Failed to copy text: ", err);
+        console.error("Failed to copy text: ", err); 
       });
   }
 
@@ -40,11 +40,11 @@ const SubnetInner = () => {
       <Container
         maxW="6xl"
         color="white"
-        display={"flex"}
+        display={{base :"block",md : "flex"}}
         justifyContent={"space-between"}
         mb={10}
       >
-        <Heading fontSize={"md"} fontWeight={400} color={colorMode === "light" ? "#000" : "#fff"}>
+        <Heading fontSize={"md"} fontWeight={400} color={colorMode === "light" ? "#000" : "#fff"} mb={{base :"10px" ,md : "0px"}}>
         Subnet ID  - {params?.id}
         </Heading>
         <Text to="" style={{ fontSize: "14px" }} color={colorMode === "light" ? "#000" : "#fff"} display={"flex"} gap={"3"}>
@@ -59,7 +59,7 @@ const SubnetInner = () => {
       <Box>
         <Container maxW="6xl">
           <Grid
-            templateColumns="10% 90%"
+            templateColumns={{ base: "100% 0%", md: "90% 10%" }}
             gap={0}
             bg={colorMode === "light" ? "#230A79" : "#232127"}
             // bg={"#232127"}
@@ -89,13 +89,13 @@ const SubnetInner = () => {
                 templateColumns="10% 90%"
                 gap={0}
                 >
-                <GridItem p={4} color={colorMode === "light" ? "#000" : "#fff"}>
+                <GridItem  display={{ base: "none", md: "grid" }} p={4} color={colorMode === "light" ? "#000" : "#fff"}>
                     {index + 1}.
                 </GridItem>
                 <GridItem p={4}>
                     <Box>
                     <Text
-                        fontSize={"sm"}
+                        fontSize={{base:"xs", md:"sm" }}
                         mb={2}
                         color={colorMode === "light" ? "#230A79" : "#B09AFF"}
                     >
diff --git a/src/pages/Transaction.jsx b/src/pages/Transaction.jsx
index e4a0e39..e349986 100644
--- a/src/pages/Transaction.jsx
+++ b/src/pages/Transaction.jsx
@@ -49,7 +49,7 @@ const Transaction = () => {
                 <Text color={"#969696"} fontSize={"sm"}>Transaction ID</Text>
                 <HStack fontSize={"sm"}>
                   <HStack color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
-                    <Link  style={{ fontWeight: "inherit" }}> abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz !"§ $%& </Link>   
+                    <Link  style={{ fontWeight: "inherit" }}> abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz</Link>   
                     <Text as={"span"} ml={5} cursor={"pointer"}>
                         <MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
                     </Text>
diff --git a/src/pages/Transaction/TransactionDetails.jsx b/src/pages/Transaction/TransactionDetails.jsx
index 127b380..887ac57 100644
--- a/src/pages/Transaction/TransactionDetails.jsx
+++ b/src/pages/Transaction/TransactionDetails.jsx
@@ -77,15 +77,22 @@ const TransactionDetails = () => {
             <Text color={"#969696"} fontSize={"sm"}>
               Transaction ID
             </Text>
-            <HStack
-              fontSize={"sm"}
-              whiteSpace={"nowrap"} // Prevent the text from wrapping
-              textOverflow={"ellipsis"}
-              isTruncated
-              cursor={"pointer"}
-            >
-              <HStack color={colorMode === "light" ? "gray.400" : "gray.100"}>
-                <Text> {filteredData?.description} </Text>
+            <HStack fontSize={"sm"}>
+              <HStack                  
+                  whiteSpace={"nowrap"} // Prevent the text from wrapping
+                  textOverflow={"ellipsis"}
+                  isTruncated
+                  cursor={"pointer"} 
+                  color={colorMode === "light" ? "gray.400" : "gray.100"}>
+                <Text
+                 whiteSpace={"nowrap"} // Prevent the text from wrapping
+                 textOverflow={"ellipsis"}
+                 isTruncated
+                 overflow={"hidden"}
+                 cursor={"pointer"}
+                >
+                  {filteredData?.description}
+                </Text>
                 <Text
                   _hover={{ bg: "gray.50" }}
                   transition={"0.5s"}
@@ -159,12 +166,11 @@ const TransactionDetails = () => {
                 alignItems={"center"}
                 color={colorMode === "light" ? "#230A79" : "#B09AFF"}
                 textDecoration={"underline"}
-                whiteSpace={"nowrap"}
-                textOverflow={"ellipsis"}
-                isTruncated
-                cursor={"pointer"}
               >
-                <Text>{filteredData?.receiver}</Text>
+                <Text 
+                  whiteSpace={"nowrap"} // Prevent the text from wrapping
+                  textOverflow={"ellipsis"}
+                  isTruncated>{filteredData?.receiver}</Text>
                 <Text
                   _hover={{ bg: "gray.50" }}
                   transition={"0.5s"}
@@ -199,11 +205,13 @@ const TransactionDetails = () => {
               pb={3}
               color={colorMode === "light" ? "#230A79" : "#B09AFF"}
             >
-              <Text fontWeight={"inherit"} 
+              <Text
+                fontWeight={"inherit"}
                 whiteSpace={"nowrap"} // Prevent the text from wrapping
                 textOverflow={"ellipsis"}
                 isTruncated
-                cursor={"pointer"}>
+                cursor={"pointer"}
+              >
                 {filteredData?.sender}
               </Text>
               <Text
@@ -319,7 +327,7 @@ const TransactionDetails = () => {
               pb={3}
               color={colorMode === "light" ? "#230A79" : "#B09AFF"}
             >
-              <Text 
+              <Text
                 fontWeight={"inherit"}
                 whiteSpace={"nowrap"} // Prevent the text from wrapping
                 textOverflow={"ellipsis"}
@@ -360,7 +368,7 @@ const TransactionDetails = () => {
               pb={3}
               color={colorMode === "light" ? "#230A79" : "#B09AFF"}
             >
-              <Text 
+              <Text
                 fontWeight={"inherit"}
                 whiteSpace={"nowrap"} // Prevent the text from wrapping
                 textOverflow={"ellipsis"}