Skip to content

Commit

Permalink
v7.5.1
Browse files Browse the repository at this point in the history 
v7.5.1
  • Loading branch information
@platschi
platschi authored Aug 9, 2023
2 parents aa7919c + fc1bb89 commit 4bcb997
Show file tree
Hide file tree
Showing 12 changed files with 198 additions and 118 deletions.
Binary file added packages/app/src/assets/png/currencies/sUSDT.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
91 changes: 49 additions & 42 deletions packages/app/src/sections/dashboard/FuturesPositionsTable/FuturesPositionsTable.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,14 @@
import { ZERO_WEI } from '@kwenta/sdk/constants'
import { FuturesMarginType } from '@kwenta/sdk/types'
import { formatDollars } from '@kwenta/sdk/utils'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { FC, useMemo } from 'react'
import { useTranslation } from 'react-i18next'
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'
Expand All @@ -19,8 +22,10 @@ import useNetworkSwitcher from 'hooks/useNetworkSwitcher'
import PositionType from 'sections/futures/PositionType'
import { AppFuturesMarginType } from 'state/futures/common/types'
import { selectCrossMarginActivePositions } from 'state/futures/crossMargin/selectors'
import { selectMarkPrices } from 'state/futures/selectors'
import { selectSmartMarginActivePositions } from 'state/futures/smartMargin/selectors'
import { useAppSelector } from 'state/hooks'
import { selectOffchainPricesInfo } from 'state/prices/selectors'
import { getSynthDescription } from 'utils/futures'

import MobilePositionRow from './MobilePositionRow'
Expand All @@ -44,19 +49,24 @@ const FuturesPositionsTable: FC<FuturesPositionTableProps> = ({

const crossMarginPositions = useAppSelector(selectCrossMarginActivePositions)
const smartMarginPositions = useAppSelector(selectSmartMarginActivePositions)
const pricesInfo = useAppSelector(selectOffchainPricesInfo)
const markPrices = useAppSelector(selectMarkPrices)

let data = useMemo(() => {
const positions =
accountType === FuturesMarginType.SMART_MARGIN ? smartMarginPositions : crossMarginPositions
return positions.map((position) => {
const description = getSynthDescription(position.market.asset, t)

const priceInfo = pricesInfo[position.market.asset]
const marketPrice = markPrices[position.market.marketKey] ?? ZERO_WEI
return {
...position,
description,
marketPrice,
priceInfo,
}
})
}, [accountType, crossMarginPositions, smartMarginPositions, t])
}, [accountType, crossMarginPositions, markPrices, pricesInfo, smartMarginPositions, t])

return (
<>
Expand Down Expand Up @@ -101,15 +111,23 @@ const FuturesPositionsTable: FC<FuturesPositionTableProps> = ({
<IconContainer>
<StyledCurrencyIcon currencyKey={cellProps.row.original.market.marketKey} />
</IconContainer>
<StyledText>
{cellProps.row.original.market.marketName}
<MarketBadge
currencyKey={cellProps.row.original.market.marketKey}
isFuturesMarketClosed={cellProps.row.original.market.isSuspended}
futuresClosureReason={cellProps.row.original.market.marketClosureReason}
/>
</StyledText>
<StyledValue>{cellProps.row.original.description}</StyledValue>
<CellContainer>
<StyledText>
{cellProps.row.original.market.marketName}
<MarketBadge
currencyKey={cellProps.row.original.market.marketKey}
isFuturesMarketClosed={cellProps.row.original.market.isSuspended}
futuresClosureReason={cellProps.row.original.market.marketClosureReason}
/>
</StyledText>
<StyledValue>
<ColoredPrice priceChange={cellProps.row.original.priceInfo?.change}>
{formatDollars(cellProps.row.original.marketPrice, {
suggestDecimals: true,
})}
</ColoredPrice>
</StyledValue>
</CellContainer>
</MarketContainer>
)
},
Expand Down Expand Up @@ -154,44 +172,34 @@ const FuturesPositionsTable: FC<FuturesPositionTableProps> = ({
undefined ? (
<Body>{NO_VALUE}</Body>
) : (
<Currency.Price
price={cellProps.row.original.activePosition.details?.avgEntryPrice}
formatOptions={{ suggestDecimals: true }}
/>
<CellContainer>
<Currency.Price
price={cellProps.row.original.activePosition.details?.avgEntryPrice}
formatOptions={{ suggestDecimals: true }}
/>
<Currency.Price
price={cellProps.row.original.activePosition.liquidationPrice}
formatOptions={{ suggestDecimals: true }}
colorType="preview"
/>
</CellContainer>
)
},
size: 125,
},
{
header: () => (
<TableHeader>
{t('dashboard.overview.futures-positions-table.liquidationPrice')}
</TableHeader>
),
accessorKey: 'liquidationPrice',
cell: (cellProps) => {
return (
<Currency.Price
price={cellProps.row.original.activePosition.liquidationPrice}
formatOptions={{ suggestDecimals: true }}
/>
)
},
size: 115,
},
{
header: () => (
<TableHeader>{t('dashboard.overview.futures-positions-table.pnl')}</TableHeader>
),
accessorKey: 'pnl',
cell: (cellProps) => {
return (
<PnlContainer>
<CellContainer>
<ChangePercent value={cellProps.row.original.activePosition.pnlPct} />
<div>
<Currency.Price price={cellProps.row.original.activePosition.pnl} colored />
</div>
</PnlContainer>
</CellContainer>
)
},
size: 125,
Expand Down Expand Up @@ -290,9 +298,15 @@ const FuturesPositionsTable: FC<FuturesPositionTableProps> = ({
)
}

const PnlContainer = styled.div`
const MarketContainer = styled.div`
display: flex;
flex-direction: row;
`

const CellContainer = styled.div`
display: flex;
flex-direction: column;
row-gap: 4px;
`

const StyledCurrencyIcon = styled(Currency.Icon)`
Expand Down Expand Up @@ -328,13 +342,6 @@ const StyledText = styled.div`
font-family: ${(props) => props.theme.fonts.bold};
`

const MarketContainer = styled.div`
display: grid;
grid-template-rows: auto auto;
grid-template-columns: auto auto;
align-items: center;
`

const OpenPositionsHeader = styled.div`
display: flex;
justify-content: space-between;
Expand Down
34 changes: 28 additions & 6 deletions packages/app/src/sections/futures/MobileTrade/UserTabs/PositionsTab.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,13 @@
import { ZERO_WEI } from '@kwenta/sdk/constants'
import { FuturesMarginType, FuturesMarketKey, PositionSide } from '@kwenta/sdk/types'
import { formatDollars } from '@kwenta/sdk/utils'
import Router from 'next/router'
import { useCallback, useMemo, useState } from 'react'
import { useTranslation } from 'react-i18next'
import styled from 'styled-components'
import { FuturesPositionTablePositionActive } from 'types/futures'

import ColoredPrice from 'components/ColoredPrice'
import Currency from 'components/Currency'
import { FlexDiv, FlexDivRow, FlexDivRowCentered } from 'components/layout/flex'
import Pill from 'components/Pill'
Expand All @@ -21,8 +24,10 @@ import EditPositionButton from 'sections/futures/UserInfo/EditPositionButton'
import { setShowPositionModal } from 'state/app/reducer'
import { selectFuturesType, selectMarketAsset } from 'state/futures/common/selectors'
import { selectCrossMarginActivePositions } from 'state/futures/crossMargin/selectors'
import { selectMarkPrices } from 'state/futures/selectors'
import { selectSmartMarginActivePositions } from 'state/futures/smartMargin/selectors'
import { useAppDispatch, useAppSelector } from 'state/hooks'
import { selectOffchainPricesInfo } from 'state/prices/selectors'
import media from 'styles/media'

const PositionsTab = () => {
Expand All @@ -35,6 +40,8 @@ const PositionsTab = () => {
const crossMarginPositions = useAppSelector(selectCrossMarginActivePositions)
const smartMarginPositions = useAppSelector(selectSmartMarginActivePositions)
const currentMarket = useAppSelector(selectMarketAsset)
const markPrices = useAppSelector(selectMarkPrices)
const pricesInfo = useAppSelector(selectOffchainPricesInfo)
const accountType = useAppSelector(selectFuturesType)
const [showShareModal, setShowShareModal] = useState(false)
const [sharePosition, setSharePosition] = useState<FuturesPositionTablePositionActive | null>(
Expand All @@ -44,8 +51,21 @@ const PositionsTab = () => {
let data = useMemo(() => {
const positions =
accountType === FuturesMarginType.SMART_MARGIN ? smartMarginPositions : crossMarginPositions
return positions.sort((a) => (a.market.asset === currentMarket ? -1 : 1))
}, [accountType, smartMarginPositions, crossMarginPositions, currentMarket])
return positions
.map((p) => ({
...p,
marketPrice: markPrices[p.market.marketKey] ?? ZERO_WEI,
priceInfo: pricesInfo[p.market.asset],
}))
.sort((a) => (a.market.asset === currentMarket ? -1 : 1))
}, [
accountType,
smartMarginPositions,
crossMarginPositions,
markPrices,
pricesInfo,
currentMarket,
])

const handleOpenPositionCloseModal = useCallback(
(marketKey: FuturesMarketKey) => () => {
Expand Down Expand Up @@ -88,10 +108,12 @@ const PositionsTab = () => {
<div className="position-side-bar" />
<div>
<Body>{row.market.marketName}</Body>
<Body capitalized color="secondary">
{accountType === FuturesMarginType.CROSS_MARGIN
? 'Cross Margin'
: 'Smart Margin'}
<Body>
<ColoredPrice priceChange={row.priceInfo?.change}>
{formatDollars(row.marketPrice, {
suggestDecimals: true,
})}
</ColoredPrice>
</Body>
</div>
</FlexDiv>
Expand Down
Loading

1 comment on commit 4bcb997

@vercel
Copy link

@vercel vercel bot commented on 4bcb997 Aug 9, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

kwenta – ./packages/app

kwenta.io
kwenta-git-main-kwenta.vercel.app
kwenta-kwenta.vercel.app

Please sign in to comment.