LaconicNetwork/vega-frontend-monorepo
4
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

chore(trading): rename mobile view vars

Browse Source
This commit is contained in:
Madalina Raicu 2024-02-07 14:23:58 +00:00
parent 0bad7e3317
commit d41e9456bc
No known key found for this signature in database
GPG Key ID: 688B7B31149C1DCD
1 changed files with 38 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
apps/trading/client-pages/market/trade-panels.tsx
View File

@ -20,10 +20,10 @@ interface TradePanelsProps {
} }
export const TradePanels = ({ market, pinnedAsset }: TradePanelsProps) => { export const TradePanels = ({ market, pinnedAsset }: TradePanelsProps) => {
const [view1, setView1] = useState<TradingView>('chart'); const [topView, setTopView] = useState<TradingView>('chart');
const viewCfg1 = TradingViews[view1]; const topViewCfg = TradingViews[topView];
const [view2, setView2] = useState<TradingView>('positions'); const [bottomView, setBottomView] = useState<TradingView>('positions');
const viewCfg2 = TradingViews[view2]; const bottomViewCfg = TradingViews[bottomView];
const renderView = (view: TradingView) => { const renderView = (view: TradingView) => {
const Component = TradingViews[view].component; const Component = TradingViews[view].component;
@ -94,58 +94,56 @@ export const TradePanels = ({ market, pinnedAsset }: TradePanelsProps) => {
}) })
.map((_key) => { .map((_key) => {
const key = _key as TradingView; const key = _key as TradingView;
const isActive = view1 === key; const isActive = topView === key;
return ( return (
<ViewButton <ViewButton
key={key} key={key}
view={key} view={key}
isActive={isActive} isActive={isActive}
onClick={() => { onClick={() => {
setView1(key); setTopView(key);
}} }}
/> />
); );
})} })}
</div> </div>
<div className="h-[376px] sm:h-[460px] lg:h-full relative"> <div className="h-[376px] sm:h-[460px] lg:h-full relative">
<div>{renderMenu(viewCfg1)}</div> <div>{renderMenu(topViewCfg)}</div>
<div className="overflow-auto h-full">{renderView(view1)}</div> <div className="overflow-auto h-full">{renderView(topView)}</div>
</div> </div>
</div> </div>
{ <div className="flex flex-col w-full grow">
<div className="flex flex-col w-full grow"> <div className="flex flex-nowrap overflow-x-auto max-w-full border-t border-default">
<div className="flex flex-nowrap overflow-x-auto max-w-full border-t border-default"> {[
{[ 'positions',
'positions', 'activeOrders',
'activeOrders', 'closedOrders',
'closedOrders', 'rejectedOrders',
'rejectedOrders', 'orders',
'orders', 'stopOrders',
'stopOrders', 'collateral',
'collateral', 'fills',
'fills', ].map((_key) => {
].map((_key) => { const key = _key as TradingView;
const key = _key as TradingView; const isActive = bottomView === key;
const isActive = view2 === key; return (
return ( <ViewButton
<ViewButton key={key}
key={key} view={key}
view={key} isActive={isActive}
isActive={isActive} onClick={() => {
onClick={() => { setBottomView(key);
setView2(key); }}
}} />
/> );
); })}
})}
</div>
<div className="relative grow">
<div className="flex flex-col">{renderMenu(viewCfg2)}</div>
<div className="overflow-auto h-full">{renderView(view2)}</div>
</div>
</div> </div>
} <div className="relative grow">
<div className="flex flex-col">{renderMenu(bottomViewCfg)}</div>
<div className="overflow-auto h-full">{renderView(bottomView)}</div>
</div>
</div>
</div> </div>
); );
}; };