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.

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

Number input component #78

Merged
merged 7 commits into from
Dec 28, 2023
Merged

Number input component #78

merged 7 commits into from
Dec 28, 2023

Conversation

kkosiorowska
Copy link
Contributor

@kkosiorowska kkosiorowska commented Dec 15, 2023

This PR adds a custom component for Number input. To display large numbers with decimal separators, it was decided to use the react-number-format library. This library is also used in the Threshold Dashboard. Changes implemented:

  • Added a NumberFormatInput component
  • Created a special component for token balance input

At the moment, the changes only relate to input. Adding the form and using the input will be done later.

As the input has a max button, we need to convert the number very precisely. This is why we use the fixedPointNumberToString method. The solution is based on the already existing formatting system in Taho.

Testing

Let's use a patch file to test. Use the following file: input-tests.patch

git apply input-tests.patch

@kkosiorowska kkosiorowska added this to the MVP milestone Dec 15, 2023
@kkosiorowska kkosiorowska self-assigned this Dec 15, 2023
@kkosiorowska kkosiorowska marked this pull request as ready for review December 19, 2023 08:56
@nkuba nkuba requested a review from r-czajkowski December 19, 2023 12:46
Comment on lines +123 to +135
<Box __css={styles.labelContainer}>
Amount
<Box __css={styles.balanceContainer}>
<Box as="span" __css={styles.balance}>
Balance
</Box>
<CurrencyBalance
size={size === "lg" ? "md" : "sm"}
amount={tokenBalance}
currencyType={currencyType}
/>
</Box>
</Box>
Copy link
Contributor Author

Choose a reason for hiding this comment

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

@r-czajkowski I still don't quite sure how best to style this part. Let me know if you have any better ideas.

@r-czajkowski r-czajkowski merged commit 8f1c189 into main Dec 28, 2023
11 checks passed
@r-czajkowski r-czajkowski deleted the custom-input branch December 28, 2023 14:48
@kkosiorowska kkosiorowska mentioned this pull request Jan 2, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants