feat: Spacing between numbers in modal

[Amirthananth]

Description

Add a space between numbers for every 3 digits and also support decimal values.

What type of PR is this? (check all applicable)

• [x] 💡 Feature
• [ ] 🐛 Bug Fix
• [ ] 📝 Documentation Update
• [ ] 🎨 Style
• [ ] 🧑‍💻 Code Refactor
• [ ] 🔥 Performance Improvements
• [ ] ✅ Test
• [ ] 🤖 Build
• [ ] 🔁 CI
• [ ] 📦 Chore (Release)
• [ ] ⏩ Revert

Related Tickets & Documents

Fixes #244

Mobile & Desktop Screenshots/Recordings

https://github.com/projectx-codehagen/Badget/assets/22556726/45bff131-c942-4503-9107-47fb7ab05f64

Steps to QA

1. Go to /dashboard
2. Click on Add Asset
3. Click on "Account" / "Asset"

Added to documentation?

• [ ] 📜 README.md
• [x] 🙅 no documentation needed

[optional] Are there any post-deployment tasks we need to perform?

[optional] What gif best describes this PR or how it makes you feel?

[vercel[bot]]

@Amirthananth is attempting to deploy a commit to the Salgsmaskin Team on Vercel.

A member of the Team first needs to authorize it.

[Amirthananth]

@Codehagen @ousszizou I've added the support for spaces between numbers, but I couldn't test it with the database as I still have some issues with setting up the DB locally. But anyway I tried to output it in the console and check the values and same is available in the recording.

Let me know if there are any changes required.

Thanks, Amirth

[ousszizou]

Thanks @Amirthananth for working on this feature! I have a suggestion (I know we should have mentioned this before in the issue): I propose we implement this functionality to allow for future locale-based formatting (e.g., French, US, Japanese). This way, users can see numbers in a way that's comfortable and common for them.

So I suggest to go with implementation like this:

Also I spotted a function duplicated formatNumberWithSpaces in the two files account-fields.tsx & investment-fields.tsx. To avoid future headaches, what if we make it reusable by throwing it in a utils file?

[Amirthananth]

@ousszizou , I was thinking about the same thing and in fact I commented in the issue about it.

But since the input box has to be a string in order to show the localized number format, we need to first know the local format right ? or are we going to keep a specific format as default (i.e, fr-FR).

If we are going to keep localized format in the input box, then we need to sanitize the input based on that format only. i.e, if the format is "fr-FR", then we should allow numbers and comma. If the format is "en-US", then we should allow numbers and dot.

I kinda feel this is not the right way to do it in the input box atleast. Maybe we can show a text below or above the input box in the desired format. What do you say ? (refer the screenshot attached below)

@Codehagen @ousszizou

[ousszizou]

If we are going to keep localized format in the input box, then we need to sanitize the input based on that format only. i.e, if the format is "fr-FR", then we should allow numbers and comma. If the format is "en-US", then we should allow numbers and dot.

You're right, we can simplify the process by not showing the localized format in the input. Instead, we can use a consistent format, like always using dots for decimal points, regardless of the locale (as the input works right now, it just accepts numbers & dot). This approach avoids the complexity of handling different input formats.

So we can go w/ ur suggestion "showing the format in somewhere else instead in the input itself", something like this:

[ousszizou]

@Codehagen Also I think it's better to change this label "Current Value" to something else like "Amount Value" / "Initial Amount value".

[Amirthananth]

Thanks for the confirmation @ousszizou . Current input type is number and it accepts dots to distinguish decimal values. So I think we can stick to it. I will just add the code to display the current value like in the screenshot you have attached.

@Codehagen if you confirm on changing the label text, I will make that modification as well.

[Codehagen]

Sounds good to me 👍

[Amirthananth]

@ousszizou / @Codehagen I've added the commit based on the discussion above. The below attached video is recording of the same.

https://github.com/projectx-codehagen/Badget/assets/22556726/a6eb235c-10c9-4b77-831a-7fdc9e2eaba3

[vercel[bot]]

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

Name	Status	Preview	Comments	Updated (UTC)
badget	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 21, 2024 4:47am