fix(components): add mobile card for published events

CHANGELOG.md

@@ -71,6 +71,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#627](https://github.com/alleslabs/celatone-frontend/pull/627) Add responsive for published event in module detail
 - [#625](https://github.com/alleslabs/celatone-frontend/pull/625) Fix abi empty vector serialization
 - [#605](https://github.com/alleslabs/celatone-frontend/pull/605) Apply singleton class style to Amplitude structure
 - [#591](https://github.com/alleslabs/celatone-frontend/pull/591) Bump initia.js due to decimal serialization and dynamic buffer

src/lib/layout/mobile/NavDrawer.tsx

@@ -83,7 +83,7 @@ export const NavDrawer = () => {
               {
                 name: "0x1 Page",
                 slug: "/account/0x1",
-                icon: "home" as IconKeys,
+                icon: "hex" as IconKeys,
               },
             ]
           : []),

src/lib/pages/account-details/components/delegations/DelegationInfo.tsx

@@ -43,7 +43,7 @@ export const DelegationInfo = ({
           <CustomIcon name="chevron-right" color="gray.600" />
         </Flex>
       ) : (
-        <>
+        <Flex direction="column" gap={4}>
           <Heading
             variant="h6"
             as="h6"
@@ -59,7 +59,11 @@ export const DelegationInfo = ({
             justify="space-between"
             overflowX="scroll"
           >
-            <Flex gap={8} direction={{ base: "column", md: "row" }}>
+            <Flex
+              gap={{ base: 4, md: 8 }}
+              direction={{ base: "column", md: "row" }}
+              w="full"
+            >
               {totalBondedCard}
               {otherInfoCards}
             </Flex>
@@ -94,7 +98,7 @@ export const DelegationInfo = ({
               </Flex>
             )}
           </Flex>
-        </>
+        </Flex>
       )}
     </>
   );

src/lib/pages/account-details/components/delegations/DelegationsBody.tsx

@@ -39,7 +39,13 @@ export const DelegationsBody = ({
   }, [router.query.accountAddress]);
 
   return (
-    <Flex direction="column" gap={8} p={8} borderRadius="8px" bg="gray.900">
+    <Flex
+      direction="column"
+      gap={8}
+      p={{ base: 4, md: 8 }}
+      borderRadius="8px"
+      bg="gray.900"
+    >
       <RadioGroup
         onChange={(newValue) => {
           trackUseRadio(newValue.toLocaleLowerCase());

src/lib/pages/account-details/components/delegations/total-card/index.tsx

@@ -27,7 +27,7 @@ export const TotalCard = ({
 }: TotalCardProps) => {
   if (isLoading)
     return (
-      <Box minW="233px">
+      <Box minW={48}>
         <Spinner mt={2} alignSelf="center" size="xl" />
       </Box>
     );

src/lib/pages/account-details/index.tsx

@@ -275,7 +275,7 @@ const AccountDetailsBody = ({
           </CustomTab>
         </TabList>
         <TabPanels>
-          <TabPanel p={0}>
+          <TabPanel p={0} pt={{ base: 4, md: 0 }}>
             <Flex
               direction={{ base: "column", md: "row" }}
               gap={{ base: 4, md: 6 }}
@@ -304,8 +304,10 @@ const AccountDetailsBody = ({
               )}
               <UserAccountDesc address={accountAddress} />
             </Flex>
-
-            <Flex borderBottom="1px solid" borderBottomColor="gray.700">
+            <Flex
+              borderBottom={{ base: "0px", md: "1px solid" }}
+              borderBottomColor="gray.700"
+            >
               <AssetsSection
                 walletAddress={accountAddress}
                 onViewMore={handleTabChange(TabIndex.Assets)}

src/lib/pages/module-details/components/tables/txs/index.tsx → src/lib/pages/module-details/components/tables/ModuleTxsTable.tsx

@@ -1,8 +1,7 @@
 import type { ChangeEvent } from "react";
 import { useEffect } from "react";
 
-import { useCelatoneApp, useMobile } from "lib/app-provider";
-import { Loading } from "lib/components/Loading";
+import { useCelatoneApp } from "lib/app-provider";
 import { Pagination } from "lib/components/pagination";
 import { usePaginator } from "lib/components/pagination/usePaginator";
 import { EmptyState } from "lib/components/state";
@@ -65,68 +64,49 @@ export const ModuleTxsTable = ({
     setCurrentPage(1);
   };
 
-  const isMobile = useMobile();
-
   useEffect(() => {
     if (!onViewMore) setPageSize(10);
     setCurrentPage(1);
   }, [currentChainId, onViewMore, setCurrentPage, setPageSize]);
-  // TODO - Might consider adding this state in all transaction table
-  if (!moduleId || error)
-    return (
-      <EmptyState
-        withBorder
-        imageVariant="not-found"
-        message="There is an error during fetching transactions."
-      />
-    );
-  if (isMobile && isLoading)
-    return (
-      <>
-        <Loading />
-        {txCount && (
-          <Pagination
-            currentPage={currentPage}
-            pagesQuantity={pagesQuantity}
-            offset={offset}
-            totalData={txCount}
-            pageSize={pageSize}
-            onPageChange={onPageChange}
-            onPageSizeChange={onPageSizeChange}
-            scrollComponentId={scrollComponentId}
-          />
-        )}
-      </>
-    );
 
   return (
     <>
       <TransactionsTable
         transactions={moduleTxs}
         isLoading={isLoading}
         emptyState={
-          <EmptyState
-            withBorder
-            imageVariant="empty"
-            message="There are no transactions on this module."
-          />
+          !moduleId || error ? (
+            <EmptyState
+              withBorder
+              imageVariant="not-found"
+              message="There is an error during fetching transactions."
+            />
+          ) : (
+            <EmptyState
+              withBorder
+              imageVariant="empty"
+              message="There are no transactions on this module."
+            />
+          )
         }
         showAction={false}
         showRelations={false}
       />
-      {onViewMore && <ViewMore onClick={onViewMore} />}
-      {!onViewMore && txCount !== undefined && Number(txCount) > 10 && (
-        <Pagination
-          currentPage={currentPage}
-          pagesQuantity={pagesQuantity}
-          offset={offset}
-          totalData={txCount}
-          pageSize={pageSize}
-          onPageChange={onPageChange}
-          onPageSizeChange={onPageSizeChange}
-          scrollComponentId={scrollComponentId}
-        />
-      )}
+      {!!txCount &&
+        (onViewMore
+          ? txCount > 5 && <ViewMore onClick={onViewMore} />
+          : txCount > 10 && (
+              <Pagination
+                currentPage={currentPage}
+                pagesQuantity={pagesQuantity}
+                offset={offset}
+                totalData={txCount}
+                pageSize={pageSize}
+                onPageChange={onPageChange}
+                onPageSizeChange={onPageSizeChange}
+                scrollComponentId={scrollComponentId}
+              />
+            ))}
     </>
   );
 };

src/lib/pages/module-details/components/tables/history/PublishedEventsTable.tsx

@@ -0,0 +1,51 @@
+import { TableContainer } from "@chakra-ui/react";
+
+import { useMobile } from "lib/app-provider";
+import { Loading } from "lib/components/Loading";
+import { MobileTableContainer } from "lib/components/table";
+import type { ModuleHistory, Option } from "lib/types";
+
+import { PublishedEventsTableHeader } from "./PublishedEventsTableHeader";
+import { PublishedEventsTableMobileCard } from "./PublishedEventsTableMobileCard";
+import { PublishedEventsTableRow } from "./PublishedEventsTableRow";
+
+interface PublishedEventsTableProps {
+  moduleHistories: Option<ModuleHistory[]>;
+  isLoading: boolean;
+  emptyState: JSX.Element;
+}
+
+export const PublishedEventsTable = ({
+  moduleHistories,
+  isLoading,
+  emptyState,
+}: PublishedEventsTableProps) => {
+  const isMobile = useMobile();
+
+  if (isLoading) return <Loading withBorder />;
+  if (!moduleHistories?.length) return emptyState;
+
+  const templateColumns = "40px 180px minmax(300px, 1fr) 140px 260px";
+
+  return isMobile ? (
+    <MobileTableContainer>
+      {moduleHistories.map((history) => (
+        <PublishedEventsTableMobileCard
+          key={history.height}
+          history={history}
+        />
+      ))}
+    </MobileTableContainer>
+  ) : (
+    <TableContainer>
+      <PublishedEventsTableHeader templateColumns={templateColumns} />
+      {moduleHistories.map((history) => (
+        <PublishedEventsTableRow
+          key={JSON.stringify(history)}
+          templateColumns={templateColumns}
+          history={history}
+        />
+      ))}
+    </TableContainer>
+  );
+};

src/lib/pages/module-details/components/tables/history/ModuleHistoryHeader.tsx → src/lib/pages/module-details/components/tables/history/PublishedEventsTableHeader.tsx

@@ -3,7 +3,7 @@ import { Grid } from "@chakra-ui/react";
 
 import { TableHeader } from "lib/components/table";
 
-export const ModuleHistoryHeader = ({
+export const PublishedEventsTableHeader = ({
   templateColumns,
 }: {
   templateColumns: GridProps["templateColumns"];

src/lib/pages/module-details/components/tables/history/PublishedEventsTableMobileCard.tsx

@@ -0,0 +1,55 @@
+import { Flex, Text } from "@chakra-ui/react";
+
+import { ExplorerLink } from "lib/components/ExplorerLink";
+import { MobileCardTemplate, MobileLabel } from "lib/components/table";
+import type { ModuleHistory } from "lib/types";
+import { dateFromNow, formatUTC } from "lib/utils";
+
+import { PolicyChanges, RemarkRender } from "./PublishedEventsTableRow";
+
+interface PublishedEventsTableMobileCardProps {
+  history: ModuleHistory;
+}
+
+export const PublishedEventsTableMobileCard = ({
+  history,
+}: PublishedEventsTableMobileCardProps) => (
+  <MobileCardTemplate
+    topContent={
+      <Flex direction="column" gap={3}>
+        <Flex direction="column">
+          <MobileLabel label="Upgrade Policy Changes" />
+          <PolicyChanges history={history} />
+        </Flex>
+        <Flex direction="column">
+          <MobileLabel label="Remark" />
+          <RemarkRender remark={history.remark} />
+        </Flex>
+      </Flex>
+    }
+    middleContent={
+      <Flex direction="column" gap={3}>
+        <Flex direction="column" flex="1">
+          <MobileLabel label="Block Height" />
+          {history.height === 0 ? (
+            <Text variant="body2" color="text.dark">
+              Genesis
+            </Text>
+          ) : (
+            <ExplorerLink
+              value={history.height.toString()}
+              type="block_height"
+              showCopyOnHover
+            />
+          )}
+        </Flex>
+        <Flex direction="column">
+          <Text variant="body3">{formatUTC(history.timestamp)}</Text>
+          <Text variant="body3" color="text.dark">
+            {`(${dateFromNow(history.timestamp)})`}
+          </Text>
+        </Flex>
+      </Flex>
+    }
+  />
+);

src/lib/pages/module-details/components/tables/history/ModuleHistoryRow.tsx → src/lib/pages/module-details/components/tables/history/PublishedEventsTableRow.tsx

@@ -8,7 +8,7 @@ import { TableRow } from "lib/components/table";
 import type { ModuleHistory } from "lib/types";
 import { dateFromNow, formatUTC } from "lib/utils";
 
-interface ModuleHistoriesRowProps {
+interface PublishedEventsTableRowProps {
   templateColumns: GridProps["templateColumns"];
   history: ModuleHistory;
 }
@@ -88,10 +88,10 @@ export const PolicyChanges = ({ history }: { history: ModuleHistory }) => {
   }
 };
 
-export const ModuleHistoryRow = ({
+export const PublishedEventsTableRow = ({
   templateColumns,
   history,
-}: ModuleHistoriesRowProps) => (
+}: PublishedEventsTableRowProps) => (
   <Grid templateColumns={templateColumns}>
     <TableRow />
     <TableRow>