Futures refactor continued

[avclarke]

• Move futures positions, volumes data and cross margin account data to redux and sdk
• Move cross margin and isolated margin transfer actions to redux and sdk
• Create reusable polling hooks
• Fix balance updates, closes Kwenta/kwenta-private#246

Transaction pattern

Started to use a pattern where inside the action you set the transaction status but then a single monitor function sitting at the app level monitors the transaction and resolves the state. This enables us to react to transaction statuses in components while allowing the monitoring and resolution to be managed in a single place.

The action part looks like this

And then a single monitor hooks resolves the tx as seen here

Queries pattern

In the existing setup with the RefetchProvider it was handling app wide query management, which was nice for not having to worry about some data not being populated but resulted in a lot of unnecessary queries and network requests. So moving forward I’ve started to transition to the pages being responsible for kicking off the queries they need and any polling. I added some helpers for polling actions you can find here https://github.com/Kwenta/kwenta/blob/f1aab83c798520045fb44447ff501fb729eac822/state/hooks.ts

The polling hooks include:

• usePollWhenReady which will only start the polling once provider has been set, which prevents a premature fetch and error from the sdk of no provider.
• useStartPolling hook which returns a startPolling function allowing you more control over when you’d like polling to begin, for example in futures we need to wait for some other data and account / wallet info before kicking off the polling.

Then at the higher level I’ve created a hooks folder under states/futures which has a simple pollFuturesData that is currently being used in both the markets page and futures page. https://github.com/Kwenta/kwenta/blob/f1aab83c798520045fb44447ff501fb729eac822/state/futures/hooks.ts

I’ve also added some tracking (outside the component tree) within the polling hook to check if there are duplicate actions being polled, this might happen if a dev adds some polling within a component, which is also being handled by the parent page. If we get to this state it will print a warning in the console so we can easily be aware when this occurs and make sure we clean it up.

It's not a perfect pattern but it seems to work well so far. So the general pattern would be:

• Create a hooks file inside the state/<page> you want to fetch for
• Create a hook, e.g. usePollFuturesData which calls a polling hook passing the query action you need
• Call the hook on the page you want to fetch the data for

Other solutions I’ve been considering are:

• Implement query management at the global app level, similar to RefetchProvider but where each query is determined if it should run by an array of page names matched to the page from the router.
• Implement polling on the sdk and the app registers listeners to update state on changes (similar to Korede’s rates implementation). The sdk would only poll when there are attached listeners. This still requires logic on the app though to decide when a listener should be added and so was the reason for me keeping it all at the app level to begin with.

[vercel]

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

Name	Status	Preview	Updated
kwenta	✅ Ready (Inspect)	Visit Preview	Dec 12, 2022 at 7:43PM (UTC)

[Tburm]

Approving this, but note that I'm working a branch which will fix the duplicated testnet markets.

[Tburm]

@avclarke All is good other than one comment I left here with a suggestion. Can approve once we commit that.