fix(passport): Hitting Reject on wallet login prompt leads to unrecoverable button state

apps/console/package.json

@@ -44,8 +44,8 @@
     "react-helmet": "6.1.0",
     "react-icons": "4.8.0",
     "tiny-invariant": "1.3.1",
-    "viem": "0.3.41",
-    "wagmi": "1.0.9"
+    "viem": "1.0.0",
+    "wagmi": "1.1.1"
   },
   "devDependencies": {
     "@babel/core": "7.20.2",

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

@@ -108,12 +108,6 @@ const InnerComponent = ({
 
   const navigate = useNavigate()
 
-  useEffect(() => {
-    if (transitionState === 'idle') {
-      setLoading(false)
-    }
-  }, [transitionState])
-
   useEffect(() => {
     const url = new URL(window.location.href)
 
@@ -161,8 +155,8 @@ const InnerComponent = ({
                   {appProps?.appTheme?.heading
                     ? appProps.appTheme.heading
                     : appProps?.name
-                      ? `Login to ${appProps?.name}`
-                      : AuthenticationScreenDefaults.defaultHeading}
+                    ? `Login to ${appProps?.name}`
+                    : AuthenticationScreenDefaults.defaultHeading}
                 </h1>
                 <h2
                   style={{ color: '#6B7280' }}
@@ -210,7 +204,7 @@ const InnerComponent = ({
           if (loading) return
           // fetch nonce and kickoff sign flow
           setLoading(true)
-          fetch(`/connect/${address}/sign`) // NOTE: note using fetch because it messes with wagmi state
+          await fetch(`/connect/${address}/sign`) // NOTE: note using fetch because it messes with wagmi state
             .then((res) =>
               res.json<{
                 nonce: string
@@ -232,6 +226,7 @@ const InnerComponent = ({
                   'Could not fetch nonce for signing authentication message',
               })
             })
+          setLoading(false)
         },
         walletSignCallback: (address, signature, nonce, state) => {
           console.debug('signing complete')

apps/passport/app/routes/connect/$address/sign.tsx

@@ -12,7 +12,10 @@ import { parseJwt } from '@proofzero/packages/utils'
 import { BadRequestError } from '@proofzero/errors'
 import { getRollupReqFunctionErrorWrapper } from '@proofzero/utils/errors'
 import type { AccountURN } from '@proofzero/urns/account'
-import { AuthenticationScreenDefaults, appendNonceTemplate } from '@proofzero/design-system/src/templates/authentication/Authentication'
+import {
+  AuthenticationScreenDefaults,
+  appendNonceTemplate,
+} from '@proofzero/design-system/src/templates/authentication/Authentication'
 
 import { getStarbaseClient } from '~/platform.server'
 
@@ -95,7 +98,6 @@ export const action: ActionFunction = getRollupReqFunctionErrorWrapper(
 
     const accountURNFromAddress = await addressClient.getAccount.query()
 
-
     if (appData?.rollup_action === 'connect' && existing) {
       const accountURN = parseJwt(jwt).sub! as AccountURN
       if (accountURN === accountURNFromAddress) {

apps/passport/package.json

@@ -48,8 +48,8 @@
     "remix-auth-oauth2": "1.5.0",
     "remix-auth-twitter": "1.0.0",
     "remix-utils": "6.3.0",
-    "viem": "0.3.41",
-    "wagmi": "1.0.9"
+    "viem": "1.0.0",
+    "wagmi": "1.1.1"
   },
   "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": "1.0.9"
+    "wagmi": "1.1.1"
   },
   "devDependencies": {
     "@babel/core": "7.20.2",

packages/design-system/src/atoms/buttons/connect-button/ConnectButton.tsx

@@ -13,7 +13,10 @@ import { Popover } from '@headlessui/react'
 import { HiChevronDown, HiChevronUp } from 'react-icons/hi'
 import { ThemeContext } from '../../../contexts/theme'
 
-import { AuthenticationScreenDefaults, appendNonceTemplate } from '../../../templates/authentication/Authentication'
+import {
+  AuthenticationScreenDefaults,
+  appendNonceTemplate,
+} from '../../../templates/authentication/Authentication'
 
 export type ConnectButtonProps = {
   signMessageTemplate?: string
@@ -107,13 +110,16 @@ export function ConnectButton({
                 onClick={
                   isConnected
                     ? () => {
-                      return address && connectCallback(address)
-                    }
+                        return address && connectCallback(address)
+                      }
                     : show
                 }
-                className={`flex-1 button hover:bg-gray-100 flex flex-row items-center space-x-3 px-[17px] rounded-l-md ${isConnected ? '' : 'rounded-r-md'
-                  } ${fullSize ? 'justify-start' : 'justify-center'
-                  } bg-white dark:bg-[#374151] dark:border-gray-600 dark:hover:bg-gray-600 focus:bg-white dark:focus:bg-gray-600 focus:ring-inset focus:ring-2 focus:ring-skin-primary truncate`}
+                className={`flex-1 button hover:bg-gray-100 flex flex-row
+                    items-center space-x-3 px-[17px] rounded-l-md ${
+                      isConnected ? '' : 'rounded-r-md'
+                    } ${
+                  fullSize ? 'justify-start' : 'justify-center'
+                } bg-white dark:bg-[#374151] dark:border-gray-600 dark:hover:bg-gray-600 focus:bg-white dark:focus:bg-gray-600 focus:ring-inset focus:ring-2 focus:ring-skin-primary truncate`}
               >
                 {(isSigning || isLoading) && isConnected ? (
                   <Spinner size={16} />
@@ -134,11 +140,12 @@ export function ConnectButton({
                         ? 'Signing... (please check wallet)'
                         : 'Continuing...'
                       : isConnected && address
-                        ? `${displayContinueWith ? `Continue with ` : ''}${ensName ?? truncatedAddress
+                      ? `${displayContinueWith ? `Continue with ` : ''}${
+                          ensName ?? truncatedAddress
                         }`
-                        : !isConnecting
-                          ? `${displayContinueWith ? `Continue with ` : ''}Wallet`
-                          : 'Connecting'}
+                      : !isConnecting
+                      ? `${displayContinueWith ? `Continue with ` : ''}Wallet`
+                      : 'Connecting'}
                   </Text>
                 )}
               </button>

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

@@ -45,7 +45,8 @@ This will not trigger a blockchain transaction or cost any gas fees.`,
   radius: 'md',
 }
 
-export const appendNonceTemplate = (signMessage: string) => `${signMessage}${signMessage.endsWith('\n') ? '' : '\n'}\n{{nonce}}`
+export const appendNonceTemplate = (signMessage: string) =>
+  `${signMessage}${signMessage.endsWith('\n') ? '' : '\n'}\n{{nonce}}`
 
 export type AuthenticationProps = {
   logoURL?: string
@@ -72,7 +73,8 @@ export default function Authentication({
       <div
         className={`flex grow-0 flex-col items-center
          gap-4 mx-auto bg-white dark:bg-[#1F2937] p-6 min-h-[100dvh] lg:min-h-[580px]
-          max-h-[100dvh] w-full lg:w-[418px] lg:rounded-${theme?.radius ?? AuthenticationScreenDefaults.radius
+          max-h-[100dvh] w-full lg:w-[418px] lg:rounded-${
+            theme?.radius ?? AuthenticationScreenDefaults.radius
           }
           mt-auto border border-[#D1D5DB] dark:border-gray-600`}
         style={{
@@ -145,10 +147,10 @@ const displayKeyMapper = (
   {
     clientId,
     signData,
-    walletConnectCallback = () => { },
-    walletSignCallback = () => { },
-    walletConnectErrorCallback = () => { },
-    navigate = () => { },
+    walletConnectCallback = () => {},
+    walletSignCallback = () => {},
+    walletConnectErrorCallback = () => {},
+    navigate = () => {},
     authnQueryParams,
     loading = false,
     flex = false,