feat: move positions to top of trade page, add collapse chart in adva…

…nced mode, move announcements below trade form
derivexyz · May 13, 2023 · e21a99f · e21a99f
1 parent 7e15dc3
commit e21a99f
Show file tree

Hide file tree

Showing 16 changed files with 218 additions and 269 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -69,26 +69,26 @@ 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' }}
             >
               <Image src={displayedAnnouncement.graphic} width="100%" height="100%" />
             </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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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}