From 9af75bbaf097fef35befa3aee8a8b16de073cc62 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Fri, 19 May 2023 13:15:23 +0700
Subject: [PATCH 1/5] feat: refactor block txs
---
CHANGELOG.md | 1 +
.../components/action-msg/ActionMessages.tsx | 4 +-
.../table/transactions/TransactionsTable.tsx | 10 +-
.../transactions/TransactionsTableHeader.tsx | 6 +-
.../transactions/TransactionsTableRow.tsx | 37 ++++---
src/lib/gql/gql.ts | 6 +-
src/lib/gql/graphql.ts | 24 ++++-
.../components/BlockTxsTable.tsx | 78 ++++++++++++++
.../pages/block-details/components/index.ts | 2 +-
.../components/table/BlockTxTableHeader.tsx | 24 -----
.../components/table/BlockTxTableRow.tsx | 89 ----------------
.../block-details/components/table/index.tsx | 100 ------------------
src/lib/pages/block-details/index.tsx | 8 +-
src/lib/query/tx.ts | 10 +-
src/lib/services/txService.ts | 43 ++++----
src/lib/types/tx/transaction.ts | 11 --
16 files changed, 167 insertions(+), 286 deletions(-)
create mode 100644 src/lib/pages/block-details/components/BlockTxsTable.tsx
delete mode 100644 src/lib/pages/block-details/components/table/BlockTxTableHeader.tsx
delete mode 100644 src/lib/pages/block-details/components/table/BlockTxTableRow.tsx
delete mode 100644 src/lib/pages/block-details/components/table/index.tsx
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2afc77c23..8e622fdd4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -44,6 +44,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Improvements
+- [#347](https://github.com/alleslabs/celatone-frontend/pull/347) Move tx table accordion arrow to the front and refactor block txs table
- [#339](https://github.com/alleslabs/celatone-frontend/pull/339) Update all routes to plural form, and patch all codes
- [#334](https://github.com/alleslabs/celatone-frontend/pull/334) Change `osmo-test-4` to `osmo-test-5`, fix tx service when accountId is undefined
- [#311](https://github.com/alleslabs/celatone-frontend/pull/311) Refine css styling
diff --git a/src/lib/components/action-msg/ActionMessages.tsx b/src/lib/components/action-msg/ActionMessages.tsx
index d723666b4..ba6a0fd57 100644
--- a/src/lib/components/action-msg/ActionMessages.tsx
+++ b/src/lib/components/action-msg/ActionMessages.tsx
@@ -1,4 +1,4 @@
-import type { BlockTransaction, Transaction } from "lib/types";
+import type { Transaction } from "lib/types";
import { ActionMsgType } from "lib/types";
import { extractMsgType } from "lib/utils";
@@ -7,7 +7,7 @@ import { SingleActionMsg } from "./SingleActionMsg";
import { SingleMsg } from "./SingleMsg";
interface RenderActionMessagesProps {
- transaction: Transaction | BlockTransaction;
+ transaction: Transaction;
}
export const RenderActionMessages = ({
diff --git a/src/lib/components/table/transactions/TransactionsTable.tsx b/src/lib/components/table/transactions/TransactionsTable.tsx
index 291487942..3db3e37ec 100644
--- a/src/lib/components/table/transactions/TransactionsTable.tsx
+++ b/src/lib/components/table/transactions/TransactionsTable.tsx
@@ -10,6 +10,7 @@ interface TransactionsTableProps {
isLoading: boolean;
emptyState: JSX.Element;
showRelations: boolean;
+ showTimestamp?: boolean;
showAction?: boolean;
}
@@ -18,20 +19,24 @@ export const TransactionsTable = ({
isLoading,
emptyState,
showRelations,
+ showTimestamp = true,
showAction = false,
}: TransactionsTableProps) => {
if (isLoading) return ;
if (!transactions?.length) return emptyState;
- const templateColumns = `150px 40px minmax(360px, 1fr) ${
+ const templateColumns = `30px 150px 40px minmax(360px, 1fr) ${
showRelations ? "100px " : ""
- }max(150px) max(220px) ${showAction ? "100px " : ""}60px`;
+ }max(160px) ${showTimestamp ? "max(220px) " : ""}${
+ showAction ? "100px " : ""
+ }`;
return (
{transactions.map((transaction) => (
@@ -40,6 +45,7 @@ export const TransactionsTable = ({
transaction={transaction}
templateColumns={templateColumns}
showRelations={showRelations}
+ showTimestamp={showTimestamp}
showAction={showAction}
/>
))}
diff --git a/src/lib/components/table/transactions/TransactionsTableHeader.tsx b/src/lib/components/table/transactions/TransactionsTableHeader.tsx
index 5af4fc399..3204c5eeb 100644
--- a/src/lib/components/table/transactions/TransactionsTableHeader.tsx
+++ b/src/lib/components/table/transactions/TransactionsTableHeader.tsx
@@ -6,20 +6,22 @@ import { TableHeader } from "../tableComponents";
export const TransactionsTableHeader = ({
templateColumns,
showRelations,
+ showTimestamp,
showAction,
}: {
templateColumns: GridProps["templateColumns"];
showRelations: boolean;
+ showTimestamp: boolean;
showAction: boolean;
}) => (
+
Transaction Hash
Messages
{showRelations && Relations}
Sender
- Timestamp
+ {showTimestamp && Timestamp}
{showAction && }
-
);
diff --git a/src/lib/components/table/transactions/TransactionsTableRow.tsx b/src/lib/components/table/transactions/TransactionsTableRow.tsx
index 436829b9a..61d988b3d 100644
--- a/src/lib/components/table/transactions/TransactionsTableRow.tsx
+++ b/src/lib/components/table/transactions/TransactionsTableRow.tsx
@@ -15,6 +15,7 @@ interface TransactionsTableRowProps {
transaction: Transaction;
templateColumns: string;
showRelations: boolean;
+ showTimestamp: boolean;
showAction: boolean;
}
@@ -22,6 +23,7 @@ export const TransactionsTableRow = ({
transaction,
templateColumns,
showRelations,
+ showTimestamp,
showAction,
}: TransactionsTableRowProps) => {
const { isOpen, onToggle } = useDisclosure();
@@ -37,6 +39,14 @@ export const TransactionsTableRow = ({
transition="all .25s ease-in-out"
cursor={isAccordion ? "pointer" : "default"}
>
+
+ {isAccordion && (
+
+ )}
+
-
-
- {formatUTC(transaction.created)}
-
- {`(${dateFromNow(transaction.created)})`}
-
-
-
+ {showTimestamp && (
+
+
+ {formatUTC(transaction.created)}
+
+ {`(${dateFromNow(transaction.created)})`}
+
+
+
+ )}
{showAction && (
)}
-
-
- {isAccordion && (
-
- )}
-
{isAccordion && (
diff --git a/src/lib/gql/gql.ts b/src/lib/gql/gql.ts
index b7c1cbe9a..5dcec9e70 100644
--- a/src/lib/gql/gql.ts
+++ b/src/lib/gql/gql.ts
@@ -71,7 +71,7 @@ const documents = {
types.GetTxsDocument,
"\n query getTxsCount {\n transactions(limit: 1, order_by: { id: desc }) {\n id\n }\n }\n":
types.GetTxsCountDocument,
- "\n query getBlockTransactionsByHeightQuery(\n $limit: Int!\n $offset: Int!\n $height: Int!\n ) {\n transactions(\n limit: $limit\n offset: $offset\n where: { block_height: { _eq: $height } }\n order_by: { id: asc }\n ) {\n hash\n success\n messages\n account {\n address\n }\n is_clear_admin\n is_execute\n is_ibc\n is_instantiate\n is_migrate\n is_send\n is_store_code\n is_update_admin\n }\n }\n":
+ "\n query getBlockTransactionsByHeightQuery(\n $limit: Int!\n $offset: Int!\n $height: Int!\n ) {\n transactions(\n limit: $limit\n offset: $offset\n where: { block_height: { _eq: $height } }\n order_by: { id: asc }\n ) {\n block {\n height\n timestamp\n }\n account {\n address\n }\n hash\n success\n messages\n is_clear_admin\n is_execute\n is_ibc\n is_instantiate\n is_migrate\n is_send\n is_store_code\n is_update_admin\n }\n }\n":
types.GetBlockTransactionsByHeightQueryDocument,
"\n query getBlockTransactionCountByHeightQuery($height: Int!) {\n transactions_aggregate(where: { block_height: { _eq: $height } }) {\n aggregate {\n count\n }\n }\n }\n":
types.GetBlockTransactionCountByHeightQueryDocument,
@@ -180,8 +180,8 @@ export function graphql(
source: "\n query getTxsCount {\n transactions(limit: 1, order_by: { id: desc }) {\n id\n }\n }\n"
): typeof documents["\n query getTxsCount {\n transactions(limit: 1, order_by: { id: desc }) {\n id\n }\n }\n"];
export function graphql(
- source: "\n query getBlockTransactionsByHeightQuery(\n $limit: Int!\n $offset: Int!\n $height: Int!\n ) {\n transactions(\n limit: $limit\n offset: $offset\n where: { block_height: { _eq: $height } }\n order_by: { id: asc }\n ) {\n hash\n success\n messages\n account {\n address\n }\n is_clear_admin\n is_execute\n is_ibc\n is_instantiate\n is_migrate\n is_send\n is_store_code\n is_update_admin\n }\n }\n"
-): typeof documents["\n query getBlockTransactionsByHeightQuery(\n $limit: Int!\n $offset: Int!\n $height: Int!\n ) {\n transactions(\n limit: $limit\n offset: $offset\n where: { block_height: { _eq: $height } }\n order_by: { id: asc }\n ) {\n hash\n success\n messages\n account {\n address\n }\n is_clear_admin\n is_execute\n is_ibc\n is_instantiate\n is_migrate\n is_send\n is_store_code\n is_update_admin\n }\n }\n"];
+ source: "\n query getBlockTransactionsByHeightQuery(\n $limit: Int!\n $offset: Int!\n $height: Int!\n ) {\n transactions(\n limit: $limit\n offset: $offset\n where: { block_height: { _eq: $height } }\n order_by: { id: asc }\n ) {\n block {\n height\n timestamp\n }\n account {\n address\n }\n hash\n success\n messages\n is_clear_admin\n is_execute\n is_ibc\n is_instantiate\n is_migrate\n is_send\n is_store_code\n is_update_admin\n }\n }\n"
+): typeof documents["\n query getBlockTransactionsByHeightQuery(\n $limit: Int!\n $offset: Int!\n $height: Int!\n ) {\n transactions(\n limit: $limit\n offset: $offset\n where: { block_height: { _eq: $height } }\n order_by: { id: asc }\n ) {\n block {\n height\n timestamp\n }\n account {\n address\n }\n hash\n success\n messages\n is_clear_admin\n is_execute\n is_ibc\n is_instantiate\n is_migrate\n is_send\n is_store_code\n is_update_admin\n }\n }\n"];
export function graphql(
source: "\n query getBlockTransactionCountByHeightQuery($height: Int!) {\n transactions_aggregate(where: { block_height: { _eq: $height } }) {\n aggregate {\n count\n }\n }\n }\n"
): typeof documents["\n query getBlockTransactionCountByHeightQuery($height: Int!) {\n transactions_aggregate(where: { block_height: { _eq: $height } }) {\n aggregate {\n count\n }\n }\n }\n"];
diff --git a/src/lib/gql/graphql.ts b/src/lib/gql/graphql.ts
index 971f4e60a..266671678 100644
--- a/src/lib/gql/graphql.ts
+++ b/src/lib/gql/graphql.ts
@@ -12751,6 +12751,7 @@ export type GetBlockTransactionsByHeightQueryQuery = {
is_send: boolean;
is_store_code: boolean;
is_update_admin: boolean;
+ block: { __typename?: "blocks"; height: number; timestamp: any };
account: { __typename?: "accounts"; address: string };
}>;
};
@@ -17197,9 +17198,23 @@ export const GetBlockTransactionsByHeightQueryDocument = {
selectionSet: {
kind: "SelectionSet",
selections: [
- { kind: "Field", name: { kind: "Name", value: "hash" } },
- { kind: "Field", name: { kind: "Name", value: "success" } },
- { kind: "Field", name: { kind: "Name", value: "messages" } },
+ {
+ kind: "Field",
+ name: { kind: "Name", value: "block" },
+ selectionSet: {
+ kind: "SelectionSet",
+ selections: [
+ {
+ kind: "Field",
+ name: { kind: "Name", value: "height" },
+ },
+ {
+ kind: "Field",
+ name: { kind: "Name", value: "timestamp" },
+ },
+ ],
+ },
+ },
{
kind: "Field",
name: { kind: "Name", value: "account" },
@@ -17213,6 +17228,9 @@ export const GetBlockTransactionsByHeightQueryDocument = {
],
},
},
+ { kind: "Field", name: { kind: "Name", value: "hash" } },
+ { kind: "Field", name: { kind: "Name", value: "success" } },
+ { kind: "Field", name: { kind: "Name", value: "messages" } },
{
kind: "Field",
name: { kind: "Name", value: "is_clear_admin" },
diff --git a/src/lib/pages/block-details/components/BlockTxsTable.tsx b/src/lib/pages/block-details/components/BlockTxsTable.tsx
new file mode 100644
index 000000000..e30aa3f86
--- /dev/null
+++ b/src/lib/pages/block-details/components/BlockTxsTable.tsx
@@ -0,0 +1,78 @@
+import type { ChangeEvent } from "react";
+
+import { Pagination } from "lib/components/pagination";
+import { usePaginator } from "lib/components/pagination/usePaginator";
+import { EmptyState } from "lib/components/state";
+import { TransactionsTable } from "lib/components/table";
+import {
+ useTxsByBlockHeightPagination,
+ useTxsCountByBlockHeight,
+} from "lib/services/txService";
+
+const scrollComponentId = "block_tx_table_header";
+
+interface BlockTxsTableProps {
+ height: number;
+}
+
+export const BlockTxsTable = ({ height }: BlockTxsTableProps) => {
+ const { data: blockTxsCount = 0 } = useTxsCountByBlockHeight(height);
+ const {
+ pagesQuantity,
+ currentPage,
+ setCurrentPage,
+ pageSize,
+ setPageSize,
+ offset,
+ } = usePaginator({
+ total: blockTxsCount,
+ initialState: {
+ pageSize: 10,
+ currentPage: 1,
+ isDisabled: false,
+ },
+ });
+
+ const { data: blockTxs, isLoading: isBlockTxsLoading } =
+ useTxsByBlockHeightPagination(height, pageSize, offset);
+
+ const onPageChange = (nextPage: number) => {
+ setCurrentPage(nextPage);
+ };
+
+ const onPageSizeChange = (e: ChangeEvent) => {
+ const size = Number(e.target.value);
+ setPageSize(size);
+ setCurrentPage(1);
+ };
+
+ return (
+ <>
+
+ }
+ showRelations={false}
+ showTimestamp={false}
+ />
+ {blockTxsCount > 10 && (
+
+ )}
+
+ );
+};
diff --git a/src/lib/pages/block-details/components/index.ts b/src/lib/pages/block-details/components/index.ts
index 2ccb60773..0f62f4ffe 100644
--- a/src/lib/pages/block-details/components/index.ts
+++ b/src/lib/pages/block-details/components/index.ts
@@ -1,3 +1,3 @@
export * from "./BlockDetailsTop";
export * from "./BlockInfo";
-export * from "./table";
+export * from "./BlockTxsTable";
diff --git a/src/lib/pages/block-details/components/table/BlockTxTableHeader.tsx b/src/lib/pages/block-details/components/table/BlockTxTableHeader.tsx
deleted file mode 100644
index c7af16d23..000000000
--- a/src/lib/pages/block-details/components/table/BlockTxTableHeader.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import type { GridProps } from "@chakra-ui/react";
-import { Grid } from "@chakra-ui/react";
-
-import { TableHeader } from "lib/components/table";
-
-export const BlockTxTableHeader = ({
- templateColumns,
- scrollComponentId,
-}: {
- templateColumns: GridProps["templateColumns"];
- scrollComponentId: string;
-}) => (
-
- Transaction Hash
-
- Messages
- Sender
-
-
-);
diff --git a/src/lib/pages/block-details/components/table/BlockTxTableRow.tsx b/src/lib/pages/block-details/components/table/BlockTxTableRow.tsx
deleted file mode 100644
index 0dcdb7416..000000000
--- a/src/lib/pages/block-details/components/table/BlockTxTableRow.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import { Flex, Grid, useDisclosure, Tag, Box } from "@chakra-ui/react";
-
-import { useGetAddressType } from "lib/app-provider";
-import { RenderActionMessages } from "lib/components/action-msg/ActionMessages";
-import { ExplorerLink } from "lib/components/ExplorerLink";
-import { CustomIcon } from "lib/components/icon";
-import { AccordionTx, TableRow } from "lib/components/table";
-import type { BlockTransaction } from "lib/types";
-
-interface BlockTxTableRowProps {
- transaction: BlockTransaction;
- templateColumns: string;
-}
-
-export const BlockTxTableRow = ({
- transaction,
- templateColumns,
-}: BlockTxTableRowProps) => {
- const getAddressType = useGetAddressType();
- const { isOpen, onToggle } = useDisclosure();
- const isAccordion = transaction.messages.length > 1;
- return (
-
-
-
-
-
-
- {transaction.success ? (
-
- ) : (
-
- )}
-
-
-
-
- {transaction.isIbc && (
-
- IBC
-
- )}
-
-
-
-
-
-
-
-
- {isAccordion && (
-
- )}
-
-
-
- {isAccordion && (
-
- {transaction.messages.map((msg, index) => (
-
- ))}
-
- )}
-
- );
-};
diff --git a/src/lib/pages/block-details/components/table/index.tsx b/src/lib/pages/block-details/components/table/index.tsx
deleted file mode 100644
index f24676a7e..000000000
--- a/src/lib/pages/block-details/components/table/index.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import { TableContainer } from "@chakra-ui/react";
-import type { ChangeEvent } from "react";
-
-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 { TableTitle } from "lib/components/table";
-import {
- useTxsByBlockHeightPagination,
- useTxsCountByBlockHeight,
-} from "lib/services/txService";
-
-import { BlockTxTableHeader } from "./BlockTxTableHeader";
-import { BlockTxTableRow } from "./BlockTxTableRow";
-
-interface BlockTransactionTableProps {
- height: number;
-}
-
-const TEMPLATE_COLUMNS = "150px 45px minmax(400px,1fr) 150px 60px";
-const scrollComponentId = "block_tx_table_header";
-
-export const BlockTransactionTable = ({
- height,
-}: BlockTransactionTableProps) => {
- const { data: blockTxCount } = useTxsCountByBlockHeight(height);
- const {
- pagesQuantity,
- currentPage,
- setCurrentPage,
- pageSize,
- setPageSize,
- offset,
- } = usePaginator({
- total: blockTxCount,
- initialState: {
- pageSize: 10,
- currentPage: 1,
- isDisabled: false,
- },
- });
-
- const { data: blockTxs, isLoading: blockTxLoading } =
- useTxsByBlockHeightPagination(height, pageSize, offset);
-
- const onPageChange = (nextPage: number) => {
- setCurrentPage(nextPage);
- };
-
- const onPageSizeChange = (e: ChangeEvent) => {
- const size = Number(e.target.value);
- setPageSize(size);
- setCurrentPage(1);
- };
-
- if (blockTxLoading) return ;
- if (!blockTxs || !blockTxCount)
- return (
- <>
-
-
-
- );
-
- return (
- <>
-
-
-
- {blockTxs.map((tx, idx) => (
-
- ))}
-
- {blockTxCount > 10 && (
-
- )}
-
- );
-};
diff --git a/src/lib/pages/block-details/index.tsx b/src/lib/pages/block-details/index.tsx
index b6132185b..5b88037fd 100644
--- a/src/lib/pages/block-details/index.tsx
+++ b/src/lib/pages/block-details/index.tsx
@@ -9,11 +9,7 @@ import { AmpEvent, AmpTrack } from "lib/services/amplitude";
import { useBlockDetailsQuery } from "lib/services/blockService";
import { getFirstQueryParam } from "lib/utils";
-import {
- BlockDetailsTop,
- BlockInfo,
- BlockTransactionTable,
-} from "./components";
+import { BlockDetailsTop, BlockInfo, BlockTxsTable } from "./components";
const BlockDetail = () => {
const router = useRouter();
@@ -35,7 +31,7 @@ const BlockDetail = () => {
<>
-
+
) : (
=> {
+): UseQueryResult => {
const { indexerGraphClient } = useCelatoneApp();
const queryFn = useCallback(
@@ -272,22 +265,26 @@ export const useTxsByBlockHeightPagination = (
height,
})
.then(({ transactions }) =>
- transactions.map((tx) => ({
- hash: parseTxHash(tx.hash),
- messages: snakeToCamel(tx.messages) as Message[],
- sender: tx.account.address as Addr,
- success: tx.success,
+ transactions.map((transaction) => ({
+ hash: parseTxHash(transaction.hash),
+ messages: snakeToCamel(transaction.messages),
+ sender: transaction.account.address as Addr,
+ isSigner: false,
+ height,
+ created: parseDate(transaction.block.timestamp),
+ success: transaction.success,
actionMsgType: getActionMsgType([
- tx.is_execute,
- tx.is_instantiate,
- tx.is_send,
- tx.is_store_code,
- tx.is_migrate,
- tx.is_update_admin,
- tx.is_clear_admin,
+ transaction.is_execute,
+ transaction.is_instantiate,
+ transaction.is_send,
+ transaction.is_store_code,
+ transaction.is_migrate,
+ transaction.is_update_admin,
+ transaction.is_clear_admin,
]),
- isIbc: tx.is_ibc,
- isInstantiate: tx.is_instantiate,
+ furtherAction: MsgFurtherAction.NONE,
+ isIbc: transaction.is_ibc,
+ isInstantiate: transaction.is_instantiate,
}))
),
[height, limit, offset, indexerGraphClient]
diff --git a/src/lib/types/tx/transaction.ts b/src/lib/types/tx/transaction.ts
index 25de2f925..22fc05a6c 100644
--- a/src/lib/types/tx/transaction.ts
+++ b/src/lib/types/tx/transaction.ts
@@ -41,17 +41,6 @@ export interface Transaction {
isInstantiate: boolean;
}
-export type BlockTransaction = Pick<
- Transaction,
- | "hash"
- | "messages"
- | "success"
- | "sender"
- | "actionMsgType"
- | "isIbc"
- | "isInstantiate"
->;
-
export interface TxFilters {
isExecute: boolean;
isInstantiate: boolean;
From 6b8ba3ee5dc181983db05d1526308aaafeb77006 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Fri, 19 May 2023 14:18:33 +0700
Subject: [PATCH 2/5] fix: arrow direction
---
.../components/table/transactions/TransactionsTableRow.tsx | 5 +++--
1 file changed, 3 insertions(+), 2 deletions(-)
diff --git a/src/lib/components/table/transactions/TransactionsTableRow.tsx b/src/lib/components/table/transactions/TransactionsTableRow.tsx
index 61d988b3d..14d34f86c 100644
--- a/src/lib/components/table/transactions/TransactionsTableRow.tsx
+++ b/src/lib/components/table/transactions/TransactionsTableRow.tsx
@@ -42,8 +42,9 @@ export const TransactionsTableRow = ({
{isAccordion && (
)}
From 062bb249521e8b47bd8e7ae638d5ff4337161600 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Fri, 19 May 2023 14:30:02 +0700
Subject: [PATCH 3/5] fix: accordion alignment and message count badge
---
src/lib/components/table/AccordionTx.tsx | 2 +-
.../table/transactions/TransactionsTable.tsx | 2 +-
.../transactions/TransactionsTableRow.tsx | 29 ++++++++++++++-----
src/lib/styles/theme/components/badge.ts | 4 +++
4 files changed, 28 insertions(+), 9 deletions(-)
diff --git a/src/lib/components/table/AccordionTx.tsx b/src/lib/components/table/AccordionTx.tsx
index e7ff5ffe5..034cae0da 100644
--- a/src/lib/components/table/AccordionTx.tsx
+++ b/src/lib/components/table/AccordionTx.tsx
@@ -38,7 +38,7 @@ export const AccordionTx = ({
message,
allowFurtherAction,
isSigner = false,
- accordionSpacing = "206px",
+ accordionSpacing = "260px",
}: AccordionTxProps) => {
const [showButton, setShowButton] = useState(false);
return (
diff --git a/src/lib/components/table/transactions/TransactionsTable.tsx b/src/lib/components/table/transactions/TransactionsTable.tsx
index 3db3e37ec..a9a2d030f 100644
--- a/src/lib/components/table/transactions/TransactionsTable.tsx
+++ b/src/lib/components/table/transactions/TransactionsTable.tsx
@@ -25,7 +25,7 @@ export const TransactionsTable = ({
if (isLoading) return ;
if (!transactions?.length) return emptyState;
- const templateColumns = `30px 150px 40px minmax(360px, 1fr) ${
+ const templateColumns = `25px 180px 40px minmax(360px, 1fr) ${
showRelations ? "100px " : ""
}max(160px) ${showTimestamp ? "max(220px) " : ""}${
showAction ? "100px " : ""
diff --git a/src/lib/components/table/transactions/TransactionsTableRow.tsx b/src/lib/components/table/transactions/TransactionsTableRow.tsx
index 14d34f86c..789b3ed6a 100644
--- a/src/lib/components/table/transactions/TransactionsTableRow.tsx
+++ b/src/lib/components/table/transactions/TransactionsTableRow.tsx
@@ -1,4 +1,12 @@
-import { Flex, Text, Grid, useDisclosure, Tag, Box } from "@chakra-ui/react";
+import {
+ Flex,
+ Text,
+ Grid,
+ useDisclosure,
+ Tag,
+ Box,
+ Badge,
+} from "@chakra-ui/react";
import { AccordionTx } from "../AccordionTx";
import { TableRow } from "../tableComponents";
@@ -39,7 +47,7 @@ export const TransactionsTableRow = ({
transition="all .25s ease-in-out"
cursor={isAccordion ? "pointer" : "default"}
>
-
+
{isAccordion && (
-
+ <>
+
+ {transaction.messages.length > 1 && (
+
+ {transaction.messages.length}
+
+ )}
+
{transaction.success ? (
diff --git a/src/lib/styles/theme/components/badge.ts b/src/lib/styles/theme/components/badge.ts
index 6e4626133..39cc8433e 100644
--- a/src/lib/styles/theme/components/badge.ts
+++ b/src/lib/styles/theme/components/badge.ts
@@ -17,6 +17,10 @@ export const Badge: ComponentStyleConfig = {
background: "pebble.700",
color: "text.main",
},
+ lilac: {
+ background: "lilac.main",
+ color: "background.main",
+ },
},
defaultProps: {
variant: "gray",
From 5e0256f3b227528c99859be578aa0a11c55c78f7 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Fri, 19 May 2023 18:16:03 +0700
Subject: [PATCH 4/5] fix: changelog
---
CHANGELOG.md | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9a3bb07b8..f862a2dce 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -41,6 +41,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Improvements
+- [#347](https://github.com/alleslabs/celatone-frontend/pull/347) Move tx table accordion arrow to the front and refactor block txs table
+
### Bug fixes
## v1.0.5
@@ -53,7 +55,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Improvements
-- [#347](https://github.com/alleslabs/celatone-frontend/pull/347) Move tx table accordion arrow to the front and refactor block txs table
- [#339](https://github.com/alleslabs/celatone-frontend/pull/339) Update all routes to plural form, and patch all codes
- [#334](https://github.com/alleslabs/celatone-frontend/pull/334) Change `osmo-test-4` to `osmo-test-5`, fix tx service when accountId is undefined
- [#311](https://github.com/alleslabs/celatone-frontend/pull/311) Refine css styling
From edffa0b0735d9ef951d1d0f04f0cc037f2d6d470 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Mon, 22 May 2023 01:35:40 +0700
Subject: [PATCH 5/5] fix: comment
---
src/lib/services/txService.ts | 14 +++++++-------
1 file changed, 7 insertions(+), 7 deletions(-)
diff --git a/src/lib/services/txService.ts b/src/lib/services/txService.ts
index 1e5fe269f..65fb7d983 100644
--- a/src/lib/services/txService.ts
+++ b/src/lib/services/txService.ts
@@ -86,7 +86,7 @@ export const useTxsByAddressPagination = (
offset,
pageSize,
})
- .then(({ account_transactions }) =>
+ .then(({ account_transactions }) =>
account_transactions.map((transaction) => ({
hash: parseTxHash(transaction.transaction.hash),
messages: snakeToCamel(transaction.transaction.messages) as Message[],
@@ -204,10 +204,10 @@ export const useTxs = (
offset,
pageSize,
})
- .then(({ transactions }) =>
- transactions.map((transaction) => ({
+ .then(({ transactions }) =>
+ transactions.map((transaction) => ({
hash: parseTxHash(transaction.hash),
- messages: snakeToCamel(transaction.messages),
+ messages: snakeToCamel(transaction.messages) as Message[],
sender: transaction.account.address as Addr,
isSigner: false,
height: transaction.block.height,
@@ -264,10 +264,10 @@ export const useTxsByBlockHeightPagination = (
offset,
height,
})
- .then(({ transactions }) =>
- transactions.map((transaction) => ({
+ .then(({ transactions }) =>
+ transactions.map((transaction) => ({
hash: parseTxHash(transaction.hash),
- messages: snakeToCamel(transaction.messages),
+ messages: snakeToCamel(transaction.messages) as Message[],
sender: transaction.account.address as Addr,
isSigner: false,
height,