From c30083735912a0cb8a5c10216f475c57799ecdfd Mon Sep 17 00:00:00 2001 From: Zishan Mohd Date: Wed, 3 Sep 2025 21:07:20 +0530 Subject: [PATCH 1/3] sligify chain name --- .../TransactionDetailsReceipt.tsx | 5 +++-- src/utils/general.utils.ts | 14 ++++++++++++++ 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/src/components/TransactionDetails/TransactionDetailsReceipt.tsx b/src/components/TransactionDetails/TransactionDetailsReceipt.tsx index 659cf7e53..fbf386f64 100644 --- a/src/components/TransactionDetails/TransactionDetailsReceipt.tsx +++ b/src/components/TransactionDetails/TransactionDetailsReceipt.tsx @@ -8,7 +8,7 @@ import { useUserStore } from '@/redux/hooks' import { chargesApi } from '@/services/charges' import { sendLinksApi } from '@/services/sendLinks' import { formatAmount, formatDate, getInitialsFromName } from '@/utils' -import { formatIban, printableAddress, shortenAddress, shortenAddressLong } from '@/utils/general.utils' +import { formatIban, printableAddress, shortenAddress, shortenAddressLong, slugify } from '@/utils/general.utils' import { getDisplayCurrencySymbol } from '@/utils/currency' import { cancelOnramp } from '@/app/actions/onramp' import { captureException } from '@sentry/nextjs' @@ -204,8 +204,9 @@ export const TransactionDetailsReceipt = ({ } try { + const chainName = slugify(transaction.tokenDisplayDetails?.chainName ?? '') const res = await fetch( - `https://api.coingecko.com/api/v3/coins/${transaction.tokenDisplayDetails?.chainName}/contract/${transaction.tokenAddress}` + `https://api.coingecko.com/api/v3/coins/${chainName}/contract/${transaction.tokenAddress}` ) const tokenDetails = await res.json() setTokenData({ diff --git a/src/utils/general.utils.ts b/src/utils/general.utils.ts index c50658c9c..9b6c833c1 100644 --- a/src/utils/general.utils.ts +++ b/src/utils/general.utils.ts @@ -1293,3 +1293,17 @@ export function isTxReverted(receipt: TransactionReceipt): boolean { export function checkIfInternalNavigation(): boolean { return !!document.referrer && new URL(document.referrer).origin === window.location.origin } + +/** + * Converts a string into a URL-friendly slug + * @param text - The string to slugify + * @returns A slugified string with lowercase letters, hyphens, and no special characters + */ +export function slugify(text: string): string { + return text + .toLowerCase() // Convert to lowercase + .trim() // Remove leading/trailing whitespace + .replace(/[^\w\s-]/g, '') // Remove special characters except word chars, spaces, and hyphens + .replace(/[\s_-]+/g, '-') // Replace spaces, underscores, and multiple hyphens with single hyphen + .replace(/^-+|-+$/g, '') // Remove leading and trailing hyphens +} From a371b429ed53dfb691cdd5659766b4a9299c6860 Mon Sep 17 00:00:00 2001 From: Zishan Mohd Date: Wed, 3 Sep 2025 21:23:08 +0530 Subject: [PATCH 2/3] fix: stale state issue --- src/components/Global/DaimoPayButton/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Global/DaimoPayButton/index.tsx b/src/components/Global/DaimoPayButton/index.tsx index 78102ee98..aeb234e2d 100644 --- a/src/components/Global/DaimoPayButton/index.tsx +++ b/src/components/Global/DaimoPayButton/index.tsx @@ -94,7 +94,7 @@ export const DaimoPayButton = ({ // Reset payment amount for Daimo await resetPayment({ - toUnits: amount.replace(/,/g, ''), + toUnits: formattedAmount.toString(), }) return true From 3b5a1b64e5137ac7c976a23c7c2886e64070d350 Mon Sep 17 00:00:00 2001 From: Zishan Mohd Date: Wed, 3 Sep 2025 22:09:22 +0530 Subject: [PATCH 3/3] hide row if tokenData is not present --- .../TransactionDetailsReceipt.tsx | 93 ++++++++++--------- 1 file changed, 47 insertions(+), 46 deletions(-) diff --git a/src/components/TransactionDetails/TransactionDetailsReceipt.tsx b/src/components/TransactionDetails/TransactionDetailsReceipt.tsx index fbf386f64..3bfb0be9c 100644 --- a/src/components/TransactionDetails/TransactionDetailsReceipt.tsx +++ b/src/components/TransactionDetails/TransactionDetailsReceipt.tsx @@ -55,10 +55,7 @@ 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 [tokenData, setTokenData] = useState<{ symbol: string; icon: string } | null>(null) const [isTokenDataLoading, setIsTokenDataLoading] = useState(true) useEffect(() => { @@ -215,10 +212,7 @@ export const TransactionDetailsReceipt = ({ }) } catch (e) { console.error(e) - setTokenData({ - symbol: '', - icon: '', - }) + setTokenData(null) } finally { setIsTokenDataLoading(false) } @@ -331,45 +325,52 @@ export const TransactionDetailsReceipt = ({ /> )} - {rowVisibilityConfig.tokenAndNetwork && transaction.tokenDisplayDetails && ( - - ) : ( -
-
- {/* Main token icon */} - - {/* Smaller chain icon, absolutely positioned */} - {transaction.tokenDisplayDetails.chainIconUrl && ( -
- -
- )} + {rowVisibilityConfig.tokenAndNetwork && + transaction.tokenDisplayDetails && + tokenData?.icon && + tokenData?.symbol && ( + + ) : ( +
+
+ {/* Main token icon */} + + {/* Smaller chain icon, absolutely positioned */} + {transaction.tokenDisplayDetails.chainIconUrl && ( +
+ +
+ )} +
+ + {tokenData.symbol.toUpperCase()} on{' '} + {transaction.tokenDisplayDetails.chainName} +
- - {tokenData.symbol.toUpperCase()} on{' '} - {transaction.tokenDisplayDetails.chainName} - -
- ) - } - hideBottomBorder={shouldHideBorder('tokenAndNetwork')} - /> - )} + ) + } + hideBottomBorder={shouldHideBorder('tokenAndNetwork')} + /> + )} {rowVisibilityConfig.txId && transaction.txHash && (