feat: cleanup

pages/_app.page.tsx

@@ -96,7 +96,10 @@ interface MyAppProps extends AppProps {
 export default function MyApp(props: MyAppProps) {
   const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
   const getLayout = Component.getLayout ?? ((page: ReactNode) => page);
-  const initializeMixpanel = useRootStore((store) => store.initializeMixpanel);
+  const [initializeMixpanel, setWalletType] = useRootStore((store) => [
+    store.initializeMixpanel,
+    store.setWalletType,
+  ]);
   const [queryClient] = useState(
     () =>
       new QueryClient({
@@ -137,7 +140,10 @@ export default function MyApp(props: MyAppProps) {
         <LanguageProvider>
           <WagmiProvider config={wagmiConfig}>
             <QueryClientProvider client={queryClient}>
-              <ConnectKitProvider onDisconnect={cleanLocalStorage}>
+              <ConnectKitProvider
+                onDisconnect={cleanLocalStorage}
+                onConnect={({ connectorId }) => setWalletType(connectorId)}
+              >
                 <Web3ContextProvider>
                   <AppGlobalStyles>
                     <AddressBlocked>

pages/index.page.tsx

@@ -14,7 +14,7 @@ import { DashboardContentWrapper } from '../src/modules/dashboard/DashboardConte
 import { DashboardTopPanel } from '../src/modules/dashboard/DashboardTopPanel';
 
 export default function Home() {
-  const { currentAccount, loading: web3Loading } = useWeb3Context();
+  const { currentAccount } = useWeb3Context();
   const { currentMarket } = useProtocolDataContext();
   const trackEvent = useRootStore((store) => store.trackEvent);
 
@@ -63,7 +63,7 @@ export default function Home() {
         {currentAccount ? (
           <DashboardContentWrapper isBorrow={mode === 'borrow'} />
         ) : (
-          <ConnectWalletPaper loading={web3Loading} />
+          <ConnectWalletPaper />
         )}
       </ContentContainer>
     </>

pages/v3-migration.page.tsx

@@ -51,7 +51,7 @@ const selectableMarkets = [
 ];
 
 export default function V3Migration() {
-  const { currentAccount, loading: web3Loading } = useWeb3Context();
+  const { currentAccount } = useWeb3Context();
   const router = useRouter();
   const [fromMarketData, setFromMarketData] = useState<MarketDataType>(() => {
     if (router.query.market) {
@@ -255,7 +255,6 @@ export default function V3Migration() {
         </ContentContainer>
       ) : (
         <ConnectWalletPaper
-          loading={web3Loading}
           description={<Trans> Please connect your wallet to see migration tool.</Trans>}
         />
       )}

src/components/AddressBlocked.tsx

@@ -3,18 +3,20 @@ import { useAddressAllowed } from 'src/hooks/useAddressAllowed';
 import { MainLayout } from 'src/layouts/MainLayout';
 import { useWeb3Context } from 'src/libs/hooks/useWeb3Context';
 import { ENABLE_TESTNET } from 'src/utils/marketsAndNetworksConfig';
+import { useDisconnect } from 'wagmi';
 
 import { AddressBlockedModal } from './AddressBlockedModal';
 
 export const AddressBlocked = ({ children }: { children: ReactNode }) => {
-  const { currentAccount, disconnectWallet, readOnlyMode, loading } = useWeb3Context();
+  const { currentAccount, readOnlyMode, loading } = useWeb3Context();
+  const { disconnect } = useDisconnect();
   const screenAddress = readOnlyMode || loading || ENABLE_TESTNET ? '' : currentAccount;
   const { isAllowed } = useAddressAllowed(screenAddress);
 
   if (!isAllowed) {
     return (
       <MainLayout>
-        <AddressBlockedModal address={currentAccount} onDisconnectWallet={disconnectWallet} />;
+        <AddressBlockedModal address={currentAccount} onDisconnectWallet={() => disconnect()} />;
       </MainLayout>
     );
   }

src/components/ConnectWalletPaper.tsx

@@ -1,22 +1,21 @@
 import { Trans } from '@lingui/macro';
 import { Box, CircularProgress, Paper, PaperProps, Typography } from '@mui/material';
+import { useModal } from 'connectkit';
 import { ReactNode } from 'react';
+import { useWeb3Context } from 'src/libs/hooks/useWeb3Context';
 
 import LandingGhost from '/public/resting-gho-hat-purple.svg';
 
 import { ConnectWalletButton } from './WalletConnection/ConnectWalletButton';
 
 interface ConnectWalletPaperProps extends PaperProps {
-  loading?: boolean;
   description?: ReactNode;
 }
 
-export const ConnectWalletPaper = ({
-  loading,
-  description,
-  sx,
-  ...rest
-}: ConnectWalletPaperProps) => {
+export const ConnectWalletPaper = ({ description, sx, ...rest }: ConnectWalletPaperProps) => {
+  const { open } = useModal();
+  const { loading } = useWeb3Context();
+
   return (
     <Paper
       {...rest}
@@ -35,7 +34,7 @@ export const ConnectWalletPaper = ({
         <LandingGhost />
       </Box>
       <>
-        {loading ? (
+        {open || loading ? (
           <CircularProgress />
         ) : (
           <>

src/components/UserDisplay.tsx

@@ -4,6 +4,7 @@ import { useMemo } from 'react';
 import useGetEns from 'src/libs/hooks/use-get-ens';
 import { useWeb3Context } from 'src/libs/hooks/useWeb3Context';
 import { useRootStore } from 'src/store/root';
+import { useAccount } from 'wagmi';
 import { shallow } from 'zustand/shallow';
 
 import { Avatar, AvatarProps } from './Avatar';
@@ -27,12 +28,12 @@ export const UserDisplay: React.FC<UserDisplayProps> = ({
   withLink,
   funnel,
 }) => {
-  const { account, defaultDomain, domainsLoading, accountLoading } = useRootStore(
+  const { isConnecting } = useAccount();
+  const { account, defaultDomain, domainsLoading } = useRootStore(
     (state) => ({
       account: state.account,
       defaultDomain: state.defaultDomain,
       domainsLoading: state.domainsLoading,
-      accountLoading: state.accountLoading,
     }),
     shallow
   );
@@ -41,7 +42,7 @@ export const UserDisplay: React.FC<UserDisplayProps> = ({
     () => (account ? blo(account as `0x${string}`) : undefined),
     [account]
   );
-  const loading = domainsLoading || accountLoading;
+  const loading = domainsLoading || isConnecting;
 
   return (
     <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>

src/components/WalletConnection/ConnectWalletButton.tsx

@@ -1,7 +1,6 @@
 import { Trans } from '@lingui/macro';
 import { Button } from '@mui/material';
 import { ConnectKitButton } from 'connectkit';
-import { useWalletModalContext } from 'src/hooks/useWalletModal';
 import { useRootStore } from 'src/store/root';
 import { AUTH } from 'src/utils/mixPanelEvents';
 
@@ -10,6 +9,7 @@ import { UserDisplay } from '../UserDisplay';
 
 export interface ConnectWalletProps {
   funnel?: string;
+  onIsConnecting?: (isConnecting: boolean) => void;
 }
 
 export const ConnectWalletButton: React.FC<ConnectWalletProps> = ({ funnel }) => {
@@ -24,6 +24,7 @@ export const ConnectWalletButton: React.FC<ConnectWalletProps> = ({ funnel }) =>
               variant={isConnected ? 'surface' : 'gradient'}
               onClick={() => {
                 show && show();
+                trackEvent(AUTH.CONNECT_WALLET, { funnel: funnel });
               }}
             >
               {isConnected ? (

src/components/WalletConnection/ReadOnlyModal.tsx

@@ -5,20 +5,14 @@ import { useEffect, useState } from 'react';
 import { ReadOnlyModeTooltip } from 'src/components/infoTooltips/ReadOnlyModeTooltip';
 import { ModalType, useModalContext } from 'src/hooks/useModal';
 import { useWeb3Context } from 'src/libs/hooks/useWeb3Context';
-import { WalletType } from 'src/libs/web3-data-provider/WalletOptions';
 import { useRootStore } from 'src/store/root';
 import { getENSProvider } from 'src/utils/marketsAndNetworksConfig';
 import { AUTH } from 'src/utils/mixPanelEvents';
+import { mock, useConnect } from 'wagmi';
 
 import { BasicModal } from '../primitives/BasicModal';
 import { Warning } from '../primitives/Warning';
 import { TxModalTitle } from '../transactions/FlowCommons/TxModalTitle';
-import { mock, useConnect } from 'wagmi';
-
-export type WalletRowProps = {
-  walletName: string;
-  walletType: WalletType;
-};
 
 export enum ErrorType {
   UNSUPORTED_CHAIN,