Pulling refs/heads/staging into test-staging

components/liquidity/MarketLiquiditySection.tsx

@@ -89,12 +89,12 @@ const LiquidityHeaderButtonItem: FC<
 };
 
 const LiquidityHeader = ({ market }: { market: FullMarketFragment }) => {
-  const { pool } = market;
+  const { pool, neoPool } = market;
   const { data: liquidity } = usePoolLiquidity(
     pool?.poolId ? { poolId: pool.poolId } : undefined,
   );
 
-  const swapFee = new Decimal(Number(pool?.swapFee) ?? 0)
+  const swapFee = new Decimal(Number(pool?.swapFee ?? neoPool?.swapFee ?? 0))
     .div(ZTG)
     .mul(100)
     .toNumber();

components/markets/MarketChart.tsx

@@ -27,7 +27,7 @@ const MarketChart = ({
 }: {
   marketId: number;
   chartSeries: ChartSeries[];
-  baseAsset: string;
+  baseAsset?: string;
   poolCreationDate: Date;
   marketStatus: MarketStatus;
   resolutionDate: Date;

components/markets/MarketHeader.tsx

@@ -323,14 +323,22 @@ const MarketHeader: FC<{
   rejectReason,
   promotionData,
 }) => {
-  const { categories, status, question, period, marketType, pool, scalarType } =
-    market;
+  const {
+    categories,
+    status,
+    question,
+    period,
+    marketType,
+    pool,
+    scalarType,
+    neoPool,
+  } = market;
   const [showMarketHistory, setShowMarketHistory] = useState(false);
   const starts = Number(period.start);
   const ends = Number(period.end);
-  const volume = pool?.volume
-    ? new Decimal(pool?.volume).div(ZTG).toNumber()
-    : 0;
+  const volume = new Decimal(pool?.volume ?? neoPool?.volume ?? 0)
+    .div(ZTG)
+    .toNumber();
 
   const { outcome, by } = getMarketStatusDetails(
     marketType,

components/markets/MarketsList.tsx

@@ -133,6 +133,7 @@ const MarketsList = ({ className = "" }: MarketsListProps) => {
               marketType={marketType}
               scalarType={scalarType}
               pool={pool}
+              neoPool={market.neoPool}
               status={market.status}
               baseAsset={market.baseAsset}
               volume={new Decimal(volume).div(ZTG).toNumber()}

components/markets/SimilarMarketsSection.tsx

@@ -71,6 +71,7 @@ export const SimilarMarketsSection = ({
                   marketType={marketType}
                   scalarType={scalarType}
                   pool={market.pool ?? null}
+                  neoPool={market?.neoPool}
                   status={market.status}
                   baseAsset={market.baseAsset}
                   volume={new Decimal(market.pool?.volume ?? 0)

components/markets/market-card/index.tsx

@@ -17,6 +17,7 @@ import {
 } from "@zeitgeistpm/sdk";
 import { lookupAssetImagePath } from "lib/constants/foreign-asset";
 import Image from "next/image";
+import { FullMarketFragment } from "@zeitgeistpm/indexer";
 
 export interface IndexedMarketCardData {
   marketId: number;
@@ -30,6 +31,7 @@ export interface IndexedMarketCardData {
   prediction: { name: string; price: number };
   volume: number;
   pool?: { poolId?: number; volume: string } | null;
+  neoPool?: FullMarketFragment["neoPool"] | null;
   baseAsset: string;
   tags?: string[];
   status: string;
@@ -50,13 +52,11 @@ export interface MarketCardProps extends IndexedMarketCardData {
 
 const MarketCardPredictionBar = ({
   prediction: { name, price },
-  pool,
 }: {
   prediction: { name: string; price: number };
-  pool: {};
 }) => {
   // check if market has liquidity
-  if (Object.keys(pool).length !== 0) {
+  if (price != null) {
     const impliedPercentage = Math.round(Number(price) * 100);
 
     return (
@@ -180,6 +180,7 @@ export const MarketCard = ({
   marketType,
   prediction,
   pool,
+  neoPool,
   scalarType,
   volume,
   baseAsset,
@@ -257,9 +258,9 @@ export const MarketCard = ({
                     : formatNumberCompact(Number(prediction.name))}
                 </span>
               </span>
-            ) : pool && marketType?.categorical ? (
-              <MarketCardPredictionBar pool={pool} prediction={prediction} />
-            ) : pool && scalarType && Object.keys(pool).length !== 0 ? (
+            ) : (pool || neoPool) && marketType?.categorical ? (
+              <MarketCardPredictionBar prediction={prediction} />
+            ) : (pool || neoPool) && scalarType ? (
               <ScalarPriceRange
                 scalarType={scalarType}
                 lowerBound={lower}

lib/gql/featured-markets.ts

@@ -49,6 +49,7 @@ const getFeaturedMarkets = async (
       baseAsset: market.baseAsset,
       outcomes: marketCategories,
       pool: market.pool,
+      neoPool: market.neoPool,
       marketType: market.marketType as MarketType,
       scalarType: (market.scalarType ?? null) as ScalarRangeType,
       tags: market.tags?.filter(isPresent) ?? [],

lib/gql/markets-stats.ts

@@ -21,8 +21,8 @@ export const getMarketsStats = async (
   ids: number[],
 ): Promise<MarketStats[]> => {
   if (ids.length === 0) return [];
-  const response = await client.request<{
+  const { marketStats } = await client.request<{
     marketStats: MarketStats[];
   }>(query, { ids });
-  return response.marketStats;
+  return marketStats;
 };

lib/gql/markets.ts

@@ -30,6 +30,11 @@ const marketQuery = gql`
         volume
         baseAsset
       }
+      neoPool {
+        createdAt
+        collateral
+        volume
+      }
       question
       slug
       status
@@ -97,12 +102,17 @@ export interface MarketPageIndexedData {
   categories: { name: string; color: string }[];
   outcomeAssets: string[];
   resolvedOutcome: string;
-  pool: {
+  pool?: {
     poolId: number;
     volume: string;
     createdAt: string;
     baseAsset: string;
   };
+  neoPool?: {
+    collateral: string;
+    createdAt: string;
+    volume: string;
+  };
   scalarType: ScalarRangeType;
   marketType: {
     scalar: string[];

pages/markets/[marketid].tsx

@@ -278,23 +278,32 @@ const Market: NextPage<MarketPageProps> = ({
             </div>
           )}
 
-          {chartSeries && indexedMarket?.pool?.poolId ? (
+          {chartSeries && (indexedMarket?.pool || indexedMarket.neoPool) ? (
             <div className="mt-4">
               <MarketChart
                 marketId={indexedMarket.marketId}
                 chartSeries={chartSeries}
-                baseAsset={indexedMarket.pool.baseAsset}
-                poolCreationDate={new Date(indexedMarket.pool.createdAt)}
+                baseAsset={
+                  indexedMarket.pool?.baseAsset ??
+                  indexedMarket.neoPool?.collateral
+                }
+                poolCreationDate={
+                  new Date(
+                    indexedMarket.pool?.createdAt ??
+                      indexedMarket.neoPool?.createdAt ??
+                      "",
+                  )
+                }
                 marketStatus={indexedMarket.status}
                 resolutionDate={new Date(resolutionTimestamp)}
               />
             </div>
           ) : (
             <></>
           )}
-          {marketHasPool && market.neoPool == null && (
-            <div className="flex h-ztg-22 items-center rounded-ztg-5 bg-vermilion-light p-ztg-20 text-vermilion">
-              <div className="h-ztg-20 w-ztg-20">
+          {marketHasPool === false && (
+            <div className="flex h-ztg-22 items-center bg-vermilion-light text-vermilion p-ztg-20 rounded-ztg-5">
+              <div className="w-ztg-20 h-ztg-20">
                 <AlertTriangle size={20} />
               </div>
               <div