Fix or surpress strict type errors

packages/keychain/src/components/ErrorBoundary.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from "react";
+import React, { ErrorInfo, PropsWithChildren } from "react";
 import { Container, Content, Footer } from "./layout";
 import { AlertIcon, ExternalIcon } from "@cartridge/ui";
 import { Button, HStack, Link, Text } from "@chakra-ui/react";
@@ -10,16 +10,16 @@ export class ErrorBoundary extends React.Component<
   PropsWithChildren,
   { error?: Error }
 > {
-  constructor(props) {
+  constructor(props: PropsWithChildren) {
     super(props);
     this.state = {};
   }
 
-  static getDerivedStateFromError(error) {
+  static getDerivedStateFromError(error: Error) {
     return { error };
   }
 
-  componentDidCatch(error, errorInfo) {
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
     console.log({ error, errorInfo });
   }
 

packages/keychain/src/components/Execute/Fees.tsx

@@ -19,10 +19,10 @@ export function Fees({
   }>();
 
   useEffect(() => {
-    if (!fees) {
-      return;
-    }
     async function compute() {
+      if (!fees) {
+        return;
+      }
       setFormattedFee(
         fees.max > 10000000000000n
           ? {

packages/keychain/src/components/Funding.tsx

@@ -146,7 +146,8 @@ function FundingInner({ onComplete }: FundingInnerProps) {
     try {
       const transaction_hash = await deploySelf(ETH_MIN_PREFUND);
       onComplete(transaction_hash);
-    } catch (e) {
+    } catch (_e) {
+      const e = _e as Error;
       if (e.message && e.message.includes("DuplicateTx")) {
         onComplete();
         return;

packages/keychain/src/components/SignMessage.tsx

@@ -31,12 +31,15 @@ export function SignMessage({
     ) => {
       for (const typeMember of messageType) {
         if (typeMember.type === "felt*") {
+          // @ts-expect-error TODO(#602): Fix type
           const stringArray: Array<string> = initial[typeMember.name].map(
             (hex: string) => shortString.decodeShortString(hex),
           );
+          // @ts-expect-error TODO(#602): Fix type
           initial[typeMember.name] = stringArray.join("");
         } else if (typeMember.type !== "felt" && typeMember.type !== "string") {
           convertFeltArraysToString(
+            // @ts-expect-error TODO(#602): Fix type
             initial[typeMember.name],
             typedData.types[typeMember.type],
           );
@@ -69,6 +72,7 @@ export function SignMessage({
             const ptName = messageData.primaryType;
             const pt = messageData.types[ptName];
             const values = (typeName: string) => {
+              // @ts-expect-error TODO(#602): Fix type
               const v = messageData.message[typeName];
               if (typeof v === "object") {
                 return Object.entries(v).map(([key, value]) => {

packages/keychain/src/components/Transaction.tsx

@@ -21,7 +21,7 @@ export interface TransactionProps {
   name: string;
   hash: string;
   chainId: constants.StarknetChainId;
-  finalized?: (TransactionState) => void;
+  finalized?: (txState: TransactionState) => void;
 }
 
 export function Transaction({

packages/keychain/src/components/bridge/BridgeEth.tsx

@@ -76,6 +76,7 @@ export function BridgeEth({
       if (chainId === constants.StarknetChainId.SN_MAIN) {
         const { data } = await fetchEthPrice();
         const usdeth = parseFloat(data.price.amount);
+        // @ts-expect-error TODO(#602): Fix type
         const inputValue = parseFloat(debouncedValue);
         const cost = inputValue * usdeth;
         const dollarUSLocale = Intl.NumberFormat("en-US");
@@ -87,7 +88,9 @@ export function BridgeEth({
     }
 
     function validateValue(): boolean {
+      // @ts-expect-error TODO(#602): Fix type
       const inputValue = parseFloat(debouncedValue);
+      // @ts-expect-error TODO(#602): Fix type
       const balance = parseFloat(ethBalance);
       if (inputValue > balance) {
         return false;
@@ -218,6 +221,7 @@ export function BridgeEth({
 
             <TransferButton
               account={controller.account}
+              // @ts-expect-error TODO(#602): Fix type
               value={transferAmount}
               disabled={
                 !!!ethAddress ||
@@ -227,6 +231,7 @@ export function BridgeEth({
               }
               onError={(error) => {
                 if (error === null) {
+                  // @ts-expect-error TODO(#602): Fix type
                   setErrorMessage(null);
                   return;
                 } else if (error.name === "ChainMismatchError") {
@@ -282,13 +287,13 @@ const { chains, publicClient } = configureChains(
   [mainnet, sepolia],
   [
     alchemyProvider({
-      apiKey: process.env.NEXT_PUBLIC_ETH_RPC_MAINNET.replace(
+      apiKey: process.env.NEXT_PUBLIC_ETH_RPC_MAINNET!.replace(
         /^.+\/v2\//,
         "$`",
       ),
     }),
     alchemyProvider({
-      apiKey: process.env.NEXT_PUBLIC_ETH_RPC_SEPOLIA.replace(
+      apiKey: process.env.NEXT_PUBLIC_ETH_RPC_SEPOLIA!.replace(
         /^.+\/v2\//,
         "$`",
       ),

packages/keychain/src/components/bridge/TransferButton.tsx

@@ -77,10 +77,11 @@ export function TransferButton({
     abi: EthL1BridgeABI,
     functionName: "deposit",
     args: [parseEther(value?.length ? value : "0"), BigInt(account.address)],
+    // @ts-expect-error TODO(#602): Fix type
     overrides: {
       value: value && l2Fee ? parseEther(value) + BigInt(l2Fee) : undefined,
     },
-    enabled: !disabled && value && !!l2Fee,
+    enabled: !disabled && !!value && !!l2Fee,
   });
 
   const { data, write } = useContractWrite(config);

packages/keychain/src/components/connect/Authenticate/index.tsx

@@ -42,7 +42,7 @@ export function Authenticate({
     }
   }, [onSuccess, action, name]);
 
-  if (!isSupported) {
+  if (!isSupported && !!message) {
     return <Unsupported message={message} />;
   }
 

packages/keychain/src/components/connect/CreateSession.tsx

@@ -26,7 +26,7 @@ export function CreateSession({
       await controller.approve(origin, expiresAt, policies, maxFees);
       onConnect(policies);
     } catch (e) {
-      setError(e);
+      setError(e as Error);
       setIsConnecting(false);
     }
   }, [controller, origin, expiresAt, policies, maxFees, onConnect]);

packages/keychain/src/components/connect/Login.tsx

@@ -4,7 +4,6 @@ import { Container, Footer, Content, useLayout } from "components/layout";
 import { useCallback, useEffect, useState } from "react";
 import Controller from "utils/controller";
 import { LoginMode, LoginProps } from "./types";
-import { useAnalytics } from "hooks/analytics";
 import { fetchAccount, validateUsernameFor } from "./utils";
 import { RegistrationLink } from "./RegistrationLink";
 import { useControllerTheme } from "hooks/theme";
@@ -39,11 +38,13 @@ function Form({
 }: LoginProps) {
   const { footer } = useLayout();
   const { origin, policies, chainId, rpcUrl, setController } = useConnection();
-  const { event: log } = useAnalytics();
   const [isLoading, setIsLoading] = useState(false);
   const [expiresAt] = useState<bigint>(3000000000n);
   const [error, setError] = useState<Error>();
-  const [usernameField, setUsernameField] = useState({
+  const [usernameField, setUsernameField] = useState<{
+    value: string;
+    error?: string;
+  }>({
     value: prefilledName,
     error: undefined,
   });
@@ -63,9 +64,11 @@ function Form({
 
     const {
       account: {
+        // @ts-expect-error TODO(#602): Fix type
         credentials: {
           webauthn: [{ id: credentialId, publicKey }],
         },
+        // @ts-expect-error TODO(#602): Fix type
         contractAddress: address,
       },
     } = await fetchAccount(usernameField.value);
@@ -93,7 +96,8 @@ function Form({
       if (onSuccess) {
         onSuccess();
       }
-    } catch (e) {
+    } catch (_e) {
+      const e = _e as Error;
       setError(e);
     }
 
@@ -106,7 +110,6 @@ function Form({
     policies,
     expiresAt,
     mode,
-    log,
     onSuccess,
     setController,
   ]);

packages/keychain/src/components/connect/Signup.tsx

@@ -27,7 +27,10 @@ export function Signup({
   const { deployRequest } = useDeploy();
   const [error, setError] = useState<Error>();
   const [isRegistering, setIsRegistering] = useState(false);
-  const [usernameField, setUsernameField] = useState({
+  const [usernameField, setUsernameField] = useState<{
+    value: string;
+    error?: string;
+  }>({
     value: prefilledName,
     error: undefined,
   });
@@ -106,7 +109,7 @@ export function Signup({
       refetchOnWindowFocus: false,
       staleTime: 10000000,
       cacheTime: 10000000,
-      refetchInterval: (data) => (!data ? 1000 : undefined),
+      refetchInterval: (data) => (!data ? 1000 : false),
       onSuccess: async (data) => {
         try {
           if (
@@ -118,9 +121,11 @@ export function Signup({
 
           const {
             account: {
+              // @ts-expect-error TODO(#602): Fix type
               credentials: {
                 webauthn: [{ id: credentialId, publicKey }],
               },
+              // @ts-expect-error TODO(#602): Fix type
               contractAddress: address,
             },
           } = data;
@@ -142,7 +147,7 @@ export function Signup({
             onSuccess();
           }
         } catch (e) {
-          setError(e);
+          setError(e as Error);
         }
       },
     },

packages/keychain/src/components/layout/Footer/TransactionSummary.tsx

@@ -8,7 +8,7 @@ export function TransactionSummary({
 }: {
   isSlot: boolean;
   createSession: boolean;
-  hostname: string;
+  hostname?: string;
 }) {
   return (
     <VStack align="flex-start">

packages/keychain/src/components/layout/Footer/index.tsx

@@ -1,6 +1,6 @@
 import { HStack, IconButton, Spacer, Text, VStack } from "@chakra-ui/react";
 import { CartridgeLogo, WedgeUpIcon } from "@cartridge/ui";
-import React, { useEffect, useMemo, useRef } from "react";
+import React, { MutableRefObject, useEffect, useMemo, useRef } from "react";
 import {
   FOOTER_HEIGHT,
   PORTAL_WINDOW_HEIGHT,
@@ -82,7 +82,7 @@ export function Footer({
       }}
       backgroundColor="var(--chakra-colors-solid-bg)"
       overflow="hidden"
-      ref={ref}
+      ref={ref as MutableRefObject<HTMLDivElement>}
     >
       <VStack
         w="full"

packages/keychain/src/errors.ts

@@ -7,3 +7,13 @@ export class TransferAmountExceedsBalance extends Error {
     Object.setPrototypeOf(this, TransferAmountExceedsBalance.prototype);
   }
 }
+
+export class ControllerNotReady extends Error {
+  constructor() {
+    super("Controller is not ready");
+
+    this.name = "ControllerNotReady";
+
+    Object.setPrototypeOf(this, ControllerNotReady.prototype);
+  }
+}

packages/keychain/src/hooks/account.ts

@@ -26,18 +26,25 @@ export const createCredentials = async (
   beginRegistration: CredentialCreationOptions,
   hasPlatformAuthenticator: boolean,
 ) => {
-  if (!hasPlatformAuthenticator || navigator.userAgent.indexOf("Win") != -1)
+  if (!hasPlatformAuthenticator || navigator.userAgent.indexOf("Win") != -1) {
+    // @ts-expect-error TODO(#602): Fix type
     beginRegistration.publicKey.authenticatorSelection.authenticatorAttachment =
       "cross-platform";
-  else
+  } else {
+    // @ts-expect-error TODO(#602): Fix type
     beginRegistration.publicKey.authenticatorSelection.authenticatorAttachment =
       undefined;
+  }
 
+  // @ts-expect-error TODO(#602): Fix type
   beginRegistration.publicKey.user.id = Buffer.from(name);
+  // @ts-expect-error TODO(#602): Fix type
   beginRegistration.publicKey.challenge = base64url.toBuffer(
+    // @ts-expect-error TODO(#602): Fix type
     beginRegistration.publicKey.challenge as unknown as string,
   );
 
+  // @ts-expect-error TODO(#602): Fix type
   beginRegistration.publicKey.rp.id = process.env.NEXT_PUBLIC_RP_ID;
   const credentials = (await navigator.credentials.create(
     beginRegistration,