Skip to content

Conversation

@adityagupta0251
Copy link
Contributor

This PR implements the change requested in #2019
:

Replaces the “View” link in each Grant row with a fully clickable row.

Clicking a row now opens a Grant Details Dialog, displaying grant information in a modal (similar to the Transaction Details popup).

The “Revoke Grant” flow remains intact and functions correctly within the dialog.

This improves UI consistency and matches the interaction pattern used in the Transaction list.

🎨 UI / UX Changes
Before

Each grant row displayed a “View” link that navigated to /grants/[id].

After

The “View” column is removed.

Each grant row is clickable and opens an inline popup with grant details.

The modal matches the Headless UI / Tailwind styling used for transaction details.

🧱 Implementation Details

Added GrantDetailsDialog.tsx in components/dialogs/

Reuses existing GrantDetails component for content.

Includes revoke confirmation and success/error dialogs.

Styled with the same HeadlessUI Dialog transition as TransactionDetailsDialog.

Updated pages/grants/index.tsx (GrantsPage):

Removed “View” column.

Added onClick handler to each Table.Row.

Added selectedGrant + isDialogOpen state.

Fetches full grant details via grantsService.get(id) before opening dialog.

✅ Testing Done

Click on a grant row opens the correct Grant Details Dialog.

“Revoke Grant” triggers confirmation, success, and error dialogs as expected.

Table pagination and refresh still function.

Visual consistency verified with Transaction list dialogs in light/dark themes.

🔗 Related Issue

Closes #2019
@Tymmmy

- Add abbreviation logic for numbers >= 1 trillion
- Use suffixes: Q (quadrillion), T (trillion), B (billion), M (million), K (thousand)
- Maintain original formatting for normal-sized amounts
- Fixes interledger#2095
@github-actions github-actions bot added package: wallet/frontend Wallet frontend implementations type: source Source changes labels Oct 9, 2025
@Tymmmy Tymmmy self-requested a review October 9, 2025 14:01
@Tymmmy Tymmmy changed the title Feature/grants list popup feat: Feature/grants list popup Oct 10, 2025
Copy link
Contributor

@Tymmmy Tymmmy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add in the file GrantDetails.tsx in row 8 the change to be text-md and not text-xl please also.

There is also some eslint errors in the following files, probably some formatting errors:
[warn] packages/wallet/frontend/src/components/dialogs/TerminateCardDialog.tsx
[warn] packages/wallet/frontend/src/utils/helpers.ts

@adityagupta0251
Copy link
Contributor Author

@Tymmmy I acknowledged the improvement of eslint & formatting error.
Keeps eye on it will being updating 2 days after .
Because now I'm out of station & willing to have some good health.
So therefore please wait for some times & let's Code upcoming days🙌
Thanks for giving me the opportunity 😊

@adityagupta0251
Copy link
Contributor Author

@Tymmmy Hope All done🙌

@Tymmmy
Copy link
Contributor

Tymmmy commented Oct 13, 2025

@adityagupta0251 Add in the file GrantDetails.tsx in row 8 the change to be text-md and not text-xl please also.
Just that change and everything else is fine :D Thank you

@Tymmmy
Copy link
Contributor

Tymmmy commented Oct 13, 2025

@adityagupta0251 prettier checks still failing

@adityagupta0251
Copy link
Contributor Author

@Tymmmy Okay it will be done very shortly

@adityagupta0251
Copy link
Contributor Author

@Tymmmy thank you so much for giving opportunity😊

Copy link
Contributor

@Tymmmy Tymmmy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good job

@Tymmmy Tymmmy merged commit bb3e68e into interledger:main Oct 13, 2025
15 checks passed
@tselit
Copy link

tselit commented Nov 17, 2025

Hi @adityagupta0251
Thanks again, for your hacktoberfest contributions! They were great, and we'd love to see more contributions from you 😄 We'd like to send you a token thanks, for your work. If that's okay, please send an email to community@interledger.org, and we will be in touch.

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

Labels

hacktoberfest-accepted package: wallet/frontend Wallet frontend implementations type: source Source changes

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Grants list details display change

3 participants