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>