@@ -95,14 +94,17 @@ function ManageSummary(props: Props) {
{showAmount && props.previousAmount && (
-
+
-
+
)}
diff --git a/src/components/perps/Module/PerpsManageModule/usePerpsManageModule.ts b/src/components/perps/Module/usePerpsModule.ts
similarity index 59%
rename from src/components/perps/Module/PerpsManageModule/usePerpsManageModule.ts
rename to src/components/perps/Module/usePerpsModule.ts
index 25ecd7d4..34e8b9f3 100644
--- a/src/components/perps/Module/PerpsManageModule/usePerpsManageModule.ts
+++ b/src/components/perps/Module/usePerpsModule.ts
@@ -1,5 +1,4 @@
-import { useCallback, useMemo } from 'react'
-import { useSearchParams } from 'react-router-dom'
+import { useMemo } from 'react'
import { BN_ZERO } from 'constants/math'
import useCurrentAccount from 'hooks/accounts/useCurrentAccount'
@@ -8,34 +7,33 @@ import usePerpPosition from 'hooks/perps/usePerpPosition'
import usePerpsAsset from 'hooks/perps/usePerpsAsset'
import usePrice from 'hooks/usePrice'
import usePrices from 'hooks/usePrices'
-import { SearchParams } from 'types/enums/searchParams'
import { getAccountNetValue } from 'utils/accounts'
+import { byDenom } from 'utils/array'
import { demagnify } from 'utils/formatters'
-import { getSearchParamsObject } from 'utils/route'
-export default function usePerpsManageModule(amount: BigNumber | null) {
+export default function usePerpsModule(amount: BigNumber | null) {
const { perpsAsset } = usePerpsAsset()
- const [searchParams, setSearchParams] = useSearchParams()
const perpPosition = usePerpPosition(perpsAsset.denom)
const { data: prices } = usePrices()
const assets = useAllAssets()
const account = useCurrentAccount()
const price = usePrice(perpsAsset.denom)
+ const hasActivePosition = useMemo(
+ () => !!account?.perps.find(byDenom(perpsAsset.denom)),
+ [account?.perps, perpsAsset.denom],
+ )
+
const accountNetValue = useMemo(() => {
if (!account || !prices || !assets) return BN_ZERO
return getAccountNetValue(account, prices, assets)
}, [account, assets, prices])
- const closeManagePerpModule = useCallback(() => {
- const params = getSearchParamsObject(searchParams)
- delete params[SearchParams.PERPS_MANAGE]
- setSearchParams({
- ...params,
- })
- }, [searchParams, setSearchParams])
-
- const previousAmount = useMemo(() => perpPosition?.amount ?? BN_ZERO, [perpPosition?.amount])
+ const previousAmount = useMemo(
+ () =>
+ (perpPosition?.amount ?? BN_ZERO).times(perpPosition?.tradeDirection === 'short' ? -1 : 1),
+ [perpPosition?.amount, perpPosition?.tradeDirection],
+ )
const previousTradeDirection = useMemo(
() => perpPosition?.tradeDirection || 'long',
[perpPosition?.tradeDirection],
@@ -43,26 +41,29 @@ export default function usePerpsManageModule(amount: BigNumber | null) {
const previousLeverage = useMemo(
() =>
- price.times(demagnify(previousAmount, perpsAsset)).div(accountNetValue).plus(1).toNumber(),
+ price
+ .times(demagnify(previousAmount.abs(), perpsAsset))
+ .div(accountNetValue)
+ .plus(1)
+ .toNumber(),
[accountNetValue, perpsAsset, previousAmount, price],
)
const leverage = useMemo(
() =>
price
- .times(demagnify(amount ?? BN_ZERO, perpsAsset))
+ .times(demagnify(previousAmount.plus(amount ?? BN_ZERO).abs(), perpsAsset))
.div(accountNetValue)
.plus(1)
.toNumber(),
- [accountNetValue, amount, perpsAsset, price],
+ [accountNetValue, amount, perpsAsset, previousAmount, price],
)
return {
- closeManagePerpModule,
previousAmount,
previousTradeDirection,
previousLeverage,
leverage,
- asset: perpsAsset,
+ hasActivePosition,
}
}
diff --git a/src/components/portfolio/Account/Strategies.tsx b/src/components/portfolio/Account/Strategies.tsx
new file mode 100644
index 00000000..1df5fd9f
--- /dev/null
+++ b/src/components/portfolio/Account/Strategies.tsx
@@ -0,0 +1,52 @@
+import React, { Suspense } from 'react'
+
+import AccountStrategiesTable from 'components/account/AccountStrategiesTable'
+import Card from 'components/common/Card'
+import TableSkeleton from 'components/common/Table/TableSkeleton'
+import Text from 'components/common/Text'
+import useAccount from 'hooks/accounts/useAccount'
+
+interface Props {
+ accountId: string
+}
+
+function Content(props: Props) {
+ const { data: account } = useAccount(props.accountId, true)
+
+ if (!account || account?.vaults.length === 0) {
+ return null
+ }
+
+ return (
+
+
+
+ )
+}
+
+export default function Strategies(props: Props) {
+ return (
+
}>
+
+
+ )
+}
+
+interface SkeletonProps {
+ children?: React.ReactNode
+}
+
+function Skeleton(props: SkeletonProps) {
+ return (
+
+
Strategies
+
+ {props.children ? (
+ props.children
+ ) : (
+
+ )}
+
+
+ )
+}
diff --git a/src/components/trade/TradeChart/PoweredByPyth.tsx b/src/components/trade/TradeChart/PoweredByPyth.tsx
index 31897bd0..386ab644 100644
--- a/src/components/trade/TradeChart/PoweredByPyth.tsx
+++ b/src/components/trade/TradeChart/PoweredByPyth.tsx
@@ -5,7 +5,9 @@ export default function PoweredByPyth() {
return (
)
}
diff --git a/src/components/trade/TradeChart/index.tsx b/src/components/trade/TradeChart/index.tsx
index b3554d5f..2b0e43d2 100644
--- a/src/components/trade/TradeChart/index.tsx
+++ b/src/components/trade/TradeChart/index.tsx
@@ -8,7 +8,10 @@ import Text from 'components/common/Text'
import { datafeed } from 'components/trade/TradeChart/DataFeed'
import PoweredByPyth from 'components/trade/TradeChart/PoweredByPyth'
import { disabledFeatures, enabledFeatures } from 'components/trade/TradeChart/constants'
+import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
+import { LocalStorageKeys } from 'constants/localStorageKeys'
import { BN_ZERO } from 'constants/math'
+import useLocalStorage from 'hooks/localStorage/useLocalStorage'
import usePrices from 'hooks/usePrices'
import { BNCoin } from 'types/classes/BNCoin'
import { byDenom } from 'utils/array'
@@ -20,6 +23,10 @@ interface Props {
}
export default function TradeChart(props: Props) {
const { data: prices, isLoading } = usePrices()
+ const [chartInterval, _] = useLocalStorage
(
+ LocalStorageKeys.CHART_INTERVAL,
+ DEFAULT_SETTINGS.chartInterval,
+ )
const ratio = useMemo(() => {
const priceBuyAsset = prices.find(byDenom(props.buyAsset.denom))?.amount
const priceSellAsset = prices.find(byDenom(props.sellAsset.denom))?.amount
@@ -35,7 +42,7 @@ export default function TradeChart(props: Props) {
const widgetOptions: ChartingLibraryWidgetOptions = {
symbol: props.buyAsset.pythFeedName ?? `${props.buyAsset.symbol}/USD`,
datafeed: datafeed,
- interval: '1h' as ResolutionString,
+ interval: chartInterval,
library_path: '/charting_library/',
locale: 'en',
time_scale: {
diff --git a/src/components/trade/TradeModule/AssetSelector/AssetItem.tsx b/src/components/trade/TradeModule/AssetSelector/AssetItem.tsx
index f793a2ce..a51f3171 100644
--- a/src/components/trade/TradeModule/AssetSelector/AssetItem.tsx
+++ b/src/components/trade/TradeModule/AssetSelector/AssetItem.tsx
@@ -26,6 +26,11 @@ export default function AssetItem(props: Props) {
const formattedAmount = formatAmountToPrecision(amount, MAX_AMOUNT_DECIMALS)
const lowAmount = formattedAmount === 0 ? 0 : Math.max(formattedAmount, MIN_AMOUNT)
+ const isFavorite = useMemo(
+ () => favoriteAssetsDenoms.includes(asset.denom),
+ [favoriteAssetsDenoms, asset.denom],
+ )
+
function handleToggleFavorite(event: React.MouseEvent) {
event.stopPropagation()
@@ -51,7 +56,7 @@ export default function AssetItem(props: Props) {
>
- {asset.isFavorite ? : }
+ {isFavorite ? : }
diff --git a/src/components/trade/TradeModule/AssetSelector/AssetSelectorItem.tsx b/src/components/trade/TradeModule/AssetSelector/AssetSelectorItem.tsx
index 9c11bfa9..4a4f0e95 100644
--- a/src/components/trade/TradeModule/AssetSelector/AssetSelectorItem.tsx
+++ b/src/components/trade/TradeModule/AssetSelector/AssetSelectorItem.tsx
@@ -26,6 +26,10 @@ export default function AssetSelectorItem(props: Props) {
const amount = demagnify(props.balances.find(byDenom(asset.denom))?.amount ?? BN_ZERO, asset)
const [favoriteAssetsDenoms, setFavoriteAssetsDenoms] = useFavoriteAssets()
+ const isFavorite = useMemo(
+ () => favoriteAssetsDenoms.includes(asset.denom),
+ [favoriteAssetsDenoms, asset.denom],
+ )
function handleToggleFavorite(event: React.MouseEvent
) {
event.stopPropagation()
@@ -47,14 +51,14 @@ export default function AssetSelectorItem(props: Props) {
}, [props.depositCap])
return (
-
+