Peanut wallet: sync main into dev

public/game/peanut-game.html

@@ -4,7 +4,7 @@
         <meta name="description" content="Peanut game based on Chrome Dino game" />
         <meta property="og:title" content="Peanut tries to escape hungry squirrels" />
         <meta property="og:type" content="article" />
-        <meta property="og:url" content="https://peanut.me" />
+        <meta property="og:url" content="http://www.peanut.me" />
 
         <meta name="twitter:site" content="@joinpeanut" />
         <meta name="twitter:creator" content="@joinpeanut" />

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

@@ -10,7 +10,7 @@ import { useWallet } from '@/hooks/wallet/useWallet'
 import { formatAmount } from '@/utils'
 import { countryData } from '@/components/AddMoney/consts'
 import { InitiateKYCModal } from '@/components/Kyc'
-import { BridgeKycStatus } from '@/utils/bridge-accounts.utils'
+import { KYCStatus } from '@/utils/bridge-accounts.utils'
 import { useWebSocket } from '@/hooks/useWebSocket'
 import { useAuth } from '@/context/authContext'
 import { useCreateOnramp } from '@/hooks/useCreateOnramp'
@@ -37,7 +37,7 @@ export default function OnrampBankPage() {
     const [isRiskAccepted, setIsRiskAccepted] = useState<boolean>(false)
 
     const [isKycModalOpen, setIsKycModalOpen] = useState(false)
-    const [liveKycStatus, setLiveKycStatus] = useState<BridgeKycStatus | undefined>(undefined)
+    const [liveKycStatus, setLiveKycStatus] = useState<KYCStatus | undefined>(undefined)
     const { amountToOnramp: amountFromContext, setAmountToOnramp, setError, error, setOnrampData } = useOnrampFlow()
     const formRef = useRef<{ handleSubmit: () => void }>(null)
     const [isUpdatingUser, setIsUpdatingUser] = useState(false)
@@ -58,15 +58,15 @@ export default function OnrampBankPage() {
         username: user?.user.username ?? undefined,
         autoConnect: !!user?.user.username,
         onKycStatusUpdate: (newStatus) => {
-            setLiveKycStatus(newStatus as BridgeKycStatus)
+            setLiveKycStatus(newStatus as KYCStatus)
         },
     })
 
     useEffect(() => {
-        if (user?.user.bridgeKycStatus) {
-            setLiveKycStatus(user.user.bridgeKycStatus as BridgeKycStatus)
+        if (user?.user.kycStatus) {
+            setLiveKycStatus(user.user.kycStatus as KYCStatus)
         }
-    }, [user?.user.bridgeKycStatus])
+    }, [user?.user.kycStatus])
 
     useEffect(() => {
         fetchUser()
@@ -84,7 +84,7 @@ export default function OnrampBankPage() {
     useEffect(() => {
         if (user === null) return // wait for user to be fetched
         if (step === 'loading') {
-            const currentKycStatus = liveKycStatus || user?.user.bridgeKycStatus
+            const currentKycStatus = liveKycStatus || user?.user.kycStatus
             const isUserKycVerified = currentKycStatus === 'approved'
 
             if (!isUserKycVerified) {
@@ -216,7 +216,7 @@ export default function OnrampBankPage() {
             if (!user?.user.userId) throw new Error('User not found')
             const result = await updateUserById({
                 userId: user.user.userId,
-                fullName: data.fullName,
+                fullName: `${data.firstName} ${data.lastName}`,
                 email: data.email,
             })
             if (result.error) {
@@ -246,7 +246,8 @@ export default function OnrampBankPage() {
 
     const initialUserDetails: Partial<UserDetailsFormData> = useMemo(
         () => ({
-            fullName: user?.user.fullName ?? '',
+            firstName: user?.user.fullName ? firstName : '',
+            lastName: user?.user.fullName ? lastName : '',
             email: user?.user.email ?? '',
         }),
         [user?.user.fullName, user?.user.email, firstName, lastName]

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

@@ -65,14 +65,10 @@ const HistoryPage = () => {
     const combinedAndSortedEntries = useMemo(() => {
         const entries: Array<any> = [...allEntries]
 
-        if (
-            user?.user?.bridgeKycStatus &&
-            user.user.bridgeKycStatus !== 'not_started' &&
-            user.user.bridgeKycStartedAt
-        ) {
+        if (user?.user?.kycStatus && user.user.kycStatus !== 'not_started' && user.user.kycStartedAt) {
             entries.push({
                 isKyc: true,
-                timestamp: user.user.bridgeKycStartedAt,
+                timestamp: user.user.kycStartedAt,
                 uuid: 'kyc-status-item',
             })
         }
@@ -96,7 +92,7 @@ const HistoryPage = () => {
         return (
             <div className="mx-auto mt-6 w-full space-y-3 md:max-w-2xl">
                 <h2 className="text-base font-bold">Transactions</h2>{' '}
-                <EmptyState icon="alert" title="Error loading transactions!" description="Please contact support." />
+                <EmptyState icon="alert" title="Error loading transactions!" description="Please try again later" />
             </div>
         )
     }

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

@@ -1,19 +1,21 @@
 'use client'
 
+import { PeanutArmHoldingBeer } from '@/assets'
 import { Button, ButtonSize, ButtonVariant } from '@/components/0_Bruddle'
 import PageContainer from '@/components/0_Bruddle/PageContainer'
+import Card from '@/components/Global/Card'
 import { Icon } from '@/components/Global/Icons/Icon'
 import IOSInstallPWAModal from '@/components/Global/IOSInstallPWAModal'
 import Loading from '@/components/Global/Loading'
 import PeanutLoading from '@/components/Global/PeanutLoading'
-//import RewardsModal from '@/components/Global/RewardsModal'
+import RewardsModal from '@/components/Global/RewardsModal'
 import HomeHistory from '@/components/Home/HomeHistory'
-//import RewardsCardModal from '@/components/Home/RewardsCardModal'
+import RewardsCardModal from '@/components/Home/RewardsCardModal'
 import { SearchUsers } from '@/components/SearchUsers'
 import { UserHeader } from '@/components/UserHeader'
 import { useAuth } from '@/context/authContext'
 import { useWallet } from '@/hooks/wallet/useWallet'
-import { useUserStore } from '@/redux/hooks'
+import { useUserStore, useWalletStore } from '@/redux/hooks'
 import {
     formatExtendedNumber,
     getUserPreferences,
@@ -23,6 +25,7 @@ import {
     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'
@@ -37,16 +40,16 @@ import { PEANUT_WALLET_TOKEN_DECIMALS } from '@/constants'
 import { PostSignupActionManager } from '@/components/Global/PostSignupActionManager'
 import { useWithdrawFlow } from '@/context/WithdrawFlowContext'
 import { useClaimBankFlow } from '@/context/ClaimBankFlowContext'
-import { useDeviceType, DeviceType } from '@/hooks/useGetDeviceType'
 
 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 } = useWallet()
+    const { balance, address, isFetchingBalance, isFetchingRewardBalance } = useWallet()
+    const { rewardWalletBalance } = useWalletStore()
+    const [isRewardsModalOpen, setIsRewardsModalOpen] = useState(false)
     const { resetFlow: resetClaimBankFlow } = useClaimBankFlow()
     const { resetWithdrawFlow } = useWithdrawFlow()
-    const { deviceType } = useDeviceType()
     const [isBalanceHidden, setIsBalanceHidden] = useState(() => {
         const prefs = getUserPreferences()
         return prefs?.balanceHidden ?? false
@@ -86,7 +89,6 @@ export default function Home() {
     }, [resetClaimBankFlow, resetWithdrawFlow])
 
     useEffect(() => {
-        if (isFetchingUser) return
         // We have some users that didn't have the peanut wallet created
         // correctly, so we need to create it
         if (address && user && !user.accounts.some((a) => a.type === AccountType.PEANUT_WALLET)) {
@@ -96,7 +98,7 @@ export default function Home() {
                 userId: user.user.userId,
             })
         }
-    }, [user, address, isFetchingUser])
+    }, [user, address, addAccount])
 
     // always reset external wallet connection on home page
     useEffect(() => {
@@ -108,7 +110,9 @@ export default function Home() {
     // effect for showing iOS PWA Install modal
     useEffect(() => {
         if (typeof window !== 'undefined') {
-            const isIOS = deviceType === DeviceType.IOS
+            const isIOS =
+                /iPad|iPhone|iPod/.test(navigator.userAgent) ||
+                (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)
             const isStandalone = window.matchMedia('(display-mode: standalone)').matches
             const hasSeenModalThisSession = sessionStorage.getItem('hasSeenIOSPWAPromptThisSession')
             const redirectUrl = getFromLocalStorage('redirect')
@@ -127,7 +131,7 @@ export default function Home() {
                 setShowIOSPWAInstallModal(false)
             }
         }
-    }, [user?.hasPwaInstalled, isPostSignupActionModalVisible, deviceType])
+    }, [user?.hasPwaInstalled, isPostSignupActionModalVisible])
 
     // effect for showing balance warning modal
     useEffect(() => {
@@ -212,7 +216,7 @@ export default function Home() {
                     <UserHeader
                         username={username!}
                         fullName={userFullName}
-                        isVerified={user?.user.bridgeKycStatus === 'approved'}
+                        isVerified={user?.user.kycStatus === 'approved'}
                     />
                     <SearchUsers />
                 </div>
@@ -241,14 +245,19 @@ export default function Home() {
                     </ActionButtonGroup>
                 </div>
 
+                {/* Rewards Card - only shows if balance is non-zero */}
+                <div onClick={() => setIsRewardsModalOpen(true)} className="cursor-pointer">
+                    <RewardsCard
+                        balance={Math.floor(Number(rewardWalletBalance) ?? 0).toString() ?? '0'}
+                        isFetchingRewardBalance={isFetchingRewardBalance}
+                    />
+                </div>
+
                 <HomeHistory username={username ?? undefined} />
-                {/* Render the new Rewards Modal
                 <RewardsModal />
-                */}
 
-                {/* Render the new Rewards Card Modal
+                {/* Render the new Rewards Card Modal */}
                 <RewardsCardModal visible={isRewardsModalOpen} onClose={() => setIsRewardsModalOpen(false)} />
-                */}
             </div>
             {/* iOS PWA Install Modal */}
             <IOSInstallPWAModal visible={showIOSPWAInstallModal} onClose={() => setShowIOSPWAInstallModal(false)} />
@@ -405,3 +414,41 @@ function ActionButton({ label, action, variant = 'primary-soft', size = 'small'
 function ActionButtonGroup({ children }: { children: React.ReactNode }) {
     return <div className="flex items-center justify-normal gap-4">{children}</div>
 }
+
+function RewardsCard({
+    balance,
+    isFetchingRewardBalance,
+}: {
+    balance: string | undefined
+    isFetchingRewardBalance: boolean
+}) {
+    if (!balance || balance === '0') return null
+
+    return (
+        <div className="mt-6 space-y-3">
+            <h2 className="font-bold">Rewards</h2>
+            <Card position="single">
+                <div className="flex w-full items-center justify-between font-roboto">
+                    <div className="flex items-center gap-3">
+                        <div
+                            className={
+                                'flex size-8 items-center justify-center rounded-full border border-black bg-white py-2.5 pl-3 pr-0.5'
+                            }
+                        >
+                            <Image
+                                src={PeanutArmHoldingBeer}
+                                alt="Peanut arm holding beer"
+                                className={twMerge('size-6 object-contain')}
+                                width={24}
+                                height={24}
+                            />
+                        </div>
+
+                        <span className="text-sm font-medium">Beers</span>
+                    </div>
+                    <span className="text-sm font-medium">{isFetchingRewardBalance ? <Loading /> : balance}</span>
+                </div>
+            </Card>
+        </div>
+    )
+}

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

@@ -20,8 +20,6 @@ import PullToRefresh from 'pulltorefreshjs'
 import { useEffect, useMemo, useState } from 'react'
 import { twMerge } from 'tailwind-merge'
 import '../../styles/globals.css'
-import SupportDrawer from '@/components/Global/SupportDrawer'
-import { useSupportModalContext } from '@/context/SupportModalContext'
 
 // Allow access to some public paths without authentication
 const publicPathRegex = /^\/(request\/pay|claim|pay\/.+$|support)/
@@ -33,7 +31,7 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
     const [isReady, setIsReady] = useState(false)
     const [hasToken, setHasToken] = useState(false)
     const isUserLoggedIn = !!user?.user.userId || false
-    const { setIsSupportModalOpen } = useSupportModalContext()
+
     const isHome = pathName === '/home'
     const isHistory = pathName === '/history'
     const isSupport = pathName === '/support'
@@ -111,7 +109,7 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
                 <div className="flex w-full flex-1 flex-col">
                     {/* Only show banner if not on landing page */}
                     {pathName !== '/' && (
-                        <button onClick={() => setIsSupportModalOpen(true)} className="w-full cursor-pointer">
+                        <button onClick={() => router.push('/support')} className="w-full cursor-pointer">
                             <MarqueeWrapper backgroundColor="bg-primary-1" direction="left">
                                 <span className="z-10 mx-4 flex items-center gap-2 text-sm font-semibold">
                                     Peanut is in beta! Thank you for being an early user, share your feedback here
@@ -171,8 +169,6 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
 
             {/* Modal */}
             <GuestLoginModal />
-
-            <SupportDrawer />
         </div>
     )
 }

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

@@ -12,15 +12,14 @@ import { useWithdrawFlow } from '@/context/WithdrawFlowContext'
 import { useWallet } from '@/hooks/wallet/useWallet'
 import { AccountType, Account } from '@/interfaces'
 import { formatIban, shortenAddressLong, isTxReverted } from '@/utils/general.utils'
-import { useParams, useRouter } from 'next/navigation'
+import { useRouter } from 'next/navigation'
 import { useEffect, useState } from 'react'
 import DirectSuccessView from '@/components/Payment/Views/Status.payment.view'
 import { ErrorHandler, getBridgeChainName } from '@/utils'
 import { getOfframpCurrencyConfig } from '@/utils/bridge.utils'
 import { createOfframp, confirmOfframp } from '@/app/actions/offramp'
 import { useAuth } from '@/context/authContext'
 import ExchangeRate from '@/components/ExchangeRate'
-import countryCurrencyMappings from '@/constants/countryCurrencyMapping'
 
 type View = 'INITIAL' | 'SUCCESS'
 
@@ -31,14 +30,6 @@ export default function WithdrawBankPage() {
     const router = useRouter()
     const [isLoading, setIsLoading] = useState(false)
     const [view, setView] = useState<View>('INITIAL')
-    const params = useParams()
-    const country = params.country as string
-
-    const nonEuroCurrency = countryCurrencyMappings.find(
-        (currency) =>
-            country.toLowerCase() === currency.country.toLowerCase() ||
-            currency.path?.toLowerCase() === country.toLowerCase()
-    )?.currencyCode
 
     useEffect(() => {
         if (!bankAccount) {
@@ -235,7 +226,7 @@ export default function WithdrawBankPage() {
                                 <PaymentInfoRow label={'Routing Number'} value={getBicAndRoutingNumber()} />
                             </>
                         )}
-                        <ExchangeRate accountType={bankAccount.type} nonEuroCurrency={nonEuroCurrency} />
+                        <ExchangeRate accountType={bankAccount.type} />
                         <PaymentInfoRow hideBottomBorder label="Fee" value={`$ 0.00`} />
                     </Card>
                     {error.showError ? (

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

@@ -281,6 +281,7 @@ export default function WithdrawCryptoPage() {
     // reset withdraw flow when this component unmounts
     useEffect(() => {
         return () => {
+            resetWithdrawFlow()
             resetPaymentInitiator()
             resetTokenContextProvider() // reset token selector context to make sure previously selected token is not cached
         }
@@ -366,9 +367,6 @@ export default function WithdrawCryptoPage() {
                                 address={withdrawData.address}
                             />
                         }
-                        onComplete={() => {
-                            resetWithdrawFlow()
-                        }}
                     />
                 </>
             )}