feat: strike links

app/src/hooks/market/useQueryBoardIdSync.ts

@@ -0,0 +1,48 @@
+import { Market } from '@lyrafinance/lyra-js'
+import { useCallback, useEffect, useMemo } from 'react'
+
+import useNumberQueryParam from '../url/useNumberQueryParam'
+
+export default function useQueryBoardIdSync(market: Market): [number | null, (board: number | null) => void] {
+  const [queryBoardIdOrExpiryTimestamp, setQueryBoardIdOrExpiryTimestamp] = useNumberQueryParam('expiry')
+
+  const board = useMemo(
+    () =>
+      market
+        .liveBoards()
+        .find(b => b.id === queryBoardIdOrExpiryTimestamp || b.expiryTimestamp === queryBoardIdOrExpiryTimestamp) ??
+      null,
+    [queryBoardIdOrExpiryTimestamp, market]
+  )
+
+  const defaultBoard = useMemo(() => {
+    return (
+      market
+        .liveBoards()
+        .sort((a, b) => a.expiryTimestamp - b.expiryTimestamp)
+        .find(board => !board.isTradingCutoff) ?? null
+    )
+  }, [market])
+
+  const setBoard = useCallback(
+    (boardId: number | null) => {
+      const board = boardId ? market.liveBoards().find(b => b.id === boardId) : null
+      if (board) {
+        setQueryBoardIdOrExpiryTimestamp(board.expiryTimestamp)
+      } else {
+        setQueryBoardIdOrExpiryTimestamp(null)
+      }
+    },
+    [market, setQueryBoardIdOrExpiryTimestamp]
+  )
+
+  const boardId = board?.id ?? defaultBoard?.id ?? null
+
+  // set or reset board query param when market changes
+  useEffect(() => {
+    setBoard(boardId)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [market.address])
+
+  return useMemo(() => [boardId, setBoard], [boardId, setBoard])
+}

app/src/hooks/market/useQueryStrikeIdSync.ts

@@ -0,0 +1,34 @@
+import { Board } from '@lyrafinance/lyra-js'
+import { useCallback, useEffect, useMemo } from 'react'
+
+import useNumberQueryParam from '../url/useNumberQueryParam'
+
+export default function useQueryStrikeIdSync(board: Board | null): [number | null, (strikeId: number | null) => void] {
+  const liveStrikes = useMemo(() => board?.strikes() ?? [], [board])
+
+  const [queryStrikeId, setQueryStrikeId] = useNumberQueryParam('strike')
+
+  const strike = useMemo(() => liveStrikes.find(b => b.id === queryStrikeId) ?? null, [queryStrikeId, liveStrikes])
+
+  const strikeId = strike?.id ?? null
+
+  const setStrikeId = useCallback(
+    (strikeId: number | null) => {
+      const strike = strikeId && liveStrikes.find(s => s.id === strikeId)
+      if (strike) {
+        setQueryStrikeId(strike.id)
+      } else {
+        setQueryStrikeId(null)
+      }
+    },
+    [liveStrikes, setQueryStrikeId]
+  )
+
+  // always set or reset strike query param when board changes
+  useEffect(() => {
+    setStrikeId(strikeId)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [board?.id])
+
+  return useMemo(() => [strikeId, setStrikeId], [setStrikeId, strikeId])
+}

app/src/hooks/url/useBoolQueryParam.ts

@@ -2,13 +2,18 @@ import React from 'react'
 
 import useQueryParam from './useQueryParam'
 
-export default function useBoolQueryParam(key: string): [boolean, (val: boolean) => void] {
+type BoolQueryOptions = {
+  isNullTrue?: boolean
+}
+
+export default function useBoolQueryParam(key: string, options?: BoolQueryOptions): [boolean, (val: boolean) => void] {
   const [query, setQuery] = useQueryParam(key)
   const setBool = React.useCallback(
     (val: boolean) => {
-      setQuery(val ? '1' : null)
+      setQuery(val ? '1' : '0')
     },
     [setQuery]
   )
-  return [query === '1', setBool]
+  const isNullTrue = options?.isNullTrue ?? false
+  return [(query === null && isNullTrue) || query === '1', setBool]
 }

app/src/page_helpers/TradePageHelper/index.tsx

@@ -27,7 +27,9 @@ import TradePositionsCard from '@/app/containers/trade/TradePositionsCard'
 import TradePriceCard from '@/app/containers/trade/TradePriceCard'
 import TradeSimpleBoardCard from '@/app/containers/trade/TradeSimpleBoardCard'
 import useTraderSettings from '@/app/hooks/local_storage/useTraderSettings'
-import useSelectedBoardSync from '@/app/hooks/market/useSelectedBoardSync'
+import useQueryBoardIdSync from '@/app/hooks/market/useQueryBoardIdSync'
+import useSelectedStrikeIdSync from '@/app/hooks/market/useQueryStrikeIdSync'
+import useBoolQueryParam from '@/app/hooks/url/useBoolQueryParam'
 import getMarketDisplayName from '@/app/utils/getMarketDisplayName'
 import getPagePath from '@/app/utils/getPagePath'
 import logEvent from '@/app/utils/logEvent'
@@ -43,15 +45,26 @@ type Props = {
 
 export default function TradePageHelper({ markets, selectedMarket, openPositions }: Props): JSX.Element {
   const isMobile = useIsMobile()
-  const [selectedStrikeId, setSelectedStrikeId] = useState<number | null>(null)
-  const [selectedBoard, setSelectedBoard] = useSelectedBoardSync(selectedMarket) // sync hook
-  const [isCall, setIsCall] = useState(true)
-  const [isBuy, setIsBuy] = useState(true)
+
+  const [queryBoardId, setSelectedBoardId] = useQueryBoardIdSync(selectedMarket)
+
+  const selectedBoard = useMemo(() => {
+    return selectedMarket.liveBoards().find(b => b.id === queryBoardId) ?? null
+  }, [queryBoardId, selectedMarket])
+
+  const [selectedStrikeId, setSelectedStrikeId] = useSelectedStrikeIdSync(selectedBoard)
+
+  const [isCall, setIsCall] = useBoolQueryParam('call', { isNullTrue: true })
+  const [isBuy, setIsBuy] = useBoolQueryParam('buy', { isNullTrue: true })
+
+  const selectedOption = useMemo(() => {
+    return selectedStrikeId ? selectedMarket.liveOption(selectedStrikeId, isCall) : null
+  }, [selectedMarket, isCall, selectedStrikeId])
+
   const [isTradeModalOpen, setIsTradeModalOpen] = useState(false)
   const [traderSettings, setTraderSettings] = useTraderSettings()
   const positionCardRef = useRef<HTMLElement>()
   const positionButtonRef = useRef<HTMLElement>()
-  const selectedOption = selectedStrikeId !== null ? selectedMarket.liveOption(selectedStrikeId, isCall) : null
 
   const isAdvancedMode = traderSettings.isAdvancedMode
 
@@ -110,7 +123,7 @@ export default function TradePageHelper({ markets, selectedMarket, openPositions
     (newMarket: Market) => {
       if (newMarket.address !== selectedMarket.address) {
         // Reset selected board + option when market changes
-        setSelectedBoard(null)
+        setSelectedBoardId(null)
         setSelectedStrikeId(null)
         navigate(
           getPagePath({
@@ -121,7 +134,7 @@ export default function TradePageHelper({ markets, selectedMarket, openPositions
         )
       }
     },
-    [navigate, selectedMarket, setSelectedBoard]
+    [navigate, selectedMarket.address, setSelectedBoardId, setSelectedStrikeId]
   )
 
   const handleSelectOption = useCallback(
@@ -144,7 +157,7 @@ export default function TradePageHelper({ markets, selectedMarket, openPositions
         expiryTimestamp: newOption.board().expiryTimestamp,
       })
     },
-    [selectedMarket, isCall, selectedStrikeId]
+    [selectedStrikeId, selectedMarket.name, selectedMarket.address, isCall, setSelectedStrikeId]
   )
 
   const handleSelectChainOption = useCallback(
@@ -169,12 +182,24 @@ export default function TradePageHelper({ markets, selectedMarket, openPositions
         expiryTimestamp: newOption.board().expiryTimestamp,
       })
     },
-    [selectedMarket, isCall, isBuy, selectedStrikeId]
+    [
+      selectedStrikeId,
+      isBuy,
+      isCall,
+      setIsBuy,
+      setIsCall,
+      selectedMarket.name,
+      selectedMarket.address,
+      setSelectedStrikeId,
+    ]
   )
 
-  const handleToggleBuy = useCallback((newIsBuy: boolean) => {
-    setIsBuy(newIsBuy)
-  }, [])
+  const handleToggleBuy = useCallback(
+    (newIsBuy: boolean) => {
+      setIsBuy(newIsBuy)
+    },
+    [setIsBuy]
+  )
 
   const handleChangeAdvancedMode = useCallback(
     (newIsAdvancedMode: boolean) => {
@@ -274,7 +299,7 @@ export default function TradePageHelper({ markets, selectedMarket, openPositions
                 // Reset selected option
                 setSelectedStrikeId(null)
               }
-              setSelectedBoard(newBoard)
+              setSelectedBoardId(newBoard?.id ?? null)
             }}
             selectedOption={selectedOption}
             onSelectOption={handleSelectOption}