v7.9.5

package.json

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

packages/app/package.json

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

packages/app/src/components/ColoredPrice.tsx

@@ -2,12 +2,13 @@ import styled from 'styled-components'
 
 import { PriceChange } from 'state/prices/types'
 
+import { Body } from './Text'
+
 export const getColorFromPriceChange = (change?: PriceChange) => {
 	return !change ? 'white' : change === 'up' ? 'green' : 'red'
 }
 
-const ColoredPrice = styled.div<{ priceChange?: PriceChange }>`
-	font-size: 13px;
+const ColoredPrice = styled(Body)<{ priceChange?: PriceChange }>`
 	font-family: ${(props) => props.theme.fonts.mono};
 	color: ${(props) => {
 		const color = getColorFromPriceChange(props.priceChange)

packages/app/src/components/Text/Body.tsx

@@ -1,8 +1,10 @@
 import { ComponentType, memo } from 'react'
 import styled, { css } from 'styled-components'
 
+export type FontSize = 'xsmall' | 'small' | 'medium' | 'large'
+
 export type BodyProps = React.HTMLAttributes<HTMLParagraphElement> & {
-	size?: 'xsmall' | 'small' | 'medium' | 'large'
+	size?: FontSize
 	weight?: 'regular' | 'bold' | 'black'
 	color?: 'primary' | 'secondary' | 'tertiary' | 'positive' | 'negative' | 'preview'
 	type?: 'p' | 'span'
@@ -51,7 +53,7 @@ const Body: React.FC<BodyProps> = memo(
 		)
 )
 
-const sizeMap = { xsmall: 10, small: 12, medium: 13, large: 15 } as const
+export const fontSizeMap = { xsmall: 10, small: 12, medium: 13, large: 15 } as const
 
 const getFontFamily = (weight: NonNullable<BodyProps['weight']>, mono?: boolean) => {
 	return mono ? (weight !== 'regular' ? 'monoBold' : 'mono') : weight
@@ -73,7 +75,7 @@ const BODY_STYLE = css<StyledBodyProps>`
 
 	${(props) => css`
 		color: ${props.theme.colors.selectedTheme.newTheme.text[props.$color]};
-		font-size: ${props.$fontSize ?? sizeMap[props.$size]}px;
+		font-size: ${props.$fontSize ?? fontSizeMap[props.$size]}px;
 		font-family: ${props.theme.fonts[getFontFamily(props.$weight, props.$mono)]};
 		${props.$capitalized &&
 		css`

packages/app/src/constants/ui.ts

@@ -17,6 +17,3 @@ export enum zIndex {
 }
 
 export const STAKING_DISABLED = false
-
-// This flag controls the one-click swap-deposit-trade feature
-export const SWAP_DEPOSIT_TRADE_ENABLED = false

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

@@ -26,7 +26,7 @@ import {
 	selectStakingV1,
 	selectTotalVestable,
 } from 'state/staking/selectors'
-import { selectRedirectToMigration } from 'state/stakingMigration/selectors'
+import { selectStartMigration } from 'state/stakingMigration/selectors'
 import media from 'styles/media'
 
 import MigratePage from './migrate'
@@ -45,7 +45,7 @@ const StakingPage: StakingComponent = () => {
 	const kwentaRewards = useAppSelector(selectKwentaRewards)
 	const stakedResetTime = useAppSelector(selectStakedResetTime)
 	const stakingV1 = useAppSelector(selectStakingV1)
-	const redirectToMigration = useAppSelector(selectRedirectToMigration)
+	const startMigration = useAppSelector(selectStartMigration)
 
 	useFetchStakeMigrateData()
 
@@ -70,8 +70,8 @@ const StakingPage: StakingComponent = () => {
 
 	const timeLeft = useMemo(
 		() =>
-			stakedResetTime > new Date().getTime() / 1000
-				? formatTruncatedDuration(stakedResetTime - new Date().getTime() / 1000)
+			stakedResetTime > Date.now() / 1000
+				? formatTruncatedDuration(stakedResetTime - Date.now() / 1000)
 				: NO_VALUE,
 		[stakedResetTime]
 	)
@@ -200,7 +200,7 @@ const StakingPage: StakingComponent = () => {
 			  }
 	}, [currentTab, handleChangeTab, stakingInfo, stakingV1, t])
 
-	return redirectToMigration ? (
+	return startMigration ? (
 		<MigratePage />
 	) : (
 		<>

packages/app/src/queries/rates/utils.ts

@@ -31,6 +31,7 @@ export const mapPythCandles = (candleData: PythResponse): Candle[] => {
 
 export const formatPythSymbol = (asset: string): string => {
 	if (asset === 'ETHBTC') return 'Crypto.ETH/BTC'
+	if (asset === 'STETH/ETH') return 'Crypto.STETH/ETH'
 	const prefix =
 		Object.keys(NON_CRYPTO_ASSET_TYPES).find((type) =>
 			NON_CRYPTO_ASSET_TYPES[type].includes(asset)

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

@@ -11,11 +11,7 @@ import ROUTES from 'constants/routes'
 import AppLayout from 'sections/shared/Layout/AppLayout'
 import { useAppSelector } from 'state/hooks'
 import { selectStakingMigrationRequired } from 'state/staking/selectors'
-import {
-	selectInMigrationPeriod,
-	selectIsMigrationPeriodStarted,
-	selectStartMigration,
-} from 'state/stakingMigration/selectors'
+import { selectStartMigration } from 'state/stakingMigration/selectors'
 import { LeftSideContent, PageContent } from 'styles/common'
 
 import Links from './Links'
@@ -34,10 +30,8 @@ const Tabs = Object.values(Tab)
 const DashboardLayout: FC<{ children?: ReactNode }> = ({ children }) => {
 	const { t } = useTranslation()
 	const router = useRouter()
-	const stakngMigrationRequired = useAppSelector(selectStakingMigrationRequired)
+	const stakingMigrationRequired = useAppSelector(selectStakingMigrationRequired)
 	const startMigration = useAppSelector(selectStartMigration)
-	const isMigrationPeriodStarted = useAppSelector(selectIsMigrationPeriodStarted)
-	const inMigrationPeriod = useAppSelector(selectInMigrationPeriod)
 
 	const tabQuery = useMemo(() => {
 		if (router.pathname) {
@@ -76,17 +70,14 @@ const DashboardLayout: FC<{ children?: ReactNode }> = ({ children }) => {
 				label: t('dashboard.tabs.staking'),
 				active: activeTab === Tab.Stake,
 				href: ROUTES.Dashboard.Stake,
-				hidden:
-					(stakngMigrationRequired || startMigration) &&
-					isMigrationPeriodStarted &&
-					inMigrationPeriod,
+				hidden: startMigration,
 			},
 			{
 				name: Tab.Migrate,
 				label: t('dashboard.tabs.migrate'),
 				active: activeTab === Tab.Migrate,
 				href: ROUTES.Dashboard.Migrate,
-				hidden: !stakngMigrationRequired,
+				hidden: !stakingMigrationRequired && !startMigration,
 			},
 			{
 				name: Tab.Governance,
@@ -96,14 +87,7 @@ const DashboardLayout: FC<{ children?: ReactNode }> = ({ children }) => {
 				external: true,
 			},
 		],
-		[
-			t,
-			activeTab,
-			stakngMigrationRequired,
-			startMigration,
-			isMigrationPeriodStarted,
-			inMigrationPeriod,
-		]
+		[t, activeTab, startMigration, stakingMigrationRequired]
 	)
 
 	const visibleTabs = TABS.filter(({ hidden }) => !hidden)

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

@@ -92,7 +92,6 @@ const FuturesMarketsTable: React.FC<FuturesMarketsTableProps> = ({ search }) =>
 				<TableContainer>
 					<StyledTable
 						data={data}
-						showPagination
 						onTableRowClick={(row) => {
 							router.push(ROUTES.Markets.MarketPair(row.original.asset, accountType))
 						}}
@@ -138,7 +137,9 @@ const FuturesMarketsTable: React.FC<FuturesMarketsTableProps> = ({ search }) =>
 								cell: (cellProps) => {
 									return (
 										<ColoredPrice priceChange={cellProps.row.original.priceInfo?.change}>
-											{formatDollars(cellProps.row.original.price, { suggestDecimals: true })}
+											{formatDollars(cellProps.row.original.price, {
+												suggestDecimalsForAsset: cellProps.row.original.asset,
+											})}
 										</ColoredPrice>
 									)
 								},

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

@@ -123,7 +123,7 @@ const FuturesPositionsTable: FC<FuturesPositionTableProps> = ({
 												<StyledValue>
 													<ColoredPrice priceChange={cellProps.row.original.priceInfo?.change}>
 														{formatDollars(cellProps.row.original.marketPrice, {
-															suggestDecimals: true,
+															suggestDecimalsForAsset: cellProps.row.original.market.asset,
 														})}
 													</ColoredPrice>
 												</StyledValue>

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

@@ -30,14 +30,16 @@ const StakingPortfolio: FC<StakingPortfolioProps> = memo(({ title, cardsInfo })
 							{icon}
 						</LabelContainer>
 						<FlexDivRow columnGap="15px" justifyContent="flex-start">
-							{card.map(({ key, title, value, onClick }) => (
-								<FlexDivCol key={key} onClick={onClick} rowGap="5px">
-									<Body color="secondary">{title}</Body>
-									<Body size="large" color="preview">
-										{value}
-									</Body>
-								</FlexDivCol>
-							))}
+							{card
+								.filter((info) => !info.hidden)
+								.map(({ key, title, value, onClick }) => (
+									<FlexDivCol key={key} onClick={onClick} rowGap="5px">
+										<Body color="secondary">{title}</Body>
+										<Body size="large" color="preview">
+											{value}
+										</Body>
+									</FlexDivCol>
+								))}
 						</FlexDivRow>
 					</StyledFlexDivCol>
 				))}

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

@@ -10,10 +10,11 @@ import { Body, Heading } from 'components/Text'
 import { STAKING_DISABLED } from 'constants/ui'
 import { StakingCard } from 'sections/dashboard/Stake/card'
 import { useAppDispatch, useAppSelector } from 'state/hooks'
-import { claimStakingRewards, claimStakingRewardsV2 } from 'state/staking/actions'
+import { claimStakingRewards, claimStakingRewardsV2, compoundRewards } from 'state/staking/actions'
 import {
 	selectApy,
 	selectClaimableBalance,
+	selectIsCompoundingRewards,
 	selectIsGettingReward,
 	selectStakedKwentaBalance,
 	selectStakingV1,
@@ -30,6 +31,7 @@ const StakingTab = () => {
 	const claimableBalance = useAppSelector(selectClaimableBalance)
 	const stakedKwentaBalance = useAppSelector(selectStakedKwentaBalance)
 	const isClaimingReward = useAppSelector(selectIsGettingReward)
+	const isCompoundingRewards = useAppSelector(selectIsCompoundingRewards)
 	const stakingV1 = useAppSelector(selectStakingV1)
 	const apy = useAppSelector(selectApy)
 
@@ -41,6 +43,10 @@ const StakingTab = () => {
 		}
 	}, [dispatch, stakingV1])
 
+	const handleCompoundReward = useCallback(() => {
+		dispatch(compoundRewards())
+	}, [dispatch])
+
 	const stakingAndRewardsInfo: StakingCards[] = useMemo(
 		() => [
 			{
@@ -116,6 +122,19 @@ const StakingTab = () => {
 					>
 						{t('dashboard.stake.tabs.staking.claim')}
 					</Button>
+					{!stakingV1 && (
+						<Button
+							variant="flat"
+							size="small"
+							textTransform="uppercase"
+							isRounded
+							loading={isCompoundingRewards}
+							disabled={claimableBalance.eq(0) || isCompoundingRewards || STAKING_DISABLED}
+							onClick={handleCompoundReward}
+						>
+							{t('dashboard.stake.tabs.staking.compound')}
+						</Button>
+					)}
 				</FlexDivRow>
 			</CardGridContainer>
 		</SplitContainer>