[TASK-12497] Feat/context instead of storage

src/app/(mobile-ui)/add-money/[country]/bank/page.tsx

@@ -38,7 +38,7 @@ export default function OnrampBankPage() {
 
     const [isKycModalOpen, setIsKycModalOpen] = useState(false)
     const [liveKycStatus, setLiveKycStatus] = useState<KYCStatus | undefined>(undefined)
-    const { amountToOnramp: amountFromContext, setAmountToOnramp, setError, error } = useOnrampFlow()
+    const { amountToOnramp: amountFromContext, setAmountToOnramp, setError, error, setOnrampData } = useOnrampFlow()
     const formRef = useRef<{ handleSubmit: () => void }>(null)
     const [isUpdatingUser, setIsUpdatingUser] = useState(false)
     const [userUpdateError, setUserUpdateError] = useState<string | null>(null)
@@ -186,7 +186,7 @@ export default function OnrampBankPage() {
                 amount: cleanedAmount,
                 country: selectedCountry,
             })
-            sessionStorage.setItem('onrampData', JSON.stringify(onrampDataResponse))
+            setOnrampData(onrampDataResponse)
 
             if (onrampDataResponse.transferId) {
                 setStep('showDetails')

src/components/AddMoney/components/AddMoneyBankDetails.tsx

@@ -8,36 +8,18 @@ import { PaymentInfoRow } from '@/components/Payment/PaymentInfoRow'
 import { PEANUT_WALLET_TOKEN_SYMBOL } from '@/constants'
 import { useOnrampFlow } from '@/context/OnrampFlowContext'
 import { useRouter, useParams } from 'next/navigation'
-import { useEffect, useState, useMemo } from 'react'
+import { useEffect, useMemo } from 'react'
 import { countryCodeMap, countryData } from '@/components/AddMoney/consts'
 import { formatCurrencyAmount } from '@/utils/currency'
 import { formatBankAccountDisplay } from '@/utils/format.utils'
 import Icon from '@/components/Global/Icon'
 import { getCurrencySymbol, getOnrampCurrencyConfig } from '@/utils/bridge.utils'
 
-export interface IOnrampData {
-    transferId?: string
-    depositInstructions?: {
-        amount?: string
-        currency?: string
-        depositMessage?: string
-        bankName?: string
-        bankAddress?: string
-        bankRoutingNumber?: string
-        bankAccountNumber?: string
-        bankBeneficiaryName?: string
-        bankBeneficiaryAddress?: string
-        iban?: string
-        bic?: string
-    }
-}
-
 export default function AddMoneyBankDetails() {
-    const { amountToOnramp } = useOnrampFlow()
+    const { amountToOnramp, onrampData, setOnrampData } = useOnrampFlow()
     const router = useRouter()
     const params = useParams()
     const currentCountryName = params.country as string
-    const [onrampData, setOnrampData] = useState<IOnrampData | null>(null)
 
     // Get country information from URL params
     const currentCountryDetails = useMemo(() => {
@@ -72,17 +54,6 @@ export default function AddMoneyBankDetails() {
             router.replace('/add-money')
             return
         }
-
-        // Load onramp data from sessionStorage
-        const storedData = sessionStorage.getItem('onrampData')
-        if (storedData) {
-            try {
-                const parsedData = JSON.parse(storedData)
-                setOnrampData(parsedData)
-            } catch (error) {
-                console.error('Error parsing onramp data:', error)
-            }
-        }
     }, [amountToOnramp, router])
 
     const generateBankDetails = async () => {

src/context/OnrampFlowContext.tsx

@@ -9,6 +9,23 @@ export interface InitialViewErrorState {
     errorMessage: string
 }
 
+export interface IOnrampData {
+    transferId?: string
+    depositInstructions?: {
+        amount?: string
+        currency?: string
+        depositMessage?: string
+        bankName?: string
+        bankAddress?: string
+        bankRoutingNumber?: string
+        bankAccountNumber?: string
+        bankBeneficiaryName?: string
+        bankBeneficiaryAddress?: string
+        iban?: string
+        bic?: string
+    }
+}
+
 interface OnrampFlowContextType {
     amountToOnramp: string
     setAmountToOnramp: (amount: string) => void
@@ -18,6 +35,8 @@ interface OnrampFlowContextType {
     setError: (error: InitialViewErrorState) => void
     fromBankSelected: boolean
     setFromBankSelected: (selected: boolean) => void
+    onrampData: IOnrampData | null
+    setOnrampData: (data: IOnrampData | null) => void
     resetOnrampFlow: () => void
 }
 
@@ -31,6 +50,7 @@ export const OnrampFlowContextProvider: React.FC<{ children: ReactNode }> = ({ c
         errorMessage: '',
     })
     const [fromBankSelected, setFromBankSelected] = useState<boolean>(false)
+    const [onrampData, setOnrampData] = useState<IOnrampData | null>(null)
 
     const resetOnrampFlow = useCallback(() => {
         setAmountToOnramp('')
@@ -40,6 +60,7 @@ export const OnrampFlowContextProvider: React.FC<{ children: ReactNode }> = ({ c
             errorMessage: '',
         })
         setFromBankSelected(false)
+        setOnrampData(null)
     }, [])
 
     const value = useMemo(
@@ -52,9 +73,11 @@ export const OnrampFlowContextProvider: React.FC<{ children: ReactNode }> = ({ c
             setError,
             fromBankSelected,
             setFromBankSelected,
+            onrampData,
+            setOnrampData,
             resetOnrampFlow,
         }),
-        [amountToOnramp, currentView, error, fromBankSelected, resetOnrampFlow]
+        [amountToOnramp, currentView, error, fromBankSelected, onrampData, resetOnrampFlow]
     )
 
     return <OnrampFlowContext.Provider value={value}>{children}</OnrampFlowContext.Provider>