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) ); };