chore: migrate useIsMounted to usehooks-ts

apps/web/src/components/Common/Layout.tsx

@@ -11,13 +11,12 @@ import type { FC, ReactNode } from 'react';
 import { Toaster } from 'react-hot-toast';
 import { CHAIN_ID } from 'src/constants';
 import { useAppPersistStore, useAppStore } from 'src/store/app';
-import { useUpdateEffect } from 'usehooks-ts';
+import { useIsMounted, useUpdateEffect } from 'usehooks-ts';
 import { useAccount, useDisconnect, useNetwork } from 'wagmi';
 
 import GlobalModals from '../Shared/GlobalModals';
 import Loading from '../Shared/Loading';
 import Navbar from '../Shared/Navbar';
-import useIsMounted from '../utils/hooks/useIsMounted';
 import { useDisconnectXmtp } from '../utils/hooks/useXmtpClient';
 
 interface LayoutProps {
@@ -32,7 +31,7 @@ const Layout: FC<LayoutProps> = ({ children }) => {
   const profileId = useAppPersistStore((state) => state.profileId);
   const setProfileId = useAppPersistStore((state) => state.setProfileId);
 
-  const { mounted } = useIsMounted();
+  const isMounted = useIsMounted();
   const { address } = useAccount();
   const { chain } = useNetwork();
   const { disconnect } = useDisconnect();
@@ -90,7 +89,7 @@ const Layout: FC<LayoutProps> = ({ children }) => {
     validateAuthentication();
   }, [address, chain, disconnect, profileId]);
 
-  if (loading || !mounted) {
+  if (loading || !isMounted()) {
     return <Loading />;
   }
 

apps/web/src/components/Messages/Composer.tsx

@@ -1,4 +1,3 @@
-import useWindowSize from '@components/utils/hooks/useWindowSize';
 import { ArrowRightIcon, PhotographIcon } from '@heroicons/react/outline';
 import { XIcon } from '@heroicons/react/solid';
 import { Leafwatch } from '@lib/leafwatch';
@@ -18,7 +17,7 @@ import {
 import { useMessagePersistStore } from 'src/store/message';
 import { MESSAGES } from 'src/tracking';
 import { Button, Input, Spinner } from 'ui';
-import { useUpdateEffect } from 'usehooks-ts';
+import { useUpdateEffect, useWindowSize } from 'usehooks-ts';
 import type {
   Attachment as TAttachment,
   RemoteAttachment

apps/web/src/components/Shared/Login/WalletSelector.tsx

@@ -1,5 +1,4 @@
 import SwitchNetwork from '@components/Shared/SwitchNetwork';
-import useIsMounted from '@components/utils/hooks/useIsMounted';
 import { KeyIcon } from '@heroicons/react/outline';
 import { XCircleIcon } from '@heroicons/react/solid';
 import errorToast from '@lib/errorToast';
@@ -21,6 +20,7 @@ import { useAppPersistStore, useAppStore } from 'src/store/app';
 import { useAuthStore } from 'src/store/auth';
 import { AUTH } from 'src/tracking';
 import { Button, Spinner } from 'ui';
+import { useIsMounted } from 'usehooks-ts';
 import type { Connector } from 'wagmi';
 import {
   useAccount,
@@ -50,7 +50,7 @@ const WalletSelector: FC<WalletSelectorProps> = ({
     errorToast(error);
   };
 
-  const { mounted } = useIsMounted();
+  const isMounted = useIsMounted();
   const { chain } = useNetwork();
   const { connectors, error, connectAsync } = useConnect({ chainId: CHAIN_ID });
   const { disconnect } = useDisconnect();
@@ -198,18 +198,18 @@ const WalletSelector: FC<WalletSelectorProps> = ({
             )}
             onClick={() => onConnect(connector)}
             disabled={
-              mounted
+              isMounted()
                 ? !connector.ready || connector.id === activeConnector?.id
                 : false
             }
           >
             <span>
-              {mounted
+              {isMounted()
                 ? connector.id === 'injected'
                   ? t`Browser Wallet`
                   : getWalletDetails(connector.name).name
                 : getWalletDetails(connector.name).name}
-              {mounted ? !connector.ready && ' (unsupported)' : ''}
+              {isMounted() ? !connector.ready && ' (unsupported)' : ''}
             </span>
             <img
               src={getWalletDetails(connector.name).logo}