tradingstrategy-ai / frontend Goto Github PK
View Code? Open in Web Editor NEWWeb frontend for TradingStrategy.ai
Home Page: https://tradingstrategy.ai
Web frontend for TradingStrategy.ai
Home Page: https://tradingstrategy.ai
I noticed the following two navigation issues with search:
<a>
tags instead of goto
pushState
/ query params) to "remember" the most recent query / filter settingse.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."}}
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.
This is part of epic #69
Remove all traces of uPlot from codebase. Remove any related data transformations that are no longer needed.
Currently if you want to search something and hit enter it goes to the first result.
To repeat:
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.
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
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.
How to reproduce:
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.
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
.
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)
I noticed this in production and I could repeat on a local.
To fix you need
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.
This is part of epic #69.
Details tbd.
The token page is similar to the trading pair page but displays token information across all tracked trading pairs.
/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:
/pairs
endpoint data export and spec. Do not care about slug conflicts at the phase 1.PairExplorer
component and /pairs
endpoint to support trading pair exploration filtered by token.TokenPairExplorer
component that can explore all the tokens on a blockchain page using /tokens
backend endpointDenormalisedTokenValue
.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.This is part of epic #69.
Details tbd.
This is part of epic #69
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.
chartiq
package is included when Trading Strategy org developer runs npm install
locallychartiq
package is included in Trading Strategy's automated buildschartiq
upgradesnpm install
, and get a working project that does not include chartiq
chartiq
node packages using a github private repo
tradingstrategy-ai / chartiq-dist
chartiq
library and push to this repochartiq
versionfrontend
as optional dependency from private github URL
frontend
with: npm install --save-optional tradingstrategy.ai/chartiq-dist
npm install
when authenticated to GH as member of tradingstrategy.ai org should cause chartiq-dist
to be installed correctlynpm install
when not authenticated to GH as member of tradingstrategy.ia org should cause chartiq-dist
to be skippedchartiq-dist
as a Deploy Key:
chartiq-dist
› Settings › Deploy Keys › Add deploy keyfrontend
as a repo secret
frontend
› Settings › Secrets › Actions › New repository secretSSH_PRIVATE_KEY
npm install
step (see details below)npm ci
step (see details below)chartiq-dist
within frontend
code
try / catch
chartiq-dist
is only available for licensed developers (within tradingstrategy.ai org)chartiq-dist
not availablefrontend
trade-executor-frontend
, design-system
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.
For example:
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
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, sortedCurrently, 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.
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
This is part of epic #69.
Details tbd.
Add a link and information about advanced search at least the following pages
For any icons we have a have streamline subscription
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:
Make background white and add other necessary low hanging CSS enhancements.
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.
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
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
Currently we display fixed 25 entries.
It is good for now, but in long run we probably want to paginage the output.
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
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)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.
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 "all tokens" listing is missing some features
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.
There are few trading pair (and in the future token) listings where a user would like to use a search.
Thus, we need to somehow be able to address this. One idea how to to do this would be
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.
Show
On
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.