wip

apps/console/app/root.tsx

@@ -81,6 +81,7 @@ export type LoaderData = {
   ENV: {
     INTERNAL_GOOGLE_ANALYTICS_TAG: string
     REMIX_DEV_SERVER_WS_PORT?: number
+    WALLET_CONNECT_PROJECT_ID: string
   }
 }
 
@@ -127,6 +128,7 @@ export const loader: LoaderFunction = async ({ request, context }) => {
       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'
@@ -50,10 +50,12 @@ import { ThemeContext } from '@proofzero/design-system/src/contexts/theme'
 import { Helmet } from 'react-helmet'
 import { notificationHandlerType } from '~/types'
 
-const client = createClient(
-  // @ts-ignore
-  getDefaultClient({
+const config = createConfig(
+  getDefaultConfig({
     appName: 'Rollup',
+    walletConnectProjectId:
+    //@ts-ignore
+      typeof window !== 'undefined' && window.ENV.WALLET_CONNECT_PROJECT_ID,
   })
 )
 
@@ -819,7 +821,7 @@ export default () => {
                             .map((p) => p.key)}
                           mapperArgs={{
                             clientId: 'Foo',
-                            wagmiClient: client,
+                            wagmiConfig: config,
                             signData: null,
                           }}
                           radius={radius}

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.36",
+    "wagmi": "1.0.6"
   },
   "devDependencies": {
     "@babel/core": "7.20.2",

apps/passport/app/root.tsx

@@ -102,6 +102,7 @@ export const loader: LoaderFunction = async ({ request, context, params }) => {
       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,
@@ -24,11 +24,13 @@ import { Text } from '@proofzero/design-system/src/atoms/text/Text'
 import { Avatar } from '@proofzero/packages/design-system/src/atoms/profile/avatar/Avatar'
 import { Button } from '@proofzero/packages/design-system/src/atoms/buttons/Button'
 
-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,
@@ -188,7 +190,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.36",
+    "wagmi": "1.0.6"
   },
   "devDependencies": {
     "@babel/core": "^7.20.2",

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.6"
   },
   "devDependencies": {
     "@babel/core": "7.20.2",

packages/design-system/src/templates/authentication/Authentication.tsx

@@ -5,7 +5,7 @@ import subtractLogo from '../../assets/subtract-logo.svg'
 
 import { Text } from '../../atoms/text/Text'
 
-import { WagmiConfig, Client } from 'wagmi'
+import { WagmiConfig, Config } from 'wagmi'
 import ConnectOAuthButton, {
   OAuthProvider,
 } from '../../atoms/buttons/connect-oauth-button'
@@ -120,7 +120,7 @@ export default ({
 
 type DisplayKeyMapperArgs = {
   clientId: string
-  wagmiClient: Client
+  wagmiConfig: Config
   signData: any
   walletConnectCallback?: (address: string) => void
   walletSignCallback?: (
@@ -141,7 +141,7 @@ const displayKeyMapper = (
   key: string,
   {
     clientId,
-    wagmiClient,
+    wagmiConfig,
     signData,
     walletConnectCallback = () => {},
     walletSignCallback = () => {},
@@ -158,7 +158,7 @@ const displayKeyMapper = (
   switch (key) {
     case 'wallet':
       el = (
-        <WagmiConfig client={wagmiClient}>
+        <WagmiConfig config={wagmiConfig}>
           <ConnectButton
             key={key}
             signData={signData}