Bug: Fix tiny token amounts

[murderteeth]

When showing token amounts Seafood currently rounds out tokens that are very small against usd. For example Seafood shows 0.00 assets for this USDR vault when the correct value us 0.00000806.

https://seafood.yearn.watch/vault/0x531fDb1C8429F404116932226D487db94471C4b7

Update Seafood to work like this instead:

Tasks

• Update formatNumber to include compact forms for numbers less than zero using greek si units for milli, micro, nano, and pico. For numbers greater than zero change the logic to use an uppercase unit. For numbers less than zero use lowercase. Here's formatNumber: https://github.com/yearn/seafood/blob/9d9645417d823fab231ffcb94fb0535a76b9d96d/src/utils/utils.js#L38

• Add tests here to demonstrate the new formats work: https://github.com/yearn/seafood/blob/main/src/utils/utils.test.js

• Update the Tokens component to support hover and click features. Use a localstorage value to store the user's current preference (unclicked vs clicked, ie compact vs expanded): https://github.com/yearn/seafood/blob/9d9645417d823fab231ffcb94fb0535a76b9d96d/src/components/controls/Fields.tsx#L80

[heysourin]

Hi, I see here are two different tasks added inside one single issue.

1. Fix the decimals
2. Fix update and hover Am I right?

[murderteeth]

Hi @heysourin! Yes, you are correct

[udhaykumarbala]

Hi @murderteeth, The formatNumber function already uses "m" to represent million. now the "milli" also has same character. can we change the million to "M"?

[murderteeth]

Good catch @udhaykumarbala. Yes, lets change the logic so that numbers greater than zero all use uppercase and all numbers less than zero use lowercase. And let me know if you'd like me to assign this to you, thank you!

[Hari-Bombon]

@murderteeth Hello! I'm excited to start my journey in open source contribution as a beginner and learn from experienced developers while making meaningful contributions to projects. Tech stack - reactjs , solidity, javascript