fix(passport): User able to disconnect the wallet and still sign in u…

…sing the earlier triggered MetaMask notification (#2393)
proofzero · Jun 12, 2023 · ad88012 · ad88012
1 parent 21d2ad4
commit ad88012
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 26 deletions.
diff --git a/apps/passport/app/routes/authenticate/$clientId/index.tsx b/apps/passport/app/routes/authenticate/$clientId/index.tsx
@@ -199,7 +199,7 @@ const InnerComponent = ({
         signData,
         navigate,
         authnQueryParams,
-        loading,
+        loading: loading || transitionState !== 'idle',
         walletConnectCallback: async (address) => {
           if (loading) return
           // fetch nonce and kickoff sign flow

diff --git a/packages/design-system/src/atoms/buttons/connect-button/ConnectButton.tsx b/packages/design-system/src/atoms/buttons/connect-button/ConnectButton.tsx
@@ -152,32 +152,57 @@ export function ConnectButton({
 
               {isConnected && (
                 <Popover>
-                  {({ open }) => (
-                    <>
-                      <Popover.Button className="h-full px-2 lg:px-3.5 flex justify-center items-center rounded-r-md bg-white dark:bg-[#374151] dark:border-gray-600 dark:hover:bg-gray-600 text-[#1f2937] shadow-sm border-l hover:bg-gray-100 dark:focus:bg-gray-600 focus:bg-white focus:ring-inset focus:ring-2 focus:ring-skin-primary">
-                        {!open && (
-                          <HiChevronDown className="w-5 h-5 text-skin-primary" />
-                        )}
-                        {open && (
-                          <HiChevronUp className="w-5 h-5 text-skin-primary" />
-                        )}
-                      </Popover.Button>
-                      <Popover.Panel className="absolute top-16 left-0 right-0 z-10 bg-white dark:bg-[#374151] dark:border-gray-600 dark:hover:bg-gray-600 rounded-md shadow-md">
-                        <button
-                          className="w-full px-[17px] py-5"
-                          onClick={() => {
-                            disconnect()
-                          }}
+                  {({ open }) => {
+                    const disabled = isConnecting || isSigning || isLoading
+                    return (
+                      <>
+                        <Popover.Button
+                          disabled={disabled}
+                          className={`h-full px-2 lg:px-3.5 flex justify-center
+                          items-center rounded-r-md bg-white dark:bg-[#374151]
+                          dark:border-gray-600 dark:hover:bg-gray-600
+                          shadow-sm border-l hover:bg-gray-100
+                          dark:focus:bg-gray-600 focus:bg-white
+                          focus:ring-inset focus:ring-2 focus:ring-skin-primary`}
                         >
-                          <Text
-                            size="sm"
-                            weight="normal"
-                            className="text-red-600 dark:text-red-400 text-start"
-                          >{`Disconnect ${ensName ?? truncatedAddress}`}</Text>
-                        </button>
-                      </Popover.Panel>
-                    </>
-                  )}
+                          {!open && (
+                            <HiChevronDown
+                              className={`w-5 h-5  ${
+                                disabled
+                                  ? 'text-gray-100 dark:text-gray-800'
+                                  : 'text-skin-primary'
+                              }`}
+                            />
+                          )}
+                          {open && (
+                            <HiChevronUp
+                              className={`w-5 h-5  ${
+                                disabled
+                                  ? 'text-gray-100 dark:text-gray-800'
+                                  : 'text-skin-primary'
+                              }`}
+                            />
+                          )}
+                        </Popover.Button>
+                        <Popover.Panel className="absolute top-16 left-0 right-0 z-10 bg-white dark:bg-[#374151] dark:border-gray-600 dark:hover:bg-gray-600 rounded-md shadow-md">
+                          <button
+                            className="w-full px-[17px] py-5"
+                            onClick={() => {
+                              disconnect()
+                            }}
+                          >
+                            <Text
+                              size="sm"
+                              weight="normal"
+                              className="text-red-600 dark:text-red-400 text-start"
+                            >{`Disconnect ${
+                              ensName ?? truncatedAddress
+                            }`}</Text>
+                          </button>
+                        </Popover.Panel>
+                      </>
+                    )
+                  }}
                 </Popover>
               )}
             </div>