Revert "fix: Lazy load mpc core kit (#2808)"

This reverts commit a272500.

.github/workflows/nextjs_bundle_analysis.yml

@@ -28,6 +28,8 @@ jobs:
         with:
           secrets: ${{ toJSON(secrets) }}
 
+      # Here's the first place where next-bundle-analysis' own script is used
+      # This step pulls the raw bundle stats for the current bundle
       - name: Analyze bundle
         run: npx -p nextjs-bundle-analysis report
 
@@ -45,6 +47,19 @@ jobs:
           branch: ${{ github.event.pull_request.base.ref }}
           path: .next/analyze/base
 
+      # And here's the second place - this runs after we have both the current and
+      # base branch bundle stats, and will compare them to determine what changed.
+      # There are two configurable arguments that come from package.json:
+      #
+      # - budget: optional, set a budget (bytes) against which size changes are measured
+      #           it's set to 350kb here by default, as informed by the following piece:
+      #           https://infrequently.org/2021/03/the-performance-inequality-gap/
+      #
+      # - red-status-percentage: sets the percent size increase where you get a red
+      #                          status indicator, defaults to 20%
+      #
+      # Either of these arguments can be changed or removed by editing the `nextBundleAnalysis`
+      # entry in your package.json file.
       - name: Compare with base branch bundle
         if: success() && github.event.number
         run: ls -laR .next/analyze/base && npx -p nextjs-bundle-analysis compare
@@ -58,8 +73,26 @@ jobs:
           echo "$(cat .next/analyze/__bundle_analysis_comment.txt)" >> $GITHUB_OUTPUT
           echo EOF >> $GITHUB_OUTPUT
 
-      - name: Comment
-        uses: marocchino/sticky-pull-request-comment@v2
+      - name: Find Comment
+        uses: peter-evans/find-comment@v2
+        if: success() && github.event.number
+        id: fc
+        with:
+          issue-number: ${{ github.event.number }}
+          body-includes: '<!-- __NEXTJS_BUNDLE -->'
+
+      - name: Create Comment
+        uses: peter-evans/create-or-update-comment@v2
+        if: success() && github.event.number && steps.fc.outputs.comment-id == 0
+        with:
+          issue-number: ${{ github.event.number }}
+          body: ${{ steps.get-comment-body.outputs.body }}
+
+      - name: Update Comment
+        uses: peter-evans/create-or-update-comment@v2
+        if: success() && github.event.number && steps.fc.outputs.comment-id != 0
         with:
-          header: next-bundle-analysis
-          message: ${{ steps.get-comment-body.outputs.body }}
+          issue-number: ${{ github.event.number }}
+          body: ${{ steps.get-comment-body.outputs.body }}
+          comment-id: ${{ steps.fc.outputs.comment-id }}
+          edit-mode: replace

.gitignore

@@ -52,5 +52,4 @@ yalc.lock
 /public/worker-*.js
 /public/workbox-*.js
 /public/workbox-*.js.map
-/public/fallback*
-/public/*.js.LICENSE.txt
+/public/fallback*

src/components/common/ConnectWallet/WalletDetails.tsx

@@ -1,13 +1,8 @@
-import { Box, Divider, Skeleton, SvgIcon, Typography } from '@mui/material'
-import dynamic from 'next/dynamic'
+import { Box, Divider, SvgIcon, Typography } from '@mui/material'
 import type { ReactElement } from 'react'
 
 import LockIcon from '@/public/images/common/lock.svg'
-
-const SocialSigner = dynamic(() => import('@/components/common/SocialSigner'), {
-  loading: () => <Skeleton variant="rounded" height={42} width="100%" />,
-})
-
+import SocialSigner from '@/components/common/SocialSigner'
 import WalletLogin from '@/components/welcome/WelcomeLogin/WalletLogin'
 
 const WalletDetails = ({ onConnect }: { onConnect: () => void }): ReactElement => {

src/components/common/SocialSigner/index.tsx

@@ -1,7 +1,4 @@
-import useSocialWallet from '@/hooks/wallets/mpc/useSocialWallet'
-import { type ISocialWalletService } from '@/services/mpc/interfaces'
 import { Box, Button, LinearProgress, SvgIcon, Tooltip, Typography } from '@mui/material'
-import { COREKIT_STATUS } from '@web3auth/mpc-core-kit'
 import { useCallback, useContext, useMemo, useState } from 'react'
 import { PasswordRecovery } from '@/components/common/SocialSigner/PasswordRecovery'
 import GoogleLogo from '@/public/images/welcome/logo-google.svg'
@@ -18,6 +15,8 @@ import { isSocialLoginWallet } from '@/services/mpc/SocialLoginModule'
 import { CGW_NAMES } from '@/hooks/wallets/consts'
 import { type ChainInfo } from '@safe-global/safe-gateway-typescript-sdk'
 import { TxModalContext } from '@/components/tx-flow'
+import { COREKIT_STATUS } from '@web3auth/mpc-core-kit'
+import useSocialWallet from '@/hooks/wallets/mpc/useSocialWallet'
 import madProps from '@/utils/mad-props'
 import { asError } from '@/services/exceptions/utils'
 import ErrorMessage from '@/components/tx/ErrorMessage'
@@ -42,7 +41,7 @@ const useIsSocialWalletEnabled = () => {
 }
 
 type SocialSignerLoginProps = {
-  socialWalletService: ISocialWalletService | undefined
+  socialWalletService: ReturnType<typeof useSocialWallet>
   wallet: ReturnType<typeof useWallet>
   supportedChains: ReturnType<typeof useGetSupportedChains>
   isMPCLoginEnabled: ReturnType<typeof useIsSocialWalletEnabled>

src/components/welcome/WelcomeLogin/index.tsx

@@ -1,20 +1,16 @@
+import SocialSigner from '@/components/common/SocialSigner'
 import { AppRoutes } from '@/config/routes'
 import { useHasFeature } from '@/hooks/useChains'
 import { FEATURES } from '@/utils/chains'
-import { Paper, SvgIcon, Typography, Divider, Link, Box, Skeleton } from '@mui/material'
+import { Paper, SvgIcon, Typography, Divider, Link, Box } from '@mui/material'
 import SafeLogo from '@/public/images/logo-text.svg'
-import dynamic from 'next/dynamic'
 import css from './styles.module.css'
 import { useRouter } from 'next/router'
 import WalletLogin from './WalletLogin'
 import { LOAD_SAFE_EVENTS, CREATE_SAFE_EVENTS } from '@/services/analytics/events/createLoadSafe'
 import Track from '@/components/common/Track'
 import { trackEvent } from '@/services/analytics'
 
-const SocialSigner = dynamic(() => import('@/components/common/SocialSigner'), {
-  loading: () => <Skeleton variant="rounded" height={42} width="100%" />,
-})
-
 const WelcomeLogin = () => {
   const router = useRouter()
   const isSocialLoginEnabled = useHasFeature(FEATURES.SOCIAL_LOGIN)

src/hooks/wallets/mpc/__tests__/useMPC.test.ts

@@ -1,7 +1,8 @@
 import * as useOnboard from '@/hooks/wallets/useOnboard'
 import * as socialWalletOptions from '@/services/mpc/config'
-import { waitFor } from '@/tests/test-utils'
-import { _getMPCCoreKitInstance, initMPC, setMPCCoreKitInstance } from '../useMPC'
+import { renderHook, waitFor } from '@/tests/test-utils'
+import { _getMPCCoreKitInstance, setMPCCoreKitInstance, useInitMPC } from '../useMPC'
+import * as useChains from '@/hooks/useChains'
 import { type ChainInfo, RPC_AUTHENTICATION } from '@safe-global/safe-gateway-typescript-sdk'
 import { hexZeroPad } from 'ethers/lib/utils'
 import { ONBOARD_MPC_MODULE_LABEL } from '@/services/mpc/SocialLoginModule'
@@ -62,70 +63,95 @@ class EventEmittingMockProvider {
   }
 }
 
-describe('initMPC', () => {
-  const mockOnboard = {
-    state: {
-      get: () => ({
-        wallets: [],
-        walletModules: [],
-      }),
-    },
-  } as unknown as OnboardAPI
-
-  const mockChain = {
-    chainId: '5',
-    chainName: 'Goerli',
-    blockExplorerUriTemplate: {
-      address: 'https://goerli.someprovider.io/{address}',
-      txHash: 'https://goerli.someprovider.io/{txHash}',
-      api: 'https://goerli.someprovider.io/',
-    },
-    nativeCurrency: {
-      decimals: 18,
-      logoUri: 'https://logo.goerli.com',
-      name: 'Goerli ETH',
-      symbol: 'ETH',
-    },
-    rpcUri: {
-      authentication: RPC_AUTHENTICATION.NO_AUTHENTICATION,
-      value: 'https://goerli.somerpc.io',
-    },
-  } as unknown as ChainInfo
-
+describe('useInitMPC', () => {
   beforeEach(() => {
     jest.resetAllMocks()
     jest.spyOn(socialWalletOptions, 'isSocialWalletOptions').mockReturnValue(true)
   })
-
   it('should set the coreKit if user is not logged in yet', async () => {
-    jest.spyOn(useOnboard, 'connectWallet').mockImplementation(() => Promise.resolve(undefined))
+    const connectWalletSpy = jest.fn().mockImplementation(() => Promise.resolve())
+    jest.spyOn(useOnboard, 'connectWallet').mockImplementation(connectWalletSpy)
     jest.spyOn(useOnboard, 'getConnectedWallet').mockReturnValue(null)
+    jest.spyOn(useOnboard, 'default').mockReturnValue({
+      state: {
+        get: () => ({
+          wallets: [],
+          walletModules: [],
+        }),
+      },
+    } as unknown as OnboardAPI)
+    jest.spyOn(useChains, 'useCurrentChain').mockReturnValue({
+      chainId: '5',
+      chainName: 'Goerli',
+      blockExplorerUriTemplate: {
+        address: 'https://goerli.someprovider.io/{address}',
+        txHash: 'https://goerli.someprovider.io/{txHash}',
+        api: 'https://goerli.someprovider.io/',
+      },
+      nativeCurrency: {
+        decimals: 18,
+        logoUri: 'https://logo.goerli.com',
+        name: 'Goerli ETH',
+        symbol: 'ETH',
+      },
+      rpcUri: {
+        authentication: RPC_AUTHENTICATION.NO_AUTHENTICATION,
+        value: 'https://goerli.somerpc.io',
+      },
+    } as unknown as ChainInfo)
 
     const mockWeb3AuthMpcCoreKit = jest.spyOn(require('@web3auth/mpc-core-kit'), 'Web3AuthMPCCoreKit')
     mockWeb3AuthMpcCoreKit.mockImplementation(() => {
       return new MockMPCCoreKit(COREKIT_STATUS.INITIALIZED, null)
     })
 
-    await initMPC(mockChain, mockOnboard)
+    renderHook(() => useInitMPC())
 
     await waitFor(() => {
       expect(_getMPCCoreKitInstance()).toBeDefined()
-      expect(useOnboard.connectWallet).not.toBeCalled()
+      expect(connectWalletSpy).not.toBeCalled()
     })
   })
 
   it('should call connectWallet after rehydrating a web3auth session', async () => {
     const connectWalletSpy = jest.fn().mockImplementation(() => Promise.resolve())
     jest.spyOn(useOnboard, 'connectWallet').mockImplementation(connectWalletSpy)
     jest.spyOn(useOnboard, 'getConnectedWallet').mockReturnValue(null)
+    jest.spyOn(useOnboard, 'default').mockReturnValue({
+      state: {
+        get: () => ({
+          wallets: [],
+          walletModules: [],
+        }),
+      },
+    } as unknown as OnboardAPI)
+    jest.spyOn(useChains, 'useCurrentChain').mockReturnValue({
+      chainId: '5',
+      chainName: 'Goerli',
+      blockExplorerUriTemplate: {
+        address: 'https://goerli.someprovider.io/{address}',
+        txHash: 'https://goerli.someprovider.io/{txHash}',
+        api: 'https://goerli.someprovider.io/',
+      },
+      nativeCurrency: {
+        decimals: 18,
+        logoUri: 'https://logo.goerli.com',
+        name: 'Goerli ETH',
+        symbol: 'ETH',
+      },
+      rpcUri: {
+        authentication: RPC_AUTHENTICATION.NO_AUTHENTICATION,
+        value: 'https://goerli.somerpc.io',
+      },
+    } as unknown as ChainInfo)
 
     const mockWeb3AuthMpcCoreKit = jest.spyOn(require('@web3auth/mpc-core-kit'), 'Web3AuthMPCCoreKit')
     const mockProvider = jest.fn()
     mockWeb3AuthMpcCoreKit.mockImplementation(() => {
       return new MockMPCCoreKit(COREKIT_STATUS.LOGGED_IN, mockProvider as unknown as MPCProvider)
     })
 
-    await initMPC(mockChain, mockOnboard)
+    renderHook(() => useInitMPC())
 
     await waitFor(() => {
       expect(connectWalletSpy).toBeCalled()
@@ -134,13 +160,41 @@ describe('initMPC', () => {
   })
 
   it('should copy event handlers and emit chainChanged if the current chain is updated', async () => {
-    jest.spyOn(useOnboard, 'connectWallet').mockImplementation(() => Promise.resolve(undefined))
+    const connectWalletSpy = jest.fn().mockImplementation(() => Promise.resolve())
+    jest.spyOn(useOnboard, 'connectWallet').mockImplementation(connectWalletSpy)
     jest.spyOn(useOnboard, 'getConnectedWallet').mockReturnValue({
       address: hexZeroPad('0x1', 20),
       label: ONBOARD_MPC_MODULE_LABEL,
       chainId: '1',
       provider: {} as unknown as EIP1193Provider,
     })
+    jest.spyOn(useOnboard, 'default').mockReturnValue({
+      state: {
+        get: () => ({
+          wallets: [],
+          walletModules: [],
+        }),
+      },
+    } as unknown as OnboardAPI)
+    jest.spyOn(useChains, 'useCurrentChain').mockReturnValue({
+      chainId: '5',
+      chainName: 'Goerli',
+      blockExplorerUriTemplate: {
+        address: 'https://goerli.someprovider.io/{address}',
+        txHash: 'https://goerli.someprovider.io/{txHash}',
+        api: 'https://goerli.someprovider.io/',
+      },
+      nativeCurrency: {
+        decimals: 18,
+        logoUri: 'https://logo.goerli.com',
+        name: 'Goerli ETH',
+        symbol: 'ETH',
+      },
+      rpcUri: {
+        authentication: RPC_AUTHENTICATION.NO_AUTHENTICATION,
+        value: 'https://goerli.somerpc.io',
+      },
+    } as unknown as ChainInfo)
 
     const mockWeb3AuthMpcCoreKit = jest.spyOn(require('@web3auth/mpc-core-kit'), 'Web3AuthMPCCoreKit')
     const mockChainChangedListener = jest.fn()
@@ -161,12 +215,12 @@ describe('initMPC', () => {
       return new MockMPCCoreKit(COREKIT_STATUS.LOGGED_IN, mockProvider as unknown as MPCProvider)
     })
 
-    await initMPC(mockChain, mockOnboard)
+    renderHook(() => useInitMPC())
 
     await waitFor(() => {
       expect(mockChainChangedListener).toHaveBeenCalledWith('0x5')
       expect(_getMPCCoreKitInstance()).toBeDefined()
-      expect(useOnboard.connectWallet).not.toBeCalled()
+      expect(connectWalletSpy).not.toBeCalled()
     })
   })
 })