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

feat: intial styling of steps #4745

Merged
merged 17 commits into from
Aug 8, 2024
Merged

feat: intial styling of steps #4745

merged 17 commits into from
Aug 8, 2024

Conversation

fairlighteth
Copy link
Contributor

@fairlighteth fairlighteth commented Jul 29, 2024 •
edited
Loading

Summary

Screenshot 2024-08-06 at 11 10 48

Re-styling of the progress bar step.

What works

  • All individual styles have styling
  • Surplus % and absolute amounts display
  • Cancel order

What needs work

  • The step animation needs some fine-tuning and styling.
  • Surplus logic to show an alternative 'Finished' screen when there's no surplus or very low surplus.
  • Right now it doesn't seem to progress on each state. Simply start with placing order and ends with finished.
  • Need to get the actual solvers + count in the finished step.
  • 'Share this win' logic to share a Tweet
  • On the 'executing' step show the actual number of solvers
    Screenshot 2024-08-06 at 14 01 44
  • Remove the existing surplus modal
Screenshot 2024-08-06 at 14 02 03
  • In the 'nextBatch' state, show the actual solver that won the auction
Screenshot 2024-08-06 at 14 02 36 - In the 'unfillable' state we need to make sure the 'Cancel order' is shown in the right top corner. Also the 'cancel the order' text in the step description needs to have the actual onClick behavior to cancel the order. - In general on certain steps the top illustration/image needs to be reviewed and replaced with a more proper illustration.

@vercel Vercel
Copy link

vercel bot commented Jul 29, 2024 •
edited
Loading

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

Name Status Preview Updated (UTC)
cosmos 🔄 Building (Inspect) Visit Preview Aug 8, 2024 10:24am
cowfi 🔄 Building (Inspect) Visit Preview Aug 8, 2024 10:24am
explorer-dev 🔄 Building (Inspect) Visit Preview Aug 8, 2024 10:24am
swap-dev 🔄 Building (Inspect) Visit Preview Aug 8, 2024 10:24am
widget-configurator 🔄 Building (Inspect) Visit Preview Aug 8, 2024 10:24am

@alfetopito alfetopito mentioned this pull request Aug 5, 2024
Merged
6 tasks
@fairlighteth fairlighteth marked this pull request as ready for review August 6, 2024 13:06
@fairlighteth fairlighteth requested a review from a team August 6, 2024 13:06
@socket-security Socket Security
Copy link

socket-security bot commented Aug 6, 2024 •
edited
Loading

Report too large to display inline

View full report↗︎

@elena-zh
Copy link

elena-zh commented Aug 6, 2024 •
edited
Loading

Hey @fairlighteth , great job!

Some more ToDo points/issues I'd like to add:

  1. It would be nice to remove 'pending order' tooltip that appears when close the progress bar modal! addressed in feat(pending-notification): remove pending notification #4771
    image

  2. Improve fonts/images in the dark mode:
    image
    image
    image

  3. Is this expected that the bar is huge in the Account modal?
    image

  4. It would be nice to add a receiver (as we discussed) when it differs from a sender's address
    image
    image

  5. (not sure) WDYT about removing ETH-flow stepper when an order is filled?
    image

  6. ETH-flow order logs overlap each other in the Account modal
    image

  7. Failed cancellation state: progress bar is not hidden in the Account modal
    image

  8. ETH-flow: order placement failed: the modal shows 'Placing order' state Should be fixed in fix(progress-bar-v2): disable progress bar when creating or presign pending #4767

  9. Case with 'longer than needed" does not correspond to the one in the mock-up
    image

  10. When an order is OOM, and it expires, the progress bar still shows 'OOM' state fixed in fix(progress-bar-v2): deprioritize out of market stats #4766
    image

  11. Safe: signing state of the progress bar shows an empty modal
    image

  12. improve a bit mobile views
    image

  13. Surplus does not correspond to a surplus currency on Explorer/account modal (Gnosis chain)
    image
    image

  14. Different rounding on progress bar details and on a pop-up/account modal
    image

  15. Buy order: amounts are mixed up
    image

  16. 'Place a new order' link color seems to be incorrect
    image

Thanks!

alfetopito
alfetopito reviewed Aug 6, 2024
View reviewed changes
apps/cowswap-frontend/src/common/hooks/useGetSurplusFiatValue.ts
Comment on lines -35 to +37
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [JSON.stringify(order)])
}, [order])
Copy link
Collaborator

Choose a reason for hiding this comment

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

Was this not working?

@alfetopito
feat(progress-bar-v2): wire up cancellation (#4772)
5b6c0f0 
* chore: add TODOs

* feat: accept children props on CancelButton component

* feat: wire up cancellation

* chore: lint fix
@socket-security Socket Security
Copy link

🚨 Potential security issues detected. Learn more about Socket for GitHub ↗︎

To accept the risk, merge this PR and you will not be notified again.

Alert Package NoteSourceCI
Protestware/Troll package npm/es5-ext@0.10.62
  • Note: This package prints a protestware console message on install regarding Ukraine for users with Russian language locale
 🚫
Install scripts npm/es5-ext@0.10.62
  • Install script: postinstall
  • Source: node -e "try{require('./_postinstall')}catch(e){}" || exit 0
 🚫
Install scripts npm/esbuild@0.17.19 🚫
Install scripts npm/protobufjs@6.11.3
  • Install script: postinstall
  • Source: node scripts/postinstall
 🚫
Install scripts npm/tiny-secp256k1@1.1.6
  • Install script: install
  • Source: npm run build || echo "secp256k1 bindings compilation fail. Pure JS implementation will be used."
 🚫
Install scripts npm/web3@1.10.3
  • Install script: postinstall
  • Source: echo "Web3.js 4.x alpha has been released for early testing and feedback. Checkout doc at https://docs.web3js.org/ "
 🚫
Install scripts npm/web3-bzz@1.10.3
  • Install script: postinstall
  • Source: echo "WARNING: the web3-bzz api will be deprecated in the next version"
 🚫
Install scripts npm/web3-shh@1.10.3
  • Install script: postinstall
  • Source: echo "WARNING: the web3-shh api will be deprecated in the next version"
 🚫
Install scripts npm/core-js-pure@3.35.0
  • Install script: postinstall
  • Source: node -e "try{require('./postinstall')}catch(e){}"
 🚫

View full report↗︎

Next steps

What is protestware?

This package is a joke, parody, or includes undocumented or hidden behavior unrelated to its primary function.

Consider that consuming this package may come along with functionality unrelated to its primary purpose.

What is an install script?

Install scripts are run when the package is installed. The majority of malware in npm is hidden in install scripts.

Packages should not be running non-essential scripts during install and there are often solutions to problems people solve with install scripts that can be run at publish time instead.

Take a deeper look at the dependency

Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support [AT] socket [DOT] dev.

Remove the package

If you happen to install a dependency that Socket reports as Known Malware you should immediately remove it and select a different dependency. For other alert types, you may may wish to investigate alternative packages or consider if there are other ways to mitigate the specific risk posed by the dependency.

Mark a package as acceptable risk

To ignore an alert, reply with a comment starting with @SocketSecurity ignore followed by a space separated list of ecosystem/package-name@version specifiers. e.g. @SocketSecurity ignore npm/foo@1.0.0 or ignore all packages with @SocketSecurity ignore-all

  • @SocketSecurity ignore npm/es5-ext@0.10.62
  • @SocketSecurity ignore npm/esbuild@0.17.19
  • @SocketSecurity ignore npm/protobufjs@6.11.3
  • @SocketSecurity ignore npm/tiny-secp256k1@1.1.6
  • @SocketSecurity ignore npm/web3@1.10.3
  • @SocketSecurity ignore npm/web3-bzz@1.10.3
  • @SocketSecurity ignore npm/web3-shh@1.10.3
  • @SocketSecurity ignore npm/core-js-pure@3.35.0

@alfetopito
Copy link
Collaborator

@fairlighteth @elena-zh I'll merge this one to the parent to make it easier to iterate without so many waterfalls
Let's not lose track of the pending issues raised here

@alfetopito alfetopito merged commit b455f57 into hackathon/progress-bar-v2 Aug 8, 2024
2 of 8 checks passed
@alfetopito alfetopito deleted the progressbar-v2-styled-1 branch August 8, 2024 10:26
@github-actions github-actions bot locked and limited conversation to collaborators Aug 8, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@alfetopito alfetopito alfetopito left review comments

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@fairlighteth @elena-zh @alfetopito