v7.9.0

package.json

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

packages/app/package.json

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

packages/app/src/components/StakeCard.tsx

@@ -10,8 +10,11 @@ import { FlexDivCol, FlexDivRowCentered } from 'components/layout/flex'
 import SegmentedControl from 'components/SegmentedControl'
 import { DEFAULT_TOKEN_DECIMALS } from 'constants/defaults'
 import { StakingCard } from 'sections/dashboard/Stake/card'
+import { useAppSelector } from 'state/hooks'
+import { selectStakingV1 } from 'state/staking/selectors'
 import media from 'styles/media'
 
+import ErrorView from './ErrorView'
 import { Body, NumericValue } from './Text'
 
 type StakeCardProps = {
@@ -51,6 +54,7 @@ const StakeCard: FC<StakeCardProps> = memo(
 		const { t } = useTranslation()
 		const [amount, setAmount] = useState('')
 		const [activeTab, setActiveTab] = useState(0)
+		const stakingV1 = useAppSelector(selectStakingV1)
 
 		const balance = useMemo(() => {
 			return activeTab === 0 ? stakeBalance : unstakeBalance
@@ -136,20 +140,33 @@ const StakeCard: FC<StakeCardProps> = memo(
 						</StakeInputHeader>
 						<NumericInput value={amount} onChange={handleChange} bold />
 					</FlexDivCol>
-					<Button
-						fullWidth
-						variant="flat"
-						size="small"
-						disabled={isDisabled}
-						loading={isLoading}
-						onClick={handleSubmit}
-					>
-						{activeTab === 0
-							? isApproved
-								? t('dashboard.stake.tabs.stake-table.stake')
-								: t('dashboard.stake.tabs.stake-table.approve')
-							: t('dashboard.stake.tabs.stake-table.unstake')}
-					</Button>
+					<FlexDivCol>
+						<Button
+							fullWidth
+							variant="flat"
+							size="small"
+							disabled={isDisabled}
+							loading={isLoading}
+							onClick={handleSubmit}
+						>
+							{activeTab === 0
+								? isApproved
+									? t('dashboard.stake.tabs.stake-table.stake')
+									: t('dashboard.stake.tabs.stake-table.approve')
+								: t('dashboard.stake.tabs.stake-table.unstake')}
+						</Button>
+						{!stakingV1 && (
+							<ErrorView
+								messageType="warn"
+								message={t('dashboard.stake.portfolio.cooldown.warning')}
+								containerStyle={{
+									margin: '0',
+									marginTop: '25px',
+									padding: '10px 0',
+								}}
+							/>
+						)}
+					</FlexDivCol>
 				</FlexDivCol>
 			</CardGridContainer>
 		)

packages/app/src/components/layout/grid.ts

@@ -26,6 +26,12 @@ export const SplitContainer = styled.div`
 	${media.greaterThan('lg')`
 		grid-template-columns: 1fr 1fr;
 	`}
+
+	${media.lessThan('lg')`
+		display: flex;
+		flex-direction: column-reverse;
+		row-gap: 25px;
+	`}
 `
 
 export const ContainerRowMixin = css`

packages/app/src/constants/announcement.ts

@@ -5,9 +5,9 @@ export const BANNER_ENABLED = true
 // 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 =
-	'https://mirror.xyz/kwenta.eth/qJaLnoRFh8O_UhT3GZB15g8tJDG7KJmKdAEbd905BjM'
+	'https://docs.kwenta.io/kwenta-token/staking-v2-migration/how-to-migrate'
 // Sets the text displayed on the home page banner
-export const BANNER_TEXT = 'Staking V2 Migration on September 21st. Read More  ↗'
+export const BANNER_TEXT = 'Staking V2 Migration Now Live! 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/routes.ts

@@ -25,6 +25,7 @@ export const ROUTES = {
 		Earn: normalizeRoute('/dashboard', 'earn', 'tab'),
 		Stake: normalizeRoute('/dashboard', 'staking', 'tab'),
 		Rewards: normalizeRoute('/dashboard', 'rewards', 'tab'),
+		Migrate: normalizeRoute('/dashboard', 'migrate', 'tab'),
 		TradingRewards: formatUrl('/dashboard/staking', { tab: 'trading-rewards' }),
 	},
 	Exchange: {

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

@@ -4,14 +4,15 @@ import { useTranslation } from 'react-i18next'
 
 import DashboardLayout from 'sections/dashboard/DashboardLayout'
 import Overview from 'sections/dashboard/Overview'
-import { usePollDashboardFuturesData } from 'state/futures/hooks'
+import { useFetchStakeMigrateData, usePollDashboardFuturesData } from 'state/futures/hooks'
 
 type DashboardComponent = React.FC & { getLayout: (page: ReactNode) => JSX.Element }
 
 const Dashboard: DashboardComponent = () => {
 	const { t } = useTranslation()
 
 	usePollDashboardFuturesData()
+	useFetchStakeMigrateData()
 
 	return (
 		<>

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

@@ -0,0 +1,28 @@
+import Head from 'next/head'
+import { FC, ReactNode } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import DashboardLayout from 'sections/dashboard/DashboardLayout'
+import MigrationSteps from 'sections/dashboard/Stake/MigrationSteps'
+import { useFetchStakeMigrateData } from 'state/futures/hooks'
+
+type MigrateComponent = FC & { getLayout: (page: ReactNode) => JSX.Element }
+
+const MigratePage: MigrateComponent = () => {
+	const { t } = useTranslation()
+
+	useFetchStakeMigrateData()
+
+	return (
+		<>
+			<Head>
+				<title>{t('dashboard-stake.page-title')}</title>
+			</Head>
+			<MigrationSteps />
+		</>
+	)
+}
+
+MigratePage.getLayout = (page) => <DashboardLayout>{page}</DashboardLayout>
+
+export default MigratePage