Merge pull request #1831 from IndexCoop/feat/tradingview-advanced-chart

feat: TradingView Advanced Chart

Author: 0xonramp

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "public/tradingview-chart"]
+	path = public/tradingview-chart
+	url = https://github.com/IndexCoop/tradingview-chart.git

public/tradingview-chart

@@ -6,7 +6,7 @@ export function LeverageFeedbackButton() {
   return (
     <PopupButton
       id='Ns10DhMF'
-      className='text-ic-black bg-ic-gray-700 hover:bg-ic-gray-500 h-12 w-full rounded-lg py-2.5 font-bold'
+      className='text-ic-black bg-ic-gray-700 hover:bg-ic-gray-500 hidden h-12 w-full rounded-lg py-2.5 font-bold lg:block'
       tracking={surveyTracking}
     >
       Give us your feedback!

src/app/leverage/components/leverage-feedback-button.tsx

@@ -1,16 +1,30 @@
-import { LeveragePanelDesktop } from '@/app/leverage/components/leverage-panel/leverage-panel-desktop'
-import { LeveragePanelMobile } from '@/app/leverage/components/leverage-panel/leverage-panel-mobile'
-import { Token } from '@/constants/tokens'
+import { Suspense } from 'react'
 
-type Props = {
-  indexToken: Token
-}
+import { LeverageFeedbackButton } from '@/app/leverage/components/leverage-feedback-button'
+import { LeverageWidget } from '@/app/leverage/components/leverage-widget'
+import PortfolioWidget from '@/app/leverage/components/portfolio-widget/portfolio-widget'
+import { TradingViewChart } from '@/app/leverage/components/trading-view-chart'
 
-export function LeveragePanel({ indexToken }: Props) {
+export function LeveragePanel() {
   return (
-    <>
-      <LeveragePanelMobile indexToken={indexToken} />
-      <LeveragePanelDesktop indexToken={indexToken} />
-    </>
+    <div className='flex flex-col gap-4 lg:h-[630px] lg:flex-row'>
+      <div className='xs:h-[442px] aspect-square w-full lg:flex lg:aspect-auto lg:basis-2/3 lg:flex-col lg:gap-4'>
+        <div className='relative h-full w-full'>
+          <TradingViewChart />
+          <div className='hidden lg:block lg:pt-4'>
+            <PortfolioWidget />
+          </div>
+        </div>
+      </div>
+      <div className='flex w-full lg:w-auto lg:basis-1/3 lg:flex-col lg:gap-4'>
+        <Suspense>
+          <LeverageWidget />
+        </Suspense>
+        <LeverageFeedbackButton />
+      </div>
+      <div className='w-full lg:hidden'>
+        <PortfolioWidget />
+      </div>
+    </div>
   )
 }

src/app/leverage/components/leverage-panel/index.tsx

@@ -103,7 +103,7 @@ export function LeverageWidget() {
 
   return (
     <div
-      className='leverage-widget flex flex-col gap-4 rounded-lg px-4 pb-5 pt-4'
+      className='leverage-widget flex w-full flex-col gap-4 rounded-lg px-4 pb-5 pt-4'
       id='close-position-scroll'
     >
       <BuySellSelector isMinting={isMinting} onClick={toggleIsMinting} />

src/app/leverage/components/leverage-panel/leverage-panel-desktop.tsx

@@ -0,0 +1,93 @@
+import { useEffect, useRef, useState } from 'react'
+
+import { useLeverageToken } from '@/app/leverage/provider'
+// eslint-disable-next-line import/order
+import datafeed from '@/app/leverage/utils/datafeed'
+import {
+  type ChartingLibraryWidgetOptions,
+  type IChartingLibraryWidget,
+  type ResolutionString,
+  widget,
+} from '~/tradingview-chart/charting_library'
+
+const WIDGET_INTERVAL = '1D' as ResolutionString
+
+export const TradingViewChartContainer = () => {
+  const { market } = useLeverageToken()
+  const chartContainerRef =
+    useRef<HTMLDivElement>() as React.MutableRefObject<HTMLInputElement>
+  const [tvWidget, setTvWidget] = useState<IChartingLibraryWidget | null>(null)
+
+  useEffect(() => {
+    const widgetOptions: ChartingLibraryWidgetOptions = {
+      datafeed,
+      debug: false,
+      symbol: 'ETHUSD',
+      interval: WIDGET_INTERVAL,
+      container: chartContainerRef.current,
+      library_path: '/tradingview-chart/charting_library/',
+      locale: 'en',
+      disabled_features: [
+        'left_toolbar',
+        'header_saveload',
+        'header_symbol_search',
+      ],
+      client_id: 'indexcoop',
+      fullscreen: false,
+      autosize: true,
+      theme: 'dark',
+      timezone: 'Etc/UTC',
+      overrides: {
+        // TODO: background doesn't appear to work
+        'paneProperties.background': '#0F1717',
+        'paneProperties.backgroundType': 'solid',
+      },
+    }
+
+    const tvWidget = new widget(widgetOptions)
+    tvWidget.onChartReady(() => {
+      setTvWidget(tvWidget)
+    })
+
+    return () => {
+      tvWidget.remove()
+    }
+  }, [])
+
+  useEffect(() => {
+    if (!tvWidget) return
+
+    let symbol = null
+    switch (market) {
+      case 'BTC / USD':
+        symbol = 'BTCUSD'
+        break
+      case 'ETH / USD':
+        symbol = 'ETHUSD'
+        break
+      case 'SOL / USD':
+        symbol = 'SOLUSD'
+        break
+      case 'SUI / USD':
+        symbol = 'SUIUSD'
+        break
+      case 'BTC / ETH':
+        symbol = 'BTCETH'
+        break
+      case 'ETH / BTC':
+        symbol = 'ETHBTC'
+        break
+    }
+
+    if (symbol && tvWidget) {
+      tvWidget.setSymbol(symbol, WIDGET_INTERVAL, () => {})
+    }
+  }, [market, tvWidget])
+
+  return (
+    <div
+      ref={chartContainerRef}
+      className='h-full w-full overflow-hidden rounded-lg'
+    />
+  )
+}

src/app/leverage/components/leverage-panel/leverage-panel-mobile.tsx

@@ -1,41 +1,26 @@
 import { Button } from '@headlessui/react'
 import { useAppKit } from '@reown/appkit/react'
+import Script from 'next/script'
+import { useState } from 'react'
 
-import TradingViewWidget from '@/app/leverage/components/trading-view-widget'
-import { Token } from '@/constants/tokens'
+import { TradingViewChartContainer } from '@/app/leverage/components/trading-view-chart-container'
 import { useWallet } from '@/lib/hooks/use-wallet'
 
-type Props = {
-  indexToken: Token
-}
-
-export function TradingViewChart({ indexToken }: Props) {
+export function TradingViewChart() {
+  const [isScriptReady, setIsScriptReady] = useState(false)
   const { isConnected } = useWallet()
   const { open } = useAppKit()
-
   return (
     <div className='relative h-full w-full'>
-      <div className='relative h-full w-full'>
-        <TradingViewWidget chartSymbol='INDEX:ETHUSD' indexToken={indexToken} />
-        <TradingViewWidget chartSymbol='INDEX:BTCUSD' indexToken={indexToken} />
-        <TradingViewWidget
-          chartSymbol='BINANCE:ETHBTC'
-          indexToken={indexToken}
-        />
-        <TradingViewWidget
-          chartSymbol='VANTAGE:BTCETH'
-          indexToken={indexToken}
-        />
-        <TradingViewWidget
-          chartSymbol='COINBASE:SOLUSD'
-          indexToken={indexToken}
-        />
-        <TradingViewWidget
-          chartSymbol='COINBASE:SUIUSD'
-          indexToken={indexToken}
-        />
-      </div>
-      {!isConnected && (
+      <Script
+        src='/tradingview-chart/datafeeds/udf/dist/bundle.js'
+        onLoad={() => {
+          setIsScriptReady(true)
+        }}
+      />
+      {isScriptReady && isConnected ? (
+        <TradingViewChartContainer />
+      ) : (
         <div className='bg-ic-black/95 absolute inset-0 z-20 flex items-center justify-center'>
           <Button
             className='bg-ic-blue-500 dark:bg-ic-blue-300 dark:hover:bg-ic-blue-200 hover:bg-ic-blue-500/90 text-ic-gray-50 dark:text-ic-black block rounded-md px-8 py-1 text-sm font-medium shadow-sm transition-all duration-300 hover:scale-[1.04]'