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.
|
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.
|
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}`);
|
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