diff --git a/components/AccountSelect.tsx b/components/AccountSelect.tsx index 2e1f619..593beb2 100644 --- a/components/AccountSelect.tsx +++ b/components/AccountSelect.tsx @@ -6,7 +6,7 @@ import useMarketList from '../hooks/useMarketList' import { nativeToUi } from '@blockworks-foundation/mango-client/lib/utils' import useMangoStore from '../stores/useMangoStore' import { SRM_DECIMALS } from '@project-serum/serum/lib/token-instructions' -import { RefreshIcon } from '@heroicons/react/outline' +import { RefreshClockwiseIcon } from './icons' type AccountSelectProps = { accounts: any[] @@ -60,7 +60,7 @@ const AccountSelect = ({ onClick={handleRefreshBalances} >
- Refresh diff --git a/components/DropMenu.jsx b/components/DropMenu.tsx similarity index 68% rename from components/DropMenu.jsx rename to components/DropMenu.tsx index 42cfea7..cf2eb4e 100644 --- a/components/DropMenu.jsx +++ b/components/DropMenu.tsx @@ -1,13 +1,37 @@ +import { FunctionComponent, ReactNode } from 'react' import { Listbox } from '@headlessui/react' +import Tooltip from './Tooltip' -const DropMenu = ({ button, buttonClassName, value, onChange, options }) => { +type DropMenuProps = { + button: ReactNode + buttonClassName?: string + onChange: (...args: any[]) => any + options: Array + toolTipContent?: string + value?: any +} + +const DropMenu: FunctionComponent = ({ + button, + buttonClassName, + value, + onChange, + options, + toolTipContent, +}) => { return (
{({ open }) => ( <> - {button} + {toolTipContent && !open ? ( + + {button} + + ) : ( + button + )} {open ? ( {
))}
-
- +
+ Use Previous Version
diff --git a/components/ResetLayout.tsx b/components/ResetLayout.tsx index 836ad53..3fb3b50 100644 --- a/components/ResetLayout.tsx +++ b/components/ResetLayout.tsx @@ -1,5 +1,5 @@ import { useEffect, useState } from 'react' -import { RefreshIcon } from '@heroicons/react/outline' +import { RefreshClockwiseIcon } from './icons' import { defaultLayouts } from './TradePageGrid' import useLocalStorageState from '../hooks/useLocalStorageState' import Tooltip from './Tooltip' @@ -24,13 +24,15 @@ const ResetLayout = ({ className = '' }) => { } return ( -
- +
+
diff --git a/components/ThemeSwitch.tsx b/components/ThemeSwitch.tsx index 3183b0f..2e0aa70 100644 --- a/components/ThemeSwitch.tsx +++ b/components/ThemeSwitch.tsx @@ -28,6 +28,7 @@ const ThemeSwitch = () => { value={theme} onChange={(theme) => setTheme(theme)} options={THEMES} + toolTipContent="Change Theme" /> ) } diff --git a/components/Tooltip.tsx b/components/Tooltip.tsx index 5c05043..67b2edf 100644 --- a/components/Tooltip.tsx +++ b/components/Tooltip.tsx @@ -4,9 +4,14 @@ import 'tippy.js/animations/scale.css' type TooltipProps = { content: ReactNode + className?: string } -const Tooltip: FunctionComponent = ({ children, content }) => { +const Tooltip: FunctionComponent = ({ + children, + content, + className, +}) => { return ( = ({ children, content }) => { maxWidth="30rem" interactive content={ -
+
{content}
} diff --git a/components/TradingView/index.tsx b/components/TradingView/index.tsx index feba17f..7cddbd2 100755 --- a/components/TradingView/index.tsx +++ b/components/TradingView/index.tsx @@ -70,8 +70,8 @@ const TVChartContainer = () => { disabled_features: [ 'use_localstorage_for_settings', 'timeframes_toolbar', - 'volume_force_overlay', - 'left_toolbar', + // 'volume_force_overlay', + // 'left_toolbar', 'show_logo_on_all_charts', 'caption_buttons_text_if_possible', 'header_settings', @@ -79,14 +79,14 @@ const TVChartContainer = () => { 'header_compare', 'compare_symbol', 'header_screenshot', - 'header_widget_dom_node', + // 'header_widget_dom_node', 'header_saveload', 'header_undo_redo', 'header_interval_dialog_button', 'show_interval_dialog_on_key_press', 'header_symbol_search', - 'header_resolutions', - 'header_widget', + // 'header_resolutions', + // 'header_widget', ], enabled_features: ['study_templates'], load_last_chart: true, @@ -96,6 +96,8 @@ const TVChartContainer = () => { autosize: defaultProps.autosize, studies_overrides: defaultProps.studiesOverrides, theme: theme === 'Light' ? 'Light' : 'Dark', + custom_css_url: '/tradingview-chart.css', + loading_screen: { backgroundColor: 'rgba(0,0,0,0.1)' }, overrides: { 'paneProperties.background': theme === 'Dark' ? '#2B2B2B' : theme === 'Light' ? '#fff' : '#1D1832', @@ -122,21 +124,21 @@ const TVChartContainer = () => { 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' - }) + // 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' + // }) }) //eslint-disable-next-line }, [selectedMarketName, theme]) diff --git a/components/UiLock.tsx b/components/UiLock.tsx index 5328d98..d1b8ccb 100644 --- a/components/UiLock.tsx +++ b/components/UiLock.tsx @@ -2,6 +2,7 @@ import { LockClosedIcon, LockOpenIcon } from '@heroicons/react/outline' import { Transition } from '@headlessui/react' import useMangoStore from '../stores/useMangoStore' import ResetLayout from './ResetLayout' +import Tooltip from './Tooltip' const UiLock = ({ className = '' }) => { const set = useMangoStore((s) => s.set) @@ -29,17 +30,22 @@ const UiLock = ({ className = '' }) => { ) : null} -
- + +
) diff --git a/components/WithdrawModal.tsx b/components/WithdrawModal.tsx index 0b6555c..19860cd 100644 --- a/components/WithdrawModal.tsx +++ b/components/WithdrawModal.tsx @@ -17,6 +17,7 @@ import { notify } from '../utils/notifications' import Switch from './Switch' import Tooltip from './Tooltip' import { InformationCircleIcon } from '@heroicons/react/outline' +import { Transition } from '@headlessui/react' const WithdrawModal = ({ isOpen, onClose }) => { const [inputAmount, setInputAmount] = useState('') @@ -207,7 +208,7 @@ const WithdrawModal = ({ isOpen, onClose }) => { : setMaxForSelectedAccount } > - Max + {includeBorrow ? 'Max with Borrow' : 'Max'}
@@ -225,7 +226,17 @@ const WithdrawModal = ({ isOpen, onClose }) => { /> {includeBorrow ? ( -
+
Borrow Amount
{`${getBorrowAmount()} ${getSymbolForTokenMintAddress( @@ -241,7 +252,7 @@ const WithdrawModal = ({ isOpen, onClose }) => { %
-
+ ) : null}