Skip to content

Fix: disable add money button on default state + disable sound on IOS #1145

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Aug 28, 2025
Merged

Fix: disable add money button on default state + disable sound on IOS #1145

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7b7db77
fix: add money success screen shows usernmae
Zishan-7 Aug 28, 2025
b828069
disable add money button in default state
Zishan-7 Aug 28, 2025
2774ee0
disable sound on IOS
Zishan-7 Aug 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion src/app/(mobile-ui)/add-money/crypto/direct/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,8 @@ export default function AddMoneyCryptoDirectPage() {
<DirectSuccessView
key={`success-add-money`}
headerTitle={'Add Money'}
type="DEPOSIT"
type="SEND"
isExternalWalletFlow
currencyAmount={`$${inputTokenAmount}`}
isWithdrawFlow={false}
redirectTo={'/add-money'}
Expand Down Expand Up @@ -93,6 +94,7 @@ export default function AddMoneyCryptoDirectPage() {
minAmount={0.1}
maxAmount={4000}
onValidationError={setError}
disabled={inputTokenAmount === '0.00'}
>
Add Money
</DaimoPayButton>
Expand Down
4 changes: 2 additions & 2 deletions src/components/Global/DaimoPayButton/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,12 +74,12 @@ export const DaimoPayButton = ({

// Validate amount range if specified
if (minAmount !== undefined && formattedAmount < minAmount) {
onValidationError?.(`Minimum deposit using crypto is $${minAmount.toFixed(2)}.`)
onValidationError?.(`Minimum deposit using crypto is $${minAmount}.`)
return false
}

if (maxAmount !== undefined && formattedAmount > maxAmount) {
onValidationError?.(`Maximum deposit using crypto is $${maxAmount.toFixed(2)}.`)
onValidationError?.(`Maximum deposit using crypto is $${maxAmount}.`)
return false
}

Expand Down
8 changes: 8 additions & 0 deletions src/components/Global/SoundPlayer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
'use client'

import { DeviceType, useDeviceType } from '@/hooks/useGetDeviceType'
import { useEffect, useRef } from 'react'

const soundMap = {
Expand All @@ -18,6 +19,13 @@ type SoundPlayerProps = {
export const SoundPlayer = ({ sound }: SoundPlayerProps) => {
const audioRef = useRef<HTMLAudioElement | null>(null)

const { deviceType } = useDeviceType()

Comment on lines +22 to +23
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Do not start playback until deviceType is known; include deviceType in effect deps.
Guard the effect with deviceType to prevent preloading/attempted playback on iOS and avoid doing work twice. Also add deviceType to the dependency array so the effect runs once after detection.

Example (outside selected lines):

useEffect(() => {
  if (!deviceType || deviceType === DeviceType.IOS) return; // wait for detection; disable on iOS
  // ... existing effect body ...
}, [sound, deviceType]);
🤖 Prompt for AI Agents 
In src/components/Global/SoundPlayer.tsx around lines 22 to 23, the effect that
preloads/plays audio runs before deviceType is known and doesn't include
deviceType in its dependency array; update the effect to early-return when
deviceType is falsy or equals the iOS enum (so it doesn't attempt
playback/preload on iOS) and add deviceType to the effect's dependency array so
the effect only runs once after detection (e.g., guard at top of effect: if
(!deviceType || deviceType === DeviceType.IOS) return; and include deviceType in
deps).

// Early return for iOS devices - completely disable sound
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: would benefit of a @dev TODO comment explaining that we'd want to fix this in the future

if (deviceType === DeviceType.IOS) {
return null
}
Comment on lines +24 to +27
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Critical: conditional Hooks violation (early return before useEffect).
On initial render useEffect runs; on iOS render after detection returns before useEffect, changing hook order across renders → “Rendered fewer hooks than expected.” Also this still preloads audio on iOS once before the second render.

Apply this diff to remove the early return:

-    // Early return for iOS devices - completely disable sound
-    if (deviceType === DeviceType.IOS) {
-        return null
-    }

Then gate playback inside the effect and add deviceType to the deps as shown in my prior snippet.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
// Early return for iOS devices - completely disable sound
if (deviceType === DeviceType.IOS) {
return null
}
🤖 Prompt for AI Agents 
In src/components/Global/SoundPlayer.tsx around lines 24-27, remove the early
return for iOS so the component always renders (preserving hook order) and
instead gate all audio setup/playback inside the useEffect: add deviceType to
the effect dependency array, and at the start of that effect return early if
deviceType === DeviceType.IOS so no Audio elements are created or preloaded on
iOS; keep rendering null/empty UI as before but ensure hooks
(useEffect/useState/etc.) are always invoked in the same order across renders.


useEffect(() => {
const audioSrc = soundMap[sound]
if (!audioSrc) return
Expand Down
5 changes: 2 additions & 3 deletions src/components/Payment/Views/Status.payment.view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ type DirectSuccessViewProps = {
amount?: string
message?: string | ReactNode
recipientType?: RecipientType
type?: 'SEND' | 'REQUEST' | 'DEPOSIT'
type?: 'SEND' | 'REQUEST'
headerTitle?: string
currencyAmount?: string
isExternalWalletFlow?: boolean
Expand Down Expand Up @@ -173,13 +173,12 @@ const DirectSuccessView = ({
if (isWithdrawFlow) return 'You just withdrew'
if (type === 'SEND') return 'You sent '
if (type === 'REQUEST') return 'You requested '
if (type === 'DEPOSIT') return 'You successfully added '
}

return (
<div className="flex min-h-[inherit] flex-col justify-between gap-8">
<SoundPlayer sound="success" />
{(type === 'SEND' || type === 'DEPOSIT') && (
{type === 'SEND' && (
<div className="md:hidden">
<NavHeader
icon="cancel"
Expand Down
Loading