fix(passport): web3 auth lazy load back

apps/console/app/entry.server.tsx

@@ -38,10 +38,15 @@ export default function handleRequest(
     (nonce, dev) =>
       getCSP({
         directives: {
-          'default-src': [SELF],
+          'default-src': [
+            SELF,
+            'https://verify.walletconnect.com'
+          ],
           'connect-src': [
             SELF,
             '*.google-analytics.com',
+            'wss://relay.walletconnect.com',
+            'https://*.g.alchemy.com',
             'https://upload.imagedelivery.net',
             // Used for Remix WebSocket Live Reaload
             ...(dev ? ['ws://localhost:*/socket'] : []),

apps/console/app/root.tsx

@@ -82,6 +82,7 @@ export type LoaderData = {
   ENV: {
     INTERNAL_GOOGLE_ANALYTICS_TAG: string
     REMIX_DEV_SERVER_WS_PORT?: number
+    WALLET_CONNECT_PROJECT_ID: string,
   }
 }
 
@@ -124,6 +125,15 @@ export const loader: LoaderFunction = getRollupReqFunctionErrorWrapper(
         console.error('Could not retrieve profile image.', e)
       }
 
+      console.log({
+        INTERNAL_GOOGLE_ANALYTICS_TAG,
+        REMIX_DEV_SERVER_WS_PORT:
+          process.env.NODE_ENV === 'development'
+            ? +process.env.REMIX_DEV_SERVER_WS_PORT!
+            : undefined,
+        WALLET_CONNECT_PROJECT_ID,
+      })
+
       return json<LoaderData>({
         apps: reshapedApps,
         avatarUrl,
@@ -134,6 +144,7 @@ export const loader: LoaderFunction = getRollupReqFunctionErrorWrapper(
             process.env.NODE_ENV === 'development'
               ? +process.env.REMIX_DEV_SERVER_WS_PORT!
               : undefined,
+          WALLET_CONNECT_PROJECT_ID,
         },
         displayName,
       })

apps/console/app/routes/apps/$clientId/designer.beta.tsx

@@ -6,7 +6,7 @@ import {
   useLoaderData,
   useOutletContext,
 } from '@remix-run/react'
-import { ReactNode, useContext, useEffect, useRef, useState } from 'react'
+import { ReactNode, Suspense, lazy, useContext, useEffect, useRef, useState } from 'react'
 import { IconType } from 'react-icons'
 import { HiCog, HiOutlineCog, HiOutlineMail } from 'react-icons/hi'
 import { DocumentationBadge } from '~/components/DocumentationBadge'
@@ -16,8 +16,6 @@ import Authentication, {
   AuthenticationScreenDefaults,
 } from '@proofzero/design-system/src/templates/authentication/Authentication'
 
-import { createClient } from 'wagmi'
-import { getDefaultClient } from 'connectkit'
 import { Avatar } from '@proofzero/packages/design-system/src/atoms/profile/avatar/Avatar'
 import IconPicker from '~/components/IconPicker'
 import { Loader } from '@proofzero/design-system/src/molecules/loader/Loader'
@@ -63,11 +61,10 @@ import { GetEmailOTPThemeResult } from '@proofzero/platform/starbase/src/jsonrpc
 import { getRollupReqFunctionErrorWrapper } from '@proofzero/utils/errors'
 import { getEmailIcon, adjustAddressTypeToDisplay } from '@proofzero/utils/getNormalisedConnectedAccounts'
 
-const client = createClient(
-  // @ts-ignore
-  getDefaultClient({
-    appName: 'Rollup',
-  })
+const LazyAuth = lazy(() =>
+  import('../../../web3/lazyAuth').then((module) => ({
+    default: module.LazyAuth,
+  }))
 )
 
 const getRGBColor = (hex: string, type: string) => {
@@ -90,9 +87,8 @@ const DesignerTab = ({
   selected: boolean
 }) => (
   <div
-    className={`box-border -mb-0.5 mr-8 pb-4 px-1 flex flex-row items-center gap-2 border-b-2 ${
-      selected ? 'border-indigo-600' : 'border-transparent'
-    }`}
+    className={`box-border -mb-0.5 mr-8 pb-4 px-1 flex flex-row items-center gap-2 border-b-2 ${selected ? 'border-indigo-600' : 'border-transparent'
+      }`}
   >
     <Icon
       className={`w-5 h-5 ${selected ? 'text-indigo-600' : 'text-gray-500'}`}
@@ -182,9 +178,8 @@ const RadiusButton = ({
   return (
     <button
       type="button"
-      className={`w-full py-1.5 px-2.5 rounded-md ${
-        selected ? 'bg-indigo-500' : ''
-      }`}
+      className={`w-full py-1.5 px-2.5 rounded-md ${selected ? 'bg-indigo-500' : ''
+        }`}
       onClick={(e) => {
         e.preventDefault()
         setRadius(radius)
@@ -330,10 +325,10 @@ const AuthPanel = ({
     }[]
   >(
     appTheme?.providers ??
-      AuthenticationScreenDefaults.knownKeys.map((k) => ({
-        key: k,
-        enabled: true,
-      }))
+    AuthenticationScreenDefaults.knownKeys.map((k) => ({
+      key: k,
+      enabled: true,
+    }))
   )
   const [providerModalOpen, setProviderModalOpen] = useState<boolean>(false)
 
@@ -549,7 +544,7 @@ const AuthPanel = ({
                 minWidth={720}
                 minHeight={1080}
                 id="image"
-                setIsFormChanged={(val) => {}}
+                setIsFormChanged={(val) => { }}
                 setIsImgUploading={(val) => {
                   setLoading(val)
                 }}
@@ -630,40 +625,41 @@ const AuthPanel = ({
             <Tab.Group>
               <Tab.Panels className="pointer-events-auto">
                 <Tab.Panel>
-                  <Authentication
-                    Header={
-                      <>
-                        <Avatar
-                          src={AuthenticationScreenDefaults.defaultLogoURL}
-                          size="sm"
-                        ></Avatar>
-                        <div className={'flex flex-col items-center gap-2'}>
-                          <h1
-                            className={'font-semibold text-xl dark:text-white'}
-                          >
-                            {heading ??
-                              AuthenticationScreenDefaults.defaultHeading}
-                          </h1>
-
-                          <h2
-                            style={{ color: '#6B7280' }}
-                            className={'font-medium text-base'}
-                          >
-                            {AuthenticationScreenDefaults.defaultSubheading}
-                          </h2>
-                        </div>
-                      </>
-                    }
-                    displayKeys={providers
-                      .filter((p) => p.enabled)
-                      .map((p) => p.key)}
-                    mapperArgs={{
-                      clientId: 'Foo',
-                      wagmiClient: client,
-                      signData: null,
-                    }}
-                    radius={radius}
-                  />
+                  <LazyAuth>
+                    <Authentication
+                      Header={
+                        <>
+                          <Avatar
+                            src={AuthenticationScreenDefaults.defaultLogoURL}
+                            size="sm"
+                          ></Avatar>
+                          <div className={'flex flex-col items-center gap-2'}>
+                            <h1
+                              className={'font-semibold text-xl dark:text-white'}
+                            >
+                              {heading ??
+                                AuthenticationScreenDefaults.defaultHeading}
+                            </h1>
+
+                            <h2
+                              style={{ color: '#6B7280' }}
+                              className={'font-medium text-base'}
+                            >
+                              {AuthenticationScreenDefaults.defaultSubheading}
+                            </h2>
+                          </div>
+                        </>
+                      }
+                      displayKeys={providers
+                        .filter((p) => p.enabled)
+                        .map((p) => p.key)}
+                      mapperArgs={{
+                        clientId: 'Foo',
+                        signData: null,
+                      }}
+                      radius={radius}
+                    />
+                  </LazyAuth>
                 </Tab.Panel>
                 <Tab.Panel>
                   <Authorization
@@ -695,8 +691,8 @@ const AuthPanel = ({
                           'urn:rollupid:address/0xc2b930f1fc2a55ddc1bf99e8844ca0479567ac44f3e2eea58216660e26947686',
                       },
                     ]}
-                    selectEmailCallback={() => {}}
-                    addNewEmailCallback={() => {}}
+                    selectEmailCallback={() => { }}
+                    addNewEmailCallback={() => { }}
                     connectedAccounts={[
                       {
                         title: 'email@example.com',
@@ -728,8 +724,8 @@ const AuthPanel = ({
                     selectAllSmartWalletsCallback={() => { }}
                     // disableAuthorize={true}
                     transitionState={'idle'}
-                    cancelCallback={() => {}}
-                    authorizeCallback={() => {}}
+                    cancelCallback={() => { }}
+                    authorizeCallback={() => { }}
                     radius={radius}
                   />
                 </Tab.Panel>
@@ -821,7 +817,7 @@ const EmailPanel = ({
                 height: 1,
               }}
               id="logoURL"
-              setIsFormChanged={(val) => {}}
+              setIsFormChanged={(val) => { }}
               setIsImgUploading={(val) => {
                 setLoading(val)
               }}
@@ -1031,9 +1027,9 @@ export const action: ActionFunction = getRollupReqFunctionErrorWrapper(
         color:
           color && colorDark
             ? {
-                light: color,
-                dark: colorDark,
-              }
+              light: color,
+              dark: colorDark,
+            }
             : theme?.color,
         graphicURL: graphicURL ?? theme?.graphicURL,
         providers: providers ?? theme?.providers,
@@ -1139,7 +1135,7 @@ export default () => {
   const [loading, setLoading] = useState<boolean>(false)
 
   return (
-    <>
+    <Suspense fallback={<Loader />}>
       {loading && <Loader />}
 
       <Form method="post">
@@ -1211,6 +1207,6 @@ export default () => {
           </Tab.Panels>
         </Tab.Group>
       </Form>
-    </>
+    </Suspense>
   )
 }

apps/console/app/web3/lazyAuth.tsx

@@ -0,0 +1,32 @@
+import { getDefaultConfig, ConnectKitProvider } from 'connectkit'
+import { Suspense } from 'react'
+import { useHydrated } from 'remix-utils'
+import { createConfig, WagmiConfig } from 'wagmi'
+
+export function LazyAuth({
+    autoConnect = false,
+    children
+}: {
+    context?: any
+    autoConnect?: boolean
+    children: JSX.Element,
+}) {
+    const hydrated = useHydrated()
+    if (!hydrated) return <>Loading...</>
+
+    const config = createConfig(
+        getDefaultConfig({
+            appName: 'Rollup',
+            autoConnect,
+            walletConnectProjectId:
+                window.ENV.WALLET_CONNECT_PROJECT_ID,
+        })
+    )
+    return (
+        <WagmiConfig config={config}>
+            <ConnectKitProvider>
+                {children}
+            </ConnectKitProvider>
+        </WagmiConfig>
+    )
+}

apps/console/bindings.d.ts

@@ -15,4 +15,5 @@ declare global {
 
   const INTERNAL_CLOUDFLARE_ZONE_ID: string
   const TOKEN_CLOUDFLARE_API: string
+  const WALLET_CONNECT_PROJECT_ID: string
 }

apps/console/package.json

@@ -32,7 +32,7 @@
     "@remix-run/react": "1.14.0",
     "@tailwindcss/forms": "0.5.3",
     "bcryptjs": "2.4.3",
-    "connectkit": "1.2.0",
+    "connectkit": "1.4.0",
     "cross-env": "7.0.3",
     "ethers": "5.7.2",
     "flowbite": "1.6.5",
@@ -44,7 +44,8 @@
     "react-helmet": "6.1.0",
     "react-icons": "4.8.0",
     "tiny-invariant": "1.3.1",
-    "wagmi": "0.11.7"
+    "viem": "0.3.41",
+    "wagmi": "1.0.9"
   },
   "devDependencies": {
     "@babel/core": "7.20.2",

apps/console/wrangler.toml

@@ -36,6 +36,7 @@ STORAGE_NAMESPACE = "console"
 INTERNAL_GOOGLE_ANALYTICS_TAG = "G-NHNH4KRWC3"
 PROFILE_APP_URL = "http://localhost:10003"
 COOKIE_DOMAIN = "localhost"
+WALLET_CONNECT_PROJECT_ID = "36efbf71d7586e254d72041a15a42078"
 
 # Site
 # -----------------------------------------------------------------------------
@@ -77,6 +78,7 @@ COOKIE_DOMAIN = "rollup.id"
 STORAGE_NAMESPACE = "console"
 INTERNAL_GOOGLE_ANALYTICS_TAG = "G-NHNH4KRWC3"
 PROFILE_APP_URL = "https://my-dev.rollup.id"
+WALLET_CONNECT_PROJECT_ID = "249578b973e49826abb32d2ad263e2a3"
 
 # Environment: next
 # -----------------------------------------------------------------------------
@@ -107,6 +109,7 @@ COOKIE_DOMAIN = "rollup.id"
 STORAGE_NAMESPACE = "console"
 INTERNAL_GOOGLE_ANALYTICS_TAG = "G-X7ZN16M4NB"
 PROFILE_APP_URL = "https://my-next.rollup.id"
+WALLET_CONNECT_PROJECT_ID = "7bce942e261433eb70c2a72d555dd61f"
 
 # Environment: current
 # -----------------------------------------------------------------------------
@@ -138,3 +141,4 @@ COOKIE_DOMAIN = "rollup.id"
 STORAGE_NAMESPACE = "console"
 INTERNAL_GOOGLE_ANALYTICS_TAG = "G-675VJMWSRY"
 PROFILE_APP_URL = "https://my.rollup.id"
+WALLET_CONNECT_PROJECT_ID = "6f2ebc8aa6a1d5c4d4ac1e700294e35f"

apps/passport/app/entry.server.tsx

@@ -35,10 +35,15 @@ export default function handleRequest(
     (nonce, dev) =>
       getCSP({
         directives: {
-          'default-src': [SELF],
+          'default-src': [
+            SELF,
+            'https://verify.walletconnect.com',
+          ],
           'connect-src': [
             SELF,
             'wss://*.bridge.walletconnect.org',
+            'wss://relay.walletconnect.com',
+            'https://*.g.alchemy.com',
             '*.alchemyapi.io',
             '*.google-analytics.com',
             // Used for Remix WebSocket Live Reaload

apps/passport/app/root.tsx

@@ -108,11 +108,12 @@ export const loader: LoaderFunction = getRollupReqFunctionErrorWrapper(
           PROFILE_APP_URL: context.env.PROFILE_APP_URL,
           INTERNAL_GOOGLE_ANALYTICS_TAG:
             context.env.INTERNAL_GOOGLE_ANALYTICS_TAG,
-          APIKEY_ALCHEMY_PUBLIC: context.env.APIKEY_ALCHEMY_PUBLIC,
           REMIX_DEV_SERVER_WS_PORT:
             process.env.NODE_ENV === 'development'
               ? process.env.REMIX_DEV_SERVER_WS_PORT
               : undefined,
+          WALLET_CONNECT_PROJECT_ID: context.env.WALLET_CONNECT_PROJECT_ID,
+          APIKEY_ALCHEMY_PUBLIC: context.env.APIKEY_ALCHEMY_PUBLIC,
         },
       },
       {