router.back())} />
+
{/* Amount Display Card */}
diff --git a/src/components/AddMoney/views/RhinoDeposit.view.tsx b/src/components/AddMoney/views/RhinoDeposit.view.tsx
index b30fe87b6..7b2ef4b7b 100644
--- a/src/components/AddMoney/views/RhinoDeposit.view.tsx
+++ b/src/components/AddMoney/views/RhinoDeposit.view.tsx
@@ -58,7 +58,8 @@ const RhinoDepositView = ({
return rhinoApi.getDepositAddressStatus(depositAddressData.depositAddress as string)
},
enabled: !!depositAddressData?.depositAddress && isDelayComplete, // Add some delay to start polling after the deposit address is created
- refetchInterval: (query) => (query.state.data?.status === 'completed' ? false : 5000),
+ refetchInterval: (query: { state: { data?: { status?: string } } }) =>
+ query.state.data?.status === 'completed' ? false : 5000,
})
const { containerRef, truncatedAddress } = useAutoTruncatedAddress(depositAddressData?.depositAddress ?? '')
diff --git a/src/components/Global/AmountInput/index.tsx b/src/components/Global/AmountInput/index.tsx
index 65b373ac2..315de6a65 100644
--- a/src/components/Global/AmountInput/index.tsx
+++ b/src/components/Global/AmountInput/index.tsx
@@ -13,9 +13,11 @@ const DECIMAL_SCALE = 18 // Max expected decimal places for any denomination
interface AmountInputProps {
className?: string
initialAmount?: string
+ initialDenomination?: string
onSubmit?: () => void
setPrimaryAmount: (value: string) => void
setSecondaryAmount?: (value: string) => void
+ setDisplayedAmount?: (value: string) => void
onBlur?: () => void
disabled?: boolean
primaryDenomination?: { symbol: string; price: number; decimals: number }
@@ -36,9 +38,11 @@ interface AmountInputProps {
const AmountInput = ({
className,
initialAmount,
+ initialDenomination,
onSubmit,
setPrimaryAmount,
setSecondaryAmount,
+ setDisplayedAmount,
onBlur,
disabled,
primaryDenomination = { symbol: '$', price: 1, decimals: 2 },
@@ -64,7 +68,19 @@ const AmountInput = ({
// Store display value for input field (what user sees when typing)
const [displayValue, setDisplayValue] = useState(initialAmount || '')
const [exactValue, setExactValue] = useState(Number(initialAmount || '') * 10 ** DECIMAL_SCALE)
- const [displaySymbol, setDisplaySymbol] = useState(primaryDenomination.symbol)
+ // Use initialDenomination if provided and valid, otherwise default to primaryDenomination
+ const [displaySymbol, setDisplaySymbol] = useState(() => {
+ if (initialDenomination) {
+ // Check if initialDenomination matches primary or secondary
+ if (initialDenomination === primaryDenomination.symbol) {
+ return primaryDenomination.symbol
+ }
+ if (secondaryDenomination && initialDenomination === secondaryDenomination.symbol) {
+ return secondaryDenomination.symbol
+ }
+ }
+ return primaryDenomination.symbol
+ })
// sync displayValue with initialAmount changes (e.g. when charge is fetched)
useEffect(() => {
@@ -120,6 +136,9 @@ const AmountInput = ({
const rawDisplayValue = displayValue.replace(/,/g, '')
const rawAlternativeValue = alternativeDisplayValue.replace(/,/g, '')
+ // Always call setDisplayedAmount with the currently displayed value
+ setDisplayedAmount?.(rawDisplayValue)
+
if (isPrimaryDenomination) {
setPrimaryAmount(rawDisplayValue)
setSecondaryAmount?.(rawAlternativeValue)
diff --git a/src/context/OnrampFlowContext.tsx b/src/context/OnrampFlowContext.tsx
index 1b3dd91b6..26b51f737 100644
--- a/src/context/OnrampFlowContext.tsx
+++ b/src/context/OnrampFlowContext.tsx
@@ -2,8 +2,6 @@
import React, { createContext, type ReactNode, useCallback, useContext, useMemo, useState } from 'react'
-export type OnrampView = 'INITIAL' | 'SELECT_METHOD'
-
export interface InitialViewErrorState {
showError: boolean
errorMessage: string
@@ -28,11 +26,20 @@ export interface IOnrampData {
}
}
+/**
+ * OnrampFlowContext - Manages transient state for the add-money (onramp) flow.
+ *
+ * NOTE: Step and amount are now managed via URL query parameters using nuqs.
+ * See the useQueryStates usage in:
+ * - src/app/(mobile-ui)/add-money/[country]/bank/page.tsx
+ * - src/components/AddMoney/components/MantecaAddMoney.tsx
+ *
+ * This context only manages:
+ * - `error` - Transient error state for form validation
+ * - `fromBankSelected` - Flag for navigation
+ * - `onrampData` - API response data (not appropriate for URL)
+ */
interface OnrampFlowContextType {
- amountToOnramp: string
- setAmountToOnramp: (amount: string) => void
- currentView: OnrampView
- setCurrentView: (view: OnrampView) => void
error: InitialViewErrorState
setError: (error: InitialViewErrorState) => void
fromBankSelected: boolean
@@ -45,18 +52,17 @@ interface OnrampFlowContextType {
const OnrampFlowContext = createContext(undefined)
export const OnrampFlowContextProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
- const [amountToOnramp, setAmountToOnramp] = useState('')
- const [currentView, setCurrentView] = useState('INITIAL')
+ // Transient UI state - not appropriate for URL
const [error, setError] = useState({
showError: false,
errorMessage: '',
})
const [fromBankSelected, setFromBankSelected] = useState(false)
+
+ // API response data - not appropriate for URL
const [onrampData, setOnrampData] = useState(null)
const resetOnrampFlow = useCallback(() => {
- setAmountToOnramp('')
- setCurrentView('INITIAL')
setError({
showError: false,
errorMessage: '',
@@ -67,10 +73,6 @@ export const OnrampFlowContextProvider: React.FC<{ children: ReactNode }> = ({ c
const value = useMemo(
() => ({
- amountToOnramp,
- setAmountToOnramp,
- currentView,
- setCurrentView,
error,
setError,
fromBankSelected,
@@ -79,7 +81,7 @@ export const OnrampFlowContextProvider: React.FC<{ children: ReactNode }> = ({ c
setOnrampData,
resetOnrampFlow,
}),
- [amountToOnramp, currentView, error, fromBankSelected, onrampData, resetOnrampFlow]
+ [error, fromBankSelected, onrampData, resetOnrampFlow]
)
return {children}