v7.4.5

v7.4.5

package.json

@@ -1,6 +1,6 @@
 {
  "name": "kwenta",
- "version": "7.4.4",
+ "version": "7.4.5",
  "description": "Kwenta",
  "main": "index.js",
  "scripts": {

packages/app/package.json

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

packages/app/src/__tests__/pages/market.test.tsx

@@ -1,13 +1,15 @@
-import { FuturesMarket } from '@kwenta/sdk/dist/types'
+import { FuturesMarket, PositionSide } from '@kwenta/sdk/types'
 import { wei } from '@synthetixio/wei'
 import { fireEvent, render, waitFor } from '@testing-library/react'
 import { ReactNode } from 'react'
 
+import { mockFuturesService } from 'state/__mocks__/sdk'
 import { fetchMarkets } from 'state/futures/actions'
 
 import { mockResizeObserver } from '../../../testing/unit/mocks/app'
 import { PRELOADED_STATE } from '../../../testing/unit/mocks/data/app'
 import {
+ MOCK_TRADE_PREVIEW,
  mockSmartMarginAccount,
  preloadedStateWithSmartMarginAccount,
  SDK_MARKETS,
@@ -46,6 +48,12 @@ describe('Futures market page - smart margin', () => {
  mockConnector()
  })
 
+ beforeEach(() => {
+ // Reset the SDK mock
+ // @ts-ignore
+ sdk.futures = mockFuturesService()
+ })
+
  test('Calculates correct fees from trade preview', async () => {
  const { findByTestId, findByText } = render(
  <MockProviders
@@ -194,3 +202,199 @@ describe('Futures market page - smart margin', () => {
  expect(submitButton).toBeDisabled()
  })
 })
+
+describe('Futures market page - stop loss validation', () => {
+ beforeAll(() => {
+ jest.setTimeout(60000)
+ mockUseWindowSize()
+ mockReactQuery()
+ mockResizeObserver()
+ mockConnector()
+ })
+
+ beforeEach(() => {
+ // Reset the SDK mock
+ // @ts-ignore
+ sdk.futures = mockFuturesService()
+ })
+
+ test('Restricts stop loss for LONG trade at correct price depending on leverage', async () => {
+ const store = setupStore(preloadedStateWithSmartMarginAccount())
+ const { findByTestId, findByText } = render(
+ <MockProviders route="market/?accountType=cross_margin&asset=sETH" store={store}>
+ <Market />
+ </MockProviders>
+ )
+
+ const marginInput = await findByTestId('set-order-margin-susd-desktop')
+ fireEvent.change(marginInput, { target: { value: '100' } })
+
+ const sizeInput = await findByTestId('set-order-size-amount-susd-desktop')
+ fireEvent.change(sizeInput, { target: { value: '1000' } })
+
+ const fees = await findByText('$1.69')
+ expect(fees).toBeTruthy()
+
+ const submitButton = await findByTestId('trade-panel-submit-button')
+ expect(submitButton).toBeEnabled()
+
+ const expandButton = await findByTestId('expand-sl-tp-button')
+ fireEvent.click(expandButton)
+
+ const approveButton = await findByTestId('sl-tp-ack-proceed')
+ fireEvent.click(approveButton)
+
+ const stopLossInput = await findByTestId('trade-panel-stop-loss-input')
+ fireEvent.change(stopLossInput, { target: { value: '1700' } })
+
+ // Min / Max SL is shown when invalid
+ const slMinMaxLabel = await findByText('Min: 1,735.52')
+ expect(slMinMaxLabel).toBeTruthy()
+ expect(submitButton).toBeDisabled()
+
+ // Input valid when above min
+ fireEvent.change(stopLossInput, { target: { value: '1750' } })
+ expect(submitButton).toBeEnabled()
+ })
+
+ test('Restricts stop loss for SHORT trade at correct price depending on leverage', async () => {
+ const store = setupStore(preloadedStateWithSmartMarginAccount())
+ const { findByTestId, findByText } = render(
+ <MockProviders route="market/?accountType=cross_margin&asset=sETH" store={store}>
+ <Market />
+ </MockProviders>
+ )
+
+ sdk.futures.getCrossMarginTradePreview = () =>
+ Promise.resolve({
+ ...MOCK_TRADE_PREVIEW,
+ liqPrice: wei('2172.467580351348039045'),
+ side: PositionSide.SHORT,
+ size: wei('-0.541100000000000000'),
+ })
+
+ const shortToggle = await findByTestId('position-side-short-button')
+ fireEvent.click(shortToggle)
+
+ const marginInput = await findByTestId('set-order-margin-susd-desktop')
+ fireEvent.change(marginInput, { target: { value: '100' } })
+
+ const sizeInput = await findByTestId('set-order-size-amount-susd-desktop')
+ fireEvent.change(sizeInput, { target: { value: '1000' } })
+
+ const fees = await findByText('$1.69')
+ expect(fees).toBeTruthy()
+
+ const submitButton = await findByTestId('trade-panel-submit-button')
+ expect(submitButton).toBeEnabled()
+
+ const expandButton = await findByTestId('expand-sl-tp-button')
+ fireEvent.click(expandButton)
+
+ const approveButton = await findByTestId('sl-tp-ack-proceed')
+ fireEvent.click(approveButton)
+
+ const stopLossInput = await findByTestId('trade-panel-stop-loss-input')
+ fireEvent.change(stopLossInput, { target: { value: '2150' } })
+
+ // Min / Max SL is shown when invalid
+ // Liqudation price is 2,172.46 and stop is limited to 2,100.07
+ const slMinMaxLabel = await findByText('Max: 2,107.29')
+ expect(slMinMaxLabel).toBeTruthy()
+
+ expect(submitButton).toBeDisabled()
+
+ // Input valid when below max
+ fireEvent.change(stopLossInput, { target: { value: '2099' } })
+ expect(submitButton).toBeEnabled()
+ })
+
+ test('Stop loss becomes disabled above a certain leverage', async () => {
+ const store = setupStore(preloadedStateWithSmartMarginAccount())
+ const { findByTestId, findByText } = render(
+ <MockProviders route="market/?accountType=cross_margin&asset=sETH" store={store}>
+ <Market />
+ </MockProviders>
+ )
+
+ sdk.futures.getCrossMarginTradePreview = () =>
+ Promise.resolve({
+ ...MOCK_TRADE_PREVIEW,
+ liqPrice: wei('1760'),
+ size: wei('1.1'),
+ leverage: wei('20'),
+ })
+
+ const marginInput = await findByTestId('set-order-margin-susd-desktop')
+ fireEvent.change(marginInput, { target: { value: '100' } })
+
+ const sizeInput = await findByTestId('set-order-size-amount-susd-desktop')
+ fireEvent.change(sizeInput, { target: { value: '2000' } })
+
+ const fees = await findByText('$1.69')
+ expect(fees).toBeTruthy()
+
+ const submitButton = await findByTestId('trade-panel-submit-button')
+ expect(submitButton).toBeEnabled()
+
+ const expandButton = await findByTestId('expand-sl-tp-button')
+ fireEvent.click(expandButton)
+
+ const approveButton = await findByTestId('sl-tp-ack-proceed')
+ fireEvent.click(approveButton)
+
+ const stopLossInput = await findByTestId('trade-panel-stop-loss-input')
+
+ await findByText('Leverage Too High')
+ expect(stopLossInput).toBeDisabled()
+ })
+
+ test('Displays stop-loss warning in confirmation view when within 5% of liquidation price', async () => {
+ const store = setupStore(preloadedStateWithSmartMarginAccount())
+ const { findByTestId, findByText } = render(
+ <MockProviders route="market/?accountType=cross_margin&asset=sETH" store={store}>
+ <Market />
+ </MockProviders>
+ )
+
+ sdk.futures.getCrossMarginTradePreview = () =>
+ Promise.resolve({
+ ...MOCK_TRADE_PREVIEW,
+ liqPrice: wei('2172.467580351348039045'),
+ side: PositionSide.SHORT,
+ size: wei('-0.5411'),
+ })
+
+ const shortToggle = await findByTestId('position-side-short-button')
+ fireEvent.click(shortToggle)
+
+ const marginInput = await findByTestId('set-order-margin-susd-desktop')
+ fireEvent.change(marginInput, { target: { value: '100' } })
+
+ const sizeInput = await findByTestId('set-order-size-amount-susd-desktop')
+ fireEvent.change(sizeInput, { target: { value: '1000' } })
+
+ const fees = await findByText('$1.69')
+ expect(fees).toBeTruthy()
+
+ const expandButton = await findByTestId('expand-sl-tp-button')
+ fireEvent.click(expandButton)
+
+ const approveButton = await findByTestId('sl-tp-ack-proceed')
+ fireEvent.click(approveButton)
+
+ const stopLossInput = await findByTestId('trade-panel-stop-loss-input')
+ fireEvent.change(stopLossInput, { target: { value: '2090' } })
+
+ const submitButton = await findByTestId('trade-panel-submit-button')
+ fireEvent.click(submitButton)
+
+ // Trade confirm button is disabled until the user acknowledges the warning
+ const confirmButton = await findByTestId('trade-confirm-order-button')
+ expect(confirmButton).toBeDisabled()
+
+ const warningCheck = await findByTestId('sl-risk-warning')
+ fireEvent.click(warningCheck)
+ expect(confirmButton).toBeEnabled()
+ })
+})

packages/app/src/components/AcceptWarningView.tsx

@@ -0,0 +1,38 @@
+import styled from 'styled-components'
+
+import { Checkbox } from 'components/Checkbox'
+
+type Props = {
+ checked: boolean
+ message: string
+ style?: Record<string, string>
+ id?: string
+ onChangeChecked: (checked: boolean) => void
+}
+
+export default function AcceptWarningView({ checked, id, onChangeChecked, style, message }: Props) {
+ return (
+ <Container style={style}>
+ <Checkbox
+ id={id ?? 'accept-warning'}
+ data-testid={id}
+ label={message}
+ checkSide="right"
+ checked={checked}
+ color="yellow"
+ onChange={() => onChangeChecked(!checked)}
+ />
+ </Container>
+ )
+}
+
+const Container = styled.div<{ style?: Record<string, string> }>`
+ color: ${(props) => props.theme.colors.selectedTheme.button.yellow.text};
+ font-size: 12px;
+ margin: ${(props) => props.style?.margin ?? '0'};
+ padding: 15px;
+ border: 1px solid rgba(239, 104, 104, 0);
+ background: ${(props) => props.theme.colors.selectedTheme.button.yellow.fill};
+ border-radius: 8px;
+ cursor: default;
+`