v7.5.4

v7.5.4

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "kwenta",
-	"version": "7.5.3",
+	"version": "7.5.4",
 	"description": "Kwenta",
 	"main": "index.js",
 	"scripts": {
@@ -33,17 +33,17 @@
 		]
 	},
 	"devDependencies": {
-		"@typescript-eslint/eslint-plugin": "6.2.1",
-		"@typescript-eslint/parser": "6.2.1",
-		"eslint": "8.46.0",
+		"@typescript-eslint/eslint-plugin": "6.4.1",
+		"@typescript-eslint/parser": "6.4.1",
+		"eslint": "8.47.0",
 		"eslint-config-prettier": "8.10.0",
 		"eslint-config-react-app": "7.0.1",
-		"eslint-plugin-cypress": "2.13.3",
+		"eslint-plugin-cypress": "2.14.0",
 		"eslint-plugin-flowtype": "8.0.3",
-		"eslint-plugin-import": "2.28.0",
+		"eslint-plugin-import": "2.28.1",
 		"eslint-plugin-jsx-a11y": "6.7.1",
 		"eslint-plugin-prettier": "4.2.1",
-		"eslint-plugin-react": "7.33.1",
+		"eslint-plugin-react": "7.33.2",
 		"eslint-plugin-react-hooks": "4.6.0",
 		"eslint-plugin-testing-library": "5.11.1",
 		"eslint-plugin-ui-testing": "2.0.1",

packages/app/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@kwenta/app",
-	"version": "7.5.3",
+	"version": "7.5.4",
 	"scripts": {
 		"dev": "next",
 		"build": "next build",

packages/app/src/components/Media.tsx

@@ -12,7 +12,7 @@ const MediaQuery = dynamic(() => import('react-responsive'), {
 })
 
 export const DesktopOnlyView: FC<MediaProps> = memo(({ children }) => (
-	<MediaQuery minWidth={BREAKPOINTS.md}>{children}</MediaQuery>
+	<MediaQuery minWidth={BREAKPOINTS.lg + 1}>{children}</MediaQuery>
 ))
 
 export const DesktopLargeOnlyView: FC<MediaProps> = memo(({ children }) => (
@@ -30,7 +30,7 @@ export const TabletOnlyView: FC<MediaProps> = memo(({ children }) => (
 ))
 
 export const MobileOrTabletView: FC<MediaProps> = memo(({ children }) => (
-	<MediaQuery maxWidth={BREAKPOINTS.md - 1}>{children}</MediaQuery>
+	<MediaQuery maxWidth={BREAKPOINTS.lg}>{children}</MediaQuery>
 ))
 
 export const MobileHiddenView: FC<MediaProps> = memo(({ children }) => (

packages/app/src/components/Table/Search.tsx

@@ -1,6 +1,7 @@
-import { memo, ChangeEvent, FC, useCallback } from 'react'
+import { memo, ChangeEvent, FC, useCallback, useRef } from 'react'
 import styled from 'styled-components'
 
+import CrossIcon from 'assets/svg/app/close.svg'
 import SearchIconPath from 'assets/svg/app/search.svg'
 import Input from 'components/Input/Input'
 import media from 'styles/media'
@@ -11,31 +12,63 @@ type SearchProps = {
 	border?: boolean
 	autoFocus?: boolean
 	onChange: (text: string) => void
+	onClear?: () => void
 }
 
-const Search: FC<SearchProps> = memo(({ value, disabled, border = true, autoFocus, onChange }) => {
-	const handleOnChange = useCallback(
-		(event: ChangeEvent<HTMLInputElement>) => {
-			onChange(event.target.value)
-		},
-		[onChange]
-	)
+const Search: FC<SearchProps> = memo(
+	({ value, disabled, border = true, autoFocus, onChange, onClear }) => {
+		const inputRef = useRef<HTMLInputElement>(null!)
 
-	return (
-		<SearchBar border={border}>
-			<SearchIconPath />
-			<SearchInput
-				autoFocus={autoFocus}
-				border={border}
-				value={value}
-				onChange={handleOnChange}
-				placeholder="Search..."
-				disabled={disabled}
-			/>
-		</SearchBar>
-	)
-})
+		const handleOnChange = useCallback(
+			(event: ChangeEvent<HTMLInputElement>) => {
+				onChange(event.target.value)
+			},
+			[onChange]
+		)
 
+		const onKeyClear = useCallback(
+			(event: React.KeyboardEvent<HTMLInputElement>) => {
+				if (event.key === 'Escape') {
+					onClear?.()
+				}
+			},
+			[onClear]
+		)
+
+		return (
+			<SearchBar border={border}>
+				<SearchIconPath />
+				<SearchInput
+					autoFocus={autoFocus}
+					border={border}
+					value={value}
+					onChange={handleOnChange}
+					placeholder="Search..."
+					disabled={disabled}
+					onKeyDown={onKeyClear}
+					ref={inputRef}
+				/>
+				<IconContainer
+					onClick={() => {
+						onClear?.()
+						inputRef.current?.focus()
+					}}
+				>
+					<CrossIcon width={10} height={10} />
+				</IconContainer>
+			</SearchBar>
+		)
+	}
+)
+
+const IconContainer = styled.div`
+	padding-right: 20px;
+	padding-top: 2px;
+	cursor: pointer;
+	:hover {
+		opacity: 0.5;
+	}
+`
 const SearchInput = styled(Input)<{ border: boolean }>`
 	position: relative;
 	height: 38px;

packages/app/src/constants/announcement.ts

@@ -7,7 +7,7 @@ export const BANNER_ENABLED = false
 export const BANNER_LINK_URL =
 	'https://mirror.xyz/kwenta.eth/xFomD0VE0H7o2sQ9zGeLyYPwCmtp8tLMXNTGtWy2UOQ'
 // Sets the text displayed on the home page banner
-export const BANNER_TEXT = 'Staking V2 - Reverse Migration'
+export const BANNER_TEXT = 'Important: Staking V2 Migration Coming Soon. Read More  ↗'
 // Sets the height of the banner component on desktop
 export const BANNER_HEIGHT_DESKTOP = 50
 // Sets the height of the banner component on mobile

packages/app/src/constants/links.ts

@@ -48,6 +48,7 @@ export const EXTERNAL_LINKS = {
 		Staking: 'https://docs.kwenta.io/using-kwenta/staking-kwenta',
 		TradingRewardsV2: 'https://mirror.xyz/kwenta.eth/7k-5UYXXcCNJ_DRRWvYBsK5zDm5UA945My4QrInhxoI',
 		RewardsGuide: 'https://mirror.xyz/kwenta.eth/8KyrISnjOcuAX_VW-GxVqxpcbWukB_RlP5XWWMz-UGk',
+		StakingV2Migration: 'https://docs.kwenta.io/kwenta-token/v2-migration',
 	},
 	Optimism: {
 		Home: 'https://optimism.io/',

packages/app/src/pages/dashboard/markets.tsx

@@ -1,5 +1,5 @@
 import Head from 'next/head'
-import { ReactNode, useState } from 'react'
+import { ReactNode, useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 
@@ -17,6 +17,8 @@ const MarketsPage: MarketsProps = () => {
 	const { t } = useTranslation()
 	const network = useAppSelector(selectNetwork)
 	const [search, setSearch] = useState('')
+	const onClearSearch = useCallback(() => setSearch(''), [setSearch])
+
 	usePollAction('fetchMarkets', fetchMarkets, { dependencies: [network] })
 
 	return (
@@ -26,7 +28,13 @@ const MarketsPage: MarketsProps = () => {
 			</Head>
 			<Spacer height={15} />
 			<SearchBarContainer>
-				<Search autoFocus value={search} onChange={setSearch} disabled={false} />
+				<Search
+					autoFocus
+					value={search}
+					onChange={setSearch}
+					disabled={false}
+					onClear={onClearSearch}
+				/>
 			</SearchBarContainer>
 			<FuturesMarketsTable search={search} />
 		</>

packages/app/src/sections/dashboard/Overview.tsx

@@ -3,7 +3,7 @@ import { SynthSymbol } from '@kwenta/sdk/data'
 import { FuturesMarginType } from '@kwenta/sdk/types'
 import { formatDollars, toWei } from '@kwenta/sdk/utils'
 import Wei from '@synthetixio/wei'
-import { FC, useEffect, useMemo, useState } from 'react'
+import { FC, useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 import { ExchangeTokens } from 'types/synths'
@@ -59,6 +59,7 @@ const Overview: FC = () => {
 
 	const [exchangeTokens, setExchangeTokens] = useState<ExchangeTokens>([])
 	const [search, setSearch] = useState('')
+	const onClearSearch = useCallback(() => setSearch(''), [setSearch])
 
 	useFetchAction(fetchTokenList, { dependencies: [network] })
 
@@ -174,7 +175,13 @@ const Overview: FC = () => {
 				</TabPanel>
 				<SubHeading>{t('dashboard.overview.markets-tabs.futures')}</SubHeading>
 				<SearchBarContainer>
-					<Search autoFocus value={search} onChange={setSearch} disabled={false} />
+					<Search
+						autoFocus
+						value={search}
+						onChange={setSearch}
+						disabled={false}
+						onClear={onClearSearch}
+					/>
 				</SearchBarContainer>
 				<FuturesMarketsTable search={search} />
 			</DesktopOnlyView>

packages/app/src/sections/dashboard/Stake/StakingHeading.tsx

@@ -3,8 +3,9 @@ import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 
 import Button from 'components/Button'
-import { FlexDivCol, FlexDivRowCentered } from 'components/layout/flex'
-import { Heading } from 'components/Text'
+import { FlexDivCentered, FlexDivCol, FlexDivRowCentered } from 'components/layout/flex'
+import { Body, Heading } from 'components/Text'
+import { BANNER_TEXT } from 'constants/announcement'
 import { EXTERNAL_LINKS } from 'constants/links'
 
 interface StakingHeadingProps {
@@ -15,19 +16,28 @@ export const StakingHeading: FC<StakingHeadingProps> = memo(({ title }) => {
 	const { t } = useTranslation()
 
 	return (
-		<TitleContainer>
-			<FlexDivCol rowGap="5px">
-				<StyledHeading variant="h4">{title}</StyledHeading>
-			</FlexDivCol>
-			<StyledButton
-				size="xsmall"
-				isRounded
-				textTransform="none"
-				onClick={() => window.open(EXTERNAL_LINKS.Docs.Staking, '_blank')}
+		<FlexDivCol>
+			<BannerContainer
+				onClick={() =>
+					window.open(EXTERNAL_LINKS.Docs.StakingV2Migration, '_blank', 'noopener noreferrer')
+				}
 			>
-				{t('dashboard.stake.docs')}
-			</StyledButton>
-		</TitleContainer>
+				<FuturesLink>{BANNER_TEXT}</FuturesLink>
+			</BannerContainer>
+			<TitleContainer>
+				<FlexDivCol rowGap="5px">
+					<StyledHeading variant="h4">{title}</StyledHeading>
+				</FlexDivCol>
+				<StyledButton
+					size="xsmall"
+					isRounded
+					textTransform="none"
+					onClick={() => window.open(EXTERNAL_LINKS.Docs.Staking, '_blank')}
+				>
+					{t('dashboard.stake.docs')}
+				</StyledButton>
+			</TitleContainer>
+		</FlexDivCol>
 	)
 })
 
@@ -43,3 +53,18 @@ const StyledButton = styled(Button)`
 const StyledHeading = styled(Heading)`
 	font-weight: 400;
 `
+
+const FuturesLink = styled(Body)`
+	color: ${(props) => props.theme.colors.selectedTheme.newTheme.banner.yellow.text};
+	padding: 20px 0px;
+`
+
+const BannerContainer = styled(FlexDivCentered)`
+	width: 100%;
+	justify-content: center;
+	background: ${(props) => props.theme.colors.selectedTheme.newTheme.banner.yellow.background};
+	margin-bottom: 30px;
+	cursor: pointer;
+	border-radius: 8px;
+	white-space: pre-wrap;
+`

packages/app/src/sections/exchange/MobileSwap/SwapInfoBox.tsx

@@ -97,7 +97,7 @@ const GasPriceRow = () => {
 
 	const gasPriceItem = isL2
 		? formattedTransactionFee
-		: `${formatNumber(+customGasPrice, { minDecimals: 2 })} Gwei`
+		: `${formatNumber(wei(customGasPrice.maxFeePerGas), { minDecimals: 2 })} Gwei`
 
 	return (
 		<InfoBoxRow