Initial implementation of the transaction history table #145

kkosiorowska · 2024-01-11T15:39:28Z

What

This PR adds a basic table for transaction history. To create the tables used the TanStack package. This library was chosen because:

Ability to add sorting or pagination functions
We can easily add custom cells by this library
Many examples from the React Table docs are portable to use Chakra UI's components by converting <table /> to <Table />, <td /> to <Td />, etc. (Easy integration with chakra UI)

This is the basic implementation of the table. The issue of sorting or custom cell styles will be done in the next steps. The goal is to simplify the review and break down the code into smaller parts.

UI

Some note

Currently, the positioning of the elements for the overview page doesn't look good. Several elements will be added to this view. In the scope of this PR, let's focus on the implantation of A basic table. Let's fix it in the next PR.

- set a correct size - remove the `textTransform` property

kkosiorowska · 2024-01-15T08:51:00Z

dapp/src/components/TransactionHistory/Table/index.tsx

+        <TextSm>
+          {`Page ${
+            table.getState().pagination.pageIndex + 1
+          } of ${table.getPageCount()}`}
+        </TextSm>


Please pay no attention to this text. When this is confirmed with Sorin, I will update this.

Done in #190

kkosiorowska · 2024-01-15T12:48:18Z

dapp/src/theme/Button.ts

@@ -65,6 +65,22 @@ const Button: ComponentSingleStyleConfig = {

      return defaultStyles
    },
+    pagination: {


@r-czajkowski @ioay

It isn't the best name for a variant. So please share your opinion on how to name it better. 🤔

It's ok for me.

ioay · 2024-01-17T12:40:42Z

dapp/src/types/transaction.ts

@@ -0,0 +1,22 @@
+type TransactionInfoAction = "stake" | "unstake" | "receive"
+
+enum TransactionInfoStatus {


Let's use const instead of enum: https://dev.to/ivanzm123/dont-use-enums-in-typescript-they-are-very-dangerous-57bh

Good point! Let's use maybe union at this point to make it as simple as possible. However, when we start working on the subgraph and integrating it into the dapp, think about using const. At this moment, it's difficult to plan how these data should look.
3cc2abb

ioay · 2024-01-17T12:44:00Z

dapp/src/theme/Table.ts

+
+const KEYS = [...parts.keys, "cellContainer", "cell", "divider"] as const
+
+const { defineMultiStyleConfig, definePartsStyle } =


This approach does not meet the conditions of unbound-method eslint rule. On the main branch currently is disabled, but take a look at this commit and add a solution like this: 27cac22

dapp/src/static/icons/ArrowLeft.tsx

dapp/src/static/icons/ArrowRight.tsx

ioay · 2024-01-17T12:55:01Z

dapp/src/components/TransactionHistory/Table/index.tsx

+          </Tbody>
+        </ChakraTable>
+      </TableContainer>
+      <HStack mt={6}>


Let's split this file into 3 standalone files: tableHeader / tableContent(or tableBody) / tablePagination(or tableFooter). This will make it more readable.

ioay · 2024-01-17T13:02:51Z

dapp/src/components/TransactionHistory/Table/pagination.tsx

Let's create utils dir, and move pagination.tsx file into this:
src/components/TransactionHistory/Table/utils/pagination.tsx

because the current naming convention suggests a logic related to pagination functionality in this file

ioay · 2024-01-17T13:05:26Z

dapp/src/hooks/useTransactionHistoryTable.ts

+  pageSize: 2,
+}
+
+export type UseTransactionHistoryTableResult = Table<StakeHistory>


Move this type to src/types/.

ioay · 2024-01-17T13:05:55Z

dapp/src/theme/Button.ts

@@ -65,6 +65,22 @@ const Button: ComponentSingleStyleConfig = {

      return defaultStyles
    },
+    pagination: {


It's ok for me.

ioay

LGTM 🚀 Just one minor comment.
IMPORTANT: Please before merging check if eslint rules are fulfilled (comment temporary overrides block in .eslintrc) and run: pnpm run format

ioay · 2024-01-18T11:47:04Z

dapp/src/components/TransactionHistory/Table/CustomCell.tsx

+import { Box, Divider, useMultiStyleConfig } from "@chakra-ui/react"
+import { TextSm } from "#/components/shared/Typography"
+
+function Cell({


Let's create a stanandaloneTable/Cell.tsx for this function.

Let me fix it in the next PR.

Done in #182

Ref #38 This PR adds a basic table for transaction history. To create the tables used the [TanStack](https://tanstack.com/table/v8) package. This library was chosen because: - Ability to add sorting or pagination functions - We can easily add custom cells by this library - Many examples from the [React Table docs](https://react-table.tanstack.com/docs/examples/basic) are portable to use Chakra UI's components by converting `<table />` to `<Table />`, `<td />` to `<Td />`, etc. (Easy integration with chakra UI) This is the basic implementation of the table. The issue of sorting or custom cell styles will be done in the next steps. The goal is to simplify the review and break down the code into smaller parts. <img width="1389" alt="Screenshot 2024-01-15 at 10 51 14" src="https://github.com/thesis/acre/assets/23117945/5805864a-e4e1-49dd-98a0-357119ed4fd9"> Currently, the positioning of the elements for the overview page doesn't look good. Several elements will be added to this view. In the scope of this PR, let's focus on the implantation of A basic table. Let's fix it in the next PR.

kkosiorowska added 2 commits January 11, 2024 09:44

Install a @tanstack/react-table package

2860796

Initialization of a simple transaction table

dbc760b

kkosiorowska self-assigned this Jan 11, 2024

kkosiorowska added 4 commits January 12, 2024 09:10

Merge branch 'main' of github.com:thesis/acre into transaction-table

338a97f

Fix aliases after merge

94318e9

Fix element style names for table variant

25214ea

Create constants for border styles in table theme

8890b18

kkosiorowska force-pushed the transaction-table branch from 98d383f to 8890b18 Compare January 12, 2024 09:50

kkosiorowska added 7 commits January 12, 2024 14:25

Make sure the table is rendered correctly in the container

42abdf3

Set the correct padding for the tab component

3392030

Use a TableContainer to manage overflow properties

6707154

Fix issues for table header

aa5b5a0

- set a correct size - remove the `textTransform` property

Add a pagination to transaction table

726d77d

Add mock data for transaction table tests

c04379d

Add missing TODO comment

727ce02

kkosiorowska commented Jan 15, 2024

View reviewed changes

kkosiorowska added 2 commits January 15, 2024 10:13

Show account history only when the user is connected

4d22b07

Add missing key for pagination buttons

b60c2f7

kkosiorowska mentioned this pull request Jan 15, 2024

Basic table for transaction history #45

Closed

Add a new button variant for pagination

189594b

kkosiorowska requested review from ioay and r-czajkowski January 15, 2024 12:46

kkosiorowska commented Jan 15, 2024

View reviewed changes

kkosiorowska marked this pull request as ready for review January 15, 2024 12:48

Small fix for element positioning for overview page

c9505c3

kkosiorowska force-pushed the transaction-table branch from 443a43c to c9505c3 Compare January 16, 2024 07:13

ioay reviewed Jan 17, 2024

View reviewed changes

kkosiorowska added 3 commits January 18, 2024 09:08

Fix code to make it compatible with new eslint rules

04810a1

Use a union instead of an enum type

3cc2abb

Update mock data for tests

bf884d1

kkosiorowska added 3 commits January 18, 2024 09:29

Move UseTransactionHistoryTableResult to the type dir

a1f72c8

Split the table component into smaller parts

3c26e8c

Merge branch 'main' of github.com:thesis/acre into transaction-table

c471394

ioay approved these changes Jan 18, 2024

View reviewed changes

kkosiorowska merged commit 094e27c into main Jan 18, 2024
11 checks passed

kkosiorowska deleted the transaction-table branch January 18, 2024 12:02

kkosiorowska mentioned this pull request Jan 30, 2024

Implement transaction history in Ledger Live dApp #38

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Initial implementation of the transaction history table #145

Initial implementation of the transaction history table #145

kkosiorowska commented Jan 11, 2024 •

edited

Loading

kkosiorowska Jan 15, 2024 •

edited

Loading

kkosiorowska Jan 23, 2024

kkosiorowska Jan 15, 2024

ioay Jan 17, 2024

ioay Jan 17, 2024

kkosiorowska Jan 18, 2024

ioay Jan 17, 2024

kkosiorowska Jan 18, 2024

ioay Jan 17, 2024

kkosiorowska Jan 18, 2024

ioay Jan 17, 2024

kkosiorowska Jan 18, 2024

ioay Jan 17, 2024

kkosiorowska Jan 18, 2024

ioay Jan 17, 2024

ioay left a comment •

edited

Loading

ioay Jan 18, 2024

kkosiorowska Jan 18, 2024

kkosiorowska Jan 22, 2024

		@@ -0,0 +1,22 @@
		type TransactionInfoAction = "stake" \| "unstake" \| "receive"

		enum TransactionInfoStatus {


		const KEYS = [...parts.keys, "cellContainer", "cell", "divider"] as const

		const { defineMultiStyleConfig, definePartsStyle } =

Initial implementation of the transaction history table #145

Initial implementation of the transaction history table #145

Conversation

kkosiorowska commented Jan 11, 2024 • edited Loading

What

UI

Some note

kkosiorowska Jan 15, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ioay left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kkosiorowska commented Jan 11, 2024 •

edited

Loading

kkosiorowska Jan 15, 2024 •

edited

Loading

ioay left a comment •

edited

Loading