1  import { API_ETH_MOCK_ADDRESS } from '@aave/contract-helpers';
  2  import React from 'react';
  3  import { ReactElement } from 'react-markdown/lib/react-markdown';
  4  import {
  5    ComputedReserveData,
  6    ComputedUserReserveData,
  7    useAppDataContext,
  8  } from 'src/hooks/app-data-provider/useAppDataProvider';
  9  import { useWalletBalances } from 'src/hooks/app-data-provider/useWalletBalances';
 10  import { AssetCapsProvider } from 'src/hooks/useAssetCaps';
 11  import { useIsWrongNetwork } from 'src/hooks/useIsWrongNetwork';
 12  import { useModalContext } from 'src/hooks/useModal';
 13  import { useWeb3Context } from 'src/libs/hooks/useWeb3Context';
 14  import { useRootStore } from 'src/store/root';
 15  import { getNetworkConfig } from 'src/utils/marketsAndNetworksConfig';
 16  import { GENERAL } from 'src/utils/mixPanelEvents';
 17  
 18  import { TxModalTitle } from '../FlowCommons/TxModalTitle';
 19  import { ChangeNetworkWarning } from '../Warnings/ChangeNetworkWarning';
 20  import { TxErrorView } from './Error';
 21  
 22  export interface ModalWrapperProps {
 23    underlyingAsset: string;
 24    poolReserve: ComputedReserveData;
 25    userReserve: ComputedUserReserveData;
 26    symbol: string;
 27    tokenBalance: string;
 28    nativeBalance: string;
 29    isWrongNetwork: boolean;
 30    action?: string;
 31  }
 32  
 33  export const ModalWrapper: React.FC<{
 34    underlyingAsset: string;
 35    title: ReactElement;
 36    requiredChainId?: number;
 37    // if true wETH will stay wETH otherwise wETH will be returned as ETH
 38    keepWrappedSymbol?: boolean;
 39    hideTitleSymbol?: boolean;
 40    children: (props: ModalWrapperProps) => React.ReactNode;
 41    action?: string;
 42  }> = ({
 43    hideTitleSymbol,
 44    underlyingAsset,
 45    children,
 46    requiredChainId: _requiredChainId,
 47    title,
 48    keepWrappedSymbol,
 49  }) => {
 50    const { readOnlyModeAddress } = useWeb3Context();
 51    const currentMarketData = useRootStore((store) => store.currentMarketData);
 52    const currentNetworkConfig = useRootStore((store) => store.currentNetworkConfig);
 53    const { walletBalances } = useWalletBalances(currentMarketData);
 54    const { user, reserves } = useAppDataContext();
 55    const { txError, mainTxState } = useModalContext();
 56  
 57    const { isWrongNetwork, requiredChainId } = useIsWrongNetwork(_requiredChainId);
 58  
 59    if (txError && txError.blocking) {
 60      return <TxErrorView txError={txError} />;
 61    }
 62  
 63    const poolReserve = reserves.find((reserve) => {
 64      if (underlyingAsset.toLowerCase() === API_ETH_MOCK_ADDRESS.toLowerCase())
 65        return reserve.isWrappedBaseAsset;
 66      return underlyingAsset === reserve.underlyingAsset;
 67    }) as ComputedReserveData;
 68  
 69    const userReserve = user?.userReservesData.find((userReserve) => {
 70      if (underlyingAsset.toLowerCase() === API_ETH_MOCK_ADDRESS.toLowerCase())
 71        return userReserve.reserve.isWrappedBaseAsset;
 72      return underlyingAsset === userReserve.underlyingAsset;
 73    }) as ComputedUserReserveData;
 74  
 75    const symbol =
 76      poolReserve.isWrappedBaseAsset && !keepWrappedSymbol
 77        ? currentNetworkConfig.baseAssetSymbol
 78        : poolReserve.symbol;
 79  
 80    return (
 81      <AssetCapsProvider asset={poolReserve}>
 82        {!mainTxState.success && (
 83          <TxModalTitle title={title} symbol={hideTitleSymbol ? undefined : symbol} />
 84        )}
 85        {isWrongNetwork && !readOnlyModeAddress && (
 86          <ChangeNetworkWarning
 87            networkName={getNetworkConfig(requiredChainId).name}
 88            chainId={requiredChainId}
 89            event={{
 90              eventName: GENERAL.SWITCH_NETWORK,
 91              eventParams: {
 92                asset: underlyingAsset,
 93              },
 94            }}
 95          />
 96        )}
 97        {children({
 98          isWrongNetwork,
 99          nativeBalance: walletBalances[API_ETH_MOCK_ADDRESS.toLowerCase()]?.amount || '0',
100          tokenBalance: walletBalances[poolReserve.underlyingAsset.toLowerCase()]?.amount || '0',
101          poolReserve,
102          symbol,
103          underlyingAsset,
104          userReserve,
105        })}
106      </AssetCapsProvider>
107    );
108  };