From e21a99f007234a124317e60a56700b9c1f0c0c1d Mon Sep 17 00:00:00 2001
From: dappbeast <jake@lyra.finance>
Date: Sat, 13 May 2023 14:33:57 +0900
Subject: [PATCH] feat: move positions to top of trade page, add collapse chart
 in advanced mode, move announcements below trade form

---
 .../components/common/MarketLabel/index.tsx   |   2 +-
 .../common/PositionsTable/index.tsx           |   1 +
 app/src/constants/announcements.ts            |   2 +-
 app/src/constants/layout.ts                   |   2 +-
 .../TradeAnnouncementHeaderCard/index.tsx     |  16 +-
 .../TradeMarketDropdownSpotPrice.tsx          |   2 +-
 .../trade/TradePositionsCard/index.tsx        |  97 +++----
 .../containers/trade/TradePriceCard/index.tsx |  58 ++--
 .../hooks/local_storage/useTraderSettings.ts  |   2 +
 .../page_helpers/PositionPageHelper/index.tsx |  11 +-
 .../TradeHistoryPageHelper/index.tsx          |   5 +-
 .../page_helpers/TradePageHelper/index.tsx    | 256 ++++++++----------
 .../page_helpers/common/Page/PageDesktop.tsx  |   4 +-
 .../page_helpers/common/Page/PageMobile.tsx   |  24 +-
 ui/components/Button/index.tsx                |   3 -
 ui/components/List/ListItem.tsx               |   2 +-
 16 files changed, 218 insertions(+), 269 deletions(-)

diff --git a/app/src/components/common/MarketLabel/index.tsx b/app/src/components/common/MarketLabel/index.tsx
index b42b1084..748caeb9 100644
--- a/app/src/components/common/MarketLabel/index.tsx
+++ b/app/src/components/common/MarketLabel/index.tsx
@@ -18,7 +18,7 @@ export default function MarketLabel({ market, ...marginProps }: Props) {
     <Flex {...marginProps} alignItems="center">
       <MarketImage market={market} />
       <Box ml={2}>
-        <Text>{getMarketDisplayName(market)}</Text>
+        <Text color="text">{getMarketDisplayName(market)}</Text>
         <Text variant="small" color="secondaryText">
           {market.name}
         </Text>
diff --git a/app/src/components/common/PositionsTable/index.tsx b/app/src/components/common/PositionsTable/index.tsx
index 4c4e7fa3..05080401 100644
--- a/app/src/components/common/PositionsTable/index.tsx
+++ b/app/src/components/common/PositionsTable/index.tsx
@@ -172,6 +172,7 @@ const PositionsTable = ({ positions, onClick, pageSize, ...styleProps }: Props)
                   e.stopPropagation()
                   setIsOpen(true)
                 }}
+                variant="light"
                 isOpen={isOpen}
                 onClose={() => setIsOpen(false)}
                 icon={IconType.MoreHorizontal}
diff --git a/app/src/constants/announcements.ts b/app/src/constants/announcements.ts
index 9da42ec7..bb8463fb 100644
--- a/app/src/constants/announcements.ts
+++ b/app/src/constants/announcements.ts
@@ -17,7 +17,7 @@ export type Announcement = {
 
 const ANNOUNCEMENTS: Announcement[] = [
   {
-    id: 'arb-airdrop-5',
+    id: 'arbitrum-airdrop',
     title: '400k $ARB Airdrop',
     description: 'The Lyra DAO is airdropping 400k $ARB to traders and LPs over 8 weeks.',
     cta: {
diff --git a/app/src/constants/layout.ts b/app/src/constants/layout.ts
index b2a807c2..aa2e816c 100644
--- a/app/src/constants/layout.ts
+++ b/app/src/constants/layout.ts
@@ -11,7 +11,7 @@ export const VAULTS_CHART_HEIGHT = [120, 250]
 export const VAULTS_INDEX_CHART_HEIGHT = [120, 250]
 
 export const TRADE_CARD_MIN_WIDTH = 360
-export const TRADE_CARD_MIN_HEIGHT = 400
+export const TRADE_CARD_MIN_HEIGHT = 380
 
 export const TRADE_CHAIN_STAT_COL_WIDTH = 90
 export const TRADE_CHAIN_PRICE_COL_WIDTH = 110
diff --git a/app/src/containers/trade/TradeAnnouncementHeaderCard/index.tsx b/app/src/containers/trade/TradeAnnouncementHeaderCard/index.tsx
index 6ddbfb2f..823044de 100644
--- a/app/src/containers/trade/TradeAnnouncementHeaderCard/index.tsx
+++ b/app/src/containers/trade/TradeAnnouncementHeaderCard/index.tsx
@@ -69,15 +69,15 @@ export default function TradeAnnouncementHeaderCard({ blockTimestamp }: Props) {
   }
 
   return displayedAnnouncement ? (
-    <Card variant="outline" height="100%" width="100%">
+    <Card variant="outline" height={['100%', 230]} width="100%">
       <CardBody height="100%">
-        <Flex justifyContent="flex-start">
+        <Flex mb={4} justifyContent="flex-start">
           {displayedAnnouncement.graphic ? (
             <Box
-              minWidth={84}
-              minHeight={84}
-              width={84}
-              height={84}
+              minWidth={[84, 76]}
+              minHeight={[84, 76]}
+              width={[84, 76]}
+              height={[84, 76]}
               mr={4}
               sx={{ borderRadius: '10px', overflow: 'hidden' }}
             >
@@ -85,10 +85,10 @@ export default function TradeAnnouncementHeaderCard({ blockTimestamp }: Props) {
             </Box>
           ) : null}
           <Box>
-            <Flex>
+            <Flex mb={1}>
               <Text variant="cardHeading">{displayedAnnouncement.title}</Text>
               <Box ml="auto">
-                <IconButton mb={1} onClick={handleDismissAnnouncement} icon={IconType.X} />
+                <IconButton onClick={handleDismissAnnouncement} icon={IconType.X} />
               </Box>
             </Flex>
             <Text variant="small" color="secondaryText">
diff --git a/app/src/containers/trade/TradeMarketDropdown/TradeMarketDropdownSpotPrice.tsx b/app/src/containers/trade/TradeMarketDropdown/TradeMarketDropdownSpotPrice.tsx
index 137fe80e..c4d30da8 100644
--- a/app/src/containers/trade/TradeMarketDropdown/TradeMarketDropdownSpotPrice.tsx
+++ b/app/src/containers/trade/TradeMarketDropdown/TradeMarketDropdownSpotPrice.tsx
@@ -24,7 +24,7 @@ const TradeMarketDropdownSpotPrice = withSuspense(
     const color = change >= 0 ? 'primaryText' : 'errorText'
     return (
       <Flex width={80} flexDirection="column" alignItems="flex-end">
-        <Text>{formatUSD(latestPrice)}</Text>
+        <Text color="text">{formatUSD(latestPrice)}</Text>
         <Text color={color} variant="small">
           {formatPercentage(change)}
         </Text>
diff --git a/app/src/containers/trade/TradePositionsCard/index.tsx b/app/src/containers/trade/TradePositionsCard/index.tsx
index 6671c5f2..b6db8997 100644
--- a/app/src/containers/trade/TradePositionsCard/index.tsx
+++ b/app/src/containers/trade/TradePositionsCard/index.tsx
@@ -1,80 +1,61 @@
 import Box from '@lyra/ui/components/Box'
-import ToggleButton from '@lyra/ui/components/Button/ToggleButton'
-import ToggleButtonItem from '@lyra/ui/components/Button/ToggleButtonItem'
-import Card from '@lyra/ui/components/Card'
+import Button from '@lyra/ui/components/Button'
 import CardSection from '@lyra/ui/components/Card/CardSection'
 import Flex from '@lyra/ui/components/Flex'
+import { IconType } from '@lyra/ui/components/Icon'
 import Text from '@lyra/ui/components/Text'
 import { Position } from '@lyrafinance/lyra-js'
-import React, { useState } from 'react'
+import React from 'react'
 import { useNavigate } from 'react-router-dom'
 
 import PositionsTable from '@/app/components/common/PositionsTable'
 import { PageId } from '@/app/constants/pages'
 import getPagePath from '@/app/utils/getPagePath'
 
-import TradeEventHistoryTable from './TradeEventHistoryTable'
-import TradePositionHistoryTable from './TradePositionHistoryTable'
-
 type Props = { openPositions: Position[] }
 
-type PositionTableState = 'closed' | 'trades' | 'open'
-
-const POSITION_TABS: { id: PositionTableState; label: string }[] = [
-  { id: 'open', label: 'Open' },
-  { id: 'closed', label: 'Closed' },
-  { id: 'trades', label: 'Trades' },
-]
-
 const TradePositionsCard = ({ openPositions }: Props) => {
-  const [selectedItem, setSelectedItem] = useState<PositionTableState>('open')
   const navigate = useNavigate()
   return (
-    <Box minHeight={[0, 300]} width="100%">
-      <Card width="100%">
-        <Flex px={[3, 6]} pt={[3, 6]}>
-          <ToggleButton>
-            {POSITION_TABS.map(item => (
-              <ToggleButtonItem
-                key={item.id}
-                id={item.id}
-                label={item.label}
-                isSelected={selectedItem === item.id}
-                onSelect={id => setSelectedItem(id)}
-              />
-            ))}
-          </ToggleButton>
+    <>
+      <CardSection noSpacing>
+        <Flex>
+          <Text variant="cardHeading">Open Positions</Text>
+          <Button
+            ml="auto"
+            variant="light"
+            label="History"
+            rightIcon={IconType.ArrowRight}
+            href={getPagePath({ page: PageId.TradeHistory })}
+          />
         </Flex>
-        {selectedItem === 'open' ? (
-          <CardSection noPadding={openPositions.length > 0}>
-            {openPositions.length > 0 ? (
-              <PositionsTable
-                positions={openPositions}
-                onClick={position =>
-                  navigate(
-                    getPagePath({
-                      page: PageId.Position,
-                      network: position.lyra.network,
-                      positionId: position.id,
-                      marketAddressOrName: position.marketName,
-                    })
-                  )
-                }
-                pageSize={5}
-              />
-            ) : (
-              <Text variant="small" color="secondaryText">
-                You have no open positions.
-              </Text>
-            )}
-          </CardSection>
-        ) : selectedItem === 'closed' ? (
-          <TradePositionHistoryTable />
+      </CardSection>
+      <CardSection noPadding>
+        {openPositions.length > 0 ? (
+          <PositionsTable
+            positions={openPositions}
+            onClick={position =>
+              navigate(
+                getPagePath({
+                  page: PageId.Position,
+                  network: position.lyra.network,
+                  positionId: position.id,
+                  marketAddressOrName: position.marketName,
+                })
+              )
+            }
+            mb={3}
+            pageSize={5}
+          />
         ) : (
-          <TradeEventHistoryTable />
+          <Box px={[3, 6]} pb={[3, 6]}>
+            <Text variant="small" color="secondaryText">
+              You have no open positions.
+            </Text>
+          </Box>
         )}
-      </Card>
-    </Box>
+      </CardSection>
+    </>
   )
 }
 
diff --git a/app/src/containers/trade/TradePriceCard/index.tsx b/app/src/containers/trade/TradePriceCard/index.tsx
index 2ba5d552..d7c2eed7 100644
--- a/app/src/containers/trade/TradePriceCard/index.tsx
+++ b/app/src/containers/trade/TradePriceCard/index.tsx
@@ -5,7 +5,6 @@ import { OhlcData } from '@lyra/ui/components/CandleChart'
 import { CardElement } from '@lyra/ui/components/Card'
 import CardBody from '@lyra/ui/components/Card/CardBody'
 import Flex from '@lyra/ui/components/Flex'
-import useIsMobile from '@lyra/ui/hooks/useIsMobile'
 import { Market, SnapshotPeriod } from '@lyrafinance/lyra-js'
 import React, { useCallback, useState } from 'react'
 
@@ -76,8 +75,8 @@ const TradePriceCard = ({ market }: Props): CardElement => {
   const [isSnapshotPeriodDropdownOpen, setIsSnapshotPeriodDropdownOpen] = useState(false)
   const [candleDuration, setCandleDuration] = useState<SnapshotPeriod>(getDefaultCandleDurationForPeriod(interval))
   const [traderSettings] = useTraderSettings()
-  const { isAdvancedMode } = traderSettings
-  const isMobile = useIsMobile()
+  const { isAdvancedMode, advancedHideChart: _advancedHideChart } = traderSettings
+  const advancedHideChart = isAdvancedMode && _advancedHideChart
 
   const handleCandleHover = useCallback((ohlcData: OhlcData | null) => {
     setCandle(ohlcData)
@@ -95,7 +94,7 @@ const TradePriceCard = ({ market }: Props): CardElement => {
 
   return (
     <CardBody>
-      <Flex width="100%" alignItems="flex-start" pb={2}>
+      <Flex width="100%" alignItems="flex-start">
         <Box flexGrow={1}>
           <SpotPriceChartTitle
             market={market}
@@ -105,10 +104,9 @@ const TradePriceCard = ({ market }: Props): CardElement => {
             hoverCandle={candle}
           />
         </Box>
-        {isAdvancedMode && !isMobile ? (
+        {!advancedHideChart && isAdvancedMode ? (
           <DropdownButton
             mobileTitle="Select Candle"
-            mr={2}
             label={formatCandleDuration(candleDuration)}
             isOpen={isSnapshotPeriodDropdownOpen}
             onClick={() => setIsSnapshotPeriodDropdownOpen(!isSnapshotPeriodDropdownOpen)}
@@ -126,41 +124,35 @@ const TradePriceCard = ({ market }: Props): CardElement => {
               />
             ))}
           </DropdownButton>
-        ) : isMobile ? (
-          <ChartIntervalSelector
-            ml="auto"
-            intervals={CANDLE_CHART_INTERVALS}
-            selectedInterval={interval}
-            onChangeInterval={handleChangeChartInterval}
-          />
         ) : null}
-        {!isMobile ? (
+        {!advancedHideChart ? (
           <ChartIntervalSelector
+            ml={3}
             intervals={CANDLE_CHART_INTERVALS}
-            mr={2}
-            ml="auto"
             selectedInterval={interval}
             onChangeInterval={handleChangeChartInterval}
           />
         ) : null}
       </Flex>
-      {isAdvancedMode ? (
-        <SpotPriceCandleChart
-          market={market}
-          interval={interval}
-          candleDuration={candleDuration}
-          onHover={handleCandleHover}
-          height={TRADE_SPOT_CANDLE_CHART_HEIGHT}
-        />
-      ) : (
-        <SpotPriceLineChart
-          market={market}
-          onHover={handleLineHover}
-          hoverSpotPrice={spotPrice}
-          height={TRADE_SPOT_LINE_CHART_HEIGHT}
-          interval={interval}
-        />
-      )}
+      {!advancedHideChart ? (
+        isAdvancedMode ? (
+          <SpotPriceCandleChart
+            market={market}
+            interval={interval}
+            candleDuration={candleDuration}
+            onHover={handleCandleHover}
+            height={TRADE_SPOT_CANDLE_CHART_HEIGHT}
+          />
+        ) : (
+          <SpotPriceLineChart
+            market={market}
+            onHover={handleLineHover}
+            hoverSpotPrice={spotPrice}
+            height={TRADE_SPOT_LINE_CHART_HEIGHT}
+            interval={interval}
+          />
+        )
+      ) : null}
     </CardBody>
   )
 }
diff --git a/app/src/hooks/local_storage/useTraderSettings.ts b/app/src/hooks/local_storage/useTraderSettings.ts
index 2aee2e14..9e9a621f 100644
--- a/app/src/hooks/local_storage/useTraderSettings.ts
+++ b/app/src/hooks/local_storage/useTraderSettings.ts
@@ -15,12 +15,14 @@ export type TraderSettings = {
   customCol1: CustomColumnOption
   customCol2: CustomColumnOption
   isAdvancedMode: boolean
+  advancedHideChart: boolean
 }
 
 export const DEFAULT_TRADER_SETTINGS: TraderSettings = {
   customCol1: CustomColumnOption.Delta,
   customCol2: CustomColumnOption.OI,
   isAdvancedMode: false,
+  advancedHideChart: true,
 }
 
 export default function useTraderSettings(): [TraderSettings, (partialSettings: Partial<TraderSettings>) => void] {
diff --git a/app/src/page_helpers/PositionPageHelper/index.tsx b/app/src/page_helpers/PositionPageHelper/index.tsx
index b0559cd2..4e9fc52a 100644
--- a/app/src/page_helpers/PositionPageHelper/index.tsx
+++ b/app/src/page_helpers/PositionPageHelper/index.tsx
@@ -7,8 +7,10 @@ import React from 'react'
 import PositionCard from '@/app/components/position/PositionCard'
 import PositionHistoryCard from '@/app/components/position/PositionHistoryCard'
 import PositionStatsCard from '@/app/components/position/PositionStatsCard'
+import { PageId } from '@/app/constants/pages'
 import PositionChartCard from '@/app/containers/position/PositionChartCard'
 import formatTokenName from '@/app/utils/formatTokenName'
+import getPagePath from '@/app/utils/getPagePath'
 
 import Page from '../common/Page'
 import PageGrid from '../common/Page/PageGrid'
@@ -24,7 +26,14 @@ const PositionPageHelper = ({ position, option }: Props): JSX.Element => {
   const isCall = position.isCall
   const baseName = formatTokenName(position.market().baseToken)
   return (
-    <Page showBackButton>
+    <Page
+      showBackButton
+      backHref={getPagePath({
+        page: PageId.Trade,
+        marketAddressOrName: position.market().name,
+        network: position.lyra.network,
+      })}
+    >
       <PageGrid>
         <Text mx={[3, 0]} variant="heading">
           {baseName} {formatUSD(strikePrice)} {isCall ? 'Call' : 'Put'}
diff --git a/app/src/page_helpers/TradeHistoryPageHelper/index.tsx b/app/src/page_helpers/TradeHistoryPageHelper/index.tsx
index ce0575a3..268272cd 100644
--- a/app/src/page_helpers/TradeHistoryPageHelper/index.tsx
+++ b/app/src/page_helpers/TradeHistoryPageHelper/index.tsx
@@ -127,13 +127,14 @@ export default function TradeHistoryPageHelper(): JSX.Element {
   return (
     <Page showBackButton backHref={getPagePath({ page: PageId.TradeIndex })}>
       <PageGrid>
+        <Text variant="heading">History</Text>
         <Card overflow="hidden">
           <CardSection noSpacing>
             <Flex>
               <ToggleButton>
                 {[
-                  { label: 'Positions', id: HistoryTab.Position },
-                  { label: 'Trade', id: HistoryTab.Trade },
+                  { label: 'Closed', id: HistoryTab.Position },
+                  { label: 'Trades', id: HistoryTab.Trade },
                 ].map(item => (
                   <ToggleButtonItem
                     key={item.id}
diff --git a/app/src/page_helpers/TradePageHelper/index.tsx b/app/src/page_helpers/TradePageHelper/index.tsx
index ce74f4e1..fc7e2620 100644
--- a/app/src/page_helpers/TradePageHelper/index.tsx
+++ b/app/src/page_helpers/TradePageHelper/index.tsx
@@ -13,7 +13,6 @@ import React, { useCallback, useMemo, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 
 import { DESKTOP_HEADER_NAV_HEIGHT, TRADE_CARD_MIN_HEIGHT, TRADE_CARD_MIN_WIDTH } from '@/app/constants/layout'
-import { LogEvent } from '@/app/constants/logEvents'
 import { PageId } from '@/app/constants/pages'
 import TradeAdvancedBoardCard from '@/app/containers/trade/TradeAdvancedBoardCard'
 import TradeAnnouncementHeaderCard from '@/app/containers/trade/TradeAnnouncementHeaderCard'
@@ -27,7 +26,6 @@ import useAnnouncements from '@/app/hooks/local_storage/useAnnouncements'
 import useTraderSettings from '@/app/hooks/local_storage/useTraderSettings'
 import useSelectedBoardSync from '@/app/hooks/market/useSelectedBoardSync'
 import getPagePath from '@/app/utils/getPagePath'
-import logEvent from '@/app/utils/logEvent'
 
 import Page from '../common/Page'
 import PageGrid from '../common/Page/PageGrid'
@@ -44,11 +42,10 @@ export default function TradePageHelper({ markets, selectedMarket, openPositions
   const [selectedBoard, setSelectedBoard] = useSelectedBoardSync(selectedMarket) // sync hook
   const [isCall, setIsCall] = useState(true)
   const [isBuy, setIsBuy] = useState(true)
-  const [isTradeModalOpen, setIsTradeModalOpen] = useState(false)
   const [traderSettings, setTraderSettings] = useTraderSettings()
   const selectedOption = selectedStrikeId !== null ? selectedMarket.liveOption(selectedStrikeId, isCall) : null
 
-  const { isAdvancedMode } = traderSettings
+  const { isAdvancedMode, advancedHideChart } = traderSettings
 
   const navigate = useNavigate()
 
@@ -91,25 +88,14 @@ export default function TradePageHelper({ markets, selectedMarket, openPositions
 
   const handleSelectOption = useCallback(
     (newOption: Option) => {
-      const isSelect = selectedStrikeId !== newOption.strike().id
-      if (isSelect) {
+      const isSelect = selectedStrikeId !== newOption?.strike().id
+      if (isSelect && newOption) {
         setSelectedStrikeId(newOption.strike().id)
-        setIsTradeModalOpen(true)
       } else {
-        setIsTradeModalOpen(false)
         setSelectedStrikeId(null)
       }
-      logEvent(isSelect ? LogEvent.BoardOptionSelect : LogEvent.BoardOptionDeselect, {
-        marketName: selectedMarket.name,
-        marketAddress: selectedMarket.address,
-        isCall,
-        strikeId: newOption.strike().id,
-        strikePrice: newOption.strike().strikePrice,
-        boardId: newOption.board().id,
-        expiryTimestamp: newOption.board().expiryTimestamp,
-      })
     },
-    [selectedMarket, isCall, selectedStrikeId]
+    [selectedStrikeId]
   )
 
   const handleSelectChainOption = useCallback(
@@ -119,22 +105,11 @@ export default function TradePageHelper({ markets, selectedMarket, openPositions
       setIsCall(newIsCall)
       if (isSelect) {
         setSelectedStrikeId(newOption.strike().id)
-        setIsTradeModalOpen(true)
       } else {
-        setIsTradeModalOpen(false)
         setSelectedStrikeId(null)
       }
-      logEvent(isSelect ? LogEvent.BoardOptionSelect : LogEvent.BoardOptionDeselect, {
-        marketName: selectedMarket.name,
-        marketAddress: selectedMarket.address,
-        isCall,
-        strikeId: newOption.strike().id,
-        strikePrice: newOption.strike().strikePrice,
-        boardId: newOption.board().id,
-        expiryTimestamp: newOption.board().expiryTimestamp,
-      })
     },
-    [selectedMarket, isCall, isBuy, selectedStrikeId]
+    [isCall, isBuy, selectedStrikeId]
   )
 
   const handleToggleBuy = useCallback((newIsBuy: boolean) => {
@@ -163,102 +138,10 @@ export default function TradePageHelper({ markets, selectedMarket, openPositions
 
   const { announcements } = useAnnouncements(selectedMarket.block.timestamp)
 
-  const tradeCard = (
-    <>
-      <Flex>
-        <TradeMarketDropdown markets={markets} onChangeMarket={handleChangeMarket} selectedMarket={selectedMarket} />
-        {!isMobile ? (
-          <Flex ml="auto" mb={2} alignItems="center">
-            <Button
-              isTransparent={isAdvancedMode}
-              label="Simple"
-              variant={isAdvancedMode ? 'light' : 'default'}
-              onClick={() => handleChangeAdvancedMode(false)}
-            />
-            <Button
-              ml={2}
-              isTransparent={!isAdvancedMode}
-              label="Advanced"
-              variant={isAdvancedMode ? 'default' : 'light'}
-              onClick={() => handleChangeAdvancedMode(true)}
-            />
-          </Flex>
-        ) : null}
-      </Flex>
-      <Card>
-        <TradePriceCard market={selectedMarket} />
-        <CardSeparator />
-        {!isAdvancedMode || isMobile ? (
-          <TradeSimpleBoardCard
-            isCall={isCall}
-            onToggleCall={newIsCall => {
-              if (newIsCall !== isCall) {
-                // Reset selected option
-                setSelectedStrikeId(null)
-              }
-              setIsCall(newIsCall)
-            }}
-            isBuy={isBuy}
-            onToggleBuy={handleToggleBuy}
-            market={selectedMarket}
-            selectedBoard={selectedBoard}
-            onSelectBoard={newBoard => {
-              if (newBoard.id !== selectedBoard?.id) {
-                // Reset selected option
-                setSelectedStrikeId(null)
-              }
-              setSelectedBoard(newBoard)
-            }}
-            selectedOption={selectedOption}
-            onSelectOption={handleSelectOption}
-          />
-        ) : (
-          <TradeAdvancedBoardCard
-            market={selectedMarket}
-            selectedOption={selectedOption}
-            onSelectOption={handleSelectChainOption}
-            isBuy={isBuy}
-          />
-        )}
-      </Card>
-    </>
-  )
-
-  const positionsCard = (
-    <>
-      <Flex>
-        <Text variant="heading">Open Positions</Text>
-        <Button
-          ml="auto"
-          variant="light"
-          label="History"
-          rightIcon={IconType.ArrowRight}
-          href={getPagePath({ page: PageId.TradeHistory })}
-        />
-      </Flex>
-      <TradePositionsCard openPositions={openPositions} />
-      {selectedOption && isMobile ? (
-        <TradeFormModal
-          option={selectedOption}
-          position={selectedPosition}
-          isBuy={isBuy}
-          onTrade={handleTrade}
-          isOpen={isTradeModalOpen}
-          onClose={() => {
-            setIsTradeModalOpen(false)
-            setSelectedStrikeId(null)
-          }}
-        />
-      ) : null}
-    </>
-  )
-
   return (
     <Page
-      title={announcements.length ? 'Trade' : undefined}
-      subtitle={announcements.length ? 'Buy and sell crypto options' : undefined}
       headerCard={
-        announcements.length > 0 ? (
+        announcements.length > 0 && isMobile ? (
           <TradeAnnouncementHeaderCard blockTimestamp={selectedMarket.block.timestamp} />
         ) : undefined
       }
@@ -266,34 +149,115 @@ export default function TradePageHelper({ markets, selectedMarket, openPositions
     >
       <PageGrid
         rightColumn={
-          <Box minWidth={TRADE_CARD_MIN_WIDTH}>
-            <Box minWidth={TRADE_CARD_MIN_WIDTH} sx={{ position: 'sticky', top: DESKTOP_HEADER_NAV_HEIGHT }} pb={12}>
-              <Card
-                width={TRADE_CARD_MIN_WIDTH}
-                minHeight={TRADE_CARD_MIN_HEIGHT}
-                sx={{ position: 'sticky', top: DESKTOP_HEADER_NAV_HEIGHT }}
-              >
-                {selectedOption ? (
+          <Box minWidth={TRADE_CARD_MIN_WIDTH} maxWidth={TRADE_CARD_MIN_WIDTH}>
+            <Box
+              minWidth={TRADE_CARD_MIN_WIDTH}
+              maxWidth={TRADE_CARD_MIN_WIDTH}
+              sx={{ position: 'sticky', top: DESKTOP_HEADER_NAV_HEIGHT }}
+              pb={12}
+            >
+              {selectedOption ? (
+                <Card width="100%">
                   <TradeForm isBuy={isBuy} option={selectedOption} onTrade={handleTrade} position={selectedPosition} />
-                ) : (
-                  <CardBody flexGrow={1}>
-                    <Text variant="cardHeading">Select Option</Text>
-                    <Center flexGrow={1} flexDirection="column">
-                      <Icon icon={IconType.PlusCircle} color="disabledText" size={64} strokeWidth={0.5} />
-                      <Text mt={4} color="secondaryText">
-                        Select an option
-                      </Text>
-                    </Center>
-                  </CardBody>
-                )}
-              </Card>
+                </Card>
+              ) : (
+                <>
+                  <Card mb={6} width="100%" minHeight={TRADE_CARD_MIN_HEIGHT}>
+                    <CardBody flexGrow={1}>
+                      <Text variant="cardHeading">Select Option</Text>
+                      <Center flexGrow={1} flexDirection="column">
+                        <Icon icon={IconType.PlusCircle} color="disabledText" size={64} strokeWidth={0.5} />
+                        <Text mt={4} color="secondaryText">
+                          Select an option
+                        </Text>
+                      </Center>
+                    </CardBody>
+                  </Card>
+                  <TradeAnnouncementHeaderCard blockTimestamp={selectedMarket.block.timestamp} />
+                </>
+              )}
             </Box>
           </Box>
         }
       >
-        {tradeCard}
-        <Box mb={2} />
-        {positionsCard}
+        <Flex>
+          <TradeMarketDropdown markets={markets} onChangeMarket={handleChangeMarket} selectedMarket={selectedMarket} />
+          {!isMobile ? (
+            <Flex ml="auto" alignItems="center">
+              <Button
+                isTransparent={isAdvancedMode}
+                label="Simple"
+                variant={isAdvancedMode ? 'light' : 'default'}
+                onClick={() => handleChangeAdvancedMode(false)}
+              />
+              <Button
+                ml={2}
+                isTransparent={!isAdvancedMode}
+                label="Advanced"
+                variant={isAdvancedMode ? 'default' : 'light'}
+                onClick={() => handleChangeAdvancedMode(true)}
+              />
+              {isAdvancedMode ? (
+                <Button
+                  ml={4}
+                  label={advancedHideChart ? 'View chart' : 'Hide chart'}
+                  rightIcon={advancedHideChart ? IconType.Maximize2 : IconType.Minimize2}
+                  width={115}
+                  rightIconSpacing={1}
+                  onClick={() => setTraderSettings({ advancedHideChart: !advancedHideChart })}
+                />
+              ) : null}
+            </Flex>
+          ) : null}
+        </Flex>
+        <Card>
+          <TradePriceCard market={selectedMarket} />
+          <CardSeparator />
+          <TradePositionsCard openPositions={openPositions} />
+          <CardSeparator />
+          {!isAdvancedMode || isMobile ? (
+            <TradeSimpleBoardCard
+              isCall={isCall}
+              onToggleCall={newIsCall => {
+                if (newIsCall !== isCall) {
+                  // Reset selected option
+                  setSelectedStrikeId(null)
+                }
+                setIsCall(newIsCall)
+              }}
+              isBuy={isBuy}
+              onToggleBuy={handleToggleBuy}
+              market={selectedMarket}
+              selectedBoard={selectedBoard}
+              onSelectBoard={newBoard => {
+                if (newBoard.id !== selectedBoard?.id) {
+                  // Reset selected option
+                  setSelectedStrikeId(null)
+                }
+                setSelectedBoard(newBoard)
+              }}
+              selectedOption={selectedOption}
+              onSelectOption={handleSelectOption}
+            />
+          ) : (
+            <TradeAdvancedBoardCard
+              market={selectedMarket}
+              selectedOption={selectedOption}
+              onSelectOption={handleSelectChainOption}
+              isBuy={isBuy}
+            />
+          )}
+        </Card>
+        {selectedOption && isMobile ? (
+          <TradeFormModal
+            isOpen
+            onClose={() => setSelectedStrikeId(null)}
+            onTrade={() => setSelectedStrikeId(null)}
+            option={selectedOption}
+            position={selectedPosition}
+            isBuy={isBuy}
+          />
+        ) : null}
       </PageGrid>
     </Page>
   )
diff --git a/app/src/page_helpers/common/Page/PageDesktop.tsx b/app/src/page_helpers/common/Page/PageDesktop.tsx
index 410289e9..5b4397bd 100644
--- a/app/src/page_helpers/common/Page/PageDesktop.tsx
+++ b/app/src/page_helpers/common/Page/PageDesktop.tsx
@@ -30,7 +30,7 @@ export default function PageDesktop({
         maxWidth="100vw"
         flexDirection="column"
       >
-        {title ? (
+        {title || headerCard ? (
           <Box mt={7}>
             <Flex height={HEADER_CARD_HEIGHT} alignItems="center">
               <Box>
@@ -52,7 +52,7 @@ export default function PageDesktop({
           </Box>
         ) : null}
         {showBackButton ? (
-          <Flex mt={!title ? 7 : 0}>
+          <Flex mt={!(title || headerCard) ? 7 : 0}>
             <IconButton
               variant="light"
               icon={IconType.ArrowLeft}
diff --git a/app/src/page_helpers/common/Page/PageMobile.tsx b/app/src/page_helpers/common/Page/PageMobile.tsx
index 61755172..b37f12d7 100644
--- a/app/src/page_helpers/common/Page/PageMobile.tsx
+++ b/app/src/page_helpers/common/Page/PageMobile.tsx
@@ -27,24 +27,26 @@ export default function PageMobile({
   return (
     <Box px={3} pt={3} flexGrow={1} pb={MOBILE_FOOTER_HEIGHT + 9 * 4}>
       <Image
-        mb={!title && !showBackButton ? 0 : !title && showBackButton ? 8 : 12}
+        mb={!(title || headerCard) && !showBackButton ? 0 : !(title || headerCard) && showBackButton ? 8 : 12}
         href={getPagePath({ page: PageId.TradeIndex })}
         src={getAssetSrc('/images/logo.png')}
         height={36}
         width={36}
       />
-      {title ? (
+      {title || headerCard ? (
         <>
-          <Box mb={8}>
-            <Text variant="title" mb={subtitle ? 2 : 0}>
-              {title}
-            </Text>
-            {subtitle ? (
-              <Text variant="subtitle" color="secondaryText">
-                {subtitle}
+          {title ? (
+            <Box mb={8}>
+              <Text variant="title" mb={subtitle ? 2 : 0}>
+                {title}
               </Text>
-            ) : null}
-          </Box>
+              {subtitle ? (
+                <Text variant="subtitle" color="secondaryText">
+                  {subtitle}
+                </Text>
+              ) : null}
+            </Box>
+          ) : null}
           {headerCard ? (
             <Box mb={showBackButton ? 8 : 0} height={HEADER_CARD_HEIGHT} width="100%">
               {headerCard}
diff --git a/ui/components/Button/index.tsx b/ui/components/Button/index.tsx
index e8a9b63f..17f38716 100644
--- a/ui/components/Button/index.tsx
+++ b/ui/components/Button/index.tsx
@@ -60,7 +60,6 @@ export const getButtonSizeSx = (size: ButtonSize): Record<string, ResponsiveValu
         fontSize: '14px',
         lineHeight: '14px',
         minHeight: '22px',
-        minWidth: '22px',
         borderRadius: 'text',
         p: 0,
       }
@@ -72,7 +71,6 @@ export const getButtonSizeSx = (size: ButtonSize): Record<string, ResponsiveValu
         fontSize: '14px',
         lineHeight: '14px',
         minHeight: ['42px', '36px'],
-        minWidth: ['42px', '36px'],
         borderRadius: ['21px', '18px'],
         p: 0,
       }
@@ -84,7 +82,6 @@ export const getButtonSizeSx = (size: ButtonSize): Record<string, ResponsiveValu
         fontSize: '16px',
         lineHeight: '16px',
         minHeight: ['62px', '56px'],
-        minWidth: ['62px', '56px'],
         borderRadius: ['31px', '28px'],
         p: 0,
       }
diff --git a/ui/components/List/ListItem.tsx b/ui/components/List/ListItem.tsx
index c93d5f1d..7a48919b 100644
--- a/ui/components/List/ListItem.tsx
+++ b/ui/components/List/ListItem.tsx
@@ -74,7 +74,7 @@ export default function ListItem({
           ) : null}
           <Flex flexGrow={1} flexDirection="column">
             {typeof label === 'string' || typeof label === 'number' ? (
-              <Text variant="small" color="inherit" sx={{ transition: 'all 0.05s ease-out' }}>
+              <Text variant="small" color="inherit">
                 {label}
               </Text>
             ) : (