[C-2316] Add remote config for all oauth verification (#3052)

apps/audius-client/packages/common/src/services/remote-config/defaults.ts

@@ -87,6 +87,10 @@ export const remoteConfigBooleanDefaults: {
 } = {
   [BooleanKeys.DISPLAY_INSTAGRAM_VERIFICATION]: true,
   [BooleanKeys.DISPLAY_INSTAGRAM_VERIFICATION_WEB_AND_DESKTOP]: true,
+  [BooleanKeys.DISPLAY_TWITTER_VERIFICATION]: true,
+  [BooleanKeys.DISPLAY_TWITTER_VERIFICATION_WEB_AND_DESKTOP]: true,
+  [BooleanKeys.DISPLAY_TIKTOK_VERIFICATION]: true,
+  [BooleanKeys.DISPLAY_TIKTOK_VERIFICATION_WEB_AND_DESKTOP]: true,
   [BooleanKeys.DISPLAY_WEB3_PROVIDER_WALLET_CONNECT]: true,
   [BooleanKeys.DISPLAY_WEB3_PROVIDER_BITSKI]: true,
   [BooleanKeys.DISPLAY_WEB3_PROVIDER_WALLET_LINK]: true,

apps/audius-client/packages/common/src/services/remote-config/feature-flags.ts

@@ -29,7 +29,6 @@ export enum FeatureFlags {
   SHARE_TO_STORY = 'share_to_story_2',
   READ_SUBSCRIBERS_FROM_DISCOVERY_ENABLED = 'read_subscribers_from_discovery_enabled',
   MOBILE_WALLET_CONNECT = 'mobile_wallet_connect_final',
-  COMPLETE_PROFILE_WITH_TIKTOK = 'complete_profile_with_tiktok_2',
   VERIFY_HANDLE_WITH_TIKTOK = 'verify_handle_with_tiktok',
   AUDIO_TRANSACTIONS_HISTORY = 'audio_transactions_history',
   RATE_CTA_ENABLED = 'rate_cta_enabled_v2',
@@ -90,7 +89,6 @@ export const flagDefaults: FlagDefaults = {
   [FeatureFlags.SHARE_TO_STORY]: false,
   [FeatureFlags.READ_SUBSCRIBERS_FROM_DISCOVERY_ENABLED]: false,
   [FeatureFlags.MOBILE_WALLET_CONNECT]: false,
-  [FeatureFlags.COMPLETE_PROFILE_WITH_TIKTOK]: false,
   [FeatureFlags.VERIFY_HANDLE_WITH_TIKTOK]: false,
   [FeatureFlags.AUDIO_TRANSACTIONS_HISTORY]: false,
   [FeatureFlags.RATE_CTA_ENABLED]: false,

apps/audius-client/packages/common/src/services/remote-config/types.ts

@@ -181,6 +181,22 @@ export enum BooleanKeys {
    * Boolean to show instagram verification on web + desktop.
    */
   DISPLAY_INSTAGRAM_VERIFICATION_WEB_AND_DESKTOP = 'DISPLAY_INSTAGRAM_VERIFICATION_WEB_AND_DESKTOP',
+  /**
+   * Boolean to show twitter verification on mobile.
+   */
+  DISPLAY_TWITTER_VERIFICATION = 'DISPLAY_TWITTER_VERIFICATION',
+  /**
+   * Boolean to show twitter verification on web + desktop.
+   */
+  DISPLAY_TWITTER_VERIFICATION_WEB_AND_DESKTOP = 'DISPLAY_TWITTER_VERIFICATION_WEB_AND_DESKTOP',
+  /**
+   * Boolean to show twitter verification on mobile.
+   */
+  DISPLAY_TIKTOK_VERIFICATION = 'DISPLAY_TIKTOK_VERIFICATION',
+  /**
+   * Boolean to show twitter verification on web + desktop.
+   */
+  DISPLAY_TIKTOK_VERIFICATION_WEB_AND_DESKTOP = 'DISPLAY_TIKTOK_VERIFICATION_WEB_AND_DESKTOP',
 
   /**
    * Boolean to skip the rollover nodes sanity check.

apps/audius-client/packages/mobile/src/screens/settings-screen/AccountVerificationScreen.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from 'react'
 
-import { Status, accountSelectors, FeatureFlags } from '@audius/common'
+import { Status, accountSelectors, BooleanKeys } from '@audius/common'
 import * as signOnActions from 'common/store/pages/signon/actions'
 import { getHandleField } from 'common/store/pages/signon/selectors'
 import type { EditableField } from 'common/store/pages/signon/types'
@@ -20,7 +20,7 @@ import { TikTokAuthButton } from 'app/components/tiktok-auth'
 import { ProfilePicture } from 'app/components/user'
 import UserBadges from 'app/components/user-badges'
 import { useNavigation } from 'app/hooks/useNavigation'
-import { useFeatureFlag } from 'app/hooks/useRemoteConfig'
+import { useRemoteVar } from 'app/hooks/useRemoteConfig'
 import { track, make } from 'app/services/analytics'
 import * as oauthActions from 'app/store/oauth/actions'
 import {
@@ -126,9 +126,13 @@ export const AccountVerificationScreen = () => {
   const tikTokError = useSelector(getTikTokError)
   const abandoned = useSelector(getAbandoned)
 
-  const { isEnabled: isTikTokEnabled } = useFeatureFlag(
-    FeatureFlags.COMPLETE_PROFILE_WITH_TIKTOK
+  const isTwitterEnabled = useRemoteVar(
+    BooleanKeys.DISPLAY_TWITTER_VERIFICATION
   )
+  const isInstagramEnabled = useRemoteVar(
+    BooleanKeys.DISPLAY_INSTAGRAM_VERIFICATION
+  )
+  const isTikTokEnabled = useRemoteVar(BooleanKeys.DISPLAY_TIKTOK_VERIFICATION)
 
   const handleField: EditableField = useSelector(getHandleField)
 
@@ -297,21 +301,27 @@ export const AccountVerificationScreen = () => {
     <View style={styles.contentContainer}>
       <Text style={styles.text}>{messages.gettingVerified}</Text>
       <Text style={styles.text}>{messages.handleMatch}</Text>
-      <SocialButton
-        color={'#1BA1F1'}
-        fullWidth
-        icon={IconTwitter}
-        onPress={handleTwitterPress}
-        styles={{ root: styles.socialButtonContainer }}
-        title={messages.verifyTwitter}
-      />
-      <SocialButton
-        fullWidth
-        icon={IconInstagram}
-        onPress={handleInstagramPress}
-        styles={{ root: styles.socialButtonContainer }}
-        title={messages.verifyInstagram}
-      />
+
+      {isTwitterEnabled ? (
+        <SocialButton
+          color={'#1BA1F1'}
+          fullWidth
+          icon={IconTwitter}
+          onPress={handleTwitterPress}
+          styles={{ root: styles.socialButtonContainer }}
+          title={messages.verifyTwitter}
+        />
+      ) : null}
+
+      {isInstagramEnabled ? (
+        <SocialButton
+          fullWidth
+          icon={IconInstagram}
+          onPress={handleInstagramPress}
+          styles={{ root: styles.socialButtonContainer }}
+          title={messages.verifyInstagram}
+        />
+      ) : null}
 
       {isTikTokEnabled ? (
         <TikTokAuthButton

apps/audius-client/packages/mobile/src/screens/signon/ProfileAuto.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useState } from 'react'
 
 import type { Name } from '@audius/common'
-import { FeatureFlags } from '@audius/common'
+import { BooleanKeys } from '@audius/common'
 import type { NativeStackScreenProps } from '@react-navigation/native-stack'
 import * as signOnActions from 'common/store/pages/signon/actions'
 import {
@@ -23,7 +23,7 @@ import { Text } from 'app/components/core'
 import LoadingSpinner from 'app/components/loading-spinner'
 import { SocialButton } from 'app/components/social-button'
 import { TikTokAuthButton } from 'app/components/tiktok-auth'
-import { useFeatureFlag } from 'app/hooks/useRemoteConfig'
+import { useRemoteVar } from 'app/hooks/useRemoteConfig'
 import { useToast } from 'app/hooks/useToast'
 import { track, make } from 'app/services/analytics'
 import * as oauthActions from 'app/store/oauth/actions'
@@ -164,9 +164,13 @@ const ProfileAuto = ({ navigation }: ProfileAutoProps) => {
   const abandoned = useSelector(getAbandoned)
   const handleField: EditableField = useSelector(getHandleField)
   const emailField: EditableField = useSelector(getEmailField)
-  const { isEnabled: isTikTokEnabled } = useFeatureFlag(
-    FeatureFlags.COMPLETE_PROFILE_WITH_TIKTOK
+  const isTwitterEnabled = useRemoteVar(
+    BooleanKeys.DISPLAY_TWITTER_VERIFICATION
   )
+  const isInstagramEnabled = useRemoteVar(
+    BooleanKeys.DISPLAY_INSTAGRAM_VERIFICATION
+  )
+  const isTikTokEnabled = useRemoteVar(BooleanKeys.DISPLAY_TIKTOK_VERIFICATION)
   const [isLoading, setIsLoading] = useState(false)
   const [hasNavigatedAway, setHasNavigatedAway] = useState(false)
   const [didValidateHandle, setDidValidateHandle] = useState(false)
@@ -435,21 +439,25 @@ const ProfileAuto = ({ navigation }: ProfileAutoProps) => {
               </View>
             </View>
 
-            <SocialButton
-              color={'#1BA1F1'}
-              fullWidth
-              icon={IconTwitter}
-              onPress={handleTwitterPress}
-              styles={{ root: styles.socialButtonContainer }}
-              title={messages.twitterButton}
-            />
-            <SocialButton
-              fullWidth
-              icon={IconInstagram}
-              onPress={handleInstagramPress}
-              styles={{ root: styles.socialButtonContainer }}
-              title={messages.instagramButton}
-            />
+            {isTwitterEnabled ? (
+              <SocialButton
+                color={'#1BA1F1'}
+                fullWidth
+                icon={IconTwitter}
+                onPress={handleTwitterPress}
+                styles={{ root: styles.socialButtonContainer }}
+                title={messages.twitterButton}
+              />
+            ) : null}
+            {isInstagramEnabled ? (
+              <SocialButton
+                fullWidth
+                icon={IconInstagram}
+                onPress={handleInstagramPress}
+                styles={{ root: styles.socialButtonContainer }}
+                title={messages.instagramButton}
+              />
+            ) : null}
             {isTikTokEnabled ? (
               <TikTokAuthButton
                 onPress={handleTikTokPress}

apps/audius-client/packages/web/src/components/social-proof/SocialProof.tsx

@@ -8,8 +8,7 @@ import {
   TwitterProfile,
   InstagramProfile,
   accountActions,
-  TikTokProfile,
-  FeatureFlags
+  TikTokProfile
 } from '@audius/common'
 import { useDispatch, useSelector } from 'react-redux'
 
@@ -20,7 +19,7 @@ import { InstagramAuthButton } from 'components/instagram-auth/InstagramAuthButt
 import LoadingSpinner from 'components/loading-spinner/LoadingSpinner'
 import { TikTokAuthButton } from 'components/tiktok-auth/TikTokAuthButton'
 import { TwitterAuthButton } from 'components/twitter-auth/TwitterAuthButton'
-import { useFlag, useRemoteVar } from 'hooks/useRemoteConfig'
+import { useRemoteVar } from 'hooks/useRemoteConfig'
 import ModalDrawer from 'pages/audio-rewards-page/components/modals/ModalDrawer'
 
 import styles from './SocialProof.module.css'
@@ -63,12 +62,14 @@ const VerifyBody = ({
   onTikTokLogin,
   onFailure
 }: VerifyBodyProps) => {
-  const displayInstagram = useRemoteVar(
+  const isTwitterEnabled = useRemoteVar(
+    BooleanKeys.DISPLAY_TWITTER_VERIFICATION_WEB_AND_DESKTOP
+  )
+  const isInstagramEnabled = useRemoteVar(
     BooleanKeys.DISPLAY_INSTAGRAM_VERIFICATION_WEB_AND_DESKTOP
   )
-
-  const { isEnabled: isTikTokEnabled } = useFlag(
-    FeatureFlags.COMPLETE_PROFILE_WITH_TIKTOK
+  const isTikTokEnabled = useRemoteVar(
+    BooleanKeys.DISPLAY_TIKTOK_VERIFICATION_WEB_AND_DESKTOP
   )
 
   const record = useRecord()
@@ -103,13 +104,15 @@ const VerifyBody = ({
     <div className={styles.container}>
       <p>{messages.description}</p>
       <div className={styles.btnContainer}>
-        <TwitterAuthButton
-          onSuccess={onTwitterLogin}
-          onFailure={(error: Error) => onFailure('twitter', error)}
-          onClick={handleClickTwitter}
-          text={messages.twitterConfirm}
-        />
-        {displayInstagram && (
+        {isTwitterEnabled ? (
+          <TwitterAuthButton
+            onSuccess={onTwitterLogin}
+            onFailure={(error: Error) => onFailure('twitter', error)}
+            onClick={handleClickTwitter}
+            text={messages.twitterConfirm}
+          />
+        ) : null}
+        {isInstagramEnabled && (
           <InstagramAuthButton
             onClick={handleClickInstagram}
             onSuccess={onInstagramLogin}

apps/audius-client/packages/web/src/pages/settings-page/components/desktop/VerificationModal.tsx

@@ -10,7 +10,6 @@ import {
   TwitterProfile,
   InstagramProfile,
   musicConfettiActions,
-  FeatureFlags,
   TikTokProfile
 } from '@audius/common'
 import { Modal, Button, ButtonType, IconNote, ButtonSize } from '@audius/stems'
@@ -25,7 +24,7 @@ import LoadingSpinner from 'components/loading-spinner/LoadingSpinner'
 import { TikTokAuthButton } from 'components/tiktok-auth/TikTokAuthButton'
 import { TwitterAuthButton } from 'components/twitter-auth/TwitterAuthButton'
 import UserBadges from 'components/user-badges/UserBadges'
-import { useFlag, useRemoteVar } from 'hooks/useRemoteConfig'
+import { useRemoteVar } from 'hooks/useRemoteConfig'
 import { useUserProfilePicture } from 'hooks/useUserProfilePicture'
 import { profilePage } from 'utils/route'
 
@@ -67,12 +66,14 @@ type VerifyBodyProps = {
 }
 
 const VerifyBody = (props: VerifyBodyProps) => {
-  const displayInstagram = useRemoteVar(
+  const isTwitterEnabled = useRemoteVar(
+    BooleanKeys.DISPLAY_TWITTER_VERIFICATION_WEB_AND_DESKTOP
+  )
+  const isInstagramEnabled = useRemoteVar(
     BooleanKeys.DISPLAY_INSTAGRAM_VERIFICATION_WEB_AND_DESKTOP
   )
-
-  const { isEnabled: isTikTokEnabled } = useFlag(
-    FeatureFlags.COMPLETE_PROFILE_WITH_TIKTOK
+  const isTikTokEnabled = useRemoteVar(
+    BooleanKeys.DISPLAY_TIKTOK_VERIFICATION_WEB_AND_DESKTOP
   )
   const record = useRecord()
   const { handle, onClick } = props
@@ -106,15 +107,18 @@ const VerifyBody = (props: VerifyBodyProps) => {
       <p className={styles.text}>{messages.description}</p>
       <div className={cn(styles.text, styles.warning)}>{messages.warning}</div>
       <div className={styles.btnContainer}>
-        <TwitterAuthButton
-          onClick={handleClickTwitter}
-          onFailure={props.onFailure}
-          onSuccess={props.onTwitterLogin}
-          text={messages.twitterVerify}
-          className={styles.socialButton}
-          containerClassName={styles.socialButton}
-        />
-        {displayInstagram ? (
+        {isTwitterEnabled ? (
+          <TwitterAuthButton
+            onClick={handleClickTwitter}
+            onFailure={props.onFailure}
+            onSuccess={props.onTwitterLogin}
+            text={messages.twitterVerify}
+            className={styles.socialButton}
+            containerClassName={styles.socialButton}
+          />
+        ) : null}
+
+        {isInstagramEnabled ? (
           <InstagramAuthButton
             onClick={handleClickInstagram}
             onFailure={props.onFailure}

apps/audius-client/packages/web/src/pages/settings-page/components/mobile/VerificationPage.tsx

@@ -9,7 +9,6 @@ import {
   BooleanKeys,
   InstagramProfile,
   TwitterProfile,
-  FeatureFlags,
   TikTokProfile
 } from '@audius/common'
 import {
@@ -29,7 +28,7 @@ import Page from 'components/page/Page'
 import { TikTokAuthButton } from 'components/tiktok-auth/TikTokAuthButton'
 import { TwitterAuthButton } from 'components/twitter-auth/TwitterAuthButton'
 import UserBadges from 'components/user-badges/UserBadges'
-import { useFlag, useRemoteVar } from 'hooks/useRemoteConfig'
+import { useRemoteVar } from 'hooks/useRemoteConfig'
 import { useUserProfilePicture } from 'hooks/useUserProfilePicture'
 import { profilePage } from 'utils/route'
 
@@ -70,12 +69,14 @@ type VerifyBodyProps = {
 }
 
 const VerifyBody = (props: VerifyBodyProps) => {
-  const displayInstagram = useRemoteVar(
-    BooleanKeys.DISPLAY_INSTAGRAM_VERIFICATION
+  const isTwitterEnabled = useRemoteVar(
+    BooleanKeys.DISPLAY_TWITTER_VERIFICATION_WEB_AND_DESKTOP
   )
-
-  const { isEnabled: isTikTokEnabled } = useFlag(
-    FeatureFlags.COMPLETE_PROFILE_WITH_TIKTOK
+  const isInstagramEnabled = useRemoteVar(
+    BooleanKeys.DISPLAY_INSTAGRAM_VERIFICATION_WEB_AND_DESKTOP
+  )
+  const isTikTokEnabled = useRemoteVar(
+    BooleanKeys.DISPLAY_TIKTOK_VERIFICATION_WEB_AND_DESKTOP
   )
 
   const record = useRecord()
@@ -109,15 +110,17 @@ const VerifyBody = (props: VerifyBodyProps) => {
       <div className={styles.text}>{messages.instructions}</div>
       <div className={cn(styles.text, styles.warning)}>{messages.warning}</div>
       <div className={styles.btnContainer}>
-        <TwitterAuthButton
-          onClick={handleClickTwitter}
-          onSuccess={props.onTwitterLogin}
-          onFailure={props.onFailure}
-          className={styles.socialButton}
-          containerClassName={styles.socialButton}
-          text={messages.twitterVerify}
-        />
-        {displayInstagram ? (
+        {isTwitterEnabled ? (
+          <TwitterAuthButton
+            onClick={handleClickTwitter}
+            onSuccess={props.onTwitterLogin}
+            onFailure={props.onFailure}
+            className={styles.socialButton}
+            containerClassName={styles.socialButton}
+            text={messages.twitterVerify}
+          />
+        ) : null}
+        {isInstagramEnabled ? (
           <InstagramAuthButton
             onClick={handleClickInstagram}
             onSuccess={props.onInstagramLogin}