fix data issues when switching markets (#31)

components/MarketHeader.tsx

@@ -20,6 +20,8 @@ const MarketHeader = () => {
   const volume = ohlcv ? ohlcv.v[0] : '--'
 
   const fetchOhlcv = useCallback(async () => {
+    if (!selectedMarketName) return
+
     // calculate from and to date (0:00UTC to 23:59:59UTC)
     const date = new Date()
     const utcFrom = new Date(
@@ -118,7 +120,7 @@ const MarketHeader = () => {
           <div className="pr-4 sm:pr-0 sm:w-24">
             <div className="mb-0.5 text-th-fgd-4 text-xs">24hr Vol</div>
             <div className={`font-semibold`}>
-              {ohlcv && !loading && volume ? (
+              {ohlcv && !loading ? (
                 volume !== '--' ? (
                   <>
                     {volume.toFixed(2)}

components/RecentMarketTrades.tsx

@@ -13,6 +13,8 @@ export default function PublicTrades() {
   const [trades, setTrades] = useState([])
 
   const fetchTradesForChart = useCallback(async () => {
+    if (!marketAddress) return
+
     const newTrades = await ChartApi.getRecentTrades(marketAddress)
     if (!newTrades) return null
     if (newTrades.length && trades.length === 0) {

hooks/useOraclePrice.ts

@@ -16,6 +16,7 @@ export default function useOraclePrice() {
 
   const fetchOraclePrice = useCallback(() => {
     if (selectedMangoGroup) {
+      setOraclePrice(null)
       const marketIndex = getMarketIndex(marketAddress)
       selectedMangoGroup.getPrices(connection).then((prices) => {
         const oraclePriceForMarket = prices[marketIndex]

package.json

@@ -8,7 +8,7 @@
     "build": "next build",
     "start": "next start",
     "type-check": "tsc --pretty --noEmit",
-    "format": "prettier --check .",
+    "format": "prettier --write .",
     "lint": "eslint . --ext ts --ext tsx --ext js --quiet",
     "test": "jest",
     "test-all": "yarn lint && yarn type-check && yarn test"