Skip to content

Commit

Permalink
clean up
Browse files Browse the repository at this point in the history
  • Loading branch information
@moo-onthelawn
moo-onthelawn committed Jul 22, 2024
1 parent 67b943e commit d6493db
Show file tree
Hide file tree
Showing 6 changed files with 138 additions and 140 deletions.
2 changes: 2 additions & 0 deletions src/constants/orderbook.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
/**
* @description Orderbook display constants
*/
export const ORDERBOOK_MIN_ROWS_PER_SIDE = 2;
export const ORDERBOOK_MAX_ROWS_PER_SIDE = 30;
export const ORDERBOOK_PAGE_HEIGHT_RATIO = 11 / 25;
export const ORDERBOOK_ANIMATION_DURATION = 100;

/**
Expand Down
8 changes: 4 additions & 4 deletions src/hooks/Orderbook/useOrderbookValues.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import { MustBigNumber } from '@/lib/numbers';
import { safeAssign } from '@/lib/objectHelpers';
import { orEmptyRecord } from '@/lib/typeUtils';

export const useCalculateOrderbookData = ({ maxRowsPerSide }: { maxRowsPerSide: number }) => {
export const useCalculateOrderbookData = ({ rowsPerSide }: { rowsPerSide: number }) => {
const orderbook = useAppSelector(getCurrentMarketOrderbook, shallowEqual);

const subaccountOrderSizeBySideAndPrice = orEmptyRecord(
Expand All @@ -37,7 +37,7 @@ export const useCalculateOrderbookData = ({ maxRowsPerSide }: { maxRowsPerSide:
row
)
)
.slice(0, maxRowsPerSide);
.slice(0, rowsPerSide);

const bids: Array<PerpetualMarketOrderbookLevel | undefined> = (
orderbook?.bids?.toArray() ?? []
Expand All @@ -54,7 +54,7 @@ export const useCalculateOrderbookData = ({ maxRowsPerSide }: { maxRowsPerSide:
row
)
)
.slice(0, maxRowsPerSide);
.slice(0, rowsPerSide);

const spread = orderbook?.spread;
const spreadPercent = orderbook?.spreadPercent;
Expand All @@ -73,7 +73,7 @@ export const useCalculateOrderbookData = ({ maxRowsPerSide }: { maxRowsPerSide:
hasOrderbook: !!orderbook,
currentGrouping: orderbook?.grouping,
};
}, [maxRowsPerSide, orderbook, subaccountOrderSizeBySideAndPrice]);
}, [rowsPerSide, orderbook, subaccountOrderSizeBySideAndPrice]);
};

export const useOrderbookValuesForDepthChart = () => {
Expand Down
188 changes: 88 additions & 100 deletions src/pages/trade/Trade.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,77 +43,80 @@ const TradePage = () => {
usePageTitlePriceUpdates();
useTradeFormInputs();

const header = (
<$Header>
<MarketSelectorAndStats />
</$Header>
);

// Depending on the screensize, we either render the market selector header as a header across the whole page, or just as a header to the markets chart
const maybePageHeader = !isDesktopMedium && header;
const maybeChartSectionHeader = isDesktopMedium && header;

const sidebar = (
<$ParentSection>
<AccountInfo />
<$TradeBox />
</$ParentSection>
);
const tradeSection = (
<$TradeSection>
<VerticalPanel tradeLayout={tradeLayout} />
</$TradeSection>
);
const chartSection = (
<$ChartSection>
{maybeChartSectionHeader}
<InnerPanel />
</$ChartSection>
);
const horizontalSection = (
<$HorizontalSection>
<HorizontalPanel isOpen={isHorizontalPanelOpen} setIsOpen={setIsHorizontalPanelOpen} />
</$HorizontalSection>
);

const desktopLayout = () => {
const top = (
<$Top>
<MarketSelectorAndStats />
</$Top>
);
const sidebar = (
<$SideSection gridArea="Side">
<AccountInfo />
<$TradeBox />
</$SideSection>
);
const orderbookTradePanel = (
<$TradeSection>
<VerticalPanel tradeLayout={tradeLayout} />
</$TradeSection>
);
const tradingChart = (
<$InnerSection>
{isDesktopMedium && top}
<InnerPanel />
</$InnerSection>
);
const horizontalPane = (
<$HorizontalSection>
<HorizontalPanel isOpen={isHorizontalPanelOpen} setIsOpen={setIsHorizontalPanelOpen} />
</$HorizontalSection>
);
switch (tradeLayout) {
case TradeLayouts.Alternative:
return (
<$TradeLayout ref={tradePageRef} isHorizontalPanelOpen={isHorizontalPanelOpen}>
{!isDesktopMedium && top}
<$MainSection gridArea="Main">
<$TestSection>
{orderbookTradePanel}
{tradingChart}
</$TestSection>
{horizontalPane}
<>
<$MainSection>
<$BorderedContainer>
{tradeSection}
{chartSection}
</$BorderedContainer>
{horizontalSection}
</$MainSection>
{sidebar}
</$TradeLayout>
</>
);
case TradeLayouts.Reverse:
return (
<$TradeLayout ref={tradePageRef} isHorizontalPanelOpen={isHorizontalPanelOpen}>
{!isDesktopMedium && top}
<$MainSection gridArea="Main">
<$TestSection>
{tradingChart}
{orderbookTradePanel}
</$TestSection>
{horizontalPane}
<>
<$MainSection>
<$BorderedContainer>
{chartSection}
{tradeSection}
</$BorderedContainer>
{horizontalSection}
</$MainSection>
{sidebar}
</$TradeLayout>
</>
);
case TradeLayouts.Default:
default:
return (
<$TradeLayout ref={tradePageRef} isHorizontalPanelOpen={isHorizontalPanelOpen}>
{!isDesktopMedium && top}
<>
{sidebar}
<$MainSection gridArea="Main">
<$TestSection>
{orderbookTradePanel}
{tradingChart}
</$TestSection>
{horizontalPane}
<$MainSection>
<$BorderedContainer>
{tradeSection}
{chartSection}
</$BorderedContainer>
{horizontalSection}
</$MainSection>
</$TradeLayout>
</>
);
}
};
Expand All @@ -139,27 +142,15 @@ const TradePage = () => {
{canAccountTrade && <TradeDialogTrigger />}
</$TradeLayoutMobile>
) : (
desktopLayout()
<$TradeLayoutDesktop ref={tradePageRef}>
<>
{maybePageHeader} {desktopLayout()}
</>
</$TradeLayoutDesktop>
);
// <$TradeLayout ref={tradePageRef} isHorizontalPanelOpen={isHorizontalPanelOpen}>
/* </$TradeLayout> */
};

export default TradePage;
const $TradeLayout = styled.article<{
isHorizontalPanelOpen: boolean;
}>`
// Rules
width: 0;
min-width: 100%;
height: 0;
min-height: 100%;
display: flex;
flex-wrap: wrap;
${layoutMixins.withOuterAndInnerBorders};
`;

const $TradeLayoutMobile = styled.article`
${layoutMixins.contentContainerPage}
Expand All @@ -179,17 +170,23 @@ const $TradeLayoutMobile = styled.article`
}
`;

const $Top = styled.header`
box-shadow: none;
const $TradeLayoutDesktop = styled.article`
width: 0;
min-width: 100%;
height: 0;
min-height: 100%;
display: flex;
flex-wrap: wrap;
${layoutMixins.withOuterAndInnerBorders};
`;

const $GridSection = styled.section<{ gridArea: string }>`
grid-area: ${({ gridArea }) => gridArea};
const $Header = styled.header`
box-shadow: none;
`;

const $SideSection = styled($GridSection)`
grid-template-rows: auto minmax(0, 1fr);
height: 100%;
const $ParentSection = styled.section`
display: flex;
flex-direction: column;
Expand All @@ -200,44 +197,35 @@ const $SideSection = styled($GridSection)`
}
`;

const $MainSection = styled($GridSection)`
display: flex;
flex-direction: column;
height: calc(100% - var(--market-info-row-height));
@media ${breakpoints.desktopMedium} {
height: 100%;
}
const $MainSection = styled($ParentSection)`
flex: 1 1 1px;
${layoutMixins.withOuterAndInnerBorders};
`;

flex: 1 1 1px;
const $TradeSection = styled.section`
width: var(--orderbook-trades-width);
`;

const $TestSection = styled.div`
const $ChartSection = styled.section`
display: flex;
flex-grow: 1;
${layoutMixins.withOuterAndInnerBorders};
flex-direction: column;
`;

const $TradeSection = styled.div`
width: var(--orderbook-trades-width);
const $HorizontalSection = styled.section`
overflow: auto;
`;

const $InnerSection = styled.div`
flex: 1;
const $BorderedContainer = styled.div`
display: flex;
flex-direction: column;
`;
flex-grow: 1;
const $HorizontalSection = styled.div`
overflow: hidden;
width: 100%;
display: grid;
${layoutMixins.withOuterAndInnerBorders};
`;

const $TradeBox = styled(TradeBox)`
overflow-y: auto;
height: 100%;
overflow-y: auto;
padding-top: var(--border-width);
`;
Loading

0 comments on commit d6493db

Please sign in to comment.