Currently we display the same metadata on all pages which isn't great for SEO and provides no hints to users who keep multiple 0x Tracker tabs open. Metadata should be configured on a per-page basis, react-helmet would be a good choice for implementing this.

https://github.com/nfl/react-helmet

Description

Fills created by the v3 exchange contract will have a fees property rather than makerFee and takerFee properties. This means the existing fields on fill pages will display empty due to no data being returned by the API for them.

Fill pages will need to be updated to ensure the fields are removed if no data is returned for them by the API. Support for the fees field will be added to replace them in issue #675

Currently there are no error boundaries in the application. This means any error within the React component tree will unmount the entire application, leaving the user with a blank screen.

Error boundaries should be implemented in the following components,

• Application root (src/index.js)
• AppLayout, surrounding the children
• Every chart component

Each error boundary should display a message relevant to the type of component. For example:

• There was a problem loading the page, please reload or come back later.
• There was a problem loading this chart, please try again or come back later.

Each error boundary should provide an option for reloading which re-attempts mounting of the wrapped component.

Description

React hot loader has received hooks support since it was configured on this project. It takes a bit of additional configuration to work however.

Follow the instructions in https://github.com/gaearon/react-hot-loader#hot-loaderreact-dom to add support and improve developer experience.

It would be nice if the Canadian Dollar was a supported currency option <3

Some relayers in the current top 5 - e.g. DDEX, Paradex, possibly STAR BIT - act as a middle-man between parties in trades, creating an order with themselves to match both sides (on-chain).

For example, here is Paradex:

• taking my side of the order;
• passing it along to the other side.

(Fee recipient is set to 0x00..00.)

This was a single trade where an equivalent of ~71.975 USD changed hands, but the two fills contribute ~143.95 USD to Paradex's volume ticker.

Paradex is (probably) doing this to lift the requirement of maker needing unwrapped ether; and also to have a tighter control on transaction fees - both sides need only provide a signed message.

In the "Recent Fills" list, these fills (understandably) appear in pairs.

Here's an example of a fill via RadarRelay, which doesn't seem to be doing this (at least yet). Sides are matched atomically, fee recipient is set to RR's account address.

Or is this operational difference covered in 0xtracker, and I simply can't find it?..

Summary

Before adding protocol version charts to the site there will need to be somewhere to display them. This will be achieved by introducing a network overview page. The network overview page will be designed to pack many more charts than the homepage (which is focused on key insights).

Requirements

Introduce a network overview page which lets users see an overview of network activity for a customisable time period. This page should include:

• Title: Network Overview
• URL: /overview
• Time Period Filter: The same filter used on tokens, relayers etc. pages
• Stats Widgets: Fill Volume, Trade Volume, Fill Count, Trade Count
• Charts: Fill Volume, Fill Count, Top Tokens, Top Relayers

The page should look very similar to the homepage with the key difference being that users can customise an overall time period and there will be room for additional charts.

Hi 0x-tracker team!

We released a 0x based dex today at: https://dex.verisafe.io/#/erc20

What are the steps to add VeriSafe token and relay to the tracker? I could do a pull request or leave here all the data needed. Relayer is at this fee recipient address:
https://0xtracker.com/search?q=0x5265bde27f57e738be6c1f6ab3544e82cdc92a8f
VSF token: https://etherscan.io/token/0xac9ce326e95f51b5005e9fe1dd8085a01f18450c

Description

Wire up the existing TradersFilters component on the traders page, allowing users to filter traders by type. Additionally, remove the NoUnusedFiles config related to the TradersFilters component.

Description

The v3 exchange contract update will introduce a more complex fees data structure which will likely be difficult to support initially. Because of this there may be a period where the fees charts are actually incorrect.

The fee charts provide little value at the moment because so few fees are being collected by relayers. Removing the charts until better support can be built will therefore not be a problem.

Description

0x Tracker fetches new data from the API every 30 seconds even when the tab is inactive. This creates lots of unnecessary API requests, increasing bandwidth usage and obscuring usage analytics.

A Page Visibility API is available which can help prevent these unnecessary requests. The app should subscribe to visibility changes and:

• Stop reloading when hidden
• Start reloading when visible
• Immediately force a reload when visible

On registry https://registry.npmjs.org/, the "latest" version (v2.2.3) of dependency loadable-components has the following deprecation notice:

Please use @loadable/component

Marking the latest version of an npm package as deprecated results in the entire package being considered deprecated, so contact the package author you think this is a mistake.

Affected package file(s): package.json

If you don't care about this, you can close this issue and not be warned about loadable-components's deprecation again. If you would like to completely disable all future deprecation warnings then add the following to your config:

"suppressNotifications": ["deprecationWarningIssues"]

Hey the token names for my tokens are displaying wrong:
https://0xtracker.com/tokens/0x3a1343a3ca3c32a69b79ae82e8a9a71c1293c566 - should be "Onyx S&P 500"
https://0xtracker.com/tokens/0xffa52dce6eb5695436be96ca9b7df63382e4c34d - should be "Onyx S&P 500 Short"

I also have icons for my tokens:
https://0xtracker.com/tokens/0x7c0afd49d40ec308d49e2926e5c99b037d54ee7e - https://onyx.to/etherscan/USD.png
https://0xtracker.com/tokens/0x3a1343a3ca3c32a69b79ae82e8a9a71c1293c566 - https://onyx.to/etherscan/SPV.png
https://0xtracker.com/tokens/0xffa52dce6eb5695436be96ca9b7df63382e4c34d - https://onyx.to/etherscan/SPVS.png

Let me know if you have any questions :)

A filters UI should be built which allows for filtering by the following:

• time period / date range
• status
• relayer
• token
• protocolVersion (1, 2, 3)
• value (from/to)

Inspiration for the UI should be taken from the tokens page.

Selected filters should be added to the querystring to be handled by the filtering functionality being introduced by #767.

Dependencies

#767
#766
#768
0xTracker/0x-tracker-api#309
0xTracker/0x-tracker-api#310

Description

The V3 exchange contract will introduce a networkFeePaid which is being exposed via a protocolFee field on the fill endpoint. This fee should be displayed on the fill page for V3 fills in both ETH and USD terms.

Hi Team,

I am facing the following issue while doing the code setup. I have ran the following commands in my terminal npm install and npm run start

Error: val is not a non-empty string or a valid number. val=undefined
./node_modules/ms/index.js.module.exports
./node_modules/ms/index.js:34
setTimer
./src/features/auto-reload/configure.js:10
7 | timer = setTimeout(() => {
8 | store.dispatch.autoReload.trigger();
9 | setTimer(store);

10 | }, ms(process.env.REACT_APP_AUTO_RELOAD_INTERVAL));
11 | };
12 |

Could you please help.

Description

The V3 exchange contract will introduce the potential for much more complex fee taking scenarios. Supporting these in the fills table will be difficult so this column should be removed until a better solution (such as a localised total fee) is built.

Most existing fills actually have zero fees associated with them anyway so this is likely to have little affect on users.

Additional querystring parameters should be added to the fills page for filtering fills by value. Additional parameters required are:

• valueFrom
• valueTo

Dependencies

0xTracker/0x-tracker-api#308

What is the process for adding a relayer to 0x tracker? Thanks!

Description

The contrast between active and inactive tabs in the ChartsContainer component isn't strong enough. The contrast should be increased so that users can easily see at a glance which chart is currently displayed.

# Description

Following links from the top relayers chart always goes to https://0xtracker.com/relayers/undefined which is a 404.

A more complex time picker control will need to be built to support searching over fills. The time picker will provide the usual "last 24 hours", "last week" etc. options but will also provide the option to manually select a date range.

The control can be implemented as a ComplexTimePeriodSelector which would be used instead of the existing TimePeriodSelector when the option to choose a custom date range is available. The ComplexTimePeriodSelector would display the selected period and launch a ComplexTimePeriodSelectorDialog from which the user can change their selection.

Notes

Can be implemented using:
http://react-day-picker.js.org/

Inspiration for design:

Description

The API will begin exposing a fees field on all v3 fills to support the new fee structure in the v3 exchange contract. This field should be consumed on fill pages so that users can understand what fees were charged for any given v3 fill.

Notes

Since the fees field structure will be similar to the assets field it should be possible to build a similar UI to the assets list. Potentially components could be reused to make this possible.

Description

Add an active traders stat widget to the homepage which allows users to understand the number of active traders (makers or takers) in the last 24 hours.

To make room for the new widget, "fill volume" will need to be removed. The "fill count" widget should be replaced with a "trade count" widget. This means there will be "trade volume", "trade count", "active traders", "zrx price" widgets in that order.

Problem:
Since the data has high variance on a daily basis it's hard to visualize growth or trends.

Solution:

• Having the option to show the same chart but with weekly aggregated data would benefit user experience.
• Use bar charts instead of area charts

On the homepage it's possible to switch between tabs in the chart containers. The selection should be persisted across sessions to accommodate users who prefer a different set of defaults.

I'd recommend implementing via the preferences model which already gets persisted using redux-persist.

Description

Update the top relayers chart font to be consistent with other charts on the site.

The fills page at https://0xtracker.com/fills would be much more useful to people interested in exploring the data set if there were filters available.

A good set of initial filters would be:

• Relayer(s)
• Protocol Version
• Token(s)
• Date Range

The API will need updating to support these options when fetching fills before this can be implemented.

Design Inspiration

On registry https://registry.npmjs.org, the "latest" version (v2.2.3) of dependency loadable-components has the following deprecation notice:

Please use @loadable/component

Marking the latest version of an npm package as deprecated results in the entire package being considered deprecated, so contact the package author you think this is a mistake.

Please take the actions necessary to rename or substitute this deprecated package and commit to your base branch. If you wish to ignore this deprecation warning and continue using loadable-components as-is, please add it to your ignoreDeps array in Renovate config before closing this issue, otherwise another issue will be recreated the next time Renovate runs.

Affected package file(s): package.json

The fills page should have the ability to filter fills by parameters passed in the querystring. These new parameters can then be used to build a filter UI on the fills page.

Parameters to be added:

• dateFrom
• dateTo
• status
• protocolVersion
• token
• relayer

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: undefined

Video:
https://www.dropbox.com/s/5nzcj68ywxqr3bd/Desktop%202020.08.04%20-%2016.39.13.01.mp4?dl=0

Environment:
Firefox 79/80

The sidebar has an unintended horizontal scrollbar on a desktop.

Environment:

• Chrome 84, Firefox 79/80