[Web] [Libs] Disconnect dashboard wallet - web and SDK changes (#7209)

Co-authored-by: Nikki Kang <kangaroo233@gmail.com>
AudiusProject · Jan 18, 2024 · c3c2148 · c3c2148
1 parent b7d03e3
commit c3c2148
Show file tree

Hide file tree

Showing 8 changed files with 266 additions and 104 deletions.
diff --git a/packages/libs/src/sdk/oauth/types.ts b/packages/libs/src/sdk/oauth/types.ts
@@ -19,10 +19,15 @@ export const OAUTH_SCOPE_OPTIONS = ['read', 'write', 'write_once'] as const
 type OAuthScopesTuple = typeof OAUTH_SCOPE_OPTIONS
 export type OAuthScopeOption = OAuthScopesTuple[number]
 export type OAuthScope = OAuthScopeOption | OAuthScopeOption[]
-export type WriteOnceParams = {
-  tx: 'connect_dashboard_wallet'
-  wallet: string
-} // | ...
+export type WriteOnceParams =
+  | {
+      tx: 'connect_dashboard_wallet'
+      wallet: string
+    }
+  | {
+      tx: 'disconnect_dashboard_wallet'
+      wallet: string
+    }
 
 export type OAuthEnv = 'production' | 'staging'
 

diff --git a/packages/libs/src/sdk/utils/oauthScope.ts b/packages/libs/src/sdk/utils/oauthScope.ts
@@ -7,8 +7,9 @@ export const isOAuthScopeValid = (scope: string[]) => {
 
 export const isWriteOnceParams = (object: any): object is WriteOnceParams => {
   return (
-    'tx' in object &&
-    object.tx === 'connect_dashboard_wallet' &&
-    'wallet' in object
+    ('tx' in object &&
+      object.tx === 'connect_dashboard_wallet' &&
+      'wallet' in object) ||
+    (object.tx === 'disconnect_dashboard_wallet' && 'wallet' in object)
   )
 }
diff --git a/packages/web/src/pages/oauth-login-page/OAuthLoginPage.tsx b/packages/web/src/pages/oauth-login-page/OAuthLoginPage.tsx
@@ -1,4 +1,4 @@
-import { FormEvent, useCallback, useLayoutEffect, useState } from 'react'
+import { FormEvent, useLayoutEffect, useState } from 'react'
 
 import {
   accountSelectors,
@@ -18,12 +18,12 @@ import { audiusBackendInstance } from 'services/audius-backend/audius-backend-in
 import { reportToSentry } from 'store/errors/reportToSentry'
 import { SIGN_UP_PAGE } from 'utils/route'
 
-import styles from './OAuthLoginPage.module.css'
-import { CTAButton } from './components/CTAButton'
 import { ContentWrapper } from './components/ContentWrapper'
+import { CTAButton } from './components/CTAButton'
 import { PermissionsSection } from './components/PermissionsSection'
 import { useOAuthSetup } from './hooks'
 import { messages } from './messages'
+import styles from './OAuthLoginPage.module.css'
 import { WriteOnceTx } from './utils'
 
 const { signOut } = signOutActions
@@ -43,6 +43,7 @@ export const OAuthLoginPage = () => {
   const dispatch = useDispatch()
 
   const [isSubmitting, setIsSubmitting] = useState(false)
+
   const [emailInput, setEmailInput] = useState('')
   const [passwordInput, setPasswordInput] = useState('')
   const [showOtpInput, setShowOtpInput] = useState(false)
@@ -53,19 +54,6 @@ export const OAuthLoginPage = () => {
     null
   )
 
-  const {
-    scope,
-    tx,
-    queryParamsError,
-    loading,
-    userAlreadyWriteAuthorized,
-    apiKey,
-    appName,
-    userEmail,
-    authorize,
-    txParams
-  } = useOAuthSetup()
-
   const clearErrors = () => {
     setGeneralSubmitError(null)
     setSignInError(null)
@@ -90,23 +78,24 @@ export const OAuthLoginPage = () => {
     setEmailInput(input)
   }
 
-  const setAndLogGeneralSubmitError = useCallback(
-    (isUserError: boolean, errorMessage: string, error?: Error) => {
-      setGeneralSubmitError(errorMessage)
-      record(
-        make(Name.AUDIUS_OAUTH_ERROR, {
-          isUserError,
-          error: errorMessage,
-          appId: (apiKey || appName)!,
-          scope: scope!
-        })
-      )
-      if (error && !isUserError) {
-        reportToSentry({ level: ErrorLevel.Error, error })
-      }
-    },
-    [apiKey, appName, record, scope]
-  )
+  const setAndLogGeneralSubmitError = (
+    isUserError: boolean,
+    errorMessage: string,
+    error?: Error
+  ) => {
+    setGeneralSubmitError(errorMessage)
+    record(
+      make(Name.AUDIUS_OAUTH_ERROR, {
+        isUserError,
+        error: errorMessage,
+        appId: (apiKey || appName)!,
+        scope: scope!
+      })
+    )
+    if (error && !isUserError) {
+      reportToSentry({ level: ErrorLevel.Error, error })
+    }
+  }
 
   const setAndLogInvalidCredentialsError = () => {
     setSignInError(messages.invalidCredentialsError)
@@ -120,21 +109,31 @@ export const OAuthLoginPage = () => {
     )
   }
 
-  const handleAuthError = useCallback(
-    ({
-      isUserError,
-      errorMessage,
-      error
-    }: {
-      isUserError: boolean
-      errorMessage: string
-      error?: Error
-    }) => {
-      setIsSubmitting(false)
-      setAndLogGeneralSubmitError(isUserError, errorMessage, error)
-    },
-    [setAndLogGeneralSubmitError]
-  )
+  const handleAuthError = ({
+    isUserError,
+    errorMessage,
+    error
+  }: {
+    isUserError: boolean
+    errorMessage: string
+    error?: Error
+  }) => {
+    setIsSubmitting(false)
+    setAndLogGeneralSubmitError(isUserError, errorMessage, error)
+  }
+
+  const {
+    scope,
+    tx,
+    queryParamsError,
+    loading,
+    userAlreadyWriteAuthorized,
+    apiKey,
+    appName,
+    userEmail,
+    authorize,
+    txParams
+  } = useOAuthSetup({ onError: handleAuthError })
 
   const handleSignInFormSubmit = async (e: FormEvent) => {
     e.preventDefault()
@@ -174,8 +173,7 @@ export const OAuthLoginPage = () => {
     ) {
       // Success - perform Oauth authorization
       await authorize({
-        account: signInResponse.user,
-        onError: handleAuthError
+        account: signInResponse.user
       })
     } else if (
       (!signInResponse.error &&
@@ -208,14 +206,17 @@ export const OAuthLoginPage = () => {
       setAndLogGeneralSubmitError(false, messages.miscError)
     } else {
       setIsSubmitting(true)
-      authorize({ account, onError: handleAuthError })
+      authorize({ account })
     }
   }
 
   const handleSignOut = () => {
     dispatch(signOut())
   }
 
+  const isSubmitDisabled =
+    generalSubmitError === messages.disconnectDashboardWalletWrongUserError
+
   let titleText
   if (!isLoggedIn) {
     titleText = messages.signInAndAuthorizePrompt(appName as string)
@@ -341,6 +342,7 @@ export const OAuthLoginPage = () => {
               isSubmitting={isSubmitting}
               text={messages.signInButton}
               buttonType='submit'
+              isDisabled={isSubmitDisabled}
             />
           </form>
           <div className={styles.signUpButtonContainer}>

diff --git a/packages/web/src/pages/oauth-login-page/components/CTAButton.tsx b/packages/web/src/pages/oauth-login-page/components/CTAButton.tsx
@@ -6,11 +6,12 @@ import styles from '../OAuthLoginPage.module.css'
 
 export const CTAButton = ({
   isSubmitting,
+  isDisabled,
   ...restProps
 }: { isSubmitting: boolean } & ButtonProps) => {
   return (
     <Button
-      isDisabled={isSubmitting}
+      isDisabled={isSubmitting || isDisabled}
       rightIcon={
         isSubmitting ? (
           <LoadingSpinner className={styles.buttonLoadingSpinner} />

diff --git a/packages/web/src/pages/oauth-login-page/components/PermissionsSection.tsx b/packages/web/src/pages/oauth-login-page/components/PermissionsSection.tsx
@@ -33,11 +33,21 @@ const PermissionDetail = ({ className, children }: PermissionDetailProps) => {
   )
 }
 
+const getWriteOncePermissionTitle = (tx: WriteOnceTx | null) => {
+  switch (tx) {
+    case 'connect_dashboard_wallet':
+      return messages.connectDashboardWalletAccess
+    case 'disconnect_dashboard_wallet':
+      return messages.disconnectDashboardWalletAccess
+  }
+}
+
 export const PermissionsSection = ({
   scope,
   isLoggedIn,
   userEmail,
-  txParams
+  txParams,
+  tx
 }: {
   scope: string | string[] | null
   tx: WriteOnceTx | null
@@ -79,7 +89,7 @@ export const PermissionsSection = ({
               {scope === 'write'
                 ? messages.writeAccountAccess
                 : scope === 'write_once'
-                ? messages.connectDashboardWalletAccess
+                ? getWriteOncePermissionTitle(tx)
                 : messages.readOnlyAccountAccess}
             </PermissionText>
             {scope === 'write' ? (
@@ -91,7 +101,7 @@ export const PermissionsSection = ({
             ) : null}
             {scope === 'write_once' ? (
               <PermissionDetail>
-                {txParams?.wallet.slice(0, 4)}...{txParams?.wallet.slice(-4)}
+                {txParams?.wallet.slice(0, 6)}...{txParams?.wallet.slice(-4)}
               </PermissionDetail>
             ) : null}
           </div>