-
Notifications
You must be signed in to change notification settings - Fork 28
feat: Feature/grants list popup #2141
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.
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
feat: Feature/grants list popup #2141
Conversation
- 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
packages/wallet/frontend/src/components/dialogs/GrantDetailsDialog.tsx
Outdated
Show resolved
Hide resolved
packages/wallet/frontend/src/components/dialogs/GrantDetailsDialog.tsx
Outdated
Show resolved
Hide resolved
Tymmmy
left a comment
There was a problem hiding this 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
|
@Tymmmy I acknowledged the improvement of eslint & formatting error. |
|
@Tymmmy Hope All done🙌 |
|
@adityagupta0251 Add in the file GrantDetails.tsx in row 8 the change to be text-md and not text-xl please also. |
|
@adityagupta0251 prettier checks still failing |
|
@Tymmmy Okay it will be done very shortly |
|
@Tymmmy thank you so much for giving opportunity😊 |
Tymmmy
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good job
|
Hi @adityagupta0251 |
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