chore(apps): upgrade connectkit and wagmi (#2319)

apps/console/app/root.tsx

@@ -42,12 +42,8 @@ import createStarbaseClient from '@proofzero/platform-clients/starbase'
 import createAccountClient from '@proofzero/platform-clients/account'
 import { getAuthzHeaderConditionallyFromToken } from '@proofzero/utils'
 import { generateTraceContextHeaders } from '@proofzero/platform-middleware/trace'
-
 import type { AccountURN } from '@proofzero/urns/account'
-
 import { NonceContext } from '@proofzero/design-system/src/atoms/contexts/nonce-context'
-import { InternalServerError } from '@proofzero/errors'
-
 import useTreeshakeHack from '@proofzero/design-system/src/hooks/useTreeshakeHack'
 import { getRollupReqFunctionErrorWrapper } from '@proofzero/utils/errors'
 
@@ -82,6 +78,7 @@ export type LoaderData = {
   ENV: {
     INTERNAL_GOOGLE_ANALYTICS_TAG: string
     REMIX_DEV_SERVER_WS_PORT?: number
+    WALLET_CONNECT_PROJECT_ID: string
   }
 }
 
@@ -129,6 +126,7 @@ export const loader: LoaderFunction = getRollupReqFunctionErrorWrapper(
         avatarUrl,
         PASSPORT_URL,
         ENV: {
+          WALLET_CONNECT_PROJECT_ID,
           INTERNAL_GOOGLE_ANALYTICS_TAG,
           REMIX_DEV_SERVER_WS_PORT:
             process.env.NODE_ENV === 'development'

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

@@ -16,8 +16,8 @@ import Authentication, {
   AuthenticationScreenDefaults,
 } from '@proofzero/design-system/src/templates/authentication/Authentication'
 
-import { createClient } from 'wagmi'
-import { getDefaultClient } from 'connectkit'
+import { createConfig } from 'wagmi'
+import { getDefaultConfig } 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'
@@ -62,10 +62,12 @@ import { BadRequestError } from '@proofzero/errors'
 import { GetEmailOTPThemeResult } from '@proofzero/platform/starbase/src/jsonrpc/methods/getEmailOTPTheme'
 import { getRollupReqFunctionErrorWrapper } from '@proofzero/utils/errors'
 
-const client = createClient(
-  // @ts-ignore
-  getDefaultClient({
+const config = createConfig(
+  getDefaultConfig({
     appName: 'Rollup',
+    walletConnectProjectId:
+      //@ts-ignore
+      typeof window !== 'undefined' && window.ENV.WALLET_CONNECT_PROJECT_ID,
   })
 )
 
@@ -89,9 +91,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'}`}
@@ -181,9 +182,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)
@@ -329,10 +329,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)
 
@@ -548,7 +548,7 @@ const AuthPanel = ({
                 minWidth={720}
                 minHeight={1080}
                 id="image"
-                setIsFormChanged={(val) => {}}
+                setIsFormChanged={(val) => { }}
                 setIsImgUploading={(val) => {
                   setLoading(val)
                 }}
@@ -658,7 +658,7 @@ const AuthPanel = ({
                       .map((p) => p.key)}
                     mapperArgs={{
                       clientId: 'Foo',
-                      wagmiClient: client,
+                      wagmiConfig: config,
                       signData: null,
                     }}
                     radius={radius}
@@ -694,8 +694,8 @@ const AuthPanel = ({
                           'urn:rollupid:address/0xc2b930f1fc2a55ddc1bf99e8844ca0479567ac44f3e2eea58216660e26947686',
                       },
                     ]}
-                    selectEmailCallback={() => {}}
-                    addNewEmailCallback={() => {}}
+                    selectEmailCallback={() => { }}
+                    addNewEmailCallback={() => { }}
                     connectedAccounts={[
                       {
                         address: 'email@example.com',
@@ -727,14 +727,14 @@ const AuthPanel = ({
                       },
                     ]}
                     connectedSmartContractWallets={[]}
-                    addNewAccountCallback={() => {}}
-                    addNewSmartWalletCallback={() => {}}
-                    selectSmartWalletCallback={() => {}}
-                    selectAccountsCallback={() => {}}
+                    addNewAccountCallback={() => { }}
+                    addNewSmartWalletCallback={() => { }}
+                    selectSmartWalletCallback={() => { }}
+                    selectAccountsCallback={() => { }}
                     // disableAuthorize={true}
                     transitionState={'idle'}
-                    cancelCallback={() => {}}
-                    authorizeCallback={() => {}}
+                    cancelCallback={() => { }}
+                    authorizeCallback={() => { }}
                     radius={radius}
                   />
                 </Tab.Panel>
@@ -826,7 +826,7 @@ const EmailPanel = ({
                 height: 1,
               }}
               id="logoURL"
-              setIsFormChanged={(val) => {}}
+              setIsFormChanged={(val) => { }}
               setIsImgUploading={(val) => {
                 setLoading(val)
               }}
@@ -1026,7 +1026,6 @@ export const action: ActionFunction = getRollupReqFunctionErrorWrapper(
 
       let providersJSON = fd.get('providers') as string | undefined
       if (!providersJSON || providersJSON === '') providersJSON = undefined
-
       const providers = providersJSON ? JSON.parse(providersJSON) : undefined
 
       theme = {
@@ -1036,12 +1035,12 @@ export const action: ActionFunction = getRollupReqFunctionErrorWrapper(
         color:
           color && colorDark
             ? {
-                light: color,
-                dark: colorDark,
-              }
-            : theme?.color,
-        graphicURL: graphicURL ?? theme?.graphicURL,
-        providers: providers ?? theme?.providers,
+              light: color,
+              dark: colorDark,
+            }
+          : theme?.color,
+      graphicURL: graphicURL ?? theme?.graphicURL,
+      providers: providers ?? theme?.providers,
       }
 
       const zodErrors = await AppThemeSchema.spa(theme)

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,9 +32,8 @@
     "@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",
     "flowbite-react": "0.4.3",
     "lodash": "4.17.21",
@@ -44,7 +43,8 @@
     "react-helmet": "6.1.0",
     "react-icons": "4.8.0",
     "tiny-invariant": "1.3.1",
-    "wagmi": "0.11.7"
+    "viem": "0.3.39",
+    "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/root.tsx

@@ -106,6 +106,7 @@ export const loader: LoaderFunction = getRollupReqFunctionErrorWrapper(
         flashes,
         ENV: {
           PROFILE_APP_URL: context.env.PROFILE_APP_URL,
+          WALLET_CONNECT_PROJECT_ID: context.env.WALLET_CONNECT_PROJECT_ID,
           INTERNAL_GOOGLE_ANALYTICS_TAG:
             context.env.INTERNAL_GOOGLE_ANALYTICS_TAG,
           APIKEY_ALCHEMY_PUBLIC: context.env.APIKEY_ALCHEMY_PUBLIC,

apps/passport/app/routes/authenticate/$clientId/index.tsx

@@ -13,8 +13,8 @@ import { redirect, json } from '@remix-run/cloudflare'
 
 import { getAuthzCookieParams } from '~/session.server'
 import type { ActionFunction, LoaderFunction } from '@remix-run/cloudflare'
-import { createClient } from 'wagmi'
-import { getDefaultClient } from 'connectkit'
+import { createConfig } from 'wagmi'
+import { getDefaultConfig } from 'connectkit'
 import Authentication, {
   AppProfile,
   AuthenticationScreenDefaults,
@@ -25,11 +25,13 @@ import { Avatar } from '@proofzero/packages/design-system/src/atoms/profile/avat
 import { Button } from '@proofzero/packages/design-system/src/atoms/buttons/Button'
 import { getRollupReqFunctionErrorWrapper } from '@proofzero/utils/errors'
 
-const client = createClient(
-  // @ts-ignore
-  getDefaultClient({
+const config = createConfig(
+  getDefaultConfig({
     appName: 'Rollup',
     autoConnect: true,
+    walletConnectProjectId:
+      // @ts-ignore
+      typeof window !== 'undefined' && window.ENV.WALLET_CONNECT_PROJECT_ID,
     alchemyId:
       // @ts-ignore
       typeof window !== 'undefined' && window.ENV.APIKEY_ALCHEMY_PUBLIC,
@@ -193,7 +195,7 @@ export default () => {
         displayKeys={displayKeys}
         mapperArgs={{
           clientId,
-          wagmiClient: client,
+          wagmiConfig: config,
           signData,
           navigate,
           FormWrapperEl: ({ children, provider }) => (

apps/passport/bindings.d.ts

@@ -19,6 +19,7 @@ declare global {
     PASSPORT_REDIRECT_URL: string
     APIKEY_ALCHEMY_PUBLIC: string
     REMIX_DEV_SERVER_WS_PORT: number
+    WALLET_CONNECT_PROJECT_ID: string
 
     INTERNAL_GOOGLE_ANALYTICS_TAG: string
 

apps/passport/package.json

@@ -21,7 +21,6 @@
     "build-storybook": "npx tailwindcss -o ./app/styles/tailwind.css && build-storybook"
   },
   "dependencies": {
-    "@ethersproject/keccak256": "5.7.0",
     "@proofzero/design-system": "*",
     "@proofzero/platform-clients": "workspace:*",
     "@proofzero/platform.access": "workspace:*",
@@ -30,7 +29,7 @@
     "@remix-run/cloudflare-workers": "1.14.0",
     "@remix-run/react": "1.14.0",
     "@tailwindcss/forms": "0.5.3",
-    "connectkit": "1.2.0",
+    "connectkit": "1.4.0",
     "csp-header": "5.1.0",
     "flowbite": "1.6.5",
     "flowbite-react": "0.4.3",
@@ -47,7 +46,8 @@
     "remix-auth-oauth2": "1.5.0",
     "remix-auth-twitter": "1.0.0",
     "remix-utils": "6.3.0",
-    "wagmi": "0.11.7"
+    "viem": "0.3.39",
+    "wagmi": "1.0.9"
   },
   "devDependencies": {
     "@babel/core": "^7.20.2",

apps/passport/wrangler.toml

@@ -38,6 +38,7 @@ INTERNAL_MICROSOFT_OAUTH_CALLBACK_URL = "http://localhost:10001/connect/microsof
 INTERNAL_APPLE_OAUTH_CALLBACK_URL = "http://localhost:10001/connect/apple/callback"
 INTERNAL_DISCORD_OAUTH_CALLBACK_URL = "http://localhost:10001/connect/discord/callback"
 INTERNAL_GOOGLE_ANALYTICS_TAG = "G-NHNH4KRWC3"
+WALLET_CONNECT_PROJECT_ID = "36efbf71d7586e254d72041a15a42078"
 
 [env.dev]
 routes = [
@@ -65,6 +66,7 @@ INTERNAL_APPLE_OAUTH_CALLBACK_URL = "https://passport-dev.rollup.id/connect/appl
 INTERNAL_MICROSOFT_OAUTH_CALLBACK_URL = "https://passport-dev.rollup.id/connect/microsoft/callback"
 INTERNAL_DISCORD_OAUTH_CALLBACK_URL = "https://passport-dev.rollup.id/connect/discord/callback"
 INTERNAL_GOOGLE_ANALYTICS_TAG = "G-NHNH4KRWC3"
+WALLET_CONNECT_PROJECT_ID = "249578b973e49826abb32d2ad263e2a3"
 
 [env.next]
 routes = [
@@ -91,6 +93,7 @@ INTERNAL_APPLE_OAUTH_CALLBACK_URL = "https://passport-next.rollup.id/connect/app
 INTERNAL_MICROSOFT_OAUTH_CALLBACK_URL = "https://passport-next.rollup.id/connect/microsoft/callback"
 INTERNAL_DISCORD_OAUTH_CALLBACK_URL = "https://passport-next.rollup.id/connect/discord/callback"
 INTERNAL_GOOGLE_ANALYTICS_TAG = "G-X7ZN16M4NB"
+WALLET_CONNECT_PROJECT_ID = "7bce942e261433eb70c2a72d555dd61f"
 
 [env.next.build]
 command = "yarn build"
@@ -120,6 +123,7 @@ INTERNAL_APPLE_OAUTH_CALLBACK_URL = "https://passport.rollup.id/connect/apple/ca
 INTERNAL_MICROSOFT_OAUTH_CALLBACK_URL = "https://passport.rollup.id/connect/microsoft/callback"
 INTERNAL_DISCORD_OAUTH_CALLBACK_URL = "https://passport.rollup.id/connect/discord/callback"
 INTERNAL_GOOGLE_ANALYTICS_TAG = "G-675VJMWSRY"
+WALLET_CONNECT_PROJECT_ID = "6f2ebc8aa6a1d5c4d4ac1e700294e35f"
 
 [env.current.build]
 command = "yarn build"

apps/profile/package.json

@@ -57,7 +57,7 @@
     "remix-auth-oauth2": "1.5.0",
     "tw-elements": "1.0.0-alpha12",
     "urns": "0.6.0",
-    "wagmi": "0.10.8"
+    "wagmi": "1.0.9"
   },
   "devDependencies": {
     "@babel/core": "7.20.2",

packages/design-system/.storybook/main.js

@@ -51,6 +51,24 @@ module.exports = {
       })
     )
 
+    config.resolve.fallback = {
+      crypto: require.resolve('crypto-browserify'),
+      stream: require.resolve('stream-browserify'),
+      buffer: require.resolve('buffer/'),
+      http: require.resolve('stream-http'),
+      https: require.resolve('https-browserify'),
+      os: require.resolve('os-browserify/browser'),
+      path: require.resolve('path-browserify'),
+      vm: require.resolve('vm-browserify'),
+      zlib: require.resolve('browserify-zlib'),
+      assert: require.resolve('assert/'),
+      _stream_transform: require.resolve("readable-stream/transform"),
+      fs: false,
+      net: false,
+      tls: false,
+      child_process: false,
+
+    }
     // Return the altered config
     return config
   },