From 320f18fceee845a20f7a4d15bbfe60c1ec81bc4d Mon Sep 17 00:00:00 2001 From: Jennie Alles Date: Thu, 16 Nov 2023 14:30:06 +0700 Subject: [PATCH 1/5] fix(components): add mobile card for published events --- CHANGELOG.md | 1 + .../history/PublishedEventsMobileCard.tsx | 57 +++++++++++++++++++ .../tables/history/PublishedEventsTable.tsx | 42 ++++++++++++++ .../components/tables/history/index.tsx | 22 +++---- 4 files changed, 107 insertions(+), 15 deletions(-) create mode 100644 src/lib/pages/module-details/components/tables/history/PublishedEventsMobileCard.tsx create mode 100644 src/lib/pages/module-details/components/tables/history/PublishedEventsTable.tsx 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/pages/module-details/components/tables/history/PublishedEventsMobileCard.tsx b/src/lib/pages/module-details/components/tables/history/PublishedEventsMobileCard.tsx new file mode 100644 index 000000000..fd664f67b --- /dev/null +++ b/src/lib/pages/module-details/components/tables/history/PublishedEventsMobileCard.tsx @@ -0,0 +1,57 @@ +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 "./ModuleHistoryRow"; + +interface PublishedEventsMobileCardProps { + history: ModuleHistory; +} + +export const PublishedEventsMobileCard = ({ + history, +}: PublishedEventsMobileCardProps) => { + return ( + + + + + + + + {history.remark && } + + + } + middleContent={ + + + + {history.height === 0 ? ( + + Genesis + + ) : ( + + )} + + + {formatUTC(history.timestamp)} + + {`(${dateFromNow(history.timestamp)})`} + + + + } + /> + ); +}; 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..852e49234 --- /dev/null +++ b/src/lib/pages/module-details/components/tables/history/PublishedEventsTable.tsx @@ -0,0 +1,42 @@ +import { TableContainer } from "@chakra-ui/react"; + +import { useMobile } from "lib/app-provider"; +import { MobileTableContainer } from "lib/components/table"; +import type { ModuleHistory } from "lib/types"; + +import { ModuleHistoryHeader } from "./ModuleHistoryHeader"; +import { ModuleHistoryRow } from "./ModuleHistoryRow"; +import { PublishedEventsMobileCard } from "./PublishedEventsMobileCard"; + +interface PublishedEventsTableProps { + moduleHistories: ModuleHistory[]; + pageSize: number; + templateColumns: string; +} + +export const PublishedEventsTable = ({ + moduleHistories, + templateColumns, + pageSize, +}: PublishedEventsTableProps) => { + const isMobile = useMobile(); + + return isMobile ? ( + + {moduleHistories.slice(0, pageSize).map((history) => ( + + ))} + + ) : ( + + + {moduleHistories.slice(0, pageSize).map((history) => ( + + ))} + + ); +}; 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..54c47aa96 100644 --- a/src/lib/pages/module-details/components/tables/history/index.tsx +++ b/src/lib/pages/module-details/components/tables/history/index.tsx @@ -6,12 +6,11 @@ import { Loading } from "lib/components/Loading"; 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"; @@ -115,20 +114,13 @@ export const ModuleHistoryTable = ({ /> ); - // TODO: Mobile card version - return ( <> - - - {moduleHistories.slice(0, pageSize).map((history) => ( - - ))} - + {onViewMore && Number(historyCount) > 5 && ( )} From 2f8a18c3a606aa2f607d569e29637e70b5fd2e53 Mon Sep 17 00:00:00 2001 From: Jennie Alles Date: Thu, 16 Nov 2023 15:02:33 +0700 Subject: [PATCH 2/5] fix(components): fix minor mobile issue --- src/lib/layout/mobile/NavDrawer.tsx | 2 +- .../components/delegations/DelegationInfo.tsx | 10 +++++++--- .../components/delegations/DelegationsBody.tsx | 8 +++++++- .../components/delegations/total-card/index.tsx | 2 +- src/lib/pages/account-details/index.tsx | 8 +++++--- 5 files changed, 21 insertions(+), 9 deletions(-) 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 = ({ - + - - + Date: Tue, 21 Nov 2023 11:54:57 +0700 Subject: [PATCH 3/5] fix: refactor module tables --- .../{txs/index.tsx => ModuleTxsTable.tsx} | 80 ++++++-------- .../history/PublishedEventsMobileCard.tsx | 57 ---------- .../tables/history/PublishedEventsTable.tsx | 37 ++++--- ...der.tsx => PublishedEventsTableHeader.tsx} | 2 +- .../PublishedEventsTableMobileCard.tsx | 55 ++++++++++ ...oryRow.tsx => PublishedEventsTableRow.tsx} | 6 +- .../components/tables/history/index.tsx | 101 +++++++----------- .../module-details/components/tables/index.ts | 2 +- src/lib/services/move/moduleService.ts | 24 +++-- 9 files changed, 164 insertions(+), 200 deletions(-) rename src/lib/pages/module-details/components/tables/{txs/index.tsx => ModuleTxsTable.tsx} (55%) delete mode 100644 src/lib/pages/module-details/components/tables/history/PublishedEventsMobileCard.tsx rename src/lib/pages/module-details/components/tables/history/{ModuleHistoryHeader.tsx => PublishedEventsTableHeader.tsx} (91%) create mode 100644 src/lib/pages/module-details/components/tables/history/PublishedEventsTableMobileCard.tsx rename src/lib/pages/module-details/components/tables/history/{ModuleHistoryRow.tsx => PublishedEventsTableRow.tsx} (96%) diff --git a/src/lib/pages/module-details/components/tables/txs/index.tsx b/src/lib/pages/module-details/components/tables/ModuleTxsTable.tsx similarity index 55% rename from src/lib/pages/module-details/components/tables/txs/index.tsx rename to src/lib/pages/module-details/components/tables/ModuleTxsTable.tsx index 0b05b0351..30d654f08 100644 --- a/src/lib/pages/module-details/components/tables/txs/index.tsx +++ b/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,39 +64,10 @@ 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 ( - - ); - if (isMobile && isLoading) - return ( - <> - - {txCount && ( - - )} - - ); return ( <> @@ -105,28 +75,40 @@ export const ModuleTxsTable = ({ transactions={moduleTxs} isLoading={isLoading} emptyState={ - + !moduleId || error ? ( + + ) : ( + + ) } showAction={false} showRelations={false} /> - {onViewMore && } - {!onViewMore && txCount !== undefined && Number(txCount) > 10 && ( - - )} + {!!txCount && + (onViewMore ? ( + + ) : ( + txCount > 10 && ( + + ) + ))} ); }; diff --git a/src/lib/pages/module-details/components/tables/history/PublishedEventsMobileCard.tsx b/src/lib/pages/module-details/components/tables/history/PublishedEventsMobileCard.tsx deleted file mode 100644 index fd664f67b..000000000 --- a/src/lib/pages/module-details/components/tables/history/PublishedEventsMobileCard.tsx +++ /dev/null @@ -1,57 +0,0 @@ -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 "./ModuleHistoryRow"; - -interface PublishedEventsMobileCardProps { - history: ModuleHistory; -} - -export const PublishedEventsMobileCard = ({ - history, -}: PublishedEventsMobileCardProps) => { - return ( - - - - - - - - {history.remark && } - - - } - middleContent={ - - - - {history.height === 0 ? ( - - Genesis - - ) : ( - - )} - - - {formatUTC(history.timestamp)} - - {`(${dateFromNow(history.timestamp)})`} - - - - } - /> - ); -}; diff --git a/src/lib/pages/module-details/components/tables/history/PublishedEventsTable.tsx b/src/lib/pages/module-details/components/tables/history/PublishedEventsTable.tsx index 852e49234..677fb9684 100644 --- a/src/lib/pages/module-details/components/tables/history/PublishedEventsTable.tsx +++ b/src/lib/pages/module-details/components/tables/history/PublishedEventsTable.tsx @@ -1,37 +1,46 @@ 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 } from "lib/types"; +import type { ModuleHistory, Option } from "lib/types"; -import { ModuleHistoryHeader } from "./ModuleHistoryHeader"; -import { ModuleHistoryRow } from "./ModuleHistoryRow"; -import { PublishedEventsMobileCard } from "./PublishedEventsMobileCard"; +import { PublishedEventsTableHeader } from "./PublishedEventsTableHeader"; +import { PublishedEventsTableMobileCard } from "./PublishedEventsTableMobileCard"; +import { PublishedEventsTableRow } from "./PublishedEventsTableRow"; interface PublishedEventsTableProps { - moduleHistories: ModuleHistory[]; - pageSize: number; - templateColumns: string; + moduleHistories: Option; + isLoading: boolean; + emptyState: JSX.Element; } export const PublishedEventsTable = ({ moduleHistories, - templateColumns, - pageSize, + 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.slice(0, pageSize).map((history) => ( - + {moduleHistories.map((history) => ( + ))} ) : ( - - {moduleHistories.slice(0, pageSize).map((history) => ( - + {moduleHistories.map((history) => ( + ( + + + + + + + + {history.remark && } + + + } + 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 54c47aa96..698805eae 100644 --- a/src/lib/pages/module-details/components/tables/history/index.tsx +++ b/src/lib/pages/module-details/components/tables/history/index.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"; @@ -12,9 +11,7 @@ import type { Nullable, Option } from "lib/types"; import { PublishedEventsTable } from "./PublishedEventsTable"; -const TEMPLATE_COLUMNS = "40px 180px minmax(300px, 1fr) 140px 260px"; - -interface ModuleTxsTableProps { +interface ModuleHistoryTableProps { moduleId: Option>; historyCount: Option; scrollComponentId?: string; @@ -28,7 +25,7 @@ export const ModuleHistoryTable = ({ onViewMore, scrollComponentId, refetchCount, -}: ModuleTxsTableProps) => { +}: ModuleHistoryTableProps) => { const { currentChainId } = useCelatoneApp(); const { @@ -53,7 +50,7 @@ export const ModuleHistoryTable = ({ error, } = useModuleHistoriesByPagination({ moduleId, - pageSize: pageSize + 1, + pageSize, offset, }); @@ -69,73 +66,49 @@ 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 ( - - ); - return ( <> + ) : ( + + ) + } /> - {onViewMore && Number(historyCount) > 5 && ( - - )} - {!onViewMore && historyCount !== undefined && historyCount > 10 && ( - - )} + {!!historyCount && + (onViewMore ? ( + + ) : ( + 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) ); }; From b2c6568d7cf5b73b06e8fb3c877922e1c87fc967 Mon Sep 17 00:00:00 2001 From: songwongtp <16089160+songwongtp@users.noreply.github.com> Date: Tue, 21 Nov 2023 15:02:08 +0700 Subject: [PATCH 4/5] fix: handle module viewmore --- .../components/tables/ModuleTxsTable.tsx | 30 +++++++++---------- .../components/tables/history/index.tsx | 30 +++++++++---------- 2 files changed, 28 insertions(+), 32 deletions(-) diff --git a/src/lib/pages/module-details/components/tables/ModuleTxsTable.tsx b/src/lib/pages/module-details/components/tables/ModuleTxsTable.tsx index 30d654f08..0a2409ccb 100644 --- a/src/lib/pages/module-details/components/tables/ModuleTxsTable.tsx +++ b/src/lib/pages/module-details/components/tables/ModuleTxsTable.tsx @@ -93,22 +93,20 @@ export const ModuleTxsTable = ({ showRelations={false} /> {!!txCount && - (onViewMore ? ( - - ) : ( - txCount > 10 && ( - - ) - ))} + (onViewMore + ? txCount > 5 && + : txCount > 10 && ( + + ))} ); }; 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 698805eae..1fb6a0b16 100644 --- a/src/lib/pages/module-details/components/tables/history/index.tsx +++ b/src/lib/pages/module-details/components/tables/history/index.tsx @@ -93,22 +93,20 @@ export const ModuleHistoryTable = ({ } /> {!!historyCount && - (onViewMore ? ( - - ) : ( - historyCount > 10 && ( - - ) - ))} + (onViewMore + ? historyCount > 5 && + : historyCount > 10 && ( + + ))} ); }; From 8a26e5d5be7c102ed1960e6b5ff294e22b2f3f17 Mon Sep 17 00:00:00 2001 From: evilpeach Date: Tue, 21 Nov 2023 15:43:39 +0700 Subject: [PATCH 5/5] fix: remove check --- .../tables/history/PublishedEventsTableMobileCard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/pages/module-details/components/tables/history/PublishedEventsTableMobileCard.tsx b/src/lib/pages/module-details/components/tables/history/PublishedEventsTableMobileCard.tsx index f02032dd3..73d3889ce 100644 --- a/src/lib/pages/module-details/components/tables/history/PublishedEventsTableMobileCard.tsx +++ b/src/lib/pages/module-details/components/tables/history/PublishedEventsTableMobileCard.tsx @@ -23,7 +23,7 @@ export const PublishedEventsTableMobileCard = ({ - {history.remark && } + }