_app.page.tsx
1 import '/public/fonts/inter/inter.css'; 2 import '/src/styles/variables.css'; 3 4 import { CacheProvider, EmotionCache } from '@emotion/react'; 5 import { NoSsr } from '@mui/material'; 6 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; 7 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; 8 import { ConnectKitProvider } from 'connectkit'; 9 import { NextPage } from 'next'; 10 import { AppProps } from 'next/app'; 11 import dynamic from 'next/dynamic'; 12 import Head from 'next/head'; 13 import { ReactNode, useEffect, useState } from 'react'; 14 import { AddressBlocked } from 'src/components/AddressBlocked'; 15 import { Meta } from 'src/components/Meta'; 16 import { TransactionEventHandler } from 'src/components/TransactionEventHandler'; 17 import { GasStationProvider } from 'src/components/transactions/GasStation/GasStationProvider'; 18 import { AppDataProvider } from 'src/hooks/app-data-provider/useAppDataProvider'; 19 import { ModalContextProvider } from 'src/hooks/useModal'; 20 import { Web3ContextProvider } from 'src/libs/web3-data-provider/Web3Provider'; 21 import { useRootStore } from 'src/store/root'; 22 import { SharedDependenciesProvider } from 'src/ui-config/SharedDependenciesProvider'; 23 import { wagmiConfig } from 'src/ui-config/wagmiConfig'; 24 import { WagmiProvider } from 'wagmi'; 25 import { useShallow } from 'zustand/shallow'; 26 27 import createEmotionCache from '../src/createEmotionCache'; 28 import { AppGlobalStyles } from '../src/layouts/AppGlobalStyles'; 29 import { LanguageProvider } from '../src/libs/LanguageProvider'; 30 31 const SwitchModal = dynamic(() => 32 import('src/components/transactions/Switch/SwitchModal').then((module) => module.SwitchModal) 33 ); 34 35 const BridgeModal = dynamic(() => 36 import('src/components/transactions/Bridge/BridgeModal').then((module) => module.BridgeModal) 37 ); 38 39 const BorrowModal = dynamic(() => 40 import('src/components/transactions/Borrow/BorrowModal').then((module) => module.BorrowModal) 41 ); 42 const ClaimRewardsModal = dynamic(() => 43 import('src/components/transactions/ClaimRewards/ClaimRewardsModal').then( 44 (module) => module.ClaimRewardsModal 45 ) 46 ); 47 const CollateralChangeModal = dynamic(() => 48 import('src/components/transactions/CollateralChange/CollateralChangeModal').then( 49 (module) => module.CollateralChangeModal 50 ) 51 ); 52 const DebtSwitchModal = dynamic(() => 53 import('src/components/transactions/DebtSwitch/DebtSwitchModal').then( 54 (module) => module.DebtSwitchModal 55 ) 56 ); 57 const EmodeModal = dynamic(() => 58 import('src/components/transactions/Emode/EmodeModal').then((module) => module.EmodeModal) 59 ); 60 const FaucetModal = dynamic(() => 61 import('src/components/transactions/Faucet/FaucetModal').then((module) => module.FaucetModal) 62 ); 63 const RepayModal = dynamic(() => 64 import('src/components/transactions/Repay/RepayModal').then((module) => module.RepayModal) 65 ); 66 const SupplyModal = dynamic(() => 67 import('src/components/transactions/Supply/SupplyModal').then((module) => module.SupplyModal) 68 ); 69 const SwapModal = dynamic(() => 70 import('src/components/transactions/Swap/SwapModal').then((module) => module.SwapModal) 71 ); 72 const WithdrawModal = dynamic(() => 73 import('src/components/transactions/Withdraw/WithdrawModal').then( 74 (module) => module.WithdrawModal 75 ) 76 ); 77 const StakingMigrateModal = dynamic(() => 78 import('src/components/transactions/StakingMigrate/StakingMigrateModal').then( 79 (module) => module.StakingMigrateModal 80 ) 81 ); 82 const ReadOnlyModal = dynamic(() => 83 import('src/components/WalletConnection/ReadOnlyModal').then((module) => module.ReadOnlyModal) 84 ); 85 86 // Client-side cache, shared for the whole session of the user in the browser. 87 const clientSideEmotionCache = createEmotionCache(); 88 89 type NextPageWithLayout = NextPage & { 90 getLayout?: (page: React.ReactElement) => React.ReactNode; 91 }; 92 93 interface MyAppProps extends AppProps { 94 emotionCache?: EmotionCache; 95 Component: NextPageWithLayout; 96 } 97 export default function MyApp(props: MyAppProps) { 98 const { Component, emotionCache = clientSideEmotionCache, pageProps } = props; 99 const getLayout = Component.getLayout ?? ((page: ReactNode) => page); 100 const [initializeMixpanel, setWalletType] = useRootStore( 101 useShallow((store) => [store.initializeMixpanel, store.setWalletType]) 102 ); 103 const [queryClient] = useState( 104 () => 105 new QueryClient({ 106 defaultOptions: { 107 queries: { 108 refetchOnWindowFocus: false, 109 }, 110 }, 111 }) 112 ); 113 114 const MIXPANEL_TOKEN = process.env.NEXT_PUBLIC_MIXPANEL; 115 useEffect(() => { 116 if (MIXPANEL_TOKEN) { 117 initializeMixpanel(); 118 } else { 119 console.log('no analytics tracking'); 120 } 121 }, []); 122 123 const cleanLocalStorage = () => { 124 localStorage.removeItem('readOnlyModeAddress'); 125 }; 126 127 return ( 128 <CacheProvider value={emotionCache}> 129 <Head> 130 <meta name="viewport" content="initial-scale=1, width=device-width" /> 131 </Head> 132 <Meta 133 title={'Open Source Liquidity Protocol'} 134 description={ 135 'Aave is an Open Source Protocol to create Non-Custodial Liquidity Markets to earn interest on supplying and borrowing assets with a variable or stable interest rate. The protocol is designed for easy integration into your products and services.' 136 } 137 imageUrl="https://app.aave.com/aave-com-opengraph.png" 138 /> 139 <NoSsr> 140 <LanguageProvider> 141 <WagmiProvider config={wagmiConfig}> 142 <QueryClientProvider client={queryClient}> 143 <ConnectKitProvider 144 onDisconnect={cleanLocalStorage} 145 onConnect={({ connectorId }) => setWalletType(connectorId)} 146 > 147 <Web3ContextProvider> 148 <AppGlobalStyles> 149 <AddressBlocked> 150 <ModalContextProvider> 151 <SharedDependenciesProvider> 152 <AppDataProvider> 153 <GasStationProvider> 154 {getLayout(<Component {...pageProps} />)} 155 <SupplyModal /> 156 <WithdrawModal /> 157 <BorrowModal /> 158 <RepayModal /> 159 <CollateralChangeModal /> 160 <DebtSwitchModal /> 161 <ClaimRewardsModal /> 162 <EmodeModal /> 163 <SwapModal /> 164 <FaucetModal /> 165 <TransactionEventHandler /> 166 <SwitchModal /> 167 <StakingMigrateModal /> 168 <BridgeModal /> 169 <ReadOnlyModal /> 170 </GasStationProvider> 171 </AppDataProvider> 172 </SharedDependenciesProvider> 173 </ModalContextProvider> 174 </AddressBlocked> 175 </AppGlobalStyles> 176 </Web3ContextProvider> 177 </ConnectKitProvider> 178 <ReactQueryDevtools initialIsOpen={false} /> 179 </QueryClientProvider> 180 </WagmiProvider> 181 </LanguageProvider> 182 </NoSsr> 183 </CacheProvider> 184 ); 185 }