search

0xProject / 0x-launch-kit-frontend

Apache License 2.0
114 stars 208 forks source link

Transactions estimations in notifications #191

Closed fvictorio closed 5 years ago

fvictorio commented 5 years ago

Part of #180.

This PR shows the estimated time of transactions below the associated notifications. This is only done in notifications that can have a "pending" state. Right now those are the cancel order notifications and the market buy/sell notifications.

You should probably test this in Kovan, since the auto-mining in ganache makes this impossible to check.

Implementation

I added a new gasInfo value to the blockchain state. This has both the gas price to use and the estimated mining time for a transaction using that gas price. Right now those values are hardcoded; we need to obtain them (regularly, or before each transaction) in a different PR using the Eth Gas Station API.

The most important part of the logic is in the PendingTime component. This component is rendered inside a Interval component, that does two things: it re-renders its content after a given time, and it passes the current time to a render prop. This is done to update the countdown each second. The now value is injected to make the component testable.

I also removed the active state in notifications, and used pending instead, since they were overlapping. I should have made that change in a separate commit. Sorry about that.

I also fixed a small issue: we weren't waiting for the "cancel order" transaction to be mined before updating the orders (see 0bc44c2).

fvictorio commented 5 years ago

Oh, thanks, that must be related to the Interval component. I'll check it out.

fvictorio commented 5 years ago

@mariano-aguero Clear your local storage.

fvictorio commented 5 years ago

I got this warning once the transaction finish

Fixed. It turned out to be harder than I was expecting. The problem was not the Interval component, but the NotificationItem, that makes a setState when the promise resolves. If the notifications dropdown is closed, the item is unmounted, but the then of the promise is still "alive".

I had to use a cancelable promise (taken from here, but I added some typing), which is a little overkill, but I couldn't think of another solution (at least locally).