feat(staking): ui of validator selection #691

moo-onthelawn · 2024-06-19T16:12:01Z

Implement UI of Validator Selection on staking dialog

Note: no search bar implemented (confirmed with product)
Default sort is on "validator" which actually sorts by commission (lowest -> highest)

Some smol polishes

Fix table sorting visuals
Update max input button to be purple with brighter text
Update text colors of staking and unstaking forms
Add token next to header on unstake form
Update tooltip of "Validator" on staking form + legal disclaimer

Empty	With scrollable list of validators	Non scrollable list of validators

Views

UnstakeForm
- [Polish work] add token next to header
- [Polish work] update staked amount text color
StakeForm
- [Polish work] update tooltip on "Validator"; also rename "Selected Validator" -> "Validator"
- [Polish work] update legal disclaimer (which no longer links out to Keplr) and update text size
- [Polish work] fix up text colors in form

Components

New: DropdownIcon
- Basically a caret or triangle that flips 180 degrees when open vs closed
- Did some refactoring to use where possible; I didn't update cases where we associate it with a DropdownTrigger; that would require slightly more work
  - Updated in SearchSelectMenu, UnopenedIsolatedPositions, MarketsDropdown
  - Used in ValidatorDropdown
New: ValidatorDropdown
- Implemented dropdown of validators
- TODO to internationalize empty state
Details
- Remove isolation: isolate because it's covered by layoutMixins calls below
FormMaxInputToggleButton
- [Polish work] increase size to be small to match Figma
- [Polish work] Update max button to be purple with brighter text
Popover
- Add align prop to allow alignment to the end (radix prop)
Table
- Fix our sort arrow not actually working because we were reading the aria-sort which didn't actually work
StakeRewardButtonAndReceipt
- [Polish work] fix up text colors

Constants/Types

constants/validators.ts
- add a ValidatorData type

Hooks

hooks/useStakingValidator
- For now just pass in dummy data (filtered validators) for list of validators to show; linked a TODO

vercel · 2024-06-19T16:12:03Z

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

Name	Status	Preview	Comments	Updated (UTC)
v4-staging	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 20, 2024 3:05pm
v4-testnet	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 20, 2024 3:05pm

linear · 2024-06-19T16:12:04Z

OTE-447 Implement UI

moo-onthelawn · 2024-06-19T18:59:13Z

src/components/ValidatorDropdown.tsx

+      validators.push({
+        name: val.description.moniker,
+        operatorAddress: val.operatorAddress,
+        votingPower: MustBigNumber(val.delegatorShares).div(10 ** 36),


oops forgot to update these hardcoded vals (36; 16) will do

rosepuppy

Awesome work!!!

rosepuppy · 2024-06-20T04:53:31Z

src/components/DropdownIcon.tsx

rosepuppy · 2024-06-20T05:05:15Z

src/components/ValidatorDropdown.tsx

Since this is implemented already so don't sweat it, and I think this approach is totally valid.

Originally I was thinking we could have leveraged SearchSelectMenu since it would give us the search functionality for free, and more designed as a popover UI. But obviously won't column have sorting, which I thought was less important. But just throwing it out there.

ooh good point; yeah my understanding of product was that sortability seemed more important than search but may have been easier to use SearchSelectMenu. Tbh I was basing my implementation on the MarketsDropdown; I think there is opportunity to update SearchSelectMenu to be able to handle rendering something with a table (optionally) and then having MarketsDropdown/ValidatorDropdown reuse it as well // maybe one day I'll get around it to it 🫠

All good! I think this reasoning make sense too

* feat: ➕ add export-to-csv dep * feat: ✨ add download icon * feat: ✨ add navigation menu slots * feat: ✨ add csv utility * feat: 🏷️ improve dropdown menu types * refactor: ♻️ refactor Output component refactored Output component to export formatting utils. * feat: ✨ add ExportHistoryDropdown component * feat: ✨ add export inside History page added ExportHistoryDropdown component inside History page layout. * feat: 🚸 disable csv export on empty data * feat: 📈 add export history analytics * fix: 🐛 fix export history download * fix: 🐛 fix post merge errors * feat: ✨ add reusable format number function * refactor: ♻️ add better style declaration * fix: 🐛 fix post merge errors * fix: 🐛 fix react errors * fix: 🐛 fix empty export * feat: ⬆️ upgrade @dydxprotocol/v4-client-js * feat: ✨ add history export all services * feat: ✨ add export loading states * refactor: 🎨 improve format of the code * style: 🚨 fix lint errors * style: 🚨 add default case * feat: ✨ add export sorting in decreasing order * feat: ✨ add price column inside csv * fix: add back precision to earned by stakers (dydxprotocol#692) * fix(sparklines): bump abacus and fix output component (dydxprotocol#695) * feat(staking): ui of validator selection (dydxprotocol#691) * chore: replace spread row with mid market price row (dydxprotocol#696) * chore(hide-gasToggle): temp hide gas toggle (dydxprotocol#700) * chore: improve order statuses (dydxprotocol#693) * fix(subaccount-transfer): enforce senderAddress matches localWallet (dydxprotocol#703) * feat: update to use proxy for staking apr (dydxprotocol#702) * chore: remove deprecated params [OTE-353] (dydxprotocol#698) * feat: add ZK, ZRO, NCAT to the widget (dydxprotocol#704) * feat(staking): polishes (dydxprotocol#701) * feat: improve markets page style (dydxprotocol#699) * feat: ⬆️ upgrade @dydxprotocol/v4-client-js * feat: ✨ add parentSubaccount export * feat: ✨ disable export on disconnection state * feat(staking): add staking live notif (dydxprotocol#708) * feat(new market): have other market validation run on diff only (dydxprotocol#705) * feat: redirect other reward pages after staking is turned on (dydxprotocol#711) * docs: 📝 improve comment format * fix: 🐛 fix merge error * style: 🚨 fix lint errors * feat: fix invert tag for certain raydium markets (dydxprotocol#709) Co-authored-by: jaredvu <[email protected]> * chore(default-page): change default page to /markets (dydxprotocol#713) * chore(staking): remove last faq question (dydxprotocol#712) * feat: add tracking to staking (dydxprotocol#710) * fix: polishes for staking (dydxprotocol#716) * fix: nonzero rewards (dydxprotocol#653) * chore: fully type dialogs, fix some more any types, redo analytics (dydxprotocol#671) * fix: fix validator url icon (dydxprotocol#720) * chore(new-market): update header copy (dydxprotocol#718) * feat(mobile-download): Add mobile app store download links (dydxprotocol#717) * feat: preload metadata for all markets in otherMarketData.json (dydxprotocol#646) Co-authored-by: jaredvu <[email protected]> * fix: isolated positions bug fixes + auto-open (dydxprotocol#721) * feat: orderbook refresh + updates (dydxprotocol#647) * chore: install-local-l10n command (dydxprotocol#697) * chore: use FormMaxInputToggleButton in transfer/deposit/withdraw forms (dydxprotocol#715) * fix: fix updated terms of use link (dydxprotocol#724) * fix: orderbook bugs (dydxprotocol#725) * style(nits): update exchange billboards and stats, assetIcons (dydxprotocol#726) * feat: update zk logo and zro zk logo data (dydxprotocol#727) * feat: skip track/status endpoints [OTE-354] (dydxprotocol#719) * fix(disconnect-cleanup): set localWallet and hdKey to undefined when disconnecting (dydxprotocol#728) * fix: analytics property names (dydxprotocol#730) * style(tables): update table header styling (dydxprotocol#729) * feat: ✨ add new analytics api --------- Co-authored-by: moo-onthelawn <[email protected]> Co-authored-by: Jared Vu <[email protected]> Co-authored-by: aleka <[email protected]> Co-authored-by: Bill <[email protected]> Co-authored-by: Jeremy Lee <[email protected]> Co-authored-by: yujin512 <[email protected]> Co-authored-by: Tian <[email protected]> Co-authored-by: tyleroooo <[email protected]>

chore: override post order position margin for full close position on isolated market (dydxprotocol#670) fix: fix decimal places on order size/amount in positions + orders table (dydxprotocol#675) chore(staking): (un)stake form polishes (dydxprotocol#658) chore: set privy app client id (dydxprotocol#660) fix: handle partially canceled orders (dydxprotocol#679) fix(staking): add faq + fix unflagged fetch of trading rewards data (dydxprotocol#681) feat: cancel trigger orders automatically / abacus bump (dydxprotocol#682) chore: abacus enum casing + remove cancelOrder param (dydxprotocol#683) chore(adjust-margin): add additional validation (dydxprotocol#668) chore(abacus): bump to 1.7.83 (dydxprotocol#677) Co-authored-by: aforaleka <[email protected]> feat: add raydium markets to the widget (dydxprotocol#533) Co-authored-by: jaredvu <[email protected]> Co-authored-by: Bill <[email protected]> Co-authored-by: tyleroooo <[email protected]> Co-authored-by: moo-onthelawn <[email protected]> Co-authored-by: Tian Qin <[email protected]> Co-authored-by: Nikhil Vasan <[email protected]> fix(new-market-filter): remove isolated filter (dydxprotocol#688) feat(staking): claim rewards transaction (+ simulation) (dydxprotocol#648) fix: Recently Listed Markets View Sorted by `clobPairId` (dydxprotocol#689) chore: bump abacus (dydxprotocol#690) feat: share PNL analytics (dydxprotocol#678) fix: add back precision to earned by stakers (dydxprotocol#692) fix(sparklines): bump abacus and fix output component (dydxprotocol#695) feat(staking): ui of validator selection (dydxprotocol#691) chore: replace spread row with mid market price row (dydxprotocol#696) chore(hide-gasToggle): temp hide gas toggle (dydxprotocol#700) chore: improve order statuses (dydxprotocol#693) fix(subaccount-transfer): enforce senderAddress matches localWallet (dydxprotocol#703) feat: update to use proxy for staking apr (dydxprotocol#702) chore: remove deprecated params [OTE-353] (dydxprotocol#698) feat: add ZK, ZRO, NCAT to the widget (dydxprotocol#704) feat(staking): polishes (dydxprotocol#701) feat: improve markets page style (dydxprotocol#699) feat(staking): add staking live notif (dydxprotocol#708) feat(new market): have other market validation run on diff only (dydxprotocol#705) feat: redirect other reward pages after staking is turned on (dydxprotocol#711)

moo-onthelawn added 2 commits June 19, 2024 12:08

wip

fd68017

Merge branch 'main' into mulan/ote-447-implement-ui

a3fd7b5

vercel bot had a problem deploying to Preview – v4-testnet June 19, 2024 16:12 Failure

vercel bot had a problem deploying to Preview – v4-staging June 19, 2024 16:13 Failure

fix up imports

4724e2d

vercel bot had a problem deploying to Preview – v4-staging June 19, 2024 16:23 Failure

vercel bot had a problem deploying to Preview – v4-testnet June 19, 2024 16:24 Failure

clean up component

85526cd

vercel bot had a problem deploying to Preview – v4-staging June 19, 2024 17:31 Failure

vercel bot had a problem deploying to Preview – v4-testnet June 19, 2024 17:32 Failure

fix up some lint

1cc6700

vercel bot had a problem deploying to Preview – v4-testnet June 19, 2024 17:34 Failure

vercel bot had a problem deploying to Preview – v4-staging June 19, 2024 17:34 Failure

fxi again

9cd7ff7

vercel bot had a problem deploying to Preview – v4-staging June 19, 2024 17:36 Failure

vercel bot had a problem deploying to Preview – v4-testnet June 19, 2024 17:37 Failure

fix typing

cf6be37

vercel bot deployed to Preview – v4-staging June 19, 2024 17:57 View deployment

vercel bot deployed to Preview – v4-testnet June 19, 2024 17:59 View deployment

moo-onthelawn marked this pull request as ready for review June 19, 2024 18:03

moo-onthelawn commented Jun 19, 2024

View reviewed changes

moo-onthelawn added 2 commits June 19, 2024 18:16

fix hardcoded values

574732d

Merge branch 'main' into mulan/ote-447-implement-ui

42c7e8c

vercel bot had a problem deploying to Preview – v4-testnet June 19, 2024 22:20 Failure

vercel bot had a problem deploying to Preview – v4-staging June 19, 2024 22:21 Failure

fix typing

58110ae

vercel bot deployed to Preview – v4-testnet June 19, 2024 22:30 View deployment

vercel bot deployed to Preview – v4-staging June 19, 2024 22:32 View deployment

rosepuppy approved these changes Jun 20, 2024

View reviewed changes

feat(staking): hydrate validator dropdown with all options (#694)

7c05d1a

vercel bot deployed to Preview – v4-testnet June 20, 2024 14:02 View deployment

vercel bot deployed to Preview – v4-staging June 20, 2024 14:04 View deployment

fix state management

cbb0830

vercel bot deployed to Preview – v4-staging June 20, 2024 14:37 View deployment

vercel bot deployed to Preview – v4-testnet June 20, 2024 14:39 View deployment

moo-onthelawn added 2 commits June 20, 2024 10:59

fix input bug

ac315b5

fix import

56b7cfe

vercel bot deployed to Preview – v4-testnet June 20, 2024 15:03 View deployment

vercel bot deployed to Preview – v4-staging June 20, 2024 15:05 View deployment

moo-onthelawn merged commit a8e3503 into main Jun 20, 2024
6 checks passed

moo-onthelawn deleted the mulan/ote-447-implement-ui branch June 20, 2024 15:07

DavideSegullo pushed a commit to nabla-studio/v4-web that referenced this pull request Jun 26, 2024

feat(staking): ui of validator selection (dydxprotocol#691)

d528892

DavideSegullo pushed a commit to nabla-studio/v4-web that referenced this pull request Jun 26, 2024

feat(staking): ui of validator selection (dydxprotocol#691)

14fcea9

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(staking): ui of validator selection #691

feat(staking): ui of validator selection #691

moo-onthelawn commented Jun 19, 2024 •

edited

Loading

vercel bot commented Jun 19, 2024 •

edited

Loading

linear bot commented Jun 19, 2024

moo-onthelawn Jun 19, 2024

rosepuppy left a comment

rosepuppy Jun 20, 2024

rosepuppy Jun 20, 2024

moo-onthelawn Jun 20, 2024 •

edited

Loading

rosepuppy Jun 20, 2024

feat(staking): ui of validator selection #691

feat(staking): ui of validator selection #691

Conversation

moo-onthelawn commented Jun 19, 2024 • edited Loading

Views

Components

Constants/Types

Hooks

vercel bot commented Jun 19, 2024 • edited Loading

linear bot commented Jun 19, 2024

moo-onthelawn Jun 19, 2024

Choose a reason for hiding this comment

rosepuppy left a comment

Choose a reason for hiding this comment

rosepuppy Jun 20, 2024

Choose a reason for hiding this comment

rosepuppy Jun 20, 2024

Choose a reason for hiding this comment

moo-onthelawn Jun 20, 2024 • edited Loading

Choose a reason for hiding this comment

rosepuppy Jun 20, 2024

Choose a reason for hiding this comment

moo-onthelawn commented Jun 19, 2024 •

edited

Loading

vercel bot commented Jun 19, 2024 •

edited

Loading

moo-onthelawn Jun 20, 2024 •

edited

Loading