More linting fixes

frontend/biome.json

@@ -20,9 +20,12 @@
       "suspicious": {
         "noArrayIndexKey": "off",
         "noAssignInExpressions": "off",
-        "noConfusingVoidType": "off"
+        "noConfusingVoidType": "off",
+        "noExplicitAny": "off"
       },
-      "complexity": {}
+      "complexity": {
+        "noUselessFragments": "off"
+      }
     },
     "ignore": ["src/**/.generated/**", "node_modules/**"]
   },

frontend/src/api/querier.ts

@@ -144,10 +144,8 @@ const querierExecuteTx = async (
   signer: SigningCosmWasmClient,
   msgs: ExecuteMsg | ExecuteMsg[],
 ) => {
-  if (!Array.isArray(msgs)) {
-    msgs = [msgs]
-  }
-  const encodedMsgs = msgs.map((msg) => encodeMsgObject(address, msg))
+  const messages = Array.isArray(msgs) ? msgs : [msgs]
+  const encodedMsgs = messages.map((msg) => encodeMsgObject(address, msg))
 
   const fee = await querierSimulate(encodedMsgs)
 
@@ -181,7 +179,7 @@ const querierExecuteTx = async (
 
 type QuerierWaitForTxResponse =
   | { found: QuerierExecuteTxResult }
-  | { not_found: {} }
+  | { not_found: unknown }
 
 interface QuerierExecuteTxResult extends ExecuteResult {
   timestamp: string

frontend/src/api/utils.ts

@@ -13,7 +13,7 @@ const poll = async <N, V>(
   isValid: (res: N | V) => res is V,
   maxAttempts = 8,
   getDelayMs: number | ((attemp: number) => number) = (attempt) =>
-    Math.pow(2, attempt) * 200,
+    2 ** attempt * 200,
 ) => {
   let attempt = 0
   while (attempt < maxAttempts) {

frontend/src/components/common/Wallet/Avatar/index.tsx

@@ -24,6 +24,7 @@ const WalletAvatar = (props: WalletAvatarProps) => {
             height: "100%",
           },
         }}
+        // biome-ignore lint:
         dangerouslySetInnerHTML={{
           __html: svg,
         }}

frontend/src/features/MarketDetail/components/MarketBetting/BetTokensField/index.tsx

@@ -40,9 +40,12 @@ const BetTokensField = (props: BetTokensFieldProps) => {
   const form = useFormContext()
 
   const formValue = form.watch(name) as string
-  const setFormValue = (value: string, validate = true) => {
-    form.setValue(name, value, { shouldValidate: validate })
-  }
+  const setFormValue = useCallback(
+    (value: string, validate = true) => {
+      form.setValue(name, value, { shouldValidate: validate })
+    },
+    [name, form.setValue],
+  )
 
   const isDisabled = !tokensBalance || form.formState.isSubmitting
 
@@ -57,9 +60,12 @@ const BetTokensField = (props: BetTokensFieldProps) => {
   /**
    * Updates the containing form's value
    */
-  const updateValueFromTokens = useCallback((newTokensValue: BigNumber) => {
-    setFormValue(newTokensValue.toFixed(3))
-  }, [])
+  const updateValueFromTokens = useCallback(
+    (newTokensValue: BigNumber) => {
+      setFormValue(newTokensValue.toFixed(3))
+    },
+    [setFormValue],
+  )
 
   /**
    * Updates the containing form's value, getting the given percentage of the current tokens balance and converting it to a token amount
@@ -85,7 +91,7 @@ const BetTokensField = (props: BetTokensFieldProps) => {
         setFormValue(newAmount === "." ? "0." : newAmount)
       }
     },
-    [tokensBalance],
+    [tokensBalance, setFormValue],
   )
 
   return (
@@ -113,7 +119,7 @@ const BetTokensField = (props: BetTokensFieldProps) => {
               borderWidth: "0.125rem",
               borderStyle: "solid",
               borderColor: (theme) =>
-                !!fieldState.error
+                fieldState.error
                   ? theme.palette.warning.plainColor
                   : "transparent",
               p: 2,

frontend/src/features/MarketDetail/components/MarketBetting/OutcomeField/index.tsx

@@ -38,7 +38,7 @@ const OutcomeField = (props: OutcomeFieldProps) => {
               borderWidth: "0.125rem",
               borderStyle: "solid",
               borderColor: (theme) =>
-                !!fieldState.error
+                fieldState.error
                   ? theme.palette.warning.plainColor
                   : "transparent",
               p: 2,

frontend/src/features/MarketDetail/components/MarketBetting/TokensAmountField/index.tsx

@@ -52,9 +52,12 @@ const TokensAmountField = (props: TokensAmountFieldProps) => {
   form.register(toggledFieldName) // The toggled field serves just as context and doesn't have an input element
 
   const formValue = form.watch(valueFieldName) as string
-  const setFormValue = (value: string, validate = true) => {
-    form.setValue(valueFieldName, value, { shouldValidate: validate })
-  }
+  const setFormValue = useCallback(
+    (value: string, validate = true) => {
+      form.setValue(valueFieldName, value, { shouldValidate: validate })
+    },
+    [valueFieldName, form.setValue],
+  )
 
   const toggled = form.watch(toggledFieldName) as boolean
   const setToggled = (value: boolean) => {
@@ -71,7 +74,7 @@ const TokensAmountField = (props: TokensAmountFieldProps) => {
         ? new USD(formValue).toTokens(denom, price)
         : Tokens.fromValue(denom, formValue).toUsd(price)
     }
-  }, [formValue, price])
+  }, [formValue, price, denom, toggled])
 
   const percentage = useMemo(() => {
     if (!price || !balance || !formValue || !bottomValue) {
@@ -85,7 +88,7 @@ const TokensAmountField = (props: TokensAmountFieldProps) => {
         : getProportion(new BigNumber(formValue), balance.getValue())
       return proportion * 100
     }
-  }, [bottomValue, toggled, price, balance])
+  }, [formValue, bottomValue, toggled, price, balance])
 
   /**
    * Updates the containing form's value, converting the given Token value to USD depending on if the field is toggled or not
@@ -100,7 +103,7 @@ const TokensAmountField = (props: TokensAmountFieldProps) => {
         }
       }
     },
-    [toggled, price],
+    [toggled, price, setFormValue],
   )
 
   /**
@@ -113,7 +116,7 @@ const TokensAmountField = (props: TokensAmountFieldProps) => {
         updateValueFromTokens(Tokens.fromUnits(denom, tokenUnits))
       }
     },
-    [updateValueFromTokens, balance],
+    [updateValueFromTokens, denom, balance],
   )
 
   /**
@@ -129,7 +132,7 @@ const TokensAmountField = (props: TokensAmountFieldProps) => {
         setFormValue(newAmount === "." ? "0." : newAmount)
       }
     },
-    [toggled, price, balance],
+    [toggled, setFormValue, tokenConfig.exponent, price, balance],
   )
 
   return (
@@ -157,7 +160,7 @@ const TokensAmountField = (props: TokensAmountFieldProps) => {
               borderWidth: "0.125rem",
               borderStyle: "solid",
               borderColor: (theme) =>
-                !!fieldState.error
+                fieldState.error
                   ? theme.palette.warning.plainColor
                   : "transparent",
               p: 2,

frontend/src/features/MarketDetail/utils.ts

@@ -1,3 +1,4 @@
+import { useCallback } from "react"
 import { useParams } from "react-router-dom"
 import { useSuspenseQuery } from "@tanstack/react-query"
 
@@ -7,7 +8,7 @@ import {
   type MarketOutcome,
   marketQuery,
 } from "@api/queries/Market"
-import { getTimeBetween } from "@utils/time"
+import { getTimeBetween, type Nanoseconds } from "@utils/time"
 
 const useCurrentMarketQuery = () => {
   const { marketId } = useParams()
@@ -29,32 +30,42 @@ type MarketStatus =
   | { state: "deciding" }
   | { state: "decided"; winner: MarketOutcome }
 
-const useMarketStatus = (market: Market): MarketStatus => {
-  return useTimedMemo(
-    "marketsStatus",
-    (timestamp) => {
-      if (market.winnerOutcome) {
-        return { state: "decided", winner: market.winnerOutcome }
-      }
+const getMarketStatus = (
+  market: Market,
+  timestamp: Nanoseconds,
+): MarketStatus => {
+  if (market.winnerOutcome) {
+    return { state: "decided", winner: market.winnerOutcome }
+  }
 
-      if (timestamp.gte(market.depositStopDate)) {
-        return { state: "deciding" }
-      }
+  if (timestamp.gte(market.depositStopDate)) {
+    return { state: "deciding" }
+  }
 
-      if (timestamp.gte(market.withdrawalStopDate)) {
-        return {
-          state: "deposits",
-          timeLeft: getTimeBetween(timestamp, market.depositStopDate),
-        }
-      }
+  if (timestamp.gte(market.withdrawalStopDate)) {
+    return {
+      state: "deposits",
+      timeLeft: getTimeBetween(timestamp, market.depositStopDate),
+    }
+  }
 
-      return {
-        state: "withdrawals",
-        timeLeft: getTimeBetween(timestamp, market.withdrawalStopDate),
-      }
-    },
-    [market.winnerOutcome, market.depositStopDate, market.withdrawalStopDate],
+  return {
+    state: "withdrawals",
+    timeLeft: getTimeBetween(timestamp, market.withdrawalStopDate),
+  }
+}
+
+const useMarketStatus = (market: Market): MarketStatus => {
+  const getStatus = useCallback(
+    (timestmap: Nanoseconds) => getMarketStatus(market, timestmap),
+    [market],
   )
+
+  return useTimedMemo("marketsStatus", getStatus, [
+    market.winnerOutcome,
+    market.depositStopDate,
+    market.withdrawalStopDate,
+  ])
 }
 
 export {

frontend/src/main.tsx

@@ -12,7 +12,7 @@ import { ThemeProvider } from "@config/theme"
 import { ModalsHandler } from "@state/modals"
 import { TimestampsHandler } from "@state/timestamps"
 
-ReactDOM.createRoot(document.getElementById("root")!).render(
+ReactDOM.createRoot(document.getElementById("root") as Element).render(
   <React.StrictMode>
     <ThemeProvider>
       <NotificationsProvider>

frontend/src/state/timestamps.tsx

@@ -39,7 +39,7 @@ const useRefreshPeriodically = (key: TimestampKey, refreshRate: number) => {
     return () => {
       clearInterval(interval)
     }
-  }, [refreshRate])
+  }, [key, refreshRate])
 }
 
 const TimestampsHandler = (props: PropsWithChildren) => {
@@ -61,7 +61,10 @@ const useTimedMemo = <T,>(
   deps: DependencyList,
 ): T => {
   const timestamp = useTimestamps()[key]
-  const value = useMemo(() => getValue(timestamp), [timestamp, ...deps])
+  const value = useMemo(
+    () => getValue(timestamp),
+    [getValue, timestamp, ...deps],
+  )
 
   return value
 }

frontend/src/utils/hooks.ts

@@ -38,18 +38,21 @@ const useCopyToClipboard = () => {
   const [copied, setCopied] = useResettingState(false, true, 1.5 * MS_IN_SECOND)
   const notifications = useNotifications()
 
-  const copy = useCallback((content: string, notification?: string) => {
-    return navigator.clipboard.writeText(content).then(() => {
-      setCopied()
-      if (!!notification) {
-        notifications.notifySuccess(`Copied ${notification}.`, {
-          // https://notistack.com/features/basic#prevent-duplicate
-          key: COPIED_NOTIFICATION_KEY(content),
-          preventDuplicate: true,
-        })
-      }
-    })
-  }, [])
+  const copy = useCallback(
+    (content: string, notification?: string) => {
+      return navigator.clipboard.writeText(content).then(() => {
+        setCopied()
+        if (notification) {
+          notifications.notifySuccess(`Copied ${notification}.`, {
+            // https://notistack.com/features/basic#prevent-duplicate
+            key: COPIED_NOTIFICATION_KEY(content),
+            preventDuplicate: true,
+          })
+        }
+      })
+    },
+    [notifications.notifySuccess, setCopied],
+  )
 
   return [copied, copy] as const
 }

frontend/src/utils/number.ts

@@ -73,11 +73,11 @@ const formatToSignificantDigits = (
 }
 
 const unitsToValue = (units: BigNumber.Value, exponent: number): BigNumber => {
-  return BigNumber(units).dividedBy(Math.pow(10, exponent))
+  return BigNumber(units).dividedBy(10 ** exponent)
 }
 
 const valueToUnits = (value: BigNumber.Value, exponent: number): BigNumber => {
-  return BigNumber(value).times(Math.pow(10, exponent))
+  return BigNumber(value).times(10 ** exponent)
 }
 
 export { getProportion, getPercentage, VALID_DECIMAL_REGEX }

frontend/src/utils/string.ts

@@ -16,7 +16,7 @@ const pluralize = (
   singular: string,
   count: number,
   inclusive = false,
-  plural: string = singular + "s",
+  plural = `${singular}s`,
 ): string => {
   // TODO: use the [Pluralize library](https://github.com/plurals/pluralize)?
   const pluralized = count === 1 ? singular : plural

frontend/src/utils/tokens.ts

@@ -279,9 +279,7 @@ class Tokens extends Asset {
     this.denom = denom
   }
   toUsd(price: BigNumber): USD {
-    return new USD(
-      this.units.times(price).dividedBy(Math.pow(10, this.exponent)),
-    )
+    return new USD(this.units.times(price).dividedBy(10 ** this.exponent))
   }
 
   toFormat(withSuffix: boolean): string {
@@ -322,9 +320,7 @@ class USD extends Asset {
     const tokenConfig = getTokenConfig(denom)
     return Tokens.fromUnits(
       denom,
-      this.units
-        .dividedBy(tokensPrice)
-        .times(Math.pow(10, tokenConfig.exponent)),
+      this.units.dividedBy(tokensPrice).times(10 ** tokenConfig.exponent),
     )
   }