v7.3.2

Kwenta · Jun 29, 2023 · 672679a · 672679a
2 parents 3df297a + 2284c95
commit 672679a
Show file tree

Hide file tree

Showing 55 changed files with 1,842 additions and 3,700 deletions.
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
@@ -2,7 +2,7 @@ version: 2
 updates:
   - package-ecosystem: "github-actions"
     directory: "/" 
-    open-pull-requests-limit: 5
+    open-pull-requests-limit: 8
     target-branch: "dev"
     schedule:
       interval: "daily"
@@ -11,7 +11,7 @@ updates:
     directory: "/"
     schedule:
       interval: "daily"
-    open-pull-requests-limit: 5
+    open-pull-requests-limit: 8
     target-branch: "dev"
     labels:
       - "npm"

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "kwenta",
-	"version": "7.3.1",
+	"version": "7.3.2",
 	"description": "Kwenta",
 	"main": "index.js",
 	"scripts": {
@@ -32,24 +32,23 @@
 		]
 	},
 	"devDependencies": {
-		"@typescript-eslint/eslint-plugin": "5.60.0",
-		"@typescript-eslint/parser": "5.60.0",
-		"eslint": "^8.43.0",
-		"eslint-config-prettier": "8.5.0",
+		"@typescript-eslint/eslint-plugin": "5.60.1",
+		"@typescript-eslint/parser": "5.60.1",
+		"eslint": "8.43.0",
+		"eslint-config-prettier": "8.8.0",
 		"eslint-config-react-app": "7.0.1",
-		"eslint-plugin-chai-friendly": "^0.7.2",
-		"eslint-plugin-cypress": "^2.13.3",
+		"eslint-plugin-cypress": "2.13.3",
 		"eslint-plugin-flowtype": "8.0.3",
 		"eslint-plugin-import": "2.27.5",
 		"eslint-plugin-jsx-a11y": "6.7.1",
 		"eslint-plugin-prettier": "4.2.1",
 		"eslint-plugin-react": "7.32.2",
 		"eslint-plugin-react-hooks": "4.6.0",
-		"eslint-plugin-testing-library": "^5.11.0",
-		"eslint-plugin-ui-testing": "^2.0.1",
-		"husky": "8.0.1",
-		"lint-staged": "^13.0.3",
-		"prettier": "2.0.5",
-		"typescript": "^5.1.3"
+		"eslint-plugin-testing-library": "5.11.0",
+		"eslint-plugin-ui-testing": "2.0.1",
+		"husky": "8.0.3",
+		"lint-staged": "13.2.3",
+		"prettier": "2.8.8",
+		"typescript": "5.1.6"
 	}
 }
diff --git a/packages/app/package.json b/packages/app/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@kwenta/app",
-	"version": "7.3.1",
+	"version": "7.3.2",
 	"scripts": {
 		"dev": "next",
 		"build": "next build",
@@ -27,35 +27,29 @@
 		"@gnosis.pm/safe-apps-sdk": "^7.8.0",
 		"@kwenta/sdk": "workspace:*",
 		"@material-ui/core": "^4.12.4",
-		"@metamask/detect-provider": "2.0.0",
 		"@pythnetwork/pyth-evm-js": "1.17.0",
 		"@rainbow-me/rainbowkit": "0.12.16",
 		"@reach/dialog": "0.18.0",
 		"@reduxjs/toolkit": "^1.9.5",
-		"@sentry/browser": "7.43.0",
-		"@sentry/tracing": "7.43.0",
-		"@socket.tech/plugin": "1.0.3",
+		"@sentry/browser": "7.57.0",
+		"@sentry/tracing": "7.57.0",
+		"@socket.tech/plugin": "1.0.14",
 		"@synthetixio/optimism-networks": "2.74.6",
 		"@synthetixio/wei": "2.74.4",
-		"@tanstack/react-table": "^8.9.2",
+		"@tanstack/react-table": "8.9.3",
 		"@widgetbot/react-embed": "^1.7.0",
 		"axios": "0.27.2",
-		"bignumber.js": "9.0.0",
 		"codegen-graph-ts": "^0.1.4",
 		"cors": "^2.8.5",
 		"crypto-browserify": "^3.12.0",
-		"css-mediaquery": "^0.1.2",
 		"date-fns": "2.21.3",
 		"date-fns-tz": "1.3.7",
 		"echarts": "5.4.2",
 		"eslint-config-next": "^13.4.6",
 		"ethcall": "4.7.2",
-		"ethereum-block-by-date": "^1.4.5",
 		"ethers": "5.7.2",
 		"graphql-request": "3.4.0",
 		"i18next": "19.7.0",
-		"imagemin-mozjpeg": "^10.0.0",
-		"intercept-stdout": "^0.1.2",
 		"isomorphic-dompurify": "^0.26.0",
 		"lightweight-charts": "4.0.1",
 		"lodash": "4.17.21",
@@ -70,7 +64,7 @@
 		"react-infinite-scroll-component": "^6.1.0",
 		"react-is": "^18.0.0",
 		"react-query": "3.39.3",
-		"react-redux": "8.1.0",
+		"react-redux": "8.1.1",
 		"react-responsive": "^9.0.2",
 		"react-rnd": "^10.3.7",
 		"react-select": "4.3.1",
@@ -89,12 +83,12 @@
 	},
 	"devDependencies": {
 		"@microsoft/eslint-formatter-sarif": "2.1.7",
-		"@next/eslint-plugin-next": "13.4.4",
-		"@storybook/addon-actions": "^7.0.22",
-		"@storybook/addon-essentials": "7.0.22",
-		"@storybook/addon-links": "^7.0.22",
-		"@storybook/nextjs": "^7.0.22",
-		"@storybook/react": "^7.0.22",
+		"@next/eslint-plugin-next": "13.4.7",
+		"@storybook/addon-actions": "7.0.24",
+		"@storybook/addon-essentials": "7.0.24",
+		"@storybook/addon-links": "7.0.24",
+		"@storybook/nextjs": "7.0.24",
+		"@storybook/react": "7.0.24",
 		"@svgr/core": "5.5.0",
 		"@svgr/webpack": "6.3.1",
 		"@synthetixio/synpress": "3.7.1",
@@ -108,35 +102,33 @@
 		"@types/date-fns": "2.6.0",
 		"@types/ethereum-block-by-date": "^1.4.1",
 		"@types/jest": "27.0.2",
-		"@types/lodash": "4.14.159",
+		"@types/lodash": "4.14.195",
 		"@types/node": "14.0.13",
-		"@types/react": "18.2.13",
+		"@types/react": "18.2.14",
 		"@types/react-dom": "18.2.6",
 		"@types/react-responsive": "8.0.5",
 		"@types/react-rnd": "^8.0.0",
 		"@types/react-select": "3.0.19",
 		"@types/react-slick": "0.23.10",
 		"@types/react-table": "7.0.22",
 		"@types/redux-logger": "^3.0.9",
-		"@types/styled-components": "5.1.2",
+		"@types/styled-components": "5.1.26",
 		"@types/testing-library__jest-dom": "^5.14.6",
 		"css-loader": "^6.8.1",
-		"eslint-config-turbo": "^1.10.4",
-		"html-to-image": "1.11.4",
+		"eslint-config-turbo": "1.10.6",
+		"html-to-image": "1.11.11",
 		"jest": "28.1.0",
 		"jest-environment-jsdom": "28.1.0",
 		"jest-preview": "^0.3.1",
 		"jest-transformer-svg": "^2.0.0",
 		"next-router-mock": "0.9.3",
 		"pinst": "3.0.0",
 		"postcss": "^8.4.24",
-		"prettier": "2.0.5",
+		"prettier": "2.8.8",
 		"react-test-renderer": "17.0.1",
-		"storybook": "^7.0.22",
+		"storybook": "7.0.24",
 		"typechain": "8.1.1",
-		"typescript": "5.1.3",
-		"url-loader": "4.1.0",
-		"webp-loader": "0.6.0"
+		"typescript": "5.1.6"
 	},
 	"engines": {
 		"node": ">=16",

diff --git a/packages/app/src/components/Button/Button.tsx b/packages/app/src/components/Button/Button.tsx
@@ -201,11 +201,11 @@ const BaseButton = styled.button<BaseButtonProps>`
 			width: 100%;
 		`};
 
-		${(props) =>
-			props.$fontSize &&
-			css`
-				font-size: ${props.$fontSize}px;
-			`}
+	${(props) =>
+		props.$fontSize &&
+		css`
+			font-size: ${props.$fontSize}px;
+		`}
 
 	&:disabled {
 		color: ${(props) => props.theme.colors.selectedTheme.button.disabled.text};

diff --git a/packages/app/src/components/TVChart/TVChart.tsx b/packages/app/src/components/TVChart/TVChart.tsx
@@ -1,8 +1,11 @@
 import { NetworkId, ConditionalOrder, PricesListener } from '@kwenta/sdk/types'
 import { formatOrderDisplayType, formatNumber } from '@kwenta/sdk/utils'
 import {
+	ChartingLibraryWidgetOptions,
 	IChartingLibraryWidget,
 	IPositionLineAdapter,
+	ResolutionString,
+	TimeFrameItem,
 	widget,
 } from 'charting_library/charting_library'
 import { useRouter } from 'next/router'
@@ -20,6 +23,7 @@ import darkTheme from 'styles/theme/colors/dark'
 import { DEFAULT_RESOLUTION } from './constants'
 import DataFeedFactory from './DataFeed'
 import { ChartPosition } from './types'
+import { loadChartState, saveChartState } from './utils'
 
 export type ChartProps = {
 	activePosition?: ChartPosition | null
@@ -159,10 +163,12 @@ export function TVChart({
 	}, [showOrderLines])
 
 	useEffect(() => {
-		const widgetOptions = {
+		const chartData = loadChartState()
+
+		const widgetOptions: ChartingLibraryWidgetOptions = {
 			symbol: marketAsset + ':sUSD',
 			datafeed: DataFeedFactory((network?.id ?? chain.optimism.id) as NetworkId, onSubscribe),
-			interval: interval,
+			interval: interval as ResolutionString,
 			container: containerId,
 			library_path: libraryPath,
 			locale: 'en',
@@ -177,7 +183,7 @@ export function TVChart({
 			fullscreen: fullscreen,
 			autosize: autosize,
 			studies_overrides: studiesOverrides,
-			theme: 'dark',
+			theme: 'Dark',
 			custom_css_url: './theme.css',
 			loading_screen: {
 				backgroundColor: colors.selectedTheme.newTheme.containers.primary.background,
@@ -191,7 +197,8 @@ export function TVChart({
 				{ text: '5D', resolution: '15', description: '5 Days' },
 				{ text: '30D', resolution: '1H', description: '30 Days' },
 				{ text: '3M', resolution: '1H', description: '3 Months' },
-			],
+			] as TimeFrameItem[],
+			saved_data: chartData,
 		}
 
 		const clearExistingWidget = () => {
@@ -300,6 +307,18 @@ export function TVChart({
 		})
 	}, [marketAsset])
 
+	useEffect(() => {
+		const handleAutoSave = () => {
+			_widget.current?.save(saveChartState)
+		}
+
+		_widget.current?.subscribe('onAutoSaveNeeded', handleAutoSave)
+
+		return () => {
+			_widget.current?.unsubscribe('onAutoSaveNeeded', handleAutoSave)
+		}
+	}, [])
+
 	const onSubscribe = useCallback((priceListener: PricesListener) => {
 		_priceListener.current = priceListener
 	}, [])

diff --git a/packages/app/src/components/TVChart/constants.ts b/packages/app/src/components/TVChart/constants.ts
@@ -1,3 +1,5 @@
 import { ResolutionString } from 'charting_library/charting_library'
 
 export const DEFAULT_RESOLUTION: ResolutionString = '15' as ResolutionString
+
+export const TV_CHART_STATE = 'TV_CHART_STATE'
diff --git a/packages/app/src/components/TVChart/utils.ts b/packages/app/src/components/TVChart/utils.ts
@@ -1,5 +1,7 @@
 import { ResolutionString } from 'charting_library/charting_library'
 
+import { TV_CHART_STATE } from './constants'
+
 export const resolutionToSeconds = (resolution: ResolutionString): number => {
 	if (!isNaN(Number(resolution))) {
 		return Number(resolution) * 60
@@ -26,3 +28,12 @@ export const getSupportedResolution = (period: number): string => {
 		return '1'
 	}
 }
+
+export const saveChartState = (state: object) => {
+	window.localStorage.setItem(TV_CHART_STATE, JSON.stringify(state))
+}
+
+export const loadChartState = () => {
+	const rawChartData = window.localStorage.getItem(TV_CHART_STATE)
+	return rawChartData ? JSON.parse(rawChartData) : undefined
+}
diff --git a/packages/app/src/components/TextToggle.tsx b/packages/app/src/components/TextToggle.tsx
@@ -22,7 +22,11 @@ const TextToggle: React.FC<TextToggleProps<any>> = ({
 			<Body color="secondary">{title}</Body>
 			<FlexDiv columnGap="10px">
 				{options.map((value) => (
-					<ToggleButton $active={selectedOption === value} onClick={() => onOptionChange(value)}>
+					<ToggleButton
+						key={value}
+						$active={selectedOption === value}
+						onClick={() => onOptionChange(value)}
+					>
 						{value}
 					</ToggleButton>
 				))}

diff --git a/packages/app/src/hooks/useStatsData.ts b/packages/app/src/hooks/useStatsData.ts
@@ -24,10 +24,8 @@ const useStatsData = () => {
 	const prices = useAppSelector(selectMarkPrices)
 	const minTimestamp = useAppSelector(selectMinTimestamp)
 
-	const {
-		data: dailyStatsData,
-		isLoading: dailyStatsIsLoading,
-	}: UseQueryResult<DailyStat[]> = useGetFile('stats/daily_stats.json')
+	const { data: dailyStatsData, isLoading: dailyStatsIsLoading }: UseQueryResult<DailyStat[]> =
+		useGetFile('stats/daily_stats.json')
 
 	const openInterestData = useMemo(() => {
 		return futuresMarkets.map(({ marketKey, asset, marketSize }) => {

diff --git a/packages/app/src/pages/_app.tsx b/packages/app/src/pages/_app.tsx
@@ -44,8 +44,7 @@ type AppPropsWithLayout = AppProps & {
 }
 
 Sentry.init({
-	dsn:
-		'https://d48644bc80d04977a26132b346417210@o4504363236851712.ingest.sentry.io/4504363261362177',
+	dsn: 'https://d48644bc80d04977a26132b346417210@o4504363236851712.ingest.sentry.io/4504363261362177',
 	maxBreadcrumbs: 50,
 	debug: process.env.NODE_ENV !== 'production',
 	enabled: process.env.NODE_ENV === 'production',

diff --git a/packages/app/src/pages/market.tsx b/packages/app/src/pages/market.tsx
@@ -147,10 +147,10 @@ function TradePanelDesktop() {
 	const isolatedPositionsCount = useAppSelector(selectActiveIsolatedPositionsCount)
 	const [open, setOpen] = useState(false)
 
-	useEffect(() => setOpen(accountType === 'isolated_margin' && isolatedPositionsCount === 0), [
-		accountType,
-		isolatedPositionsCount,
-	])
+	useEffect(
+		() => setOpen(accountType === 'isolated_margin' && isolatedPositionsCount === 0),
+		[accountType, isolatedPositionsCount]
+	)
 
 	if (walletAddress && !isL2) {
 		return <FuturesUnsupportedNetwork />

diff --git a/packages/app/src/sections/dashboard/FuturesHistoryTable.tsx b/packages/app/src/sections/dashboard/FuturesHistoryTable.tsx
@@ -122,7 +122,7 @@ const FuturesHistoryTable: FC = () => {
 							{
 								Header: <div>{t('dashboard.history.futures-history-table.market')}</div>,
 								accessor: 'market',
-								Cell: (cellProps: CellProps<typeof mappedHistoricalTrades[number]>) => {
+								Cell: (cellProps: CellProps<(typeof mappedHistoricalTrades)[number]>) => {
 									return conditionalRender(
 										cellProps.row.original.asset,
 										<>
@@ -251,7 +251,7 @@ const FuturesHistoryTable: FC = () => {
 							{
 								Header: <div>{t('dashboard.history.futures-history-table.asset')}</div>,
 								accessor: 'displayAsset',
-								Cell: (cellProps: CellProps<typeof mappedHistoricalTrades[number]>) => {
+								Cell: (cellProps: CellProps<(typeof mappedHistoricalTrades)[number]>) => {
 									return conditionalRender(
 										cellProps.row.original.asset,
 										<>