Add PairInfo tab

[saidam90]

solves #432

Added a tab for PairInfo.

[cloudflare-workers-and-pages]

Deploying dexter with    Cloudflare Pages

Latest commit:	62bbf24
Status:	✅  Deploy successful!
Preview URL:	https://3c5f3d3e.dexter-1we.pages.dev
Branch Preview URL:	https://show-resource-addresses.dexter-1we.pages.dev

View logs

[dcts]

Looks great overall!

Some improvement proposals:

1. Can you hide the candle timeselection whenever the pair info is selected?

2. Is it possible to always keep the tabs next to each other, and instead wrap the candle timeframe selection?

[dcts]

Some more improvements:

3. The two coin boxes should both take up exactly 50% of the full space, to align with the orderrInput and orderBook components. Currently left box it too small for viewport width of 740px, and for 840px viewportwidth the right box is too small. I think you can just add a "flex-grow" on both elements, but probably will need to fix also oversizing in case the content is too big.

4. I think to be consistent, all those elements marked red should have the same bottom margin. I suggest mb-1 for all those elements (maybe you'll need to use !mb-1 for <p> elements.

5. Please use the shortenString function to display a shorter version of the addresses, I suggest to use 20 for showEnd and to set showStart in a way that will show "resource..." or "component...", so either 8 or 9. This is a pattern shared among all crypto space, as people usually check the last few characters of an address.

6. Can you add px-2 to both nav elements (Price chart + Pair info) to space out the tabs a bit?

7. Not neccesarily needed, but when copying it would be awesome if the user would get a feedback, something similar to this (found here)

[dcts]

Amazing! Great work with the refactor and all the changes made!

[dcts]

🎉