fix: dynamically load modals

.github/actions/dev-ipfs-pin/action.yml

@@ -92,4 +92,4 @@ runs:
       run: |
         ssh -o StrictHostKeyChecking=no \
         -p \${{ inputs.IPFS_SERVER_PORT }} \
-        -i ./key ipfs@\${{ inputs.IPFS_SERVER }} "rm -rf ./${{ inputs.BUILD_PATH }}/ app.tar.gz"
+        -i ./key ipfs@\${{ inputs.IPFS_SERVER }} "rm -rf ./${{ inputs.BUILD_PATH }}/ app.tar.gz"

.github/actions/production-ipfs-pin/action.yml

@@ -97,4 +97,4 @@ runs:
       run: |
         ssh -o StrictHostKeyChecking=no \
         -p \${{ inputs.IPFS_SERVER_PORT }} \
-        -i ./key ipfs@\${{ inputs.IPFS_SERVER }} "rm -rf ./${{ inputs.BUILD_PATH }}/ app.tar.gz"
+        -i ./key ipfs@\${{ inputs.IPFS_SERVER }} "rm -rf ./${{ inputs.BUILD_PATH }}/ app.tar.gz"

.github/workflows/build-test-deploy-dev.yml

@@ -70,6 +70,7 @@ jobs:
           - avalanche
           - optimism
           - ethereum
+          - base
           - gho
     steps:
       - uses: actions/checkout@2541b1294d2704b0964813337f33b291d3f8596b # v3.0.2

cypress/configs/v3-markets/base-v3-smoke.config.ts

@@ -7,6 +7,10 @@ const folder = `./cypress/e2e/1-v3-markets/6-base-v3-market/`;
 export default defineConfig({
   ...defaultConfig,
   e2e: {
-    specPattern: [folder + '0-assets/weth.base-v3.cy.ts', folder + '0-assets/usdbc.base-v3.cy.ts'],
+    specPattern: [
+      folder + '0-assets/weth.base-v3.cy.ts',
+      folder + '0-assets/usdbc.base-v3.cy.ts',
+      folder + 'swap.base-v3.cy.ts',
+    ],
   },
 });

cypress/e2e/1-v3-markets/3-polygon-v3-market/switch.polygon-v3.cy.ts

@@ -36,7 +36,6 @@ const testData = {
     ],
   },
 };
-
 describe.skip('SWITCH BORROWED, POLYGON V3 MARKET, INTEGRATION SPEC', () => {
   const skipTestState = skipState(false);
   configEnvWithTenderlyPolygonFork({ market: 'fork_proto_polygon_v3', v3: true });

package.json

@@ -52,7 +52,6 @@
     "@visx/gradient": "^2.10.0",
     "@visx/grid": "^2.12.2",
     "@visx/legend": "^2.10.0",
-    "@visx/mock-data": "^2.15.1",
     "@visx/responsive": "^2.10.0",
     "@visx/scale": "^2.2.2",
     "@visx/shape": "^2.12.2",
@@ -70,7 +69,6 @@
     "d3-array": "^3.2.0",
     "d3-time-format": "^4.1.0",
     "dayjs": "^1.11.5",
-    "eth-provider": "^0.10.0",
     "ethers": "^5.5.4",
     "fuse.js": "^6.6.2",
     "gray-matter": "^4.0.3",

pages/_app.page.tsx

@@ -8,24 +8,13 @@ import { Web3ReactProvider } from '@web3-react/core';
 import { providers } from 'ethers';
 import { NextPage } from 'next';
 import { AppProps } from 'next/app';
+import dynamic from 'next/dynamic';
 import Head from 'next/head';
 import { ReactNode, useEffect } from 'react';
 import { AddressBlocked } from 'src/components/AddressBlocked';
 import { Meta } from 'src/components/Meta';
 import { TransactionEventHandler } from 'src/components/TransactionEventHandler';
-import { BorrowModal } from 'src/components/transactions/Borrow/BorrowModal';
-import { ClaimRewardsModal } from 'src/components/transactions/ClaimRewards/ClaimRewardsModal';
-import { CollateralChangeModal } from 'src/components/transactions/CollateralChange/CollateralChangeModal';
-import { DebtSwitchModal } from 'src/components/transactions/DebtSwitch/DebtSwitchModal';
-import { EmodeModal } from 'src/components/transactions/Emode/EmodeModal';
-import { FaucetModal } from 'src/components/transactions/Faucet/FaucetModal';
 import { GasStationProvider } from 'src/components/transactions/GasStation/GasStationProvider';
-import { MigrateV3Modal } from 'src/components/transactions/MigrateV3/MigrateV3Modal';
-import { RateSwitchModal } from 'src/components/transactions/RateSwitch/RateSwitchModal';
-import { RepayModal } from 'src/components/transactions/Repay/RepayModal';
-import { SupplyModal } from 'src/components/transactions/Supply/SupplyModal';
-import { SwapModal } from 'src/components/transactions/Swap/SwapModal';
-import { WithdrawModal } from 'src/components/transactions/Withdraw/WithdrawModal';
 import { BackgroundDataProvider } from 'src/hooks/app-data-provider/BackgroundDataProvider';
 import { AppDataProvider } from 'src/hooks/app-data-provider/useAppDataProvider';
 import { ModalContextProvider } from 'src/hooks/useModal';
@@ -38,6 +27,55 @@ import createEmotionCache from '../src/createEmotionCache';
 import { AppGlobalStyles } from '../src/layouts/AppGlobalStyles';
 import { LanguageProvider } from '../src/libs/LanguageProvider';
 
+const BorrowModal = dynamic(() =>
+  import('src/components/transactions/Borrow/BorrowModal').then((module) => module.BorrowModal)
+);
+const ClaimRewardsModal = dynamic(() =>
+  import('src/components/transactions/ClaimRewards/ClaimRewardsModal').then(
+    (module) => module.ClaimRewardsModal
+  )
+);
+const CollateralChangeModal = dynamic(() =>
+  import('src/components/transactions/CollateralChange/CollateralChangeModal').then(
+    (module) => module.CollateralChangeModal
+  )
+);
+const DebtSwitchModal = dynamic(() =>
+  import('src/components/transactions/DebtSwitch/DebtSwitchModal').then(
+    (module) => module.DebtSwitchModal
+  )
+);
+const EmodeModal = dynamic(() =>
+  import('src/components/transactions/Emode/EmodeModal').then((module) => module.EmodeModal)
+);
+const FaucetModal = dynamic(() =>
+  import('src/components/transactions/Faucet/FaucetModal').then((module) => module.FaucetModal)
+);
+const MigrateV3Modal = dynamic(() =>
+  import('src/components/transactions/MigrateV3/MigrateV3Modal').then(
+    (module) => module.MigrateV3Modal
+  )
+);
+const RateSwitchModal = dynamic(() =>
+  import('src/components/transactions/RateSwitch/RateSwitchModal').then(
+    (module) => module.RateSwitchModal
+  )
+);
+const RepayModal = dynamic(() =>
+  import('src/components/transactions/Repay/RepayModal').then((module) => module.RepayModal)
+);
+const SupplyModal = dynamic(() =>
+  import('src/components/transactions/Supply/SupplyModal').then((module) => module.SupplyModal)
+);
+const SwapModal = dynamic(() =>
+  import('src/components/transactions/Swap/SwapModal').then((module) => module.SwapModal)
+);
+const WithdrawModal = dynamic(() =>
+  import('src/components/transactions/Withdraw/WithdrawModal').then(
+    (module) => module.WithdrawModal
+  )
+);
+
 // Client-side cache, shared for the whole session of the user in the browser.
 const clientSideEmotionCache = createEmotionCache();
 

pages/faucet.page.tsx

@@ -1,11 +1,13 @@
-import * as React from 'react';
-import { FaucetModal } from 'src/components/transactions/Faucet/FaucetModal';
+import dynamic from 'next/dynamic';
 import { MainLayout } from 'src/layouts/MainLayout';
 import FaucetAssetsList from 'src/modules/faucet/FaucetAssetsList';
 import { FaucetTopPanel } from 'src/modules/faucet/FaucetTopPanel';
 
 import { ContentContainer } from '../src/components/ContentContainer';
 
+const FaucetModal = dynamic(() =>
+  import('../src/components/transactions/Faucet/FaucetModal').then((module) => module.FaucetModal)
+);
 export default function Faucet() {
   return (
     <>

pages/governance/index.governance.tsx

@@ -1,9 +1,9 @@
 import { Trans } from '@lingui/macro';
 import { Grid, Typography, useMediaQuery, useTheme } from '@mui/material';
+import dynamic from 'next/dynamic';
 import { useEffect, useState } from 'react';
 import StyledToggleButton from 'src/components/StyledToggleButton';
 import StyledToggleButtonGroup from 'src/components/StyledToggleButtonGroup';
-import { GovDelegationModal } from 'src/components/transactions/GovDelegation/GovDelegationModal';
 import { MainLayout } from 'src/layouts/MainLayout';
 import { GovernanceTopPanel } from 'src/modules/governance/GovernanceTopPanel';
 import { ProposalsList } from 'src/modules/governance/ProposalsList';
@@ -14,6 +14,12 @@ import { useRootStore } from 'src/store/root';
 
 import { ContentContainer } from '../../src/components/ContentContainer';
 
+const GovDelegationModal = dynamic(() =>
+  import('../../src/components/transactions/GovDelegation/GovDelegationModal').then(
+    (module) => module.GovDelegationModal
+  )
+);
+
 export const getStaticProps = async () => {
   const IpfsFetcher = new Ipfs();
   const ProposalFetcher = new Proposal();

pages/governance/ipfs-preview.governance.tsx

@@ -1,13 +1,17 @@
+import dynamic from 'next/dynamic';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
-import { GovVoteModal } from 'src/components/transactions/GovVote/GovVoteModal';
 import { MainLayout } from 'src/layouts/MainLayout';
 import { getProposalMetadata } from 'src/modules/governance/utils/getProposalMetadata';
 import { IpfsType } from 'src/static-build/ipfs';
 import { governanceConfig } from 'src/ui-config/governanceConfig';
 
 import ProposalPage from './proposal/[proposalId].governance';
 
+const GovVoteModal = dynamic(() =>
+  import('src/components/transactions/GovVote/GovVoteModal').then((module) => module.GovVoteModal)
+);
+
 export default function IpfsPreview() {
   const router = useRouter();
   const ipfsHash = router.query.ipfsHash as string;

pages/governance/proposal/[proposalId].governance.tsx

@@ -21,6 +21,7 @@ import {
   useTheme,
 } from '@mui/material';
 import dayjs from 'dayjs';
+import dynamic from 'next/dynamic';
 import { useEffect, useState } from 'react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
@@ -30,7 +31,6 @@ import { FormattedNumber } from 'src/components/primitives/FormattedNumber';
 import { Link } from 'src/components/primitives/Link';
 import { Row } from 'src/components/primitives/Row';
 import { Warning } from 'src/components/primitives/Warning';
-import { GovVoteModal } from 'src/components/transactions/GovVote/GovVoteModal';
 import { usePolling } from 'src/hooks/usePolling';
 import { MainLayout } from 'src/layouts/MainLayout';
 import { FormattedProposalTime } from 'src/modules/governance/FormattedProposalTime';
@@ -54,6 +54,12 @@ import { GENERAL } from 'src/utils/mixPanelEvents';
 import { ContentContainer } from '../../../src/components/ContentContainer';
 import { LensIcon } from '../../../src/components/icons/LensIcon';
 
+const GovVoteModal = dynamic(() =>
+  import('../../../src/components/transactions/GovVote/GovVoteModal').then(
+    (module) => module.GovVoteModal
+  )
+);
+
 export async function getStaticPaths() {
   const ProposalFetcher = new Proposal();
   const paths = [...Array(ProposalFetcher.count()).keys()].map((id) => ({

pages/governance/proposal/index.governance.tsx

@@ -1,6 +1,6 @@
+import dynamic from 'next/dynamic';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
-import { GovVoteModal } from 'src/components/transactions/GovVote/GovVoteModal';
 import { MainLayout } from 'src/layouts/MainLayout';
 import { enhanceProposalWithTimes } from 'src/modules/governance/utils/formatProposal';
 import { getProposalMetadata } from 'src/modules/governance/utils/getProposalMetadata';
@@ -11,6 +11,10 @@ import { governanceConfig } from 'src/ui-config/governanceConfig';
 
 import ProposalPage from './[proposalId].governance';
 
+const GovVoteModal = dynamic(() =>
+  import('src/components/transactions/GovVote/GovVoteModal').then((module) => module.GovVoteModal)
+);
+
 export default function DynamicProposal() {
   const router = useRouter();
   const id = Number(router.query.proposalId);

pages/staking.staking.tsx

@@ -2,16 +2,12 @@ import { Trans } from '@lingui/macro';
 import { Box, Grid, Typography } from '@mui/material';
 import { BigNumber } from 'ethers/lib/ethers';
 import { formatEther, formatUnits } from 'ethers/lib/utils';
+import dynamic from 'next/dynamic';
 import { useEffect, useState } from 'react';
 import { ConnectWalletPaperStaking } from 'src/components/ConnectWalletPaperStaking';
 import { ContentContainer } from 'src/components/ContentContainer';
 import StyledToggleButton from 'src/components/StyledToggleButton';
 import StyledToggleButtonGroup from 'src/components/StyledToggleButtonGroup';
-import { StakeModal } from 'src/components/transactions/Stake/StakeModal';
-import { StakeCooldownModal } from 'src/components/transactions/StakeCooldown/StakeCooldownModal';
-import { StakeRewardClaimModal } from 'src/components/transactions/StakeRewardClaim/StakeRewardClaimModal';
-import { StakeRewardClaimRestakeModal } from 'src/components/transactions/StakeRewardClaimRestake/StakeRewardClaimRestakeModal';
-import { UnStakeModal } from 'src/components/transactions/UnStake/UnStakeModal';
 import { useGeneralStakeUiData } from 'src/hooks/stake/useGeneralStakeUiData';
 import { useUserStakeUiData } from 'src/hooks/stake/useUserStakeUiData';
 import { useModalContext } from 'src/hooks/useModal';
@@ -25,6 +21,30 @@ import { ENABLE_TESTNET, getNetworkConfig, STAGING_ENV } from 'src/utils/markets
 
 import { useWeb3Context } from '../src/libs/hooks/useWeb3Context';
 
+const StakeModal = dynamic(() =>
+  import('../src/components/transactions/Stake/StakeModal').then((module) => module.StakeModal)
+);
+const StakeCooldownModal = dynamic(() =>
+  import('../src/components/transactions/StakeCooldown/StakeCooldownModal').then(
+    (module) => module.StakeCooldownModal
+  )
+);
+const StakeRewardClaimModal = dynamic(() =>
+  import('../src/components/transactions/StakeRewardClaim/StakeRewardClaimModal').then(
+    (module) => module.StakeRewardClaimModal
+  )
+);
+const StakeRewardClaimRestakeModal = dynamic(() =>
+  import(
+    '../src/components/transactions/StakeRewardClaimRestake/StakeRewardClaimRestakeModal'
+  ).then((module) => module.StakeRewardClaimRestakeModal)
+);
+const UnStakeModal = dynamic(() =>
+  import('../src/components/transactions/UnStake/UnStakeModal').then(
+    (module) => module.UnStakeModal
+  )
+);
+
 export default function Staking() {
   const { currentAccount, loading, chainId } = useWeb3Context();
 

pages/v3-migration.page.tsx

@@ -1,9 +1,9 @@
 import { Trans } from '@lingui/macro';
 import { Box, Divider, useMediaQuery, useTheme } from '@mui/material';
+import dynamic from 'next/dynamic';
 import { useCallback, useEffect } from 'react';
 import { ConnectWalletPaper } from 'src/components/ConnectWalletPaper';
 import { ContentContainer } from 'src/components/ContentContainer';
-import { MigrateV3Modal } from 'src/components/transactions/MigrateV3/MigrateV3Modal';
 import { useAppDataContext } from 'src/hooks/app-data-provider/useAppDataProvider';
 import { useCurrentTimestamp } from 'src/hooks/useCurrentTimestamp';
 import { usePermissions } from 'src/hooks/usePermissions';
@@ -25,6 +25,12 @@ import {
   selectV3UserSummaryAfterMigration,
 } from 'src/store/v3MigrationSelectors';
 
+const MigrateV3Modal = dynamic(() =>
+  import('src/components/transactions/MigrateV3/MigrateV3Modal').then(
+    (module) => module.MigrateV3Modal
+  )
+);
+
 export default function V3Migration() {
   const { loading } = useAppDataContext();
   const { currentAccount, loading: web3Loading } = useWeb3Context();

src/components/WalletConnection/ConnectWalletButton.tsx

@@ -1,10 +1,11 @@
 import { Trans } from '@lingui/macro';
 import { Button } from '@mui/material';
+import dynamic from 'next/dynamic';
 import { useWalletModalContext } from 'src/hooks/useWalletModal';
 import { useRootStore } from 'src/store/root';
 import { AUTH } from 'src/utils/mixPanelEvents';
 
-import { WalletModal } from './WalletModal';
+const WalletModal = dynamic(() => import('./WalletModal').then((module) => module.WalletModal));
 
 export interface ConnectWalletProps {
   funnel?: string;

src/layouts/AppHeader.tsx

@@ -135,7 +135,7 @@ export function AppHeader() {
           }}
           onClick={() => setMobileMenuOpen(false)}
         >
-          <img src={uiConfig.appLogo} alt="An SVG of an eye" height={20} />
+          <img src={uiConfig.appLogo} alt="AAVE" width={72} height={20} />
         </Box>
         <Box sx={{ mr: sm ? 1 : 3 }}>
           {ENABLE_TESTNET && (