feat: merged with main

.env.example

@@ -16,3 +16,4 @@ NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=
 NEXT_PUBLIC_MIXPANEL=
 NEXT_PUBLIC_FIAT_ON_RAMP=true
 NEXT_PUBLIC_SUBGRAPH_API_KEY=
+NEXT_PUBLIC_IS_CYPRESS_ENABLED=false

.eslintrc.js

@@ -19,7 +19,7 @@ module.exports = {
     'import/first': 'error',
     'import/newline-after-import': 'error',
     'import/no-duplicates': 'error',
-    'import/no-named-as-default': 'warn',
+    'import/no-named-as-default': 'error',
     'import/no-unresolved': 'warn',
     // disabled as with the static export Image does not make to much sense
     '@next/next/no-img-element': 'off',

custom.d.ts

@@ -14,5 +14,6 @@ namespace NodeJS {
     NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID: string;
     NEXT_PUBLIC_FIAT_ON_RAMP: string;
     NEXT_PUBLIC_SUBGRAPH_API_KEY: string;
+    NEXT_PUBLIC_IS_CYPRESS_ENABLED: string;
   }
 }

cypress/tsconfig.json

@@ -3,6 +3,7 @@
   "compilerOptions": {
     "noEmit": true,
     "types": ["cypress", "cypress-wait-until"],
+    "sourceMap": false,
   },
   "include": [
     "../node_modules/cypress",

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,19 @@
 import { Trans } from '@lingui/macro';
 import { Box, CircularProgress, Paper, PaperProps, Typography } from '@mui/material';
+import { useModal } from 'connectkit';
 import { ReactNode } from 'react';
 
 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();
+
   return (
     <Paper
       {...rest}
@@ -35,7 +32,7 @@ export const ConnectWalletPaper = ({
         <LandingGhost />
       </Box>
       <>
-        {loading ? (
+        {open ? (
           <CircularProgress />
         ) : (
           <>

src/components/HealthFactorNumber.tsx

@@ -2,7 +2,7 @@ import { valueToBigNumber } from '@aave/math-utils';
 import { Trans } from '@lingui/macro';
 import { Box, Button, Typography, useTheme } from '@mui/material';
 import { TypographyProps } from '@mui/material/Typography';
-import BigNumber from 'bignumber.js';
+import { BigNumber } from 'bignumber.js';
 
 import { FormattedNumber } from './primitives/FormattedNumber';
 

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,7 +5,6 @@ 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';
@@ -15,11 +14,6 @@ import { BasicModal } from '../primitives/BasicModal';
 import { Warning } from '../primitives/Warning';
 import { TxModalTitle } from '../transactions/FlowCommons/TxModalTitle';
 
-export type WalletRowProps = {
-  walletName: string;
-  walletType: WalletType;
-};
-
 export enum ErrorType {
   UNSUPORTED_CHAIN,
   USER_REJECTED_REQUEST,
@@ -109,11 +103,11 @@ export const ReadOnlyModal = () => {
   return (
     <BasicModal open={type === ModalType.ReadMode} setOpen={close}>
       <Box sx={{ display: 'flex', flexDirection: 'column' }}>
-        <TxModalTitle title="Connect a wallet" />
+        <TxModalTitle title="Watch Wallet" />
         {error && <Warning severity="error">{handleBlocking()}</Warning>}
         <Box sx={{ display: 'flex', alignItems: 'center', mb: 1, padding: '10px 0' }}>
           <Typography variant="subheader1" color="text.secondary">
-            <Trans>Track wallet balance in read-only mode</Trans>
+            <Trans>Watch a wallet balance in read-only mode</Trans>
           </Typography>
           <ReadOnlyModeTooltip />
         </Box>