Modals (Wave D batch 5): NiceModal-wrap rewards modals

  - TopAPIModal (APIRewardsExplainer)
  - ClaimAllRewardsModal

Same migration shape: NiceModal.create wrap, useModal() for visibility,
registerNiceModalId, side-effect import, removed from Modals.tsx.

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

Author: dylanjeffers

packages/web/src/app/registerNiceModals.ts

@@ -28,6 +28,8 @@ 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/share-modal/ShareModal'
 import 'components/transaction-details-modal/TransactionDetailsModal'
 import 'components/upload-confirmation-modal/UploadConfirmationModal'

packages/web/src/components/rewards/modals/ClaimAllRewardsModal.tsx

@@ -4,6 +4,7 @@ import {
   formatCooldownChallenges,
   useChallengeCooldownSchedule
 } from '@audius/common/hooks'
+import { registerNiceModalId } from '@audius/common/services'
 import {
   ClaimStatus,
   audioRewardsPageActions,
@@ -23,9 +24,9 @@ import {
   ProgressBar,
   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 LoadingSpinner from 'components/loading-spinner/LoadingSpinner'
 import { SummaryTable } from 'components/summary-table'
 import { ToastContext } from 'components/toast/ToastContext'
@@ -47,10 +48,17 @@ const { claimAllChallengeRewards, resetAndCancelClaimReward } =
   audioRewardsPageActions
 const { getClaimStatus } = audioRewardsPageSelectors
 
-export const ClaimAllRewardsModal = () => {
+export const ClaimAllRewardsModal = NiceModal.create(() => {
   const dispatch = useDispatch()
   const { toast } = useContext(ToastContext)
-  const [isOpen, setOpen] = useModalState('ClaimAllRewards')
+  const modal = useModal()
+  const isOpen = modal.visible
+  const setOpen = useCallback(
+    (open: boolean) => {
+      if (!open) modal.hide()
+    },
+    [modal]
+  )
   const claimStatus = useSelector(getClaimStatus)
   const { claimableAmount, claimableChallenges, cooldownChallenges, summary } =
     useChallengeCooldownSchedule({
@@ -189,4 +197,7 @@ export const ClaimAllRewardsModal = () => {
       </ModalContent>
     </Modal>
   )
-}
+})
+
+NiceModal.register('ClaimAllRewards', ClaimAllRewardsModal)
+registerNiceModalId('ClaimAllRewards')

packages/web/src/components/rewards/modals/TopAPI.tsx

@@ -1,10 +1,11 @@
 import { useCallback } from 'react'
 
+import { registerNiceModalId } from '@audius/common/services'
 import { route } from '@audius/common/utils'
 import { Button, IconArrowRight as IconArrow } from '@audius/harmony'
+import NiceModal, { useModal } from '@ebay/nice-modal-react'
 
 import AudiusAPI from 'assets/img/audiusAPI.png'
-import { useModalState } from 'common/hooks/useModalState'
 import ModalDrawer from 'components/modal-drawer/ModalDrawer'
 import { useWithMobileStyle } from 'hooks/useWithMobileStyle'
 
@@ -42,13 +43,13 @@ const TopAPIBody = () => {
   )
 }
 
-const TopAPIModal = () => {
-  const [isOpen, setOpen] = useModalState('APIRewardsExplainer')
+const TopAPIModal = NiceModal.create(() => {
+  const modal = useModal()
 
   return (
     <ModalDrawer
-      isOpen={isOpen}
-      onClose={() => setOpen(false)}
+      isOpen={modal.visible}
+      onClose={() => modal.hide()}
       title={messages.modalTitle}
       isFullscreen={false}
       showTitleHeader
@@ -57,6 +58,9 @@ const TopAPIModal = () => {
       <TopAPIBody />
     </ModalDrawer>
   )
-}
+})
+
+NiceModal.register('APIRewardsExplainer', TopAPIModal)
+registerNiceModalId('APIRewardsExplainer')
 
 export default TopAPIModal

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

@@ -14,8 +14,6 @@ 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 { ClaimAllRewardsModal } from 'components/rewards/modals/ClaimAllRewardsModal'
-import TopAPIModal from 'components/rewards/modals/TopAPI'
 import { SendTokensModal } from 'components/send-tokens-modal'
 import ConnectedMobileOverflowModal from 'components/track-overflow-modal/ConnectedMobileOverflowModal'
 import UnfollowConfirmationModal from 'components/unfollow-confirmation-modal/UnfollowConfirmationModal'
@@ -48,9 +46,7 @@ const commonModalsMap: { [Modal in ModalTypes]?: ComponentType } = {
   HostRemixContest: HostRemixContestModal,
   InboxSettings: InboxSettingsModal,
   CommentSettings: CommentSettingsModal,
-  APIRewardsExplainer: TopAPIModal,
   ChallengeRewards: ChallengeRewardsModal,
-  ClaimAllRewards: ClaimAllRewardsModal,
   TransferAudioMobileWarning: TransferAudioMobileDrawer,
   BrowserPushPermissionConfirmation: BrowserPushConfirmationModal,
   PremiumContentPurchaseModal,