From b4726a93c4f7d0da66b17652cc7964a1f78d67ea Mon Sep 17 00:00:00 2001
From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com>
Date: Fri, 20 Mar 2026 16:12:23 +0530
Subject: [PATCH 1/9] fix: replace vaul drawer with always-mounted panel for
 support chat

iframe no longer unmounts on close, eliminating 4-5s reload delay.
added touch drag-to-dismiss on handle bar.
---
 src/components/Global/SupportDrawer/index.tsx | 117 ++++++++++++++----
 1 file changed, 90 insertions(+), 27 deletions(-)

diff --git a/src/components/Global/SupportDrawer/index.tsx b/src/components/Global/SupportDrawer/index.tsx
index 74e2eb5a7..a6d311772 100644
--- a/src/components/Global/SupportDrawer/index.tsx
+++ b/src/components/Global/SupportDrawer/index.tsx
@@ -1,26 +1,52 @@
 'use client'
 
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useRef, useCallback } from 'react'
 import { useModalsContext } from '@/context/ModalsContext'
 import { useCrispUserData } from '@/hooks/useCrispUserData'
 import { useCrispProxyUrl } from '@/hooks/useCrispProxyUrl'
-import { Drawer, DrawerContent, DrawerTitle } from '../Drawer'
 import PeanutLoading from '../PeanutLoading'
 
+const DISMISS_THRESHOLD = 100
+
 const SupportDrawer = () => {
     const { isSupportModalOpen, setIsSupportModalOpen, supportPrefilledMessage: prefilledMessage } = useModalsContext()
     const userData = useCrispUserData()
-    const [isLoading, setIsLoading] = useState(true)
+    const [isCrispReady, setIsCrispReady] = useState(false)
 
     const crispProxyUrl = useCrispProxyUrl(userData, prefilledMessage)
 
+    // drag-to-dismiss state
+    const panelRef = useRef<HTMLDivElement>(null)
+    const dragStartY = useRef<number | null>(null)
+    const [dragOffset, setDragOffset] = useState(0)
+    const isDragging = dragStartY.current !== null
+
+    const handleTouchStart = useCallback((e: React.TouchEvent) => {
+        dragStartY.current = e.touches[0].clientY
+    }, [])
+
+    const handleTouchMove = useCallback((e: React.TouchEvent) => {
+        if (dragStartY.current === null) return
+        const delta = e.touches[0].clientY - dragStartY.current
+        // only allow dragging downward
+        setDragOffset(Math.max(0, delta))
+    }, [])
+
+    const handleTouchEnd = useCallback(() => {
+        if (dragOffset > DISMISS_THRESHOLD) {
+            setIsSupportModalOpen(false)
+        }
+        dragStartY.current = null
+        setDragOffset(0)
+    }, [dragOffset, setIsSupportModalOpen])
+
+    // listen for crisp ready once — persists across open/close cycles
     useEffect(() => {
-        // Listen for ready message from proxy iframe
         const handleMessage = (event: MessageEvent) => {
             if (event.origin !== window.location.origin) return
 
             if (event.data.type === 'CRISP_READY') {
-                setIsLoading(false)
+                setIsCrispReady(true)
             }
         }
 
@@ -28,33 +54,70 @@ const SupportDrawer = () => {
         return () => window.removeEventListener('message', handleMessage)
     }, [])
 
-    // Reset loading state when drawer closes
+    // close on escape
     useEffect(() => {
-        if (!isSupportModalOpen) {
-            setIsLoading(true)
+        if (!isSupportModalOpen) return
+        const handleEscape = (e: KeyboardEvent) => {
+            if (e.key === 'Escape') setIsSupportModalOpen(false)
         }
-    }, [isSupportModalOpen])
+        window.addEventListener('keydown', handleEscape)
+        return () => window.removeEventListener('keydown', handleEscape)
+    }, [isSupportModalOpen, setIsSupportModalOpen])
 
     return (
-        <Drawer open={isSupportModalOpen} onOpenChange={setIsSupportModalOpen}>
-            <DrawerContent className="z-[999999] max-h-[85vh] w-screen pt-4">
-                <DrawerTitle className="sr-only">Support</DrawerTitle>
-                <div className="relative h-[80vh] w-full">
-                    {isLoading && (
-                        <div className="absolute inset-0 z-10 flex items-center justify-center bg-background">
-                            <PeanutLoading />
-                        </div>
-                    )}
-                    <iframe
-                        src={crispProxyUrl}
-                        className="h-full w-full"
-                        allow="storage-access *"
-                        sandbox="allow-same-origin allow-scripts allow-popups allow-forms allow-modals allow-storage-access-by-user-activation"
-                        title="Support Chat"
-                    />
+        <>
+            {/* backdrop */}
+            <div
+                className={`fixed inset-0 z-[999998] bg-black/80 transition-opacity duration-300 ${
+                    isSupportModalOpen ? 'opacity-100' : 'pointer-events-none opacity-0'
+                }`}
+                onClick={() => setIsSupportModalOpen(false)}
+                aria-hidden="true"
+            />
+
+            {/* slide-up panel — always mounted so the iframe never unmounts */}
+            <div
+                ref={panelRef}
+                role="dialog"
+                aria-label="Support"
+                aria-modal={isSupportModalOpen}
+                className={`fixed inset-x-0 bottom-0 z-[999999] flex max-h-[85vh] flex-col rounded-t-[10px] border bg-background pt-4 ${
+                    isSupportModalOpen ? 'translate-y-0' : 'pointer-events-none translate-y-full'
+                }`}
+                style={{
+                    transform: isSupportModalOpen ? `translateY(${dragOffset}px)` : 'translateY(100%)',
+                    transition: isDragging ? 'none' : 'transform 300ms ease-out',
+                }}
+            >
+                {/* drag handle */}
+                <div
+                    className="flex cursor-grab items-center justify-center pb-4 active:cursor-grabbing"
+                    onTouchStart={handleTouchStart}
+                    onTouchMove={handleTouchMove}
+                    onTouchEnd={handleTouchEnd}
+                >
+                    <div className="h-1.5 w-10 rounded-full bg-black" />
+                </div>
+
+                <div className="flex w-full justify-center">
+                    <div className="relative h-[80vh] w-full overflow-auto md:max-w-xl">
+                        {!isCrispReady && (
+                            <div className="absolute inset-0 z-10 flex items-center justify-center bg-background">
+                                <PeanutLoading />
+                            </div>
+                        )}
+                        <iframe
+                            src={crispProxyUrl}
+                            className="h-full w-full"
+                            allow="storage-access *"
+                            sandbox="allow-same-origin allow-scripts allow-popups allow-forms allow-modals allow-storage-access-by-user-activation"
+                            title="Support Chat"
+                            tabIndex={isSupportModalOpen ? 0 : -1}
+                        />
+                    </div>
                 </div>
-            </DrawerContent>
-        </Drawer>
+            </div>
+        </>
     )
 }
 

From 1ce8dc4264c20de5306c4bbe57d50fd15e09fe6c Mon Sep 17 00:00:00 2001
From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com>
Date: Fri, 20 Mar 2026 16:12:48 +0530
Subject: [PATCH 2/9] fix: claim perk button text visibility and peanut got you
 card layout

dual-layer clippath for black-to-white text transition on hold.
reduced icon size to max 15% container width for narrow devices.
---
 src/app/(mobile-ui)/qr-pay/page.tsx | 23 ++++++++++++++++++-----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/app/(mobile-ui)/qr-pay/page.tsx b/src/app/(mobile-ui)/qr-pay/page.tsx
index 4282c07ca..f84eb7bf2 100644
--- a/src/app/(mobile-ui)/qr-pay/page.tsx
+++ b/src/app/(mobile-ui)/qr-pay/page.tsx
@@ -1267,9 +1267,9 @@ export default function QRPayPage() {
 
                     {/* Perk Success Banner - Show after claiming */}
                     {(perkClaimed || qrPayment?.perk?.claimed) && (
-                        <Card className="flex items-start gap-4 bg-white p-6">
-                            <div className="flex h-16 w-16 flex-shrink-0 items-center justify-center rounded-full bg-yellow-400">
-                                <Image src={STAR_STRAIGHT_ICON} alt="star" width={36} height={36} />
+                        <Card className="flex items-start gap-3 bg-white p-4">
+                            <div className="flex max-w-[15%] flex-shrink-0 items-center justify-center rounded-full bg-yellow-400 p-2">
+                                <Image src={STAR_STRAIGHT_ICON} alt="star" width={28} height={28} />
                             </div>
                             <div className="flex flex-col gap-2">
                                 <h2 className="text-2xl font-bold">Peanut got you!</h2>
@@ -1332,7 +1332,7 @@ export default function QRPayPage() {
                                     WebkitTapHighlightColor: 'transparent',
                                 }}
                             >
-                                {/* Black progress fill from left to right */}
+                                {/* progress fill from left to right */}
                                 <div
                                     className="absolute inset-0 bg-black transition-all duration-100"
                                     style={{
@@ -1340,7 +1340,20 @@ export default function QRPayPage() {
                                         left: 0,
                                     }}
                                 />
-                                <span className="relative z-10">Claim Peanut Perk Now!</span>
+                                {(() => {
+                                    const label = 'Claim Peanut Perk Now!'
+                                    return (
+                                        <>
+                                            <span className="relative z-10">{label}</span>
+                                            <span
+                                                className="absolute inset-0 z-20 flex items-center justify-center text-white transition-all duration-75"
+                                                style={{ clipPath: `inset(0 ${100 - holdProgress}% 0 0)` }}
+                                            >
+                                                {label}
+                                            </span>
+                                        </>
+                                    )
+                                })()}
                             </Button>
                         ) : (
                             <>

From 345aa243d7e85f1f2f366b5c385e1cf3075f4062 Mon Sep 17 00:00:00 2001
From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com>
Date: Fri, 20 Mar 2026 16:13:30 +0530
Subject: [PATCH 3/9] fix: slider text visible above thumb during drag

---
 src/components/Slider/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Slider/index.tsx b/src/components/Slider/index.tsx
index 52b2a2717..e3cdbb1bc 100644
--- a/src/components/Slider/index.tsx
+++ b/src/components/Slider/index.tsx
@@ -65,7 +65,7 @@ const Slider = React.forwardRef<React.ElementRef<typeof SliderPrimitive.Root>, S
             >
                 <SliderPrimitive.Track className="pointer-events-none relative h-full w-full grow overflow-hidden rounded-none bg-white">
                     <SliderPrimitive.Range className="absolute h-full bg-primary-1" />
-                    <div className="absolute left-0 top-0 flex h-full w-full items-center justify-center text-sm font-bold text-black">
+                    <div className="pointer-events-none absolute inset-0 z-10 flex items-center justify-center text-sm font-bold text-black">
                         {title ? title : 'Slide to Proceed'}
                     </div>
                 </SliderPrimitive.Track>

From 37a3aca794456d0721adda9b37e43afc3deeba26 Mon Sep 17 00:00:00 2001
From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com>
Date: Fri, 20 Mar 2026 16:13:45 +0530
Subject: [PATCH 4/9] feat: add ars/brl to popular currencies and swap toggle
 to exchange rate widget

---
 .../Global/ExchangeRateWidget/index.tsx       | 42 +++++++++++++++++--
 src/components/LandingPage/CurrencySelect.tsx |  2 +-
 2 files changed, 39 insertions(+), 5 deletions(-)

diff --git a/src/components/Global/ExchangeRateWidget/index.tsx b/src/components/Global/ExchangeRateWidget/index.tsx
index 39ccc4d3e..98be84868 100644
--- a/src/components/Global/ExchangeRateWidget/index.tsx
+++ b/src/components/Global/ExchangeRateWidget/index.tsx
@@ -4,7 +4,7 @@ import { useDebounce } from '@/hooks/useDebounce'
 import { useExchangeRate } from '@/hooks/useExchangeRate'
 import Image from 'next/image'
 import { useRouter, useSearchParams } from 'next/navigation'
-import { type FC, useCallback, useEffect, useMemo } from 'react'
+import { type FC, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Icon, type IconName } from '../Icons/Icon'
 import { Button } from '@/components/0_Bruddle/Button'
 
@@ -90,6 +90,28 @@ const ExchangeRateWidget: FC<IExchangeRateWidgetProps> = ({ ctaLabel, ctaIcon, c
         [updateUrlParams, sourceCurrency]
     )
 
+    const [isSwapping, setIsSwapping] = useState(false)
+    const skipNextDebounceSyncRef = useRef(false)
+
+    const swapCurrencies = useCallback(() => {
+        setIsSwapping(true)
+        skipNextDebounceSyncRef.current = true
+        const newAmount =
+            typeof destinationAmount === 'number' && destinationAmount > 0
+                ? Math.round(destinationAmount * 100) / 100
+                : undefined
+        updateUrlParams({ from: destinationCurrency, to: sourceCurrency, amount: newAmount })
+    }, [sourceCurrency, destinationCurrency, destinationAmount, updateUrlParams])
+
+    // clear swapping state once exchange rate hook finishes recalculating
+    useEffect(() => {
+        if (isSwapping && !isLoading) {
+            setIsSwapping(false)
+        }
+    }, [isSwapping, isLoading])
+
+    const showLoading = isLoading || isSwapping
+
     // Enforce USD rule: at least one currency must be USD
     useEffect(() => {
         if (sourceCurrency !== 'USD' && destinationCurrency !== 'USD') {
@@ -100,6 +122,10 @@ const ExchangeRateWidget: FC<IExchangeRateWidgetProps> = ({ ctaLabel, ctaIcon, c
 
     // Update URL when source amount changes (only for valid numbers)
     useEffect(() => {
+        if (skipNextDebounceSyncRef.current) {
+            skipNextDebounceSyncRef.current = false
+            return
+        }
         if (typeof debouncedSourceAmount === 'number' && debouncedSourceAmount !== urlSourceAmount) {
             updateUrlParams({ amount: debouncedSourceAmount })
         }
@@ -125,7 +151,7 @@ const ExchangeRateWidget: FC<IExchangeRateWidgetProps> = ({ ctaLabel, ctaIcon, c
             <div className="w-full">
                 <h2 className="text-left text-sm">You Send</h2>
                 <div className="btn btn-shadow-primary-4 mt-2 flex w-full items-center justify-center gap-4 bg-white p-4">
-                    {isLoading ? (
+                    {showLoading ? (
                         <div className="flex w-full items-center">
                             <div className="h-8 w-40 animate-pulse rounded-full bg-grey-2" />
                         </div>
@@ -167,10 +193,18 @@ const ExchangeRateWidget: FC<IExchangeRateWidgetProps> = ({ ctaLabel, ctaIcon, c
                 </div>
             </div>
 
+            <button
+                onClick={swapCurrencies}
+                className="flex h-8 w-8 items-center justify-center self-center rounded-full hover:bg-grey-4"
+                aria-label="Swap currencies"
+            >
+                <Icon name="arrow-exchange" size={18} className="rotate-90 transition-transform duration-300" />
+            </button>
+
             <div className="w-full">
                 <h2 className="text-left text-sm">Recipient Gets</h2>
                 <div className="btn btn-shadow-primary-4 mt-2 flex w-full items-center justify-center gap-4 bg-white p-4">
-                    {isLoading ? (
+                    {showLoading ? (
                         <div className="flex w-full items-center">
                             <div className="h-8 w-40 animate-pulse rounded-full bg-grey-2" />
                         </div>
@@ -212,7 +246,7 @@ const ExchangeRateWidget: FC<IExchangeRateWidgetProps> = ({ ctaLabel, ctaIcon, c
             </div>
 
             <div className="rounded-full bg-grey-4 px-2 py-[2px] text-xs font-bold text-gray-1">
-                {isLoading ? (
+                {showLoading ? (
                     <div className="mx-auto h-3 w-28 animate-pulse rounded-full bg-grey-2" />
                 ) : isError ? (
                     <span>Rate currently unavailable</span>
diff --git a/src/components/LandingPage/CurrencySelect.tsx b/src/components/LandingPage/CurrencySelect.tsx
index e6276d955..3077df961 100644
--- a/src/components/LandingPage/CurrencySelect.tsx
+++ b/src/components/LandingPage/CurrencySelect.tsx
@@ -24,7 +24,7 @@ const currencies = countryCurrencyMappings.map((mapping) => ({
     comingSoon: mapping.comingSoon || false,
 }))
 
-const popularCurrencies = ['USD', 'EUR', 'MXN']
+const popularCurrencies = ['USD', 'EUR', 'ARS', 'BRL', 'MXN']
 
 const CurrencySelect = ({
     selectedCurrency,

From aaf5c1b6802b1eac7b616119d3df59d411ad5537 Mon Sep 17 00:00:00 2001
From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com>
Date: Fri, 20 Mar 2026 16:13:51 +0530
Subject: [PATCH 5/9] fix: refunded status uses green color and strikethrough
 on amounts

---
 src/components/Global/Badges/StatusBadge.tsx    |  2 +-
 src/components/Global/StatusPill/index.tsx      |  2 +-
 .../TransactionDetails/TransactionCard.tsx      | 17 +++++++++++++++--
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/components/Global/Badges/StatusBadge.tsx b/src/components/Global/Badges/StatusBadge.tsx
index 1f37ab48a..6ac1d2e3d 100644
--- a/src/components/Global/Badges/StatusBadge.tsx
+++ b/src/components/Global/Badges/StatusBadge.tsx
@@ -32,7 +32,7 @@ const StatusBadge: React.FC<StatusBadgeProps> = ({ status, className, size = 'sm
             case 'cancelled':
                 return 'bg-error-1 text-error border border-error-2'
             case 'refunded':
-                return 'bg-secondary-4 text-yellow-6 border border-yellow-7'
+                return 'bg-success-2 text-success-4 border border-success-5'
             case 'soon':
             case 'custom':
                 return 'bg-primary-3 text-primary-4'
diff --git a/src/components/Global/StatusPill/index.tsx b/src/components/Global/StatusPill/index.tsx
index 4f7f45a40..9f400c20c 100644
--- a/src/components/Global/StatusPill/index.tsx
+++ b/src/components/Global/StatusPill/index.tsx
@@ -13,7 +13,7 @@ const StatusPill = ({ status }: StatusPillProps) => {
         completed: 'border-success-5 bg-success-2 text-success-4',
         pending: 'border-yellow-8 bg-secondary-4 text-yellow-6',
         cancelled: 'border-error-2 bg-error-1 text-error',
-        refunded: 'border-yellow-8 bg-secondary-4 text-yellow-6',
+        refunded: 'border-success-5 bg-success-2 text-success-4',
         failed: 'border-error-2 bg-error-1 text-error',
         processing: 'border-yellow-8 bg-secondary-4 text-yellow-6',
         soon: 'border-yellow-8 bg-secondary-4 text-yellow-6',
diff --git a/src/components/TransactionDetails/TransactionCard.tsx b/src/components/TransactionDetails/TransactionCard.tsx
index f6761b7f3..62b685501 100644
--- a/src/components/TransactionDetails/TransactionCard.tsx
+++ b/src/components/TransactionDetails/TransactionCard.tsx
@@ -14,6 +14,7 @@ import {
 } from '@/utils/general.utils'
 import { getAvatarUrl, getTransactionSign } from '@/utils/history.utils'
 import React, { lazy, Suspense } from 'react'
+import { twMerge } from 'tailwind-merge'
 import Image from 'next/image'
 import StatusPill, { type StatusPillType } from '../Global/StatusPill'
 import { VerifiedUserLabel } from '../UserHeader'
@@ -205,9 +206,21 @@ const TransactionCard: React.FC<TransactionCardProps> = ({
                                     <span className="text-2xl font-bold">****</span>
                                 ) : (
                                     <>
-                                        <span className="font-semibold">{displayAmount}</span>
+                                        <span
+                                            className={twMerge(
+                                                'font-semibold',
+                                                status === 'refunded' && 'text-grey-1 line-through'
+                                            )}
+                                        >
+                                            {displayAmount}
+                                        </span>
                                         {currencyDisplayAmount && (
-                                            <span className="text-sm font-medium text-gray-1">
+                                            <span
+                                                className={twMerge(
+                                                    'text-sm font-medium text-gray-1',
+                                                    status === 'refunded' && 'line-through'
+                                                )}
+                                            >
                                                 {currencyDisplayAmount}
                                             </span>
                                         )}

From abd71b8827d598da8e30dae3b54d0be9f8e1676f Mon Sep 17 00:00:00 2001
From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com>
Date: Fri, 20 Mar 2026 16:13:58 +0530
Subject: [PATCH 6/9] fix: change "you're withdrawing" copy to "you're sending"

---
 src/app/(mobile-ui)/withdraw/manteca/page.tsx           | 6 ++----
 src/components/Global/PeanutActionDetailsCard/index.tsx | 2 +-
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/app/(mobile-ui)/withdraw/manteca/page.tsx b/src/app/(mobile-ui)/withdraw/manteca/page.tsx
index 158ee8142..864952051 100644
--- a/src/app/(mobile-ui)/withdraw/manteca/page.tsx
+++ b/src/app/(mobile-ui)/withdraw/manteca/page.tsx
@@ -12,7 +12,6 @@ import { Icon } from '@/components/Global/Icons/Icon'
 import PeanutLoading from '@/components/Global/PeanutLoading'
 import { mantecaApi, type WithdrawPriceLock } from '@/services/manteca'
 import { useCurrency } from '@/hooks/useCurrency'
-import { isTxReverted } from '@/utils/general.utils'
 import { loadingStateContext } from '@/context'
 import { countryData } from '@/components/AddMoney/consts'
 import Image from 'next/image'
@@ -27,7 +26,6 @@ import {
 import ValidatedInput from '@/components/Global/ValidatedInput'
 import AmountInput from '@/components/Global/AmountInput'
 import { formatUnits, parseUnits } from 'viem'
-import type { TransactionReceipt, Hash } from 'viem'
 import { PaymentInfoRow } from '@/components/Payment/PaymentInfoRow'
 import { useAuth } from '@/context/authContext'
 import { useModalsContext } from '@/context/ModalsContext'
@@ -623,7 +621,7 @@ export default function MantecaWithdrawFlow() {
                             </div>
                             <div>
                                 <p className="flex items-center gap-1 text-center text-sm text-gray-600">
-                                    <Icon name="arrow-up" size={10} /> You're withdrawing
+                                    <Icon name="arrow-up" size={10} /> You're sending
                                 </p>
                                 <p className="text-2xl font-bold">
                                     {currencyCode} {formatNumberForDisplay(currencyAmount, { maxDecimals: 2 })}
@@ -737,7 +735,7 @@ export default function MantecaWithdrawFlow() {
                             </div>
                             <div>
                                 <p className="flex items-center gap-1 text-center text-sm text-gray-600">
-                                    <Icon name="arrow-up" size={10} /> You're withdrawing
+                                    <Icon name="arrow-up" size={10} /> You're sending
                                 </p>
                                 <p className="text-2xl font-bold">
                                     {currencyCode}{' '}
diff --git a/src/components/Global/PeanutActionDetailsCard/index.tsx b/src/components/Global/PeanutActionDetailsCard/index.tsx
index 0054d0661..cd37c9160 100644
--- a/src/components/Global/PeanutActionDetailsCard/index.tsx
+++ b/src/components/Global/PeanutActionDetailsCard/index.tsx
@@ -104,7 +104,7 @@ export default function PeanutActionDetailsCard({
             else title = `${renderRecipient()} sent you`
         }
         if (transactionType === 'ADD_MONEY' || transactionType === 'ADD_MONEY_BANK_ACCOUNT') title = `You're adding`
-        if (transactionType === 'WITHDRAW' || transactionType === 'WITHDRAW_BANK_ACCOUNT') title = `You're withdrawing`
+        if (transactionType === 'WITHDRAW' || transactionType === 'WITHDRAW_BANK_ACCOUNT') title = `You're sending`
         if (transactionType === 'CLAIM_LINK_BANK_ACCOUNT') {
             if (viewType === 'SUCCESS') {
                 title = 'You will receive'

From 6d743351f73e3c6300562ea906f42d70699fbb54 Mon Sep 17 00:00:00 2001
From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com>
Date: Fri, 20 Mar 2026 16:14:19 +0530
Subject: [PATCH 7/9] chore: remove unused imports and classes

---
 src/app/(mobile-ui)/home/page.tsx    | 2 --
 src/app/(mobile-ui)/points/page.tsx  | 2 +-
 src/components/Global/Icons/Icon.tsx | 1 -
 3 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/app/(mobile-ui)/home/page.tsx b/src/app/(mobile-ui)/home/page.tsx
index d28b43dbb..b0ed3aa51 100644
--- a/src/app/(mobile-ui)/home/page.tsx
+++ b/src/app/(mobile-ui)/home/page.tsx
@@ -24,7 +24,6 @@ import { PEANUT_WALLET_TOKEN_DECIMALS } from '@/constants/zerodev.consts'
 import { PostSignupActionManager } from '@/components/Global/PostSignupActionManager'
 import { useWithdrawFlow } from '@/context/WithdrawFlowContext'
 import { useClaimBankFlow } from '@/context/ClaimBankFlowContext'
-import { useDeviceType } from '@/hooks/useGetDeviceType'
 import { useNotifications } from '@/hooks/useNotifications'
 import useKycStatus from '@/hooks/useKycStatus'
 import { useCardPioneerInfo } from '@/hooks/useCardPioneerInfo'
@@ -57,7 +56,6 @@ export default function Home() {
     const { balance, isFetchingBalance } = useWallet()
     const { resetFlow: resetClaimBankFlow } = useClaimBankFlow()
     const { resetWithdrawFlow } = useWithdrawFlow()
-    const { deviceType } = useDeviceType()
     const { user } = useUserStore()
     const [isBalanceHidden, setIsBalanceHidden] = useState(() => {
         const prefs = user ? getUserPreferences(user.user.userId) : undefined
diff --git a/src/app/(mobile-ui)/points/page.tsx b/src/app/(mobile-ui)/points/page.tsx
index 11b549d56..369a43d0b 100644
--- a/src/app/(mobile-ui)/points/page.tsx
+++ b/src/app/(mobile-ui)/points/page.tsx
@@ -126,7 +126,7 @@ const PointsPage = () => {
                                 return (
                                     <>
                                         {number}
-                                        {suffix && <span className="text-primary-1">{suffix}</span>}
+                                        {suffix && <span>{suffix}</span>}
                                     </>
                                 )
                             })()}{' '}
diff --git a/src/components/Global/Icons/Icon.tsx b/src/components/Global/Icons/Icon.tsx
index bcd77f4d8..8e2414415 100644
--- a/src/components/Global/Icons/Icon.tsx
+++ b/src/components/Global/Icons/Icon.tsx
@@ -56,7 +56,6 @@ import {
     VerifiedUserOutlined,
     EmojiEventsOutlined,
     LockOutlined,
-    CallSplitRounded,
     GroupsRounded,
     VpnLockOutlined,
     CameraswitchRounded,

From 5bfd9e789bf41066ce3aa55e3895361f0c68fc2b Mon Sep 17 00:00:00 2001
From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com>
Date: Fri, 20 Mar 2026 19:18:48 +0530
Subject: [PATCH 8/9] fix: guest user invite on req payment

---
 .../components/RequestPotActionList.tsx       | 32 +++++++++++--------
 .../views/ContributePotInputView.tsx          | 19 ++++++++---
 .../shared/components/SendWithPeanutCta.tsx   | 23 +++++++++++--
 3 files changed, 53 insertions(+), 21 deletions(-)

diff --git a/src/features/payments/flows/contribute-pot/components/RequestPotActionList.tsx b/src/features/payments/flows/contribute-pot/components/RequestPotActionList.tsx
index 40baea704..c2ff083b5 100644
--- a/src/features/payments/flows/contribute-pot/components/RequestPotActionList.tsx
+++ b/src/features/payments/flows/contribute-pot/components/RequestPotActionList.tsx
@@ -28,6 +28,9 @@ import useKycStatus from '@/hooks/useKycStatus'
 import { BankRequestType, useDetermineBankRequestType } from '@/hooks/useDetermineBankRequestType'
 import { ACTION_METHODS, type PaymentMethod } from '@/constants/actionlist.consts'
 import { MIN_BANK_TRANSFER_AMOUNT, validateMinimumAmount } from '@/constants/payment.consts'
+import { useAppDispatch } from '@/redux/hooks'
+import { setupActions } from '@/redux/slices/setup-slice'
+import { EInviteType } from '@/services/services.types'
 import { saveRedirectUrl, saveToLocalStorage } from '@/utils/general.utils'
 import SendWithPeanutCta from '@/features/payments/shared/components/SendWithPeanutCta'
 
@@ -35,8 +38,10 @@ interface RequestPotActionListProps {
     isAmountEntered: boolean
     usdAmount: string
     recipientUserId?: string
+    recipientUsername?: string
     onPayWithPeanut: () => void
     isPaymentLoading?: boolean
+    isExternalWalletLoading?: boolean
     onPayWithExternalWallet: () => void
 }
 
@@ -44,11 +49,14 @@ export function RequestPotActionList({
     isAmountEntered,
     usdAmount,
     recipientUserId,
+    recipientUsername,
     onPayWithPeanut,
     isPaymentLoading = false,
+    isExternalWalletLoading = false,
     onPayWithExternalWallet,
 }: RequestPotActionListProps) {
     const router = useRouter()
+    const dispatch = useAppDispatch()
     const { user } = useAuth()
     const { hasSufficientBalance, isFetchingBalance } = useWallet()
     const { isUserMantecaKycApproved } = useKycStatus()
@@ -122,22 +130,19 @@ export function RequestPotActionList({
                     router.push('/add-money')
                 } else {
                     const redirectUri = encodeURIComponent('/add-money')
-                    router.push(`/setup?redirect_uri=${redirectUri}`)
+                    if (recipientUsername) {
+                        const inviteCode = `${recipientUsername.toUpperCase()}INVITESYOU`
+                        dispatch(setupActions.setInviteCode(inviteCode))
+                        dispatch(setupActions.setInviteType(EInviteType.PAYMENT_LINK))
+                        router.push(`/invite?code=${inviteCode}&redirect_uri=${redirectUri}`)
+                    } else {
+                        router.push(`/setup?redirect_uri=${redirectUri}`)
+                    }
                 }
                 break
         }
     }
 
-    // handle continue with peanut (for non-logged in users)
-    const handleContinueWithPeanut = () => {
-        if (!isLoggedIn) {
-            saveRedirectUrl()
-            router.push('/setup')
-        } else {
-            onPayWithPeanut()
-        }
-    }
-
     if (isGeoLoading) {
         return (
             <div className="flex w-full items-center justify-center py-8">
@@ -150,10 +155,11 @@ export function RequestPotActionList({
         <div className="space-y-2">
             {/* pay with peanut button */}
             <SendWithPeanutCta
-                onClick={handleContinueWithPeanut}
-                disabled={!isAmountEntered || isPaymentLoading}
+                onClick={onPayWithPeanut}
+                disabled={!isAmountEntered || isPaymentLoading || isExternalWalletLoading}
                 loading={isPaymentLoading}
                 insufficientBalance={!userHasSufficientPeanutBalance}
+                inviterUsername={recipientUsername}
             />
 
             <Divider text="or" />
diff --git a/src/features/payments/flows/contribute-pot/views/ContributePotInputView.tsx b/src/features/payments/flows/contribute-pot/views/ContributePotInputView.tsx
index 1c58697e8..5d521fd4f 100644
--- a/src/features/payments/flows/contribute-pot/views/ContributePotInputView.tsx
+++ b/src/features/payments/flows/contribute-pot/views/ContributePotInputView.tsx
@@ -19,6 +19,7 @@ import ErrorAlert from '@/components/Global/ErrorAlert'
 import SupportCTA from '@/components/Global/SupportCTA'
 import { useContributePotFlow } from '../useContributePotFlow'
 import { useRouter } from 'next/navigation'
+import { useState } from 'react'
 import { useAuth } from '@/context/authContext'
 import { RequestPotActionList } from '../components/RequestPotActionList'
 
@@ -62,12 +63,18 @@ export function ContributePotInputView() {
     }
 
     // handle External Wallet click
+    const [isExternalWalletLoading, setIsExternalWalletLoading] = useState(false)
     const handleOpenExternalWalletFlow = async () => {
         if (canProceed && !isLoading) {
-            const res = await executeContribution(true, true) // return after creating charge
-            // Proceed only if charge is created successfully
-            if (res && res.success) {
-                setCurrentView('EXTERNAL_WALLET')
+            setIsExternalWalletLoading(true)
+            try {
+                const res = await executeContribution(true, true) // return after creating charge
+                // proceed only if charge is created successfully
+                if (res && res.success) {
+                    setCurrentView('EXTERNAL_WALLET')
+                }
+            } finally {
+                setIsExternalWalletLoading(false)
             }
         }
     }
@@ -122,8 +129,10 @@ export function ContributePotInputView() {
                     isAmountEntered={isAmountEntered}
                     usdAmount={amount}
                     recipientUserId={recipient?.userId}
+                    recipientUsername={recipient?.username}
                     onPayWithPeanut={handlePayWithPeanut}
-                    isPaymentLoading={isLoading}
+                    isPaymentLoading={isLoading && !isExternalWalletLoading}
+                    isExternalWalletLoading={isExternalWalletLoading}
                     onPayWithExternalWallet={handleOpenExternalWalletFlow}
                 />
             </div>
diff --git a/src/features/payments/shared/components/SendWithPeanutCta.tsx b/src/features/payments/shared/components/SendWithPeanutCta.tsx
index 62656a627..ebe59d9f0 100644
--- a/src/features/payments/shared/components/SendWithPeanutCta.tsx
+++ b/src/features/payments/shared/components/SendWithPeanutCta.tsx
@@ -12,6 +12,9 @@ import { PEANUT_LOGO_BLACK, PEANUTMAN_LOGO } from '@/assets'
 import { Button, type ButtonProps } from '@/components/0_Bruddle/Button'
 import type { IconName } from '@/components/Global/Icons/Icon'
 import { useAuth } from '@/context/authContext'
+import { useAppDispatch } from '@/redux/hooks'
+import { setupActions } from '@/redux/slices/setup-slice'
+import { EInviteType } from '@/services/services.types'
 import { saveRedirectUrl, saveToLocalStorage } from '@/utils/general.utils'
 import Image from 'next/image'
 import { useRouter } from 'next/navigation'
@@ -22,6 +25,8 @@ interface SendWithPeanutCtaProps extends ButtonProps {
     // when true, will redirect to login if user is not logged in
     requiresAuth?: boolean
     insufficientBalance?: boolean
+    // username of the person who created the request/link — used to generate an invite code for non-logged-in users
+    inviterUsername?: string
 }
 
 /**
@@ -38,9 +43,11 @@ export default function SendWithPeanutCta({
     requiresAuth = true,
     onClick,
     insufficientBalance = false,
+    inviterUsername,
     ...props
 }: SendWithPeanutCtaProps) {
     const router = useRouter()
+    const dispatch = useAppDispatch()
     const { user, isFetchingUser } = useAuth()
 
     const isLoggedIn = !!user?.user?.userId
@@ -51,10 +58,20 @@ export default function SendWithPeanutCta({
         // don't act while auth is still resolving
         if (isFetchingUser) return
 
-        // if auth is required and user is not logged in, redirect to login
+        // if auth is required and user is not logged in, redirect to signup
         if (requiresAuth && !isLoggedIn) {
-            saveRedirectUrl()
-            router.push('/setup')
+            const redirectUri = encodeURIComponent(
+                window.location.pathname + window.location.search + window.location.hash
+            )
+            if (inviterUsername) {
+                const inviteCode = `${inviterUsername.toUpperCase()}INVITESYOU`
+                dispatch(setupActions.setInviteCode(inviteCode))
+                dispatch(setupActions.setInviteType(EInviteType.PAYMENT_LINK))
+                router.push(`/invite?code=${inviteCode}&redirect_uri=${redirectUri}`)
+            } else {
+                saveRedirectUrl()
+                router.push('/setup')
+            }
             return
         }
 

From cc230e56870fc459c7993de3790971a05b5f61a3 Mon Sep 17 00:00:00 2001
From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com>
Date: Fri, 20 Mar 2026 20:29:52 +0530
Subject: [PATCH 9/9] fix: hoist useMemo out of conditional and fix color token
 typo
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- move paymentMethodName useMemo above the isProviderDisabled conditional
  to fix Rules of Hooks violation (hooks can't be called conditionally)
- add proper deps (paymentProcessor, qrType) to the useMemo
- fix text-grey-1 → text-gray-1 in TransactionCard for consistency
---
 src/app/(mobile-ui)/qr-pay/page.tsx           | 34 +++++++++----------
 .../TransactionDetails/TransactionCard.tsx    |  2 +-
 2 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/app/(mobile-ui)/qr-pay/page.tsx b/src/app/(mobile-ui)/qr-pay/page.tsx
index f84eb7bf2..1cd208fbc 100644
--- a/src/app/(mobile-ui)/qr-pay/page.tsx
+++ b/src/app/(mobile-ui)/qr-pay/page.tsx
@@ -1057,25 +1057,25 @@ export default function QRPayPage() {
         )
     }
 
-    // Show maintenance error if provider is disabled
-    if (isProviderDisabled) {
-        // Get user-facing payment method name
-        const paymentMethodName = useMemo(() => {
-            if (paymentProcessor === 'MANTECA') {
-                switch (qrType) {
-                    case EQrType.PIX:
-                        return 'PIX'
-                    case EQrType.MERCADO_PAGO:
-                        return 'Mercado Pago'
-                    case EQrType.ARGENTINA_QR3:
-                        return 'QR'
-                    default:
-                        return 'QR'
-                }
+    // get user-facing payment method name for maintenance screen
+    const paymentMethodName = useMemo(() => {
+        if (paymentProcessor === 'MANTECA') {
+            switch (qrType) {
+                case EQrType.PIX:
+                    return 'PIX'
+                case EQrType.MERCADO_PAGO:
+                    return 'Mercado Pago'
+                case EQrType.ARGENTINA_QR3:
+                    return 'QR'
+                default:
+                    return 'QR'
             }
-            return 'SimpleFi'
-        }, [])
+        }
+        return 'SimpleFi'
+    }, [paymentProcessor, qrType])
 
+    // Show maintenance error if provider is disabled
+    if (isProviderDisabled) {
         return (
             <div className="my-auto flex h-full w-full flex-col justify-center space-y-4">
                 <Card className="flex w-full flex-col items-center gap-2 p-4">
diff --git a/src/components/TransactionDetails/TransactionCard.tsx b/src/components/TransactionDetails/TransactionCard.tsx
index 62b685501..fc925ce0a 100644
--- a/src/components/TransactionDetails/TransactionCard.tsx
+++ b/src/components/TransactionDetails/TransactionCard.tsx
@@ -209,7 +209,7 @@ const TransactionCard: React.FC<TransactionCardProps> = ({
                                         <span
                                             className={twMerge(
                                                 'font-semibold',
-                                                status === 'refunded' && 'text-grey-1 line-through'
+                                                status === 'refunded' && 'text-gray-1 line-through'
                                             )}
                                         >
                                             {displayAmount}