Feat: set mock wallet address via UI

src/components/WalletConnection/WalletSelector.tsx

@@ -1,8 +1,11 @@
 import { Trans } from '@lingui/macro';
-import { Alert, Box, Button, Link, Typography } from '@mui/material';
+import { Alert, Box, Button, InputBase, Link, Typography } 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';
 
@@ -95,7 +98,9 @@ export enum ErrorType {
 }
 
 export const WalletSelector = () => {
- const { error } = useWeb3Context();
+ const { error, setWatchModeOnlyAddress } = useWeb3Context();
+ const [inputMockWalletAddress, setInputMockWalletAddress] = useState('');
+ const [validAddressError, setValidAddressError] = useState<boolean>(false);
 
  let blockingError: ErrorType | undefined = undefined;
  if (error) {
@@ -125,6 +130,12 @@ export const WalletSelector = () => {
  }
  };
 
+ const handleWatchAddress = (inputMockWalletAddress: string): void => {
+ if (validAddressError) setValidAddressError(false);
+ if (!utils.isAddress(inputMockWalletAddress)) return setValidAddressError(true);
+ setWatchModeOnlyAddress(inputMockWalletAddress);
+ };
+
  return (
  <Box sx={{ display: 'flex', flexDirection: 'column' }}>
  <TxModalTitle title="Connect a wallet" />
@@ -150,6 +161,57 @@ 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>
+ <Box
+ sx={(theme) => ({
+ p: '8px 12px',
+ border: `1px solid ${theme.palette.divider}`,
+ borderRadius: '6px',
+ mb: 1,
+ })}
+ >
+ <InputBase
+ sx={{ flex: 1, overflow: 'show' }}
+ placeholder="Paste ethereum address"
+ fullWidth
+ autoFocus
+ value={inputMockWalletAddress}
+ onChange={(e) => {
+ setInputMockWalletAddress(e.target.value);
+ }}
+ inputProps={{
+ 'aria-label': 'amount input',
+ style: {
+ padding: 0,
+ },
+ }}
+ />
+ </Box>
+ <Button
+ variant="outlined"
+ sx={{
+ display: 'flex',
+ flexDirection: 'row',
+ justifyContent: 'center',
+ mb: '8px',
+ }}
+ size="large"
+ fullWidth
+ disabled={!utils.isAddress(inputMockWalletAddress)}
+ onClick={() => handleWatchAddress(inputMockWalletAddress)}
+ >
+ Watch address
+ </Button>
+ {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, mockAddress } = 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 && !mockAddress && (
  <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, mockAddress } = 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 && !mockAddress && (
  <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, mockAddress } = 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 && !mockAddress && (
  <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, mockAddress } = useWeb3Context();
  const {
  daveTokens: { aave, stkAave },
  } = useAaveTokensProviderContext();
@@ -101,7 +101,7 @@ export const GovDelegationModalContent = () => {
  return (
  <>
  <TxModalTitle title="Delegate your power" />
- {isWrongNetwork && (
+ {isWrongNetwork && !mockAddress && (
  <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, mockAddress } = 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 && !mockAddress && (
  <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, mockAddress } = 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 && !mockAddress && (
  <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, mockAddress } = 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 && !mockAddress && (
  <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, mockAddress } = 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 && !mockAddress && (
  <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 { mockAddress } = 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 && !mockAddress && (
  <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 3 }}>
  <LeftHelperText amount={amount} approvalHash={approvalTxState?.txHash} />
  <RightHelperText approvalHash={approvalTxState?.txHash} />
  </Box>
  )}
 
- {approvalParams && (
+ {approvalParams && !mockAddress && (
  <Button
  variant="contained"
  disabled={approvalParams.disabled || blocked}
@@ -112,7 +114,7 @@ export const TxActionsWrapper = ({
 
  <Button
  variant="contained"
- disabled={disabled || blocked}
+ disabled={disabled || blocked || mockAddress !== 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>
+ {mockAddress && (
+ <Typography variant="helperText" sx={{ color: 'warning.main', 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, mockAddress } = 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 && !mockAddress && (
  <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, mockAddress } = useWeb3Context();
 
  const [isWalletModalOpen, setWalletModalOpen] = useState(false);
 
  useEffect(() => {
- if (connected) {
+ if (connected || mockAddress) {
  setWalletModalOpen(false);
  }
- }, [connected]);
+ }, [connected, mockAddress]);
 
  return (
  <WalletModalContext.Provider

src/layouts/AppHeader.tsx

@@ -94,7 +94,7 @@ export function AppHeader() {
  top: 0,
  transition: theme.transitions.create('top'),
  zIndex: theme.zIndex.appBar,
- bgcolor: 'background.header',
+ bgcolor: '#1B2030',
  padding: {
  xs: mobileMenuOpen || walletWidgetOpen ? '8px 20px' : '8px 8px 8px 20px',
  xsm: '8px 20px',