add chunking & remove ethers imports in app

package.json

@@ -21,7 +21,6 @@
   "dependencies": {
     "@apollo/client": "^3.8.1",
     "@esbuild-plugins/node-globals-polyfill": "^0.1.1",
-    "@ethersproject/providers": "^5.7.2",
     "@gnosis.pm/safe-apps-wagmi": "^1.2.0",
     "@nomiclabs/hardhat-ethers": "^2.1.1",
     "@rollup/plugin-inject": "^4.0.4",
@@ -35,7 +34,6 @@
     "concurrently": "^7.4.0",
     "env-cmd": "^10.1.0",
     "eslint-plugin-chai-friendly": "^0.7.2",
-    "ethers": "^5.5.4",
     "graphql": "16.6.0",
     "gsap": "^3.9.1",
     "hardhat-ethernal": "^2.1.0",
@@ -45,9 +43,11 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.3.0",
     "recharts": "^2.7.3",
+    "rollup-plugin-visualizer": "^5.9.2",
     "tailwindcss": "^3.0.23",
     "viem": "^1.5.4",
-    "vite": "^2.9.8",
+    "vite": "2.9.8",
+    "vite-plugin-chunk-split": "^0.4.7",
     "vite-plugin-markdown": "^2.1.0",
     "wagmi": "^1.3.9",
     "web-vitals": "^2.1.4"
@@ -85,6 +85,7 @@
     "prettier": "^2.8.3",
     "prettier-plugin-organize-imports": "^3.2.2",
     "rimraf": "^3.0.2",
+    "rollup-plugin-node-polyfills": "^0.2.1",
     "ts-jest": "^27.1.3",
     "ts-node": "^10.9.1",
     "typescript": "^5.1.6",

src/components/Header/DesktopNavigation.tsx

@@ -18,12 +18,12 @@ function DesktopNavigation() {
       <ExternalNavLink href="https://breadchain.mirror.xyz/">
         Blog
       </ExternalNavLink>
-      {/* <NavLink
+      <NavLink
         isCurrentPage={location.pathname === '/dashboard'}
         to="/dashboard"
       >
         Dashboard
-      </NavLink> */}
+      </NavLink>
     </nav>
   );
 }

src/components/MobileMenu/MobileNavigation.tsx

@@ -33,12 +33,12 @@ function MobileNavigation({ handleNavToggle }: IProps) {
       >
         FAQ
       </NavLink>
-      {/* <NavLink
+      <NavLink
         isCurrentPage={location.pathname === '/dashboard'}
         to="/dashboard"
       >
         Dashboard
-      </NavLink> */}
+      </NavLink>
       <ExternalNavLink href="https://breadchain.mirror.xyz/">
         Blog
       </ExternalNavLink>

src/components/NativeBalance/NativeBalance.tsx

@@ -1,4 +1,4 @@
-import { formatEther } from 'ethers/lib/utils';
+import { formatEther } from 'viem';
 import { useBalance } from 'wagmi';
 import Elipsis from '../Elipsis/Elipsis';
 
@@ -32,7 +32,7 @@ export function NativeBalance({
   if (data) {
     value = bigNumberFormat
       ? data.value.toString()
-      : formatter.format(parseFloat(formatEther(data.value.toString())));
+      : formatter.format(parseFloat(formatEther(data.value)));
   }
 
   switch (status) {

src/components/Swap/ApproveContract/ApproveContract.tsx

@@ -1,5 +1,5 @@
-import { ethers } from 'ethers';
 import { useEffect } from 'react';
+import { hexToBigInt } from 'viem';
 import { useContractWrite, usePrepareContractWrite } from 'wagmi';
 
 import Button from '../../Button';
@@ -13,6 +13,9 @@ import {
   useTransactionDisplay,
 } from '../../../hooks/useTransactionDisplay';
 
+const MAX_INT =
+  '0xffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff';
+
 function transactionIsPending(
   transactionDisplay: TTransactionDisplayState,
 ): boolean {
@@ -38,7 +41,7 @@ function ApproveContract({ chainConfig }: IProps) {
     address: DAI.address,
     abi: ERC20ABI,
     functionName: 'approve',
-    args: [BREAD.address, ethers.constants.MaxUint256],
+    args: [BREAD.address, hexToBigInt(MAX_INT)],
   });
 
   const { data, error, isSuccess, write } = useContractWrite(config);

src/hooks/useTokenAllowance.ts

@@ -1,5 +1,4 @@
-import { BigNumber } from 'ethers';
-import { formatUnits } from 'ethers/lib/utils';
+import { formatUnits } from 'viem';
 import { useContractRead } from 'wagmi';
 import abi from '../ERC20.json';
 
@@ -25,7 +24,7 @@ export function useTokenAllowance(
     watch,
   });
 
-  const value = data ? formatUnits(data as BigNumber, 18) : undefined;
+  const value = data ? formatUnits(BigInt(data as string), 18) : undefined;
 
   return {
     value,

src/hooks/useTokenBalance.ts

@@ -1,4 +1,4 @@
-import { formatUnits } from 'ethers/lib/utils';
+import { formatUnits } from 'viem';
 import { useContractRead } from 'wagmi';
 import abi from '../ERC20.json';
 
@@ -20,7 +20,7 @@ export function useTokenBalance(
     watch: true,
   });
 
-  const value = data ? formatUnits(data as bigint, 18).toString() : '0';
+  const value = data ? formatUnits(BigInt(data as string), 18).toString() : '0';
 
   return { value, status, error };
 }

src/modules/dashboard/hooks/useBread.ts

@@ -1,6 +1,6 @@
 import { gql, useQuery } from '@apollo/client';
-import { formatUnits } from 'ethers/lib/utils';
 import { useEffect, useMemo } from 'react';
+import { formatUnits } from 'viem';
 
 interface IQueryDailySnapshot {
   timestamp: string;
@@ -71,14 +71,20 @@ export default function useBread() {
       tokens: {
         ...(apolloData.tokens as IToken[]),
       },
-      totalClaimedYield: formatUnits(apolloData.totalClaimedYield.amount),
+      totalClaimedYield: formatUnits(
+        BigInt(apolloData.totalClaimedYield.amount),
+        18,
+      ),
 
       tokenDailySnapshots: apolloData.tokenDailySnapshots
         .map((day: IQueryDailySnapshot) => {
           const date = new Date(
             parseInt(day.timestamp, 10) * 1000,
           ).toDateString();
-          const supply = parseInt(formatUnits(day.dailyTotalSupply), 10);
+          const supply = parseInt(
+            formatUnits(BigInt(day.dailyTotalSupply), 18),
+            10,
+          );
           return {
             date,
             supply,

src/modules/dashboard/hooks/useYield.ts

@@ -1,6 +1,6 @@
 import { gql, useQuery } from '@apollo/client';
-import { formatUnits } from 'ethers/lib/utils';
 import { useMemo } from 'react';
+import { formatUnits } from 'viem';
 
 export interface ITotalClaimedYield {
   totalClaimedYield: {
@@ -29,7 +29,7 @@ export default function useYield() {
     if (!apolloData) return undefined;
 
     return {
-      amount: formatUnits(apolloData.totalClaimedYield.amount),
+      amount: formatUnits(BigInt(apolloData.totalClaimedYield.amount), 18),
     };
   }, [apolloData]);
 

src/routes/bake.tsx

@@ -3,6 +3,7 @@ import { Suspense, lazy } from 'react';
 import BakeLayout from '../components/BakeLayout';
 
 import ConnectWallet from '../components/ConnectWallet';
+import Elipsis from '../components/Elipsis';
 import UnsupportedNetwork from '../components/UnsupportedNetwork/UnsupportedNetwork';
 import { useConnectedUser } from '../hooks/useConnectedUser';
 
@@ -30,7 +31,14 @@ export function Bake() {
 
   return (
     <BakeLayout>
-      <Suspense>
+      <Suspense
+        fallback={
+          <p className="pt-16">
+            loading
+            <Elipsis />
+          </p>
+        }
+      >
         <Swap chainConfig={user.config} accountAddress={user.address} />
       </Suspense>
     </BakeLayout>

vite.config.ts

@@ -1,12 +1,14 @@
 import GlobalPolyFill from '@esbuild-plugins/node-globals-polyfill';
 import react from '@vitejs/plugin-react';
-import * as path from 'path';
 import { defineConfig } from 'vite';
 import viteMarkdown, { Mode } from 'vite-plugin-markdown';
-
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react(), viteMarkdown({ mode: [Mode.HTML] })],
+  plugins: [
+    react(),
+    viteMarkdown({ mode: [Mode.HTML] }),
+    //  chunkSplitPlugin()
+  ],
   build: {
     target: 'esnext',
     sourcemap: false,
@@ -21,18 +23,44 @@ export default defineConfig({
           process: process.env.MODE !== 'production',
         }),
       ],
+      output: {
+        manualChunks(id: string) {
+          if (id.includes('apollo')) {
+            return 'apollo';
+          }
+          if (id.includes('wagmi')) {
+            return 'wagmi';
+          }
+          if (id.includes('react')) {
+            return 'react';
+          }
+          if (id.includes('viem')) {
+            return 'viem';
+          }
+          return null;
+        },
+      },
     },
   },
   define: {
     globalThis: 'window',
   },
+  // resolve: {
+  //   alias: {
+  //     process: 'process/browser',
+  //     '@': path.resolve(__dirname, './src/'),
+  //   },
+  // },
   resolve: {
     alias: {
-      process: 'process/browser',
-      '@': path.resolve(__dirname, './src/'),
+      // polyfills
+      Buffer: 'vite-compatible-readable-buffer',
+      stream: 'vite-compatible-readable-stream',
+      util: 'rollup-plugin-node-polyfills/polyfills/util',
     },
   },
   optimizeDeps: {
+    disabled: false,
     esbuildOptions: {
       // Node.js global to browser globalThis
       define: {