Prod release SP 102 - Links v2 send flow guest claims

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

@@ -25,6 +25,7 @@ import { UserDetailsForm, type UserDetailsFormData } from '@/components/AddMoney
 import { updateUserById } from '@/app/actions/users'
 import AddMoneyBankDetails from '@/components/AddMoney/components/AddMoneyBankDetails'
 import { getOnrampCurrencyConfig, getCurrencySymbol, getMinimumAmount } from '@/utils/bridge.utils'
+import { Slider } from '@/components/Slider'
 
 type AddStep = 'inputAmount' | 'kyc' | 'loading' | 'collectUserDetails' | 'showDetails'
 
@@ -97,14 +98,9 @@ export default function OnrampBankPage() {
         if (step === 'loading') {
             const currentKycStatus = liveKycStatus || user?.user.kycStatus
             const isUserKycVerified = currentKycStatus === 'approved'
-            const hasUserDetails = user?.user.fullName && user?.user.email
 
             if (!isUserKycVerified) {
-                if (hasUserDetails) {
-                    setStep('kyc')
-                } else {
-                    setStep('collectUserDetails')
-                }
+                setStep('collectUserDetails')
             } else {
                 setStep('inputAmount')
                 if (amountFromContext && !rawTokenAmount) {
@@ -388,28 +384,20 @@ export default function OnrampBankPage() {
                     title="IMPORTANT!"
                     description={
                         <>
-                            In the following step you'll see a <strong>"Deposit Message" item</strong>, copy and paste
-                            it exactly as it is on the description field of your transfer.
+                            In the following step you'll see a <br /> <strong>"Deposit Message" item</strong> <br />{' '}
+                            copy and paste it exactly as it is on <br /> the description field of your transfer.
                             <br />
                             <br />
-                            <strong>Without it, we won't be able to credit your money.</strong>
+                            <strong>
+                                Without it your deposit will be returned and might take 2-10 working days to process.
+                            </strong>
                         </>
                     }
-                    checkbox={{
-                        text: 'I understand and accept the risk.',
-                        checked: isRiskAccepted,
-                        onChange: setIsRiskAccepted,
-                    }}
-                    ctas={[
-                        {
-                            text: 'Continue',
-                            variant: isRiskAccepted ? 'purple' : 'dark',
-                            shadowSize: '4',
-                            onClick: handleWarningConfirm,
-                            disabled: !isRiskAccepted,
-                            className: 'w-full',
-                        },
-                    ]}
+                    footer={
+                        <div className="w-full">
+                            <Slider onValueChange={(v) => v && handleWarningConfirm()} />
+                        </div>
+                    }
                     preventClose={false}
                     modalPanelClassName="max-w-md mx-8"
                 />

src/app/(mobile-ui)/add-money/crypto/direct/page.tsx

@@ -2,7 +2,8 @@
 
 import PaymentPage from '@/app/[...recipient]/client'
 import PeanutLoading from '@/components/Global/PeanutLoading'
-import { useUserStore } from '@/redux/hooks'
+import { useAppDispatch, useUserStore } from '@/redux/hooks'
+import { paymentActions } from '@/redux/slices/payment-slice'
 import { useRouter, useSearchParams } from 'next/navigation'
 import { useEffect, useState } from 'react'
 
@@ -12,6 +13,11 @@ export default function AddMoneyCryptoDirectPage() {
     const { user } = useUserStore()
     const [recipientUsername, setRecipientUsername] = useState<string | null>(null)
     const [isLoading, setIsLoading] = useState(true)
+    const dispatch = useAppDispatch()
+
+    useEffect(() => {
+        dispatch(paymentActions.resetPaymentState())
+    }, [dispatch])
 
     useEffect(() => {
         if (user?.user.username) {
@@ -21,7 +27,7 @@ export default function AddMoneyCryptoDirectPage() {
             return
         }
         setIsLoading(false)
-    }, [searchParams, router])
+    }, [searchParams, router, user])
 
     if (isLoading) {
         return <PeanutLoading />

src/app/(mobile-ui)/add-money/crypto/page.tsx

@@ -6,10 +6,10 @@ import NetworkSelectionView, { SelectedNetwork } from '@/components/AddMoney/vie
 import TokenSelectionView from '@/components/AddMoney/views/TokenSelection.view'
 import ActionModal from '@/components/Global/ActionModal'
 import NavHeader from '@/components/Global/NavHeader'
+import { Slider } from '@/components/Slider'
 import { useWallet } from '@/hooks/wallet/useWallet'
 import { useRouter } from 'next/navigation'
-import { useState } from 'react'
-import { twMerge } from 'tailwind-merge'
+import { useEffect, useState } from 'react'
 
 type AddMoneyCryptoStep = 'sourceSelection' | 'tokenSelection' | 'networkSelection' | 'riskModal' | 'qrScreen'
 
@@ -22,6 +22,12 @@ const AddMoneyCryptoPage = () => {
     const [selectedNetwork, setSelectedNetwork] = useState<SelectedNetwork | null>(null)
     const [isRiskAccepted, setIsRiskAccepted] = useState(false)
 
+    useEffect(() => {
+        if (isRiskAccepted) {
+            setCurrentStep('qrScreen')
+        }
+    }, [isRiskAccepted])
+
     const handleCryptoSourceSelected = (source: CryptoSource) => {
         setSelectedSource(source)
         setCurrentStep('tokenSelection')
@@ -38,12 +44,6 @@ const AddMoneyCryptoPage = () => {
         setCurrentStep('riskModal')
     }
 
-    const handleRiskContinue = () => {
-        if (isRiskAccepted) {
-            setCurrentStep('qrScreen')
-        }
-    }
-
     const resetSelections = () => {
         setSelectedToken(null)
         setSelectedNetwork(null)
@@ -88,26 +88,19 @@ const AddMoneyCryptoPage = () => {
                         visible={true}
                         onClose={handleBackToNetworkSelectionFromRisk}
                         icon={'alert'}
+                        iconContainerClassName="bg-yellow-1"
                         title={`Only send ${selectedToken.symbol} on ${selectedNetwork.name}`}
-                        description="Sending funds via any other network will result in a permanent loss of funds. Peanut is not responsible for any loss of funds due to incorrect network selection."
-                        checkbox={{
-                            text: 'I understand and accept the risk.',
-                            checked: isRiskAccepted,
-                            onChange: setIsRiskAccepted,
-                        }}
-                        ctas={[
-                            {
-                                text: 'Continue',
-                                onClick: handleRiskContinue,
-                                disabled: !isRiskAccepted,
-                                variant: isRiskAccepted ? 'purple' : 'stroke',
-                                shadowSize: '4',
-                                className: twMerge(
-                                    !isRiskAccepted ? 'border-grey-2 text-grey-2' : '',
-                                    'text-black border border-black h-11 hover:text-black'
-                                ),
-                            },
-                        ]}
+                        description={
+                            <span className="text-sm">
+                                Sending funds via any other network will result in a <b>permanent loss.</b>
+                            </span>
+                        }
+                        footer={
+                            <div className="w-full">
+                                <Slider onValueChange={(v) => v && setIsRiskAccepted(true)} />
+                            </div>
+                        }
+                        ctas={[]}
                         modalPanelClassName="max-w-xs"
                     />
                 )}

src/app/(mobile-ui)/home/page.tsx

@@ -37,6 +37,8 @@ import FloatingReferralButton from '@/components/Home/FloatingReferralButton'
 import { AccountType } from '@/interfaces'
 import { formatUnits } from 'viem'
 import { PEANUT_WALLET_TOKEN_DECIMALS } from '@/constants'
+import { PostSignupActionManager } from '@/components/Global/PostSignupActionManager'
+import { useGuestFlow } from '@/context/GuestFlowContext'
 
 const BALANCE_WARNING_THRESHOLD = parseInt(process.env.NEXT_PUBLIC_BALANCE_WARNING_THRESHOLD ?? '500')
 const BALANCE_WARNING_EXPIRY = parseInt(process.env.NEXT_PUBLIC_BALANCE_WARNING_EXPIRY ?? '1814400') // 21 days in seconds
@@ -45,6 +47,7 @@ export default function Home() {
     const { balance, address, isFetchingBalance, isFetchingRewardBalance } = useWallet()
     const { rewardWalletBalance } = useWalletStore()
     const [isRewardsModalOpen, setIsRewardsModalOpen] = useState(false)
+    const { resetGuestFlow } = useGuestFlow()
     const [isBalanceHidden, setIsBalanceHidden] = useState(() => {
         const prefs = getUserPreferences()
         return prefs?.balanceHidden ?? false
@@ -60,6 +63,7 @@ export default function Home() {
     const [showAddMoneyPromptModal, setShowAddMoneyPromptModal] = useState(false)
     const [showBalanceWarningModal, setShowBalanceWarningModal] = useState(false)
     const [showReferralCampaignModal, setShowReferralCampaignModal] = useState(false)
+    const [isPostSignupActionModalVisible, setIsPostSignupActionModalVisible] = useState(false)
 
     const userFullName = useMemo(() => {
         if (!user) return
@@ -77,6 +81,10 @@ export default function Home() {
 
     const isLoading = isFetchingUser && !username
 
+    useEffect(() => {
+        resetGuestFlow()
+    }, [resetGuestFlow])
+
     useEffect(() => {
         // We have some users that didn't have the peanut wallet created
         // correctly, so we need to create it
@@ -104,15 +112,45 @@ export default function Home() {
                 (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)
             const isStandalone = window.matchMedia('(display-mode: standalone)').matches
             const hasSeenModalThisSession = sessionStorage.getItem('hasSeenIOSPWAPromptThisSession')
+            const redirectUrl = getFromLocalStorage('redirect')
 
-            if (isIOS && !isStandalone && !hasSeenModalThisSession && !user?.hasPwaInstalled) {
+            if (
+                isIOS &&
+                !isStandalone &&
+                !hasSeenModalThisSession &&
+                !user?.hasPwaInstalled &&
+                !isPostSignupActionModalVisible &&
+                !redirectUrl
+            ) {
                 setShowIOSPWAInstallModal(true)
                 sessionStorage.setItem('hasSeenIOSPWAPromptThisSession', 'true')
             } else {
                 setShowIOSPWAInstallModal(false)
             }
         }
-    }, [user?.hasPwaInstalled])
+    }, [user?.hasPwaInstalled, isPostSignupActionModalVisible])
+
+    // effect for showing balance warning modal
+    useEffect(() => {
+        if (typeof window !== 'undefined' && !isFetchingBalance) {
+            const hasSeenBalanceWarning = getFromLocalStorage('hasSeenBalanceWarning')
+            const balanceInUsd = Number(formatUnits(balance, PEANUT_WALLET_TOKEN_DECIMALS))
+
+            // show if:
+            // 1. balance is above the threshold
+            // 2. user hasn't seen this warning in the current session
+            // 3. no other modals are currently active
+            if (
+                balanceInUsd > BALANCE_WARNING_THRESHOLD &&
+                !hasSeenBalanceWarning &&
+                !showIOSPWAInstallModal &&
+                !showAddMoneyPromptModal &&
+                !isPostSignupActionModalVisible
+            ) {
+                setShowBalanceWarningModal(true)
+            }
+        }
+    }, [balance, isFetchingBalance, showIOSPWAInstallModal, showAddMoneyPromptModal])
 
     // effect for showing balance warning modal
     useEffect(() => {
@@ -151,7 +189,8 @@ export default function Home() {
                 balance === 0n &&
                 !hasSeenAddMoneyPromptThisSession &&
                 !showIOSPWAInstallModal &&
-                !showBalanceWarningModal
+                !showBalanceWarningModal &&
+                !isPostSignupActionModalVisible
             ) {
                 setShowAddMoneyPromptModal(true)
                 sessionStorage.setItem('hasSeenAddMoneyPromptThisSession', 'true')
@@ -236,6 +275,9 @@ export default function Home() {
 
             {/* Floating Referral Button */}
             <FloatingReferralButton onClick={() => setShowReferralCampaignModal(true)} />
+
+            {/* Post Signup Action Modal */}
+            <PostSignupActionManager onActionModalVisibilityChange={setIsPostSignupActionModalVisible} />
         </PageContainer>
     )
 }

src/app/(mobile-ui)/layout.tsx

@@ -1,6 +1,9 @@
 'use client'
 
+import { MarqueeWrapper } from '@/components/Global/MarqueeWrapper'
 import { useRouter } from 'next/navigation'
+import { HandThumbsUp } from '@/assets'
+import Image from 'next/image'
 import GuestLoginModal from '@/components/Global/GuestLoginModal'
 import PeanutLoading from '@/components/Global/PeanutLoading'
 import TopNavbar from '@/components/Global/TopNavbar'
@@ -17,9 +20,6 @@ import PullToRefresh from 'pulltorefreshjs'
 import { useEffect, useMemo, useState } from 'react'
 import { twMerge } from 'tailwind-merge'
 import '../../styles/globals.css'
-import { MarqueeWrapper } from '@/components/Global/MarqueeWrapper'
-import Image from 'next/image'
-import { HandThumbsUp } from '@/assets'
 
 const publicPathRegex = /^\/(request\/pay|claim|pay\/.+$)/
 
@@ -114,7 +114,6 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
                             </MarqueeWrapper>
                         </button>
                     )}
-
                     {/* Fixed top navbar */}
                     {showFullPeanutWallet && (
                         <div className="sticky top-0 z-10 w-full">

src/app/(mobile-ui)/withdraw/crypto/page.tsx

@@ -27,6 +27,7 @@ import { useRouter } from 'next/navigation'
 import { useCallback, useEffect, useMemo } from 'react'
 import { captureMessage } from '@sentry/nextjs'
 import type { Address } from 'viem'
+import { Slider } from '@/components/Slider'
 
 export default function WithdrawCryptoPage() {
     const router = useRouter()
@@ -77,6 +78,10 @@ export default function WithdrawCryptoPage() {
         setError(null)
     }, [setError])
 
+    useEffect(() => {
+        dispatch(paymentActions.resetPaymentState())
+    }, [dispatch])
+
     useEffect(() => {
         if (!amountToWithdraw) {
             console.error('Amount not available in WithdrawFlowContext for withdrawal, redirecting.')
@@ -264,13 +269,6 @@ export default function WithdrawCryptoPage() {
         const fromChainId = isPeanutWallet ? PEANUT_WALLET_CHAIN.id.toString() : withdrawData.chain.chainId
         const toChainId = activeChargeDetailsFromStore.chainId
 
-        console.log('Cross-chain check:', {
-            fromChainId,
-            toChainId,
-            isPeanutWallet,
-            isCrossChain: fromChainId !== toChainId,
-        })
-
         return fromChainId !== toChainId
     }, [withdrawData, activeChargeDetailsFromStore, isPeanutWallet])
 
@@ -345,7 +343,7 @@ export default function WithdrawCryptoPage() {
                         headerTitle="Withdraw"
                         recipientType="ADDRESS"
                         type="SEND"
-                        currencyAmount={`$ ${amountToWithdraw}`}
+                        amount={amountToWithdraw}
                         isWithdrawFlow={true}
                         redirectTo="/withdraw"
                         message={
@@ -368,16 +366,16 @@ export default function WithdrawCryptoPage() {
                 title="Is this address compatible?"
                 description="Only send to address that support the selected network and token. Incorrect transfers may be lost."
                 icon="alert"
-                ctas={[
-                    {
-                        text: 'Proceed',
-                        onClick: handleCompatibilityProceed,
-                        variant: 'purple',
-                        shadowSize: '4',
-                        className: 'h-10 text-sm',
-                        icon: 'check-circle',
-                    },
-                ]}
+                footer={
+                    <div className="w-full">
+                        <Slider
+                            onValueChange={(v: boolean) => {
+                                if (!v) return
+                                handleCompatibilityProceed()
+                            }}
+                        />
+                    </div>
+                }
             />
         </div>
     )

src/app/[...recipient]/client.tsx

@@ -389,6 +389,7 @@ export default function PaymentPage({ recipient, flow = 'request_pay' }: Props)
         <div className={twMerge('mx-auto h-full min-h-[inherit] w-full space-y-8 self-center')}>
             {currentView === 'INITIAL' && (
                 <InitialPaymentView
+                    key={`initial-${flow}`}
                     {...(parsedPaymentData as ParsedURL)}
                     isAddMoneyFlow={isAddMoneyFlow}
                     isDirectUsdPayment={isDirectPay}
@@ -407,6 +408,7 @@ export default function PaymentPage({ recipient, flow = 'request_pay' }: Props)
             )}
             {currentView === 'CONFIRM' && (
                 <ConfirmPaymentView
+                    key={`confirm-${flow}`}
                     isPintaReq={parsedPaymentData?.token?.symbol === 'PNT'}
                     currencyAmount={currencyCode && currencyAmount ? `${currencySymbol} ${currencyAmount}` : undefined}
                     isAddMoneyFlow={isAddMoneyFlow}
@@ -421,6 +423,7 @@ export default function PaymentPage({ recipient, flow = 'request_pay' }: Props)
                         <TransactionDetailsReceipt transaction={selectedTransaction} />
                     ) : (
                         <DirectSuccessView
+                            key={`success-${flow}`}
                             headerTitle={isAddMoneyFlow ? 'Add Money' : 'Send'}
                             recipientType={parsedPaymentData?.recipient?.recipientType}
                             type="SEND"