feat: add sound in success views

[kushagrasarathe]

contributes to TASK-13591

( no further description needed )

[notion-workspace]

Implement sound for successful payment/claim

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
peanut-wallet	Ready	Preview	Comment	Aug 22, 2025 0:34am

[coderabbitai]

Walkthrough

Adds a new client-side SoundPlayer component and integrates it into two success views to play a success sound on render. No changes to data flow, navigation, or public APIs.

Changes

Cohort / File(s)	Summary of changes
Success sound integration src/components/Claim/Link/Onchain/Success.view.tsx, src/components/Payment/Views/Status.payment.view.tsx	Import SoundPlayer and render <SoundPlayer sound="success" /> at the top of the success view containers; no other logic modified.
New global component src/components/Global/SoundPlayer.tsx	Adds client component that maps sound keys to audio URLs and plays the selected sound via HTMLAudio on mount/prop change; renders null.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• Fix/success view UI #737 — Also touches the success view files; likely part of the same effort to modify on-chain/payment success views.

Suggested reviewers

• Hugo0

Tip

🔌 Remote MCP (Model Context Protocol) integration is now available!

Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats.

✨ Finishing Touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/moni-makes-noise

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Status, Documentation and Community

• Visit our Status Page to check the current availability of CodeRabbit.
• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (5)

src/components/Global/SoundPlayer.tsx (3)

18-27: Harden playback: reuse audio element, preload, cleanup on unmount, and quiet expected autoplay errors

• Recreating new Audio() every mount can add latency and continue playing after navigation. Reuse a cached element and stop it on unmount.
• Autoplay with sound may be blocked (NotAllowedError); log those at debug level to avoid noisy consoles, but keep hard errors visible.
• Skip when tab is not visible to avoid surprise sounds.

Apply:

+// simple cache to reuse HTMLAudioElement instances across mounts
+const audioCache = new Map<keyof typeof soundMap, HTMLAudioElement>()
+
 export const SoundPlayer = ({ sound }: SoundPlayerProps) => {
     useEffect(() => {
-        const audioSrc = soundMap[sound]
-        if (audioSrc) {
-            const audio = new Audio(audioSrc)
-            audio.play().catch((error) => {
-                console.error(`Audio play failed for sound "${sound}":`, error)
-            })
-        }
+        const audioSrc = soundMap[sound]
+        if (!audioSrc || typeof document === 'undefined' || document.visibilityState !== 'visible') return
+        const audio =
+            audioCache.get(sound) ??
+            (() => {
+                const a = new Audio(audioSrc)
+                a.preload = 'auto'
+                audioCache.set(sound, a)
+                return a
+            })()
+        audio.currentTime = 0
+        const playPromise = audio.play()
+        playPromise?.catch((error: any) => {
+            // Autoplay often fails without a user gesture; avoid noisy logs in this case.
+            if (error?.name !== 'NotAllowedError') {
+                console.error(`Audio play failed for sound "${sound}":`, error)
+            } else {
+                console.debug(`Autoplay prevented for sound "${sound}".`)
+            }
+        })
+        return () => {
+            // Stop if the component unmounts quickly after triggering sound
+            audio.pause()
+            audio.currentTime = 0
+        }
     }, [sound])

---

18-27: Dev-only double playback in React 18 Strict Mode

In development, React Strict Mode intentionally mounts, unmounts, and remounts components, which can cause the sound to play twice even with a stable [sound] dependency. This won’t happen in production. If this becomes annoying for DX, we can add a dev-only guard (e.g., a module-level “last played” key or a store-driven toggle).

If you want, I can wire a tiny dev-only guard keyed by window.location.pathname + sound to eliminate duplicate plays during Strict Mode remounts.

---

5-11: Type-safety improvement: freeze soundMap and asset verified

• File src/components/Global/SoundPlayer.tsx – public/sounds/success.mp3 is present, so playback won’t silently fail.
• For stricter typing of SoundPlayerProps.sound, freeze the map by appending as const to soundMap.

Apply:

-const soundMap = {
-    success: '/sounds/success.mp3',
-}
+const soundMap = {
+    success: '/sounds/success.mp3',
+} as const

src/components/Claim/Link/Onchain/Success.view.tsx (1)

139-145: Placement looks good; minor DX heads-up about Strict Mode double-play

Mounting <SoundPlayer sound="success" /> at the top ensures a quick cue. In development, React Strict Mode may cause a brief double play; production is unaffected. If this view ever nests within another success view, consider ensuring only one SoundPlayer mounts.

Can you confirm this view never renders concurrently with another success view that also mounts SoundPlayer?

src/components/Payment/Views/Status.payment.view.tsx (1)

178-183: Confirm product intent: play sound for all success variants

<SoundPlayer sound="success" /> mounts for SEND, REQUEST, external wallet, and withdraw flows alike. If the intent is to scope the cue only to certain success types (e.g., SEND), gate it with a condition; otherwise this is fine.

Should the success sound play for REQUEST and withdraw/external wallet successes as well, or only for SEND?

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

💡 Knowledge Base configuration:

• MCP integration is disabled by default for public repositories
• Jira integration is disabled by default for public repositories
• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 6ecda18 and 2954929.

⛔ Files ignored due to path filters (1)

• public/sounds/success.mp3 is excluded by !**/*.mp3

📒 Files selected for processing (3)

• src/components/Claim/Link/Onchain/Success.view.tsx (2 hunks)
• src/components/Global/SoundPlayer.tsx (1 hunks)
• src/components/Payment/Views/Status.payment.view.tsx (2 hunks)

🧰 Additional context used

🧬 Code graph analysis (2)

src/components/Payment/Views/Status.payment.view.tsx (1)

src/components/Global/SoundPlayer.tsx (1)

• SoundPlayer (18-30)

src/components/Claim/Link/Onchain/Success.view.tsx (1)

src/components/Global/SoundPlayer.tsx (1)

• SoundPlayer (18-30)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Deploy-Preview

🔇 Additional comments (2)

src/components/Claim/Link/Onchain/Success.view.tsx (1)

4-4: LGTM: localizing sound behavior via a small leaf component

Import is scoped and keeps the view clean. No data-flow changes.

src/components/Payment/Views/Status.payment.view.tsx (1)

7-7: LGTM: focused import with no coupling to payment logic

The import keeps audio concerns isolated from transactional logic.