Skip to content

Fix: daimo bugs part2 #1149

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
jjramirezn merged 8 commits into from
Aug 28, 2025
Merged

Fix: daimo bugs part2 #1149

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
f8ab8e6
fix: black screen on IOS
Zishan-7 Aug 28, 2025
5ef8884
fix: sucess screen showed without paying - add money flow
Zishan-7 Aug 28, 2025
98e4ee1
fix currency and double $ in txn history
Zishan-7 Aug 28, 2025
98593e5
fix: x-chan token size and add API to get missing token icons
Zishan-7 Aug 28, 2025
3d55668
fix: req fulfilment
Zishan-7 Aug 28, 2025
e3d12d0
add default value to tokenData
Zishan-7 Aug 28, 2025
7b62542
fix: move useeffect above transaction null check
Zishan-7 Aug 28, 2025
6a96e39
format amount
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
6 changes: 4 additions & 2 deletions src/components/Common/ActionListDaimoPayButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { useSearchParams } from 'next/navigation'
import { InitiatePaymentPayload, usePaymentInitiator } from '@/hooks/usePaymentInitiator'
import DaimoPayButton from '../Global/DaimoPayButton'
import { ACTION_METHODS } from '@/constants/actionlist.consts'
import { useWallet } from '@/hooks/wallet/useWallet'

const ActionListDaimoPayButton = () => {
const dispatch = useAppDispatch()
Expand All @@ -20,6 +21,7 @@ const ActionListDaimoPayButton = () => {
price: currencyPrice,
} = useCurrency(searchParams.get('currency'))
const requestId = searchParams.get('id')
const { address: peanutWalletAddress } = useWallet()

const { isProcessing, initiateDaimoPayment, completeDaimoPayment } = usePaymentInitiator()

Expand Down Expand Up @@ -97,8 +99,8 @@ const ActionListDaimoPayButton = () => {
const result = await completeDaimoPayment({
chargeDetails: chargeDetails,
txHash: daimoPaymentResponse.txHash as string,
sourceChainId: daimoPaymentResponse.payment.source.chainId,
payerAddress: daimoPaymentResponse.payment.source.payerAddress,
destinationchainId: daimoPaymentResponse.payment.destination.chainId,
payerAddress: peanutWalletAddress ?? daimoPaymentResponse.payment.source.payerAddress,
})

if (result.status === 'Success') {
Expand Down
1 change: 1 addition & 0 deletions src/components/Global/DaimoPayButton/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,7 @@ export const DaimoPayButton = ({

return (
<DaimoPayButtonSDK.Custom
resetOnSuccess // resets the daimo payment state after payment is successfully completed
appId={daimoAppId}
intent="Deposit"
toChain={arbitrum.id}
Expand Down
2 changes: 1 addition & 1 deletion src/components/Global/DisplayIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ const DisplayIcon: React.FC<DisplayIconProps> = ({
// Fallback to AvatarWithBadge
return (
<div className={`${sizeClass} flex items-center justify-center rounded-full bg-gray-200 ${className}`.trim()}>
<AvatarWithBadge name={fallbackName} size={badgeSize} />
<AvatarWithBadge name={fallbackName} size={badgeSize} className={sizeClass} />
</div>
)
}
Expand Down
9 changes: 3 additions & 6 deletions src/components/Global/SoundPlayer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,9 @@ export const SoundPlayer = ({ sound }: SoundPlayerProps) => {

const { deviceType } = useDeviceType()

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

useEffect(() => {
if (!deviceType || deviceType === DeviceType.IOS) return

const audioSrc = soundMap[sound]
if (!audioSrc) return

Expand Down Expand Up @@ -98,7 +95,7 @@ export const SoundPlayer = ({ sound }: SoundPlayerProps) => {
}
audioRef.current = null
}
}, [sound])
}, [sound, deviceType])

return null
}
4 changes: 4 additions & 0 deletions src/components/TransactionDetails/TransactionCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,10 @@ const TransactionCard: React.FC<TransactionCardProps> = ({
arsSign = '+'
}
finalDisplayAmount = `${arsSign}${getDisplayCurrencySymbol('ARS')}${formatNumberForDisplay(transaction.currency.amount, { maxDecimals: defaultDisplayDecimals })}`
}
// keep currency as $ because we will always receive in USDC
else if (transaction.extraDataForDrawer?.originalType === EHistoryEntryType.DEPOSIT) {
finalDisplayAmount = `+$${formatNumberForDisplay(Math.abs(amount).toString(), { maxDecimals: defaultDisplayDecimals })}`
} else {
const isStableCoin = transaction.tokenSymbol && STABLE_COINS.includes(transaction.tokenSymbol)
const displaySymbol =
Expand Down
100 changes: 74 additions & 26 deletions src/components/TransactionDetails/TransactionDetailsReceipt.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,11 @@ export const TransactionDetailsReceipt = ({
const { fetchBalance } = useWallet()
const [showBankDetails, setShowBankDetails] = useState(false)
const [showCancelLinkModal, setShowCancelLinkModal] = useState(isModalOpen)
const [tokenData, setTokenData] = useState<{ symbol: string; icon: string }>({
symbol: '',
icon: '',
})
const [isTokenDataLoading, setIsTokenDataLoading] = useState(true)

useEffect(() => {
setIsModalOpen?.(showCancelLinkModal)
Expand Down Expand Up @@ -174,6 +179,45 @@ export const TransactionDetailsReceipt = ({
return false
}, [transaction, isPendingSentLink, isPendingRequester, isPendingRequestee])

useEffect(() => {
const getTokenDetails = async () => {
if (!transaction) {
setIsTokenDataLoading(false)
return
}

if (transaction.tokenDisplayDetails?.tokenIconUrl && transaction.tokenDisplayDetails.tokenSymbol) {
setTokenData({
symbol: transaction.tokenDisplayDetails.tokenSymbol,
icon: transaction.tokenDisplayDetails.tokenIconUrl,
})
setIsTokenDataLoading(false)
return
}

try {
const res = await fetch(
`https://api.coingecko.com/api/v3/coins/${transaction.tokenDisplayDetails?.chainName}/contract/${transaction.tokenAddress}`
)
const tokenDetails = await res.json()
setTokenData({
symbol: tokenDetails.symbol,
icon: tokenDetails.image.large,
})
} catch (e) {
console.error(e)
setTokenData({
symbol: '',
icon: '',
})
} finally {
setIsTokenDataLoading(false)
}
}

getTokenDetails()
}, [])

if (!transaction) return null

// format data for display
Expand Down Expand Up @@ -282,33 +326,37 @@ export const TransactionDetailsReceipt = ({
<PaymentInfoRow
label="Token and network"
value={
<div className="flex items-center gap-2">
<div className="relative flex h-6 w-6 min-w-[24px] items-center justify-center">
{/* Main token icon */}
<DisplayIcon
iconUrl={transaction.tokenDisplayDetails.tokenIconUrl}
altText={transaction.tokenDisplayDetails.tokenSymbol || 'token'}
fallbackName={transaction.tokenDisplayDetails.tokenSymbol || 'T'}
sizeClass="h-6 w-6"
/>
{/* Smaller chain icon, absolutely positioned */}
{transaction.tokenDisplayDetails.chainIconUrl && (
<div className="absolute -bottom-1 -right-1">
<DisplayIcon
iconUrl={transaction.tokenDisplayDetails.chainIconUrl}
altText={transaction.tokenDisplayDetails.chainName || 'chain'}
fallbackName={transaction.tokenDisplayDetails.chainName || 'C'}
sizeClass="h-3.5 w-3.5"
className="rounded-full border-2 border-white dark:border-grey-4"
/>
</div>
)}
isTokenDataLoading ? (
<div className="h-6 w-32 animate-pulse rounded bg-gray-200" />
) : (
<div className="flex items-center gap-2">
<div className="relative flex h-6 w-6 min-w-[24px] items-center justify-center">
{/* Main token icon */}
<DisplayIcon
iconUrl={tokenData.icon}
altText={tokenData.symbol || 'token'}
fallbackName={tokenData.symbol || 'T'}
sizeClass="h-6 w-6"
/>
{/* Smaller chain icon, absolutely positioned */}
{transaction.tokenDisplayDetails.chainIconUrl && (
<div className="absolute -bottom-1 -right-1">
<DisplayIcon
iconUrl={transaction.tokenDisplayDetails.chainIconUrl}
altText={transaction.tokenDisplayDetails.chainName || 'chain'}
fallbackName={transaction.tokenDisplayDetails.chainName || 'C'}
sizeClass="h-3.5 w-3.5 text-[7px]"
className="rounded-full border-2 border-white dark:border-grey-4"
/>
</div>
)}
</div>
<span>
{tokenData.symbol.toUpperCase()} on{' '}
{transaction.tokenDisplayDetails.chainName}
</span>
</div>
<span>
{transaction.tokenDisplayDetails.tokenSymbol} on{' '}
{transaction.tokenDisplayDetails.chainName}
</span>
</div>
)
}
hideBottomBorder={shouldHideBorder('tokenAndNetwork')}
/>
Expand Down
2 changes: 2 additions & 0 deletions src/components/TransactionDetails/transactionTransformer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@ export interface TransactionDetails {
cancelledDate?: string | Date
txHash?: string
explorerUrl?: string
tokenAddress?: string
extraDataForDrawer?: {
addressExplorerUrl?: string
originalType: EHistoryEntryType
Expand Down Expand Up @@ -416,6 +417,7 @@ export function mapTransactionDataForDrawer(entry: HistoryEntry): MappedTransact
txHash: entry.txHash,
explorerUrl: explorerUrlWithTx,
tokenDisplayDetails,
tokenAddress: entry.tokenAddress,
extraDataForDrawer: {
addressExplorerUrl,
originalType: entry.type as EHistoryEntryType,
Expand Down
6 changes: 3 additions & 3 deletions src/hooks/usePaymentInitiator.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -769,20 +769,20 @@ export const usePaymentInitiator = () => {
const completeDaimoPayment = useCallback(
async ({
chargeDetails,
sourceChainId,
destinationchainId,
txHash,
payerAddress,
}: {
chargeDetails: TRequestChargeResponse
txHash: string
sourceChainId: number
destinationchainId: number
payerAddress: string
}) => {
try {
setLoadingStep('Updating Payment Status')
const payment = await chargesApi.createPayment({
chargeId: chargeDetails.uuid,
chainId: sourceChainId.toString(),
chainId: destinationchainId.toString(),
hash: txHash,
tokenAddress: chargeDetails.tokenAddress,
payerAddress,
Expand Down
Loading