use dynamic imports for recharts

components/account/AccountChart.tsx

@@ -2,7 +2,11 @@ import { MangoAccount } from '@blockworks-foundation/mango-v4'
 import { useTranslation } from 'next-i18next'
 import { useState } from 'react'
 import mangoStore from '@store/mangoStore'
-import DetailedAreaChart from '../shared/DetailedAreaChart'
+import dynamic from 'next/dynamic'
+const DetailedAreaChart = dynamic(
+  () => import('@components/shared/DetailedAreaChart'),
+  { ssr: false }
+)
 
 const AccountChart = ({
   chartToShow,

components/account/AccountPage.tsx

@@ -11,7 +11,11 @@ import WithdrawModal from '../modals/WithdrawModal'
 import mangoStore, { PerformanceDataItem } from '@store/mangoStore'
 import { formatDecimal, formatFixedDecimals } from '../../utils/numbers'
 import FlipNumbers from 'react-flip-numbers'
-import SimpleAreaChart from '../shared/SimpleAreaChart'
+import dynamic from 'next/dynamic'
+const SimpleAreaChart = dynamic(
+  () => import('@components/shared/SimpleAreaChart'),
+  { ssr: false }
+)
 import { COLORS } from '../../styles/colors'
 import { useTheme } from 'next-themes'
 import { IconButton } from '../shared/Button'

components/stats/SpotMarketsTable.tsx

@@ -9,8 +9,12 @@ import { formatFixedDecimals } from '../../utils/numbers'
 import { breakpoints } from '../../utils/theme'
 import ContentBox from '../shared/ContentBox'
 import Change from '../shared/Change'
-import SimpleAreaChart from '../shared/SimpleAreaChart'
 import MarketLogos from '@components/trade/MarketLogos'
+import dynamic from 'next/dynamic'
+const SimpleAreaChart = dynamic(
+  () => import('@components/shared/SimpleAreaChart'),
+  { ssr: false }
+)
 
 const SpotMarketsTable = () => {
   const { t } = useTranslation('common')

components/swap/SwapPage.tsx

@@ -1,9 +1,10 @@
 import Swap from './SwapForm'
-import SwapTokenChart from './SwapTokenChart'
 import mangoStore from '@store/mangoStore'
 import SwapOnboardingTour from '@components/tours/SwapOnboardingTour'
 import { useWallet } from '@solana/wallet-adapter-react'
 import SwapInfoTabs from './SwapInfoTabs'
+import dynamic from 'next/dynamic'
+const SwapTokenChart = dynamic(() => import('./SwapTokenChart'), { ssr: false })
 
 const SwapPage = () => {
   const inputTokenInfo = mangoStore((s) => s.swap.inputTokenInfo)

store/mangoStore.ts

@@ -38,7 +38,7 @@ import spotBalancesUpdater from './spotBalancesUpdater'
 const GROUP = new PublicKey('DLdcpC6AsAJ9xeKMR3WhHrN5sM5o7GVVXQhQ5vwisTtz')
 
 export const connection = new web3.Connection(
-  'https://mango.rpcpool.com',
+  'https://mango.rpcpool.com/0f9acc0d45173b51bf7d7e09c1e5',
   'processed'
 )
 const options = AnchorProvider.defaultOptions()