Merge branch 'main' of http://git.wdipl.com/Siddhesh.More/rubix-explore

dev-dist/registerSW.js

@@ -0,0 +1 @@
+if('serviceWorker' in navigator) navigator.serviceWorker.register('/dev-sw.js?dev-sw', { scope: '/', type: 'classic' })

package.json

@@ -23,7 +23,8 @@
     "react-dom": "^18.3.1",
     "react-icons": "^5.3.0",
     "react-redux": "^9.1.2",
-    "react-router-dom": "^6.26.2"
+    "react-router-dom": "^6.26.2",
+    "vite-plugin-pwa": "^0.20.5"
   },
   "devDependencies": {
     "@eslint/js": "^9.9.0",

src/components/LatestTransactions/LatestTransactions.jsx

@@ -45,7 +45,7 @@ const LatestTransactions = () => {
     <Box>
       <Container maxW="6xl">
         <Grid
-          templateColumns={{ basee: "10% 90%", md: "100% 0%" }}
+          templateColumns={{ base: "100% 0%", md: "90% 10%" }}
           gap={0}
           bg={colorMode === "light" ? "#230A79" : "#232127"}
           // bg={"#232127"}
@@ -75,7 +75,7 @@ const LatestTransactions = () => {
                   : "#232127"
               }
               key={transaction.id}
-              templateColumns={{ basee: "10% 90%", md: "100% 0%" }}
+              templateColumns={{ base: "100% 0%", md: "10% 90%" }}
               gap={0}
             >
               <GridItem
@@ -85,11 +85,11 @@ const LatestTransactions = () => {
               >
                 {index + 1}.
               </GridItem>
-              <GridItem overflow={"hidden"} p={4}>
+              <GridItem  p={4}>
                 {/* <Box> */}
-                <Text // This ensures the text is truncated with ellipsis when it overflows
+                <Text // This ensures the text is truncated with ellipsis when it overflows ss__298
                   display={"flex"}
-                  fontSize={"sm"}
+                  fontSize={{base:"xs", md:"sm" }}
                   mb={2}
                   color={colorMode === "light" ? "#230A79" : "#B09AFF"}
                 >
@@ -122,17 +122,22 @@ const LatestTransactions = () => {
                   </Text>
                 </Text>
 
-                <HStack fontSize={"sm"} gap={4} mb={2}>
-                  <Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
+                <HStack fontSize={{base:"xs", md:"sm" }} gap={{base:2,md:4}} mb={2}>
+                  <Text  color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
                     Sender:
                   </Text>
+
+
                   <HStack
                     color={colorMode === "light" ? "#230A79" : "#B09AFF"}
                     textDecoration={"underline"}
+                    w={'84%'}
+                    justifyContent={'space-between'}
+                    fontSize={{base:"xs", md:"sm" }}
                   >
                     <Text
                       cursor={"pointer"} 
-                      maxW={{base:"70%",md:"100%"}} // Set a max-width to control when the truncation happens
+                      maxW={{base:"90%",md:"100%"}} // Set a max-width to control when the truncation happens
                       // overflow={'hidden'} // Ensure overflow is hidden
                       whiteSpace={"nowrap"} // Prevent the text from wrapping
                       textOverflow={"ellipsis"}
@@ -157,18 +162,22 @@ const LatestTransactions = () => {
                       />
                     </Text>
                   </HStack>
+
+
+
                 </HStack>
-                <HStack cursor={"pointer"} fontSize={"sm"} gap={4} mb={3}>
-                  <Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
+                <HStack fontSize={{base:"xs", md:"sm" }} cursor={"pointer"}  gap={{base:2,md:4}} mb={3}>
+                  <Text  color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
                     Receiver:
                   </Text>
                   <HStack
                     color={colorMode === "light" ? "#230A79" : "#B09AFF"}
                     textDecoration={"underline"}
+                    fontSize={{base:"xs", md:"sm" }}
                   >
                     <Text
                       cursor={"pointer"} 
-                      maxW={{base:"65%",md:"100%"}} // Set a max-width to control when the truncation happens
+                      maxW={{base:"55%",md:"100%"}} // Set a max-width to control when the truncation happens
                       // overflow={'hidden'} // Ensure overflow is hidden
                       whiteSpace={"nowrap"} // Prevent the text from wrapping
                       textOverflow={"ellipsis"}
@@ -209,6 +218,7 @@ const LatestTransactions = () => {
                   <Box>
                     <Text
                       mb={2}
+                      // fontSize={{base:"xs", md:"sm" }}
                       color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
                     >
                       Smart contract ID :
@@ -259,8 +269,8 @@ const LatestTransactions = () => {
                     color="#7B7B7B"
                   />
 
-                  <VStack>
-                    <HStack w={"100%"} justifyContent={"flex-start"}>
+                  <VStack fontSize={{base:"xs", md:"sm" }}>
+                    <HStack  w={"100%"} justifyContent={"flex-start"}>
                       <Text
                         color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
                       >

src/pages/Home.jsx

@@ -35,7 +35,7 @@ const Home = () => {
       backgroundSize="contain"
       backgroundRepeat="no-repeat">
       <Box>
-        <VStack pt={{base:20,md:28}} mb={14}>
+        <VStack pt={{base:28,md:28}} mb={{base:8,md: 14}}>
           <Container maxW="3xl" position={"relative"}>
             <Box  w={'100%'} display={"flex"} alignItems={"center"} >
               <InputGroup
@@ -115,7 +115,7 @@ const Home = () => {
           </Container>
         </VStack>
         <AmountCard />
-        <Container maxW="6xl" p={"4rem 1rem"}>
+        <Container maxW="6xl" p={{base:"2rem 1rem",md:"4rem 1rem"}}>
           <Box
             p={5}
             rounded={10}

vite.config.js

@@ -1,7 +1,51 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react-swc'
+import { VitePWA } from 'vite-plugin-pwa'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  server: {
+    host: "0.0.0.0",
+    port: 3000, // You can use any port
+  },
+  plugins: [
+    react(),
+    VitePWA({
+      registerType: "autoUpdate",
+      devOptions: {
+        enabled: true,
+      },
+      manifest: {
+        name: "Rebix",
+        short_name: "RB",
+        description: "Join your community now",
+        start_url: "/",
+        display: "standalone",
+        theme_color: "#222935",
+        background_color: "#222935",
+        icons: [
+          {
+            src: "/icon-192x192.png",
+            sizes: "192x192",
+            type: "image/png",
+          },
+          {
+            src: "/icon-256x256.png",
+            sizes: "256x256",
+            type: "image/png",
+          },
+          {
+            src: "/icon-384x384.png",
+            sizes: "384x384",
+            type: "image/png",
+          },
+          {
+            src: "/icon-512x512.png",
+            sizes: "512x512",
+            type: "image/png",
+          },
+        ],
+      },
+    }),
+  ],
 })