Adds optional confetti to incoming payments in wallet

[arcbtc]

2024-02-02.02-25-48.mp4

The confetti websocket can be added to any page with eventReactionWebocket(event_id, event_function)

For the wallet example event_id is the wallet ID, and event_function is the function eventReactionBothSidesConfetti (eventReactionFireworksConfetti also exists but is not used)

It made sense to leave room for multiple animations the developer could summon using eventReactionWebocket, or the user could specify in the profile page.

[prusnak]

This is awesome!!!!

Does it look good on mobile too (vertical aspect ratio)?

[prusnak]

Needs make prettier and make bundle.

[dni]

why are you creating an extra websocket connection? it should be enough to trigger the animation when we also close the popup after a successful payment. we should keep those connections to a minimum.

i don't think that the animation should be disabled by default its such a good feature and every wallet has it, i don't even think its should be configurable at all!

[arcbtc]

This is awesome!!!!

Does it look good on mobile too (vertical aspect ratio)?

2024-02-05.12-11-33.mp4

[arcbtc]

why are you creating an extra websocket connection? it should be enough to trigger the animation when we also close the popup after a successful payment. we should keep those connections to a minimum.

i don't think that the animation should be disabled by default its such a good feature and every wallet has it, i don't even think its should be configurable at all!

The reason I am adding the websocket is it is far superior to the SSE (which often times out). Later I will propose we use for updating the wallet balance and doing things like easily have balances in the drawer updating

Its enabled by default.

People like customising stuff, the toggle switch will later turn into a select box, where a user could select from various animations. The admin could then set what animations are available, same flow as themes really

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (a73eb56) 59.23% compared to head (0cbf4ab) 59.24%.

Additional details and impacted files

@@            Coverage Diff             @@
##              dev    #2231      +/-   ##
==========================================
+ Coverage   59.23%   59.24%   +0.01%     
==========================================
  Files          60       60              
  Lines        8992     8992              
==========================================
+ Hits         5326     5327       +1     
+ Misses       3666     3665       -1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[talvasconcelos]

How does one create (and add) a new animation?

[arcbtc]

For now in the reactions.js file, but later I will add gif support and uploading gifs.

[motorina0]

tACK

[dni]

can you add the library via npm and into our build?
is it this library? https://www.npmjs.com/package/js-confetti

[arcbtc]

can you add the library via npm and into our build? is it this library? https://www.npmjs.com/package/js-confetti

Nien! Its been changed, its also very small, so I think this approach is unnecessary