[C-2287] Update wallet connect language, flags, icons (#3192)

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

@@ -26,7 +26,6 @@ export enum FeatureFlags {
   AUTO_SUBSCRIBE_ON_FOLLOW = 'auto_subscribe_on_follow',
   STREAM_MP3 = 'stream_mp3',
   READ_SUBSCRIBERS_FROM_DISCOVERY_ENABLED = 'read_subscribers_from_discovery_enabled',
-  MOBILE_WALLET_CONNECT = 'mobile_wallet_connect_final',
   VERIFY_HANDLE_WITH_TIKTOK = 'verify_handle_with_tiktok',
   AUDIO_TRANSACTIONS_HISTORY = 'audio_transactions_history',
   RATE_CTA_ENABLED = 'rate_cta_enabled_v2',
@@ -86,7 +85,6 @@ export const flagDefaults: FlagDefaults = {
   [FeatureFlags.AUTO_SUBSCRIBE_ON_FOLLOW]: false,
   [FeatureFlags.STREAM_MP3]: false,
   [FeatureFlags.READ_SUBSCRIBERS_FROM_DISCOVERY_ENABLED]: false,
-  [FeatureFlags.MOBILE_WALLET_CONNECT]: false,
   [FeatureFlags.VERIFY_HANDLE_WITH_TIKTOK]: false,
   [FeatureFlags.AUDIO_TRANSACTIONS_HISTORY]: false,
   [FeatureFlags.RATE_CTA_ENABLED]: false,

apps/audius-client/packages/mobile/src/app/Drawers.tsx

@@ -11,7 +11,6 @@ import { ChallengeRewardsDrawer } from 'app/components/challenge-rewards-drawer'
 import { ChatActionsDrawer } from 'app/components/chat-actions-drawer'
 import { CognitoDrawer } from 'app/components/cognito-drawer/CognitoDrawer'
 import { CollectibleDetailsDrawer } from 'app/components/collectible-details-drawer'
-import { ConnectWalletsDrawer } from 'app/components/connect-wallets-drawer'
 import { DeactivateAccountConfirmationDrawer } from 'app/components/deactivate-account-confirmation-drawer'
 import { DeletePlaylistConfirmationDrawer } from 'app/components/delete-playlist-confirmation-drawer'
 import { DownloadTrackProgressDrawer } from 'app/components/download-track-progress-drawer'
@@ -86,7 +85,6 @@ const commonDrawersMap: { [Modal in Modals]?: ComponentType } = {
   ChallengeRewardsExplainer: ChallengeRewardsDrawer,
   APIRewardsExplainer: ApiRewardsDrawer,
   TransferAudioMobileWarning: TransferAudioMobileDrawer,
-  MobileConnectWalletsDrawer: ConnectWalletsDrawer,
   MobileEditCollectiblesDrawer: EditCollectiblesDrawer,
   Share: ShareDrawer,
   ShareSoundToTikTok: ShareToTikTokDrawer,

apps/audius-client/packages/mobile/src/screens/audio-screen/AudioScreen.tsx

@@ -10,8 +10,7 @@ import {
   walletSelectors,
   walletActions,
   getTierAndNumberForBalance,
-  modalsActions,
-  FeatureFlags
+  modalsActions
 } from '@audius/common'
 import { useFocusEffect } from '@react-navigation/native'
 import { Image, Linking, View } from 'react-native'
@@ -24,6 +23,7 @@ import IconDiscord from 'app/assets/images/iconDiscord.svg'
 import IconInfo from 'app/assets/images/iconInfo.svg'
 import IconReceive from 'app/assets/images/iconReceive.svg'
 import IconSend from 'app/assets/images/iconSend.svg'
+import IconWallet from 'app/assets/images/iconWallet.svg'
 import Bronze from 'app/assets/images/tokenBadgeBronze108.png'
 import Gold from 'app/assets/images/tokenBadgeGold108.png'
 import Platinum from 'app/assets/images/tokenBadgePlatinum108.png'
@@ -39,7 +39,7 @@ import {
   ScreenContent
 } from 'app/components/core'
 import { useNavigation } from 'app/hooks/useNavigation'
-import { useFeatureFlag, useRemoteVar } from 'app/hooks/useRemoteConfig'
+import { useRemoteVar } from 'app/hooks/useRemoteConfig'
 import { makeStyles } from 'app/styles'
 import { useThemeColors } from 'app/utils/theme'
 
@@ -61,7 +61,7 @@ const messages = {
   totalAudio: 'Total $AUDIO',
   send: 'Send $AUDIO',
   receive: 'Receive $AUDIO',
-  connect: 'Connect Wallets',
+  manageWallet: 'Manage Wallets',
   rewards: 'Earn Rewards',
   rewardsBody1: 'Complete tasks to earn $AUDIO tokens!',
   trending: 'Trending Competitions',
@@ -174,9 +174,6 @@ export const AudioScreen = () => {
     useThemeColors()
   const dispatch = useDispatch()
   const navigation = useNavigation()
-  const { isEnabled: isMobileWalletConnectEnabled } = useFeatureFlag(
-    FeatureFlags.MOBILE_WALLET_CONNECT
-  )
   const audioFeaturesDegradedText = useRemoteVar(
     StringKeys.AUDIO_FEATURES_DEGRADED_TEXT
   )
@@ -261,15 +258,9 @@ export const AudioScreen = () => {
     )
   }, [dispatch])
 
-  const handlePressConnectWallets = useCallback(() => {
-    if (isMobileWalletConnectEnabled) {
-      navigation.navigate('WalletConnect')
-    } else {
-      dispatch(
-        setVisibility({ modal: 'MobileConnectWalletsDrawer', visible: true })
-      )
-    }
-  }, [isMobileWalletConnectEnabled, dispatch, navigation])
+  const handlePressManageWallets = useCallback(() => {
+    navigation.navigate('WalletConnect')
+  }, [navigation])
 
   const renderWalletTile = () => {
     return (
@@ -307,15 +298,17 @@ export const AudioScreen = () => {
           onPress={handlePressReceive}
         />
         <Button
-          title={messages.connect}
+          title={messages.manageWallet}
           styles={{
             root: styles.buttonRoot,
             text: styles.buttonText,
             button: styles.button
           }}
           variant='commonAlt'
+          iconPosition='left'
           size='medium'
-          onPress={handlePressConnectWallets}
+          icon={IconWallet}
+          onPress={handlePressManageWallets}
         />
       </Tile>
     )

apps/audius-client/packages/mobile/src/screens/wallet-connect/WalletConnectScreen.tsx

@@ -3,8 +3,8 @@ import { View } from 'react-native'
 import { useDispatch } from 'react-redux'
 import { useEffectOnce } from 'react-use'
 
-import IconLink from 'app/assets/images/iconLink.svg'
 import IconRemove from 'app/assets/images/iconRemove.svg'
+import IconWallet from 'app/assets/images/iconWallet.svg'
 import { Text, Screen, ScreenContent } from 'app/components/core'
 import { useNavigation } from 'app/hooks/useNavigation'
 import { makeStyles } from 'app/styles'
@@ -19,7 +19,7 @@ import { useWalletStatusToasts } from './useWalletStatusToasts'
 const { fetchAssociatedWallets } = tokenDashboardPageActions
 
 const messages = {
-  title: 'Connect Wallets',
+  title: 'Manage Wallets',
   subtitle: 'Connect Additional Wallets With Your Account',
   text: 'Show off your NFT Collectibles and flaunt your $AUDIO with a VIP badge on your profile.',
   linkedWallets: 'Linked Wallets',
@@ -63,7 +63,7 @@ export const WalletConnectScreen = () => {
   return (
     <Screen
       title={messages.title}
-      icon={IconLink}
+      icon={IconWallet}
       variant='white'
       topbarLeft={
         <TopBarIconButton icon={IconRemove} onPress={navigation.goBack} />

apps/audius-client/packages/web/src/components/mobile-connect-wallets-drawer/MobileConnectWalletsDrawer.tsx

@@ -4,7 +4,7 @@ import Drawer from 'components/drawer/Drawer'
 import styles from './MobileConnectWalletsDrawer.module.css'
 
 const messages = {
-  title: 'Connect Wallets',
+  title: 'Manage Wallets',
   visit:
     'To connect additional wallets please visit audius.co from a desktop browser'
 }

apps/audius-client/packages/web/src/pages/audio-rewards-page/Tiles.tsx

@@ -33,7 +33,6 @@ const messages = {
   sendLabel: 'SEND $AUDIO',
   audio: '$AUDIO',
   manageWallets: 'Manage Wallets',
-  connectWallets: 'Connect Other Wallets',
   totalAudio: 'Total $AUDIO'
 }
 
@@ -120,8 +119,6 @@ export const WalletTile = ({ className }: { className?: string }) => {
     setOpen(false)
   }, [setOpen])
 
-  const hasMultipleWallets = useSelector(getHasAssociatedWallets)
-
   return (
     <Tile className={cn([styles.walletTile, className])}>
       <>
@@ -148,11 +145,7 @@ export const WalletTile = ({ className }: { className?: string }) => {
           />
           <Button
             className={cn(styles.balanceBtn, styles.connectWalletsBtn)}
-            text={
-              hasMultipleWallets
-                ? messages.manageWallets
-                : messages.connectWallets
-            }
+            text={messages.manageWallets}
             includeHoverAnimations
             textClassName={styles.textClassName}
             onClick={onClickConnectWallets}

apps/audius-client/packages/web/src/pages/audio-rewards-page/WalletModal.tsx

@@ -38,7 +38,6 @@ import SendingModalBody from './components/SendingModalBody'
 import ModalDrawer from './components/modals/ModalDrawer'
 const { getAccountBalance } = walletSelectors
 const {
-  getHasAssociatedWallets,
   getAssociatedWallets,
   getModalState,
   getModalVisible,
@@ -57,7 +56,6 @@ const messages = {
   sending: 'Your $AUDIO is Sending',
   sent: 'Your $AUDIO Has Been Sent',
   sendError: 'Uh oh! Something went wrong sending your $AUDIO.',
-  connectOtherWallets: 'Connect Other Wallets',
   manageWallets: 'Manage Wallets',
   removeWallets: 'Remove Wallet',
   awaitConvertingEthToSolAudio: 'Hold On a Moment'
@@ -78,20 +76,9 @@ export const TitleWrapper = ({
   )
 }
 
-const AddWalletTitle = () => {
-  const hasMultipleWallets = useSelector(getHasAssociatedWallets)
-  return (
-    <>
-      {hasMultipleWallets
-        ? messages.manageWallets
-        : messages.connectOtherWallets}
-    </>
-  )
-}
-
 const titlesMap = {
   CONNECT_WALLETS: {
-    ADD_WALLET: () => <AddWalletTitle />,
+    ADD_WALLET: () => messages.manageWallets,
     REMOVE_WALLET: () => messages.removeWallets,
     ERROR: () => messages.sendError
   },

apps/audius-client/packages/web/src/pages/audio-rewards-page/components/WalletActionsTile.tsx

@@ -1,7 +1,6 @@
 import {
   BNWei,
   tokenDashboardPageActions,
-  tokenDashboardPageSelectors,
   walletSelectors
 } from '@audius/common'
 import { Button, ButtonType } from '@audius/stems'
@@ -15,15 +14,13 @@ import { useSelector } from 'utils/reducer'
 
 import styles from './WalletActionsTile.module.css'
 const { getAccountBalance } = walletSelectors
-const { getHasAssociatedWallets } = tokenDashboardPageSelectors
 const { pressReceive, pressSend, pressConnectWallets } =
   tokenDashboardPageActions
 
 const messages = {
   receiveLabel: 'RECEIVE $AUDIO',
   sendLabel: 'SEND $AUDIO',
-  manageWallets: 'Manage Wallets',
-  connectWallets: 'Connect Other Wallets'
+  manageWallets: 'Manage Wallets'
 }
 
 export const WalletActions = ({ className }: { className?: string }) => {
@@ -34,7 +31,6 @@ export const WalletActions = ({ className }: { className?: string }) => {
   const onClickReceive = () => dispatch(pressReceive())
   const onClickSend = () => dispatch(pressSend())
   const onClickConnectWallets = () => dispatch(pressConnectWallets())
-  const hasMultipleWallets = useSelector(getHasAssociatedWallets)
 
   return (
     <div className={cn([styles.container, className])}>
@@ -60,9 +56,7 @@ export const WalletActions = ({ className }: { className?: string }) => {
       />
       <Button
         className={cn(styles.btn, styles.connectWalletsBtn)}
-        text={
-          hasMultipleWallets ? messages.manageWallets : messages.connectWallets
-        }
+        text={messages.manageWallets}
         includeHoverAnimations
         textClassName={styles.textClassName}
         onClick={onClickConnectWallets}

apps/audius-client/packages/web/src/pages/audio-rewards-page/components/WalletManagementTile.tsx

@@ -54,7 +54,6 @@ const messages = {
   transactionsLabel: 'View Transactions',
   audio: '$AUDIO',
   manageWallets: 'Manage Wallets',
-  connectWallets: 'Connect Other Wallets',
   totalAudio: 'Total $AUDIO',
   buyAudio: 'Buy $AUDIO',
   buyAudioSubheader:
@@ -118,7 +117,6 @@ const AdvancedWalletActions = () => {
     setOpen(false)
   }, [setOpen])
 
-  const hasMultipleWallets = useSelector(getHasAssociatedWallets)
   return (
     <div className={styles.moreOptionsSection}>
       <div className={styles.subtitle}>{messages.advancedOptions}</div>
@@ -158,11 +156,7 @@ const AdvancedWalletActions = () => {
         )}
         <Button
           className={cn(styles.advancedButton, styles.manageWalletsButton)}
-          text={
-            hasMultipleWallets
-              ? messages.manageWallets
-              : messages.connectWallets
-          }
+          text={messages.manageWallets}
           includeHoverAnimations
           textClassName={styles.textClassName}
           onClick={onClickConnectWallets}