Modals (Wave E batch 2): NiceModal-wrap 6 createModal-based modals

Migrates the remaining createModal-driven modals from Modals.tsx to
nice-modal-react now that the generalized bridge handles
`modals/{id}/open` actions:
  - TransferAudioMobileDrawer (TransferAudioMobileWarning)
  - WithdrawUSDCModal
  - CoinflowOnrampModal (CoinflowOnramp)
  - CoinflowWithdrawModal (CoinflowWithdraw)
  - SendTokensModal
  - PremiumContentPurchaseModal

Same shape as Wave D/E batch 1: 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.

Modals.tsx is now down to the lazy-loaded set (InboxSettings,
CommentSettings, CreateChatModal, StripeOnRamp) plus
BrowserPushPermissionConfirmation; those need a separate plan to
preserve their lazy-load semantics.

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

Author: dylanjeffers

packages/web/src/app/registerNiceModals.ts

@@ -13,6 +13,7 @@ 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'
+import 'components/coinflow-onramp-modal/CoinflowOnrampModal'
 import 'components/delete-playlist-confirmation-modal/DeletePlaylistConfirmationModal'
 import 'components/delete-track-confirmation-modal/DeleteTrackConfirmationModal'
 import 'components/download-track-archive-modal/DownloadTrackArchiveModal'
@@ -26,12 +27,14 @@ import 'components/inbox-unavailable-modal/InboxUnavailableModal'
 import 'components/leaving-audius-modal/LeavingAudiusModal'
 import 'components/locked-content-modal/LockedContentModal'
 import 'components/payout-wallet-modal/PayoutWalletModal'
+import 'components/premium-content-purchase-modal/PremiumContentPurchaseModal'
 import 'components/publish-confirmation-modal/PublishConfirmationModal'
 import 'components/receive-tokens-modal/ReceiveTokensModal'
 import 'components/replace-track-confirmation-modal/ReplaceTrackConfirmationModal'
 import 'components/replace-track-progress-modal/ReplaceTrackProgressModal'
 import 'components/rewards/modals/ClaimAllRewardsModal'
 import 'components/rewards/modals/TopAPI'
+import 'components/send-tokens-modal/SendTokensModal'
 import 'components/share-modal/ShareModal'
 import 'components/transaction-details-modal/TransactionDetailsModal'
 import 'components/upload-confirmation-modal/UploadConfirmationModal'
@@ -40,8 +43,11 @@ import 'components/usdc-transaction-details-modal/USDCTransactionDetailsModal'
 import 'components/user-badges/TierExplainerModal'
 import 'components/wait-for-download-modal/WaitForDownloadModal'
 import 'components/welcome-modal/WelcomeModal'
+import 'components/withdraw-usdc-modal/WithdrawUSDCModal'
+import 'components/withdraw-usdc-modal/components/CoinflowWithdrawModal'
 import 'pages/audio-page/components/modals/AudioBreakdownModal'
 import 'pages/audio-page/components/modals/ConnectedWalletsModal'
+import 'pages/audio-page/components/modals/TransferAudioMobileDrawer'
 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/coinflow-onramp-modal/CoinflowOnrampModal.tsx

@@ -1,11 +1,13 @@
 import { useCallback, useEffect, useState } from 'react'
 
 import { useCoinflowAdapter } from '@audius/common/hooks'
+import { registerNiceModalId } from '@audius/common/services'
 import {
   coinflowModalUIActions,
   useCoinflowOnrampModal
 } from '@audius/common/store'
 import { CoinflowPurchase, Currency } from '@coinflowlabs/react'
+import NiceModal, { useModal } from '@ebay/nice-modal-react'
 import { VersionedTransaction } from '@solana/web3.js'
 import { useDispatch } from 'react-redux'
 
@@ -21,12 +23,13 @@ const { transactionSucceeded, transactionCanceled } = coinflowModalUIActions
 const MERCHANT_ID = env.COINFLOW_MERCHANT_ID
 const IS_PRODUCTION = env.ENVIRONMENT === 'production'
 
-export const CoinflowOnrampModal = () => {
+export const CoinflowOnrampModal = NiceModal.create(() => {
+  const modal = useModal()
+  const onClose = useCallback(() => modal.hide(), [modal])
+  const onClosed = onClose
+  const isOpen = modal.visible
   const {
-    data: { amount, serializedTransaction, purchaseMetadata, guestEmail },
-    isOpen,
-    onClose,
-    onClosed
+    data: { amount, serializedTransaction, purchaseMetadata, guestEmail }
   } = useCoinflowOnrampModal()
   const dispatch = useDispatch()
   const [transaction, setTransaction] = useState<
@@ -92,4 +95,7 @@ export const CoinflowOnrampModal = () => {
       ) : null}
     </ModalDrawer>
   )
-}
+})
+
+NiceModal.register('CoinflowOnramp', CoinflowOnrampModal)
+registerNiceModalId('CoinflowOnramp')

packages/web/src/components/premium-content-purchase-modal/PremiumContentPurchaseModal.tsx

@@ -24,7 +24,7 @@ import {
   PurchaseVendor,
   USDCPurchaseConditions
 } from '@audius/common/models'
-import { FeatureFlags } from '@audius/common/services'
+import { FeatureFlags, registerNiceModalId } from '@audius/common/services'
 import {
   buyUSDCActions,
   usePremiumContentPurchaseModal,
@@ -43,6 +43,7 @@ import {
   IconCart,
   ModalTitle
 } from '@audius/harmony'
+import NiceModal, { useModal } from '@ebay/nice-modal-react'
 import cn from 'classnames'
 import { Formik, useField, useFormikContext } from 'formik'
 import { useDispatch, useSelector } from 'react-redux'
@@ -203,13 +204,13 @@ const PremiumContentPurchaseForm = (props: PremiumContentPurchaseFormProps) => {
   )
 }
 
-export const PremiumContentPurchaseModal = () => {
+export const PremiumContentPurchaseModal = NiceModal.create(() => {
   const dispatch = useDispatch()
   const isMobile = useIsMobile()
+  const modal = useModal()
+  const isOpen = modal.visible
+  const onClose = useCallback(() => modal.hide(), [modal])
   const {
-    isOpen,
-    onClose,
-    onClosed,
     data: { contentId, contentType }
   } = usePremiumContentPurchaseModal()
   const { isEnabled: isCoinflowEnabled, isLoaded: isCoinflowEnabledLoaded } =
@@ -305,10 +306,9 @@ export const PremiumContentPurchaseModal = () => {
   }, [isUnlocking, stage, onClose])
 
   const handleClosed = useCallback(() => {
-    onClosed()
     dispatch(cleanup())
     dispatch(cleanupUSDCRecovery())
-  }, [onClosed, dispatch])
+  }, [dispatch])
 
   useManagedAccountNotAllowedCallback({
     trigger: isOpen,
@@ -354,4 +354,7 @@ export const PremiumContentPurchaseModal = () => {
       ) : null}
     </ModalDrawer>
   )
-}
+})
+
+NiceModal.register('PremiumContentPurchaseModal', PremiumContentPurchaseModal)
+registerNiceModalId('PremiumContentPurchaseModal')

packages/web/src/components/send-tokens-modal/SendTokensModal.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from 'react'
+import { useCallback, useState, useEffect, useRef } from 'react'
 
 import { useSendCoins } from '@audius/common/api'
 import { walletMessages } from '@audius/common/messages'
@@ -8,7 +8,9 @@ import {
   SolanaWalletAddress,
   User
 } from '@audius/common/models'
+import { registerNiceModalId } from '@audius/common/services'
 import { useSendTokensModal } from '@audius/common/store'
+import NiceModal, { useModal } from '@ebay/nice-modal-react'
 
 import ResponsiveModal from 'components/modal/ResponsiveModal'
 import { reportToSentry } from 'store/errors/reportToSentry'
@@ -32,8 +34,11 @@ type SendTokensState = {
   signature: string
 }
 
-const SendTokensModal = () => {
-  const { isOpen, onClose: closeModal, data } = useSendTokensModal()
+const SendTokensModal = NiceModal.create(() => {
+  const modal = useModal()
+  const isOpen = modal.visible
+  const closeModal = useCallback(() => modal.hide(), [modal])
+  const { data } = useSendTokensModal()
   const { mint, user: prePopulatedUser } = data ?? {}
   const isAppKitModalOpenRef = useRef(false)
 
@@ -288,6 +293,9 @@ const SendTokensModal = () => {
       ) : null}
     </ResponsiveModal>
   )
-}
+})
+
+NiceModal.register('SendTokensModal', SendTokensModal)
+registerNiceModalId('SendTokensModal')
 
 export default SendTokensModal

packages/web/src/components/withdraw-usdc-modal/WithdrawUSDCModal.tsx

@@ -4,7 +4,11 @@ import { useUSDCBalance } from '@audius/common/api'
 import { useFeatureFlag, useRemoteVar } from '@audius/common/hooks'
 import { walletMessages } from '@audius/common/messages'
 import { Name, Status } from '@audius/common/models'
-import { IntKeys, FeatureFlags } from '@audius/common/services'
+import {
+  IntKeys,
+  FeatureFlags,
+  registerNiceModalId
+} from '@audius/common/services'
 import {
   withdrawUSDCActions,
   withdrawUSDCSelectors,
@@ -21,6 +25,7 @@ import {
   IconTransaction,
   ModalTitle
 } from '@audius/harmony'
+import NiceModal, { useModal } from '@ebay/nice-modal-react'
 import { Formik, FormikProps, useFormikContext } from 'formik'
 import { useDispatch, useSelector } from 'react-redux'
 import { toFormikValidationSchema } from 'zod-formik-adapter'
@@ -77,9 +82,12 @@ const TrackFormErrors = ({ currentBalance }: { currentBalance: number }) => {
   return null
 }
 
-export const WithdrawUSDCModal = () => {
+export const WithdrawUSDCModal = NiceModal.create(() => {
   const dispatch = useDispatch()
-  const { isOpen, onClose, onClosed, data, setData } = useWithdrawUSDCModal()
+  const modal = useModal()
+  const onClose = useCallback(() => modal.hide(), [modal])
+  const onClosed = onClose
+  const { data, setData } = useWithdrawUSDCModal()
   const { isEnabled: isCoinflowEnabled } = useFeatureFlag(
     FeatureFlags.COINFLOW_OFFRAMP_ENABLED
   )
@@ -163,7 +171,7 @@ export const WithdrawUSDCModal = () => {
   return (
     <Modal
       size='medium'
-      isOpen={isOpen}
+      isOpen={modal.visible}
       onClose={onClose}
       onClosed={handleOnClosed}
       dismissOnClickOutside={!DISABLE_MODAL_CLOSE_PAGES.has(page)}
@@ -208,4 +216,7 @@ export const WithdrawUSDCModal = () => {
       </ModalContent>
     </Modal>
   )
-}
+})
+
+NiceModal.register('WithdrawUSDCModal', WithdrawUSDCModal)
+registerNiceModalId('WithdrawUSDCModal')

packages/web/src/components/withdraw-usdc-modal/components/CoinflowWithdrawModal.tsx

@@ -1,12 +1,13 @@
 import { useCallback } from 'react'
 
 import { useCoinflowWithdrawalAdapter } from '@audius/common/hooks'
+import { registerNiceModalId } from '@audius/common/services'
 import {
-  useCoinflowWithdrawModal,
   withdrawUSDCActions,
   withdrawUSDCSelectors
 } from '@audius/common/store'
 import { CoinflowWithdraw, OnSuccessMethod } from '@coinflowlabs/react'
+import NiceModal, { useModal } from '@ebay/nice-modal-react'
 import { useDispatch, useSelector } from 'react-redux'
 
 import ModalDrawer from 'components/modal-drawer/ModalDrawer'
@@ -34,8 +35,11 @@ const parseTransactionFromSuccessParams = (params: string) => {
 const MERCHANT_ID = env.COINFLOW_MERCHANT_ID
 const IS_PRODUCTION = env.ENVIRONMENT === 'production'
 
-export const CoinflowWithdrawModal = () => {
-  const { isOpen, onClose, onClosed } = useCoinflowWithdrawModal()
+export const CoinflowWithdrawModal = NiceModal.create(() => {
+  const modal = useModal()
+  const onClose = useCallback(() => modal.hide(), [modal])
+  const onClosed = onClose
+  const isOpen = modal.visible
   const amount = useSelector(getWithdrawAmount)
 
   const adapter = useCoinflowWithdrawalAdapter()
@@ -85,4 +89,7 @@ export const CoinflowWithdrawModal = () => {
       ) : null}
     </ModalDrawer>
   )
-}
+})
+
+NiceModal.register('CoinflowWithdraw', CoinflowWithdrawModal)
+registerNiceModalId('CoinflowWithdraw')

packages/web/src/pages/audio-page/components/modals/TransferAudioMobileDrawer.tsx

@@ -1,6 +1,9 @@
+import { useCallback } from 'react'
+
+import { registerNiceModalId } from '@audius/common/services'
 import { IconTokenGold as IconGold } from '@audius/harmony'
+import NiceModal, { useModal } from '@ebay/nice-modal-react'
 
-import { useModalState } from 'common/hooks/useModalState'
 import Drawer from 'components/drawer/Drawer'
 
 import styles from './TransferAudioMobileDrawer.module.css'
@@ -10,18 +13,22 @@ const messages = {
   subtitle: 'To transfer AUDIO please visit audius.co from a desktop browser'
 }
 
-const TransferAudioMobileDrawer = () => {
-  const [isOpen, setOpen] = useModalState('TransferAudioMobileWarning')
+const TransferAudioMobileDrawer = NiceModal.create(() => {
+  const modal = useModal()
+  const handleClose = useCallback(() => modal.hide(), [modal])
 
   return (
-    <Drawer isOpen={isOpen} onClose={() => setOpen(false)}>
+    <Drawer isOpen={modal.visible} onClose={handleClose}>
       <div className={styles.container}>
         <IconGold />
         <span className={styles.title}>{messages.title}</span>
         <span className={styles.subtitle}>{messages.subtitle}</span>
       </div>
     </Drawer>
   )
-}
+})
+
+NiceModal.register('TransferAudioMobileWarning', TransferAudioMobileDrawer)
+registerNiceModalId('TransferAudioMobileWarning')
 
 export default TransferAudioMobileDrawer

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

@@ -5,22 +5,16 @@ import { Modals as ModalTypes } from '@audius/common/store'
 import { CoinSuccessModal } from 'components/CoinSuccessModal'
 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 { PasswordResetModal } from 'components/password-reset/PasswordResetModal'
-import { PremiumContentPurchaseModal } from 'components/premium-content-purchase-modal/PremiumContentPurchaseModal'
-import { SendTokensModal } from 'components/send-tokens-modal'
 import ConnectedMobileOverflowModal from 'components/track-overflow-modal/ConnectedMobileOverflowModal'
 import UnfollowConfirmationModal from 'components/unfollow-confirmation-modal/UnfollowConfirmationModal'
 import { UnsavedChangesDialog } from 'components/unsaved-changes-dialog/UnsavedChangesDialog'
 import { UserListModal } from 'components/user-list-modal/UserListModal'
-import { WithdrawUSDCModal } from 'components/withdraw-usdc-modal/WithdrawUSDCModal'
-import { CoinflowWithdrawModal } from 'components/withdraw-usdc-modal/components/CoinflowWithdrawModal'
 import { useIsMobile } from 'hooks/useIsMobile'
-import TransferAudioMobileDrawer from 'pages/audio-page/components/modals/TransferAudioMobileDrawer'
 
 import AppModal from './AppModal'
 
@@ -41,15 +35,9 @@ const CommentSettingsModal = lazy(
 const commonModalsMap: { [Modal in ModalTypes]?: ComponentType } = {
   InboxSettings: InboxSettingsModal,
   CommentSettings: CommentSettingsModal,
-  TransferAudioMobileWarning: TransferAudioMobileDrawer,
   BrowserPushPermissionConfirmation: BrowserPushConfirmationModal,
-  PremiumContentPurchaseModal,
   CreateChatModal,
-  WithdrawUSDCModal,
-  CoinflowOnramp: CoinflowOnrampModal,
-  StripeOnRamp: StripeOnRampModal,
-  CoinflowWithdraw: CoinflowWithdrawModal,
-  SendTokensModal
+  StripeOnRamp: StripeOnRampModal
 }
 
 const commonModals = Object.entries(commonModalsMap) as [