v7.4.14(app) / v1.0.4(sdk)

v7.4.14(app) / v1.0.4(sdk)

.github/dependabot.yml

@@ -2,7 +2,7 @@ version: 2
 updates:
   - package-ecosystem: "github-actions"
     directory: "/" 
-    open-pull-requests-limit: 8
+    open-pull-requests-limit: 3
     target-branch: "dev"
     schedule:
       interval: "daily"
@@ -11,7 +11,7 @@ updates:
     directory: "/"
     schedule:
       interval: "daily"
-    open-pull-requests-limit: 8
+    open-pull-requests-limit: 3
     target-branch: "dev"
     labels:
       - "npm"

.github/workflows/publish-sdk.yml

@@ -34,6 +34,9 @@ jobs:
 
       - name: Build code
         run: pnpm build
+
+      - name: Bump version
+        run: pnpm bump-version
 
       - name: Publish
         run: |

package.json

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

packages/app/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@kwenta/app",
-	"version": "7.4.13",
+	"version": "7.4.14",
 	"scripts": {
 		"dev": "next",
 		"build": "next build",
@@ -106,7 +106,7 @@
 		"jest-environment-jsdom": "28.1.0",
 		"jest-preview": "^0.3.1",
 		"jest-transformer-svg": "^2.0.1",
-		"next-router-mock": "0.9.3",
+		"next-router-mock": "0.9.7",
 		"pinst": "3.0.0",
 		"postcss": "8.4.27",
 		"prettier": "2.8.8",

packages/app/src/components/Button/TabButton.tsx

@@ -63,6 +63,7 @@ const TabButton: React.FC<TabButtonProps> = React.memo(
 				$vertical={props.vertical}
 				$nofill={props.nofill}
 				$flat={flat}
+				$isRounded={props.isRounded}
 				onClick={onClick}
 				$variant={props.variant}
 			>
@@ -113,11 +114,11 @@ const sharedStyle = css<{
 	&:disabled {
 		background-color: transparent;
 		p {
-			color: ${(props) => props.theme.colors.selectedTheme.button.tab.disabled.text};
+			color: ${(props) => props.theme.colors.selectedTheme.button.disabled.text};
 		}
 		svg {
 			path {
-				fill: ${(props) => props.theme.colors.selectedTheme.button.tab.disabled.text};
+				fill: ${(props) => props.theme.colors.selectedTheme.button.disabled.text};
 			}
 		}
 
@@ -137,7 +138,7 @@ const sharedStyle = css<{
 		color: ${(props) =>
 			props.active
 				? props.theme.colors.selectedTheme.button.text.primary
-				: props.theme.colors.selectedTheme.gray};
+				: props.theme.colors.selectedTheme.newTheme.text.secondary};
 	}
 
 	.detail {
@@ -184,9 +185,9 @@ const InlineTab = styled.div<{
 
 const StyledButton = styled(Button).attrs({ size: 'small' })<{
 	$vertical?: boolean
+	$isRounded?: boolean
 	$nofill?: boolean
 	$flat?: boolean
-	active?: boolean
 	$variant?: 'noOutline' | undefined
 }>`
 	p {
@@ -195,17 +196,15 @@ const StyledButton = styled(Button).attrs({ size: 'small' })<{
 
 	${(props) => css`
 		flex-direction: ${props.$vertical ? 'column' : 'row'};
-		border-radius: ${props.isRounded ? '100px' : '8px'};
+		border-radius: ${props.$isRounded ? '100px' : '8px'};
 	`}
 	${sharedStyle}
-	
+
 	${(props) =>
 		props.$variant === 'noOutline' &&
 		css`
 			border: none;
 			border-radius: 100px;
-			padding: 10px 15px;
-			width: 75px;
 		`}
 `
 

packages/app/src/components/Currency/CurrencyPrice/CurrencyPrice.tsx

@@ -47,6 +47,7 @@ export const CurrencyPrice: FC<CurrencyPriceProps> = memo(
 						suggestDecimals: true,
 						sign: currencyKey === 'sUSD' ? '$' : sign,
 						currencyKey: showCurrencyKey ? currencyKey : undefined,
+						maxDecimals: 4,
 						...formatOptions,
 					})}
 				</NumericValue>

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

@@ -41,7 +41,7 @@ const Pagination: FC<PaginationProps> = React.memo(
 
 		return (
 			<>
-				<PaginationContainer compact={compact}>
+				<PaginationContainer $compact={compact} $bottomBorder={!!extra}>
 					<ArrowButtonContainer>
 						<ArrowButton onClick={firstPage} disabled={!canPreviousPage}>
 							<LeftEndArrowIcon />
@@ -84,15 +84,20 @@ const PageInfo = styled.span`
 	color: ${(props) => props.theme.colors.selectedTheme.gray};
 `
 
-const PaginationContainer = styled(GridDivCenteredCol)<{ compact: boolean }>`
+const PaginationContainer = styled(GridDivCenteredCol)<{
+	$compact: boolean
+	$bottomBorder: boolean
+}>`
 	grid-template-columns: auto 1fr auto;
-	padding: ${(props) => (props.compact ? '10px' : '15px')} 12px;
+	padding: ${(props) => (props.$compact ? '10px' : '15px')} 12px;
 	border-bottom-left-radius: 4px;
 	border-bottom-right-radius: 4px;
 	justify-items: center;
+	border-top: ${(props) => props.theme.colors.selectedTheme.border};
+	border-bottom: ${(props) =>
+		props.$bottomBorder ? props.theme.colors.selectedTheme.border : 'none'};
 
 	${media.lessThan('lg')`
-		border: ${(props) => props.theme.colors.selectedTheme.border};
 		border-radius: 0px;
 	`}
 `

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

@@ -7,7 +7,7 @@ import {
 	getSortedRowModel,
 } from '@tanstack/react-table'
 import type { ColumnDef, Row, SortingState, VisibilityState } from '@tanstack/react-table'
-import React, { DependencyList, FC, useCallback, useMemo, useRef, useState } from 'react'
+import React, { DependencyList, FC, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import styled, { css } from 'styled-components'
 import { genericMemo } from 'types/helpers'
 
@@ -141,6 +141,12 @@ const Table = <T,>({
 		[onTableRowClick]
 	)
 
+	useEffect(() => {
+		if (typeof lastRef === 'function' && data.length > 0) {
+			lastRef(defaultRef.current)
+		}
+	}, [lastRef, data.length])
+
 	return (
 		<>
 			<TableContainer>

packages/app/src/constants/announcement.ts

@@ -1,7 +1,7 @@
 import { MILLISECONDS_PER_DAY } from '@kwenta/sdk/constants'
 
 // Shows or hides the home page banner entirely when set to true/false
-export const BANNER_ENABLED = true
+export const BANNER_ENABLED = false
 // Sets the link destination for the banner component, or renders the banner as
 // plain, un-clickable text if set to a falsey value (`false`, `null`, '', etc...)
 export const BANNER_LINK_URL =

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

@@ -1,27 +1,38 @@
 import Head from 'next/head'
-import { ReactNode } from 'react'
+import { ReactNode, useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { MobileHiddenView, MobileOnlyView } from 'components/Media'
 import Spacer from 'components/Spacer'
 import DashboardLayout from 'sections/dashboard/DashboardLayout'
+import HistoryTabs, { HistoryTab } from 'sections/dashboard/HistoryTabs'
 import TradesTab from 'sections/futures/MobileTrade/UserTabs/TradesTab'
-import Trades from 'sections/futures/Trades'
 import { usePollDashboardFuturesData } from 'state/futures/hooks'
 
 type HistoryPageProps = React.FC & { getLayout: (page: ReactNode) => JSX.Element }
 
 const HistoryPage: HistoryPageProps = () => {
 	const { t } = useTranslation()
+
 	usePollDashboardFuturesData()
+
+	const [currentTab, setCurrentTab] = useState(HistoryTab.Positions)
+
+	const handleChangeTab = useCallback(
+		(tab: HistoryTab) => () => {
+			setCurrentTab(tab)
+		},
+		[]
+	)
+
 	return (
 		<>
 			<Head>
 				<title>{t('dashboard-history.page-title')}</title>
 			</Head>
 			<MobileHiddenView>
-				<Spacer height={15} />
-				<Trades rounded={true} noBottom={false} />
+				<Spacer height={10} />
+				<HistoryTabs onChangeTab={handleChangeTab} currentTab={currentTab} />
 				<Spacer height={50} />
 			</MobileHiddenView>
 			<MobileOnlyView>

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

@@ -14,6 +14,7 @@ import styled from 'styled-components'
 import ChangePercent from 'components/ChangePercent'
 import ColoredPrice from 'components/ColoredPrice'
 import Currency from 'components/Currency'
+import { FlexDivRowCentered } from 'components/layout/flex'
 import MarketBadge from 'components/MarketBadge'
 import { DesktopOnlyView, MobileOrTabletView } from 'components/Media'
 import Spacer from 'components/Spacer'
@@ -392,21 +393,18 @@ const StyledTable = styled(Table)`
 	margin-bottom: 20px;
 ` as typeof Table
 
-const StyledText = styled.div`
-	display: flex;
-	align-items: center;
-	margin-bottom: -4px;
-	grid-column: 2;
-	grid-row: 1;
+const StyledText = styled(FlexDivRowCentered)`
+	justify-content: space-between;
 	color: ${(props) => props.theme.colors.selectedTheme.button.text.primary};
 	font-family: ${(props) => props.theme.fonts.bold};
 `
 
 const MarketContainer = styled.div`
 	display: grid;
 	grid-template-rows: auto auto;
-	grid-template-columns: auto auto;
+	grid-template-columns: 40px auto;
 	align-items: center;
+	width: 200px;
 `
 
 const StyledMobileTable = styled(StyledTable)`

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

@@ -0,0 +1,101 @@
+import { useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import styled from 'styled-components'
+
+import TabButton from 'components/Button/TabButton'
+import { TabPanel } from 'components/Tab'
+import TraderHistory from 'sections/futures/TraderHistory'
+import Trades from 'sections/futures/Trades'
+import { fetchPositionHistoryForTrader } from 'state/futures/actions'
+import { selectUsersPositionHistory } from 'state/futures/selectors'
+import { useAppDispatch, useAppSelector } from 'state/hooks'
+import { selectWallet } from 'state/wallet/selectors'
+import media from 'styles/media'
+
+export enum HistoryTab {
+	Positions = 'positions',
+	Trades = 'trades',
+}
+
+type HistoryTabsProp = {
+	currentTab: HistoryTab
+	onChangeTab(tab: HistoryTab): () => void
+}
+
+const HistoryTabs: React.FC<HistoryTabsProp> = ({ currentTab, onChangeTab }) => {
+	const { t } = useTranslation()
+	const dispatch = useAppDispatch()
+	const walletAddress = useAppSelector(selectWallet)
+	const positionHistory = useAppSelector(selectUsersPositionHistory)
+
+	useEffect(() => {
+		dispatch(fetchPositionHistoryForTrader(walletAddress ?? ''))
+	}, [dispatch, walletAddress])
+
+	return (
+		<HistoryTabsContainer>
+			<HistoryTabsHeader>
+				<TabButtons>
+					<TabButton
+						variant="noOutline"
+						title={t('dashboard.history.tabs.positions')}
+						onClick={onChangeTab(HistoryTab.Positions)}
+						active={currentTab === HistoryTab.Positions}
+					/>
+					<TabButton
+						variant="noOutline"
+						title={t('dashboard.history.tabs.trades')}
+						onClick={onChangeTab(HistoryTab.Trades)}
+						active={currentTab === HistoryTab.Trades}
+					/>
+				</TabButtons>
+			</HistoryTabsHeader>
+			<div>
+				<TabPanel name={HistoryTab.Positions} activeTab={currentTab}>
+					<TraderHistory
+						trader={walletAddress ?? ''}
+						positionHistory={positionHistory}
+						resetSelection={() => {}}
+						compact={true}
+					/>
+				</TabPanel>
+				<TabPanel name={HistoryTab.Trades} activeTab={currentTab}>
+					<Trades rounded={true} noBottom={false} />
+				</TabPanel>
+			</div>
+		</HistoryTabsContainer>
+	)
+}
+
+const HistoryTabsHeader = styled.div`
+	display: flex;
+	justify-content: space-between;
+	margin-bottom: 15px;
+
+	${media.lessThan('md')`
+		flex-direction: column;
+		row-gap: 10px;
+		margin-bottom: 25px;
+		margin-top: 0px;
+	`}
+`
+
+const HistoryTabsContainer = styled.div`
+	${media.lessThan('md')`
+		padding: 15px;
+	`}
+`
+
+const TabButtons = styled.div`
+	display: flex;
+
+	& > button:not(:last-of-type) {
+		margin-right: 25px;
+	}
+
+	${media.lessThan('md')`
+		justify-content: flex-start;
+	`}
+`
+
+export default HistoryTabs