[Cashtab] Show token qty and cumulative qty in any given agora offer in a tooltip
ClosedPublic
Actions

Authored by bytesofman on Wed, Jan 15, 19:11.

Details

Reviewers

emack

Group Reviewers

Restricted Project

Commits

rABCbb9172b62a96: [Cashtab] Show token qty and cumulative qty in any given agora offer in a…

Summary

Part of incremental effort to get agora UX on par with binance UX

Both Binance and Coinex show the amount of token for sale at each limit order price. They also show the cumulative amount as you proceed further up the depth chart.

I think it is too much info to show these quantities all the time in Cashtab, esp as token quantities can be quite large. But would be nice to show with a tooltip.

Expanding on D17449 which I forgot about

Test Plan

npm test for CI, screenshot to confirm we see displayed amount. The calculation of the amount itself is already tested elsewhere.

...for some reason the opacity goes down when I take a screenshot, but it is not like this in normal use, can verify at test site

deployed to test site at https://cashtab-local-dev.netlify.app/

Diff Detail

Repository

rABC Bitcoin ABC

Lint

Lint Not Applicable

Unit

Tests Not Applicable

Event Timeline

bytesofman created this revision.Wed, Jan 15, 19:11

Herald added a reviewer: Restricted Project. · View Herald TranscriptWed, Jan 15, 19:11

bytesofman edited the test plan for this revision. (Show Details)Wed, Jan 15, 19:12

Harbormaster completed remote builds in B32108: Diff 52216.Wed, Jan 15, 19:17

Build Bitcoin ABC Diffs / Diff Testing (cashtab-tests) failed.

Failed tests logs:

====== CashTab Unit Tests: <Agora /> We can see multiple offers, some we made, others we did not, and we can cancel an offer ======
ReferenceError: ResizeObserver is not defined
    at Object.autoUpdate (/work/cashtab/node_modules/@floating-ui/dom/dist/floating-ui.dom.umd.js:773:7)
    at /work/cashtab/node_modules/react-tooltip/dist/react-tooltip.min.cjs:7:8725
    at commitHookEffectListMount (/work/cashtab/node_modules/react-dom/cjs/react-dom.development.js:23189:26)
    at commitPassiveMountOnFiber (/work/cashtab/node_modules/react-dom/cjs/react-dom.development.js:24970:11)
    at commitPassiveMountEffects_complete (/work/cashtab/node_modules/react-dom/cjs/react-dom.development.js:24930:9)
    at commitPassiveMountEffects_begin (/work/cashtab/node_modules/react-dom/cjs/react-dom.development.js:24917:7)
    at commitPassiveMountEffects (/work/cashtab/node_modules/react-dom/cjs/react-dom.development.js:24905:3)
    at flushPassiveEffectsImpl (/work/cashtab/node_modules/react-dom/cjs/react-dom.development.js:27078:3)
    at flushPassiveEffects (/work/cashtab/node_modules/react-dom/cjs/react-dom.development.js:27023:14)
    at /work/cashtab/node_modules/react-dom/cjs/react-dom.development.js:26808:9
    at flushActQueue (/work/cashtab/node_modules/react/cjs/react.development.js:2667:24)
    at act (/work/cashtab/node_modules/react/cjs/react.development.js:2582:11)
    at /work/cashtab/node_modules/@testing-library/react/dist/act-compat.js:47:25
    at Object.eventWrapper (/work/cashtab/node_modules/@testing-library/react/dist/pure.js:107:28)
    at Object.wrapEvent (/work/cashtab/node_modules/@testing-library/user-event/dist/cjs/event/wrapEvent.js:6:28)
    at Object.dispatchEvent (/work/cashtab/node_modules/@testing-library/user-event/dist/cjs/event/dispatchEvent.js:45:22)
    at Object.dispatchUIEvent (/work/cashtab/node_modules/@testing-library/user-event/dist/cjs/event/dispatchEvent.js:22:26)
    at Object.enter (/work/cashtab/node_modules/@testing-library/user-event/dist/cjs/system/pointer/mouse.js:60:30)
    at PointerHost.move (/work/cashtab/node_modules/@testing-library/user-event/dist/cjs/system/pointer/index.js:51:73)
    at pointerAction (/work/cashtab/node_modules/@testing-library/user-event/dist/cjs/pointer/index.js:64:39)
    at Object.pointer (/work/cashtab/node_modules/@testing-library/user-event/dist/cjs/pointer/index.js:32:15)
    at runNextTicks (node:internal/process/task_queues:60:5)
    at listOnTimeout (node:internal/timers:545:9)
    at processTimers (node:internal/timers:519:7)
    at Object.asyncWrapper (/work/cashtab/node_modules/@testing-library/react/dist/pure.js:88:22)
    at Object.<anonymous> (/work/cashtab/src/components/Agora/__tests__/index.test.js:781:9)
====== CashTab Unit Tests: <Agora /> We get expected error if we try to buy an offer we cannot afford ======
ReferenceError: ResizeObserver is not defined
    at Object.autoUpdate (/work/cashtab/node_modules/@floating-ui/dom/dist/floating-ui.dom.umd.js:773:7)
    at /work/cashtab/node_modules/react-tooltip/dist/react-tooltip.min.cjs:7:8725
    at commitHookEffectListMount (/work/cashtab/node_modules/react-dom/cjs/react-dom.development.js:23189:26)
    at commitPassiveMountOnFiber (/work/cashtab/node_modules/react-dom/cjs/react-dom.development.js:24970:11)
    at commitPassiveMountEffects_complete (/work/cashtab/node_modules/react-dom/cjs/react-dom.development.js:24930:9)
    at commitPassiveMountEffects_begin (/work/cashtab/node_modules/react-dom/cjs/react-dom.development.js:24917:7)
    at commitPassiveMountEffects (/work/cashtab/node_modules/react-dom/cjs/react-dom.development.js:24905:3)
    at flushPassiveEffectsImpl (/work/cashtab/node_modules/react-dom/cjs/react-dom.development.js:27078:3)
    at flushPassiveEffects (/work/cashtab/node_modules/react-dom/cjs/react-dom.development.js:27023:14)
    at performConcurrentWorkOnRoot (/work/cashtab/node_modules/react-dom/cjs/react-dom.development.js:25748:32)
    at flushActQueue (/work/cashtab/node_modules/react/cjs/react.development.js:2667:24)
    at act (/work/cashtab/node_modules/react/cjs/react.development.js:2582:11)
    at /work/cashtab/node_modules/@testing-library/react/dist/act-compat.js:47:25
    at Object.eventWrapper (/work/cashtab/node_modules/@testing-library/react/dist/pure.js:107:28)
    at Object.wrapEvent (/work/cashtab/node_modules/@testing-library/user-event/dist/cjs/event/wrapEvent.js:6:28)
    at Object.dispatchEvent (/work/cashtab/node_modules/@testing-library/user-event/dist/cjs/event/dispatchEvent.js:45:22)
    at Object.dispatchUIEvent (/work/cashtab/node_modules/@testing-library/user-event/dist/cjs/event/dispatchEvent.js:22:26)
    at Object.enter (/work/cashtab/node_modules/@testing-library/user-event/dist/cjs/system/pointer/mouse.js:60:30)
    at PointerHost.move (/work/cashtab/node_modules/@testing-library/user-event/dist/cjs/system/pointer/index.js:51:73)
    at pointerAction (/work/cashtab/node_modules/@testing-library/user-event/dist/cjs/pointer/index.js:64:39)
    at Object.pointer (/work/cashtab/node_modules/@testing-library/user-event/dist/cjs/pointer/index.js:32:15)
    at Object.asyncWrapper (/work/cashtab/node_modules/@testing-library/react/dist/pure.js:88:22)
    at Object.<anonymous> (/work/cashtab/src/components/Agora/__tests__/index.test.js:975:9)

Each failure log is accessible here:
CashTab Unit Tests: <Agora /> We can see multiple offers, some we made, others we did not, and we can cancel an offer
CashTab Unit Tests: <Agora /> We get expected error if we try to buy an offer we cannot afford

mock ResizeObserver to fix tests

Harbormaster completed remote builds in B32109: Diff 52217.Wed, Jan 15, 19:29

bytesofman published this revision for review.Wed, Jan 15, 19:31

This is a rare case where I don't think it's worth doing 2 steps. It's easy enough to get the cumulative value (you can use D17449 if you want to) that it doesn't desserve a half step

add cumulative, make sure tooltips are always on top

bytesofman retitled this revision from [Cashtab] Show token qty in any given agora offer in a tooltip to [Cashtab] Show token qty and cumulative qty in any given agora offer in a tooltip.Wed, Jan 15, 22:54

bytesofman edited the summary of this revision. (Show Details)

bytesofman edited the test plan for this revision. (Show Details)

bytesofman edited the test plan for this revision. (Show Details)Wed, Jan 15, 22:57

bytesofman edited the test plan for this revision. (Show Details)

Harbormaster completed remote builds in B32116: Diff 52230.Wed, Jan 15, 22:59

Minor nit but tested all ok. Can confirm the transparency is not an issue on mobile screenshots, so must be Brave specific.

cashtab/package-lock.json
31 ↗	(On Diff #52230)	not a showstopper but react-tooltip is almost a meg, just checking you're aware given it's just a tooltip lib?

This revision is now accepted and ready to land.Thu, Jan 16, 05:34

Actually, I did an actual check on the bundle size, one meg over 227 megs is negligible in the grand scheme of things. Non-issue unless the whole bundle is getting to a point where it may start to affect performance?

In D17540#399207, @emack wrote:

Actually, I did an actual check on the bundle size, one meg over 227 megs is negligible in the grand scheme of things. Non-issue unless the whole bundle is getting to a point where it may start to affect performance?

the correct check here is to check the size of the bundle you get from npm run build before and after

perhaps I should have checked that, but in this case we are only adding js and css, most of the size of react-tooltip is from react, which we already have

cashtab/package-lock.json
31 ↗	(On Diff #52230)	the size stuff is hard to parse. it's not bumping our bundle by a meg. it's tree shakeable so you only get what you are using, which for us is just some more JS and css. it's mostly a dependency-free dep, tho it does impact our package-lock.json somewhat so that can't be entirely true anyway it is a widely used and extensively tested app that does not seem to impact performance, so I'm ok with adding it. we will prob use it for lots of stuff going forward.