Compare commits
6
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
ca6b266bb2 | ||
|
|
3f10e045f4 | ||
|
|
71d1a0321b | ||
|
|
0f16396c8d | ||
|
|
2709d79f59 | ||
|
|
ab0eec5d4f |
+2
-2
@@ -39,7 +39,7 @@
|
|||||||
"@cosmjs/proto-signing": "^0.31.0",
|
"@cosmjs/proto-signing": "^0.31.0",
|
||||||
"@cosmjs/stargate": "^0.31.0",
|
"@cosmjs/stargate": "^0.31.0",
|
||||||
"@cosmjs/tendermint-rpc": "^0.31.0",
|
"@cosmjs/tendermint-rpc": "^0.31.0",
|
||||||
"@dydxprotocol/v4-abacus": "^1.1.22",
|
"@dydxprotocol/v4-abacus": "^1.1.24",
|
||||||
"@dydxprotocol/v4-client-js": "^1.0.11",
|
"@dydxprotocol/v4-client-js": "^1.0.11",
|
||||||
"@dydxprotocol/v4-localization": "^1.0.18",
|
"@dydxprotocol/v4-localization": "^1.0.18",
|
||||||
"@ethersproject/providers": "^5.7.2",
|
"@ethersproject/providers": "^5.7.2",
|
||||||
@@ -111,7 +111,7 @@
|
|||||||
"styled-components": "^5.3.11",
|
"styled-components": "^5.3.11",
|
||||||
"use-latest": "^1.2.1",
|
"use-latest": "^1.2.1",
|
||||||
"viem": "^1.12.2",
|
"viem": "^1.12.2",
|
||||||
"wagmi": "^1.4.5"
|
"wagmi": "^1.4.12"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/core": "^7.22.5",
|
"@babel/core": "^7.22.5",
|
||||||
|
|||||||
Generated
+658
-128
File diff suppressed because it is too large
Load Diff
@@ -1,29 +1,9 @@
|
|||||||
[
|
[
|
||||||
{
|
|
||||||
"chainId": "42161",
|
|
||||||
"tokenAddress": "0xff970a61a04b1ca14834a43f5de4533ebddb5cc8",
|
|
||||||
"name": "Arbitrum"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"chainId": "43114",
|
|
||||||
"tokenAddress": "0xB97EF9Ef8734C71904D8002F8b6Bc66Dd9c48a6E",
|
|
||||||
"name": "Avalanche"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"chainId": "8453",
|
|
||||||
"tokenAddress": "0x66627F389ae46D881773B7131139b2411980E09E",
|
|
||||||
"name": "Base"
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"chainId": "1",
|
"chainId": "1",
|
||||||
"tokenAddress": "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
|
"tokenAddress": "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
|
||||||
"name": "Ethereum"
|
"name": "Ethereum"
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"chainId": "10",
|
|
||||||
"tokenAddress": "0x7F5c764cBc14f9669B88837ca1490cCa17c31607",
|
|
||||||
"name": "OP Mainnet"
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"chainId": "421613",
|
"chainId": "421613",
|
||||||
"tokenAddress": "0xfd064a18f3bf249cf1f87fc203e90d8f650f2d63",
|
"tokenAddress": "0xfd064a18f3bf249cf1f87fc203e90d8f650f2d63",
|
||||||
|
|||||||
+14
-14
@@ -71,7 +71,7 @@
|
|||||||
"https://validator.v4dev.dydx.exchange"
|
"https://validator.v4dev.dydx.exchange"
|
||||||
],
|
],
|
||||||
"0xsquid": "https://testnet.api.0xsquid.com",
|
"0xsquid": "https://testnet.api.0xsquid.com",
|
||||||
"nobleValidator": "https://rpc.testnet.noble.strange.love",
|
"nobleValidator": "https://noble-testnet-rpc.polkachu.com/",
|
||||||
"faucet": "https://faucet.v4dev.dydx.exchange"
|
"faucet": "https://faucet.v4dev.dydx.exchange"
|
||||||
},
|
},
|
||||||
"links": {
|
"links": {
|
||||||
@@ -145,7 +145,7 @@
|
|||||||
"http://54.92.118.111"
|
"http://54.92.118.111"
|
||||||
],
|
],
|
||||||
"0xsquid": "https://testnet.api.0xsquid.com",
|
"0xsquid": "https://testnet.api.0xsquid.com",
|
||||||
"nobleValidator": "https://rpc.testnet.noble.strange.love"
|
"nobleValidator": "https://noble-testnet-rpc.polkachu.com/"
|
||||||
},
|
},
|
||||||
"links": {
|
"links": {
|
||||||
"tos": "https://dydx.exchange/v4-terms",
|
"tos": "https://dydx.exchange/v4-terms",
|
||||||
@@ -218,7 +218,7 @@
|
|||||||
"http://validator.v4dev4.dydx.exchange"
|
"http://validator.v4dev4.dydx.exchange"
|
||||||
],
|
],
|
||||||
"0xsquid": "https://testnet.api.0xsquid.com",
|
"0xsquid": "https://testnet.api.0xsquid.com",
|
||||||
"nobleValidator": "https://rpc.testnet.noble.strange.love"
|
"nobleValidator": "https://noble-testnet-rpc.polkachu.com/"
|
||||||
},
|
},
|
||||||
"links": {
|
"links": {
|
||||||
"tos": "https://dydx.exchange/v4-terms",
|
"tos": "https://dydx.exchange/v4-terms",
|
||||||
@@ -291,7 +291,7 @@
|
|||||||
"http://18.223.78.50"
|
"http://18.223.78.50"
|
||||||
],
|
],
|
||||||
"0xsquid": "https://testnet.api.0xsquid.com",
|
"0xsquid": "https://testnet.api.0xsquid.com",
|
||||||
"nobleValidator": "https://rpc.testnet.noble.strange.love"
|
"nobleValidator": "https://noble-testnet-rpc.polkachu.com/"
|
||||||
},
|
},
|
||||||
"links": {
|
"links": {
|
||||||
"tos": "https://dydx.exchange/v4-terms",
|
"tos": "https://dydx.exchange/v4-terms",
|
||||||
@@ -365,7 +365,7 @@
|
|||||||
"https://validator.v4staging.dydx.exchange"
|
"https://validator.v4staging.dydx.exchange"
|
||||||
],
|
],
|
||||||
"0xsquid": "https://testnet.api.squidrouter.com",
|
"0xsquid": "https://testnet.api.squidrouter.com",
|
||||||
"nobleValidator": "https://rpc.testnet.noble.strange.love"
|
"nobleValidator": "https://noble-testnet-rpc.polkachu.com/"
|
||||||
},
|
},
|
||||||
"links": {
|
"links": {
|
||||||
"tos": "https://dydx.exchange/v4-terms",
|
"tos": "https://dydx.exchange/v4-terms",
|
||||||
@@ -440,7 +440,7 @@
|
|||||||
"https://validator.v4staging.dydx.exchange"
|
"https://validator.v4staging.dydx.exchange"
|
||||||
],
|
],
|
||||||
"0xsquid": "https://testnet.api.squidrouter.com",
|
"0xsquid": "https://testnet.api.squidrouter.com",
|
||||||
"nobleValidator": "https://rpc.testnet.noble.strange.love"
|
"nobleValidator": "https://noble-testnet-rpc.polkachu.com/"
|
||||||
},
|
},
|
||||||
"links": {
|
"links": {
|
||||||
"tos": "https://dydx.exchange/v4-terms",
|
"tos": "https://dydx.exchange/v4-terms",
|
||||||
@@ -513,7 +513,7 @@
|
|||||||
"https://validator-uswest1.v4staging.dydx.exchange"
|
"https://validator-uswest1.v4staging.dydx.exchange"
|
||||||
],
|
],
|
||||||
"0xsquid": "https://testnet.api.squidrouter.com",
|
"0xsquid": "https://testnet.api.squidrouter.com",
|
||||||
"nobleValidator": "https://rpc.testnet.noble.strange.love"
|
"nobleValidator": "https://noble-testnet-rpc.polkachu.com/"
|
||||||
},
|
},
|
||||||
"links": {
|
"links": {
|
||||||
"tos": "https://dydx.exchange/v4-terms",
|
"tos": "https://dydx.exchange/v4-terms",
|
||||||
@@ -591,7 +591,7 @@
|
|||||||
"https://dydx-rpc.liquify.com/api=8878132/dydx"
|
"https://dydx-rpc.liquify.com/api=8878132/dydx"
|
||||||
],
|
],
|
||||||
"0xsquid": "https://testnet.api.squidrouter.com",
|
"0xsquid": "https://testnet.api.squidrouter.com",
|
||||||
"nobleValidator": "https://rpc.testnet.noble.strange.love",
|
"nobleValidator": "https://noble-testnet-rpc.polkachu.com/",
|
||||||
"faucet": "https://faucet.v4testnet.dydx.exchange"
|
"faucet": "https://faucet.v4testnet.dydx.exchange"
|
||||||
},
|
},
|
||||||
"links": {
|
"links": {
|
||||||
@@ -666,7 +666,7 @@
|
|||||||
"https://validator.v4testnet.dydx.exchange"
|
"https://validator.v4testnet.dydx.exchange"
|
||||||
],
|
],
|
||||||
"0xsquid": "https://testnet.api.squidrouter.com",
|
"0xsquid": "https://testnet.api.squidrouter.com",
|
||||||
"nobleValidator": "https://rpc.testnet.noble.strange.love",
|
"nobleValidator": "https://noble-testnet-rpc.polkachu.com/",
|
||||||
"faucet": "https://faucet.v4testnet.dydx.exchange"
|
"faucet": "https://faucet.v4testnet.dydx.exchange"
|
||||||
},
|
},
|
||||||
"links": {
|
"links": {
|
||||||
@@ -742,7 +742,7 @@
|
|||||||
"https://dydx-testnet.nodefleet.org"
|
"https://dydx-testnet.nodefleet.org"
|
||||||
],
|
],
|
||||||
"0xsquid": "https://testnet.api.squidrouter.com",
|
"0xsquid": "https://testnet.api.squidrouter.com",
|
||||||
"nobleValidator": "https://rpc.testnet.noble.strange.love",
|
"nobleValidator": "https://noble-testnet-rpc.polkachu.com/",
|
||||||
"faucet": "https://faucet.v4testnet.dydx.exchange"
|
"faucet": "https://faucet.v4testnet.dydx.exchange"
|
||||||
},
|
},
|
||||||
"links": {
|
"links": {
|
||||||
@@ -818,7 +818,7 @@
|
|||||||
"https://test-dydx.kingnodes.com"
|
"https://test-dydx.kingnodes.com"
|
||||||
],
|
],
|
||||||
"0xsquid": "https://testnet.api.squidrouter.com",
|
"0xsquid": "https://testnet.api.squidrouter.com",
|
||||||
"nobleValidator": "https://rpc.testnet.noble.strange.love",
|
"nobleValidator": "https://noble-testnet-rpc.polkachu.com/",
|
||||||
"faucet": "https://faucet.v4testnet.dydx.exchange"
|
"faucet": "https://faucet.v4testnet.dydx.exchange"
|
||||||
},
|
},
|
||||||
"links": {
|
"links": {
|
||||||
@@ -894,7 +894,7 @@
|
|||||||
"https://dydx-rpc.liquify.com/api=8878132/dydx"
|
"https://dydx-rpc.liquify.com/api=8878132/dydx"
|
||||||
],
|
],
|
||||||
"0xsquid": "https://testnet.api.squidrouter.com",
|
"0xsquid": "https://testnet.api.squidrouter.com",
|
||||||
"nobleValidator": "https://rpc.testnet.noble.strange.love",
|
"nobleValidator": "https://noble-testnet-rpc.polkachu.com/",
|
||||||
"faucet": "https://faucet.v4testnet.dydx.exchange"
|
"faucet": "https://faucet.v4testnet.dydx.exchange"
|
||||||
},
|
},
|
||||||
"links": {
|
"links": {
|
||||||
@@ -970,7 +970,7 @@
|
|||||||
"https://dydx-testnet-rpc.polkachu.com/"
|
"https://dydx-testnet-rpc.polkachu.com/"
|
||||||
],
|
],
|
||||||
"0xsquid": "https://testnet.api.squidrouter.com",
|
"0xsquid": "https://testnet.api.squidrouter.com",
|
||||||
"nobleValidator": "https://rpc.testnet.noble.strange.love",
|
"nobleValidator": "https://noble-testnet-rpc.polkachu.com/",
|
||||||
"faucet": "https://faucet.v4testnet.dydx.exchange"
|
"faucet": "https://faucet.v4testnet.dydx.exchange"
|
||||||
},
|
},
|
||||||
"links": {
|
"links": {
|
||||||
@@ -1037,7 +1037,7 @@
|
|||||||
"https://dydx-testnet-full-rpc.public.blastapi.io/"
|
"https://dydx-testnet-full-rpc.public.blastapi.io/"
|
||||||
],
|
],
|
||||||
"0xsquid": "https://testnet.api.squidrouter.com",
|
"0xsquid": "https://testnet.api.squidrouter.com",
|
||||||
"nobleValidator": "https://rpc.testnet.noble.strange.love",
|
"nobleValidator": "https://noble-testnet-rpc.polkachu.com/",
|
||||||
"faucet": "https://faucet.v4testnet.dydx.exchange"
|
"faucet": "https://faucet.v4testnet.dydx.exchange"
|
||||||
},
|
},
|
||||||
"links": {
|
"links": {
|
||||||
|
|||||||
@@ -31,10 +31,12 @@ type ElementProps<TabItemsValue> = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
type StyleProps = {
|
type StyleProps = {
|
||||||
fullWidthTabs?: boolean;
|
|
||||||
className?: string;
|
className?: string;
|
||||||
|
fullWidthTabs?: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export type CollapsibleTabsProps<TabItemsValue> = ElementProps<TabItemsValue> & StyleProps;
|
||||||
|
|
||||||
export const CollapsibleTabs = <TabItemsValue extends string>({
|
export const CollapsibleTabs = <TabItemsValue extends string>({
|
||||||
defaultValue,
|
defaultValue,
|
||||||
items,
|
items,
|
||||||
@@ -43,8 +45,9 @@ export const CollapsibleTabs = <TabItemsValue extends string>({
|
|||||||
onOpenChange,
|
onOpenChange,
|
||||||
|
|
||||||
fullWidthTabs,
|
fullWidthTabs,
|
||||||
|
|
||||||
className,
|
className,
|
||||||
}: ElementProps<TabItemsValue> & StyleProps) => {
|
}: CollapsibleTabsProps<TabItemsValue>) => {
|
||||||
const [value, setValue] = useState(defaultValue);
|
const [value, setValue] = useState(defaultValue);
|
||||||
|
|
||||||
const currentItem = items.find((item) => item.value === value);
|
const currentItem = items.find((item) => item.value === value);
|
||||||
@@ -86,8 +89,8 @@ export const CollapsibleTabs = <TabItemsValue extends string>({
|
|||||||
</Styled.Header>
|
</Styled.Header>
|
||||||
|
|
||||||
<Styled.CollapsibleContent>
|
<Styled.CollapsibleContent>
|
||||||
{items.map(({ value, content }) => (
|
{items.map(({ asChild, value, content }) => (
|
||||||
<Styled.TabsContent key={value} value={value}>
|
<Styled.TabsContent key={value} asChild={asChild} value={value}>
|
||||||
{content}
|
{content}
|
||||||
</Styled.TabsContent>
|
</Styled.TabsContent>
|
||||||
))}
|
))}
|
||||||
@@ -219,7 +222,6 @@ Styled.Header = styled.header`
|
|||||||
|
|
||||||
Styled.CollapsibleContent = styled(CollapsibleContent)`
|
Styled.CollapsibleContent = styled(CollapsibleContent)`
|
||||||
${layoutMixins.stack}
|
${layoutMixins.stack}
|
||||||
${layoutMixins.perspectiveArea}
|
|
||||||
|
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
`;
|
`;
|
||||||
|
|||||||
@@ -198,7 +198,6 @@ Styled.InputContainer = styled.div`
|
|||||||
border-radius: inherit;
|
border-radius: inherit;
|
||||||
|
|
||||||
input {
|
input {
|
||||||
user-select: all;
|
|
||||||
flex: 1;
|
flex: 1;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -21,6 +21,7 @@ export type TabItem<TabItemsValue> = {
|
|||||||
content?: React.ReactNode;
|
content?: React.ReactNode;
|
||||||
subitems?: TabItem<TabItemsValue>[];
|
subitems?: TabItem<TabItemsValue>[];
|
||||||
customTrigger?: ReactNode;
|
customTrigger?: ReactNode;
|
||||||
|
asChild?: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
type ElementProps<TabItemsValue> = {
|
type ElementProps<TabItemsValue> = {
|
||||||
@@ -41,6 +42,8 @@ type StyleProps = {
|
|||||||
className?: string;
|
className?: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export type TabsProps<TabItemsValue> = ElementProps<TabItemsValue> & StyleProps;
|
||||||
|
|
||||||
export const Tabs = <TabItemsValue extends string>({
|
export const Tabs = <TabItemsValue extends string>({
|
||||||
defaultValue,
|
defaultValue,
|
||||||
value,
|
value,
|
||||||
@@ -107,9 +110,10 @@ export const Tabs = <TabItemsValue extends string>({
|
|||||||
sharedContent
|
sharedContent
|
||||||
) : (
|
) : (
|
||||||
<Styled.Stack>
|
<Styled.Stack>
|
||||||
{items.map(({ value, content, forceMount }) => (
|
{items.map(({ asChild, value, content, forceMount }) => (
|
||||||
<Styled.Content
|
<Styled.Content
|
||||||
key={value}
|
key={value}
|
||||||
|
asChild={asChild}
|
||||||
value={value}
|
value={value}
|
||||||
forceMount={forceMount}
|
forceMount={forceMount}
|
||||||
$hide={forceMount && currentItem?.value !== value}
|
$hide={forceMount && currentItem?.value !== value}
|
||||||
@@ -242,7 +246,6 @@ Styled.Trigger = styled(Trigger)<{ $withBorders?: boolean }>`
|
|||||||
|
|
||||||
Styled.Stack = styled.div`
|
Styled.Stack = styled.div`
|
||||||
${layoutMixins.stack}
|
${layoutMixins.stack}
|
||||||
${layoutMixins.perspectiveArea}
|
|
||||||
|
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
`;
|
`;
|
||||||
|
|||||||
@@ -65,9 +65,13 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
|
|||||||
}
|
}
|
||||||
|
|
||||||
setNobleWallet(nobleWallet: LocalWallet) {
|
setNobleWallet(nobleWallet: LocalWallet) {
|
||||||
this.nobleWallet = nobleWallet;
|
try {
|
||||||
if (this.nobleClient) {
|
this.nobleWallet = nobleWallet;
|
||||||
this.nobleClient.connect(nobleWallet);
|
if (this.nobleClient) {
|
||||||
|
this.nobleClient.connect(nobleWallet);
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
log('DydxChainTransactions/setNobleWallet', e);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -114,10 +118,15 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
|
|||||||
|
|
||||||
this.compositeClient = compositeClient;
|
this.compositeClient = compositeClient;
|
||||||
|
|
||||||
if (nobleValidatorUrl) {
|
try {
|
||||||
this.nobleClient = new NobleClient(nobleValidatorUrl);
|
if (nobleValidatorUrl) {
|
||||||
if (this.nobleWallet) await this.nobleClient.connect(this.nobleWallet);
|
this.nobleClient = new NobleClient(nobleValidatorUrl);
|
||||||
|
if (this.nobleWallet) await this.nobleClient.connect(this.nobleWallet);
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
log('DydxChainTransactions/connectNetwork/NobleClient', e);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Dispatch custom event to notify other parts of the app that the network has been connected
|
// Dispatch custom event to notify other parts of the app that the network has been connected
|
||||||
const customEvent = new CustomEvent('abacus:connectNetwork', {
|
const customEvent = new CustomEvent('abacus:connectNetwork', {
|
||||||
detail: parsedParams,
|
detail: parsedParams,
|
||||||
|
|||||||
+131
-116
@@ -1,8 +1,7 @@
|
|||||||
import { useState } from 'react';
|
import { useMemo, useState } from 'react';
|
||||||
import { shallowEqual, useSelector } from 'react-redux';
|
import { shallowEqual, useSelector } from 'react-redux';
|
||||||
import styled, { type AnyStyledComponent } from 'styled-components';
|
import styled, { type AnyStyledComponent } from 'styled-components';
|
||||||
|
|
||||||
import { AbacusOrderStatus } from '@/constants/abacus';
|
|
||||||
import { STRING_KEYS } from '@/constants/localization';
|
import { STRING_KEYS } from '@/constants/localization';
|
||||||
|
|
||||||
import { useBreakpoints, useStringGetter } from '@/hooks';
|
import { useBreakpoints, useStringGetter } from '@/hooks';
|
||||||
@@ -28,7 +27,6 @@ import {
|
|||||||
getCurrentMarketTradeInfoNumbers,
|
getCurrentMarketTradeInfoNumbers,
|
||||||
getHasUnseenFillUpdates,
|
getHasUnseenFillUpdates,
|
||||||
getHasUnseenOrderUpdates,
|
getHasUnseenOrderUpdates,
|
||||||
getLatestOrderStatus,
|
|
||||||
getTradeInfoNumbers,
|
getTradeInfoNumbers,
|
||||||
} from '@/state/accountSelectors';
|
} from '@/state/accountSelectors';
|
||||||
|
|
||||||
@@ -82,125 +80,142 @@ export const HorizontalPanel = ({ isOpen = true, setIsOpen }: ElementProps) => {
|
|||||||
showCurrentMarket ? numOpenOrders : numTotalOpenOrders
|
showCurrentMarket ? numOpenOrders : numTotalOpenOrders
|
||||||
);
|
);
|
||||||
|
|
||||||
const tabItems = [
|
const tabItems = useMemo(
|
||||||
{
|
() => [
|
||||||
value: InfoSection.Position,
|
{
|
||||||
label: stringGetter({
|
asChild: true,
|
||||||
key: showCurrentMarket ? STRING_KEYS.POSITION : STRING_KEYS.POSITIONS,
|
value: InfoSection.Position,
|
||||||
}),
|
label: stringGetter({
|
||||||
|
key: showCurrentMarket ? STRING_KEYS.POSITION : STRING_KEYS.POSITIONS,
|
||||||
|
}),
|
||||||
|
|
||||||
tag: showCurrentMarket ? null : shortenNumberForDisplay(numTotalPositions),
|
tag: showCurrentMarket ? null : shortenNumberForDisplay(numTotalPositions),
|
||||||
|
|
||||||
content: showCurrentMarket ? (
|
content: showCurrentMarket ? (
|
||||||
<PositionInfo showNarrowVariation={isTablet} />
|
<PositionInfo showNarrowVariation={isTablet} />
|
||||||
) : (
|
) : (
|
||||||
<PositionsTable
|
<PositionsTable
|
||||||
columnKeys={
|
columnKeys={
|
||||||
isTablet
|
isTablet
|
||||||
? [
|
? [
|
||||||
PositionsTableColumnKey.Details,
|
PositionsTableColumnKey.Details,
|
||||||
PositionsTableColumnKey.IndexEntry,
|
PositionsTableColumnKey.IndexEntry,
|
||||||
PositionsTableColumnKey.PnL,
|
PositionsTableColumnKey.PnL,
|
||||||
]
|
]
|
||||||
: [
|
: [
|
||||||
PositionsTableColumnKey.Market,
|
PositionsTableColumnKey.Market,
|
||||||
PositionsTableColumnKey.Side,
|
PositionsTableColumnKey.Side,
|
||||||
PositionsTableColumnKey.Size,
|
PositionsTableColumnKey.Size,
|
||||||
PositionsTableColumnKey.Leverage,
|
PositionsTableColumnKey.Leverage,
|
||||||
PositionsTableColumnKey.LiquidationAndOraclePrice,
|
PositionsTableColumnKey.LiquidationAndOraclePrice,
|
||||||
PositionsTableColumnKey.UnrealizedPnl,
|
PositionsTableColumnKey.UnrealizedPnl,
|
||||||
PositionsTableColumnKey.RealizedPnl,
|
PositionsTableColumnKey.RealizedPnl,
|
||||||
PositionsTableColumnKey.AverageOpenAndClose,
|
PositionsTableColumnKey.AverageOpenAndClose,
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
onNavigate={() => setView(PanelView.CurrentMarket)}
|
onNavigate={() => setView(PanelView.CurrentMarket)}
|
||||||
/>
|
/>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: InfoSection.Orders,
|
asChild: true,
|
||||||
label: stringGetter({ key: STRING_KEYS.ORDERS }),
|
value: InfoSection.Orders,
|
||||||
|
label: stringGetter({ key: STRING_KEYS.ORDERS }),
|
||||||
|
|
||||||
slotRight: isWaitingForOrderToIndex ? (
|
slotRight: isWaitingForOrderToIndex ? (
|
||||||
<Styled.LoadingSpinner />
|
<Styled.LoadingSpinner />
|
||||||
) : (
|
) : (
|
||||||
ordersTagNumber && (
|
ordersTagNumber && (
|
||||||
<Tag type={TagType.Number} isHighlighted={hasUnseenOrderUpdates}>
|
<Tag type={TagType.Number} isHighlighted={hasUnseenOrderUpdates}>
|
||||||
{ordersTagNumber}
|
{ordersTagNumber}
|
||||||
|
</Tag>
|
||||||
|
)
|
||||||
|
),
|
||||||
|
|
||||||
|
content: (
|
||||||
|
<OrdersTable
|
||||||
|
currentMarket={showCurrentMarket ? currentMarketId : undefined}
|
||||||
|
columnKeys={
|
||||||
|
isTablet
|
||||||
|
? [OrdersTableColumnKey.StatusFill, OrdersTableColumnKey.PriceType]
|
||||||
|
: [
|
||||||
|
!showCurrentMarket && OrdersTableColumnKey.Market,
|
||||||
|
OrdersTableColumnKey.Status,
|
||||||
|
OrdersTableColumnKey.Side,
|
||||||
|
OrdersTableColumnKey.AmountFill,
|
||||||
|
OrdersTableColumnKey.Price,
|
||||||
|
OrdersTableColumnKey.Trigger,
|
||||||
|
OrdersTableColumnKey.GoodTil,
|
||||||
|
!isAccountViewOnly && OrdersTableColumnKey.Actions,
|
||||||
|
].filter(isTruthy)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
asChild: true,
|
||||||
|
value: InfoSection.Fills,
|
||||||
|
label: stringGetter({ key: STRING_KEYS.FILLS }),
|
||||||
|
|
||||||
|
slotRight: fillsTagNumber && (
|
||||||
|
<Tag type={TagType.Number} isHighlighted={hasUnseenFillUpdates}>
|
||||||
|
{fillsTagNumber}
|
||||||
</Tag>
|
</Tag>
|
||||||
)
|
),
|
||||||
),
|
|
||||||
|
|
||||||
content: (
|
content: (
|
||||||
<OrdersTable
|
<FillsTable
|
||||||
currentMarket={showCurrentMarket ? currentMarketId : undefined}
|
currentMarket={showCurrentMarket ? currentMarketId : undefined}
|
||||||
columnKeys={
|
columnKeys={
|
||||||
isTablet
|
isTablet
|
||||||
? [OrdersTableColumnKey.StatusFill, OrdersTableColumnKey.PriceType]
|
? [
|
||||||
: [
|
FillsTableColumnKey.Time,
|
||||||
!showCurrentMarket && OrdersTableColumnKey.Market,
|
FillsTableColumnKey.TypeAmount,
|
||||||
OrdersTableColumnKey.Status,
|
FillsTableColumnKey.PriceFee,
|
||||||
OrdersTableColumnKey.Side,
|
]
|
||||||
OrdersTableColumnKey.AmountFill,
|
: [
|
||||||
OrdersTableColumnKey.Price,
|
!showCurrentMarket && FillsTableColumnKey.Market,
|
||||||
OrdersTableColumnKey.Trigger,
|
FillsTableColumnKey.Time,
|
||||||
OrdersTableColumnKey.GoodTil,
|
FillsTableColumnKey.Type,
|
||||||
!isAccountViewOnly && OrdersTableColumnKey.Actions,
|
FillsTableColumnKey.Side,
|
||||||
].filter(isTruthy)
|
FillsTableColumnKey.AmountTag,
|
||||||
}
|
FillsTableColumnKey.Price,
|
||||||
/>
|
FillsTableColumnKey.TotalFee,
|
||||||
),
|
FillsTableColumnKey.Liquidity,
|
||||||
},
|
].filter(isTruthy)
|
||||||
{
|
}
|
||||||
value: InfoSection.Fills,
|
columnWidths={{
|
||||||
label: stringGetter({ key: STRING_KEYS.FILLS }),
|
[FillsTableColumnKey.TypeAmount]: '100%',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
// TODO - TRCL-1693 - re-enable when funding payments are supported
|
||||||
|
// {
|
||||||
|
// value: InfoSection.Payments,
|
||||||
|
// label: stringGetter({ key: STRING_KEYS.PAYMENTS }),
|
||||||
|
|
||||||
slotRight: fillsTagNumber && (
|
// tag: shortenNumberForDisplay(
|
||||||
<Tag type={TagType.Number} isHighlighted={hasUnseenFillUpdates}>
|
// showCurrentMarket ? numFundingPayments : numTotalFundingPayments
|
||||||
{fillsTagNumber}
|
// ),
|
||||||
</Tag>
|
// content: (
|
||||||
),
|
// <FundingPaymentsTable currentMarket={showCurrentMarket ? currentMarket?.id : undefined} />
|
||||||
|
// ),
|
||||||
content: (
|
// },
|
||||||
<FillsTable
|
],
|
||||||
currentMarket={showCurrentMarket ? currentMarketId : undefined}
|
[
|
||||||
columnKeys={
|
stringGetter,
|
||||||
isTablet
|
currentMarketId,
|
||||||
? [
|
showCurrentMarket,
|
||||||
FillsTableColumnKey.Time,
|
isTablet,
|
||||||
FillsTableColumnKey.TypeAmount,
|
isWaitingForOrderToIndex,
|
||||||
FillsTableColumnKey.PriceFee,
|
isAccountViewOnly,
|
||||||
]
|
ordersTagNumber,
|
||||||
: [
|
fillsTagNumber,
|
||||||
!showCurrentMarket && FillsTableColumnKey.Market,
|
hasUnseenFillUpdates,
|
||||||
FillsTableColumnKey.Time,
|
hasUnseenOrderUpdates,
|
||||||
FillsTableColumnKey.Type,
|
]
|
||||||
FillsTableColumnKey.Side,
|
);
|
||||||
FillsTableColumnKey.AmountTag,
|
|
||||||
FillsTableColumnKey.Price,
|
|
||||||
FillsTableColumnKey.TotalFee,
|
|
||||||
FillsTableColumnKey.Liquidity,
|
|
||||||
].filter(isTruthy)
|
|
||||||
}
|
|
||||||
columnWidths={{
|
|
||||||
[FillsTableColumnKey.TypeAmount]: '100%',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
// TODO - TRCL-1693 - re-enable when funding payments are supported
|
|
||||||
// {
|
|
||||||
// value: InfoSection.Payments,
|
|
||||||
// label: stringGetter({ key: STRING_KEYS.PAYMENTS }),
|
|
||||||
|
|
||||||
// tag: shortenNumberForDisplay(
|
|
||||||
// showCurrentMarket ? numFundingPayments : numTotalFundingPayments
|
|
||||||
// ),
|
|
||||||
// content: (
|
|
||||||
// <FundingPaymentsTable currentMarket={showCurrentMarket ? currentMarket?.id : undefined} />
|
|
||||||
// ),
|
|
||||||
// },
|
|
||||||
];
|
|
||||||
|
|
||||||
return isTablet ? (
|
return isTablet ? (
|
||||||
<MobileTabs defaultValue={InfoSection.Position} items={tabItems} withBorders={false} />
|
<MobileTabs defaultValue={InfoSection.Position} items={tabItems} withBorders={false} />
|
||||||
|
|||||||
@@ -877,11 +877,6 @@ export const layoutMixins: Record<
|
|||||||
}
|
}
|
||||||
`,
|
`,
|
||||||
|
|
||||||
perspectiveArea: css`
|
|
||||||
perspective: 100rem;
|
|
||||||
transform-style: preserve-3d;
|
|
||||||
`,
|
|
||||||
|
|
||||||
absolute: css`
|
absolute: css`
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
|||||||
@@ -63,7 +63,6 @@ Styled.AccountInfoSectionContainer = styled.div<{ showAccountInfo?: boolean }>`
|
|||||||
${layoutMixins.column}
|
${layoutMixins.column}
|
||||||
height: var(--account-info-section-height);
|
height: var(--account-info-section-height);
|
||||||
min-height: var(--account-info-section-height);
|
min-height: var(--account-info-section-height);
|
||||||
overflow-x: clip;
|
|
||||||
|
|
||||||
${({ showAccountInfo }) =>
|
${({ showAccountInfo }) =>
|
||||||
!showAccountInfo &&
|
!showAccountInfo &&
|
||||||
|
|||||||
@@ -203,7 +203,6 @@ const Styled: Record<string, AnyStyledComponent> = {};
|
|||||||
|
|
||||||
Styled.Stack = styled.div`
|
Styled.Stack = styled.div`
|
||||||
${layoutMixins.stack}
|
${layoutMixins.stack}
|
||||||
${layoutMixins.perspectiveArea}
|
|
||||||
`;
|
`;
|
||||||
|
|
||||||
Styled.CornerButton = styled(Button)`
|
Styled.CornerButton = styled(Button)`
|
||||||
@@ -293,7 +292,14 @@ Styled.TransferButtons = styled.div`
|
|||||||
|
|
||||||
Styled.ConnectedAccountInfoContainer = styled.div<{ $showHeader?: boolean }>`
|
Styled.ConnectedAccountInfoContainer = styled.div<{ $showHeader?: boolean }>`
|
||||||
${layoutMixins.column}
|
${layoutMixins.column}
|
||||||
${layoutMixins.withOuterAndInnerBorders}
|
|
||||||
|
@media ${breakpoints.notTablet} {
|
||||||
|
${layoutMixins.withOuterAndInnerBorders}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media ${breakpoints.tablet} {
|
||||||
|
${layoutMixins.withInnerBorder}
|
||||||
|
}
|
||||||
|
|
||||||
${({ $showHeader }) =>
|
${({ $showHeader }) =>
|
||||||
$showHeader &&
|
$showHeader &&
|
||||||
|
|||||||
@@ -213,13 +213,8 @@ Styled.MarketDetails = styled.div`
|
|||||||
`;
|
`;
|
||||||
|
|
||||||
Styled.Header = styled.header`
|
Styled.Header = styled.header`
|
||||||
/* max-width: fit-content; */
|
|
||||||
|
|
||||||
${layoutMixins.column}
|
${layoutMixins.column}
|
||||||
gap: 1.25rem;
|
gap: 1.25rem;
|
||||||
|
|
||||||
position: sticky;
|
|
||||||
bottom: 3rem;
|
|
||||||
`;
|
`;
|
||||||
|
|
||||||
Styled.WrapRow = styled.div`
|
Styled.WrapRow = styled.div`
|
||||||
|
|||||||
@@ -453,13 +453,6 @@ Styled.Actions = styled.footer`
|
|||||||
> :last-child {
|
> :last-child {
|
||||||
flex: 2;
|
flex: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
position: sticky;
|
|
||||||
bottom: clamp(0.5rem, 7.5%, 2rem);
|
|
||||||
|
|
||||||
@media ${breakpoints.tablet} {
|
|
||||||
bottom: 0;
|
|
||||||
}
|
|
||||||
`;
|
`;
|
||||||
|
|
||||||
Styled.Output = styled(Output)<{ sign: NumberSign; smallText?: boolean; margin?: string }>`
|
Styled.Output = styled(Output)<{ sign: NumberSign; smallText?: boolean; margin?: string }>`
|
||||||
@@ -514,6 +507,7 @@ Styled.PositionInfo = styled.div`
|
|||||||
|
|
||||||
Styled.DetachedSection = styled(DetachedSection)`
|
Styled.DetachedSection = styled(DetachedSection)`
|
||||||
padding: 0 1.5rem;
|
padding: 0 1.5rem;
|
||||||
|
position: relative;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
Styled.DetachedScrollableSection = styled(DetachedScrollableSection)`
|
Styled.DetachedScrollableSection = styled(DetachedScrollableSection)`
|
||||||
|
|||||||
@@ -82,7 +82,6 @@ const Styled: Record<string, AnyStyledComponent> = {};
|
|||||||
|
|
||||||
Styled.PriceChart = styled.div<{ isChartReady?: boolean }>`
|
Styled.PriceChart = styled.div<{ isChartReady?: boolean }>`
|
||||||
${layoutMixins.stack}
|
${layoutMixins.stack}
|
||||||
${layoutMixins.perspectiveArea}
|
|
||||||
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
|
|||||||
@@ -57,7 +57,6 @@ export const TokenSelectMenu = ({ selectedToken, onSelectToken }: ElementProps)
|
|||||||
<Tag>{type === TransferType.deposit ? 'USDC' : selectedToken?.symbol}</Tag>
|
<Tag>{type === TransferType.deposit ? 'USDC' : selectedToken?.symbol}</Tag>
|
||||||
</>
|
</>
|
||||||
),
|
),
|
||||||
tooltip: 'swap',
|
|
||||||
},
|
},
|
||||||
]}
|
]}
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -230,14 +230,7 @@ const getOrdersTableColumnDef = ({
|
|||||||
label: `${stringGetter({ key: STRING_KEYS.STATUS })} / ${stringGetter({
|
label: `${stringGetter({ key: STRING_KEYS.STATUS })} / ${stringGetter({
|
||||||
key: STRING_KEYS.FILL,
|
key: STRING_KEYS.FILL,
|
||||||
})}`,
|
})}`,
|
||||||
renderCell: ({
|
renderCell: ({ asset, createdAtMilliseconds, size, status, totalFilled, resources }) => {
|
||||||
asset,
|
|
||||||
createdAtMilliseconds,
|
|
||||||
size,
|
|
||||||
status,
|
|
||||||
totalFilled,
|
|
||||||
resources,
|
|
||||||
}) => {
|
|
||||||
const { statusIconColor, statusStringKey } = getStatusIconInfo({
|
const { statusIconColor, statusStringKey } = getStatusIconInfo({
|
||||||
status,
|
status,
|
||||||
totalFilled,
|
totalFilled,
|
||||||
@@ -345,9 +338,7 @@ export const OrdersTable = ({
|
|||||||
if (hasUnseenOrderUpdates) dispatch(viewedOrders());
|
if (hasUnseenOrderUpdates) dispatch(viewedOrders());
|
||||||
}, [hasUnseenOrderUpdates]);
|
}, [hasUnseenOrderUpdates]);
|
||||||
|
|
||||||
const symbol = currentMarket
|
const symbol = currentMarket ? allAssets[allPerpetualMarkets[currentMarket]?.assetId]?.id : null;
|
||||||
? allAssets[allPerpetualMarkets[currentMarket]?.assetId]?.symbol
|
|
||||||
: null;
|
|
||||||
|
|
||||||
const ordersData = orders.map((order: SubaccountOrder) =>
|
const ordersData = orders.map((order: SubaccountOrder) =>
|
||||||
getHydratedTradingData({
|
getHydratedTradingData({
|
||||||
|
|||||||
Reference in New Issue
Block a user