feat: add pending transaction list on address page

[Keith-CY]

Add a tab of pending transactions on the address page

Notice that transaction list header may be scrollable based on its actual width

Ref: Magickbase/ckb-explorer-public-issues#220

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ckb-explorer-frontend-in-magickbase-repo	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 21, 2023 2:59am

[FrederLu]

Data inconsistency occurs.
4 pieces of data are displayed in the middle of the tab and api, and 2 pieces of data are displayed in the list. After refreshing the page, the data returns to normal.

2023-12-18.17.42.23.mov

[Keith-CY]

Data inconsistency occurs. 4 pieces of data are displayed in the middle of the tab and api, and 2 pieces of data are displayed in the list. After refreshing the page, the data returns to normal.

2023-12-18.17.42.23.mov

It's possible because total count and list are fetched from 2 different queries.

It should be fixed by dfd8f5d which fetches them with the same query.

[FrederLu]

Data inconsistency occurs. 4 pieces of data are displayed in the middle of the tab and api, and 2 pieces of data are displayed in the list. After refreshing the page, the data returns to normal.
2023-12-18.17.42.23.mov

It's possible because total count and list are fetched from 2 different queries.

It should be fixed by dfd8f5d which fetches them with the same query.

2023-12-19.10.03.43.mov

Now it should be replaced with the same API, but there will still be out-of-synchronization of list and tab data, as well as page anomalies.

[Keith-CY]

Data inconsistency occurs. 4 pieces of data are displayed in the middle of the tab and api, and 2 pieces of data are displayed in the list. After refreshing the page, the data returns to normal.
2023-12-18.17.42.23.mov

It's possible because total count and list are fetched from 2 different queries.
It should be fixed by dfd8f5d which fetches them with the same query.

2023-12-19.10.03.43.mov
Now it should be replaced with the same API, but there will still be out-of-synchronization of list and tab data, as well as page anomalies.

This error was caused by mismatched cache, and should be fixed by 3ae33e6

[FrederLu]

A time issue was discovered in the lite version of pending transactions on the address page.

[Keith-CY]

A time issue was discovered in the lite version of pending transactions on the address page.

Got it, it's because a pending transaction doesn't have its block number and timestamp(it's not packaged into a block), the design draft(https://www.figma.com/file/6XNoimRDbFTTNm016rbIdU/Magickbase?type=design&node-id=11495-35230&mode=design&t=wc1k7lf0DYEh7065-0) should be updated accordingly cc @Kirl70

[Keith-CY]

A time issue was discovered in the lite version of pending transactions on the address page.

Got it, it's because a pending transaction doesn't have its block number and timestamp(it's not packaged into a block), the design draft(figma.com/file/6XNoimRDbFTTNm016rbIdU/Magickbase?type=design&node-id=11495-35230&mode=design&t=wc1k7lf0DYEh7065-0) should be updated accordingly cc @Kirl70

But I also found the timestamp is displayed in the all pending transaction list http://localhost:3000/transaction/list?tab=pending
Is it the timestamp when the transaction is discovered by the service? @rabbitz If yes, I think the timestamp of a pending transaction of a specific address can be the same one

[FrederLu]

`CSV Export` needs to be hidden under the `Pending Transactions` tab. It provides data under the `Transactions` tab.

[rabbitz]

A time issue was discovered in the lite version of pending transactions on the address page.

Got it, it's because a pending transaction doesn't have its block number and timestamp(it's not packaged into a block), the design draft(figma.com/file/6XNoimRDbFTTNm016rbIdU/Magickbase?type=design&node-id=11495-35230&mode=design&t=wc1k7lf0DYEh7065-0) should be updated accordingly cc @Kirl70

But I also found the timestamp is displayed in the all pending transaction list http://localhost:3000/transaction/list?tab=pending Is it the timestamp when the transaction is discovered by the service? @rabbitz If yes, I think the timestamp of a pending transaction of a specific address can be the same one

The time here should show created_at, because the same serialized data structure as transactions committed is used, and the created_at field is missing here.

https://github.com/nervosnetwork/ckb-explorer/blob/6e31433319ac413e22482201be42ac6b8bc21fcf/app/jobs/import_transaction_job.rb#L28-L30

[rabbitz]

Use created_at or create_timestamp as the value of pending transaction time

nervosnetwork/ckb-explorer#1537

[Keith-CY]

The lite transaction list is refactored to make block height field optional, please review again @WhiteMinds

[Keith-CY]

Use created_at or create_timestamp as the value of pending transaction time

nervosnetwork/ckb-explorer#1537

What's the difference between create_timestamp and created_at

[Keith-CY]

Export CSV is hidden by commit 8a8747e @FrederLu

[rabbitz]

Optimize translation for create_timestamp and income: nervosnetwork/ckb-explorer#1538

[Sven-TBD]

A related issue post here.
Hi @Keith-CY , could u help check this issue as well?