Explain how to get TradingView charts (#50)

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.

src/components/TradingView/index.css

@@ -0,0 +1,4 @@
+.TVChartContainer {
+  height: 100%;
+  width: 100%;
+}

src/components/TradingView/index.tsx

@@ -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" />;
+};

src/utils/bonfidaConnector.tsx

@@ -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';

src/utils/tradingview.tsx

@@ -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';
+};