From fe1978f67422b0f22634a26ee7b910a6d886ba0c Mon Sep 17 00:00:00 2001
From: dappbeast <jake@lyra.finance>
Date: Mon, 14 Nov 2022 10:45:24 +1100
Subject: [PATCH] feat: tidy up quote, fix quote errors

---
 .../common/OptionStatsGrid/index.tsx          | 40 ++++-----
 .../position/PositionStatsCard/index.tsx      | 11 ++-
 .../trade/TradeBoardNoticeSection/index.tsx   | 70 +++++++++++++++
 .../TradeBoardListMobile.tsx                  | 20 +++--
 .../TradeBoardPriceButton.tsx                 | 14 +--
 .../TradeBoardTableDesktop.tsx                | 50 +++++------
 .../trade/TradeBoardTableOrList/index.tsx     | 12 ++-
 .../TradeChainPriceButton.tsx                 |  0
 .../{TradeChain => TradeChainTable}/index.tsx | 86 +++++++++----------
 app/constants/contracts.ts                    | 17 ++++
 app/constants/ignore.ts                       | 14 +++
 app/constants/layout.ts                       |  2 +-
 app/constants/links.ts                        |  3 +-
 .../common/ShortYieldValue/index.tsx          |  4 +-
 .../trade/TradeAdvancedBoardCard/index.tsx    | 24 ++++--
 .../TradeSimpleBoardTable.tsx                 | 74 ++++++++--------
 .../trade/TradeSimpleBoardCard/index.tsx      |  1 -
 app/hooks/market/useBoardQuotesSync.ts        | 42 +++++++++
 app/hooks/market/useOptionQuotesSync.ts       |  7 ++
 app/hooks/market/useQuoteBoard.ts             | 22 -----
 app/hooks/market/useQuoteBoards.ts            | 31 -------
 app/hooks/market/useSelectedBoard.ts          |  7 +-
 app/page_helpers/PositionPageHelper/index.tsx |  2 +-
 app/utils/getIsQuoteHidden.ts                 | 12 +++
 sdk/src/board/index.ts                        | 52 +++++++++--
 sdk/src/lyra.ts                               | 42 +++++++--
 sdk/src/market/index.ts                       | 33 +++++--
 sdk/src/option/index.ts                       | 30 ++++++-
 sdk/src/quote/getQuoteBoard.ts                | 19 ----
 sdk/src/quote/index.ts                        | 36 +++++++-
 sdk/src/strike/index.ts                       | 38 +++++++-
 sdk/src/trade/index.ts                        |  4 +-
 ui/components/Alert/index.tsx                 | 44 +++++++++-
 ui/theme/index.ts                             |  4 +-
 34 files changed, 580 insertions(+), 287 deletions(-)
 create mode 100644 app/components/trade/TradeBoardNoticeSection/index.tsx
 rename app/components/trade/{TradeChain => TradeChainTable}/TradeChainPriceButton.tsx (100%)
 rename app/components/trade/{TradeChain => TradeChainTable}/index.tsx (81%)
 create mode 100644 app/constants/ignore.ts
 create mode 100644 app/hooks/market/useBoardQuotesSync.ts
 create mode 100644 app/hooks/market/useOptionQuotesSync.ts
 delete mode 100644 app/hooks/market/useQuoteBoard.ts
 delete mode 100644 app/hooks/market/useQuoteBoards.ts
 create mode 100644 app/utils/getIsQuoteHidden.ts
 delete mode 100644 sdk/src/quote/getQuoteBoard.ts

diff --git a/app/components/common/OptionStatsGrid/index.tsx b/app/components/common/OptionStatsGrid/index.tsx
index 9ab76f7d..1929c749 100644
--- a/app/components/common/OptionStatsGrid/index.tsx
+++ b/app/components/common/OptionStatsGrid/index.tsx
@@ -1,53 +1,49 @@
-import Box from '@lyra/ui/components/Box'
 import Grid from '@lyra/ui/components/Grid'
-import useIsMobile from '@lyra/ui/hooks/useIsMobile'
 import formatNumber from '@lyra/ui/utils/formatNumber'
 import formatPercentage from '@lyra/ui/utils/formatPercentage'
 import formatTruncatedUSD from '@lyra/ui/utils/formatTruncatedUSD'
 import formatUSD from '@lyra/ui/utils/formatUSD'
-import { Option } from '@lyrafinance/lyra-js'
+import { Option, Quote } from '@lyrafinance/lyra-js'
 import React from 'react'
 
 import { UNIT } from '@/app/constants/bn'
 import { MAX_IV } from '@/app/constants/contracts'
 import fromBigNumber from '@/app/utils/fromBigNumber'
-import getDefaultQuoteSize from '@/app/utils/getDefaultQuoteSize'
 
 import LabelItem from '../LabelItem'
 
 type Props = {
   option: Option
-  isBuy: boolean
+  bid: Quote | null
+  ask: Quote | null
 }
 
-const OptionStatsGrid = ({ option, isBuy }: Props) => {
-  const size = getDefaultQuoteSize(option.market().name)
-  const bid = option.quoteSync(true, size)
-  const ask = option.quoteSync(false, size)
-  const quote = isBuy ? bid : ask
+const OptionStatsGrid = ({ option, bid, ask }: Props) => {
   const openInterest = option.longOpenInterest.add(option.shortOpenInterest).mul(option.market().spotPrice).div(UNIT)
-  const isMobile = useIsMobile()
   return (
-    <Grid sx={{ gridTemplateColumns: ['1fr 1fr', '1fr 1fr 1fr 1fr 1fr'], gridColumnGap: [3, 6], gridRowGap: 8 }}>
+    <Grid sx={{ gridTemplateColumns: ['1fr 1fr', '1fr 1fr 1fr 1fr 1fr'], gridColumnGap: [3, 6], gridRowGap: [3, 6] }}>
       <LabelItem
         label="Bid"
-        value={!ask.isDisabled && ask.pricePerOption.gt(0) ? formatUSD(ask.pricePerOption) : '-'}
+        value={bid && !bid.isDisabled && bid.pricePerOption.gt(0) ? formatUSD(bid.pricePerOption) : '-'}
       />
       <LabelItem
         label="Ask"
-        value={!bid.isDisabled && bid.pricePerOption.gt(0) ? formatUSD(bid.pricePerOption) : '-'}
+        value={ask && !ask.isDisabled && ask.pricePerOption.gt(0) ? formatUSD(ask.pricePerOption) : '-'}
       />
       <LabelItem
-        label="Implied Volatility"
-        value={quote.iv.gt(0) && quote.iv.lt(MAX_IV) ? formatPercentage(fromBigNumber(quote.iv), true) : '-'}
+        label="Bid IV"
+        value={bid && bid.iv.gt(0) && bid.iv.lt(MAX_IV) ? formatPercentage(fromBigNumber(bid.iv), true) : '-'}
+      />
+      <LabelItem
+        label="Ask IV"
+        value={ask && ask.iv.gt(0) && ask.iv.lt(MAX_IV) ? formatPercentage(fromBigNumber(ask.iv), true) : '-'}
       />
       <LabelItem label="Open Interest" value={openInterest.gt(0) ? formatTruncatedUSD(openInterest) : '-'} />
-      {!isMobile ? <Box /> : null}
-      <LabelItem label="Delta" value={formatNumber(quote.greeks.delta, { dps: 3 })} />
-      <LabelItem label="Vega" value={formatNumber(quote.greeks.vega, { dps: 3 })} />
-      <LabelItem label="Gamma" value={formatNumber(quote.greeks.gamma, { dps: 3 })} />
-      <LabelItem label="Theta" value={formatNumber(quote.greeks.theta, { dps: 3 })} />
-      <LabelItem label="Rho" value={formatNumber(quote.greeks.rho, { dps: 3 })} />
+      <LabelItem label="Delta" value={formatNumber(option.delta, { dps: 3 })} />
+      <LabelItem label="Vega" value={formatNumber(option.strike().vega, { dps: 3 })} />
+      <LabelItem label="Gamma" value={formatNumber(option.strike().gamma, { dps: 3 })} />
+      <LabelItem label="Theta" value={formatNumber(option.theta, { dps: 3 })} />
+      <LabelItem label="Rho" value={formatNumber(option.rho, { dps: 3 })} />
     </Grid>
   )
 }
diff --git a/app/components/position/PositionStatsCard/index.tsx b/app/components/position/PositionStatsCard/index.tsx
index f1b09061..26534fad 100644
--- a/app/components/position/PositionStatsCard/index.tsx
+++ b/app/components/position/PositionStatsCard/index.tsx
@@ -1,24 +1,27 @@
 import Card from '@lyra/ui/components/Card'
 import CardSection from '@lyra/ui/components/Card/CardSection'
 import Text from '@lyra/ui/components/Text'
-import { Option, Position } from '@lyrafinance/lyra-js'
+import { Option } from '@lyrafinance/lyra-js'
 import React from 'react'
 
+import useOptionQuotesSync from '@/app/hooks/market/useOptionQuotesSync'
+import getDefaultQuoteSize from '@/app/utils/getDefaultQuoteSize'
+
 import OptionStatsGrid from '../../common/OptionStatsGrid'
 
 type Props = {
-  position: Position
   option: Option
 }
 
-const PositionStatsCard = ({ option, position }: Props): JSX.Element | null => {
+const PositionStatsCard = ({ option }: Props): JSX.Element | null => {
+  const { bid, ask } = useOptionQuotesSync(option, getDefaultQuoteSize(option.market().name))
   return (
     <Card>
       <CardSection>
         <Text variant="heading" mb={6}>
           Stats
         </Text>
-        <OptionStatsGrid option={option} isBuy={position.isLong} />
+        <OptionStatsGrid option={option} bid={bid} ask={ask} />
       </CardSection>
     </Card>
   )
diff --git a/app/components/trade/TradeBoardNoticeSection/index.tsx b/app/components/trade/TradeBoardNoticeSection/index.tsx
new file mode 100644
index 00000000..8ce2e2f9
--- /dev/null
+++ b/app/components/trade/TradeBoardNoticeSection/index.tsx
@@ -0,0 +1,70 @@
+import Alert from '@lyra/ui/components/Alert'
+import { IconType } from '@lyra/ui/components/Icon'
+import { MarginProps } from '@lyra/ui/types'
+import formatTruncatedDuration from '@lyra/ui/utils/formatTruncatedDuration'
+import { Board } from '@lyrafinance/lyra-js'
+import React from 'react'
+
+import { MAX_UTILIZATION, OptionQuotesNullable, StrikeQuotesNullable } from '@/app/constants/contracts'
+import { TRADING_CUTOFF_DOC_URL } from '@/app/constants/links'
+
+type Props = {
+  board: Board
+  isGlobalPaused: boolean
+  quotes: (StrikeQuotesNullable | OptionQuotesNullable)[]
+} & MarginProps
+
+export default function TradeBoardNoticeSection({ board, isGlobalPaused, quotes, ...marginProps }: Props) {
+  const market = board.market()
+  if (board.isTradingCutoff || board.isExpired) {
+    return (
+      <Alert
+        icon={IconType.AlertTriangle}
+        title="Trading Cutoff"
+        variant="default"
+        description={`Trading ends ${formatTruncatedDuration(
+          board.expiryTimestamp - board.tradingCutoffTimestamp
+        )} before
+              expiration. Traders can still close their positions for this expiry.`}
+        linkHref={TRADING_CUTOFF_DOC_URL}
+        {...marginProps}
+      />
+    )
+  } else if (isGlobalPaused || board.isPaused) {
+    return (
+      <Alert
+        icon={IconType.AlertTriangle}
+        title="Trading Paused"
+        variant="warning"
+        description={isGlobalPaused ? 'Trading is paused.' : `Trading for the ${market.name} market is paused.`}
+        {...marginProps}
+      />
+    )
+  } else if (market.liquidity.utilization >= MAX_UTILIZATION) {
+    return (
+      <Alert
+        icon={IconType.AlertTriangle}
+        title="High Utilization"
+        variant="warning"
+        description={`The ${market.name} market is ${
+          market.liquidity.utilization === 1 ? 'fully utilized' : 'almost fully utilized'
+        }. When a vault is fully utilized new positions can be opened. Traders can still close their ${
+          market.name
+        } positions.`}
+        {...marginProps}
+      />
+    )
+  } else if (!quotes.length) {
+    return (
+      <Alert
+        icon={IconType.Info}
+        title="No Available Strikes"
+        description="This expiry has no available strikes in delta range. Traders can still close their positions for this expiry."
+        linkHref={TRADING_CUTOFF_DOC_URL}
+        {...marginProps}
+      />
+    )
+  } else {
+    return null
+  }
+}
diff --git a/app/components/trade/TradeBoardTableOrList/TradeBoardListMobile.tsx b/app/components/trade/TradeBoardTableOrList/TradeBoardListMobile.tsx
index 5596236e..a1c278e5 100644
--- a/app/components/trade/TradeBoardTableOrList/TradeBoardListMobile.tsx
+++ b/app/components/trade/TradeBoardTableOrList/TradeBoardListMobile.tsx
@@ -19,21 +19,25 @@ import { TradeBoardTableOrListProps } from '.'
 import TradeBoardPriceButton from './TradeBoardPriceButton'
 
 const TradeBoardListMobile = ({
-  isCall,
   isBuy,
   quotes,
   selectedOption,
   onSelectOption,
-  ...styleProps
 }: TradeBoardTableOrListProps): ListElement => {
-  const [expandedQuote, setExpandedQuote] = useState<{ bid: Quote; ask: Quote; option: Option } | null>(null)
+  const [expandedQuote, setExpandedQuote] = useState<{ bid: Quote | null; ask: Quote | null; option: Option } | null>(
+    null
+  )
   const strikeId = selectedOption?.strike().id
   return (
-    <Box {...styleProps}>
+    <Box>
       {quotes.map(({ option, bid, ask }) => {
-        const quote = isBuy ? bid : ask
+        const quote = isBuy ? ask : bid
+        const strike = option.strike()
+        if (!quote) {
+          return null
+        }
         return (
-          <React.Fragment key={option.strike().id}>
+          <React.Fragment key={strike.id}>
             <CardSection
               onClick={() => {
                 setExpandedQuote({ option, bid, ask })
@@ -78,7 +82,7 @@ const TradeBoardListMobile = ({
           expandedQuote ? (
             <Text variant="heading" ml={6} mt={6}>
               {expandedQuote.option.market().name} ${fromBigNumber(expandedQuote.option.strike().strikePrice)}{' '}
-              {isCall ? 'Call' : 'Put'}
+              {expandedQuote.option.isCall ? 'Call' : 'Put'}
               <Text as="span" color="secondaryText">
                 &nbsp;·&nbsp;Exp. {formatDate(expandedQuote.option.board().expiryTimestamp, true)}
               </Text>
@@ -90,7 +94,7 @@ const TradeBoardListMobile = ({
       >
         {expandedQuote ? (
           <CardSection>
-            <OptionStatsGrid option={expandedQuote.option} isBuy={isBuy} />
+            <OptionStatsGrid {...expandedQuote} />
           </CardSection>
         ) : null}
       </Modal>
diff --git a/app/components/trade/TradeBoardTableOrList/TradeBoardPriceButton.tsx b/app/components/trade/TradeBoardTableOrList/TradeBoardPriceButton.tsx
index 5406dfdc..991a372e 100644
--- a/app/components/trade/TradeBoardTableOrList/TradeBoardPriceButton.tsx
+++ b/app/components/trade/TradeBoardTableOrList/TradeBoardPriceButton.tsx
@@ -6,6 +6,7 @@ import { Quote, QuoteDisabledReason } from '@lyrafinance/lyra-js'
 import React from 'react'
 
 import emptyFunction from '@/app/utils/emptyFunction'
+import getIsQuoteHidden from '@/app/utils/getIsQuoteHidden'
 
 type Props = {
   quote: Quote
@@ -33,15 +34,6 @@ const getDisabledMessage = (disabledReason: QuoteDisabledReason): string => {
   }
 }
 
-const getIsButtonDisabled = (disabledReason: QuoteDisabledReason): boolean => {
-  switch (disabledReason) {
-    case QuoteDisabledReason.InsufficientLiquidity:
-      return false
-    default:
-      return true
-  }
-}
-
 const getButtonWidthForMarket = (marketName: string) => {
   switch (marketName.toLowerCase()) {
     case 'btc':
@@ -57,8 +49,8 @@ export default function TradeBoardPriceButton({
   onSelected = emptyFunction,
   ...styleProps
 }: Props): ButtonElement {
-  const { isCall, isBuy, disabledReason } = quote
-  const isDisabled = disabledReason ? getIsButtonDisabled(disabledReason) : false
+  const { isBuy, disabledReason } = quote
+  const isDisabled = disabledReason ? getIsQuoteHidden(disabledReason) : false
   return (
     <Button
       variant={isBuy ? 'primary' : 'error'}
diff --git a/app/components/trade/TradeBoardTableOrList/TradeBoardTableDesktop.tsx b/app/components/trade/TradeBoardTableOrList/TradeBoardTableDesktop.tsx
index 658eab43..3600b794 100644
--- a/app/components/trade/TradeBoardTableOrList/TradeBoardTableDesktop.tsx
+++ b/app/components/trade/TradeBoardTableOrList/TradeBoardTableDesktop.tsx
@@ -1,6 +1,5 @@
 import Box from '@lyra/ui/components/Box'
-import CardSection from '@lyra/ui/components/Card/CardSection'
-import Table, { TableCellProps, TableColumn, TableData, TableElement } from '@lyra/ui/components/Table'
+import Table, { TableCellProps, TableColumn, TableData } from '@lyra/ui/components/Table'
 import Text from '@lyra/ui/components/Text'
 import filterNulls from '@lyra/ui/utils/filterNulls'
 import formatPercentage from '@lyra/ui/utils/formatPercentage'
@@ -8,11 +7,9 @@ import formatUSD from '@lyra/ui/utils/formatUSD'
 import { Quote, QuoteDisabledReason } from '@lyrafinance/lyra-js'
 import React, { useMemo, useState } from 'react'
 
-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'
-import getDefaultQuoteSize from '@/app/utils/getDefaultQuoteSize'
 import logEvent, { LogData } from '@/app/utils/logEvent'
 
 import OptionStatsGrid from '../../common/OptionStatsGrid'
@@ -42,31 +39,34 @@ const getLogData = (quote: Quote): LogData => ({
 })
 
 const TradeBoardTableDesktop = ({
+  board,
+  quotes,
   isBuy,
   selectedOption,
   onSelectOption,
-  quotes,
-}: TradeBoardTableOrListProps): TableElement<OptionData> => {
+}: TradeBoardTableOrListProps) => {
   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 spotPrice = fromBigNumber(board.market().spotPrice)
   const rows: OptionData[] = useMemo(() => {
     const rows = filterNulls(
       quotes.map(({ bid, ask, option }) => {
-        const quote = isBuy ? bid : ask
+        const quote = isBuy ? ask : bid
+        if (!quote) {
+          return null
+        }
         const isExpanded = !!expandedStrikes[quote.strike().id.toString()]
-        const id = quote.strike().id.toString()
+        const strike = option.strike()
+        const strikeId = strike.id
         return {
-          id,
+          id: strikeId.toString(),
           quote,
-          strikeId: quote.strike().id,
+          strikeId,
           marketAddressOrName: quote.market().address,
-          strike: fromBigNumber(quote.strike().strikePrice),
+          strike: fromBigNumber(strike.strikePrice),
           iv: fromBigNumber(quote.iv),
           price: fromBigNumber(quote.pricePerOption),
           breakEven: fromBigNumber(quote.breakEven),
-          toBreakEven: fromBigNumber(quote.breakEven.sub(market?.spotPrice ?? ZERO_BN)),
+          toBreakEven: fromBigNumber(quote.toBreakEven),
           disabledReason: quote.disabledReason,
           isExpanded,
           onToggleExpand: (isExpanded: boolean) => {
@@ -79,10 +79,10 @@ const TradeBoardTableDesktop = ({
           isExpandedContentClickable: true,
           expanded: (
             <Box pb={4} px={3}>
-              <Text variant="bodyMedium" mb={4}>
+              <Text variant="bodyMedium" mb={6}>
                 Stats
               </Text>
-              <OptionStatsGrid option={option} isBuy={isBuy} />
+              <OptionStatsGrid option={option} bid={bid} ask={ask} />
             </Box>
           ),
         }
@@ -90,7 +90,7 @@ const TradeBoardTableDesktop = ({
     )
 
     return rows
-  }, [quotes, isBuy, expandedStrikes, market?.spotPrice])
+  }, [quotes, isBuy, expandedStrikes])
 
   const columns = useMemo<TableColumn<OptionData>[]>(
     () => [
@@ -132,7 +132,7 @@ const TradeBoardTableDesktop = ({
       },
       {
         accessor: 'price',
-        Header: !market || size.eq(ONE_BN) ? 'Price' : `Price (${fromBigNumber(size)} ${market.name})`,
+        Header: 'Price',
         disableSortBy: true,
         Cell: (props: TableCellProps<OptionData>) => {
           const { quote, strikeId } = props.row.original
@@ -147,7 +147,7 @@ const TradeBoardTableDesktop = ({
         },
       },
     ],
-    [market, size, selectedOption, onSelectOption]
+    [selectedOption, onSelectOption]
   )
 
   const spotPriceMarker = useMemo(() => {
@@ -158,11 +158,11 @@ const TradeBoardTableDesktop = ({
     return { rowIdx: spotPriceRowIdx, content: formatUSD(spotPrice) }
   }, [spotPrice, rows])
 
-  return (
-    <CardSection noPadding>
-      <Table data={rows} columns={columns} tableRowMarker={spotPriceMarker} />
-    </CardSection>
-  )
+  if (rows.length === 0) {
+    return null
+  }
+
+  return <Table data={rows} columns={columns} tableRowMarker={spotPriceMarker} />
 }
 
 export default TradeBoardTableDesktop
diff --git a/app/components/trade/TradeBoardTableOrList/index.tsx b/app/components/trade/TradeBoardTableOrList/index.tsx
index 59f9560b..091e1ca3 100644
--- a/app/components/trade/TradeBoardTableOrList/index.tsx
+++ b/app/components/trade/TradeBoardTableOrList/index.tsx
@@ -1,18 +1,16 @@
 import useIsMobile from '@lyra/ui/hooks/useIsMobile'
-import { Option, Quote } from '@lyrafinance/lyra-js'
+import { Board, Option } from '@lyrafinance/lyra-js'
 import React from 'react'
 
+import { OptionQuotesNullable } from '@/app/constants/contracts'
+
 import TradeBoardListMobile from './TradeBoardListMobile'
 import TradeBoardTableDesktop from './TradeBoardTableDesktop'
 
 export type TradeBoardTableOrListProps = {
-  quotes: {
-    option: Option
-    bid: Quote
-    ask: Quote
-  }[]
+  board: Board
+  quotes: OptionQuotesNullable[]
   isBuy: boolean
-  isCall: boolean
   selectedOption: Option | null
   onSelectOption: (option: Option) => void
 }
diff --git a/app/components/trade/TradeChain/TradeChainPriceButton.tsx b/app/components/trade/TradeChainTable/TradeChainPriceButton.tsx
similarity index 100%
rename from app/components/trade/TradeChain/TradeChainPriceButton.tsx
rename to app/components/trade/TradeChainTable/TradeChainPriceButton.tsx
diff --git a/app/components/trade/TradeChain/index.tsx b/app/components/trade/TradeChainTable/index.tsx
similarity index 81%
rename from app/components/trade/TradeChain/index.tsx
rename to app/components/trade/TradeChainTable/index.tsx
index e91e84df..38acf24f 100644
--- a/app/components/trade/TradeChain/index.tsx
+++ b/app/components/trade/TradeChainTable/index.tsx
@@ -1,4 +1,3 @@
-import Center from '@lyra/ui/components/Center'
 import Flex from '@lyra/ui/components/Flex'
 import Table, { TableCellProps, TableColumn } from '@lyra/ui/components/Table'
 import Text from '@lyra/ui/components/Text'
@@ -10,12 +9,14 @@ import { Board, Option, Strike } from '@lyrafinance/lyra-js'
 import React, { useMemo } from 'react'
 
 import { UNIT } from '@/app/constants/bn'
-import { TRADE_CHAIN_MIN_HEIGHT } from '@/app/constants/layout'
 import { getCustomColumnWidth, OptionChainTableData } from '@/app/containers/trade/TradeAdvancedBoardCard'
 import { CustomColumnOption } from '@/app/hooks/local_storage/useTraderSettings'
+import useBoardQuotesSync from '@/app/hooks/market/useBoardQuotesSync'
+import filterNulls from '@/app/utils/filterNulls'
 import fromBigNumber from '@/app/utils/fromBigNumber'
 import getDefaultQuoteSize from '@/app/utils/getDefaultQuoteSize'
 
+import TradeBoardNoticeSection from '../TradeBoardNoticeSection'
 import TradeChainPriceButton from './TradeChainPriceButton'
 
 export const getButtonWidthForMarket = (marketName: string) => {
@@ -53,6 +54,7 @@ type Props = {
   board: Board
   selectedOption: Option | null
   isBuy: boolean
+  isGlobalPaused: boolean
   customCol1: CustomColumnOption
   customCol2: CustomColumnOption
   onSelectOption: (option: Option, isBuy: boolean, isCall: boolean) => void
@@ -60,7 +62,15 @@ type Props = {
 
 type OptionData = Omit<OptionChainTableData, 'isExpanded'>
 
-const TradeChain = ({ board, selectedOption, onSelectOption, isBuy, customCol1, customCol2 }: Props) => {
+const TradeChainTable = ({
+  board,
+  selectedOption,
+  onSelectOption,
+  isBuy,
+  isGlobalPaused,
+  customCol1,
+  customCol2,
+}: Props) => {
   const size = getDefaultQuoteSize(board.market().name ?? '') // defaults to one
   const isCall = selectedOption?.isCall ?? true
   const marketName = board.market().name
@@ -204,35 +214,30 @@ const TradeChain = ({ board, selectedOption, onSelectOption, isBuy, customCol1,
 
   const columnOptions = useMemo(() => [{}, {}, { px: 0 }, { px: 0 }, { px: 0 }, { px: 0 }, { px: 0 }, {}, {}], [])
 
-  const rows: OptionData[] = useMemo(() => {
-    return board
-      .strikes()
-      .sort((a, b) => fromBigNumber(a.strikePrice.sub(b.strikePrice)))
-      .reduce((allStrikes, strike) => {
-        // Bid from AMM => trader sell-side
-        const callBid = strike.call().quoteSync(false, size)
-        const putBid = strike.put().quoteSync(false, size)
-        // Ask from AMM => trader buy-side
-        const callAsk = strike.call().quoteSync(true, size)
-        const putAsk = strike.put().quoteSync(true, size)
-        const isStrikeDisabled = callBid.isDisabled && callAsk.isDisabled && putBid.isDisabled && putAsk.isDisabled
-        return isStrikeDisabled
-          ? allStrikes
-          : [
-              ...allStrikes,
-              {
-                callBid,
-                callAsk,
-                putBid,
-                putAsk,
-                strikePrice: fromBigNumber(strike.strikePrice),
-                strike: strike,
-                expiry: board.expiryTimestamp,
-                noExpandedPadding: true,
-              },
-            ]
-      }, [] as OptionData[])
-  }, [board, size])
+  const quotes = useBoardQuotesSync(board, size)
+
+  const filteredQuotes = useMemo(() => {
+    return filterNulls(
+      quotes.filter(({ callBid, callAsk, putBid, putAsk }) => !!callBid || !!callAsk || !!putBid || !!putAsk)
+    )
+  }, [quotes])
+
+  const rows: OptionData[] = useMemo(
+    () =>
+      filterNulls(
+        filteredQuotes.map(({ callBid, callAsk, putBid, putAsk, strike }) => ({
+          callBid,
+          callAsk,
+          putBid,
+          putAsk,
+          strikePrice: fromBigNumber(strike.strikePrice),
+          strike: strike,
+          expiry: board.expiryTimestamp,
+          noExpandedPadding: true,
+        }))
+      ),
+    [board.expiryTimestamp, filteredQuotes]
+  )
 
   const spotPriceMarker = useMemo(() => {
     const spotPriceRowIdx = rows.reduce(
@@ -242,19 +247,12 @@ const TradeChain = ({ board, selectedOption, onSelectOption, isBuy, customCol1,
     return { rowIdx: spotPriceRowIdx, content: formatUSD(spotPrice) }
   }, [rows, spotPrice])
 
-  if (rows.length === 0) {
-    return (
-      <Center minHeight={TRADE_CHAIN_MIN_HEIGHT}>
-        <Text variant="secondary" color="secondaryText">
-          No strikes are available for this expiry
-        </Text>
-      </Center>
-    )
-  }
-
   return (
-    <Table hideHeader columns={columns} data={rows} columnOptions={columnOptions} tableRowMarker={spotPriceMarker} />
+    <>
+      <TradeBoardNoticeSection m={6} board={board} isGlobalPaused={isGlobalPaused} quotes={filteredQuotes} />
+      <Table hideHeader columns={columns} data={rows} columnOptions={columnOptions} tableRowMarker={spotPriceMarker} />
+    </>
   )
 }
 
-export default TradeChain
+export default TradeChainTable
diff --git a/app/constants/contracts.ts b/app/constants/contracts.ts
index cea9859b..c7eed111 100644
--- a/app/constants/contracts.ts
+++ b/app/constants/contracts.ts
@@ -1,3 +1,5 @@
+import { Option, Quote, Strike } from '@lyrafinance/lyra-js'
+
 import { ONE_BN } from './bn'
 
 export const MIN_COLLATERAL_BUFFER = 1.05 // 5% buffer
@@ -6,3 +8,18 @@ export const MAX_IV = ONE_BN.mul(5) // 500%
 export const MIN_DIST_TO_LIQUIDATION_PRICE = 0.01
 export const ERROR_DIST_TO_LIQUIDATION_PRICE = 0.015
 export const WARNING_DIST_TO_LIQUIDATION_PRICE = 0.025
+export const MAX_UTILIZATION = 0.975
+
+export type StrikeQuotesNullable = {
+  callBid: Quote | null
+  callAsk: Quote | null
+  putBid: Quote | null
+  putAsk: Quote | null
+  strike: Strike
+}
+
+export type OptionQuotesNullable = {
+  bid: Quote | null
+  ask: Quote | null
+  option: Option
+}
diff --git a/app/constants/ignore.ts b/app/constants/ignore.ts
new file mode 100644
index 00000000..3600e6bf
--- /dev/null
+++ b/app/constants/ignore.ts
@@ -0,0 +1,14 @@
+// strikes to ignore
+export type IgnoreStrike = {
+  marketName: string
+  strikeId: number
+}
+
+const IGNORE_STRIKE_LIST: IgnoreStrike[] = [
+  {
+    marketName: 'btc',
+    strikeId: 36,
+  },
+]
+
+export default IGNORE_STRIKE_LIST
diff --git a/app/constants/layout.ts b/app/constants/layout.ts
index d097710e..f967971e 100644
--- a/app/constants/layout.ts
+++ b/app/constants/layout.ts
@@ -12,7 +12,7 @@ export const VAULTS_CHART_HEIGHT = [120, 260]
 export const VAULTS_INDEX_CHART_HEIGHT = [120, 200]
 export const FAUCET_MODAL_WIDTH = 450
 
-export const TRADE_BOARD_MIN_HEIGHT = [450, 300]
+export const TRADE_BOARD_MIN_HEIGHT = [400, 300]
 export const TRADE_CHAIN_MIN_HEIGHT = 150
 
 export const ONBOARDING_MODAL_WIDTH = 600
diff --git a/app/constants/links.ts b/app/constants/links.ts
index 13666e5a..78ede725 100644
--- a/app/constants/links.ts
+++ b/app/constants/links.ts
@@ -42,8 +42,9 @@ export const VAULTS_ABOUT_DOC_URL = 'https://docs.lyra.finance/overview/how-does
 export const SYNTH_COLLATERAL_DOC_URL = 'https://docs.lyra.finance/overview/how-does-lyra-work/synthetix'
 export const DYNAMIC_FEES_DOC_URL =
   'https://docs.lyra.finance/overview/how-does-lyra-work/options-pricing-and-the-amm#dynamic-fees'
-export const SHORT_COLLATERAL_REWARDS_DOCS_URL =
+export const SHORT_COLLATERAL_REWARDS_DOC_URL =
   'https://docs.lyra.finance/governance/incentives#short-collateral-rewards'
+export const TRADING_CUTOFF_DOC_URL = 'https://docs.lyra.finance/overview/how-does-lyra-work/trading#trading-cutoffs'
 
 export const SWAP_SYNTH_1INCH_URL = 'https://app.1inch.io/#/10/unified/swap/ETH/'
 
diff --git a/app/containers/common/ShortYieldValue/index.tsx b/app/containers/common/ShortYieldValue/index.tsx
index b3531aeb..f058e904 100644
--- a/app/containers/common/ShortYieldValue/index.tsx
+++ b/app/containers/common/ShortYieldValue/index.tsx
@@ -6,7 +6,7 @@ import formatBalance from '@lyra/ui/utils/formatBalance'
 import { Option, Position, Trade } from '@lyrafinance/lyra-js'
 import React from 'react'
 
-import { SHORT_COLLATERAL_REWARDS_DOCS_URL } from '@/app/constants/links'
+import { SHORT_COLLATERAL_REWARDS_DOC_URL } from '@/app/constants/links'
 import withSuspense from '@/app/hooks/data/withSuspense'
 import useLatestGlobalRewardEpoch from '@/app/hooks/rewards/useLatestGlobalRewardEpoch'
 import fromBigNumber from '@/app/utils/fromBigNumber'
@@ -62,7 +62,7 @@ const ShortYieldValue = withSuspense(
           ) : null
         }
         isDisabled={!isEnabled}
-        href={SHORT_COLLATERAL_REWARDS_DOCS_URL}
+        href={SHORT_COLLATERAL_REWARDS_DOC_URL}
         target="_blank"
         placement="top-end"
       >
diff --git a/app/containers/trade/TradeAdvancedBoardCard/index.tsx b/app/containers/trade/TradeAdvancedBoardCard/index.tsx
index a540cfa1..09635b22 100644
--- a/app/containers/trade/TradeAdvancedBoardCard/index.tsx
+++ b/app/containers/trade/TradeAdvancedBoardCard/index.tsx
@@ -2,6 +2,7 @@ import DropdownButton from '@lyra/ui/components/Button/DropdownButton'
 import DropdownButtonListItem from '@lyra/ui/components/Button/DropdownButtonListItem'
 import Card from '@lyra/ui/components/Card'
 import CardBody from '@lyra/ui/components/Card/CardBody'
+import CardSection from '@lyra/ui/components/Card/CardSection'
 import Center from '@lyra/ui/components/Center'
 import Flex from '@lyra/ui/components/Flex'
 import Icon, { IconType } from '@lyra/ui/components/Icon'
@@ -12,9 +13,10 @@ import formatDate from '@lyra/ui/utils/formatDate'
 import { Market, Option, Quote, Strike } from '@lyrafinance/lyra-js'
 import React, { useMemo, useState } from 'react'
 
-import TradeChain, { getButtonWidthForMarket } from '@/app/components/trade/TradeChain'
+import TradeChainTable, { getButtonWidthForMarket } from '@/app/components/trade/TradeChainTable'
 import { TRADE_BOARD_MIN_HEIGHT } from '@/app/constants/layout'
 import { LogEvent } from '@/app/constants/logEvents'
+import useIsGlobalPaused from '@/app/hooks/admin/useIsGlobalPaused'
 import withSuspense from '@/app/hooks/data/withSuspense'
 import useTraderSettings, { CustomColumnOption } from '@/app/hooks/local_storage/useTraderSettings'
 import useLiveBoards from '@/app/hooks/market/useLiveBoards'
@@ -74,6 +76,7 @@ const TradeAdvancedBoardCard = withSuspense(
       const now = boards[0].block.timestamp
       return boards.find(board => board.tradingCutoffTimestamp > now)?.id ?? boards[0].id
     }, [boards])
+    const isGlobalPaused = useIsGlobalPaused()
     const [isCustomCol1LeftOpen, setIsCustomCol1LeftOpen] = useState(false)
     const [isCustomCol1RightOpen, setIsCustomCol1RightOpen] = useState(false)
     const [isCustomCol2LeftOpen, setIsCustomCol2LeftOpen] = useState(false)
@@ -317,7 +320,8 @@ const TradeAdvancedBoardCard = withSuspense(
             noExpandedPadding: true,
             isExpandedContentClickable: false,
             expanded: (
-              <TradeChain
+              <TradeChainTable
+                isGlobalPaused={!!isGlobalPaused}
                 customCol1={customCol1}
                 customCol2={customCol2}
                 board={board}
@@ -334,14 +338,24 @@ const TradeAdvancedBoardCard = withSuspense(
             strike: null,
           }
         }),
-      [boards, expandedExpiries, selectedOption, onSelectOption, isBuy, defaultExpandedBoardId, customCol1, customCol2]
+      [
+        boards,
+        expandedExpiries,
+        defaultExpandedBoardId,
+        isGlobalPaused,
+        customCol1,
+        customCol2,
+        selectedOption,
+        onSelectOption,
+        isBuy,
+      ]
     )
 
     return (
       <Card>
-        <CardBody noPadding>
+        <CardSection noPadding>
           <Table columns={columns} data={rows} columnOptions={columnOptions} />
-        </CardBody>
+        </CardSection>
       </Card>
     )
   },
diff --git a/app/containers/trade/TradeSimpleBoardCard/TradeSimpleBoardTable.tsx b/app/containers/trade/TradeSimpleBoardCard/TradeSimpleBoardTable.tsx
index d7ce0f92..ba5093ea 100644
--- a/app/containers/trade/TradeSimpleBoardCard/TradeSimpleBoardTable.tsx
+++ b/app/containers/trade/TradeSimpleBoardCard/TradeSimpleBoardTable.tsx
@@ -1,13 +1,14 @@
 import Center from '@lyra/ui/components/Center'
 import Spinner from '@lyra/ui/components/Spinner'
-import Text from '@lyra/ui/components/Text'
+import useIsMobile from '@lyra/ui/hooks/useIsMobile'
 import { Board, Option } from '@lyrafinance/lyra-js'
 import React, { useMemo } from 'react'
 
+import TradeBoardNoticeSection from '@/app/components/trade/TradeBoardNoticeSection'
 import TradeBoardTableOrList from '@/app/components/trade/TradeBoardTableOrList'
 import useIsGlobalPaused from '@/app/hooks/admin/useIsGlobalPaused'
 import withSuspense from '@/app/hooks/data/withSuspense'
-import useQuoteBoard from '@/app/hooks/market/useQuoteBoard'
+import useBoardQuotesSync from '@/app/hooks/market/useBoardQuotesSync'
 import getDefaultQuoteSize from '@/app/utils/getDefaultQuoteSize'
 
 type Props = {
@@ -23,48 +24,43 @@ const TRADE_BOARD_MIN_HEIGHT = 300
 const TradeSimpleBoardTable = withSuspense(
   ({ board, isCall, isBuy, selectedOption, onSelectOption }: Props) => {
     const size = getDefaultQuoteSize(board.market().name)
-    const quotes = useQuoteBoard(board, size, isCall)
     const isGlobalPaused = !!useIsGlobalPaused()
-
-    const market = quotes.length ? quotes[0].option.market() : null
-    const filteredQuotes = useMemo(
+    const boardQuotes = useBoardQuotesSync(board, size)
+    const optionQuotes = useMemo(
       () =>
-        quotes
-          .filter(quote => !quote.ask.isDisabled || !quote.bid.isDisabled)
-          .filter(quote => {
-            const quotedStrike = isBuy ? quote.bid : quote.ask
-            if (market?.name.toLowerCase() === 'btc' && quotedStrike.strikeId === 36) {
-              return false
-            } else {
-              return true
+        boardQuotes
+          .map(({ strike, callBid, callAsk, putBid, putAsk }) => {
+            const bid = isCall ? callBid : putBid
+            const ask = isCall ? callAsk : putAsk
+            const option = strike.option(isCall)
+            return {
+              bid,
+              ask,
+              option,
             }
-          }),
-      [quotes, isBuy, market]
+          })
+          .filter(({ bid, ask }) => !!bid || !!ask),
+      [boardQuotes, isCall]
     )
-    if (isGlobalPaused) {
-      return (
-        <Center minHeight={TRADE_BOARD_MIN_HEIGHT}>
-          <Text color="secondaryText">Trading is paused</Text>
-        </Center>
-      )
-    }
-    if (filteredQuotes.length === 0) {
-      return (
-        <Center minHeight={TRADE_BOARD_MIN_HEIGHT}>
-          <Text variant="secondary" color="secondaryText">
-            No strikes are available for this expiry
-          </Text>
-        </Center>
-      )
-    }
+    const isMobile = useIsMobile()
     return (
-      <TradeBoardTableOrList
-        quotes={filteredQuotes}
-        isCall={isCall}
-        isBuy={isBuy}
-        selectedOption={selectedOption}
-        onSelectOption={onSelectOption}
-      />
+      <>
+        <TradeBoardNoticeSection
+          mt={isMobile ? 6 : 0}
+          mx={6}
+          mb={6}
+          board={board}
+          isGlobalPaused={isGlobalPaused}
+          quotes={optionQuotes}
+        />
+        <TradeBoardTableOrList
+          board={board}
+          quotes={optionQuotes}
+          isBuy={isBuy}
+          selectedOption={selectedOption}
+          onSelectOption={onSelectOption}
+        />
+      </>
     )
   },
   () => {
diff --git a/app/containers/trade/TradeSimpleBoardCard/index.tsx b/app/containers/trade/TradeSimpleBoardCard/index.tsx
index b1db8a1a..6a9a2c20 100644
--- a/app/containers/trade/TradeSimpleBoardCard/index.tsx
+++ b/app/containers/trade/TradeSimpleBoardCard/index.tsx
@@ -43,7 +43,6 @@ const TradeSimpleBoardCard = ({
   const isMobile = useIsMobile()
   const [isOpen, setIsOpen] = useState(false)
   const onClose = useCallback(() => setIsOpen(false), [])
-
   return (
     <Card>
       <CardSection flexDirection={isMobile ? 'column' : 'row'}>
diff --git a/app/hooks/market/useBoardQuotesSync.ts b/app/hooks/market/useBoardQuotesSync.ts
new file mode 100644
index 00000000..641ad094
--- /dev/null
+++ b/app/hooks/market/useBoardQuotesSync.ts
@@ -0,0 +1,42 @@
+import { BigNumber } from '@ethersproject/bignumber'
+import { Board } from '@lyrafinance/lyra-js'
+import { useMemo } from 'react'
+
+import { StrikeQuotesNullable } from '@/app/constants/contracts'
+import IGNORE_STRIKE_LIST from '@/app/constants/ignore'
+import getIsQuoteHidden from '@/app/utils/getIsQuoteHidden'
+
+export default function useBoardQuotesSync(board: Board, size: BigNumber): StrikeQuotesNullable[] {
+  const market = board.market()
+  return useMemo(
+    () =>
+      board.quoteAllSync(size).strikes.map(({ callBid, callAsk, putBid, putAsk, strike }) => {
+        const quoteStrikeId = strike.id
+        const isIgnored = !!IGNORE_STRIKE_LIST.find(
+          ({ strikeId, marketName }) =>
+            quoteStrikeId === strikeId && market.name.toLowerCase() === marketName.toLowerCase()
+        )
+        if (isIgnored) {
+          return {
+            callBid: null,
+            callAsk: null,
+            putBid: null,
+            putAsk: null,
+            strike,
+          }
+        }
+        const hideCallBid = callBid.disabledReason ? getIsQuoteHidden(callBid.disabledReason) : false
+        const hideCallAsk = callAsk.disabledReason ? getIsQuoteHidden(callAsk.disabledReason) : false
+        const hidePutBid = putBid.disabledReason ? getIsQuoteHidden(putBid.disabledReason) : false
+        const hidePutAsk = putAsk.disabledReason ? getIsQuoteHidden(putAsk.disabledReason) : false
+        return {
+          callBid: !hideCallBid ? callBid : null,
+          callAsk: !hideCallAsk ? callAsk : null,
+          putBid: !hidePutBid ? putBid : null,
+          putAsk: !hidePutAsk ? putAsk : null,
+          strike,
+        }
+      }),
+    [board, market, size]
+  )
+}
diff --git a/app/hooks/market/useOptionQuotesSync.ts b/app/hooks/market/useOptionQuotesSync.ts
new file mode 100644
index 00000000..51b1cbc2
--- /dev/null
+++ b/app/hooks/market/useOptionQuotesSync.ts
@@ -0,0 +1,7 @@
+import { BigNumber } from '@ethersproject/bignumber'
+import { Option, OptionQuotes } from '@lyrafinance/lyra-js'
+import { useMemo } from 'react'
+
+export default function useOptionQuotesSync(option: Option, size: BigNumber): OptionQuotes {
+  return useMemo(() => option.quoteAllSync(size), [option, size])
+}
diff --git a/app/hooks/market/useQuoteBoard.ts b/app/hooks/market/useQuoteBoard.ts
deleted file mode 100644
index 5b8a745d..00000000
--- a/app/hooks/market/useQuoteBoard.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { BigNumber } from '@ethersproject/bignumber'
-import lyra from '@lyra/app/utils/lyra'
-import { Board, Option, Quote } from '@lyrafinance/lyra-js'
-import { useMemo } from 'react'
-
-import useOptimismBlockFetch from '../data/useOptimismBlockFetch'
-
-const fetcher = async (marketAddressOrName: string, boardId: number, size: BigNumber) =>
-  (await lyra.quoteBoard(marketAddressOrName, boardId, BigNumber.from(size))).sort((a, b) =>
-    a.option.strike().strikePrice.gt(b.option.strike().strikePrice) ? 1 : -1
-  )
-
-const EMPTY: { option: Option; bid: Quote; ask: Quote }[] = []
-
-export default function useQuoteBoard(
-  board: Board,
-  size: BigNumber,
-  isCall: boolean
-): { option: Option; bid: Quote; ask: Quote }[] {
-  const [quotes] = useOptimismBlockFetch('QuoteBoard', [board.market().name, board.id, size], fetcher)
-  return useMemo(() => (quotes ?? EMPTY).filter(q => q.option.isCall === isCall), [isCall, quotes])
-}
diff --git a/app/hooks/market/useQuoteBoards.ts b/app/hooks/market/useQuoteBoards.ts
deleted file mode 100644
index 3cdd114c..00000000
--- a/app/hooks/market/useQuoteBoards.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import lyra from '@lyra/app/utils/lyra'
-import { Board, Option, Quote } from '@lyrafinance/lyra-js'
-import { BigNumber } from 'ethers'
-
-import useOptimismBlockFetch from '../data/useOptimismBlockFetch'
-
-type BoardQuotes = {
-  board: Board
-  quotes: {
-    bid: Quote
-    ask: Quote
-    option: Option
-  }[]
-}[]
-
-const fetcher = async (marketAddressOrName: string, _size: BigNumber): Promise<BoardQuotes> => {
-  const size = BigNumber.from(_size)
-  const market = await lyra.market(marketAddressOrName)
-  const boards = market.liveBoards()
-  const boardQuotes = await Promise.all(
-    boards.map(async board => ({ quotes: await lyra.quoteBoard(marketAddressOrName, board.id, size), board }))
-  )
-  return boardQuotes
-}
-
-const EMPTY: BoardQuotes = []
-
-export default function useQuoteBoards(marketAddressOrName: string, size: BigNumber): BoardQuotes {
-  const [quotes] = useOptimismBlockFetch('QuoteBoards', [marketAddressOrName, size], fetcher)
-  return quotes ?? EMPTY
-}
diff --git a/app/hooks/market/useSelectedBoard.ts b/app/hooks/market/useSelectedBoard.ts
index 5c398f38..4cf9e048 100644
--- a/app/hooks/market/useSelectedBoard.ts
+++ b/app/hooks/market/useSelectedBoard.ts
@@ -4,13 +4,8 @@ import { useCallback, useMemo } from 'react'
 import useNumberQueryParam from '../url/useNumberQueryParam'
 
 export default function useSelectedBoard(market: Market): [Board | null, (board: Board | null) => void] {
-  const timestamp = market.block.timestamp
   const liveBoards = useMemo(() => market.liveBoards().sort((a, b) => a.expiryTimestamp - b.expiryTimestamp), [market])
-
-  const defaultBoard = useMemo(
-    () => liveBoards.find(board => board.tradingCutoffTimestamp > timestamp) ?? null,
-    [liveBoards, timestamp]
-  )
+  const defaultBoard = useMemo(() => liveBoards.find(board => !board.isTradingCutoff) ?? null, [liveBoards])
 
   const [queryBoardIdOrExpiryTimestamp, setQueryBoardIdOrExpiryTimestamp] = useNumberQueryParam('expiry')
   const queryBoard = useMemo(
diff --git a/app/page_helpers/PositionPageHelper/index.tsx b/app/page_helpers/PositionPageHelper/index.tsx
index 12cbadd6..6d91185f 100644
--- a/app/page_helpers/PositionPageHelper/index.tsx
+++ b/app/page_helpers/PositionPageHelper/index.tsx
@@ -64,7 +64,7 @@ const PositionPageHelper = ({ position, option }: Props): JSX.Element => {
             )}
           </>
         ) : null}
-        <PositionStatsCard position={position} option={option} />
+        <PositionStatsCard option={option} />
         {position && position.trades().length > 0 ? <PositionHistoryCard position={position} /> : null}
       </LayoutGrid>
     </Layout>
diff --git a/app/utils/getIsQuoteHidden.ts b/app/utils/getIsQuoteHidden.ts
new file mode 100644
index 00000000..959f87a3
--- /dev/null
+++ b/app/utils/getIsQuoteHidden.ts
@@ -0,0 +1,12 @@
+import { QuoteDisabledReason } from '@lyrafinance/lyra-js'
+
+const getIsQuoteHidden = (disabledReason: QuoteDisabledReason): boolean => {
+  switch (disabledReason) {
+    case QuoteDisabledReason.InsufficientLiquidity:
+      return false
+    default:
+      return true
+  }
+}
+
+export default getIsQuoteHidden
diff --git a/sdk/src/board/index.ts b/sdk/src/board/index.ts
index 720a07f4..4f415481 100644
--- a/sdk/src/board/index.ts
+++ b/sdk/src/board/index.ts
@@ -9,10 +9,15 @@ import Lyra from '../lyra'
 import { Market } from '../market'
 import { Option } from '../option'
 import { Quote, QuoteOptions } from '../quote'
-import { Strike } from '../strike'
+import { Strike, StrikeQuotes } from '../strike'
 import buildTx from '../utils/buildTx'
 import getLyraMarketContract from '../utils/getLyraMarketContract'
 
+export type BoardQuotes = {
+  strikes: StrikeQuotes[]
+  board: Board
+}
+
 export class Board {
   private lyra: Lyra
   private __market: Market
@@ -24,7 +29,9 @@ export class Board {
   expiryTimestamp: number
   tradingCutoffTimestamp: number
   isExpired: boolean
+  isTradingCutoff: boolean
   timeToExpiry: number
+  timeToTradingCutoff: number
   spotPriceAtExpiry?: BigNumber
   baseIv: BigNumber
   isPaused: boolean
@@ -36,7 +43,7 @@ export class Board {
     this.__boardData = boardView
     this.block = block
 
-    const fields = Board.getFields(boardView, block)
+    const fields = Board.getFields(market, boardView, block)
     this.id = fields.id
     this.expiryTimestamp = fields.expiryTimestamp
     this.timeToExpiry = fields.timeToExpiry
@@ -44,8 +51,9 @@ export class Board {
     this.baseIv = fields.baseIv
     this.spotPriceAtExpiry = fields.spotPriceAtExpiry
     this.isPaused = fields.isPaused
-    this.tradingCutoffTimestamp =
-      this.expiryTimestamp - market.__marketData.marketParameters.tradeLimitParams.tradingCutoff.toNumber()
+    this.tradingCutoffTimestamp = fields.tradingCutoffTimestamp
+    this.timeToTradingCutoff = fields.timeToTradingCutoff
+    this.isTradingCutoff = fields.isTradingCutoff
     this.liveStrikeMap = boardView.strikes.reduce(
       (map, strikeView) => ({
         ...map,
@@ -56,20 +64,27 @@ export class Board {
   }
 
   // TODO: @dappbeast Remove getFields
-  private static getFields(boardView: OptionMarketViewer.BoardViewStructOutput, block: Block) {
+  private static getFields(market: Market, boardView: OptionMarketViewer.BoardViewStructOutput, block: Block) {
     const id = boardView.boardId.toNumber()
     const expiryTimestamp = boardView.expiry.toNumber()
     const timeToExpiry = Math.max(0, expiryTimestamp - block.timestamp)
+    const tradingCutoffTimestamp =
+      expiryTimestamp - market.__marketData.marketParameters.tradeLimitParams.tradingCutoff.toNumber()
+    const timeToTradingCutoff = Math.max(0, tradingCutoffTimestamp - block.timestamp)
     const spotPriceAtExpiry = !boardView.priceAtExpiry.isZero() ? boardView.priceAtExpiry : undefined
     // Expired flag is determined by priceAtExpiry state being set
-    const isExpired = !!spotPriceAtExpiry
+    const isExpired = !!spotPriceAtExpiry && timeToExpiry === 0
+    const isTradingCutoff = timeToTradingCutoff === 0
     const baseIv = !isExpired ? boardView.baseIv : ZERO_BN
     const isPaused = boardView.isPaused
     return {
       id,
       expiryTimestamp,
+      tradingCutoffTimestamp,
       timeToExpiry,
+      timeToTradingCutoff,
       isExpired,
+      isTradingCutoff,
       spotPriceAtExpiry,
       baseIv,
       isPaused,
@@ -83,6 +98,10 @@ export class Board {
     return await market.board(boardId)
   }
 
+  async refresh(): Promise<Board> {
+    return await Board.get(this.lyra, this.market().address, this.id)
+  }
+
   // Edges
 
   market(): Market {
@@ -108,8 +127,6 @@ export class Board {
     return strike.option(isCall)
   }
 
-  // Quote
-
   async quote(
     strikeId: number,
     isCall: boolean,
@@ -117,7 +134,24 @@ export class Board {
     size: BigNumber,
     options?: QuoteOptions
   ): Promise<Quote> {
-    return await this.market().quote(strikeId, isCall, isBuy, size, options)
+    const board = await this.refresh()
+    return board.quoteSync(strikeId, isCall, isBuy, size, options)
+  }
+
+  quoteSync(strikeId: number, isCall: boolean, isBuy: boolean, size: BigNumber, options?: QuoteOptions): Quote {
+    return this.option(strikeId, isCall).quoteSync(isBuy, size, options)
+  }
+
+  async quoteAll(size: BigNumber, options?: QuoteOptions): Promise<BoardQuotes> {
+    const board = await this.refresh()
+    return board.quoteAllSync(size, options)
+  }
+
+  quoteAllSync(size: BigNumber, options?: QuoteOptions): BoardQuotes {
+    return {
+      strikes: this.strikes().map(strike => strike.quoteAllSync(size, options)),
+      board: this,
+    }
   }
 
   // Admin
diff --git a/sdk/src/lyra.ts b/sdk/src/lyra.ts
index c1bb3107..83b0e6b4 100644
--- a/sdk/src/lyra.ts
+++ b/sdk/src/lyra.ts
@@ -7,7 +7,7 @@ import { WethLyraStaking } from '.'
 import { Account } from './account'
 import { AccountRewardEpoch } from './account_reward_epoch'
 import { Admin } from './admin'
-import { Board } from './board'
+import { Board, BoardQuotes } from './board'
 import { CollateralUpdateEvent } from './collateral_update_event'
 import { Deployment } from './constants/contracts'
 import { GlobalRewardEpoch } from './global_reward_epoch'
@@ -16,13 +16,12 @@ import { LiquidityWithdrawal } from './liquidity_withdrawal'
 import { LyraStake } from './lyra_stake'
 import { LyraStaking } from './lyra_staking'
 import { LyraUnstake } from './lyra_unstake'
-import { Market, MarketContractAddresses, MarketTradeOptions } from './market'
-import { Option } from './option'
+import { Market, MarketContractAddresses, MarketQuotes, MarketTradeOptions } from './market'
+import { Option, OptionQuotes } from './option'
 import { Position, PositionFilter, PositionLeaderboard, PositionLeaderboardFilter } from './position'
 import { Quote, QuoteOptions } from './quote'
-import getQuoteBoard from './quote/getQuoteBoard'
 import { SettleEvent } from './settle_event'
-import { Strike } from './strike'
+import { Strike, StrikeQuotes } from './strike'
 import { Trade } from './trade'
 import { TradeEvent, TradeEventListener, TradeEventListenerCallback, TradeEventListenerOptions } from './trade_event'
 import { TransferEvent } from './transfer_event'
@@ -81,13 +80,40 @@ export default class Lyra {
     return await market.quote(strikeId, isCall, isBuy, size, options)
   }
 
+  async quoteOption(
+    marketAddressOrName: string,
+    strikeId: number,
+    isCall: boolean,
+    size: BigNumber,
+    options?: QuoteOptions
+  ): Promise<OptionQuotes> {
+    const option = await this.option(marketAddressOrName, strikeId, isCall)
+    return option.quoteAllSync(size, options)
+  }
+
+  async quoteStrike(
+    marketAddressOrName: string,
+    strikeId: number,
+    size: BigNumber,
+    options?: QuoteOptions
+  ): Promise<StrikeQuotes> {
+    const strike = await this.strike(marketAddressOrName, strikeId)
+    return strike.quoteAllSync(size, options)
+  }
+
   async quoteBoard(
     marketAddressOrName: string,
     boardId: number,
-    size: BigNumber
-  ): Promise<{ bid: Quote; ask: Quote; option: Option }[]> {
+    size: BigNumber,
+    options?: QuoteOptions
+  ): Promise<BoardQuotes> {
     const board = await this.board(marketAddressOrName, boardId)
-    return getQuoteBoard(board, size)
+    return board.quoteAllSync(size, options)
+  }
+
+  async quoteMarket(marketAddressOrName: string, size: BigNumber, options?: QuoteOptions): Promise<MarketQuotes> {
+    const market = await this.market(marketAddressOrName)
+    return market.quoteAllSync(size, options)
   }
 
   // Trade
diff --git a/sdk/src/market/index.ts b/sdk/src/market/index.ts
index 72790566..e16f59b9 100644
--- a/sdk/src/market/index.ts
+++ b/sdk/src/market/index.ts
@@ -3,7 +3,7 @@ import { PopulatedTransaction } from '@ethersproject/contracts'
 import { Block } from '@ethersproject/providers'
 import { parseBytes32String } from '@ethersproject/strings'
 
-import { Board } from '../board'
+import { Board, BoardQuotes } from '../board'
 import { UNIT, ZERO_BN } from '../constants/bn'
 import { DataSource, LyraMarketContractId } from '../constants/contracts'
 import { SnapshotOptions } from '../constants/snapshots'
@@ -209,6 +209,11 @@ export type AddStrikeReturn = {
   strike: StrikeParams
 }
 
+export type MarketQuotes = {
+  boards: BoardQuotes[]
+  market: Market
+}
+
 export type MarketTradeOptions = Omit<TradeOptions, 'minOrMaxPremium' | 'premiumSlippage'>
 
 export type GlobalCache = {
@@ -389,6 +394,10 @@ export class Market {
     )
   }
 
+  async refresh(): Promise<Market> {
+    return await Market.get(this.lyra, this.address)
+  }
+
   // Edges
 
   // TODO: @dappbeast Make async
@@ -460,10 +469,24 @@ export class Market {
     size: BigNumber,
     options?: QuoteOptions
   ): Promise<Quote> {
-    // TODO: @dappbeast Make async
-    const strike = this.liveStrike(strikeId)
-    const option = strike.option(isCall)
-    return Quote.get(option, isBuy, size, options)
+    const market = await this.refresh()
+    return market.quoteSync(strikeId, isCall, isBuy, size, options)
+  }
+
+  quoteSync(strikeId: number, isCall: boolean, isBuy: boolean, size: BigNumber, options?: QuoteOptions): Quote {
+    return this.liveOption(strikeId, isCall).quoteSync(isBuy, size, options)
+  }
+
+  async quoteAll(size: BigNumber, options?: QuoteOptions): Promise<MarketQuotes> {
+    const market = await this.refresh()
+    return market.quoteAllSync(size, options)
+  }
+
+  quoteAllSync(size: BigNumber, options?: QuoteOptions): MarketQuotes {
+    return {
+      boards: this.liveBoards().map(board => board.quoteAllSync(size, options)),
+      market: this,
+    }
   }
 
   async trade(
diff --git a/sdk/src/option/index.ts b/sdk/src/option/index.ts
index ce1a916c..be661bb7 100644
--- a/sdk/src/option/index.ts
+++ b/sdk/src/option/index.ts
@@ -29,6 +29,12 @@ export type OptionTradingVolume = {
   timestamp: number
 }
 
+export type OptionQuotes = {
+  option: Option
+  bid: Quote
+  ask: Quote
+}
+
 export class Option {
   private lyra: Lyra
   private __strike: Strike
@@ -137,6 +143,10 @@ export class Option {
     return await market.option(strikeId, isCall)
   }
 
+  async refresh(): Promise<Option> {
+    return Option.get(this.lyra, this.market().address, this.strike().id, this.isCall)
+  }
+
   // Edges
 
   market(): Market {
@@ -151,12 +161,26 @@ export class Option {
     return this.__strike
   }
 
+  async quote(isBuy: boolean, size: BigNumber, options?: QuoteOptions): Promise<Quote> {
+    const option = await this.refresh()
+    return option.quoteSync(isBuy, size, options)
+  }
+
   quoteSync(isBuy: boolean, size: BigNumber, options?: QuoteOptions): Quote {
-    return Quote.get(this, isBuy, size, options)
+    return Quote.getSync(this.lyra, this, isBuy, size, options)
   }
 
-  async quote(isBuy: boolean, size: BigNumber, options?: QuoteOptions): Promise<Quote> {
-    return await this.strike().quote(this.isCall, isBuy, size, options)
+  async quoteAll(size: BigNumber, options?: QuoteOptions): Promise<OptionQuotes> {
+    const option = await this.refresh()
+    return option.quoteAllSync(size, options)
+  }
+
+  quoteAllSync(size: BigNumber, options?: QuoteOptions): OptionQuotes {
+    return {
+      option: this,
+      bid: this.quoteSync(false, size, options),
+      ask: this.quoteSync(true, size, options),
+    }
   }
 
   async tradingVolumeHistory(options?: SnapshotOptions): Promise<OptionTradingVolume[]> {
diff --git a/sdk/src/quote/getQuoteBoard.ts b/sdk/src/quote/getQuoteBoard.ts
deleted file mode 100644
index 31b79ac5..00000000
--- a/sdk/src/quote/getQuoteBoard.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { BigNumber } from '@ethersproject/bignumber'
-
-import { Board } from '../board'
-import { Option } from '../option'
-import { Quote } from '.'
-
-export default function getQuoteBoard(board: Board, size: BigNumber): { bid: Quote; ask: Quote; option: Option }[] {
-  const quotes = board.strikes().map(strike => {
-    const longCallQuote = Quote.get(strike.option(true), true, size)
-    const shortCallQuote = Quote.get(strike.option(true), false, size)
-    const longPutQuote = Quote.get(strike.option(false), true, size)
-    const shortPutQuote = Quote.get(strike.option(false), false, size)
-    return [
-      { bid: longCallQuote, ask: shortCallQuote, option: strike.option(true) },
-      { bid: longPutQuote, ask: shortPutQuote, option: strike.option(false) },
-    ]
-  })
-  return quotes.flat()
-}
diff --git a/sdk/src/quote/index.ts b/sdk/src/quote/index.ts
index 28fe6263..39681203 100644
--- a/sdk/src/quote/index.ts
+++ b/sdk/src/quote/index.ts
@@ -3,6 +3,7 @@ import { BigNumber } from '@ethersproject/bignumber'
 import { Board } from '../board'
 import { UNIT, ZERO_BN } from '../constants/bn'
 import { DataSource, DEFAULT_ITERATIONS } from '../constants/contracts'
+import Lyra from '../lyra'
 import { Market } from '../market'
 import { Option } from '../option'
 import { Strike } from '../strike'
@@ -83,6 +84,7 @@ export type QuoteOptions = {
 }
 
 export class Quote {
+  private lyra: Lyra
   private __option: Option
   __source = DataSource.ContractCall
   marketName: string
@@ -104,12 +106,14 @@ export class Quote {
   forceClosePenalty: BigNumber
   isForceClose: boolean
   breakEven: BigNumber
+  toBreakEven: BigNumber
   isDisabled: boolean
   disabledReason: QuoteDisabledReason | null
 
   iterations: QuoteIteration[]
 
-  constructor(option: Option, isBuy: boolean, size: BigNumber, options?: QuoteOptions) {
+  constructor(lyra: Lyra, option: Option, isBuy: boolean, size: BigNumber, options?: QuoteOptions) {
+    this.lyra = lyra
     this.__option = option
     this.isBuy = isBuy
     this.size = size
@@ -134,6 +138,7 @@ export class Quote {
     this.isDisabled = !!fields.disabledReason
     this.disabledReason = fields.disabledReason
     this.breakEven = fields.breakEven
+    this.toBreakEven = fields.toBreakEven
     this.iterations = fields.iterations
   }
 
@@ -165,6 +170,7 @@ export class Quote {
       isDisabled: !!disabledReason,
       disabledReason,
       breakEven: ZERO_BN,
+      toBreakEven: ZERO_BN,
       iterations: [],
     }
   }
@@ -187,6 +193,7 @@ export class Quote {
     isDisabled: boolean
     disabledReason: QuoteDisabledReason | null
     breakEven: BigNumber
+    toBreakEven: BigNumber
     iterations: QuoteIteration[]
   } {
     const numIterations = options?.iterations ?? DEFAULT_ITERATIONS
@@ -326,6 +333,15 @@ export class Quote {
     // Pricing
     const pricePerOption = premium.mul(UNIT).div(size)
     const breakEven = getBreakEvenPrice(option.isCall, strike.strikePrice, premium.mul(UNIT).div(size))
+    const breakEvenDiff = breakEven.sub(spotPrice)
+    const toBreakEven = this.isCall
+      ? spotPrice.gt(breakEven)
+        ? ZERO_BN
+        : breakEvenDiff
+      : spotPrice.lt(breakEven)
+      ? ZERO_BN
+      : breakEvenDiff
+
     const forceClosePenalty = iterations.reduce((sum, quote) => sum.add(quote.forceClosePenalty), ZERO_BN)
 
     // Fees
@@ -362,14 +378,28 @@ export class Quote {
       isDisabled: !!disabledReason,
       disabledReason,
       breakEven,
+      toBreakEven,
       iterations,
     }
   }
 
   // Getters
 
-  static get(option: Option, isBuy: boolean, size: BigNumber, options?: QuoteOptions): Quote {
-    return new Quote(option, isBuy, size, options)
+  static async get(
+    lyra: Lyra,
+    marketAddressOrName: string,
+    strikeId: number,
+    isCall: boolean,
+    isBuy: boolean,
+    size: BigNumber,
+    options?: QuoteOptions
+  ): Promise<Quote> {
+    const option = await lyra.option(marketAddressOrName, strikeId, isCall)
+    return Quote.getSync(lyra, option, isBuy, size, options)
+  }
+
+  static getSync(lyra: Lyra, option: Option, isBuy: boolean, size: BigNumber, options?: QuoteOptions): Quote {
+    return new Quote(lyra, option, isBuy, size, options)
   }
 
   // Edges
diff --git a/sdk/src/strike/index.ts b/sdk/src/strike/index.ts
index 062ba27e..aa15fbaf 100644
--- a/sdk/src/strike/index.ts
+++ b/sdk/src/strike/index.ts
@@ -25,6 +25,14 @@ export type StrikeIVHistory = {
   timestamp: number
 }
 
+export type StrikeQuotes = {
+  callBid: Quote
+  callAsk: Quote
+  putBid: Quote
+  putAsk: Quote
+  strike: Strike
+}
+
 export class Strike {
   private lyra: Lyra
   private __board: Board
@@ -116,6 +124,10 @@ export class Strike {
     return await market.strike(strikeId)
   }
 
+  async refresh(): Promise<Strike> {
+    return Strike.get(this.lyra, this.market().address, this.id)
+  }
+
   // Dynamic Fields
 
   async ivHistory(lyra: Lyra, options?: SnapshotOptions): Promise<StrikeIVHistory[]> {
@@ -144,9 +156,29 @@ export class Strike {
     return isCall ? this.call() : this.put()
   }
 
-  // Quote
-
   async quote(isCall: boolean, isBuy: boolean, size: BigNumber, options?: QuoteOptions): Promise<Quote> {
-    return await this.market().quote(this.id, isCall, isBuy, size, options)
+    const strike = await this.refresh()
+    return strike.quoteSync(isCall, isBuy, size, options)
+  }
+
+  quoteSync(isCall: boolean, isBuy: boolean, size: BigNumber, options?: QuoteOptions): Quote {
+    return this.option(isCall).quoteSync(isBuy, size, options)
+  }
+
+  async quoteAll(size: BigNumber, options?: QuoteOptions): Promise<StrikeQuotes> {
+    const strike = await this.refresh()
+    return strike.quoteAllSync(size, options)
+  }
+
+  quoteAllSync(size: BigNumber, options?: QuoteOptions): StrikeQuotes {
+    const { bid: callBid, ask: callAsk } = this.option(true).quoteAllSync(size, options)
+    const { bid: putBid, ask: putAsk } = this.option(false).quoteAllSync(size, options)
+    return {
+      strike: this,
+      callBid,
+      callAsk,
+      putBid,
+      putAsk,
+    }
   }
 }
diff --git a/sdk/src/trade/index.ts b/sdk/src/trade/index.ts
index 9b891014..b4ca7671 100644
--- a/sdk/src/trade/index.ts
+++ b/sdk/src/trade/index.ts
@@ -197,7 +197,7 @@ export class Trade {
     const isBaseCollateral = position ? position.collateral?.isBase : _isBaseCollateral
     this.size = size
 
-    let quote = Quote.get(option, this.isBuy, this.size, {
+    let quote = Quote.getSync(lyra, option, this.isBuy, this.size, {
       iterations,
     })
 
@@ -207,7 +207,7 @@ export class Trade {
         quote.disabledReason === QuoteDisabledReason.TradingCutoff)
     ) {
       // Retry quote with force close flag
-      quote = Quote.get(option, this.isBuy, this.size, {
+      quote = Quote.getSync(lyra, option, this.isBuy, this.size, {
         iterations,
         isForceClose: true,
       })
diff --git a/ui/components/Alert/index.tsx b/ui/components/Alert/index.tsx
index f7e49588..87e9b147 100644
--- a/ui/components/Alert/index.tsx
+++ b/ui/components/Alert/index.tsx
@@ -5,7 +5,8 @@ import Box from '../Box'
 import Flex from '../Flex'
 import { IconType } from '../Icon'
 import IconOrImage from '../Icon/IconOrImage'
-import Text from '../Text'
+import Link from '../Link'
+import Text, { TextColor } from '../Text'
 
 export type AlertVariant = 'default' | 'info' | 'primary' | 'error' | 'warning'
 
@@ -14,6 +15,8 @@ type Props = {
   icon?: IconType | React.ReactNode
   title?: string | React.ReactNode
   description?: string | React.ReactNode
+  linkHref?: string
+  linkText?: string
 } & MarginProps &
   LayoutProps
 
@@ -31,7 +34,29 @@ const getVariant = (variant: AlertVariant): string => {
   }
 }
 
-export default function Alert({ variant = 'default', title, description, icon, ...styleProps }: Props) {
+const getLinkTextColor = (variant: AlertVariant): TextColor => {
+  switch (variant) {
+    case 'error':
+      return 'errorText'
+    case 'default':
+    case 'info':
+      return 'secondaryText'
+    case 'primary':
+      return 'primaryText'
+    case 'warning':
+      return 'warningText'
+  }
+}
+
+export default function Alert({
+  variant = 'default',
+  title,
+  description,
+  icon,
+  linkHref,
+  linkText = 'Learn more',
+  ...styleProps
+}: Props) {
   return (
     <Box {...styleProps} variant={getVariant(variant)}>
       <Flex alignItems="center">
@@ -41,10 +66,23 @@ export default function Alert({ variant = 'default', title, description, icon, .
         </Text>
       </Flex>
       {description ? (
-        <Text mt={title ? 1 : 0} color="inherit" variant="small">
+        <Text mt={title ? '5px' : 0} color="inherit" variant="small">
           {description}
         </Text>
       ) : null}
+      {linkHref ? (
+        <Link
+          mt={1}
+          href={linkHref}
+          target="_blank"
+          variant="secondary"
+          textVariant="small"
+          color={getLinkTextColor(variant)}
+          showRightIcon
+        >
+          {linkText}
+        </Link>
+      ) : null}
     </Box>
   )
 }
diff --git a/ui/theme/index.ts b/ui/theme/index.ts
index 0a495727..a0ca008d 100644
--- a/ui/theme/index.ts
+++ b/ui/theme/index.ts
@@ -150,7 +150,7 @@ const darkColors = {
   toggleButtonActive: '#151F2699', // #151F26 60%
 
   // tokens + alerts
-  defaultTokenBg: '#3A445099',
+  defaultTokenBg: '#3A445066',
   primaryTokenBg: '#57B29C26',
   warningTokenBg: '#F7931A26',
   errorTokenBg: '#FC4D9526',
@@ -502,7 +502,7 @@ const theme = {
     },
     alertInfo: {
       variant: 'variants.alert',
-      bg: 'cardBg',
+      bg: 'defaultTokenBg',
       color: 'secondaryText',
     },
     alertError: {