Kwenta · platschi · Oct 16, 2023 · Oct 13, 2023 · Oct 13, 2023 · Oct 16, 2023
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "kwenta",
-	"version": "7.9.8",
+	"version": "7.9.9",
 	"description": "Kwenta",
 	"main": "index.js",
 	"scripts": {
@@ -51,5 +51,16 @@
 		"lint-staged": "13.2.3",
 		"prettier": "2.8.8",
 		"typescript": "5.1.6"
+	},
+	"pnpm": {
+		"overrides": {
+			"got@<11.8.5": ">=11.8.5",
+			"@adobe/css-tools@<4.3.1": ">=4.3.1",
+			"semver@<5.7.2": ">=5.7.2",
+			"semver@>=7.0.0 <7.5.2": ">=7.5.2",
+			"get-func-name@<2.0.1": ">=2.0.1",
+			"zod@<=3.22.2": ">=3.22.3",
+			"postcss@<8.4.31": ">=8.4.31"
+		}
 	}
 }
diff --git a/packages/app/package.json b/packages/app/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@kwenta/app",
-	"version": "7.9.8",
+	"version": "7.9.9",
 	"scripts": {
 		"dev": "next",
 		"build": "next build",

diff --git a/packages/app/src/constants/links.ts b/packages/app/src/constants/links.ts
@@ -17,9 +17,6 @@ export const EXTERNAL_LINKS = {
 		OneInchLink: (from: CurrencyKey, to: CurrencyKey) => `https://1inch.exchange/#/${from}/${to}`,
 		OptimismTokenBridge: 'https://gateway.optimism.io',
 	},
-	Options: {
-		Trade: 'https://options.kwenta.eth.limo/#/trade',
-	},
 	Synthetix: {
 		Home: 'https://www.synthetix.io',
 		Litepaper: 'https://docs.synthetix.io/litepaper/',

diff --git a/packages/app/src/constants/routes.ts b/packages/app/src/constants/routes.ts
@@ -26,6 +26,7 @@ export const ROUTES = {
 		Stake: normalizeRoute('/dashboard', 'staking', 'tab'),
 		Rewards: normalizeRoute('/dashboard', 'rewards', 'tab'),
 		Migrate: normalizeRoute('/dashboard', 'migrate', 'tab'),
+		Redeem: normalizeRoute('/dashboard', 'redeem', 'tab'),
 		TradingRewards: formatUrl('/dashboard/staking', { tab: 'trading-rewards' }),
 	},
 	Exchange: {

diff --git a/packages/app/src/pages/dashboard/redeem.tsx b/packages/app/src/pages/dashboard/redeem.tsx
@@ -0,0 +1,25 @@
+import Head from 'next/head'
+import { FC, ReactNode } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import DashboardLayout from 'sections/dashboard/DashboardLayout'
+import RedemptionTab from 'sections/dashboard/RedemptionTab'
+
+type RedemptionComponent = FC & { getLayout: (page: ReactNode) => JSX.Element }
+
+const RedeemPage: RedemptionComponent = () => {
+	const { t } = useTranslation()
+
+	return (
+		<>
+			<Head>
+				<title>{t('dashboard-redeem.page-title')}</title>
+			</Head>
+			<RedemptionTab />
+		</>
+	)
+}
+
+RedeemPage.getLayout = (page) => <DashboardLayout>{page}</DashboardLayout>
+
+export default RedeemPage
diff --git a/packages/app/src/sections/dashboard/DashboardLayout.tsx b/packages/app/src/sections/dashboard/DashboardLayout.tsx
@@ -10,7 +10,7 @@ import { EXTERNAL_LINKS } from 'constants/links'
 import ROUTES from 'constants/routes'
 import AppLayout from 'sections/shared/Layout/AppLayout'
 import { useAppSelector } from 'state/hooks'
-import { selectStakingMigrationRequired } from 'state/staking/selectors'
+import { selectRedemptionRequired, selectStakingMigrationRequired } from 'state/staking/selectors'
 import { selectStartMigration } from 'state/stakingMigration/selectors'
 import { LeftSideContent, PageContent } from 'styles/common'
 
@@ -23,6 +23,7 @@ enum Tab {
 	Governance = 'governance',
 	Stake = 'staking',
 	Migrate = 'migrate',
+	Redeem = 'redeem',
 }
 
 const Tabs = Object.values(Tab)
@@ -32,6 +33,7 @@ const DashboardLayout: FC<{ children?: ReactNode }> = ({ children }) => {
 	const router = useRouter()
 	const stakingMigrationRequired = useAppSelector(selectStakingMigrationRequired)
 	const startMigration = useAppSelector(selectStartMigration)
+	const redemptionRequired = useAppSelector(selectRedemptionRequired)
 
 	const tabQuery = useMemo(() => {
 		if (router.pathname) {
@@ -79,6 +81,13 @@ const DashboardLayout: FC<{ children?: ReactNode }> = ({ children }) => {
 				href: ROUTES.Dashboard.Migrate,
 				hidden: !stakingMigrationRequired && !startMigration,
 			},
+			{
+				name: Tab.Redeem,
+				label: t('dashboard.tabs.redeem'),
+				active: activeTab === Tab.Redeem,
+				href: ROUTES.Dashboard.Redeem,
+				hidden: !redemptionRequired,
+			},
 			{
 				name: Tab.Governance,
 				label: t('dashboard.tabs.governance'),
@@ -87,7 +96,7 @@ const DashboardLayout: FC<{ children?: ReactNode }> = ({ children }) => {
 				external: true,
 			},
 		],
-		[t, activeTab, startMigration, stakingMigrationRequired]
+		[t, activeTab, startMigration, stakingMigrationRequired, redemptionRequired]
 	)
 
 	const visibleTabs = TABS.filter(({ hidden }) => !hidden)

diff --git a/packages/app/src/sections/dashboard/RedemptionTab.tsx b/packages/app/src/sections/dashboard/RedemptionTab.tsx
@@ -0,0 +1,49 @@
+import { useTranslation } from 'react-i18next'
+import styled from 'styled-components'
+
+import { FlexDivRowCentered } from 'components/layout/flex'
+import { SplitContainer } from 'components/layout/grid'
+import { Heading } from 'components/Text'
+import media from 'styles/media'
+
+import RedeemInputCard from './Stake/InputCards/RedeempInputCard'
+
+const RedemptionTab = () => {
+	const { t } = useTranslation()
+
+	return (
+		<Container>
+			<TitleContainer>
+				<StyledHeading variant="h4">{t('dashboard.stake.tabs.redeem.title')}</StyledHeading>
+			</TitleContainer>
+			<SplitContainer>
+				<RedeemInputCard
+					inputLabel={t('dashboard.stake.tabs.stake-table.vkwenta-token')}
+					isVKwenta
+				/>
+				<RedeemInputCard
+					inputLabel={t('dashboard.stake.tabs.stake-table.vekwenta-token')}
+					isVKwenta={false}
+				/>
+			</SplitContainer>
+		</Container>
+	)
+}
+
+const StyledHeading = styled(Heading)`
+	font-weight: 400;
+`
+
+const TitleContainer = styled(FlexDivRowCentered)`
+	margin: 30px 0px;
+	column-gap: 10%;
+`
+
+const Container = styled.div`
+	${media.lessThan('lg')`
+		padding: 0px 15px;
+	`}
+	margin-top: 20px;
+`
+
+export default RedemptionTab
diff --git a/packages/app/src/sections/dashboard/Stake/InputCards/RedeempInputCard.tsx b/packages/app/src/sections/dashboard/Stake/InputCards/RedeempInputCard.tsx
@@ -0,0 +1,130 @@
+import { truncateNumbers } from '@kwenta/sdk/utils'
+import { FC, useCallback, useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import styled from 'styled-components'
+
+import Button from 'components/Button'
+import ErrorView from 'components/ErrorView'
+import { FlexDivRowCentered } from 'components/layout/flex'
+import { StakingCard } from 'sections/dashboard/Stake/card'
+import { useAppDispatch, useAppSelector } from 'state/hooks'
+import { approveKwentaToken, redeemToken } from 'state/staking/actions'
+import {
+	selectIsVeKwentaTokenApproved,
+	selectIsVKwentaTokenApproved,
+	selectVeKwentaBalance,
+	selectVKwentaBalance,
+} from 'state/staking/selectors'
+import { selectDisableRedeemEscrowKwenta } from 'state/stakingMigration/selectors'
+import { numericValueCSS } from 'styles/common'
+
+type RedeemInputCardProps = {
+	inputLabel: string
+	isVKwenta: boolean
+}
+
+const RedeemInputCard: FC<RedeemInputCardProps> = ({ inputLabel, isVKwenta }) => {
+	const { t } = useTranslation()
+	const dispatch = useAppDispatch()
+
+	const vKwentaBalance = useAppSelector(selectVKwentaBalance)
+	const veKwentaBalance = useAppSelector(selectVeKwentaBalance)
+	const isVKwentaApproved = useAppSelector(selectIsVKwentaTokenApproved)
+	const isVeKwentaApproved = useAppSelector(selectIsVeKwentaTokenApproved)
+	const VeKwentaDisableRedeem = useAppSelector(selectDisableRedeemEscrowKwenta)
+
+	const isApproved = useMemo(
+		() => (isVKwenta ? isVKwentaApproved : isVeKwentaApproved),
+		[isVKwenta, isVKwentaApproved, isVeKwentaApproved]
+	)
+
+	const balance = useMemo(
+		() => (isVKwenta ? vKwentaBalance : veKwentaBalance),
+		[isVKwenta, vKwentaBalance, veKwentaBalance]
+	)
+
+	const DisableRedeem = useMemo(
+		() => (isVKwenta ? false : VeKwentaDisableRedeem),
+		[isVKwenta, VeKwentaDisableRedeem]
+	)
+
+	const buttonLabel = useMemo(() => {
+		return isApproved
+			? t('dashboard.stake.tabs.stake-table.redeem')
+			: t('dashboard.stake.tabs.stake-table.approve')
+	}, [isApproved, t])
+
+	const submitRedeem = useCallback(() => {
+		const token = isVKwenta ? 'vKwenta' : 'veKwenta'
+
+		if (!isApproved) {
+			dispatch(approveKwentaToken(token))
+		} else {
+			dispatch(redeemToken(token))
+		}
+	}, [dispatch, isApproved, isVKwenta])
+
+	return (
+		<>
+			<StakingInputCardContainer>
+				<div>
+					<StakeInputHeader>
+						<div>{inputLabel}</div>
+						<StyledFlexDivRowCentered>
+							<div>{t('dashboard.stake.tabs.stake-table.balance')}</div>
+							<div className="max">{truncateNumbers(balance, 4)}</div>
+						</StyledFlexDivRowCentered>
+					</StakeInputHeader>
+				</div>
+				{DisableRedeem ? (
+					<ErrorView
+						messageType="warn"
+						message={t('dashboard.stake.tabs.redeem.warning')}
+						containerStyle={{
+							margin: '0',
+							marginTop: '25px',
+							padding: '10px 0',
+						}}
+					/>
+				) : (
+					<Button
+						fullWidth
+						variant="flat"
+						size="small"
+						disabled={balance.eq(0) || DisableRedeem}
+						onClick={submitRedeem}
+					>
+						{buttonLabel}
+					</Button>
+				)}
+			</StakingInputCardContainer>
+		</>
+	)
+}
+
+const StyledFlexDivRowCentered = styled(FlexDivRowCentered)`
+	column-gap: 5px;
+`
+
+const StakingInputCardContainer = styled(StakingCard)`
+	min-height: 125px;
+	max-height: 250px;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+`
+
+const StakeInputHeader = styled.div`
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 10px;
+	color: ${(props) => props.theme.colors.selectedTheme.title};
+	font-size: 14px;
+	.max {
+		color: ${(props) => props.theme.colors.selectedTheme.button.text.primary};
+		${numericValueCSS};
+	}
+`
+
+export default RedeemInputCard
diff --git a/packages/app/src/sections/futures/Trade/ShowPercentage.tsx b/packages/app/src/sections/futures/Trade/ShowPercentage.tsx
@@ -23,6 +23,15 @@ const ShowPercentage: React.FC<ShowPercentageProps> = ({
 	leverageWei,
 	sizeWei,
 }) => {
+	const isLoss = useMemo(() => {
+		if (!targetPrice || !price || !leverageSide) return false
+
+		const targetPriceWei = wei(targetPrice)
+		const positiveDiff = targetPriceWei.gt(price)
+
+		return leverageSide === 'short' ? positiveDiff : !positiveDiff
+	}, [price, targetPrice, leverageSide])
+
 	const [calculatePercentage, calculatePL] = useMemo(() => {
 		if (!targetPrice || !price || !leverageSide || !sizeWei) return ''
 		const priceWei = wei(targetPrice)
@@ -39,21 +48,24 @@ const ShowPercentage: React.FC<ShowPercentageProps> = ({
 		const percentage = diff.div(price).mul(leverageWei)
 		const profitLoss = sizeWei.mul(percentage.div(leverageWei)).mul(isStopLoss ? -1 : 1)
 
-		return [formatPercent(percentage), formatDollars(profitLoss, { sign: isStopLoss ? '' : '+' })]
+		return [
+			formatPercent(percentage),
+			formatDollars(profitLoss, { sign: profitLoss.lt(0) ? '' : '+' }),
+		]
 	}, [price, isStopLoss, leverageSide, leverageWei, targetPrice, sizeWei])
 
 	return (
 		<Body size="large" mono>
-			<ProfitLoss isStopLoss={isStopLoss}>{calculatePL}</ProfitLoss>
+			<ProfitLoss isLoss={isLoss}>{calculatePL}</ProfitLoss>
 			{calculatePercentage}
 		</Body>
 	)
 }
 
-const ProfitLoss = styled.span<{ isStopLoss: boolean }>`
+const ProfitLoss = styled.span<{ isLoss: boolean }>`
 	margin-right: 0.7rem;
-	color: ${({ theme, isStopLoss }) =>
-		isStopLoss
+	color: ${({ theme, isLoss }) =>
+		isLoss
 			? theme.colors.selectedTheme.newTheme.text.negative
 			: theme.colors.selectedTheme.newTheme.text.positive};
 `

diff --git a/packages/app/src/sections/shared/Layout/AppLayout/Header/constants.tsx b/packages/app/src/sections/shared/Layout/AppLayout/Header/constants.tsx
@@ -107,10 +107,6 @@ export const getMenuLinks = (isMobile: boolean): MenuLinks => [
 		i18nLabel: 'header.nav.referrals',
 		link: ROUTES.Referrals.Home,
 	},
-	{
-		i18nLabel: 'header.nav.options.title',
-		link: EXTERNAL_LINKS.Options.Trade,
-	},
 ]
 
 export const DESKTOP_NAV_LINKS = getMenuLinks(false).filter((m) => !m.hidden)

diff --git a/packages/app/src/state/futures/smartMargin/actions.ts b/packages/app/src/state/futures/smartMargin/actions.ts
@@ -583,8 +583,7 @@
 	(marketKey: FuturesMarketKey, price: string): AppThunk =>
 	(dispatch, getState) => {
 		const { nativeSizeDelta, orderType } = selectCloseSMPositionOrderInputs(getState())
-		const marketPrice = selectMarketIndexPrice(getState())
-		const { position } = selectEditPositionModalInfo(getState())
+		const { position, marketPrice } = selectEditPositionModalInfo(getState())
 		const closeTradeSide =
 			position?.activePosition.side === PositionSide.SHORT ? PositionSide.LONG : PositionSide.SHORT
 		const invalidLabel = orderPriceInvalidLabel(

diff --git a/packages/app/src/state/staking/actions.ts b/packages/app/src/state/staking/actions.ts
@@ -57,8 +57,12 @@ export const fetchStakingData = createAsyncThunk<StakingAction, void, ThunkConfi
 				kwentaBalance,
 				weekCounter,
 				totalStakedBalance,
+				vKwentaBalance,
+				vKwentaAllowance,
 				kwentaAllowance,
 				epochPeriod,
+				veKwentaBalance,
+				veKwentaAllowance,
 			} = await sdk.kwentaToken.getStakingData()
 
 			return {
@@ -69,8 +73,12 @@ export const fetchStakingData = createAsyncThunk<StakingAction, void, ThunkConfi
 				kwentaBalance: kwentaBalance.toString(),
 				weekCounter,
 				totalStakedBalance: totalStakedBalance.toString(),
+				vKwentaBalance: vKwentaBalance.toString(),
+				vKwentaAllowance: vKwentaAllowance.toString(),
 				kwentaAllowance: kwentaAllowance.toString(),
 				epochPeriod,
+				veKwentaBalance: veKwentaBalance.toString(),
+				veKwentaAllowance: veKwentaAllowance.toString(),
 			}
 		} catch (err) {
 			logError(err)