feat: Pro mode

app/components/common/TradeEventsTable/index.tsx

@@ -18,6 +18,7 @@ type Props = {
   events: { event: TradeEvent | CollateralUpdateEvent | SettleEvent; position: Position }[]
   onClick?: (event: TradeEvent | CollateralUpdateEvent | SettleEvent) => void
   hideOption?: boolean
+  pageSize?: number
 } & MarginProps
 
 export type TradeEventTableData = TableData<{
@@ -36,7 +37,7 @@ export type TradeEventTableData = TableData<{
   isBaseCollateral: boolean
 }>
 
-const TradeEventsTable = ({ events, onClick, hideOption }: Props) => {
+const TradeEventsTable = ({ events, onClick, hideOption, pageSize = 10 }: Props) => {
   const rows: TradeEventTableData[] = useMemo(() => {
     return events.map(({ event, position }) => {
       const marketName = event.marketName
@@ -212,7 +213,7 @@ const TradeEventsTable = ({ events, onClick, hideOption }: Props) => {
     return null
   }
 
-  return <Table width="100%" data={rows} columns={columns} pageSize={10} />
+  return <Table width="100%" data={rows} columns={columns} pageSize={pageSize} />
 }
 
 export default TradeEventsTable

app/components/trade/CandleChart/index.tsx

@@ -0,0 +1,5 @@
+import dynamic from 'next/dynamic'
+
+const CandleChart = dynamic(() => import('@lyra/ui/components/CandleChart'), { suspense: true, ssr: false })
+
+export default CandleChart

app/components/trade/TradeBoardTableOrList/TradeBoardPriceButton.tsx

@@ -61,7 +61,7 @@ export default function TradeBoardPriceButton({
   const isDisabled = disabledReason ? getIsButtonDisabled(disabledReason) : false
   return (
     <Button
-      variant={(isCall && isBuy) || (!isCall && !isBuy) ? 'primary' : 'error'}
+      variant={isBuy ? 'primary' : 'error'}
       width={getButtonWidthForMarket(quote.marketName)}
       showRightIconSeparator={!isDisabled}
       isOutline={!isSelected}

app/components/trade/TradeBoardTableOrList/TradeBoardTableDesktop.tsx

@@ -8,7 +8,7 @@ import formatUSD from '@lyra/ui/utils/formatUSD'
 import { Quote, QuoteDisabledReason } from '@lyrafinance/lyra-js'
 import React, { useMemo, useState } from 'react'
 
-import { ONE_BN } from '@/app/constants/bn'
+import { ONE_BN, ZERO_BN } from '@/app/constants/bn'
 import { MAX_IV } from '@/app/constants/contracts'
 import { LogEvent } from '@/app/constants/logEvents'
 import fromBigNumber from '@/app/utils/fromBigNumber'
@@ -26,6 +26,7 @@ type OptionData = TableData<{
   iv: number
   marketAddressOrName: string
   breakEven: number
+  toBreakEven: number
   price: number
   disabledReason: QuoteDisabledReason | null
 }>
@@ -50,8 +51,9 @@ const TradeBoardTableDesktop = ({
   const [expandedStrikes, setExpandedStrikes] = useState<Record<string, boolean>>({})
   const market = quotes.length ? quotes[0].option.market() : null
   const size = getDefaultQuoteSize(market?.name ?? '') // defaults to one
+  const spotPrice = fromBigNumber(market?.spotPrice ?? ZERO_BN)
   const rows: OptionData[] = useMemo(() => {
-    return filterNulls(
+    const rows = filterNulls(
       quotes.map(({ bid, ask, option }) => {
         const quote = isBuy ? bid : ask
         const isExpanded = !!expandedStrikes[quote.strike().id.toString()]
@@ -65,17 +67,19 @@ const TradeBoardTableDesktop = ({
           iv: fromBigNumber(quote.iv),
           price: fromBigNumber(quote.pricePerOption),
           breakEven: fromBigNumber(quote.breakEven),
+          toBreakEven: fromBigNumber(quote.breakEven.sub(market?.spotPrice ?? ZERO_BN)),
           disabledReason: quote.disabledReason,
           isExpanded,
-          onToggleExpand: isExpanded => {
+          onToggleExpand: (isExpanded: boolean) => {
             setExpandedStrikes(expandedStrikes => ({
               ...expandedStrikes,
               [quote.strike().id.toString()]: isExpanded,
             }))
             logEvent(isExpanded ? LogEvent.BoardStrikeExpand : LogEvent.BoardStrikeCollapse, getLogData(quote))
           },
+          isExpandedContentClickable: true,
           expanded: (
-            <Box pb={4}>
+            <Box pb={4} px={3}>
               <Text variant="bodyMedium" mb={4}>
                 Stats
               </Text>
@@ -85,7 +89,9 @@ const TradeBoardTableDesktop = ({
         }
       })
     )
-  }, [quotes, isBuy, expandedStrikes])
+
+    return rows
+  }, [quotes, isBuy, expandedStrikes, market?.spotPrice, spotPrice])
 
   const columns = useMemo<TableColumn<OptionData>[]>(
     () => [
@@ -105,6 +111,14 @@ const TradeBoardTableDesktop = ({
           <Text variant="secondary">{props.cell.value > 0 ? formatUSD(props.cell.value) : '-'}</Text>
         ),
       },
+      {
+        accessor: 'toBreakEven',
+        Header: 'To Break Even',
+        disableSortBy: true,
+        Cell: (props: TableCellProps<OptionData>) => (
+          <Text variant="secondary">{(props.cell.value > 0 ? '+' : '') + formatUSD(props.cell.value)}</Text>
+        ),
+      },
       {
         accessor: 'iv',
         Header: 'Implied Volatility',
@@ -137,9 +151,14 @@ const TradeBoardTableDesktop = ({
     [market, size, selectedOption, isCall, isBuy, onSelectOption]
   )
 
+  const spotPriceRowIdx = useMemo(
+    () => Math.max(rows.findIndex(row => row.strike >= spotPrice) - 1, 0),
+    [rows, spotPrice]
+  )
+
   return (
     <CardSection noPadding>
-      <Table data={rows} columns={columns} />
+      <Table data={rows} columns={columns} tableMarker={{ rowIdx: spotPriceRowIdx, content: formatUSD(spotPrice) }} />
     </CardSection>
   )
 }

app/components/trade/TradeChain/TradeChainPriceButton.tsx

@@ -0,0 +1,62 @@
+import Box from '@lyra/ui/components/Box'
+import Button, { ButtonElement } from '@lyra/ui/components/Button'
+import Text from '@lyra/ui/components/Text'
+import useFontSize from '@lyra/ui/hooks/useFontSize'
+import { MarginProps } from '@lyra/ui/types'
+import formatPercentage from '@lyra/ui/utils/formatPercentage'
+import formatUSD from '@lyra/ui/utils/formatUSD'
+import { Quote } from '@lyrafinance/lyra-js'
+import React from 'react'
+
+import emptyFunction from '@/app/utils/emptyFunction'
+import fromBigNumber from '@/app/utils/fromBigNumber'
+
+type Props = {
+  quote: Quote
+  isBid: boolean
+  isSelected: boolean
+  onSelected: (isSelected: boolean) => void
+} & MarginProps
+
+export default function TradeChainPriceButton({
+  quote,
+  isSelected,
+  isBid,
+  onSelected = emptyFunction,
+  ...styleProps
+}: Props): ButtonElement {
+  const secondaryLineHeight = useFontSize('secondary')
+  const smallLineHeight = useFontSize('small')
+  return (
+    <Button
+      minHeight={42}
+      variant={isBid ? 'error' : 'primary'}
+      textVariant="secondary"
+      isTransparent={!isSelected}
+      isDisabled={quote.isDisabled}
+      label={
+        <Box>
+          <Text variant="secondary" sx={{ lineHeight: `${secondaryLineHeight}px` }}>
+            {formatUSD(quote.premium)} {!isSelected ? '+' : '✓'}
+          </Text>
+          <Text
+            mt={1}
+            textAlign="left"
+            variant="small"
+            color={isSelected ? 'inherit' : 'secondaryText'}
+            sx={{ lineHeight: `${smallLineHeight}px` }}
+          >
+            {formatPercentage(fromBigNumber(quote.iv), true)}
+          </Text>
+        </Box>
+      }
+      onClick={e => {
+        e.preventDefault()
+        e.stopPropagation()
+        e.nativeEvent.stopPropagation()
+        onSelected(!isSelected)
+      }}
+      {...styleProps}
+    />
+  )
+}