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

Notifications and feedback on transactions #466

Merged
merged 5 commits into from
Oct 26, 2023
Merged

Notifications and feedback on transactions #466

merged 5 commits into from
Oct 26, 2023

Conversation

Viterbo
Copy link
Collaborator

@Viterbo Viterbo commented Oct 25, 2023 •
edited
Loading

Fixes #106

Description

This PR includes a packed solution to simplify the task of notifying the user whenever a transaction is signed and sent, succeeded or not, with a simple call to a generic signCustomTransaction function.

Test scenarios

  • go to this link
  • login
  • go to Liquid Staking
    • stake, unstake and withdraw
    • in all cases, it should:
      • put the button in the loading state (and stop when done)
      • after confirming in the wallet, a neutral notification should say what is happening (auto dismissed)
      • if it succeeds, a green success notification is shown with a "see transaction" button redirecting to the transaction page
      • if any error occurs, a red error notification is shown with a "see details" button which opens a popup with the error JSON
  • go to a custom contract like stlos contract
    • pick a function you know you can call (like approve)
    • fill in the form and press the write button
      • put the button in the loading state (and stop when done)
      • after confirming in the wallet, a neutral notification should say 'calling foo with N params'' (auto dismissed)
      • if it succeeds, a green success notification is shown with a "see transaction" button redirecting to the transaction page
      • if any error occurs, a red error notification is shown with a "see details" button which opens a popup with the error JSON

Screen captures

Notifications-on-Teloscan.webm

Checklist:

  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • I have cleaned up the code in the areas my change touches
  • My changes generate no new warnings
  • Any dependent changes have been merged and published in downstream modules
  • I have checked my code and corrected any misspellings
  • I have removed any unnecessary console messages
  • I have included all english text to the translation file and/or created a new issue with the required translations for the currently supported languages
  • I have tested for mobile functionality and responsiveness
  • I have added appropriate test coverage

@Viterbo Viterbo self-assigned this Oct 25, 2023
@Viterbo Viterbo linked an issue Oct 25, 2023 that may be closed by this pull request
Global transaction watcher (toast, notifications) #106
Closed
@netlify
Copy link

netlify bot commented Oct 25, 2023 •
edited
Loading

✅ Deploy Preview for dev-mainnet-teloscan ready!

Name Link
🔨 Latest commit 96eeb11
🔍 Latest deploy log https://app.netlify.com/sites/dev-mainnet-teloscan/deploys/653a793cfb6f5c00083d4d04
😎 Deploy Preview https://deploy-preview-466--dev-mainnet-teloscan.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@netlify
Copy link

netlify bot commented Oct 25, 2023 •
edited
Loading

✅ Deploy Preview for teloscan-stage ready!

Name Link
🔨 Latest commit 96eeb11
🔍 Latest deploy log https://app.netlify.com/sites/teloscan-stage/deploys/653a793cd4ee7000089541bc
😎 Deploy Preview https://deploy-preview-466--teloscan-stage.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@Viterbo Viterbo changed the title 106 global transaction watcher toast notifications Notifications and feedback on transactions Oct 25, 2023
ezra-sg
ezra-sg previously approved these changes Oct 25, 2023
View reviewed changes
Copy link
Contributor

@ezra-sg ezra-sg left a comment

Choose a reason for hiding this comment

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

awesome job, works great 💯

donnyquixotic
donnyquixotic suggested changes Oct 25, 2023
View reviewed changes
src/antelope/mocks/AntelopeConfig.ts Outdated
// localizationHandler: (message: string, params?: Record<string, string>) => message,
// notifyFailureWithActionHandler: (message: string, action: () => void) => void 0,
// notifyFailureWithAction: (message: string, params?: { label: string; handler: () => void; }) => void 0,
// };
Copy link
Contributor

Choose a reason for hiding this comment

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

remove commented code

src/antelope/mocks/AntelopeConfig.ts Outdated
};
export class AntelopeConfig {
// @TODO rename this method, it's used for token and NFT transfers as well
wrapError(description: string, error: unknown): AntelopeError {
Copy link
Contributor

Choose a reason for hiding this comment

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

rename to transactionError (I updated this in telos-wallet as part of the nft transfer PR)

src/antelope/mocks/AccountStore.ts Outdated

return tx;
} catch (error) {
const trxError = ant.config.wrapError(actionError, error);
Copy link
Contributor

Choose a reason for hiding this comment

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

rename wrapError to transactionError see feedback in AntelopeConfig.ts

@donnyquixotic
Copy link
Contributor

@Viterbo is there a reason why all the new store files are added under the 'mocks' dir instead of 'store'?

@Viterbo
Copy link
Collaborator Author

Viterbo commented Oct 25, 2023 •
edited
Loading

@Viterbo is there a reason why all the new store files are added under the 'mocks' dir instead of 'store'?

Yes. It's because they are mocks 😆
No, joking aside, those classes are not the actual Stores. They are simplified and adapted versions of the same Store API we have in the real Antelope code (back in the telos-wallet repo).

Why did I do that? Well, because otherwise, I would need to migrate the entire library, and that would be a great effort too early in the process. The task does need to be completed, but not right now—rather, it should be done after the library is finished.

donnyquixotic
donnyquixotic previously approved these changes Oct 25, 2023
View reviewed changes
@donnyquixotic donnyquixotic merged commit 3247179 into dev Oct 26, 2023
9 checks passed
@donnyquixotic donnyquixotic deleted the 106-global-transaction-watcher-toast-notifications branch October 26, 2023 20:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@donnyquixotic donnyquixotic donnyquixotic approved these changes

@ezra-sg ezra-sg ezra-sg left review comments

@pmjanus pmjanus Awaiting requested review from pmjanus

Assignees

@Viterbo Viterbo

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Global transaction watcher (toast, notifications)
3 participants
@Viterbo @donnyquixotic @ezra-sg