Pulling refs/heads/staging into test-staging

components/account/AccountButton.tsx

@@ -266,23 +266,18 @@ const AccountButton: FC<{
                                         <label className="text-purple-900 text-xs italic mb-2">
                                           Account is acting proxy for:
                                         </label>
-                                        {realAddress && (
-                                          <div className="flex items-center gap-1">
-                                            <div className="text-white text-sm">
-                                              {shortenAddress(
-                                                realAddress,
-                                                7,
-                                                7,
-                                              )}
-                                            </div>
-                                            <div className="text-purple-800">
-                                              <CopyIcon
-                                                size={14}
-                                                copyText={realAddress}
-                                              />
-                                            </div>
+                                        <div className="flex items-center gap-1">
+                                          <div className="text-white text-sm">
+                                            {realAddress &&
+                                              shortenAddress(realAddress, 7, 7)}
                                           </div>
-                                        )}
+                                          <div className="text-purple-800">
+                                            <CopyIcon
+                                              size={14}
+                                              copyText={realAddress}
+                                            />
+                                          </div>
+                                        </div>
                                       </div>
                                     </div>
                                   </div>

components/liquidity/LiquidityModal.tsx

@@ -118,7 +118,6 @@ const LiquidityModal = ({
 
       return allBalances;
     }
-    return {};
   }, [
     pool?.weights,
     userAssetBalances,
@@ -142,27 +141,31 @@ const LiquidityModal = ({
 
           <Tab.Panels className="p-[30px]">
             <Tab.Panel>
-              <JoinPoolForm
-                poolId={poolId}
-                poolBalances={allBalances}
-                totalPoolShares={
-                  new Decimal(totalPoolIssuance?.toString() ?? 0)
-                }
-                baseAssetTicker={metadata?.symbol}
-                onSuccess={onClose}
-              />
+              {allBalances && (
+                <JoinPoolForm
+                  poolId={poolId}
+                  poolBalances={allBalances}
+                  totalPoolShares={
+                    new Decimal(totalPoolIssuance?.toString() ?? 0)
+                  }
+                  baseAssetTicker={metadata?.symbol}
+                  onSuccess={onClose}
+                />
+              )}
             </Tab.Panel>
             <Tab.Panel>
-              <ExitPoolForm
-                poolId={poolId}
-                poolBalances={allBalances}
-                totalPoolShares={
-                  new Decimal(totalPoolIssuance?.toString() ?? 0)
-                }
-                userPoolShares={new Decimal(userPoolTokens?.toString() ?? 0)}
-                baseAssetTicker={metadata?.symbol}
-                onSuccess={onClose}
-              />
+              {allBalances && (
+                <ExitPoolForm
+                  poolId={poolId}
+                  poolBalances={allBalances}
+                  totalPoolShares={
+                    new Decimal(totalPoolIssuance?.toString() ?? 0)
+                  }
+                  userPoolShares={new Decimal(userPoolTokens?.toString() ?? 0)}
+                  baseAssetTicker={metadata?.symbol}
+                  onSuccess={onClose}
+                />
+              )}
             </Tab.Panel>
           </Tab.Panels>
         </Tab.Group>

components/markets/MarketHeader.tsx

@@ -27,6 +27,7 @@ import { formatScalarOutcome } from "lib/util/format-scalar-outcome";
 import { Dialog } from "@headlessui/react";
 import { usePoolLiquidity } from "lib/hooks/queries/usePoolLiquidity";
 import { estimateMarketResolutionDate } from "lib/util/estimate-market-resolution";
+import { MarketReport } from "lib/types";
 
 export const UserIdentity: FC<
   PropsWithChildren<{ user: string; className?: string }>
@@ -280,10 +281,10 @@ const MarketHistory: FC<
 
 const MarketHeader: FC<{
   market: MarketPageIndexedData;
-  report: MarketDispute;
-  disputes: MarketDispute;
-  resolvedOutcome: string;
-  token: string;
+  report?: MarketReport;
+  disputes?: MarketDispute;
+  resolvedOutcome?: string;
+  token?: string;
   marketStage: MarketStage;
   rejectReason?: string;
 }> = ({
@@ -316,10 +317,10 @@ const MarketHeader: FC<{
     marketType,
     categories,
     status,
+    scalarType,
     disputes,
     report,
     resolvedOutcome,
-    scalarType,
   );
 
   const { data: marketHistory } = useMarketEventHistory(
@@ -418,7 +419,7 @@ const MarketHeader: FC<{
           <MarketOutcome
             setShowMarketHistory={setShowMarketHistory}
             status={status}
-            outcome={outcome}
+            outcome={outcome ?? ""}
             by={by}
             marketHistory={marketHistory}
           />

components/markets/MarketsList.tsx

@@ -116,7 +116,7 @@ const MarketsList = ({ className = "" }: MarketsListProps) => {
           const filteredScalar =
             scalar?.filter((item): item is string => item !== null) ?? [];
           const marketType = { categorical, scalar: filteredScalar };
-          const pool = market.pool ?? {};
+          const pool = market.pool ?? null;
           const tags =
             market.tags?.filter((tag): tag is string => tag !== null) ?? [];
 

components/markets/ScalarPriceRange.tsx

@@ -6,8 +6,8 @@ interface ScalarPriceRangeProps {
   scalarType: ScalarRangeType;
   lowerBound: number;
   upperBound: number;
-  shortPrice: number; //between 0 and 1
-  longPrice: number; //between 0 and 1
+  shortPrice?: number; //between 0 and 1
+  longPrice?: number; //between 0 and 1
   status: string;
 }
 
@@ -20,12 +20,16 @@ const ScalarPriceRange = ({
   status,
 }: ScalarPriceRangeProps) => {
   const { width = 0, ref } = useResizeDetector();
-  const shortPercentage = 1 - shortPrice;
+  const shortPercentage = shortPrice && 1 - shortPrice;
   const longPercentage = longPrice;
-  const averagePercentage = (shortPercentage + longPercentage) / 2;
-  const averagePosition = width * averagePercentage;
+  const averagePercentage =
+    shortPercentage && longPercentage && (shortPercentage + longPercentage) / 2;
+  const averagePosition = averagePercentage && width * averagePercentage;
 
   const position = useMemo(() => {
+    if (!shortPrice || !longPrice) {
+      return 0;
+    }
     const pos =
       (upperBound - lowerBound) * ((1 - shortPrice + longPrice) / 2) +
       lowerBound;
@@ -66,7 +70,7 @@ const ScalarPriceRange = ({
           <div
             style={{
               width: `${
-                isNaN(averagePosition) || Number(positionDisplay) === 0
+                averagePosition != null || Number(positionDisplay) === 0
                   ? 0
                   : averagePosition
               }px`,

components/markets/market-card/index.tsx

@@ -30,7 +30,7 @@ export interface IndexedMarketCardData {
   scalarType: ScalarRangeType;
   prediction: { name: string; price: number };
   volume: number;
-  pool: {};
+  pool: { poolId?: number; volume: string } | null;
   baseAsset: string;
   tags?: string[];
   status: string;

components/portfolio/DepositButton.tsx

@@ -93,7 +93,7 @@ const DepositModal = ({
 
   const { send: transfer, isLoading } = useCrossChainExtrinsic(
     () => {
-      if (!chain || !api || !wallet.activeAccount || !constants) return;
+      if (!chain || !api || !wallet.realAddress || !constants) return;
       const tx = chain.createDepositExtrinsic(
         api,
         wallet.realAddress,

components/portfolio/WithdrawButton.tsx

@@ -129,7 +129,7 @@ const WithdrawModal = ({
 
   const { send: transfer, isLoading } = useCrossChainExtrinsic(
     () => {
-      if (isRpcSdk(sdk) && wallet.activeAccount) {
+      if (isRpcSdk(sdk) && wallet.realAddress) {
         const tx = createWithdrawExtrinsic(
           sdk.api,
           amountDecimal.toFixed(0),

components/ui/CopyIcon.tsx

@@ -3,7 +3,7 @@ import { FC, Fragment, useEffect, useState } from "react";
 import { Copy } from "react-feather";
 
 export type CopyIconProps = {
-  copyText: string;
+  copyText?: string;
   className?: string;
   size?: number;
 };
@@ -16,6 +16,9 @@ const CopyIcon: FC<CopyIconProps> = ({
   const [recentlyCopied, setRecentlyCopied] = useState(false);
 
   const copyAddressToClipboard = () => {
+    if (copyText == null) {
+      return;
+    }
     navigator.clipboard.writeText(copyText);
     setRecentlyCopied(true);
   };

e2e/index.spec.ts

@@ -60,8 +60,8 @@ test.describe("index page", () => {
 
       const numSlides = images.length;
 
-      let lastTitle: string;
-      let lastSubTitle: string;
+      let lastTitle: string | null = null;
+      let lastSubTitle: string | null = null;
       for (let index = 0; index < numSlides; index++) {
         expect(await indexPage.getActiveSlideIndex()).toBe(index);
         const title = await heroSlider.locator("h2").last().textContent();

e2e/lib/test.ts

@@ -7,7 +7,7 @@ const IGNORED_MESSAGES = [
 
 const test = base.extend<{ consoleErrors: string[] }>({
   consoleErrors: async ({ page }, use) => {
-    const logs = [];
+    const logs: string[] = [];
 
     page.on("pageerror", (error) => {
       for (const ignoredMessage of IGNORED_MESSAGES) {

lib/gql/featured-markets.ts

@@ -11,6 +11,7 @@ import { getFeaturedMarketIds } from "lib/cms/get-featured-marketids";
 import { getCurrentPrediction } from "lib/util/assets";
 import { hiddenMarketIds } from "lib/constants/markets";
 import { marketMetaFilter } from "./constants";
+import { isPresent } from "lib/types";
 
 const marketQuery = gql`
   query Market($marketId: Int) {
@@ -167,7 +168,7 @@ const getFeaturedMarkets = async (
     }),
   );
 
-  return featuredMarkets.filter((market) => market !== undefined);
+  return featuredMarkets.filter(isPresent);
 };
 
 export default getFeaturedMarkets;

lib/gql/markets-list/outcomes-for-markets.ts

@@ -14,13 +14,25 @@ const assetsQuery = gql`
   }
 `;
 
+const isValidCategory = (
+  category?: {
+    color?: string | null;
+    name?: string | null;
+  } | null,
+): category is { color?: string; name: string } => {
+  return category != null && typeof category.name === "string";
+};
+
 export const getOutcomesForMarkets = async (
   client: GraphQLClient,
   markets: {
-    pool?: { poolId: number };
+    pool?: { poolId: number } | null;
     marketId: number;
-    marketType: { categorical?: string; scalar?: string[] };
-    categories?: { color?: string; name?: string }[];
+    marketType: {
+      categorical?: string | null;
+      scalar?: (null | string)[] | null;
+    };
+    categories?: { color?: string | null; name?: string | null }[] | null;
   }[],
 ): Promise<{ [marketId: number]: MarketOutcomes }> => {
   if (markets.length === 0) {
@@ -63,7 +75,7 @@ export const getOutcomesForMarkets = async (
 
     const res = { ...prev };
 
-    let currentOutcomes = [];
+    let currentOutcomes: MarketOutcomes = [];
 
     for (const asset of filteredAssets) {
       const assetIdJson = JSON.parse(asset.assetId);
@@ -76,6 +88,9 @@ export const getOutcomesForMarkets = async (
       }
 
       const category = categories?.[categoryIndex];
+      if (!isValidCategory(category)) {
+        continue;
+      }
       const currentOutcome = {
         ...category,
         price: asset.price,

lib/gql/trending-markets.ts

@@ -181,7 +181,7 @@ const getTrendingMarkets = async (
         volume: Number(new Decimal(market.pool.volume).div(ZTG).toFixed(0)),
         baseAsset: market.baseAsset,
         outcomes: marketCategories,
-        pool: market.pool,
+        pool: market.pool ?? null,
         marketType: market.marketType,
         tags: market.tags,
         status: market.status,

lib/hooks/index.ts

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { fromEvent, Subscription } from "rxjs";
 import { debounceTime } from "rxjs/operators";
 
@@ -7,7 +7,7 @@ export const useEvent = (
   eventName: string,
   debounceMs: number = 0,
 ) => {
-  const eventSub = useRef<Subscription>(null);
+  const eventSub = useRef<Subscription | null>(null);
   const [event, setEvent] = useState<Event>();
 
   useEffect(() => {
@@ -20,7 +20,7 @@ export const useEvent = (
     eventSub.current = fromEvent(target, eventName)
       .pipe(debounceTime(debounceMs))
       .subscribe((e: Event) => setEvent(e));
-    return () => eventSub.current.unsubscribe();
+    return () => eventSub.current?.unsubscribe();
   }, [target]);
 
   return event;

lib/hooks/slides.tsx

@@ -28,25 +28,31 @@ export const useSliderControls = (props: UseSlidesProps): UseSliderControls => {
     const isFirstSlide = currentSlide === props.count - 1;
     const newSlide = isFirstSlide ? 0 : currentSlide + 1;
     setCurrentSlide(newSlide);
-    userOrigin && pause(props.pauseOnUserInteraction);
+    userOrigin &&
+      props.pauseOnUserInteraction &&
+      pause(props.pauseOnUserInteraction);
   };
 
   const prev = (userOrigin?: boolean) => {
     const isFirstSlide = currentSlide === 0;
     const newSlide = isFirstSlide ? props.count - 1 : currentSlide - 1;
     setCurrentSlide(newSlide);
-    userOrigin && pause(props.pauseOnUserInteraction);
+    userOrigin &&
+      props.pauseOnUserInteraction &&
+      pause(props.pauseOnUserInteraction);
   };
 
   const goto = (slide: number, userOrigin?: boolean) => {
     setCurrentSlide(slide);
-    userOrigin && pause(props.pauseOnUserInteraction);
+    userOrigin &&
+      props.pauseOnUserInteraction &&
+      pause(props.pauseOnUserInteraction);
   };
 
   const pause = (time: number) => {
-    clearTimeout(timerRef.current);
+    timerRef.current && clearTimeout(timerRef.current);
     setPaused(true);
-    clearTimeout(pauseTimerRef.current);
+    pauseTimerRef.current && clearTimeout(pauseTimerRef.current);
     pauseTimerRef.current = setTimeout(() => {
       setPaused(false);
     }, time);
@@ -64,7 +70,7 @@ export const useSliderControls = (props: UseSlidesProps): UseSliderControls => {
         next();
       }, props.autoplay);
       return () => {
-        clearTimeout(timerRef.current);
+        timerRef.current && clearTimeout(timerRef.current);
       };
     }
   }, [props.autoplay, currentSlide, paused]);