tradingstrategy-ai / frontend

Web frontend for TradingStrategy.ai

Trading Strategy protocol website

A frontend for Trading Strategy protocol.

Install NPM dependencies

Node >=20.11 required.

npm install

Install and build submodules

frontend has one submodule dependency installed under deps:

• fonts - optional licensed fonts (see static/fonts5.css and src/lib/components/css/typography.css)

Install submodules

If you have access to the private tradingstrategy-ai/fonts, initialize and install submodules:

git submodule update --init --recursive

Building submodule dependencies

Once the submodule has been installed, a build step needs to be run in order to have a fully working environment. Run the following script:

bash scripts/build-deps.sh

Running in local dev

Environment variables required by the app are maintained in a .env file. Read about about magic VITE envs.

Start the SvelteKit development server:

npm run dev

Documentation

• Testing
• Running in production
• Doing page speed tests

Notes

Code Formatting Standards

We are using Prettier for code formatting. Extensions are available for most code editors / IDEs (see "Editor Support" on Prettier homepage).

If you prefer not to have your editor do automatic formatting, please run the following command and commit properly formatted code before pushing a PR:

npm run format

Our CI/CD pipeline runs the following chack on PRs or pushes to master:

npm run format:check

dependencies vs devDependencies

adapter-node will bundle devDependencies whereas dependencies must be installed when deploying to production.

frontend's Issues

Make charts zooming and panning to work

Currently, one cannot zoom and pan trading chart data properly.

We use ad hoc uPlot.js integration.

Explore how to panning and zooming would be easiest to implement

• To do it with uPlot.js
• To replace uPlot with some other open-source library
• To replace uPlot with TradingViews' JS library (not preferred)

Improve search result navigation

Problems

I noticed the following two navigation issues with search:

1. When clicking on a search result in either quick search or advanced search, using the normal browser conventions to open in a new tab (control-click or command-click) don't work.
2. On advanced search, after clicking through to a search result and then hitting the back button, the search reverts to the query value that was passed in from quick search rather than reflecting the most recent search

Solutions

1. use <a>tags instead of goto
2. use a Svelte store (or possibly pushState / query params) to "remember" the most recent query / filter settings

getaddrinfo: EAI_AGAIN again crashes the server-side rendering process

SvelteKit has an internal fetch hook that goes directly to the backend IP address, bypassing the public Internet.

It should be enabled, but I am seeing this in logs.

FetchError: request to https://tradingstrategy.ai/api/candles?pair_id=1656735&time_bucket=4h failed, reason: getaddrinfo EAI_AGAIN tradingstrategy.ai
    at ClientRequest.<anonymous> (file:///root/frontend/build/shims-eb608bdd.js:6246:11)
    at ClientRequest.emit (node:events:526:28)
    at TLSSocket.socketErrorListener (node:_http_client:442:9)
    at TLSSocket.emit (node:events:526:28)
    at emitErrorNT (node:internal/streams/destroy:157:8)
    at emitErrorCloseNT (node:internal/streams/destroy:122:3)
    at processTicksAndRejections (node:internal/process/task_queues:83:21) {
  type: 'system',
  errno: 'EAI_AGAIN',
  code: 'EAI_AGAIN',
  erroredSysCall: 'getaddrinfo'

Investigate why it tries to go through the public Internet. Might be SvelteKit version issue after upgrade.

Standardize code formatting

Goals

• standardize the code style conventions used in frontend
• keep it consistent with other Trading Strategy Svelte projects (e.g., trade-executor-frontend, design-system
• follow conventions that are standard in the Svelte / SvelteKit community (easier to introduce new developers with Svelte experience)
• automate it some developers don't need to think about it

Make price chart's quote currency switchable

At the moment, the quote price for the chart is always USD, the "native" price of the pair is converted to USD. For example:

We should add an option to switch between this mode and the native price. Some ideas:

• A dropdown near the end of the scale
• A button like "Display price in ..."

Token page

The token page is similar to the trading pair page but displays token information across all tracked trading pairs.

• List of trading pairs
• Volume weighted average price (VWAP)
• Total liquidity
• Total volume
• SvelteKit Route at /trading-view/[blockchain]/tokens/[token symbol slug]

Copy the page layout and structure from the trading pair page.

Each token is specific to a blockchain. Each token can have e multiple variants. E.g. multiple AAVE tokens can exist on Polygon as the result of using different Ethereum > Polygon bridge to port over the tokens. These tokens are not fungible with each other, as a bridge is hacked it means this particular instance of a token dies. The tokens will still have the same name and symbol information. We can later separate tokens from each other after we add support for different bridges.

Token symbol slug is the token symbol like AAVE lowercased to aave. As said, there can be multiple tokens for the same symbol. At the alpha stage, we choose the token with the highest trading pair count, as this can quickly be resolved at the backend without creating additional tables. Later we will change the resolution mechanism to be volume based.

This issue is for creating a skeleton page. After we add more backend endpoints, more data can be displayed on the token page. The skeleton page can be published as-is with minimal information.

Progressive task list to From easy to hard. For each open a new ticket and new PR:

• Add token slugs to /pairs endpoint data export and spec. Do not care about slug conflicts at the phase 1.
• Add links to tokens on trading pair pages
• Add token page URLs to Typesense search
• Update PairExplorer component and /pairs endpoint to support trading pair exploration filtered by token.
• Create a Svelte TokenPairExplorer component that can explore all the tokens on a blockchain page using /tokens backend endpoint
• Create backend period tasks to calculate VWAP, liquidity and volume data across trading pairs. Use DenormalisedTokenValue.
• Create a token logo endpoint that sources logos from an open-source repository.
• Add token slug resolver that supports multiple tokens and sorts out tokens by their volume, creating slugs like aave, aave-2, aave-3. Add a minimum tracking requirement. Can be only done after liquidity calculations are robust. See PairSlugAndEligibility and create a similar table.
• Create a sitemap.xml for tokens that includes only the tokens meeting the minimum tracking requirement

Integrate the website header in the Documentation sections

Currently, documentation comes from a separate statically generated site using Sphinx documentation tool. To give a more professional appearance, the documentation theming should be better integrated with the website. The first step would be to the website header (nav bar) appear on the documentation pages as it appears on the website.

• The documentation will be served as a statically generated site short-medium term
• Explore the options how to get nav bar from an (external) Svelte site to appearing a static HTML

For example:

• Create a route that only renders the nav bar
• This navbar is fetched to external HTML as a AJAX request and then cached in localStorage (the nav bar rarely changes so long cache times are ok)

The documentation is generated here:

https://github.com/tradingstrategy-ai/client/tree/master/docs

The main Sphinx template is here (uses Jinja):

https://github.com/tradingstrategy-ai/client/blob/master/docs/source/_templates/layout.html

Price label tweaking

For price labels, there are good, but we might make them a bit more novice-friendly. Can you please try the following:

• "Up more than 5%"
• "Up"
• "Down"
• "Down more than 5%"

This is less technical and has per cent ranges tweaked a bit for the more volatile ranges of cryptos

.

ChartIQ charts MVP

Summary

We currently use uPlot to display charts on the trading pair detail page. The goal of this epic is to replace uPlot with the ChartIQ chart library. We want to lay a foundation that we can build on with future enhancements, without losing any key current features.

Requirements

• #70
• #71
• #72
  • zooming and panning (should come "for free" with price/volume and liquidity charts)
• #75
• #73
• Link price/volume and liquidity charts (pan/zoom interactions)
• #74
• UI refinements

Make web3.js to work again

• Deprecate svelte-web3
• Make sure anything we use is lazily loaded only when needed
• Replace web3.js with ether.js?

Install / import ChartIQ

This is part of epic #69

Summary

ChartIQ is a proprietary library. Updates will be provided to Trading Strategy as a zip archive. It should be possible to (a) develop, build and deploy the frontend app with ChartIQ when it's available; (b) develop, build and deploy without ChartIQ when it is not available.

Requirements

• chartiq package is included when Trading Strategy org developer runs npm install locally
• chartiq package is included in Trading Strategy's automated builds
• Trading Strategy developer has a straightforward, documented path for chartiq upgrades
• a non-Trading Strategy developer can clone/fork our repo, run npm install, and get a working project that does not include chartiq

Recommended approach

1. host chartiq node packages using a github private repo
   1. create a new private repo tradingstrategy-ai / chartiq-dist
   2. unpack the downloaded chartiq library and push to this repo
   3. create a tag matching the chartiq version
2. install into frontend as optional dependency from private github URL
   1. add to frontend with: npm install --save-optional tradingstrategy.ai/chartiq-dist
   2. running npm install when authenticated to GH as member of tradingstrategy.ai org should cause chartiq-dist to be installed correctly
   3. running npm install when not authenticated to GH as member of tradingstrategy.ia org should cause chartiq-dist to be skipped
3. update GH action build process to support private repo install
   1. create a new SSH key-pair to use as deploy key (see details below)
   2. add the public key to chartiq-dist as a Deploy Key:
      • GH › chartiq-dist › Settings › Deploy Keys › Add deploy key
      • Title: frontend deploy key
      • Key: [ copy/paste the public key from 3. i. ]
   3. add the private key to frontend as a repo secret
      • GH › frontend › Settings › Secrets › Actions › New repository secret
      • Name: SSH_PRIVATE_KEY
      • Value: [ copy/paste the private key from 3. i. ]
   4. update GH action to use the SSH private key in npm install step (see details below)
   5. update Dockerfile to use the SSH private key during npm ci step (see details below)
4. dynamically import chartiq-dist within frontend code
   1. wrap dynamic import in try / catch
   2. import should succeed if library was successfully installed (2. ii.)
   3. import should fail if library was skipped (2. iii.); log error to console indicating that chartiq-dist is only available for licensed developers (within tradingstrategy.ai org)
   4. gracefully degrade experience (no chart) if chartiq-dist not available

Blog post on how to use Search feature for users

We have developer focused blog post. But we probably want to have one blog post for users as well after the search matures a bit and the token data becomes available.

Add pagination or infinite scroll to /blog

Update token search results to include liquidity and volume stats

https://github.com/tradingstrategy-ai/backend/pull/26 added two new fields to token info returned by the /tokens and /token/details API endpoints, namely liquidity_latest and volume_24h (both in USD). Token search results should reflect this.

The default quick search action on enter

Currently if you want to search something and hit enter it goes to the first result.

To repeat:

• Type in ETH-USDC on the quick search
• Hit enter

Expected result:

Long list of search results

Actual result:

Goes to the page of which search result description I did not have time to read.

If we follow Google UX, the hit of the enter should go to Advanced page and display the results there.

Style code examples in the blog

Make background white and add other necessary low hanging CSS enhancements.

https://tradingstrategy.ai/blog/world-fastest-token-search

Better loading experience for Datatables

Currently there is a little delay when Datatables data is populated form the server.

E.g.

https://tradingstrategy.ai/trading-view/exchanges

Make this gracefully. Some brainstormed options

• Skeleton loader within Datatables
• Spinner

remove uPlot

This is part of epic #69

Remove all traces of uPlot from codebase. Remove any related data transformations that are no longer needed.

Fix frontpage layout issue on iPad

Only affects iPad. Have not been able to reproduce on other devices.

Fix service-worker.js 404 error

Search link not shareable

Currently, you cannot share a link to the search results, because choices are not reflected in the URL.

This would be very useful for many use cases and would drive social traffic to the service.

Issues on backtesting page

https://tradingstrategy.ai/trading-view/backtesting

Earlier reported by a user, clicking on the Trading Strategy Python client tutorial link in the page will show error 404 instead of showing the documentation:

Another issue I found is "Download" links in the table below isn't disabled even if the API key is invalid:

Upgrade to node 16.x / npm 8.x

The current deployment target for frontend is node v14 / npm v6.

This is outdated – node v16 / npm v8 became the Active LTS on 2021-10-26.

node v16 includes many important updates, including:

• V8 upgrade to v9 (performance improvements)
• es2021 features (new String & Promise methods; logical assignment)
• native Apple Silicon support

npm v8 includes substantial upgrades in dependency management and performance over v6 (changes package-lock.json to lockfileVersion=2).

This is a low-risk upgrade. It will improve developer efficiency and decrease merge conflicts resulting from incompatible lockfileVersion=1 commits.

HUD for price/volume and liquidity charts

This is part of epic #69.

Details tbd.

Add pagination to blog roll

Currently we display fixed 25 entries.

It is good for now, but in long run we probably want to paginage the output.

Clear all filters UX tweaking

When none of the filters are selected, the default "Clear all filters" button is confusing

User (me) tries to press it.

This is because it is not obvious it is greyed out button. I suggest hiding it altogether when no filters are selected or change it to label "Select filters:" that then will change to "Clear filters" button if any of the filters are selected. Something along this lines.

All tokens on a blockchain listing broken

The "all tokens" listing is missing some features

• Should be sorted by default by liquidity
• Liquidity and volume column sort does not seem to work
• "binance" not translated in the breadrumbs

http://localhost:3000/trading-view/binance/tokens

Highlight Advanced search feature availability across the site

Add a link and information about advanced search at least the following pages

• Top tokens up https://tradingstrategy.ai/trading-view/top-list/daily-up
• Top tokens down https://tradingstrategy.ai/trading-view/top-list/daily-down
• The "service catalog" https://tradingstrategy.ai/trading-view

For any icons we have a have streamline subscription

https://www.streamlinehq.com/icons/streamline-freehand

Dealing with multichain exchanges on advanced search page

Currently, Sushiswap is deployed across different chains. Thus, you will get duplicate entries in the advanced search UI.

We need to somehow separate these entries.

Try search with term "sushi".

Display Trading pair change % also against its quote token

Currently we display trading pair change against the USD:

For trading, it would be beneficial also to display the change % against the quote token (BNB in this case).

We might need to do the backend research what would be needed to have this information available.

Implement Google Sitelinks search box

Link to token pages from trading pair pages

Add links to the token pages from trading pair pages

• Summary (symbol)
• Body text
• We no longer need to display the token address on the body text as now this information is available on the token page

Advanced search results show NaN price change % for tokens

Now that Typesense data includes additional attributes for tokens (volume, liquidity), our advanced search results displays these additional attributes for tokens (as previously shown for pairs). See example below.

The price change % is displayed as ▼NaN%. This should be blank (with no up/down indicator) if price_change_24h field is null.

Search result count missing

There is no label "Total X results" anywhere in the UI. Although this is displayed e.g. in Pair (8) it could be good add this just because people expect it and sometimes want to have a number to brag about.

Token block explorer links

Token pages should have a link (button) to the corresponding blockchain explorer, similar to trading pair pages have.

• Spec changes needed? The backend has a function ChainId.get_address_link() to produce the links

• Minor UI design needed (how/where to display button) - tagging @kenkunz

Top tokens by volume and liquidity page, top data section

To be discussed, so we can specify this more carefully.

Discuss how to create top tokens by volume page and a new website section for "top data"

• We currently have "top momentum" pages (up, down), as linked from the front page. We have now more data, so we can expand this easily.

• Create a separate site root section /top

• Move all top/bottom lists and charts there e.g. trading-view/top/daily-up, trading-view/top/daily-volume, trading-view/top/liquidity now

• In the future we are going we are also going to have stats not only for daily, but weekly, monthly and all-time

• Discuss raw lists vs. TypeSense usage

Currently, we have the reference stats from the oracle coming in soon:

========================================
Top 10 tokens by liquidity (USD):

  2_066_087_560.79  WBNB  (Wrapped BNB)
  2_013_449_984.04  WETH  (Wrapped Ether)
  1_837_002_319.30  BUSD  (BUSD Token)
  1_836_350_548.83  USDT  (Tether USD)
    374_369_920.50  USDC  (USD Coin)
    247_038_563.13  BTCB  (BTCB Token)
    232_452_794.82  ETH   (Ethereum Token)
    200_915_348.32  USDT  (Tether USD)
    181_718_608.93  USDC  (USD Coin (PoS))
    170_237_228.61  USDC  (USD Coin)

========================================
Top 10 tokens by 24h volume (USD):

    497_583_134.89  WBNB  (Wrapped BNB)
    384_133_350.54  USDT  (Tether USD)
    344_323_912.99  WETH  (Wrapped Ether)
    259_650_850.79  BUSD  (BUSD Token)
    132_002_649.17  USDC  (USD Coin)
     80_570_007.02  FIST  (FistToken)
     63_232_294.25  BSW   (Biswap)
     44_904_545.00  ASTO  (Altered State Machine Utility Token)
     43_925_426.92  USDT  (Tether USD)
     38_251_381.74  ETH   (Ethereum Token)

Time-interval control for trading pair charts

This is part of epic #69.

When user selects a time interval, charts update to display data based on the new interval. A single control should update both charts. Interval options include: 1m, 5m, 15m, 1h, 4h, 1d, 7d, 30d

If you navigate to the quick search field too fast it does not work

I noticed this in production and I could repeat on a local.

• Refresh the page
• Go to search field (1-2 seconds time to do it)
• Type in something
• The search does not seem to work or become activated even after a while. You can keep editing but the quick search list never pops up.

To fix you need

• Refresh the page
• Go to the search field "slow enough"

Not sure what could cause this, but might confuse some quick users.

macOS / FF.

I recorded a demostration here:

I also managed to cause a bug that displayed to quick search dropdowns at the same time by using backspace to clear the field and then start typing again. But this was much harder to repeat.

Add liquidity change sorting to PairExplorer

Now there are new sort keys for /pairs endpoint:

enum: [pair_id, volume, volume_30d, price_change_24h, liquidity, liquidity_change_abs_24h, liquidity_change_relative_24h]

• Make PairExplorer component liquidity change column also sortable using liquidity_change_relative_24h criteria

Make Ghost client to use Svelte fetch API

Currently, Ghost client does not use fetch from Svelte. This means that there are no render-side rendering benefits: Ghost API always issues out fetch on the client-side on the page load, because it does not know about the data fetched on the server-side. This should be visible on front page and blog roll by checking the console.

Investigate if this could be easily fixed. If not then let's not build a complex fix, because this is a very low impact issue ATM.

Liquidity and volume on token list and pages

Show

• Liquidity (latest)
• Volume 24h

On

• Token page
• Token list

Add an API key registration form

Add search to pair/token listing context

There are few trading pair (and in the future token) listings where a user would like to use a search.

• Currently we render these listings using a direct backend API call, which does not offer search. Making listing purely Typesense based could make sense in long term, but unlikely yet.
• Users still want to have search

Thus, we need to somehow be able to address this. One idea how to to do this would be

• Add a search box to relevant pages like https://tradingstrategy.ai/trading-view/ethereum https://tradingstrategy.ai/trading-view/binance/pancakeswap-v2
• The search box sits at the top of the listing
• The search box would only search the relevant context (a specific exchange, a specific blockchain)
• There would be a link to advanced search

Because this might be quite labour intensive task, we could start by simply offerin a link (button) that links to the advanced search page with the relevant filters prefilled.

E.g. If you click ”Search” on Binance smart chain page you get to Advanced search page with Binance smart chain selected as a blockchain.

Implement liquidity chart using ChartIQ

This is part of epic #69.

Details tbd.

Page load indicator has stopped working

There should be a page load indicator, a green progress bar at the top of the window if any Svelte internally routed page is loading up slowly.

Now this load indicator has disappeared, maybe something to do with SvelteKit internal changes. It does not appear anymore even if a page is loading slowly.

How to test

• Start the dev server locally
• Hit "Go to slow page" at the footer

• There should be a green progress bar at the top
• However, there is no progress bar

The page load indicator code is here.

Top list page across all chains

See the epic: #57

Create the following routes to render a top list of trading pairs/tokens with pagination:

• /top/trading-pair/volume/[daily|weekly|monthly|yearly|all-time] - /pairs endpoint, sorted
• /top/trading-pair/liquidity/[daily|weekly|monthly|yearly|all-time] -/pairs` endpoint, sorted
• /top/token/liquidity/[daily|weekly|monthly|yearly|all-time] -/tokens` endpoint, sorted
• /top/token/volume/daily|weekly|monthly|yearly|all-time] -/tokens` endpoint, sorted

Currently, we have only daily (24h) data generated for volume and liquidity. Thus, we first need to create a background job to generate weekly, monthly, yearly and all-time data.

Search navigation issue

How to reproduce:

1. go to any token pair page, for example https://tradingstrategy.ai/trading-view/ethereum/sushi/eth-wbtc
2. enter another pair into the search box in the page header, for example: bnb usdc
3. the page content changes except the chart content https://tradingstrategy.ai/trading-view/binance/pancakeswap-v2/bnb-usdc

Search end-to-end test coverage

Gracefully handle delays and errors when loading data table date

e.g. on page

https://tradingstrategy.ai/trading-view/ethereum/tokens/0xee4833ba7409711a6400f78300632717993ae9ef

Because the token is currently untracked, the backend API gives an error. However this error displayed as alert(), in very unfriendly and unprofessional manner.

https://tradingstrategy.ai/trading-view/ethereum/tokens/0xee4833ba7409711a6400f78300632717993ae9ef

The actual error is

Backend error: 422 {'json_body': {'error_id': 'LookupInputException', 'message': "Trading pairs for tokens ['0xee4833ba7409711a6400f78300632717993ae9ef'] exist, but do not have tracked data. See https://tradingstrategy.ai/docs/programming/tracking.html for more details."}}

implement price / volume chart using ChartIQ

This is part of epic #69.

Details tbd.