[WIP] adding Margin Trading Scaffolding

[dummytester123]

• No real notes yet. Just stubbing out the margin trading tab.

[dummytester123]

Wednesday Dec 23 Journal:

Experimented with a tabular concept. Wanted users to be able to create new positions AND see existing ones in one screen. It didn't quite work out - it'd be too noisy, but the concept led me to a really easy way to visualize your win/loss concept with a margin trade:

In my next commit I'm going to try to convert this to a flow similar to the one the Borrow tab has and convert the row-based new position form to a more vertical form and then smooth out the visualizer I built a bit.

[dummytester123]

Ok, moved the stuff I made into a new flow that involves choosing the currency you want to trade first, and THEN choosing the collateral in a second form similar to the borrow structure. Focused on just getting old form elements working again, and hooking into the lending reserve and collateral chooser logic borrow has. Got back to zero again and made a commit.

Going to now start pulling (copying) in bits and pieces of oyster-swap. I want to be able to figure out the margin and leverage requirements you can make based on your desired asset amount from the AMM.

[bartosz-lipinski]

This looks awesome. I like the simulation slider that represents price changes and allows users to see the impact on margin position.

[dummytester123]

Nothing big on the visual front, but I lobotomized and raided the older swap code base and merged a lot of the utilities and interface libraries into the lending platform to gain access to that sweet, sweet Pool logic. I wanted to make use of the nice price impact heuristic that we use that treats price changes as a kind of linear spring when you do swaps as an approximation on leverage limits to impose on people if they try to do big trades against our limited pools. I hooked all that up and the result is a simple error message string above. The logic is contained here:

In a separate leverage.ts hook file. It's a kind of rethink of price impact, but it's a similar heuristic. The idea is, if someone is going to really move our pools, assuming we're using them to do our margin trading, then we don't want to allow them to do large (49x) margins.

There is a LOT of stuff I ported over that we probably aren't using, so in a later commit I'll trim that out, but the main thrust of moving a lot of this work over was just to get this validation. If I don't use anything else as I finish, then I'll trim it out later. Often things get messy when merging repositories so I err on the side of more rather than less, porting over entire files and then trimming at the end. I think that swap and lending maybe ought to be a single platform anyway. I also took care to update the "concepts" that were clearly overlapping as I ported them over from swap, as it seems clear the original author refactored those concepts when writing lending later on (ie going from uint to PublicKey getters, etc).

EDIT: Oh, also this form is completely hooked up for real. The collateral selector is real, and it's using all real user data. Nothing on it is fake at all presently. This is not scaffolding in any way anymore :)

Next up, I'm going to bring in chartjs for some more visual magic and clean up this create form.

[dummytester123]

In tonight's update, I add the final piece of the puzzle to make this "new long trade" form look great:

It's a React-friendly version of the functionality from the Fulcrum trading platform. I'll of course add a credit link once I'm done. I had to rewrite most of their code to make it work with ES6, but the concept is still the same. Now that all the "stuff" is on the page I'm going to re-arrange the elements and add window dressing to make this form look a lot nicer tomorrow.

[bartosz-lipinski]

Form looks awesome, even better than I would expect at this stage.

Early feedback that I noticed:

1. Profit/loss would be good to express in percentage change of collateral and cap it at -100% (e.g. at 5x levreage -20% move will trigger liquidation)
2. Collateral should be expressed in collateral tokens
3. Chart is a bit jumpy when you move percentage slider
4. I would remove 5% stops on the slider and just have continuous steps wit stops (-100, 0, 100)
5. Set initial value of the slider to +10% that will showcase chart better
6. For margin trading table I think it would look nice to have 2 rows per token (1 for long and 1 for short)

[bartosz-lipinski]

for input it might be worth just lifting input from swap:

1st input is your collateral and amount that you have. (somewhere next to it maybe add toggles for multiplier)
2nd input is your target position.

that way the UI would be very similar to swap and easy for users to comprehend.

[dummytester123]

Roger that @bartosz-lipinski will take your feedback into account!

[dummytester123]

I think I'm getting close to a good spot to hand this back off to you guys.

Please take a look at the code, I think it's in a pretty decent spot. Let's talk about feature flags so that we can merge this safely, and what else you'd like to see done here. This has deviated somewhat from the original task - it really isn't scaffolding for an entire margin trading platform now, it actually turned into a code base merger + a major flow build out of initiating a trade (With all the magic hook ups) in a margin trading platform. I think that although the mission changed, the output is still quite worthwhile.

I can probably do a few more touch ups here and there (like box alignments, etc), and there are some merge conflicts that need resolving, will get to that tomorrow when I have a chance. Thanks!

[bartosz-lipinski]

This is awesome work, thanks a lot. I resolved merge conflicts and I am going to merge it to master.