Modals (Wave E batch 1): NiceModal-wrap 3 more global modals

Continues the Wave D migration to nice-modal-react for the remaining
modals in web Modals.tsx commonModalsMap:
  - HostRemixContestModal (keeps useHostRemixContestModal data hook)
  - AddToCollectionModal
  - ChallengeRewardsModal

Same shape as Wave D: NiceModal.create wrap, useModal() for visibility,
registerNiceModalId opts each id into the bridge allowlist, side-effect
import added to registerNiceModals.ts, removed from Modals.tsx commonModalsMap.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: dylanjeffers

packages/web/src/app/registerNiceModals.ts

@@ -9,6 +9,7 @@
  * Add new NiceModal-managed modals here as they migrate.
  */
 import 'components/add-cash-modal/AddCashModal'
+import 'components/add-to-collection/desktop/AddToCollectionModal'
 import 'components/album-track-remove-confirmation-modal/AlbumTrackRemoveConfirmationModal'
 import 'components/artist-pick-modal/ArtistPickModal'
 import 'components/buy-sell-modal/BuySellModal'
@@ -20,6 +21,7 @@ import 'components/early-release-confirmation-modal/EarlyReleaseConfirmationModa
 import 'components/edit-access-confirmation-modal/EditAccessConfirmationModal'
 import 'components/finalize-winners-confirmation-modal/FinalizeWinnersConfirmationModal'
 import 'components/hide-confirmation-modal/HideContentConfirmationModal'
+import 'components/host-remix-contest-modal/HostRemixContestModal'
 import 'components/inbox-unavailable-modal/InboxUnavailableModal'
 import 'components/leaving-audius-modal/LeavingAudiusModal'
 import 'components/locked-content-modal/LockedContentModal'
@@ -42,3 +44,4 @@ import 'pages/audio-page/components/modals/AudioBreakdownModal'
 import 'pages/audio-page/components/modals/ConnectedWalletsModal'
 import 'pages/chat-page/components/ChatBlastModal'
 import 'pages/fan-club-detail-page/components/ClaimVestedCoinsModal'
+import 'pages/rewards-page/components/modals/ChallengeRewardsModal/ChallengeRewardsModal'

packages/web/src/components/add-to-collection/desktop/AddToCollectionModal.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 
 import {
   useCurrentUserId,
@@ -12,6 +12,7 @@ import {
   SquareSizes,
   Collection
 } from '@audius/common/models'
+import { registerNiceModalId } from '@audius/common/services'
 import {
   cacheCollectionsActions,
   addToCollectionUISelectors,
@@ -27,12 +28,12 @@ import {
   Tooltip,
   Image
 } from '@audius/harmony'
+import NiceModal, { useModal } from '@ebay/nice-modal-react'
 import cn from 'classnames'
 import { capitalize } from 'lodash'
 import InfiniteScroll from 'react-infinite-scroller'
 import { useDispatch, useSelector } from 'react-redux'
 
-import { useModalState } from 'common/hooks/useModalState'
 import SearchBar from 'components/search-bar/SearchBar'
 import { useCollectionCoverArt } from 'hooks/useCollectionCoverArt'
 
@@ -56,10 +57,11 @@ const getMessages = (collectionType: 'album' | 'playlist') => ({
   hiddenAdd: `You cannot add hidden tracks to a public ${collectionType}.`
 })
 
-const AddToCollectionModal = () => {
+const AddToCollectionModal = NiceModal.create(() => {
   const dispatch = useDispatch()
 
-  const [isOpen, setIsOpen] = useModalState('AddToCollection')
+  const modal = useModal()
+  const handleClose = useCallback(() => modal.hide(), [modal])
   const collectionType = useSelector(getCollectionType)
   const trackId = useSelector(getTrackId)
   const trackTitle = useSelector(getTrackTitle)
@@ -135,7 +137,7 @@ const AddToCollectionModal = () => {
       }
     }
 
-    setIsOpen(false)
+    handleClose()
   }
 
   const handleCreateCollection = () => {
@@ -149,16 +151,16 @@ const AddToCollectionModal = () => {
         'toast'
       )
     )
-    setIsOpen(false)
+    handleClose()
   }
 
   return (
     <Modal
-      isOpen={isOpen === true}
+      isOpen={modal.visible}
       showTitleHeader
       showDismissButton
       title={messages.title}
-      onClose={() => setIsOpen(false)}
+      onClose={handleClose}
       allowScroll={false}
       bodyClassName={styles.modalBody}
       headerContainerClassName={styles.modalHeader}
@@ -204,7 +206,7 @@ const AddToCollectionModal = () => {
       </Scrollbar>
     </Modal>
   )
-}
+})
 
 type CollectionItemProps = {
   collectionType: 'album' | 'playlist'
@@ -244,4 +246,7 @@ const CollectionItem = ({
   )
 }
 
+NiceModal.register('AddToCollection', AddToCollectionModal)
+registerNiceModalId('AddToCollection')
+
 export default AddToCollectionModal

packages/web/src/components/host-remix-contest-modal/HostRemixContestModal.tsx

@@ -10,6 +10,7 @@ import {
 } from '@audius/common/api'
 import { remixMessages } from '@audius/common/messages'
 import { Name } from '@audius/common/models'
+import { registerNiceModalId } from '@audius/common/services'
 import { useHostRemixContestModal } from '@audius/common/store'
 import { dayjs } from '@audius/common/utils'
 import {
@@ -27,6 +28,7 @@ import {
   TextArea
 } from '@audius/harmony'
 import { EventEntityTypeEnum, EventEventTypeEnum } from '@audius/sdk'
+import NiceModal, { useModal } from '@ebay/nice-modal-react'
 
 import { DatePicker } from 'components/edit/fields/DatePickerField'
 import { mergeReleaseDateValues } from 'components/edit/fields/visibility/mergeReleaseDateValues'
@@ -37,8 +39,15 @@ import { TimeInput, parseTime } from './TimeInput'
 const contestHostingLink =
   'https://help.audius.co/artists/hosting-a-remix-contest'
 
-export const HostRemixContestModal = () => {
-  const { data, isOpen, onClose, onClosed } = useHostRemixContestModal()
+export const HostRemixContestModal = NiceModal.create(() => {
+  // Visibility owned by NiceModal; payload (`trackId`) still flows through
+  // the legacy createModal hook.
+  const modal = useModal()
+  const onClose = useCallback(() => {
+    modal.hide()
+  }, [modal])
+  const onClosed = onClose
+  const { data } = useHostRemixContestModal()
   const { trackId } = data
   const { mutate: createEvent } = useCreateEvent()
   const { mutate: updateEvent } = useUpdateEvent()
@@ -203,7 +212,12 @@ export const HostRemixContestModal = () => {
   }, [remixContest, userId, deleteEvent, onClose, trackId])
 
   return (
-    <Modal isOpen={isOpen} onClose={onClose} onClosed={onClosed} size='medium'>
+    <Modal
+      isOpen={modal.visible}
+      onClose={onClose}
+      onClosed={onClosed}
+      size='medium'
+    >
       <ModalHeader onClose={onClose}>
         <ModalTitle Icon={IconTrophy} title={remixMessages.modalTitle} />
       </ModalHeader>
@@ -322,4 +336,7 @@ export const HostRemixContestModal = () => {
       </ModalContent>
     </Modal>
   )
-}
+})
+
+NiceModal.register('HostRemixContest', HostRemixContestModal)
+registerNiceModalId('HostRemixContest')

packages/web/src/pages/modals/Modals.tsx

@@ -3,15 +3,13 @@ import { ComponentType, lazy } from 'react'
 import { Modals as ModalTypes } from '@audius/common/store'
 
 import { CoinSuccessModal } from 'components/CoinSuccessModal'
-import AddToCollectionModal from 'components/add-to-collection/desktop/AddToCollectionModal'
 import AppCTAModal from 'components/app-cta-modal/AppCTAModal'
 import BrowserPushConfirmationModal from 'components/browser-push-confirmation-modal/BrowserPushConfirmationModal'
 import CoinflowOnrampModal from 'components/coinflow-onramp-modal'
 import ConfirmerPreview from 'components/confirmer-preview/ConfirmerPreview'
 import EmbedModal from 'components/embed-modal/EmbedModal'
 import { FeatureFlagOverrideModal } from 'components/feature-flag-override-modal'
 import FirstUploadModal from 'components/first-upload-modal/FirstUploadModal'
-import { HostRemixContestModal } from 'components/host-remix-contest-modal/HostRemixContestModal'
 import { PasswordResetModal } from 'components/password-reset/PasswordResetModal'
 import { PremiumContentPurchaseModal } from 'components/premium-content-purchase-modal/PremiumContentPurchaseModal'
 import { SendTokensModal } from 'components/send-tokens-modal'
@@ -23,7 +21,6 @@ import { WithdrawUSDCModal } from 'components/withdraw-usdc-modal/WithdrawUSDCMo
 import { CoinflowWithdrawModal } from 'components/withdraw-usdc-modal/components/CoinflowWithdrawModal'
 import { useIsMobile } from 'hooks/useIsMobile'
 import TransferAudioMobileDrawer from 'pages/audio-page/components/modals/TransferAudioMobileDrawer'
-import { ChallengeRewardsModal } from 'pages/rewards-page/components/modals/ChallengeRewardsModal'
 
 import AppModal from './AppModal'
 
@@ -42,11 +39,8 @@ const CommentSettingsModal = lazy(
 )
 
 const commonModalsMap: { [Modal in ModalTypes]?: ComponentType } = {
-  AddToCollection: AddToCollectionModal,
-  HostRemixContest: HostRemixContestModal,
   InboxSettings: InboxSettingsModal,
   CommentSettings: CommentSettingsModal,
-  ChallengeRewards: ChallengeRewardsModal,
   TransferAudioMobileWarning: TransferAudioMobileDrawer,
   BrowserPushPermissionConfirmation: BrowserPushConfirmationModal,
   PremiumContentPurchaseModal,

packages/web/src/pages/rewards-page/components/modals/ChallengeRewardsModal/ChallengeRewardsModal.tsx

@@ -2,6 +2,7 @@ import { useCallback, useEffect, useContext } from 'react'
 
 import { useCurrentAccountUser, useCurrentAccount } from '@audius/common/api'
 import { ChallengeName } from '@audius/common/models'
+import { registerNiceModalId } from '@audius/common/services'
 import {
   challengesSelectors,
   audioRewardsPageSelectors,
@@ -12,9 +13,9 @@ import {
 } from '@audius/common/store'
 import { getAAOErrorEmojis } from '@audius/common/utils'
 import { ModalContent, Text } from '@audius/harmony'
+import NiceModal, { useModal } from '@ebay/nice-modal-react'
 import { useDispatch, useSelector } from 'react-redux'
 
-import { useModalState } from 'common/hooks/useModalState'
 import ModalDrawer from 'components/modal-drawer/ModalDrawer'
 import { ToastContext } from 'components/toast/ToastContext'
 import { useWithMobileStyle } from 'hooks/useWithMobileStyle'
@@ -133,23 +134,23 @@ const ChallengeRewardsBody = ({ dismissModal }: BodyProps) => {
   )
 }
 
-export const ChallengeRewardsModal = () => {
+export const ChallengeRewardsModal = NiceModal.create(() => {
   const modalType = useSelector(getChallengeRewardsModalType) as ChallengeName
-  const [isOpen, setOpen] = useModalState('ChallengeRewards')
+  const modal = useModal()
   const dispatch = useDispatch()
   const wm = useWithMobileStyle(styles.mobile)
   const onClose = useCallback(() => {
-    setOpen(false)
+    modal.hide()
     dispatch(resetAndCancelClaimReward())
-  }, [dispatch, setOpen])
+  }, [dispatch, modal])
 
   const { title } = getChallengeConfig(modalType)
 
   return (
     <ModalDrawer
       title={<>{title}</>}
       showTitleHeader
-      isOpen={isOpen}
+      isOpen={modal.visible}
       onClose={onClose}
       isFullscreen={true}
       titleClassName={wm(styles.title)}
@@ -162,4 +163,7 @@ export const ChallengeRewardsModal = () => {
       </ModalContent>
     </ModalDrawer>
   )
-}
+})
+
+NiceModal.register('ChallengeRewards', ChallengeRewardsModal)
+registerNiceModalId('ChallengeRewards')