My positions: integration

[doliG]

close #208

[github-actions[bot]]

Please test this PR on: https://v2-staging-209-dot-fuji-306908.ey.r.appspot.com

[brozorec]

1. Make large numbers readable by formatting them according to locale

2. Not sure, if it will be handled in this PR, when we click on a row, it navigates to "Manage position"

[doliG]

Make large numbers readable by formatting them according to locale

Will do, although it's more in scope of the logic part but this way I won't forget

Not sure, if it will be handled in this PR, when we click on a row, it navigates to "Manage position"

Out of scope, do we have a ticket yet for the logic part ? 🤔

cf @brozorec

[Markoyw]

Hey @doliG

Feedback on #209 - My Position: https://www.figma.com/file/v53wiSwcL5DYynVL0z6L4s/Fuji---Working-File-(NEW)?node-id=3076%3A52420&t=dKvFigC3uMvukkmZ-1

[doliG]

Hey @Markoyw, I'm working on your feedbacks.

Copy change to header: Total Deposits / Total Debt / Available to Borrow / Positions at Risk

Actually we didn't plan the mobile version. My suggestion is to go with a side by side version of this metrics, i.e

But it's not perfect because we have 5 metrics. That's why I suggest to put "position at risk" into a warning box above or below the key metrics. For that we can use https://mui.com/material-ui/react-alert/#basic-alerts

Here's a rough draft of how it looks like:

Of course if it does not feel right we can go with another solution, but in any case I need to handle the mobile :)

[Markoyw]

Hey @doliG

I am thinking for the mobile design - we can perhaps leave the 'Positions at Risk' out for now. In any case, the user will still be able to view the liquidation price and close his position if required.

I am attaching the mobile design here

Figma link to the design: https://www.figma.com/file/v53wiSwcL5DYynVL0z6L4s/Fuji---Working-File-(NEW)?node-id=3095%3A55027&t=rjuor4XEOcsESTMh-1

Cc: @brozorec

[doliG]

@Markoyw Most of your return are fixed and I also implemented the mobile design. Can you recheck please ? Thanks :)

[Markoyw]

Hi @doliG

Looks good!

2 minor comments:

1. Change font to 'Inter'
2. Mobile design - to have padding on both sides at 16px for all screens

[doliG]

@Markoyw

1. done
2. done

I'm also merging this one, thanks :)

[Markoyw]

@doliG

Thanks Yome - looks good, all approved!