Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Implement transaction history in Ledger Live dApp #38

Closed
3 tasks done
Tracked by #157
kkosiorowska opened this issue Nov 21, 2023 · 1 comment
Closed
3 tasks done
Tracked by #157

Implement transaction history in Ledger Live dApp #38

kkosiorowska opened this issue Nov 21, 2023 · 1 comment
Assignees
@kkosiorowska
Labels
🎨 dApp dApp

Comments

@kkosiorowska
Copy link
Contributor

kkosiorowska commented Nov 21, 2023 •
edited
Loading

Depends on #115

Tasks
Preview Give feedback
@kkosiorowska kkosiorowska self-assigned this Nov 21, 2023
@kkosiorowska kkosiorowska mentioned this issue Nov 21, 2023
Closed
@kkosiorowska kkosiorowska changed the title Init overview page Choose a library and prepare a basic table for transaction history Dec 18, 2023
@kkosiorowska kkosiorowska mentioned this issue Dec 18, 2023
Closed
@nkuba nkuba changed the title Choose a library and prepare a basic table for transaction history Implement transaction history in Ledger Live dApp Jan 2, 2024
@nkuba nkuba assigned kkosiorowska and unassigned kkosiorowska Jan 2, 2024
@nkuba nkuba mentioned this issue Jan 15, 2024
Closed
@kkosiorowska kkosiorowska mentioned this issue Jan 15, 2024
Merged
kkosiorowska added a commit that referenced this issue Jan 18, 2024
@kkosiorowska
Initial implementation of the transaction history table (#145)
094e27c 
Ref #38

## What
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.

### UI
<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">

### 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.
ioay pushed a commit that referenced this issue Jan 18, 2024
@kkosiorowska @ioay
Initial implementation of the transaction history table (#145)
cb5d22d 
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.
This was referenced Jan 22, 2024
Merged
Merged
kkosiorowska added a commit that referenced this issue Jan 30, 2024
@kkosiorowska
Update styles for each column in the transaction history table (#182)
3f38be2 
Ref #38

This PR updates the cells for the history table. The table includes
simple text but also custom content. For this reason, `CustomCell` was
created to render the right content depending on the type of cell. In
addition, several shared components have been created: `CurrencyIcon `,
`StatusInfo` and `ViewInBlockExplorer`. This way we can easily use them
in the future. The date cell uses a function that shows the relative
time from the
[threshold](https://github.com/threshold-network/token-dashboard/blob/main/src/utils/date.ts#L48-L61)
repository. Minor comments:

- Update the `StatusInfo` component once we can display the relevant
time for the `syncing` status.
- Update the styles for `ViewInBlockExplorer` when the ButtonLink
component is fully ready to use.
- The type of `TransactionInfo` may still change, so keep in mind that
this isn't the final version of the data.


## UI

<img width="1335" alt="Screenshot 2024-01-22 at 11 12 23"
src="https://github.com/thesis/acre/assets/23117945/9ba8c170-fe82-4fe6-a3c9-4e975391fcac">
kkosiorowska added a commit that referenced this issue Jan 30, 2024
@kkosiorowska
Add sorting function for transaction history table (#190)
64a145b 
⚠️ Please don't merge. The merge will be available after
#182

Ref #38

This PR adds functions for sorting the results in the transaction table.
To simplify testing, a special function `createTransactionInfo` was
created. It allows us to easily create multiple transactions and
customize them. This PR also improves:

- Text correction for pagination
- Changed the number of transactions on a single page (default 10)

### UI


https://github.com/thesis/acre/assets/23117945/f671cd0f-38e7-4edf-a109-eb449e641fe3
@kkosiorowska
Copy link
Contributor Author

kkosiorowska commented Jan 30, 2024 •
edited
Loading

We can close this task because it was completed with the mocked data. In the next step, we will do the integration with real input data. Done in:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@kkosiorowska kkosiorowska

Labels
🎨 dApp dApp
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Basic table for transaction history thesis/acre
1 participant
@kkosiorowska