Skip to content
This repository was archived by the owner on Oct 4, 2023. It is now read-only.

[PAY-565] TokenValueInputV2 Component#1869

Merged
rickyrombo merged 19 commits into
mainfrom
mjp-token-amount-input-v2
Sep 19, 2022
Merged

[PAY-565] TokenValueInputV2 Component#1869
rickyrombo merged 19 commits into
mainfrom
mjp-token-amount-input-v2

Conversation

@rickyrombo

@rickyrombo rickyrombo commented Sep 7, 2022 •
edited
Loading

Copy link
Copy Markdown
Contributor

Description

Nobody asked for it but this component was bothering me so I made a replacement 😂

  • Adds a new TokenValueInputV2 component to stems to replace TokenValueInput

    • Fixes:
      • TokenValueInput had a bug where because it parsed the input as a number it would lose precision for large numbers
      • TokenValueInput needed a lot of special casing for various styles since it used absolute positioning. The new version uses flexbox instead, making it actually aligned with the number in the text field and given the proper padding (see videos).
      • TokenValueInput lacked a proper label for accessibility. The new one enforces either label or aria-label are set
      • TokenValueInput didn't have a way to pass in a ref to the input element to autofocus it
      • TokenValueInput used to allow for non-numeric inputs, which is counter-intuitive given its name.
      • TokenValueInput used to allow for it to be a text-area, which is counter-intuitive given its name.
    • New features:
      • TokenValueInputV2 automatically converts the input to a BN for the onChange handler
      • TokenValueInputV2 supports a fixed decimal count (eg. use decimals=8 for SPL $AUDIO)

  • Updates tip modal and on-ramp modal to use new component

  • Autofocuses the "Custom Amount" field in the on-ramp when the pill radio button gets selected

Before: Notice the numbers after a certain point are all 0s. Also the $AUDIO label doesn't align with the numbers.

Screen.Recording.2022-09-06.at.11.58.19.PM.mov

After: No precision loss and the $AUDIO label aligns well, even has some extra padding to make it cleaner!

Screen.Recording.2022-09-06.at.11.58.42.PM.mov

Dragons

Is there anything the reviewer should be on the lookout for? Are there any dangerous changes?

  • Will require design pass
  • Should we import common into stems? I'm using the formatNumberCommas method (slightly modified to allow decimals)

How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide repro instructions & any configuration.

  • Tested manually against stage

How will this change be monitored?

For features that are critical or could fail silently please describe the monitoring/alerting being added.

  • N/A

Feature Flags

Are all new features properly feature flagged? Describe added feature flags.

  • No feature flags

@audius-infra

audius-infra commented Sep 7, 2022

Copy link
Copy Markdown
Collaborator

Preview this change https://demo.audius.co/mjp-token-amount-input-v2

@rickyrombo rickyrombo marked this pull request as ready for review September 7, 2022 15:31
raymondjacobson
raymondjacobson approved these changes Sep 10, 2022
View reviewed changes
Comment thread packages/stems/src/components/TokenValueInput/TokenValueInput.tsx
Comment thread packages/stems/src/components/TokenValueInputV2/TokenValueInputV2.stories.tsx Outdated
Comment thread packages/stems/src/components/TokenValueInputV2/TokenValueInputV2.tsx
@audius-infra

audius-infra commented Sep 16, 2022

Copy link
Copy Markdown
Collaborator

Preview this change https://demo.audius.co/mjp-token-amount-input-v2

@audius-infra

audius-infra commented Sep 17, 2022

Copy link
Copy Markdown
Collaborator

Preview this change https://demo.audius.co/mjp-token-amount-input-v2

@audius-infra

audius-infra commented Sep 19, 2022

Copy link
Copy Markdown
Collaborator

Preview this change https://demo.audius.co/mjp-token-amount-input-v2

@rickyrombo rickyrombo merged commit 9cd2b89 into main Sep 19, 2022
@rickyrombo rickyrombo deleted the mjp-token-amount-input-v2 branch September 19, 2022 19:54
audius-infra pushed a commit that referenced this pull request Sep 24, 2022
v1.3.6
1fe4e68 
[2d44919] Fix now-playing navigation (#1992) Dylan Jeffers
[d7065e6] Update react-native-screens patchfile (#1991) Dylan Jeffers
[7348257] [C-1172] Add screen freeze (#1990) Dylan Jeffers
[d4c9f17] Fix TopSupporters, TrackScreen caching (#1989) Dylan Jeffers
[38a4f59] Prevent track restart by adding selector equality for track owner (#1957) Sebastian Klingler
[c2eb69e] [C-482] Fix android navigation bar clipping (#1988) Dylan Jeffers
[0da8377] [PLAT-98] Add feature flag for auto sub (#1979) Raymond Jacobson
[7ce5b87] [C-1151] Fix empty profile tab (#1984) Dylan Jeffers
[4aff4ee] [C-1048] Reset scrubber on song repeat (#1985) Dylan Jeffers
[c48df76] [C-1160,C-1161] Fix search navigation (#1980) Dylan Jeffers
[a2a6b4b] Fix mobile favorites c-831 (#1981) nicoback2
[5dce1d4] Update stage mobile env to goerli (#1987) Raymond Jacobson
[bd5aadb] Fix mac build (#1986) Raymond Jacobson
[eba0787] fix tag search more results (#1983) nicoback2
[39b66f4] Remove trimtoalphanumeric (#1982) Raymond Jacobson
[69f9c6f] keep relevant search results in store (#1973) nicoback2
[c76faaa] fix playlist link in tile overflow menu (#1976) nicoback2
[93903ca] Update staging to use goerli addresses (#1978) Isaac Solo
[f369627] [C-1152] Improve favorites tab performance (#1975) Dylan Jeffers
[b24dbe4] Fix playlist challenge optimistic update (#1974) Michael Piazza
[d31daf7] Set limit when getting bulk tracks by id because default is 100 (#1970) Sebastian Klingler
[d602cca] Update new table styles for qa issues (#1969) Kyle Shanks
[62097aa] Disable account sync to test app failure (#1972) Dylan Jeffers
[a40953d] [C-1137] Add debounce to change in NetworkInfo status (#1967) Andrew Mendelsohn
[7c765af] [C-976] Fix native artist recommendations (#1971) Dylan Jeffers
[a48eed5] [C-1004] Fix sign-up -> sign-in email bug (#1968) Dylan Jeffers
[8f9ed13] [C-1090] Improve profile store layout (#1963) Dylan Jeffers
[b1003b8] [C-978] Check for track repeat before advancing shuffle (#1965) Andrew Mendelsohn
[d5aa252] Update new table styles for table action buttons (#1964) Kyle Shanks
[074f0bd] Prevent toasts from appearing when overflow menu is clicked (#1962) Sebastian Klingler
[a333649] Remove filter skeletone from new tables (#1961) Kyle Shanks
[5291b03] c-1127 Fix more search results track lineup (#1959) nicoback2
[722819b] Upgrade CI xcode and provide dSyms (#1960) Raymond Jacobson
[36ca926] Add track entity manager feature flag (#1743) Joseph Lee
[d2a5065] fix search result -> track screen bug (#1955) nicoback2
[5f0d280] [PAY-634] On Ramp Design Fixes (Part 1) (#1949) Marcus Pasell
[926469d] Fix new table styling (#1958) Kyle Shanks
[7236aa4] Update favorites page table columns, update reorderable table title and artist cursor, and display tooltips for table headers (#1956) Kyle Shanks
[e410fed] Implement small UI tweaks (#1952) Raymond Jacobson
[6f92aad] Apply accessbility patch for ios16 and xcode14 (#1951) Raymond Jacobson
[ced5749] Fix native profile render (#1945) Dylan Jeffers
[e6a3d87] Fix hover state for the new tables (#1953) Kyle Shanks
[6746e80] [PAY-428] Wrap link text in notifications (#1948) Reed
[f54f07e] Fix feed filter native c-1115 (#1947) nicoback2
[09a7e96] Upload sourcemaps for prod and release-candidate (#1946) Sebastian Klingler
[9cd2b89] [PAY-565] TokenValueInputV2 Component (#1869) Marcus Pasell
[2242786] Use artwork from track for MusicControl (#1943) Sebastian Klingler
[ed84022] [C-1067] Add feature flag for offline mode (#1941) Andrew Mendelsohn
[87f1082] send amplitude event when app crahses (#1942) nicoback2
[dc5c393] Disable gesture on AddToPlaylist drawer (#1944) Sebastian Klingler
@AudiusProject AudiusProject deleted a comment from linear Bot Sep 11, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Reviewers

@dylanjeffers dylanjeffers Awaiting requested review from dylanjeffers

1 more reviewer

@raymondjacobson raymondjacobson raymondjacobson approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

@dharit-tan dharit-tan

@piazzatron piazzatron

@dylanjeffers dylanjeffers

@sddioulde sddioulde

Labels

size/L

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

7 participants

@rickyrombo @audius-infra @raymondjacobson @dharit-tan @piazzatron @dylanjeffers @sddioulde