Add support for filtering latest TX list for method type #1679

csillag · 2025-01-09T03:03:33Z

This PR exposes the method search feature added to Nexus in oasisprotocol/nexus#824.

It adds support for filtering latest TX list for method type.

This now works on all consensus and runtime transaction list, also including transactions for blocks, accounts and validators.

I suggest reviewing the PR commit by commit, because there are multiple semi-independent small changes.

The account transactions page looks like this:

Or this, when there are no results:

Latest transactions page, on mobile:

For consensus:

github-actions · 2025-01-09T03:03:50Z

Deployed to Cloudflare Pages

Latest commit:	`0b41a3c0c6a0fe73af79387b32a1ac5548e6effd`
Status:	✅ Deploy successful!
Preview URL:	https://80102d22.oasis-explorer.pages.dev
Alias:	https://pr-1679.oasis-explorer.pages.dev

csillag · 2025-01-11T01:43:48Z

As discussed with @donouwens, the type filter list for the consensus layer is too long to be convenient. Ideally, it should be replaced with a combo-box with type-ahead search.

However, we plan to support multiple values anyway (later, when nexus will add support for that), so we will replace the widget with a searchable combo-box at that time.

Which means, the current version is as good as it will get, in the current round of implementation.

lubej · 2025-01-14T11:46:30Z

src/app/components/ConsensusTransactionMethod/index.tsx

+  // Please note: when updating this, keep it in sync
+  // with the knownConsensusTxMethods array below!
+
+  switch (method) {


Wouldn't this be better if there was an object map, having O(1) time complexity looking up each of the elements.

Maybe. We have the exact same system for Runtime transactions, here, introduced ages ago. If we want to refactor this, it should be done consistently, on both ends.

However it's not entirely trivial because we need to rely on a t function, which is not available by default in the module namespace, so we can only prepare the object map when the first call happens. Then maybe we can try to cache and reuse it, but I feel that this might be premature optimization and opens the possibility of race conditions at the time of first rendering... not sure it's worth the effort.

What do you think?

lubej · 2025-01-14T11:50:38Z

src/app/components/Select/index.tsx

@@ -96,6 +97,54 @@ const TertiaryButton = forwardRef(
  },
 )

+export const StyledLightSelectButton = styled(StyledSelectButton)(() => ({


Not a fan of this, creating new components, rather I would add some kind of prop to StyledSelectButton, that would change the styling based on that via slotProps.

I did this now, but I am not sure if that made the code simpler or not.

src/app/components/Select/index.tsx

lubej · 2025-01-14T11:55:05Z

src/app/components/Select/index.tsx

+  },
+}))
+
+const LightTertiaryButton = forwardRef(


This duplication seems unnecessary, I would rather see css changes based on props.

I did this now, but I am not sure if that made the code simpler or not.

lubej · 2025-01-14T11:56:11Z

src/app/components/SubPageCard/index.tsx

+  /**
+   * An optional second title which will be displayed under title / subheader / action
+   */
+  title2?: ReactNode


subtitle maybe?

The problem is that currently we have title, subheader (and action), all displayed in the same row.
If we introduced subtitle, it would be very easy to accidentally confuse it with subheader.

That was my thinking, but I don't have a strong opinion. If you think subtitle would be better, I am open to rename it. What do you think?

lubej · 2025-01-14T11:58:57Z

src/app/components/Table/index.tsx

@@ -166,6 +175,7 @@ export const Table: FC<TableProps> = ({
          <TablePagination {...pagination} />
        </Box>
      )}
+      {!isLoading && !rows?.length && emptyMessage && <CardEmptyState label={emptyMessage} />}


This seems like it would render the <table /> and then the empty message bellow it?

The table header, and the empty message, yes. Like this:

I find this more useful than hiding the whole table.

In any case, this was required in the initial version, when the filter widget for the TX type was placed in the table column header for type. In that arrangement, it was absolutely necessary that the table header stays, even if there is no data, so that we can change the filter to get data. But we have changed the design, so now we could live with a disappearing table. Would you prefer that?

lukaw3d

Typescript can make sure these are kept in sync

src/app/components/ConsensusTransactionMethod/index.tsx

Currently, if a <Table> receives zero rows, and it is not loading, it is simply hidden. This is not ideal if there are zero rows because of some filtering configured inside the table headers, which is now no longer accessible, since the whole table has been hidden. So this commit introduces an alternative behavior: if we pass an `emptyMessage` to the table, then it will not be hidden even if there are no rows, but instead, the passed message will be displayed. Please note that the default behavior doesn't change; to trigger this new behavior, the new parameter needs to be added.

Nexus has introduced filtering for tx method in oasisprotocol/nexus#824 Our API wrapper code hasn't yet been updated for this change. This commit selectively updates this single part of the wrapper.

This works on: - the latest transactions page (i.e. /mainnet/sapphire/tx ) - the account transactions page ( /mainnet/sapphire/address/0x683dC5f8cFa3e156b0F695CEa0b8EdeC7322CbF6 )

(As preparation for filtering for them)

- Add missing methods - Use exhaustedTypeWarning for warning on new, unhandled values Co-authored-by: Luka Jeran <[email protected]> Add exhaustedTypeWarning for consensus method label generation

csillag force-pushed the csillag/filter-txs-for-method branch from 051268e to 07e7251 Compare January 9, 2025 03:04

csillag marked this pull request as ready for review January 9, 2025 03:04

csillag requested review from lukaw3d, buberdds and lubej as code owners January 9, 2025 03:04

csillag force-pushed the csillag/filter-txs-for-method branch from 0b7e0ce to 4a589e6 Compare January 10, 2025 05:02

csillag mentioned this pull request Jan 10, 2025

[Feature]: Filtering of transactions #1636

Open

1 task

csillag force-pushed the csillag/filter-txs-for-method branch 8 times, most recently from 6befb60 to e092000 Compare January 11, 2025 01:39

lubej reviewed Jan 14, 2025

View reviewed changes

lukaw3d reviewed Jan 14, 2025

View reviewed changes

src/app/components/ConsensusTransactionMethod/index.tsx Show resolved Hide resolved

src/app/components/ConsensusTransactionMethod/index.tsx Outdated Show resolved Hide resolved

csillag added 2 commits January 15, 2025 01:35

LinkableCardLayout: support passing on action

ea1422f

csillag force-pushed the csillag/filter-txs-for-method branch 2 times, most recently from ca33523 to e6dcb06 Compare January 15, 2025 02:44

csillag added 7 commits January 15, 2025 04:09

Implement a light mode for our Select component

5dccf5d

Add support for second line of title on SubPageCard

d6aea97

Update autogenerated Nexus API wrapper code for method filter

e739db6

Nexus has introduced filtering for tx method in oasisprotocol/nexus#824 Our API wrapper code hasn't yet been updated for this change. This commit selectively updates this single part of the wrapper.

Add support for filtering runtime transactions by type

46d2acc

This works on: - the latest transactions page (i.e. /mainnet/sapphire/tx ) - the account transactions page ( /mainnet/sapphire/address/0x683dC5f8cFa3e156b0F695CEa0b8EdeC7322CbF6 )

Refactor how consensus tx type labels are derived

d92a361

(As preparation for filtering for them)

Handle missing consensus tx method names

3544d0f

- Add missing methods - Use exhaustedTypeWarning for warning on new, unhandled values Co-authored-by: Luka Jeran <[email protected]> Add exhaustedTypeWarning for consensus method label generation

Extend transaction method filtering to consensus and validators

0b41a3c

csillag force-pushed the csillag/filter-txs-for-method branch from e6dcb06 to 0b41a3c Compare January 15, 2025 03:10

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add support for filtering latest TX list for method type #1679

Add support for filtering latest TX list for method type #1679

csillag commented Jan 9, 2025 •

edited

Loading

github-actions bot commented Jan 9, 2025 •

edited

Loading

csillag commented Jan 11, 2025

lubej Jan 14, 2025

csillag Jan 14, 2025

lubej Jan 14, 2025

csillag Jan 15, 2025

lubej Jan 14, 2025

csillag Jan 15, 2025

lubej Jan 14, 2025

csillag Jan 14, 2025

lubej Jan 14, 2025

csillag Jan 14, 2025 •

edited

Loading

lukaw3d left a comment

Add support for filtering latest TX list for method type #1679

Are you sure you want to change the base?

Add support for filtering latest TX list for method type #1679

Conversation

csillag commented Jan 9, 2025 • edited Loading

The account transactions page looks like this:

Latest transactions page, on mobile:

For consensus:

github-actions bot commented Jan 9, 2025 • edited Loading

Deployed to Cloudflare Pages

csillag commented Jan 11, 2025

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

csillag Jan 14, 2025 • edited Loading

Choose a reason for hiding this comment

lukaw3d left a comment

Choose a reason for hiding this comment

csillag commented Jan 9, 2025 •

edited

Loading

github-actions bot commented Jan 9, 2025 •

edited

Loading

csillag Jan 14, 2025 •

edited

Loading