Explain how to get TradingView charts (#50)
This commit is contained in:
parent
f8a6dc4ee9
commit
cd85aa2b76
17
README.md
17
README.md
|
@ -16,6 +16,23 @@ You may want to put these in local environment files (e.g. `.env.development.loc
|
|||
|
||||
NOTE: remember to re-build your app before deploying for your referral addresses to be reflected.
|
||||
|
||||
### Add Trading View charts
|
||||
|
||||
It is possible to add OHLCV candles built from on chain data using [Bonfida's API](https://docs.bonfida.com). Here is how to do it:
|
||||
|
||||
1. Get access to the [TradingView Charting Library](https://github.com/tradingview/charting_library/) repository. This is a **private repository** and it will **return a 404 if you don't have access to it**. To get access to the repository please refer to [TradingView's website](https://www.tradingview.com/HTML5-stock-forex-bitcoin-charting-library/)
|
||||
|
||||
2. Once you have access to the Charting Library repository:
|
||||
|
||||
- Copy `charting_library` folder from https://github.com/tradingview/charting_library/ to `/public` and to `/src` folders.
|
||||
- Copy `datafeeds` folder from https://github.com/tradingview/charting_library/ to `/public`.
|
||||
|
||||
3. Import `TVChartContainer` from `/src/components/TradingView` and add it to your `TradePage.tsx`. The TradingView widget will work out of the box using [Bonfida's](https://bonfida.com) datafeed.
|
||||
|
||||
<p align="center">
|
||||
<img height="300" src="https://i.imgur.com/UyFKmTv.png">
|
||||
</p>
|
||||
|
||||
---
|
||||
|
||||
See the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started) for other commands and options.
|
||||
|
|
|
@ -0,0 +1,4 @@
|
|||
.TVChartContainer {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
|
@ -0,0 +1,98 @@
|
|||
import * as React from 'react';
|
||||
import './index.css';
|
||||
import {
|
||||
widget,
|
||||
ChartingLibraryWidgetOptions,
|
||||
IChartingLibraryWidget,
|
||||
} from '../../charting_library'; // Make sure to follow step 1 of the README
|
||||
import { useMarket } from '../../utils/markets';
|
||||
import { BONFIDA_DATA_FEED } from '../../utils/bonfidaConnector';
|
||||
import { findTVMarketFromAddress } from '../../utils/tradingview';
|
||||
|
||||
// This is a basic example of how to create a TV widget
|
||||
// You can add more feature such as storing charts in localStorage
|
||||
|
||||
export interface ChartContainerProps {
|
||||
symbol: ChartingLibraryWidgetOptions['symbol'];
|
||||
interval: ChartingLibraryWidgetOptions['interval'];
|
||||
datafeedUrl: string;
|
||||
libraryPath: ChartingLibraryWidgetOptions['library_path'];
|
||||
chartsStorageUrl: ChartingLibraryWidgetOptions['charts_storage_url'];
|
||||
chartsStorageApiVersion: ChartingLibraryWidgetOptions['charts_storage_api_version'];
|
||||
clientId: ChartingLibraryWidgetOptions['client_id'];
|
||||
userId: ChartingLibraryWidgetOptions['user_id'];
|
||||
fullscreen: ChartingLibraryWidgetOptions['fullscreen'];
|
||||
autosize: ChartingLibraryWidgetOptions['autosize'];
|
||||
studiesOverrides: ChartingLibraryWidgetOptions['studies_overrides'];
|
||||
containerId: ChartingLibraryWidgetOptions['container_id'];
|
||||
theme: string;
|
||||
}
|
||||
|
||||
export interface ChartContainerState {}
|
||||
|
||||
export const TVChartContainer = () => {
|
||||
// @ts-ignore
|
||||
const defaultProps: ChartContainerProps = {
|
||||
symbol: 'BTC/USDC',
|
||||
interval: '60',
|
||||
theme: 'Dark',
|
||||
containerId: 'tv_chart_container',
|
||||
datafeedUrl: BONFIDA_DATA_FEED,
|
||||
libraryPath: '/charting_library/',
|
||||
fullscreen: false,
|
||||
autosize: true,
|
||||
studiesOverrides: {},
|
||||
};
|
||||
|
||||
const tvWidgetRef = React.useRef<IChartingLibraryWidget | null>(null);
|
||||
const { market } = useMarket();
|
||||
|
||||
React.useEffect(() => {
|
||||
const widgetOptions: ChartingLibraryWidgetOptions = {
|
||||
symbol: findTVMarketFromAddress(
|
||||
market?.address.toBase58() || '',
|
||||
) as string,
|
||||
// BEWARE: no trailing slash is expected in feed URL
|
||||
// tslint:disable-next-line:no-any
|
||||
datafeed: new (window as any).Datafeeds.UDFCompatibleDatafeed(
|
||||
defaultProps.datafeedUrl,
|
||||
),
|
||||
interval: defaultProps.interval as ChartingLibraryWidgetOptions['interval'],
|
||||
container_id: defaultProps.containerId as ChartingLibraryWidgetOptions['container_id'],
|
||||
library_path: defaultProps.libraryPath as string,
|
||||
locale: 'en',
|
||||
disabled_features: ['use_localstorage_for_settings'],
|
||||
enabled_features: ['study_templates'],
|
||||
load_last_chart: true,
|
||||
client_id: defaultProps.clientId,
|
||||
user_id: defaultProps.userId,
|
||||
fullscreen: defaultProps.fullscreen,
|
||||
autosize: defaultProps.autosize,
|
||||
studies_overrides: defaultProps.studiesOverrides,
|
||||
theme: 'Dark',
|
||||
};
|
||||
|
||||
const tvWidget = new widget(widgetOptions);
|
||||
tvWidgetRef.current = tvWidget;
|
||||
|
||||
tvWidget.onChartReady(() => {
|
||||
tvWidget.headerReady().then(() => {
|
||||
const button = tvWidget.createButton();
|
||||
button.setAttribute('title', 'Click to show a notification popup');
|
||||
button.classList.add('apply-common-tooltip');
|
||||
button.addEventListener('click', () =>
|
||||
tvWidget.showNoticeDialog({
|
||||
title: 'Notification',
|
||||
body: 'TradingView Charting Library API works correctly',
|
||||
callback: () => {
|
||||
console.log('It works!!');
|
||||
},
|
||||
}),
|
||||
);
|
||||
button.innerHTML = 'Check API';
|
||||
});
|
||||
});
|
||||
}, [market]);
|
||||
|
||||
return <div id={defaultProps.containerId} className="tradingview-chart" />;
|
||||
};
|
|
@ -22,3 +22,5 @@ export default class BonfidaApi {
|
|||
return BonfidaApi.get(`trades/address/${marketAddress}`);
|
||||
}
|
||||
}
|
||||
|
||||
export const BONFIDA_DATA_FEED = 'https://serum-api.bonfida.com/tv';
|
||||
|
|
|
@ -0,0 +1,10 @@
|
|||
import { USE_MARKETS } from './markets';
|
||||
|
||||
export const findTVMarketFromAddress = (marketAddressString: string) => {
|
||||
USE_MARKETS.forEach((market) => {
|
||||
if (market.address.toBase58() === marketAddressString) {
|
||||
return market.name;
|
||||
}
|
||||
});
|
||||
return 'SRM/USDC';
|
||||
};
|
Loading…
Reference in New Issue