Prod to staging

.env.example

@@ -15,6 +15,7 @@ export NEXT_PUBLIC_WC_PROJECT_ID=""
 export NEXT_PUBLIC_SENTRY_DSN=""
 export NEXT_PUBLIC_RECAPTCHA_SITE_KEY=""
 export NEXT_PUBLIC_INFURA_API_KEY=""
+export NEXT_PUBLIC_ALCHEMY_API_KEY=""
 export NEXT_PUBLIC_JUSTANAME_ENS_DOMAIN=""
 
 export MOBULA_API_KEY=""
@@ -26,13 +27,19 @@ export WC_PROJECT_ID=""
 export GA_KEY=""
 export SOCKET_API_KEY=""
 
+# SQUID
+export SQUID_API_URL=""
+export SQUID_INTEGRATOR_ID=""
+
 # Passkey envs
 export NEXT_PUBLIC_ZERO_DEV_PASSKEY_PROJECT_ID=""
 export NEXT_PUBLIC_ZERO_DEV_BUNDLER_URL=""
 export NEXT_PUBLIC_ZERO_DEV_PAYMASTER_URL=""
 export NEXT_PUBLIC_ZERO_DEV_PASSKEY_SERVER_URL=""
 export NEXT_PUBLIC_POLYGON_PAYMASTER_URL=""
 export NEXT_PUBLIC_POLYGON_BUNDLER_URL=""
+export NEXT_PUBLIC_BALANCE_WARNING_THRESHOLD=1
+export NEXT_PUBLIC_BALANCE_WARNING_EXPIRY=15
 
 export NEXT_PUBLIC_INFURA_API_KEY=""
 

package.json

@@ -33,6 +33,7 @@
         "@hookform/resolvers": "3.9.1",
         "@justaname.id/react": "0.3.180",
         "@justaname.id/sdk": "0.2.177",
+        "@radix-ui/react-slider": "^1.3.5",
         "@reduxjs/toolkit": "^2.5.0",
         "@reown/appkit": "1.6.9",
         "@reown/appkit-adapter-wagmi": "1.6.9",

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/app/(mobile-ui)/home/page.tsx

@@ -16,15 +16,28 @@ import { UserHeader } from '@/components/UserHeader'
 import { useAuth } from '@/context/authContext'
 import { useWallet } from '@/hooks/wallet/useWallet'
 import { useUserStore, useWalletStore } from '@/redux/hooks'
-import { formatExtendedNumber, getUserPreferences, printableUsdc, updateUserPreferences } from '@/utils'
+import {
+    formatExtendedNumber,
+    getUserPreferences,
+    printableUsdc,
+    updateUserPreferences,
+    getFromLocalStorage,
+    saveToLocalStorage,
+} from '@/utils'
 import { useDisconnect } from '@reown/appkit/react'
 import Image from 'next/image'
 import Link from 'next/link'
 import { useEffect, useMemo, useState } from 'react'
 import { twMerge } from 'tailwind-merge'
 import { useAccount } from 'wagmi'
 import AddMoneyPromptModal from '@/components/Home/AddMoneyPromptModal'
+import BalanceWarningModal from '@/components/Global/BalanceWarningModal'
 import { AccountType } from '@/interfaces'
+import { formatUnits } from 'viem'
+import { PEANUT_WALLET_TOKEN_DECIMALS } from '@/constants'
+
+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
 
 export default function Home() {
     const { balance, address, isFetchingBalance, isFetchingRewardBalance } = useWallet()
@@ -43,6 +56,7 @@ export default function Home() {
 
     const [showIOSPWAInstallModal, setShowIOSPWAInstallModal] = useState(false)
     const [showAddMoneyPromptModal, setShowAddMoneyPromptModal] = useState(false)
+    const [showBalanceWarningModal, setShowBalanceWarningModal] = useState(false)
 
     const userFullName = useMemo(() => {
         if (!user) return
@@ -97,6 +111,27 @@ export default function Home() {
         }
     }, [user?.hasPwaInstalled])
 
+    // 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
+            ) {
+                setShowBalanceWarningModal(true)
+            }
+        }
+    }, [balance, isFetchingBalance, showIOSPWAInstallModal, showAddMoneyPromptModal])
+
     // effect for showing add money prompt modal
     useEffect(() => {
         if (typeof window !== 'undefined' && !isFetchingBalance) {
@@ -106,14 +141,20 @@ export default function Home() {
             // 1. balance is zero.
             // 2. user hasn't seen this prompt in the current session.
             // 3. the iOS PWA install modal is not currently active.
+            // 4. the balance warning modal is not currently active.
             // this allows the modal on any device (iOS/Android) and in any display mode (PWA/browser),
             // as long as the PWA modal (which is iOS & browser-specific) isn't taking precedence.
-            if (balance === 0n && !hasSeenAddMoneyPromptThisSession && !showIOSPWAInstallModal) {
+            if (
+                balance === 0n &&
+                !hasSeenAddMoneyPromptThisSession &&
+                !showIOSPWAInstallModal &&
+                !showBalanceWarningModal
+            ) {
                 setShowAddMoneyPromptModal(true)
                 sessionStorage.setItem('hasSeenAddMoneyPromptThisSession', 'true')
             }
         }
-    }, [balance, isFetchingBalance, showIOSPWAInstallModal])
+    }, [balance, isFetchingBalance, showIOSPWAInstallModal, showBalanceWarningModal])
 
     if (isLoading) {
         return <PeanutLoading coverFullScreen />
@@ -174,6 +215,15 @@ export default function Home() {
 
             {/* Add Money Prompt Modal */}
             <AddMoneyPromptModal visible={showAddMoneyPromptModal} onClose={() => setShowAddMoneyPromptModal(false)} />
+
+            {/* Balance Warning Modal */}
+            <BalanceWarningModal
+                visible={showBalanceWarningModal}
+                onCloseAction={() => {
+                    setShowBalanceWarningModal(false)
+                    saveToLocalStorage('hasSeenBalanceWarning', 'true', BALANCE_WARNING_EXPIRY)
+                }}
+            />
         </PageContainer>
     )
 }