From f795de8bb2bbfa1fa8d1de9478ba061f98f12722 Mon Sep 17 00:00:00 2001
From: Matthew Russell <mattrussell36@gmail.com>
Date: Thu, 30 Nov 2023 18:43:45 -0800
Subject: [PATCH] feat: add attribution for tradingview, dont use dropdown for
 chartlib switch

---
 .../components/chart-container/chart-menu.tsx | 74 +++++++++----------
 libs/i18n/src/locales/en/trading.json         |  2 +
 libs/ui-toolkit/src/components/tabs/tabs.tsx  |  3 +-
 3 files changed, 40 insertions(+), 39 deletions(-)

diff --git a/apps/trading/components/chart-container/chart-menu.tsx b/apps/trading/components/chart-container/chart-menu.tsx
index 4610425ef..1e0788618 100644
--- a/apps/trading/components/chart-container/chart-menu.tsx
+++ b/apps/trading/components/chart-container/chart-menu.tsx
@@ -6,6 +6,7 @@ import {
   overlayLabels,
   studyLabels,
 } from 'pennant';
+import { Trans } from 'react-i18next';
 import {
   TradingButton,
   TradingDropdown,
@@ -21,7 +22,7 @@ import { Interval } from '@vegaprotocol/types';
 import { useEnvironment } from '@vegaprotocol/environment';
 import { ALLOWED_TRADINGVIEW_HOSTNAMES } from '@vegaprotocol/trading-view';
 import { IconNames, type IconName } from '@blueprintjs/icons';
-import { useChartSettings, type Chartlib } from './use-chart-settings';
+import { useChartSettings } from './use-chart-settings';
 import { useT } from '../../lib/use-t';
 
 const INTERVALS = [
@@ -60,39 +61,21 @@ export const ChartMenu = () => {
   const triggerClasses = 'text-xs';
   const triggerButtonProps = { size: 'extra-small' } as const;
 
-  const chartlibDropdown = (
-    <TradingDropdown
-      trigger={
-        <TradingDropdownTrigger className={triggerClasses}>
-          <TradingButton {...triggerButtonProps} className="capitalize">
-            {chartlib}
-          </TradingButton>
-        </TradingDropdownTrigger>
-      }
-    >
-      <TradingDropdownContent align={contentAlign}>
-        <TradingDropdownRadioGroup
-          value={chartlib}
-          className="capitalize"
-          onValueChange={(value) => {
-            setChartlib(value as Chartlib);
-          }}
-        >
-          <TradingDropdownRadioItem inset value="tradingview">
-            {t('TradingView')}
-            <TradingDropdownItemIndicator />
-          </TradingDropdownRadioItem>
-
-          <TradingDropdownRadioItem inset value="pennant">
-            {t('Pennant')}
-            <TradingDropdownItemIndicator />
-          </TradingDropdownRadioItem>
-        </TradingDropdownRadioGroup>
-      </TradingDropdownContent>
-    </TradingDropdown>
+  const isPennant = chartlib === 'pennant';
+  const commonMenuItems = (
+    <>
+      <TradingButton
+        onClick={() => {
+          setChartlib(isPennant ? 'tradingview' : 'pennant');
+        }}
+        size="extra-small"
+      >
+        {isPennant ? 'TradingView' : t('Vega chart')}
+      </TradingButton>
+    </>
   );
 
-  const pennantDropdowns = (
+  const pennantMenuItems = (
     <>
       <TradingDropdown
         trigger={
@@ -203,23 +186,40 @@ export const ChartMenu = () => {
     </>
   );
 
+  const tradingViewMenuItems = (
+    <p className="text-xs mr-2">
+      <Trans
+        i18nKey="Chart by <0>TradingView</0>"
+        components={[
+          // eslint-disable-next-line
+          <a className="underline" href="https://www.tradingview.com" />,
+        ]}
+      />
+    </p>
+  );
+
   if (!ALLOWED_TRADINGVIEW_HOSTNAMES.includes(window.location.hostname)) {
-    return pennantDropdowns;
+    return pennantMenuItems;
   }
 
   if (!CHARTING_LIBRARY_PATH) {
-    return pennantDropdowns;
+    return pennantMenuItems;
   }
 
   switch (chartlib) {
     case 'tradingview': {
-      return chartlibDropdown;
+      return (
+        <>
+          {tradingViewMenuItems}
+          {commonMenuItems}
+        </>
+      );
     }
     case 'pennant': {
       return (
         <>
-          {chartlibDropdown}
-          {pennantDropdowns}
+          {pennantMenuItems}
+          {commonMenuItems}
         </>
       );
     }
diff --git a/libs/i18n/src/locales/en/trading.json b/libs/i18n/src/locales/en/trading.json
index 3815a0539..82fc135ad 100644
--- a/libs/i18n/src/locales/en/trading.json
+++ b/libs/i18n/src/locales/en/trading.json
@@ -29,6 +29,7 @@
   "Candles": "Candles",
   "Change (24h)": "Change (24h)",
   "Chart": "Chart",
+  "Chart by <0>TradingView</0>": "Chart by <0>TradingView</0>",
   "checkOutProposalsAndVote": "Check out the terms of the proposals and vote:",
   "checkOutProposalsAndVote_one": "Check out the terms of the proposal and vote:",
   "checkOutProposalsAndVote_other": "Check out the terms of the proposals and vote:",
@@ -312,6 +313,7 @@
   "totalCommission_other": "Total commission (last {{count}} epochs)",
   "Unknown": "Unknown",
   "Unknown settlement date": "Unknown settlement date",
+  "Vega chart": "Vega chart",
   "Vega Reward pot": "Vega Reward pot",
   "Vega Wallet <0>full featured<0>": "Vega Wallet <0>full featured<0>",
   "Vesting": "Vesting",
diff --git a/libs/ui-toolkit/src/components/tabs/tabs.tsx b/libs/ui-toolkit/src/components/tabs/tabs.tsx
index 69b8c3e1b..66a8a1b60 100644
--- a/libs/ui-toolkit/src/components/tabs/tabs.tsx
+++ b/libs/ui-toolkit/src/components/tabs/tabs.tsx
@@ -89,7 +89,6 @@ export const Tabs = ({
           ref={menuRef}
           className={classNames('flex-1 p-1', {
             'bg-vega-clight-700 dark:bg-vega-cdark-700': wrapped,
-            '': wrapped,
           })}
         >
           {Children.map(children, (child) => {
@@ -97,7 +96,7 @@ export const Tabs = ({
             return (
               <TabsPrimitive.Content
                 value={child.props.id}
-                className={classNames('flex flex-nowrap gap-1', {
+                className={classNames('flex items-center flex-nowrap gap-1', {
                   'justify-end': !wrapped,
                 })}
               >