Compare commits

..
Author SHA1 Message Date
Bill He ca6b266bb2 bump abacus 2023-12-15 14:18:52 -08:00
Jared Vu 3f10e045f4 bump abacus & wagmi (#196) 2023-12-15 09:26:41 -08:00
Bill 71d1a0321b Do not block website if NobleClient cannot init, and other onboarding fixes (#193) 2023-12-13 08:11:19 -08:00
Bill 0f16396c8d Implement CCTP withdraw (#188)
* Implement CCTP withdraw

* bump packages

* address comments
2023-12-12 10:12:37 -08:00
Jared Vu 2709d79f59 Firefox issues (#190)
* remove row flicker on hover

* Fix border for AccountInfoConnectedState on mobile

* Remove sticky position to allow button click

* Fix: AccountInfo not displaying on mobile firefox

* Fix css var name

* Restore filter on Table row hover

* Remove PerspectiveArea. broken on firefox

* Symbol no longer exists on AbacusType

* HorizontalPanel: memoize tabConfig

* input: firefox cant click between chars
2023-12-12 08:37:50 -08:00
Bill ab0eec5d4f Update noble tesnet rpc (#192) 2023-12-12 11:35:21 -05:00
17 changed files with 843 additions and 327 deletions
+2 -2
View File
@@ -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",
+658 -128
View File
File diff suppressed because it is too large Load Diff
-20
View File
@@ -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
View File
@@ -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": {
+7 -5
View File
@@ -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;
`; `;
-1
View File
@@ -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%;
} }
+5 -2
View File
@@ -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;
`; `;
+15 -6
View File
@@ -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
View File
@@ -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} />
-5
View File
@@ -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;
-1
View File
@@ -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 &&
-5
View File
@@ -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`
+1 -7
View File
@@ -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)`
-1
View File
@@ -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',
}, },
]} ]}
> >
+2 -11
View File
@@ -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({