diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3ea493c2f..0f376ceea 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/src/lib/layout/mobile/NavDrawer.tsx b/src/lib/layout/mobile/NavDrawer.tsx
index 9e92c503b..9dbcfaddb 100644
--- a/src/lib/layout/mobile/NavDrawer.tsx
+++ b/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,
},
]
: []),
diff --git a/src/lib/pages/account-details/components/delegations/DelegationInfo.tsx b/src/lib/pages/account-details/components/delegations/DelegationInfo.tsx
index c0591f92d..d8671622a 100644
--- a/src/lib/pages/account-details/components/delegations/DelegationInfo.tsx
+++ b/src/lib/pages/account-details/components/delegations/DelegationInfo.tsx
@@ -43,7 +43,7 @@ export const DelegationInfo = ({
) : (
- <>
+
-
+
{totalBondedCard}
{otherInfoCards}
@@ -94,7 +98,7 @@ export const DelegationInfo = ({
)}
- >
+
)}
>
);
diff --git a/src/lib/pages/account-details/components/delegations/DelegationsBody.tsx b/src/lib/pages/account-details/components/delegations/DelegationsBody.tsx
index fc36dc45b..113b7b6ad 100644
--- a/src/lib/pages/account-details/components/delegations/DelegationsBody.tsx
+++ b/src/lib/pages/account-details/components/delegations/DelegationsBody.tsx
@@ -39,7 +39,13 @@ export const DelegationsBody = ({
}, [router.query.accountAddress]);
return (
-
+
{
trackUseRadio(newValue.toLocaleLowerCase());
diff --git a/src/lib/pages/account-details/components/delegations/total-card/index.tsx b/src/lib/pages/account-details/components/delegations/total-card/index.tsx
index ced0b9631..0bde51656 100644
--- a/src/lib/pages/account-details/components/delegations/total-card/index.tsx
+++ b/src/lib/pages/account-details/components/delegations/total-card/index.tsx
@@ -27,7 +27,7 @@ export const TotalCard = ({
}: TotalCardProps) => {
if (isLoading)
return (
-
+
);
diff --git a/src/lib/pages/account-details/index.tsx b/src/lib/pages/account-details/index.tsx
index 4542e684f..62ea0aa1c 100644
--- a/src/lib/pages/account-details/index.tsx
+++ b/src/lib/pages/account-details/index.tsx
@@ -275,7 +275,7 @@ const AccountDetailsBody = ({
-
+
-
-
+
{
if (!onViewMore) setPageSize(10);
setCurrentPage(1);
}, [currentChainId, onViewMore, setCurrentPage, setPageSize]);
- // TODO - Might consider adding this state in all transaction table
- if (!moduleId || error)
- return (
-
- );
- if (isMobile && isLoading)
- return (
- <>
-
- {txCount && (
-
- )}
- >
- );
return (
<>
@@ -105,28 +75,38 @@ export const ModuleTxsTable = ({
transactions={moduleTxs}
isLoading={isLoading}
emptyState={
-
+ !moduleId || error ? (
+
+ ) : (
+
+ )
}
showAction={false}
showRelations={false}
/>
- {onViewMore && }
- {!onViewMore && txCount !== undefined && Number(txCount) > 10 && (
-
- )}
+ {!!txCount &&
+ (onViewMore
+ ? txCount > 5 &&
+ : txCount > 10 && (
+
+ ))}
>
);
};
diff --git a/src/lib/pages/module-details/components/tables/history/PublishedEventsTable.tsx b/src/lib/pages/module-details/components/tables/history/PublishedEventsTable.tsx
new file mode 100644
index 000000000..677fb9684
--- /dev/null
+++ b/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;
+ isLoading: boolean;
+ emptyState: JSX.Element;
+}
+
+export const PublishedEventsTable = ({
+ moduleHistories,
+ isLoading,
+ emptyState,
+}: PublishedEventsTableProps) => {
+ const isMobile = useMobile();
+
+ if (isLoading) return ;
+ if (!moduleHistories?.length) return emptyState;
+
+ const templateColumns = "40px 180px minmax(300px, 1fr) 140px 260px";
+
+ return isMobile ? (
+
+ {moduleHistories.map((history) => (
+
+ ))}
+
+ ) : (
+
+
+ {moduleHistories.map((history) => (
+
+ ))}
+
+ );
+};
diff --git a/src/lib/pages/module-details/components/tables/history/ModuleHistoryHeader.tsx b/src/lib/pages/module-details/components/tables/history/PublishedEventsTableHeader.tsx
similarity index 91%
rename from src/lib/pages/module-details/components/tables/history/ModuleHistoryHeader.tsx
rename to src/lib/pages/module-details/components/tables/history/PublishedEventsTableHeader.tsx
index 79cd72574..2dfa1ff0e 100644
--- a/src/lib/pages/module-details/components/tables/history/ModuleHistoryHeader.tsx
+++ b/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"];
diff --git a/src/lib/pages/module-details/components/tables/history/PublishedEventsTableMobileCard.tsx b/src/lib/pages/module-details/components/tables/history/PublishedEventsTableMobileCard.tsx
new file mode 100644
index 000000000..73d3889ce
--- /dev/null
+++ b/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) => (
+
+
+
+
+
+
+
+
+
+
+ }
+ middleContent={
+
+
+
+ {history.height === 0 ? (
+
+ Genesis
+
+ ) : (
+
+ )}
+
+
+ {formatUTC(history.timestamp)}
+
+ {`(${dateFromNow(history.timestamp)})`}
+
+
+
+ }
+ />
+);
diff --git a/src/lib/pages/module-details/components/tables/history/ModuleHistoryRow.tsx b/src/lib/pages/module-details/components/tables/history/PublishedEventsTableRow.tsx
similarity index 96%
rename from src/lib/pages/module-details/components/tables/history/ModuleHistoryRow.tsx
rename to src/lib/pages/module-details/components/tables/history/PublishedEventsTableRow.tsx
index b9e26b450..517c3dbbb 100644
--- a/src/lib/pages/module-details/components/tables/history/ModuleHistoryRow.tsx
+++ b/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) => (
diff --git a/src/lib/pages/module-details/components/tables/history/index.tsx b/src/lib/pages/module-details/components/tables/history/index.tsx
index f8a18d253..1fb6a0b16 100644
--- a/src/lib/pages/module-details/components/tables/history/index.tsx
+++ b/src/lib/pages/module-details/components/tables/history/index.tsx
@@ -1,21 +1,17 @@
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";
-import { TableContainer, ViewMore } from "lib/components/table";
+import { ViewMore } from "lib/components/table";
import { useModuleHistoriesByPagination } from "lib/services/move/moduleService";
import type { Nullable, Option } from "lib/types";
-import { ModuleHistoryHeader } from "./ModuleHistoryHeader";
-import { ModuleHistoryRow } from "./ModuleHistoryRow";
+import { PublishedEventsTable } from "./PublishedEventsTable";
-const TEMPLATE_COLUMNS = "40px 180px minmax(300px, 1fr) 140px 260px";
-
-interface ModuleTxsTableProps {
+interface ModuleHistoryTableProps {
moduleId: Option>;
historyCount: Option;
scrollComponentId?: string;
@@ -29,7 +25,7 @@ export const ModuleHistoryTable = ({
onViewMore,
scrollComponentId,
refetchCount,
-}: ModuleTxsTableProps) => {
+}: ModuleHistoryTableProps) => {
const { currentChainId } = useCelatoneApp();
const {
@@ -54,7 +50,7 @@ export const ModuleHistoryTable = ({
error,
} = useModuleHistoriesByPagination({
moduleId,
- pageSize: pageSize + 1,
+ pageSize,
offset,
});
@@ -70,80 +66,47 @@ export const ModuleHistoryTable = ({
setCurrentPage(1);
};
- const isMobile = useMobile();
-
useEffect(() => {
if (!onViewMore) setPageSize(10);
setCurrentPage(1);
}, [currentChainId, onViewMore, setCurrentPage, setPageSize]);
- if (!moduleId || error)
- return (
-
- );
- if (isLoading)
- return isMobile ? (
- <>
-
- {historyCount && (
-
- )}
- >
- ) : (
-
- );
-
- if (!moduleHistories?.length)
- return (
-
- );
-
- // TODO: Mobile card version
-
return (
<>
-
-
- {moduleHistories.slice(0, pageSize).map((history) => (
-
- ))}
-
- {onViewMore && Number(historyCount) > 5 && (
-
- )}
- {!onViewMore && historyCount !== undefined && historyCount > 10 && (
-
- )}
+
+ ) : (
+
+ )
+ }
+ />
+ {!!historyCount &&
+ (onViewMore
+ ? historyCount > 5 &&
+ : historyCount > 10 && (
+
+ ))}
>
);
};
diff --git a/src/lib/pages/module-details/components/tables/index.ts b/src/lib/pages/module-details/components/tables/index.ts
index 8867dd4c9..56b319d64 100644
--- a/src/lib/pages/module-details/components/tables/index.ts
+++ b/src/lib/pages/module-details/components/tables/index.ts
@@ -1,2 +1,2 @@
export * from "./history";
-export * from "./txs";
+export * from "./ModuleTxsTable";
diff --git a/src/lib/services/move/moduleService.ts b/src/lib/services/move/moduleService.ts
index 02ba086e4..aa5195192 100644
--- a/src/lib/services/move/moduleService.ts
+++ b/src/lib/services/move/moduleService.ts
@@ -253,20 +253,22 @@ export const useModuleHistoriesByPagination = ({
return indexerGraphClient
.request(getModuleHistoriesQueryDocument, {
moduleId,
- pageSize,
+ pageSize: pageSize + 1,
offset,
})
.then(({ module_histories }) =>
- module_histories.map((history, idx) => ({
- remark: history.remark,
- upgradePolicy: history.upgrade_policy,
- height: history.block.height,
- timestamp: parseDate(history.block.timestamp),
- previousPolicy:
- idx === module_histories.length - 1
- ? undefined
- : module_histories[idx + 1].upgrade_policy,
- }))
+ module_histories
+ .map((history, idx) => ({
+ remark: history.remark,
+ upgradePolicy: history.upgrade_policy,
+ height: history.block.height,
+ timestamp: parseDate(history.block.timestamp),
+ previousPolicy:
+ idx === module_histories.length - 1
+ ? undefined
+ : module_histories[idx + 1].upgrade_policy,
+ }))
+ .slice(0, pageSize)
);
};