feat: add watch mode only wallet address

cypress/e2e/2-settings/wallet-connect.cy.ts

@@ -17,8 +17,9 @@ describe('Manipulation on the wallet connect', () => {
     const walletButton = '#wallet-button';
 
     it('step1:Disconnect wallet', () => {
+      cy.wait(1000);
       cy.get(walletButton).click();
-      cy.contains('Disconnect Wallet').click();
+      cy.contains('Disconnect').click();
       cy.contains('Please, connect your wallet').should('be.visible');
     });
 

cypress/support/steps/configuration.steps.ts

@@ -59,7 +59,6 @@ export const configEnvWithTenderly = ({
         win.localStorage.setItem('selectedAccount', walletAddress.toLowerCase());
         win.localStorage.setItem('selectedMarket', market);
         win.localStorage.setItem('testnetsEnabled', enableTestnet.toString());
-        win.localStorage.setItem('mockWalletAddress', walletAddress.toLowerCase());
       },
     });
   });

src/components/WalletConnection/WalletSelector.tsx

@@ -1,10 +1,23 @@
 import { Trans } from '@lingui/macro';
-import { Alert, Box, Button, Link, Typography } from '@mui/material';
+import {
+  Alert,
+  Box,
+  Button,
+  InputBase,
+  Link,
+  Typography,
+  useMediaQuery,
+  useTheme,
+} from '@mui/material';
 import { UnsupportedChainIdError } from '@web3-react/core';
 import { NoEthereumProviderError } from '@web3-react/injected-connector';
 import { UserRejectedRequestError } from '@web3-react/walletconnect-connector';
+import { utils } from 'ethers';
+import { useState } from 'react';
+import { WatchOnlyModeTooltip } from 'src/components/infoTooltips/WatchOnlyModeTooltip';
 import { useWeb3Context } from 'src/libs/hooks/useWeb3Context';
 import { WalletType } from 'src/libs/web3-data-provider/WalletOptions';
+import { getENSProvider } from 'src/utils/marketsAndNetworksConfig';
 
 import { TxModalTitle } from '../transactions/FlowCommons/TxModalTitle';
 
@@ -95,7 +108,12 @@ export enum ErrorType {
 }
 
 export const WalletSelector = () => {
-  const { error } = useWeb3Context();
+  const { error, updateWatchModeOnlyAddress } = useWeb3Context();
+  const [inputMockWalletAddress, setInputMockWalletAddress] = useState('');
+  const [validAddressError, setValidAddressError] = useState<boolean>(false);
+  const { breakpoints } = useTheme();
+  const sm = useMediaQuery(breakpoints.down('sm'));
+  const mainnetProvider = getENSProvider();
 
   let blockingError: ErrorType | undefined = undefined;
   if (error) {
@@ -125,6 +143,31 @@ export const WalletSelector = () => {
     }
   };
 
+  const handleWatchAddress = async (inputMockWalletAddress: string): Promise<void> => {
+    if (validAddressError) setValidAddressError(false);
+    if (utils.isAddress(inputMockWalletAddress)) {
+      updateWatchModeOnlyAddress(inputMockWalletAddress);
+    } else {
+      // Check if address could be valid ENS before trying to resolve
+      if (inputMockWalletAddress.slice(-4) !== '.eth') {
+        setValidAddressError(true);
+      } else {
+        // Attempt to resolve ENS name and use resolved address if valid
+        const resolvedAddress = await mainnetProvider.resolveName(inputMockWalletAddress);
+        if (resolvedAddress && utils.isAddress(resolvedAddress)) {
+          updateWatchModeOnlyAddress(resolvedAddress);
+        } else {
+          setValidAddressError(true);
+        }
+      }
+    }
+  };
+
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
+    event.preventDefault();
+    handleWatchAddress(inputMockWalletAddress);
+  };
+
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column' }}>
       <TxModalTitle title="Connect a wallet" />
@@ -150,6 +193,56 @@ export const WalletSelector = () => {
       />
       <WalletRow key="torus_wallet" walletName="Torus" walletType={WalletType.TORUS} />
       <WalletRow key="frame_wallet" walletName="Frame" walletType={WalletType.FRAME} />
+      <Box sx={{ display: 'flex', alignItems: 'center', mb: 1, padding: '10px 0' }}>
+        <Typography variant="subheader1" color="text.secondary">
+          <Trans>Enter an address to track in watch-only mode</Trans>
+        </Typography>
+        <WatchOnlyModeTooltip />
+      </Box>
+      <form onSubmit={handleSubmit}>
+        <InputBase
+          sx={(theme) => ({
+            py: 1,
+            px: 3,
+            border: `1px solid ${theme.palette.divider}`,
+            borderRadius: '6px',
+            mb: 1,
+            overflow: 'show',
+            fontSize: sm ? '16px' : '14px',
+          })}
+          placeholder="Enter ethereum address or ENS name"
+          fullWidth
+          autoFocus
+          value={inputMockWalletAddress}
+          onChange={(e) => setInputMockWalletAddress(e.target.value)}
+          inputProps={{
+            'aria-label': 'watch mode only address',
+          }}
+        />
+        <Button
+          type="submit"
+          variant="outlined"
+          sx={{
+            display: 'flex',
+            flexDirection: 'row',
+            justifyContent: 'center',
+            mb: '8px',
+          }}
+          size="large"
+          fullWidth
+          disabled={
+            !utils.isAddress(inputMockWalletAddress) && inputMockWalletAddress.slice(-4) !== '.eth'
+          }
+          aria-label="watch mode only address"
+        >
+          Watch address
+        </Button>
+      </form>
+      {validAddressError && (
+        <Typography variant="helperText" color="error.main">
+          <Trans>Please enter a valid wallet address.</Trans>
+        </Typography>
+      )}
       <Typography variant="description" sx={{ mt: '22px', mb: '30px', alignSelf: 'center' }}>
         <Trans>
           Need help connecting a wallet?{' '}

src/components/infoTooltips/WatchOnlyModeTooltip.tsx

@@ -0,0 +1,14 @@
+import { Trans } from '@lingui/macro';
+
+import { TextWithTooltip, TextWithTooltipProps } from '../TextWithTooltip';
+
+export const WatchOnlyModeTooltip = ({ ...rest }: TextWithTooltipProps) => {
+  return (
+    <TextWithTooltip {...rest}>
+      <Trans>
+        Watch-only mode allows to see address positions in Aave, but you won&apos;t be able to
+        perform transactions.
+      </Trans>
+    </TextWithTooltip>
+  );
+};

src/components/transactions/ClaimRewards/ClaimRewardsModalContent.tsx

@@ -33,7 +33,7 @@ export const ClaimRewardsModalContent = () => {
   const { gasLimit, mainTxState: claimRewardsTxState, txError } = useModalContext();
   const { user, reserves } = useAppDataContext();
   const { currentChainId, currentMarketData, currentMarket } = useProtocolDataContext();
-  const { chainId: connectedChainId } = useWeb3Context();
+  const { chainId: connectedChainId, watchModeOnlyAddress } = useWeb3Context();
   const [claimableUsd, setClaimableUsd] = useState('0');
   const [selectedRewardSymbol, setSelectedRewardSymbol] = useState<string>('all');
   const [rewards, setRewards] = useState<Reward[]>([]);
@@ -140,7 +140,7 @@ export const ClaimRewardsModalContent = () => {
   return (
     <>
       <TxModalTitle title="Claim rewards" />
-      {isWrongNetwork && (
+      {isWrongNetwork && !watchModeOnlyAddress && (
         <ChangeNetworkWarning networkName={networkConfig.name} chainId={currentChainId} />
       )}
 

src/components/transactions/Emode/EmodeModalContent.tsx

@@ -72,7 +72,7 @@ export const EmodeModalContent = ({ mode }: EmodeModalContentProps) => {
     userReserves,
   } = useAppDataContext();
   const { currentChainId } = useProtocolDataContext();
-  const { chainId: connectedChainId } = useWeb3Context();
+  const { chainId: connectedChainId, watchModeOnlyAddress } = useWeb3Context();
   const currentTimestamp = useCurrentTimestamp(1);
   const { gasLimit, mainTxState: emodeTxState, txError } = useModalContext();
 
@@ -178,7 +178,7 @@ export const EmodeModalContent = ({ mode }: EmodeModalContentProps) => {
   return (
     <>
       <TxModalTitle title={`${mode} E-Mode`} />
-      {isWrongNetwork && (
+      {isWrongNetwork && !watchModeOnlyAddress && (
         <ChangeNetworkWarning networkName={networkConfig.name} chainId={currentChainId} />
       )}
 

src/components/transactions/FlowCommons/ModalWrapper.tsx

@@ -46,7 +46,7 @@ export const ModalWrapper: React.FC<{
   requiredPermission,
   keepWrappedSymbol,
 }) => {
-  const { chainId: connectedChainId } = useWeb3Context();
+  const { chainId: connectedChainId, watchModeOnlyAddress } = useWeb3Context();
   const { walletBalances } = useWalletBalances();
   const {
     currentChainId: marketChainId,
@@ -95,7 +95,7 @@ export const ModalWrapper: React.FC<{
       {!mainTxState.success && (
         <TxModalTitle title={title} symbol={hideTitleSymbol ? undefined : symbol} />
       )}
-      {isWrongNetwork && (
+      {isWrongNetwork && !watchModeOnlyAddress && (
         <ChangeNetworkWarning
           networkName={getNetworkConfig(requiredChainId).name}
           chainId={requiredChainId}

src/components/transactions/GovDelegation/GovDelegationModalContent.tsx

@@ -35,7 +35,7 @@ export enum ErrorType {
 }
 
 export const GovDelegationModalContent = () => {
-  const { chainId: connectedChainId } = useWeb3Context();
+  const { chainId: connectedChainId, watchModeOnlyAddress } = useWeb3Context();
   const {
     daveTokens: { aave, stkAave },
   } = useAaveTokensProviderContext();
@@ -101,7 +101,7 @@ export const GovDelegationModalContent = () => {
   return (
     <>
       <TxModalTitle title="Delegate your power" />
-      {isWrongNetwork && (
+      {isWrongNetwork && !watchModeOnlyAddress && (
         <ChangeNetworkWarning networkName={networkConfig.name} chainId={govChain} />
       )}
       <Typography variant="description">

src/components/transactions/GovVote/GovVoteModalContent.tsx

@@ -36,7 +36,7 @@ export const GovVoteModalContent = ({
   support,
   power: votingPower,
 }: GovVoteModalContentProps) => {
-  const { chainId: connectedChainId } = useWeb3Context();
+  const { chainId: connectedChainId, watchModeOnlyAddress } = useWeb3Context();
   const { gasLimit, mainTxState: txState, txError } = useModalContext();
   const { currentNetworkConfig, currentChainId } = useProtocolDataContext();
 
@@ -78,7 +78,7 @@ export const GovVoteModalContent = ({
   return (
     <>
       <TxModalTitle title="Governance vote" />
-      {isWrongNetwork && (
+      {isWrongNetwork && !watchModeOnlyAddress && (
         <ChangeNetworkWarning networkName={networkConfig.name} chainId={govChain} />
       )}
       {blockingError !== undefined && (

src/components/transactions/Stake/StakeModalContent.tsx

@@ -33,7 +33,7 @@ type StakingType = 'aave' | 'bpt';
 export const StakeModalContent = ({ stakeAssetName, icon }: StakeProps) => {
   const data = useStakeData();
   const stakeData = data.stakeGeneralResult?.stakeGeneralUIData[stakeAssetName as StakingType];
-  const { chainId: connectedChainId } = useWeb3Context();
+  const { chainId: connectedChainId, watchModeOnlyAddress } = useWeb3Context();
   const { gasLimit, mainTxState: txState, txError } = useModalContext();
   const { currentNetworkConfig, currentChainId } = useProtocolDataContext();
 
@@ -97,7 +97,7 @@ export const StakeModalContent = ({ stakeAssetName, icon }: StakeProps) => {
   return (
     <>
       <TxModalTitle title="Stake" symbol={icon} />
-      {isWrongNetwork && (
+      {isWrongNetwork && !watchModeOnlyAddress && (
         <ChangeNetworkWarning networkName={networkConfig.name} chainId={stakingChain} />
       )}
 

src/components/transactions/StakeCooldown/StakeCooldownModalContent.tsx

@@ -34,7 +34,7 @@ type StakingType = 'aave' | 'bpt';
 
 export const StakeCooldownModalContent = ({ stakeAssetName }: StakeCooldownProps) => {
   const { stakeUserResult, stakeGeneralResult } = useStakeData();
-  const { chainId: connectedChainId } = useWeb3Context();
+  const { chainId: connectedChainId, watchModeOnlyAddress } = useWeb3Context();
   const { gasLimit, mainTxState: txState, txError } = useModalContext();
   const { currentNetworkConfig, currentChainId } = useProtocolDataContext();
 
@@ -108,7 +108,7 @@ export const StakeCooldownModalContent = ({ stakeAssetName }: StakeCooldownProps
   return (
     <>
       <TxModalTitle title="Cooldown to unstake" />
-      {isWrongNetwork && (
+      {isWrongNetwork && !watchModeOnlyAddress && (
         <ChangeNetworkWarning networkName={networkConfig.name} chainId={stakingChain} />
       )}
       <Typography variant="description" sx={{ mb: 6 }}>

src/components/transactions/StakeRewardClaim/StakeRewardClaimModalContent.tsx

@@ -30,7 +30,7 @@ type StakingType = 'aave' | 'bpt';
 export const StakeRewardClaimModalContent = ({ stakeAssetName }: StakeRewardClaimProps) => {
   const data = useStakeData();
   const stakeData = data.stakeGeneralResult?.stakeGeneralUIData[stakeAssetName as StakingType];
-  const { chainId: connectedChainId } = useWeb3Context();
+  const { chainId: connectedChainId, watchModeOnlyAddress } = useWeb3Context();
   const { gasLimit, mainTxState: txState, txError } = useModalContext();
   const { currentNetworkConfig, currentChainId } = useProtocolDataContext();
 
@@ -89,7 +89,7 @@ export const StakeRewardClaimModalContent = ({ stakeAssetName }: StakeRewardClai
   return (
     <>
       <TxModalTitle title="Claim" symbol={rewardsSymbol} />
-      {isWrongNetwork && (
+      {isWrongNetwork && !watchModeOnlyAddress && (
         <ChangeNetworkWarning networkName={networkConfig.name} chainId={stakingChain} />
       )}
       {blockingError !== undefined && (

src/components/transactions/TxActionsWrapper.tsx

@@ -1,8 +1,9 @@
 import { Trans } from '@lingui/macro';
-import { Box, BoxProps, Button, CircularProgress } from '@mui/material';
+import { Box, BoxProps, Button, CircularProgress, Typography } from '@mui/material';
 import isEmpty from 'lodash/isEmpty';
 import { ReactNode } from 'react';
 import { TxStateType, useModalContext } from 'src/hooks/useModal';
+import { useWeb3Context } from 'src/libs/hooks/useWeb3Context';
 import { TxAction } from 'src/ui-config/errorMapping';
 
 import { LeftHelperText } from './FlowCommons/LeftHelperText';
@@ -42,6 +43,7 @@ export const TxActionsWrapper = ({
   ...rest
 }: TxActionsWrapperProps) => {
   const { txError, retryWithApproval } = useModalContext();
+  const { watchModeOnlyAddress } = useWeb3Context();
 
   const hasApprovalError =
     requiresApproval && txError && txError.txAction === TxAction.APPROVAL && txError.actionBlocked;
@@ -87,14 +89,14 @@ export const TxActionsWrapper = ({
 
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', mt: 12, ...sx }} {...rest}>
-      {requiresApproval && (
+      {requiresApproval && !watchModeOnlyAddress && (
         <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 3 }}>
           <LeftHelperText amount={amount} approvalHash={approvalTxState?.txHash} />
           <RightHelperText approvalHash={approvalTxState?.txHash} />
         </Box>
       )}
 
-      {approvalParams && (
+      {approvalParams && !watchModeOnlyAddress && (
         <Button
           variant="contained"
           disabled={approvalParams.disabled || blocked}
@@ -112,7 +114,7 @@ export const TxActionsWrapper = ({
 
       <Button
         variant="contained"
-        disabled={disabled || blocked}
+        disabled={disabled || blocked || watchModeOnlyAddress !== undefined}
         onClick={handleClick}
         size="large"
         sx={{ minHeight: '44px', ...(approvalParams ? { mt: 2 } : {}) }}
@@ -121,6 +123,11 @@ export const TxActionsWrapper = ({
         {loading && <CircularProgress color="inherit" size="16px" sx={{ mr: 2 }} />}
         {content}
       </Button>
+      {watchModeOnlyAddress && (
+        <Typography variant="helperText" color="warning.main" sx={{ textAlign: 'center', mt: 2 }}>
+          <Trans>Watch-only mode. Connect to a wallet to perform transactions.</Trans>
+        </Typography>
+      )}
     </Box>
   );
 };

src/components/transactions/UnStake/UnStakeModalContent.tsx

@@ -33,7 +33,7 @@ type StakingType = 'aave' | 'bpt';
 export const UnStakeModalContent = ({ stakeAssetName, icon }: UnStakeProps) => {
   const data = useStakeData();
   const stakeData = data.stakeGeneralResult?.stakeGeneralUIData[stakeAssetName as StakingType];
-  const { chainId: connectedChainId } = useWeb3Context();
+  const { chainId: connectedChainId, watchModeOnlyAddress } = useWeb3Context();
   const { gasLimit, mainTxState: txState, txError } = useModalContext();
   const { currentNetworkConfig, currentChainId } = useProtocolDataContext();
 
@@ -97,7 +97,7 @@ export const UnStakeModalContent = ({ stakeAssetName, icon }: UnStakeProps) => {
   return (
     <>
       <TxModalTitle title="Unstake" symbol={icon} />
-      {isWrongNetwork && (
+      {isWrongNetwork && !watchModeOnlyAddress && (
         <ChangeNetworkWarning networkName={networkConfig.name} chainId={stakingChain} />
       )}
       <AssetInput

src/hooks/useWalletModal.tsx

@@ -11,15 +11,15 @@ export const WalletModalContext = createContext<WalletModalContextType>(
 );
 
 export const WalletModalContextProvider: React.FC = ({ children }) => {
-  const { connected } = useWeb3Context();
+  const { connected, watchModeOnlyAddress } = useWeb3Context();
 
   const [isWalletModalOpen, setWalletModalOpen] = useState(false);
 
   useEffect(() => {
-    if (connected) {
+    if (connected || watchModeOnlyAddress) {
       setWalletModalOpen(false);
     }
-  }, [connected]);
+  }, [connected, watchModeOnlyAddress]);
 
   return (
     <WalletModalContext.Provider