Skip to content

Conversation

jjramirezn
Copy link
Contributor

No description provided.

jjramirezn and others added 30 commits June 13, 2025 12:38
Stop using the skd and use the squid API directly, this give us more
control and access to all the data that returns squid (for example,
we now have access to the fees and don't have to recalculate them
ourselves)
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Use coral through squid to get the cross-chain route for the different
flows. This enables xchain withdraw for peanut wallet
[TASK-11579] feat: add cross-chain action card
kushagrasarathe and others added 8 commits July 15, 2025 12:50
* fix: slider tap bug logic

* fix: tap bug on slider
* removed legacy button and changed try now button colors

* try now button color and hero description

* YourMoney component

* NoFees component first part

* stars done

* scribble in zero fees

* no hidden fees section done

* securityBuiltIn done

* sendInSeconds progress

* sendInSeconds done

* updated try now button to be a link

* business integration initiation

* businessIntegrate done

* order and marquee reusability

* order fixed

* background animations in Landing Page compoejnnts

* changed image for text in hero section

* figma details

* landing page responsiveness improvements

* landing page responsiveness done

* coderabbit suggestion

* business integration button

* fixed iphone screenshots

* CTA button animation

* added debugging for CTA button animation

* changed animation since react gave errors

* arrows in hero section

* NoFees new Zero

* no fees responsiveness fixed

* sendInSeconds details done

* coderabbit suggestions

* formatting

* hand-token wasnt pushed? forgot to stage or sum? anyways fixed

* build issues fixed

* coderabbit optimization

* code formatting

* arrows and ZERO thickness

* shade in try now button

* progress in button animation

* undoing button changes

* small detail fixes

* added asset

* changed peanut business to svg

* integrate peanut component done

* added pay-zero-fees.svg

* added new illustrations

* uout money anywhere svg

* securitybuiltin component SVGs

* adding YourMoney new SVGs

* your money anywhere component

* instantly send & receive svg

* arrows fixed

* button and arrows done

* desktop sendinseconds button done

* removed arrows disappearing effect

* MOBILE: hero button done

* added mobile svg

* yourMoney responsive component done

* added mobile-zero-fees.svg

* added no-hidden-fees.svg

* noFees mobile svg

* noFees desktop + mobile improvements

* noFees done

* mobile security built in SVG

* securityprivacy mobile done

* mobile-send-in-seconds.svg

* sendInSeconds mobile done

* business integrate mobile

* business integrate button and final details

* removed footer

* formatting

* removed pino-pretty

* fixed button instead of sticky/floating

---------

Signed-off-by: facundobozzi <[email protected]>
* feat: allow uppercase in url

* fix: allow uppercase in recipient
- Slider instead of button
- Expiry for local storage instead of session storage
- Warning icon color
Copy link

Prod release sprint 100

Copy link

vercel bot commented Jul 16, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
peanut-wallet 🛑 Canceled (Inspect) Jul 16, 2025 8:56pm

@jjramirezn jjramirezn requested a review from FacuBozzi July 16, 2025 20:46
Copy link
Contributor

coderabbitai bot commented Jul 16, 2025

Walkthrough

This update introduces major enhancements across the app, including a new cross-chain swap service, expanded landing page sections with advanced scroll-driven animations, and improved wallet/payment flows. Contexts and hooks are refactored for clarity and feature support. Numerous UI components are updated for usability, error handling, and new feature integration, with new utilities and configuration options added.

Changes

Files / Area Change Summary
.env.example, src/constants/general.consts.ts, src/constants/zerodev.consts.ts, src/config/justaname.config.tsx Added/updated environment variables for Alchemy, Squid API, and RPC URLs; improved configuration for external services.
package.json, src/components/Slider/index.tsx Added @radix-ui/react-slider dependency and introduced a new Slider component for UI interactions.
src/app/page.tsx, src/components/LandingPage/* Major landing page overhaul: added new sections (BusinessIntegrate, Marquee, NoFees, SecurityBuiltIn, SendInSeconds, YourMoney), scroll-driven button animation, and responsive animated visuals.
src/components/Global/ScreenOrientationLocker.tsx, src/app/layout.tsx Introduced and rendered a component to lock screen orientation to portrait mode.
src/services/swap.ts Added a new cross-chain swap service using the Squid API, with route fetching, fee estimation, and approval logic.
src/hooks/usePaymentInitiator.ts, src/components/Payment/Views/Confirm.payment.view.tsx, src/components/Withdraw/views/Confirm.withdraw.view.tsx, src/app/(mobile-ui)/withdraw/crypto/page.tsx Refactored payment and withdrawal flows for cross-chain support, unified error handling, added timer/expiry logic, and improved route refresh and retry handling.
src/components/Global/RouteExpiryTimer/index.tsx, src/components/Global/PeanutActionDetailsCard/index.tsx Introduced a countdown timer UI for cross-chain route expiry and integrated it into action details cards.
src/app/(mobile-ui)/home/page.tsx, src/components/Global/BalanceWarningModal/index.tsx, src/utils/general.utils.ts Enhanced balance warning modal: switched to localStorage with expiry, added slider for confirmation, and improved expiry logic.
src/app/(mobile-ui)/withdraw/[country]/bank/page.tsx, src/hooks/wallet/useWallet.ts, src/utils/general.utils.ts Refactored bank withdrawal: added sendMoney to wallet hook, replaced manual transaction construction, improved transaction status checks, and IBAN formatting.
src/components/AddMoney/components/AddMoneyBankDetails.tsx, src/context/OnrampFlowContext.tsx, src/app/(mobile-ui)/add-money/[country]/bank/page.tsx Migrated onramp data management from sessionStorage to React context, enhanced bank details UI with copy-to-clipboard and improved config usage.
src/components/Global/GeneralRecipientInput/index.tsx, src/lib/validation/recipient.ts, src/lib/validation/recipient.test.ts, src/components/Global/GeneralRecipientInput/__tests__/GeneralRecipientInput.test.tsx Updated recipient validation for withdrawals: treat non-addresses as ENS names, generalized error messages, and expanded test coverage.
src/components/Request/link/views/Create.request.link.view.tsx, src/services/requests.ts Refactored request link creation/updating: added PATCH support, improved state/attachment management, and error handling.
src/components/Payment/PaymentForm/index.tsx, src/components/Payment/Views/Initial.payment.view.tsx, src/components/Payment/Views/Confirm.payment.view.tsx, src/app/[...recipient]/client.tsx Renamed wallet connection state variables and props for clarity, updated direct USD payment logic, and improved UI conditions.
src/app/actions/clients.ts, src/components/Create/useCreateLink.tsx, src/redux/slices/send-flow-slice.ts, src/redux/types/send-flow.types.ts Removed legacy fee estimation logic and related state from hooks and Redux.
src/components/Global/TokenSelector/TokenSelector.tsx Removed special disabling logic for USDT on Ethereum mainnet; token enablement now based solely on Squid support.
src/components/Global/FileUploadInput/index.tsx, src/components/Global/TokenAmountInput/index.tsx Added onBlur callback support to file upload and token amount input components.
src/components/TransactionDetails/TransactionDetailsDrawer.tsx, src/components/TransactionDetails/TransactionCard.tsx, src/utils/index.ts, src/utils/general.utils.ts, src/utils/bridge.utils.ts, src/utils/__tests__/bridge.utils.test.ts Improved IBAN formatting, stablecoin amount display, and payment rail name mapping; added utility exports and expiry support to localStorage helpers.
src/components/Send/link/LinkSendFlowManager.tsx, src/components/Send/link/views/Initial.link.send.view.tsx, src/components/Send/link/views/Success.link.send.view.tsx, src/components/Send/views/SendRouter.view.tsx, src/app/(mobile-ui)/send/page.tsx, src/app/(mobile-ui)/request/create/page.tsx, src/components/AddWithdraw/AddWithdrawCountriesList.tsx, src/components/AddWithdraw/AddWithdrawRouterView.tsx, src/components/AddWithdraw/DynamicBankAccountForm.tsx, src/components/AddMoney/views/CryptoDepositQR.view.tsx Adjusted layouts for consistent min-height, improved error handling and state resets in send/request flows, and updated styling for better UX.
src/components/Global/DirectSendQR/index.tsx Added camera permission handling before opening QR scanner, updated direct send modal and QR code logic.
src/components/Home/HomeHistory.tsx Conditional rendering of KYC status item based on user status.
src/app/actions/ibanToBic.ts, src/app/actions/tokens.ts Improved IBAN preprocessing and token price/balance fetching logic.
src/app/actions/tokens.ts, src/services/services.types.ts Refined token price logic and updated charge response types.
src/hooks/useWebSocket.ts Broadened filtering of pending requests in WebSocket handler.
tailwind.config.js Added new pulse-strong animation for UI feedback.

Possibly related PRs

  • peanutprotocol/peanut-ui#986: Both PRs modify recipient handling by normalizing and validating recipient strings, especially for ENS and withdrawal contexts.
  • peanutprotocol/peanut-ui#975: Both PRs address the balance warning modal, with this PR extending its functionality by adding expiry logic and localStorage handling.
  • peanutprotocol/peanut-ui#953: Both PRs migrate onramp data management from sessionStorage to React context and update related components accordingly.

Suggested reviewers

  • Hugo0
  • kushagrasarathe
✨ Finishing Touches
  • 📝 Generate Docstrings
🧪 Generate unit tests
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch chore/release-conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Explain this complex logic.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai explain this code block.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and explain its main purpose.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai auto-generate unit tests to generate unit tests for this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@coderabbitai coderabbitai bot added the enhancement New feature or request label Jul 16, 2025
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 9

🔭 Outside diff range comments (1)
src/services/requests.ts (1)

39-58: Inconsistent error handling between create and update methods.

The update method uses basic error handling while the create method has enhanced JSON parsing for error messages. Consider applying the same error handling pattern to both methods for consistency.

Apply this diff to make error handling consistent:

     if (!response.ok) {
-        throw new Error(`Failed to update request: ${response.statusText}`)
+        let errorMessage = `Failed to update request: ${response.statusText}`
+
+        try {
+            const errorData = await response.json()
+            if (errorData.error) {
+                errorMessage = errorData.error
+            }
+        } catch (parseError) {
+            // If we can't parse the response, use the default error message
+            console.warn('Could not parse error response:', parseError)
+        }
+
+        throw new Error(errorMessage)
     }
🧹 Nitpick comments (21)
src/components/LandingPage/securityBuiltIn.tsx (1)

12-19: Improve TypeScript typing for better type safety.

The titleSvg and iconSrc properties use any type, which reduces type safety. Consider using more specific types.

interface Feature {
    id: number
    title: string
-   titleSvg: any
+   titleSvg: string
    description: string
-   iconSrc: any
+   iconSrc: string
    iconAlt: string
}
src/components/LandingPage/yourMoney.tsx (1)

12-19: Consider more specific types for asset properties.

The Feature interface is well-structured. Consider using more specific types for titleSvg and imageSrc instead of any to improve type safety, though this is a minor issue since imported assets often have complex types.

interface Feature {
    id: number
    title: string
-   titleSvg: any
+   titleSvg: string
    description: string
-   imageSrc: any
+   imageSrc: string | StaticImageData
    imageAlt: string
}
src/components/Slider/index.tsx (1)

68-70: Consider making the track label configurable.

The "Slide to Proceed" text is hardcoded, which limits the component's reusability. Consider adding a label prop to make this text customizable for different use cases.

export interface SliderProps
    extends Omit<
        React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>,
        'value' | 'onValueChange' | 'max' | 'step' | 'defaultValue'
    > {
    value?: boolean
    onValueChange?: (value: boolean) => void
    defaultValue?: boolean
    onAccepted?: () => void
+   label?: string
}

// In the component:
-                    <div className="absolute left-0 top-0 flex h-full w-full items-center justify-center text-sm font-bold text-black">
-                        Slide to Proceed
-                    </div>
+                    <div className="absolute left-0 top-0 flex h-full w-full items-center justify-center text-sm font-bold text-black">
+                        {label || 'Slide to Proceed'}
+                    </div>
src/components/LandingPage/noFees.tsx (2)

14-24: Consider performance optimization for resize handling.

The resize event handler could benefit from debouncing to improve performance, especially on devices with frequent resize events. Consider using a debounced resize handler or a custom hook like useWindowSize.

+import { useMemo } from 'react'
+import { debounce } from 'lodash' // or implement custom debounce

-    useEffect(() => {
-        const handleResize = () => {
-            setScreenWidth(window.innerWidth)
-        }
+    useEffect(() => {
+        const handleResize = useMemo(
+            () => debounce(() => {
+                setScreenWidth(window.innerWidth)
+            }, 100),
+            []
+        )

63-112: Consider refactoring star animations for maintainability.

The star animations work well but contain repetitive code. Consider extracting the animation logic into a reusable component or configuration array to improve maintainability.

+const starConfigs = [
+    { className: "absolute -right-36 -top-12", delay: 0.2, rotate: 22, translateY: 20, translateX: 5 },
+    { className: "absolute -right-58 top-30", delay: 0.4, rotate: -17, translateY: 28, translateX: -5 },
+    // ... other configurations
+]

+{starConfigs.map((config, index) => (
+    <motion.img
+        key={index}
+        src={Star.src}
+        alt="Floating Star"
+        width={50}
+        height={50}
+        className={config.className}
+        initial={{ opacity: 0, translateY: config.translateY, translateX: config.translateX, rotate: config.rotate }}
+        whileInView={{ opacity: 1, translateY: 0, translateX: 0, rotate: config.rotate }}
+        transition={{ type: 'spring', damping: 5, delay: config.delay }}
+    />
+))}
src/components/Global/RouteExpiryTimer/index.tsx (1)

107-117: Consider optimizing the useEffect dependency array.

The dependency array includes many values that might cause unnecessary re-renders. Consider using useCallback for the callback props or splitting the effect into smaller, more focused effects to improve performance.

+const handleNearExpiry = useCallback(() => {
+    if (!disableRefetch && onNearExpiry) {
+        onNearExpiry()
+    }
+}, [disableRefetch, onNearExpiry])

+const handleExpired = useCallback(() => {
+    if (onExpired) {
+        onExpired()
+    }
+}, [onExpired])

// Then use handleNearExpiry and handleExpired in the effect
// and remove onNearExpiry and onExpired from the dependency array
src/components/LandingPage/sendInSeconds.tsx (2)

110-140: Consider performance impact of multiple continuous animations.

The component renders 4 continuously animated clouds plus multiple animated stars. This could impact performance on lower-end devices. Consider:

  • Using will-change: transform CSS property for optimized animations
  • Implementing reduced motion preferences with prefers-reduced-motion media query
  • Potentially reducing the number of animated elements on mobile devices

144-192: Add accessibility attributes to decorative elements.

The animated stars and decorative images should be marked as decorative to improve accessibility for screen reader users.

-                alt="Floating Star"
+                alt=""
+                aria-hidden="true"

Apply this pattern to all decorative images (stars, clouds, exclamations).

src/components/Global/DirectSendQR/index.tsx (2)

204-214: Consider adding user-friendly error handling for specific permission states.

The current implementation only handles generic camera permission errors. Consider providing more specific error messages based on the actual permission state or error type.

 const handleCameraPermission = async () => {
     setShowPermissionModal(false)
     try {
         const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } })
         stream.getTracks().forEach((track) => track.stop())
         startScanner()
     } catch (error) {
-        console.error('Camera permission denied', error)
-        toast.error('Camera permission denied. Please allow camera access in your browser settings.')
+        console.error('Camera permission error:', error)
+        if (error instanceof DOMException) {
+            if (error.name === 'NotAllowedError') {
+                toast.error('Camera permission denied. Please allow camera access in your browser settings.')
+            } else if (error.name === 'NotFoundError') {
+                toast.error('No camera found. Please ensure your device has a camera.')
+            } else {
+                toast.error('Unable to access camera. Please check your browser settings.')
+            }
+        } else {
+            toast.error('An unexpected error occurred while accessing the camera.')
+        }
     }
 }

216-233: Add TypeScript type assertion for camera permission query.

The 'camera' permission name might not be recognized by TypeScript in all environments. Consider adding a type assertion or handling this more safely.

 const handleOpenScannerClick = async () => {
     if (navigator.permissions) {
         try {
-            const permissionStatus = await navigator.permissions.query({ name: 'camera' as PermissionName })
+            // Use type assertion for camera permission which may not be in PermissionName type
+            const permissionStatus = await navigator.permissions.query({ name: 'camera' } as PermissionDescriptor)
             if (permissionStatus.state === 'granted') {
                 startScanner()
             } else {
                 setShowPermissionModal(true)
             }
         } catch (err) {
             console.error('Could not query permissions, showing custom prompt.', err)
             setShowPermissionModal(true)
         }
     } else {
         // fallback for browsers that do not support the Permissions API
         setShowPermissionModal(true)
     }
 }
src/components/Payment/PaymentForm/index.tsx (2)

121-123: Consider memoizing with more specific dependencies.

The isUsingExternalWallet memo currently depends on both isPeanutWalletConnected and isAddMoneyFlow, but the logic shows it's true when either condition is met. This is correct, but you might want to add a comment explaining the logic.

 const isUsingExternalWallet = useMemo(() => {
+    // External wallet is used for add money flows or when Peanut wallet is not connected
     return isAddMoneyFlow || !isPeanutWalletConnected
 }, [isPeanutWalletConnected, isAddMoneyFlow])

673-680: Consider consolidating the file upload condition.

The isDirectUsdPayment condition for showing the file upload input seems isolated. Consider adding a comment explaining why file uploads are only available for direct USD payments.

 {isDirectUsdPayment && (
+    // File attachments are only supported for direct USD payments
     <FileUploadInput
         placeholder="Comment"
         attachmentOptions={attachmentOptions}
         setAttachmentOptions={(options) => dispatch(paymentActions.setAttachmentOptions(options))}
         className="h-11"
     />
 )}
src/components/LandingPage/hero.tsx (2)

55-62: renderSparkle function is defined but commented out in usage.

The renderSparkle function is defined but its usage is commented out on line 136. Consider either removing this function or documenting why it's kept for future use.

-const renderSparkle = (variant: 'primary' | 'secondary') =>
-    variant === 'primary' && (
-        <img
-            src={Sparkle.src}
-            className={twMerge('absolute -right-4 -top-4 h-auto w-5 sm:-right-5 sm:-top-5 sm:w-6')}
-            alt="Sparkle"
-        />
-    )
+// TODO: Sparkle decoration temporarily disabled - will be re-enabled in future update
+// const renderSparkle = (variant: 'primary' | 'secondary') => ...

126-127: Unused variable arrowOpacity.

The arrowOpacity variable is set to 1 but could be removed since it's always constant.

 const renderCTAButton = (cta: CTAButton, variant: 'primary' | 'secondary') => {
-    const arrowOpacity = 1 // Always visible

     return (
         <motion.div
             className={getButtonContainerClasses(variant)}
             initial={getInitialAnimation(variant)}
             animate={getAnimateAnimation(variant, buttonVisible, buttonScale)}
             whileHover={getHoverAnimation(variant)}
             transition={transitionConfig}
         >
             {/* {renderSparkle(variant)} */}

             <a
                 href={cta.href}
                 className={getButtonClasses(variant)}
                 target={cta.isExternal ? '_blank' : undefined}
                 style={{ fontWeight: 900 }}
                 rel={cta.isExternal ? 'noopener noreferrer' : undefined}
             >
                 {cta.label}
             </a>

-            {renderArrows(variant, arrowOpacity, buttonVisible)}
+            {renderArrows(variant, 1, buttonVisible)}
         </motion.div>
     )
 }
src/services/swap.ts (1)

454-455: Consider making the error message more specific.

The generic "No amount specified" error could be more helpful by indicating which amount parameters are accepted.

     } else {
-        throw new Error('No amount specified')
+        throw new Error('No amount specified. Please provide one of: fromAmount, toAmount, fromUsd, or toUsd')
     }
src/components/Global/PeanutActionDetailsCard/index.tsx (1)

135-139: Consider extracting bank account check logic.

The bank account checks are becoming repetitive. Consider extracting this into a helper function.

+const isBankAccountTransaction = (transactionType: string) => {
+    return transactionType === 'WITHDRAW_BANK_ACCOUNT' || transactionType === 'ADD_MONEY_BANK_ACCOUNT'
+}
+
 const isWithdrawBankAccount = transactionType === 'WITHDRAW_BANK_ACCOUNT' && recipientType === 'BANK_ACCOUNT'
 const isAddBankAccount = transactionType === 'ADD_MONEY_BANK_ACCOUNT'

 const withdrawBankIcon = () => {
-    if (isWithdrawBankAccount || isAddBankAccount)
+    if (isBankAccountTransaction(transactionType) && (isWithdrawBankAccount || isAddBankAccount))
         return (
src/app/page.tsx (2)

134-135: Consider reducing scroll distance for better UX

The animation requires 500 deltaY units of scrolling to complete, which might feel unresponsive to users. Consider making this configurable or reducing it.

-const maxVirtualScroll = 500 // Increased from 200 to require more scrolling
+const maxVirtualScroll = 300 // Balanced between responsiveness and control

You could also make this value responsive to viewport height:

const maxVirtualScroll = Math.min(500, window.innerHeight * 0.5)

171-185: Add keys to repeated Marquee components

The multiple Marquee components are rendered without keys, which could cause React reconciliation issues.

Consider extracting the repeated pattern:

+const marqueeKeys = ['hero', 'yourMoney', 'noFees', 'security', 'faqs', 'sendInSeconds', 'business'] as const
+
 return (
     <Layout className="!m-0 w-full !p-0">
         <Hero
             heading={hero.heading}
             primaryCta={hero.primaryCta}
             buttonVisible={buttonVisible}
             buttonScale={buttonScale}
         />
-        <Marquee {...marqueeProps} />
+        <Marquee key={marqueeKeys[0]} {...marqueeProps} />
         <YourMoney />
-        <Marquee {...marqueeProps} />
+        <Marquee key={marqueeKeys[1]} {...marqueeProps} />
         // ... continue pattern

Or create a helper component to reduce repetition:

const LandingSection = ({ children, marqueeKey }: { children: React.ReactNode, marqueeKey: string }) => (
    <>
        {children}
        <Marquee key={marqueeKey} {...marqueeProps} />
    </>
)
src/components/Withdraw/views/Confirm.withdraw.view.tsx (1)

158-169: Consider showing loading state on retry button

The retry button never shows a loading state even when operations are in progress, which might confuse users if the operation takes time.

 onClick={() => {
     if (error === ROUTE_NOT_FOUND_ERROR) {
         onBack()
     } else if (isRouteExpired) {
         onRouteRefresh?.()
     } else {
         onConfirm()
     }
 }}
-disabled={false}
-loading={false}
+disabled={isProcessing || isRouteLoading}
+loading={isProcessing || isRouteLoading}
src/components/Request/link/views/Create.request.link.view.tsx (1)

288-332: Smart attachment handling with immediate feedback

The implementation provides excellent UX:

  • Immediate updates when files are added/changed
  • Blur-triggered updates for text changes
  • Proper cleanup when attachments are cleared
  • Accurate unsaved changes detection

One minor optimization: Consider debouncing the message updates to reduce API calls:

import { useDebounce } from '@/hooks/useDebounce'

// In component:
const debouncedMessage = useDebounce(attachmentOptions.message, 500)

// Update hasUnsavedChanges to use debouncedMessage
const hasUnsavedChanges = useMemo(() => {
    if (!requestId) return false
    const lastSaved = lastSavedAttachmentRef.current
    return lastSaved.message !== debouncedMessage || lastSaved.rawFile !== attachmentOptions.rawFile
}, [requestId, debouncedMessage, attachmentOptions.rawFile])
src/hooks/usePaymentInitiator.ts (1)

180-289: Well-structured refactoring of transaction preparation!

The function now has a cleaner interface with structured parameters and properly delegates cross-chain routing to the external service. Good error handling with Sentry integration for fee estimation failures.

Consider making the error handling consistent by also capturing the main catch block error to Sentry:

} catch (err) {
    console.error('Error preparing transaction details:', err)
+   captureException(err)
    const errorMessage = ErrorHandler(err)
    setError(errorMessage)
    setIsFeeEstimationError(true)
    setLoadingStep('Error')
}

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (1)
src/app/actions/tokens.ts (1)

228-259: Solid implementation with efficient parallel execution and good error handling.

The function efficiently runs gas estimation, gas price fetching, and native token price fetching in parallel. The BigInt calculations and formatUnits usage are correct for handling wei-to-token conversions.

Consider improving the fallback logic for edge cases:

        const estimatedCostUsd = nativeTokenPrice
-            ? Number(formatUnits(gasCostWei, nativeTokenPrice.decimals)) * nativeTokenPrice.price
+            ? nativeTokenPrice.price > 0 
+                ? Number(formatUnits(gasCostWei, nativeTokenPrice.decimals)) * nativeTokenPrice.price
+                : 0.01
            : 0.01

This handles the case where native token price is fetched but the price is 0.

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between c334f18 and 1b44176.

📒 Files selected for processing (1)
  • src/app/actions/tokens.ts (5 hunks)
🧰 Additional context used
🧠 Learnings (1)
src/app/actions/tokens.ts (17)
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#422
File: src/components/Request/Pay/Views/Initial.view.tsx:76-78
Timestamp: 2024-10-07T15:28:25.280Z
Learning: In `src/components/Request/Pay/Views/Initial.view.tsx`, both `txFee` and `utils.formatTokenAmount(estimatedGasCost, 3)` return strings, ensuring consistent return types for `calculatedFee`.
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#956
File: src/app/actions/tokens.ts:220-227
Timestamp: 2025-07-07T19:55:14.380Z
Learning: In the Mobula API integration within `src/app/actions/tokens.ts`, the `asset.asset.blockchains` array and `asset.contracts_balances` array are synchronized, meaning for every blockchain in the blockchains array, there will be a corresponding entry in the contracts_balances array with matching address. This makes the non-null assertion operator safe to use when accessing `contractInfo!.decimals` in the `fetchWalletBalances` function.
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#413
File: src/context/tokenSelector.context.tsx:118-123
Timestamp: 2024-10-08T20:13:42.967Z
Learning: In the `TokenContextProvider` component within `src/context/tokenSelector.context.tsx`, in the TypeScript React application, when data changes and before calling `fetchAndSetTokenPrice`, it is necessary to reset `selectedTokenData`, `selectedTokenPrice`, `selectedTokenDecimals`, and `inputDenomination` to discard stale data.
Learnt from: Hugo0
PR: peanutprotocol/peanut-ui#422
File: src/components/Request/Pay/Pay.tsx:103-111
Timestamp: 2024-10-07T13:42:00.443Z
Learning: When the token price cannot be fetched in `src/components/Request/Pay/Pay.tsx` within the `PayRequestLink` component, set `tokenPriceData.price` to 0 to ensure the UI remains functional. Since Squid uses their own price engine for x-chain fulfillment transactions, this approach will not affect the transaction computation.
Learnt from: Hugo0
PR: peanutprotocol/peanut-ui#422
File: src/components/Request/Pay/Pay.tsx:103-111
Timestamp: 2024-10-08T20:13:42.967Z
Learning: When the token price cannot be fetched in `src/components/Request/Pay/Pay.tsx` within the `PayRequestLink` component, set `tokenPriceData.price` to 0 to ensure the UI remains functional. Since Squid uses their own price engine for x-chain fulfillment transactions, this approach will not affect the transaction computation.
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#422
File: src/components/Request/Pay/Views/Initial.view.tsx:76-78
Timestamp: 2024-10-07T15:25:45.170Z
Learning: In `src/components/Request/Pay/Views/Initial.view.tsx`, both `txFee` and `utils.formatTokenAmount(...)` return strings, ensuring that `calculatedFee` consistently returns a string without the need for additional type conversion.
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#847
File: src/app/actions/clients.ts:48-68
Timestamp: 2025-05-13T16:26:58.336Z
Learning: In viem v2.21.48, the `stateOverride` parameter for `estimateGas` and related functions expects an array-based format: `[{ address: tokenAddress, stateDiff: [{ slot: calculatedSlot, value: hexValue }] }]` rather than an object-based format.
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#535
File: src/components/Claim/Claim.tsx:142-146
Timestamp: 2024-11-18T21:36:11.486Z
Learning: In `src/components/Claim/Claim.tsx`, external calls like token price fetching and cross-chain details retrieval are already encapsulated within existing `try...catch` blocks, so additional error handling may be unnecessary.
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#958
File: src/app/actions/tokens.ts:266-266
Timestamp: 2025-07-07T20:22:11.092Z
Learning: In `src/app/actions/tokens.ts`, within the `fetchWalletBalances` function, using the non-null assertion operator `!` on `process.env.MOBULA_API_KEY!` is intentional and correct, and should not be flagged for replacement with explicit validation.
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#551
File: src/context/walletContext/walletContext.tsx:87-88
Timestamp: 2024-12-02T17:21:45.515Z
Learning: When converting `totalBalance` (in USD) to a `BigInt` balance in `src/context/walletContext/walletContext.tsx`, multiplying by `1e6` is intentional to maintain compatibility with USDC's 6 decimal places. The application displays only 2 decimal places, so this level of precision is sufficient.
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#404
File: src/context/tokenSelector.context.tsx:121-121
Timestamp: 2024-10-03T09:57:43.885Z
Learning: In `TokenContextProvider` within `tokenSelector.context.tsx`, when token data is loaded from preferences, it's acceptable to set `isTokenPriceFetchingComplete` to `true` because the token data is already available.
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#422
File: src/components/Request/Pay/Pay.consts.ts:34-34
Timestamp: 2024-10-07T15:50:29.173Z
Learning: In `src/components/Request/Pay` components, the `tokenPrice` property in the `IPayScreenProps` interface is only relevant to these views. Other components using `IPayScreenProps` do not need to handle `tokenPriceData` when it's updated in these components.
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#422
File: src/components/Request/Pay/Pay.consts.ts:34-34
Timestamp: 2024-10-08T20:13:42.967Z
Learning: In `src/components/Request/Pay` components, the `tokenPrice` property in the `IPayScreenProps` interface is only relevant to these views. Other components using `IPayScreenProps` do not need to handle `tokenPriceData` when it's updated in these components.
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#478
File: src/components/Dashboard/useDashboard.tsx:134-134
Timestamp: 2024-10-24T12:36:40.508Z
Learning: In the file `src/components/Dashboard/useDashboard.tsx`, memoization of the `getTokenSymbol` function is not necessary because it is lightweight and does not involve complex computations or network calls.
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#868
File: src/components/Payment/PaymentForm/index.tsx:284-293
Timestamp: 2025-05-19T19:40:43.138Z
Learning: When converting between USD and token amounts, always check if the token price (divisor) is valid and non-zero before performing the division to prevent Infinity, NaN, or errors. Implementing validation like `if (!tokenPrice || isNaN(tokenPrice) || tokenPrice === 0)` before division operations is crucial for handling cases where price data might be unavailable.
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#443
File: src/components/Request/Pay/Views/Initial.view.tsx:293-297
Timestamp: 2024-10-16T11:37:07.647Z
Learning: Routes obtained from `createXChainUnsignedTx` are only valid for 20 seconds, so caching them for reuse is not effective.
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#424
File: src/components/Global/TokenSelector/TokenSelector.tsx:197-211
Timestamp: 2024-10-11T01:14:15.489Z
Learning: In `src/components/Global/TokenSelector/TokenSelector.tsx`, when the calculation within functions like `byChainAndText` is not computationally expensive, it's acceptable to avoid using `useCallback` for memoization.
🧬 Code Graph Analysis (1)
src/app/actions/tokens.ts (4)
src/utils/general.utils.ts (2)
  • isStableCoin (1127-1129)
  • estimateIfIsStableCoinFromPrice (762-769)
src/utils/__mocks__/next-cache.ts (1)
  • unstable_cache (1-1)
src/app/actions/clients.ts (2)
  • getPublicClient (11-20)
  • ChainId (9-9)
src/utils/token.utils.ts (1)
  • NATIVE_TOKEN_ADDRESS (27-27)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
  • GitHub Check: Deploy-Preview
🔇 Additional comments (6)
src/app/actions/tokens.ts (6)

5-8: Import additions look good and support the new functionality.

The added imports (formatUnits, Hex type, and NATIVE_TOKEN_ADDRESS) are all properly used in the new gas cost estimation functions and align with the codebase patterns.


123-123: Verify that contract always exists for the given chainId.

The non-null assertion operator ! assumes that a contract will always be found for the given chainId. If no matching contract exists, this will throw a runtime error.

Consider adding validation or handling the case where no contract is found:

-                const decimals = json.data.contracts.find((contract) => contract.blockchainId === chainId)!.decimals
+                const contract = json.data.contracts.find((contract) => contract.blockchainId === chainId)
+                if (!contract) throw new Error(`No contract found for chainId ${chainId}`)
+                const decimals = contract.decimals

133-133: Enhanced stablecoin detection improves accuracy.

The addition of isStableCoin(data.symbol) check alongside the existing price-based detection provides more robust stablecoin identification, reducing reliance on price fluctuations alone.


194-204: Well-implemented gas price caching with appropriate revalidation.

The function follows established patterns using getPublicClient and has a sensible 2-minute cache duration for gas prices. Converting to string for serialization is the right approach.


209-223: Gas estimate caching implementation is sound.

The function correctly uses estimateGas with appropriate parameters and has a longer cache duration (5 minutes) which makes sense since gas estimates are more stable than gas prices.


307-307: Sorting balances by value improves user experience.

The descending sort by numeric value ensures users see their highest value balances first, which is a logical ordering for wallet balance display.

@Hugo0 Hugo0 merged commit 80e1b2b into peanut-wallet Jul 16, 2025
9 checks passed
FacuBozzi added a commit that referenced this pull request Jul 16, 2025
* refactor: fetch external wallet balances from mobula (#956)

* fix: update desktop navigation (#970)

* fix: support page prod (#971)

* fix: update desktop navigation

* fix: support page

* [TASK-12746] feat: beta changes (#975)

* feat: beta changes

- Banner that redirects to support page
- Funds warning modal

* refactor(banner): remove from landing and add hand thumbs up

* [TASK-13082] Sprint 100 prod release  (#992)

* feat: abstract squid route fetching

Stop using the skd and use the squid API directly, this give us more
control and access to all the data that returns squid (for example,
we now have access to the fees and don't have to recalculate them
ourselves)

* refactor: use parseunits

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* refactor: remove console.dir

* feat: handle very large numbers with careful scaling

* refactor: use const for squid api url

* feat: add cross-chain action card

Use coral through squid to get the cross-chain route for the different
flows. This enables xchain withdraw for peanut wallet

* refactor: use decimals from token price instead of hardcoded

* style: Apply prettier formatting

* feat: show min received for cross-chain payments

* chore: clean unused variables

* fix: tests ach_pull to ach

* fix: pr comments

* fix: withdrawData and pulsate animation

* fix: cursor placement in token amount input

* fix: delete unused code

* fix: add camera perm modal

* fix: enable mexico bank offramp

* refactor: better comments for direct usd payments

* feat: add qr scanning for xchain

* fix: remove malicious code

* fix: handle mxn in offramp destination details (#945)

* fix: show share receipt option in direct send status view (#946)

* [TASK-12678] fix: coral withdraw fixes (#949)

* fix: coral withdraw fixes

- Stop refreshing the page after successful payment
- Better error message for unsupported token pairs

* chore: add squid env vars

* refactor: better copy for non rfq routes from peanut wallet

Also send warning to sentry

* fix: show amount in USD for withdrawals to other tokens to other tokens

* fix: lock orientation to portrait mode (#947)

* fix: lock orienatation to protrait mode

* style(fix): add new line

* style: format

* fix: if condition

* fix: update payment form for crosschain add money (#954)

* [TASK-12682] fix: show token selector for guest flow (#955)

* fix: show token selector for guest flow

* docs: add comment to explain url request flow

* implemented Context instead of sessionStorage in onrampData to avoid discrepancies with the Offramp logic (#953)

* refactor: fetch external wallet balances from mobula (#956) (#958)

* [TASK-12645] copy button for individual fields (#960)

* copy button for individual fields

* changed getOnrampCurrencyConfig (deprecated)to getCurrencyConfig + user now copies raw IBAN value

* fix: gas estimation for external wallets (#961)

We were re-rendering unnecesarily the prepare transaction, also now we
catch error if any

* [TASK-12603] reset send flow state when navigating to/from payment link creation (#964)

* reset send flow state when navigating to/from payment link creation

* linting (formatting)

* [TASK-12312] ENS/eth address network error being displayed on the frontend (#963)

* ENS/eth address network error being displayed on the frontend

* linting

* fix: centre align views on mobile (#950)

* [TASK-12542] added formatIban function for correct display (#952)

* added formatIban function for correct display

* coderabbit suggestion

Signed-off-by: facundobozzi <[email protected]>

* updated formatting

* added iban formatting in all pages

---------

Signed-off-by: facundobozzi <[email protected]>

* [TASK-12672] feat: show sponsored by peanut message (#959)

* feat: show sponsored by peanut message

This message is shown when we are making a transaction from the peanut
wallet. If the amount is more than one cent we also show the fee that
the user is saving by using peanut.

* fix(fees): show correct ammounts for externalwallet

* refactor: rename estimatedGasCostUsd to estimatedGasCostUsdUsd

* fix: correct approval owner and base rpc (#965)

Two things here:

1. We were using the peanut address for approval checking on deposits,
   this didn't affect because if the approval call failed we just
   continued with the deposit
2: The base rpc url was the sepolia one, not the mainnet. Big oversight
   there

* feat: add alachemy as fallback rpc url (#948)

* feat: add alachemy as fallback rpc url

* fix: remove commented line

* fix: address pr review comments

* [TASK-12866] fix: small fixes around crosschain ui (#966)

* fix: small fixes around crosschain ui

* fix: avoid negative expiry time

* removed white spaces before processing to BIC (#951)

* feat: resuable slider component (#968)

* fix: update desktop navigation with add/withdraw paths (#969)

* [TASK-11884] request via link with comment and attachment is creating 2 txs in the history (#943)

* PATCH implemented in frontend

* comment input state updating correctly (onBlur)

* freezing amount after updating comments/files input

* debounce attachment options and update requests on file change (avoiding race conditions when attaching files!)

* style: Apply prettier formatting

* removed malicious code

Signed-off-by: facundobozzi <[email protected]>

* PATCH method using withFormData

* better onBlur logic

* bug fixes

* blur logic fixed

* nit pick comments

* code rabbit suggestion

* replaced useEffect setting state with derived state and debouncing

* disabling amount input after request creation

* linting

---------

Signed-off-by: facundobozzi <[email protected]>

* fix: support page staging (#972)

* fix: update desktop navigation with add/withdraw paths

* fix: support page

* fix: ui comments (#973)

* Support and beta changes to staging (#978)

* refactor: fetch external wallet balances from mobula (#956)

* fix: update desktop navigation (#970)

* fix: support page prod (#971)

* fix: update desktop navigation

* fix: support page

* [TASK-12746] feat: beta changes (#975)

* feat: beta changes

- Banner that redirects to support page
- Funds warning modal

* refactor(banner): remove from landing and add hand thumbs up

---------

Co-authored-by: Kushagra Sarathe <[email protected]>

* [TASK-12312] Bugfix/ens error withdrawing (#976)

* ENS/eth address network error being displayed on the frontend

* linting

* fixed andre QA observations

* deleting console.log

* formatting

* logic fixed

* fixed testst

---------

Signed-off-by: facundobozzi <[email protected]>

* fix: coral small issues (#979)

* chore: enable usdt in mainnet (#980)

* fix: slider tap bug logic (#983)

* fix: slider tap bug logic

* fix: tap bug on slider

* fix: some issues and comments (#984)

* [TASK-12771] Feat/new landing page (#974)

* removed legacy button and changed try now button colors

* try now button color and hero description

* YourMoney component

* NoFees component first part

* stars done

* scribble in zero fees

* no hidden fees section done

* securityBuiltIn done

* sendInSeconds progress

* sendInSeconds done

* updated try now button to be a link

* business integration initiation

* businessIntegrate done

* order and marquee reusability

* order fixed

* background animations in Landing Page compoejnnts

* changed image for text in hero section

* figma details

* landing page responsiveness improvements

* landing page responsiveness done

* coderabbit suggestion

* business integration button

* fixed iphone screenshots

* CTA button animation

* added debugging for CTA button animation

* changed animation since react gave errors

* arrows in hero section

* NoFees new Zero

* no fees responsiveness fixed

* sendInSeconds details done

* coderabbit suggestions

* formatting

* hand-token wasnt pushed? forgot to stage or sum? anyways fixed

* build issues fixed

* coderabbit optimization

* code formatting

* arrows and ZERO thickness

* shade in try now button

* progress in button animation

* undoing button changes

* small detail fixes

* added asset

* changed peanut business to svg

* integrate peanut component done

* added pay-zero-fees.svg

* added new illustrations

* uout money anywhere svg

* securitybuiltin component SVGs

* adding YourMoney new SVGs

* your money anywhere component

* instantly send & receive svg

* arrows fixed

* button and arrows done

* desktop sendinseconds button done

* removed arrows disappearing effect

* MOBILE: hero button done

* added mobile svg

* yourMoney responsive component done

* added mobile-zero-fees.svg

* added no-hidden-fees.svg

* noFees mobile svg

* noFees desktop + mobile improvements

* noFees done

* mobile security built in SVG

* securityprivacy mobile done

* mobile-send-in-seconds.svg

* sendInSeconds mobile done

* business integrate mobile

* business integrate button and final details

* removed footer

* formatting

* removed pino-pretty

* fixed button instead of sticky/floating

---------

Signed-off-by: facundobozzi <[email protected]>

* [TASK-13136] feat: allow uppercase in url (#986)

* feat: allow uppercase in url

* fix: allow uppercase in recipient

* fix: inform create request type when creating from UI (#987)

* fix: balance warning modal (#988)

- Slider instead of button
- Expiry for local storage instead of session storage
- Warning icon color

* chore: remove unused file (#990)

* chore: re-add removed code for gas estimation

---------

Signed-off-by: facundobozzi <[email protected]>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: kushagrasarathe <[email protected]>
Co-authored-by: facundobozzi <[email protected]>

---------

Signed-off-by: facundobozzi <[email protected]>
Co-authored-by: Kushagra Sarathe <[email protected]>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: facundobozzi <[email protected]>
Zishan-7 pushed a commit that referenced this pull request Jul 25, 2025
* refactor: fetch external wallet balances from mobula (#956)

* fix: update desktop navigation (#970)

* fix: support page prod (#971)

* fix: update desktop navigation

* fix: support page

* [TASK-12746] feat: beta changes (#975)

* feat: beta changes

- Banner that redirects to support page
- Funds warning modal

* refactor(banner): remove from landing and add hand thumbs up

* [TASK-13082] Sprint 100 prod release  (#992)

* feat: abstract squid route fetching

Stop using the skd and use the squid API directly, this give us more
control and access to all the data that returns squid (for example,
we now have access to the fees and don't have to recalculate them
ourselves)

* refactor: use parseunits

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* refactor: remove console.dir

* feat: handle very large numbers with careful scaling

* refactor: use const for squid api url

* feat: add cross-chain action card

Use coral through squid to get the cross-chain route for the different
flows. This enables xchain withdraw for peanut wallet

* refactor: use decimals from token price instead of hardcoded

* style: Apply prettier formatting

* feat: show min received for cross-chain payments

* chore: clean unused variables

* fix: tests ach_pull to ach

* fix: pr comments

* fix: withdrawData and pulsate animation

* fix: cursor placement in token amount input

* fix: delete unused code

* fix: add camera perm modal

* fix: enable mexico bank offramp

* refactor: better comments for direct usd payments

* feat: add qr scanning for xchain

* fix: remove malicious code

* fix: handle mxn in offramp destination details (#945)

* fix: show share receipt option in direct send status view (#946)

* [TASK-12678] fix: coral withdraw fixes (#949)

* fix: coral withdraw fixes

- Stop refreshing the page after successful payment
- Better error message for unsupported token pairs

* chore: add squid env vars

* refactor: better copy for non rfq routes from peanut wallet

Also send warning to sentry

* fix: show amount in USD for withdrawals to other tokens to other tokens

* fix: lock orientation to portrait mode (#947)

* fix: lock orienatation to protrait mode

* style(fix): add new line

* style: format

* fix: if condition

* fix: update payment form for crosschain add money (#954)

* [TASK-12682] fix: show token selector for guest flow (#955)

* fix: show token selector for guest flow

* docs: add comment to explain url request flow

* implemented Context instead of sessionStorage in onrampData to avoid discrepancies with the Offramp logic (#953)

* refactor: fetch external wallet balances from mobula (#956) (#958)

* [TASK-12645] copy button for individual fields (#960)

* copy button for individual fields

* changed getOnrampCurrencyConfig (deprecated)to getCurrencyConfig + user now copies raw IBAN value

* fix: gas estimation for external wallets (#961)

We were re-rendering unnecesarily the prepare transaction, also now we
catch error if any

* [TASK-12603] reset send flow state when navigating to/from payment link creation (#964)

* reset send flow state when navigating to/from payment link creation

* linting (formatting)

* [TASK-12312] ENS/eth address network error being displayed on the frontend (#963)

* ENS/eth address network error being displayed on the frontend

* linting

* fix: centre align views on mobile (#950)

* [TASK-12542] added formatIban function for correct display (#952)

* added formatIban function for correct display

* coderabbit suggestion

Signed-off-by: facundobozzi <[email protected]>

* updated formatting

* added iban formatting in all pages

---------

Signed-off-by: facundobozzi <[email protected]>

* [TASK-12672] feat: show sponsored by peanut message (#959)

* feat: show sponsored by peanut message

This message is shown when we are making a transaction from the peanut
wallet. If the amount is more than one cent we also show the fee that
the user is saving by using peanut.

* fix(fees): show correct ammounts for externalwallet

* refactor: rename estimatedGasCostUsd to estimatedGasCostUsdUsd

* fix: correct approval owner and base rpc (#965)

Two things here:

1. We were using the peanut address for approval checking on deposits,
   this didn't affect because if the approval call failed we just
   continued with the deposit
2: The base rpc url was the sepolia one, not the mainnet. Big oversight
   there

* feat: add alachemy as fallback rpc url (#948)

* feat: add alachemy as fallback rpc url

* fix: remove commented line

* fix: address pr review comments

* [TASK-12866] fix: small fixes around crosschain ui (#966)

* fix: small fixes around crosschain ui

* fix: avoid negative expiry time

* removed white spaces before processing to BIC (#951)

* feat: resuable slider component (#968)

* fix: update desktop navigation with add/withdraw paths (#969)

* [TASK-11884] request via link with comment and attachment is creating 2 txs in the history (#943)

* PATCH implemented in frontend

* comment input state updating correctly (onBlur)

* freezing amount after updating comments/files input

* debounce attachment options and update requests on file change (avoiding race conditions when attaching files!)

* style: Apply prettier formatting

* removed malicious code

Signed-off-by: facundobozzi <[email protected]>

* PATCH method using withFormData

* better onBlur logic

* bug fixes

* blur logic fixed

* nit pick comments

* code rabbit suggestion

* replaced useEffect setting state with derived state and debouncing

* disabling amount input after request creation

* linting

---------

Signed-off-by: facundobozzi <[email protected]>

* fix: support page staging (#972)

* fix: update desktop navigation with add/withdraw paths

* fix: support page

* fix: ui comments (#973)

* Support and beta changes to staging (#978)

* refactor: fetch external wallet balances from mobula (#956)

* fix: update desktop navigation (#970)

* fix: support page prod (#971)

* fix: update desktop navigation

* fix: support page

* [TASK-12746] feat: beta changes (#975)

* feat: beta changes

- Banner that redirects to support page
- Funds warning modal

* refactor(banner): remove from landing and add hand thumbs up

---------

Co-authored-by: Kushagra Sarathe <[email protected]>

* [TASK-12312] Bugfix/ens error withdrawing (#976)

* ENS/eth address network error being displayed on the frontend

* linting

* fixed andre QA observations

* deleting console.log

* formatting

* logic fixed

* fixed testst

---------

Signed-off-by: facundobozzi <[email protected]>

* fix: coral small issues (#979)

* chore: enable usdt in mainnet (#980)

* fix: slider tap bug logic (#983)

* fix: slider tap bug logic

* fix: tap bug on slider

* fix: some issues and comments (#984)

* [TASK-12771] Feat/new landing page (#974)

* removed legacy button and changed try now button colors

* try now button color and hero description

* YourMoney component

* NoFees component first part

* stars done

* scribble in zero fees

* no hidden fees section done

* securityBuiltIn done

* sendInSeconds progress

* sendInSeconds done

* updated try now button to be a link

* business integration initiation

* businessIntegrate done

* order and marquee reusability

* order fixed

* background animations in Landing Page compoejnnts

* changed image for text in hero section

* figma details

* landing page responsiveness improvements

* landing page responsiveness done

* coderabbit suggestion

* business integration button

* fixed iphone screenshots

* CTA button animation

* added debugging for CTA button animation

* changed animation since react gave errors

* arrows in hero section

* NoFees new Zero

* no fees responsiveness fixed

* sendInSeconds details done

* coderabbit suggestions

* formatting

* hand-token wasnt pushed? forgot to stage or sum? anyways fixed

* build issues fixed

* coderabbit optimization

* code formatting

* arrows and ZERO thickness

* shade in try now button

* progress in button animation

* undoing button changes

* small detail fixes

* added asset

* changed peanut business to svg

* integrate peanut component done

* added pay-zero-fees.svg

* added new illustrations

* uout money anywhere svg

* securitybuiltin component SVGs

* adding YourMoney new SVGs

* your money anywhere component

* instantly send & receive svg

* arrows fixed

* button and arrows done

* desktop sendinseconds button done

* removed arrows disappearing effect

* MOBILE: hero button done

* added mobile svg

* yourMoney responsive component done

* added mobile-zero-fees.svg

* added no-hidden-fees.svg

* noFees mobile svg

* noFees desktop + mobile improvements

* noFees done

* mobile security built in SVG

* securityprivacy mobile done

* mobile-send-in-seconds.svg

* sendInSeconds mobile done

* business integrate mobile

* business integrate button and final details

* removed footer

* formatting

* removed pino-pretty

* fixed button instead of sticky/floating

---------

Signed-off-by: facundobozzi <[email protected]>

* [TASK-13136] feat: allow uppercase in url (#986)

* feat: allow uppercase in url

* fix: allow uppercase in recipient

* fix: inform create request type when creating from UI (#987)

* fix: balance warning modal (#988)

- Slider instead of button
- Expiry for local storage instead of session storage
- Warning icon color

* chore: remove unused file (#990)

* chore: re-add removed code for gas estimation

---------

Signed-off-by: facundobozzi <[email protected]>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: kushagrasarathe <[email protected]>
Co-authored-by: facundobozzi <[email protected]>

---------

Signed-off-by: facundobozzi <[email protected]>
Co-authored-by: Kushagra Sarathe <[email protected]>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: facundobozzi <[email protected]>
Hugo0 added a commit that referenced this pull request Jul 30, 2025
* feat: abstract squid route fetching

Stop using the skd and use the squid API directly, this give us more
control and access to all the data that returns squid (for example,
we now have access to the fees and don't have to recalculate them
ourselves)

* refactor: use parseunits

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* refactor: remove console.dir

* feat: handle very large numbers with careful scaling

* refactor: use const for squid api url

* feat: add cross-chain action card

Use coral through squid to get the cross-chain route for the different
flows. This enables xchain withdraw for peanut wallet

* refactor: use decimals from token price instead of hardcoded

* style: Apply prettier formatting

* feat: show min received for cross-chain payments

* chore: clean unused variables

* fix: tests ach_pull to ach

* fix: pr comments

* fix: withdrawData and pulsate animation

* fix: cursor placement in token amount input

* fix: delete unused code

* fix: add camera perm modal

* fix: enable mexico bank offramp

* refactor: better comments for direct usd payments

* feat: add qr scanning for xchain

* fix: remove malicious code

* fix: handle mxn in offramp destination details (#945)

* fix: show share receipt option in direct send status view (#946)

* [TASK-12678] fix: coral withdraw fixes (#949)

* fix: coral withdraw fixes

- Stop refreshing the page after successful payment
- Better error message for unsupported token pairs

* chore: add squid env vars

* refactor: better copy for non rfq routes from peanut wallet

Also send warning to sentry

* fix: show amount in USD for withdrawals to other tokens to other tokens

* fix: lock orientation to portrait mode (#947)

* fix: lock orienatation to protrait mode

* style(fix): add new line

* style: format

* fix: if condition

* fix: update payment form for crosschain add money (#954)

* [TASK-12682] fix: show token selector for guest flow (#955)

* fix: show token selector for guest flow

* docs: add comment to explain url request flow

* implemented Context instead of sessionStorage in onrampData to avoid discrepancies with the Offramp logic (#953)

* refactor: fetch external wallet balances from mobula (#956) (#958)

* [TASK-12645] copy button for individual fields (#960)

* copy button for individual fields

* changed getOnrampCurrencyConfig (deprecated)to getCurrencyConfig + user now copies raw IBAN value

* fix: gas estimation for external wallets (#961)

We were re-rendering unnecesarily the prepare transaction, also now we
catch error if any

* [TASK-12603] reset send flow state when navigating to/from payment link creation (#964)

* reset send flow state when navigating to/from payment link creation

* linting (formatting)

* [TASK-12312] ENS/eth address network error being displayed on the frontend (#963)

* ENS/eth address network error being displayed on the frontend

* linting

* fix: centre align views on mobile (#950)

* [TASK-12542] added formatIban function for correct display (#952)

* added formatIban function for correct display

* coderabbit suggestion

Signed-off-by: facundobozzi <[email protected]>

* updated formatting

* added iban formatting in all pages

---------

Signed-off-by: facundobozzi <[email protected]>

* [TASK-12672] feat: show sponsored by peanut message (#959)

* feat: show sponsored by peanut message

This message is shown when we are making a transaction from the peanut
wallet. If the amount is more than one cent we also show the fee that
the user is saving by using peanut.

* fix(fees): show correct ammounts for externalwallet

* refactor: rename estimatedGasCostUsd to estimatedGasCostUsdUsd

* fix: correct approval owner and base rpc (#965)

Two things here:

1. We were using the peanut address for approval checking on deposits,
   this didn't affect because if the approval call failed we just
   continued with the deposit
2: The base rpc url was the sepolia one, not the mainnet. Big oversight
   there

* feat: add alachemy as fallback rpc url (#948)

* feat: add alachemy as fallback rpc url

* fix: remove commented line

* fix: address pr review comments

* [TASK-12866] fix: small fixes around crosschain ui (#966)

* fix: small fixes around crosschain ui

* fix: avoid negative expiry time

* removed white spaces before processing to BIC (#951)

* feat: resuable slider component (#968)

* fix: update desktop navigation with add/withdraw paths (#969)

* [TASK-11884] request via link with comment and attachment is creating 2 txs in the history (#943)

* PATCH implemented in frontend

* comment input state updating correctly (onBlur)

* freezing amount after updating comments/files input

* debounce attachment options and update requests on file change (avoiding race conditions when attaching files!)

* style: Apply prettier formatting

* removed malicious code

Signed-off-by: facundobozzi <[email protected]>

* PATCH method using withFormData

* better onBlur logic

* bug fixes

* blur logic fixed

* nit pick comments

* code rabbit suggestion

* replaced useEffect setting state with derived state and debouncing

* disabling amount input after request creation

* linting

---------

Signed-off-by: facundobozzi <[email protected]>

* fix: support page staging (#972)

* fix: update desktop navigation with add/withdraw paths

* fix: support page

* fix: ui comments (#973)

* Support and beta changes to staging (#978)

* refactor: fetch external wallet balances from mobula (#956)

* fix: update desktop navigation (#970)

* fix: support page prod (#971)

* fix: update desktop navigation

* fix: support page

* [TASK-12746] feat: beta changes (#975)

* feat: beta changes

- Banner that redirects to support page
- Funds warning modal

* refactor(banner): remove from landing and add hand thumbs up

---------

Co-authored-by: Kushagra Sarathe <[email protected]>

* [TASK-12312] Bugfix/ens error withdrawing (#976)

* ENS/eth address network error being displayed on the frontend

* linting

* fixed andre QA observations

* deleting console.log

* formatting

* logic fixed

* fixed testst

---------

Signed-off-by: facundobozzi <[email protected]>

* fix: coral small issues (#979)

* chore: enable usdt in mainnet (#980)

* fix: slider tap bug logic (#983)

* fix: slider tap bug logic

* fix: tap bug on slider

* fix: some issues and comments (#984)

* [TASK-12771] Feat/new landing page (#974)

* removed legacy button and changed try now button colors

* try now button color and hero description

* YourMoney component

* NoFees component first part

* stars done

* scribble in zero fees

* no hidden fees section done

* securityBuiltIn done

* sendInSeconds progress

* sendInSeconds done

* updated try now button to be a link

* business integration initiation

* businessIntegrate done

* order and marquee reusability

* order fixed

* background animations in Landing Page compoejnnts

* changed image for text in hero section

* figma details

* landing page responsiveness improvements

* landing page responsiveness done

* coderabbit suggestion

* business integration button

* fixed iphone screenshots

* CTA button animation

* added debugging for CTA button animation

* changed animation since react gave errors

* arrows in hero section

* NoFees new Zero

* no fees responsiveness fixed

* sendInSeconds details done

* coderabbit suggestions

* formatting

* hand-token wasnt pushed? forgot to stage or sum? anyways fixed

* build issues fixed

* coderabbit optimization

* code formatting

* arrows and ZERO thickness

* shade in try now button

* progress in button animation

* undoing button changes

* small detail fixes

* added asset

* changed peanut business to svg

* integrate peanut component done

* added pay-zero-fees.svg

* added new illustrations

* uout money anywhere svg

* securitybuiltin component SVGs

* adding YourMoney new SVGs

* your money anywhere component

* instantly send & receive svg

* arrows fixed

* button and arrows done

* desktop sendinseconds button done

* removed arrows disappearing effect

* MOBILE: hero button done

* added mobile svg

* yourMoney responsive component done

* added mobile-zero-fees.svg

* added no-hidden-fees.svg

* noFees mobile svg

* noFees desktop + mobile improvements

* noFees done

* mobile security built in SVG

* securityprivacy mobile done

* mobile-send-in-seconds.svg

* sendInSeconds mobile done

* business integrate mobile

* business integrate button and final details

* removed footer

* formatting

* removed pino-pretty

* fixed button instead of sticky/floating

---------

Signed-off-by: facundobozzi <[email protected]>

* [TASK-13136] feat: allow uppercase in url (#986)

* feat: allow uppercase in url

* fix: allow uppercase in recipient

* fix: inform create request type when creating from UI (#987)

* fix: balance warning modal (#988)

- Slider instead of button
- Expiry for local storage instead of session storage
- Warning icon color

* chore: remove unused file (#990)

* feat: send links guest flow ( exchange/crypto) (#982)

* feat: update add/withdraw flow to use new slider component

* feat: guest receive to exchange/crypto flows

* fix: coderabbit comments

* fix: slider usage

* Chore/prod to staging (#994)

* refactor: fetch external wallet balances from mobula (#956)

* fix: update desktop navigation (#970)

* fix: support page prod (#971)

* fix: update desktop navigation

* fix: support page

* [TASK-12746] feat: beta changes (#975)

* feat: beta changes

- Banner that redirects to support page
- Funds warning modal

* refactor(banner): remove from landing and add hand thumbs up

* [TASK-13082] Sprint 100 prod release  (#992)

* feat: abstract squid route fetching

Stop using the skd and use the squid API directly, this give us more
control and access to all the data that returns squid (for example,
we now have access to the fees and don't have to recalculate them
ourselves)

* refactor: use parseunits

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* refactor: remove console.dir

* feat: handle very large numbers with careful scaling

* refactor: use const for squid api url

* feat: add cross-chain action card

Use coral through squid to get the cross-chain route for the different
flows. This enables xchain withdraw for peanut wallet

* refactor: use decimals from token price instead of hardcoded

* style: Apply prettier formatting

* feat: show min received for cross-chain payments

* chore: clean unused variables

* fix: tests ach_pull to ach

* fix: pr comments

* fix: withdrawData and pulsate animation

* fix: cursor placement in token amount input

* fix: delete unused code

* fix: add camera perm modal

* fix: enable mexico bank offramp

* refactor: better comments for direct usd payments

* feat: add qr scanning for xchain

* fix: remove malicious code

* fix: handle mxn in offramp destination details (#945)

* fix: show share receipt option in direct send status view (#946)

* [TASK-12678] fix: coral withdraw fixes (#949)

* fix: coral withdraw fixes

- Stop refreshing the page after successful payment
- Better error message for unsupported token pairs

* chore: add squid env vars

* refactor: better copy for non rfq routes from peanut wallet

Also send warning to sentry

* fix: show amount in USD for withdrawals to other tokens to other tokens

* fix: lock orientation to portrait mode (#947)

* fix: lock orienatation to protrait mode

* style(fix): add new line

* style: format

* fix: if condition

* fix: update payment form for crosschain add money (#954)

* [TASK-12682] fix: show token selector for guest flow (#955)

* fix: show token selector for guest flow

* docs: add comment to explain url request flow

* implemented Context instead of sessionStorage in onrampData to avoid discrepancies with the Offramp logic (#953)

* refactor: fetch external wallet balances from mobula (#956) (#958)

* [TASK-12645] copy button for individual fields (#960)

* copy button for individual fields

* changed getOnrampCurrencyConfig (deprecated)to getCurrencyConfig + user now copies raw IBAN value

* fix: gas estimation for external wallets (#961)

We were re-rendering unnecesarily the prepare transaction, also now we
catch error if any

* [TASK-12603] reset send flow state when navigating to/from payment link creation (#964)

* reset send flow state when navigating to/from payment link creation

* linting (formatting)

* [TASK-12312] ENS/eth address network error being displayed on the frontend (#963)

* ENS/eth address network error being displayed on the frontend

* linting

* fix: centre align views on mobile (#950)

* [TASK-12542] added formatIban function for correct display (#952)

* added formatIban function for correct display

* coderabbit suggestion

Signed-off-by: facundobozzi <[email protected]>

* updated formatting

* added iban formatting in all pages

---------

Signed-off-by: facundobozzi <[email protected]>

* [TASK-12672] feat: show sponsored by peanut message (#959)

* feat: show sponsored by peanut message

This message is shown when we are making a transaction from the peanut
wallet. If the amount is more than one cent we also show the fee that
the user is saving by using peanut.

* fix(fees): show correct ammounts for externalwallet

* refactor: rename estimatedGasCostUsd to estimatedGasCostUsdUsd

* fix: correct approval owner and base rpc (#965)

Two things here:

1. We were using the peanut address for approval checking on deposits,
   this didn't affect because if the approval call failed we just
   continued with the deposit
2: The base rpc url was the sepolia one, not the mainnet. Big oversight
   there

* feat: add alachemy as fallback rpc url (#948)

* feat: add alachemy as fallback rpc url

* fix: remove commented line

* fix: address pr review comments

* [TASK-12866] fix: small fixes around crosschain ui (#966)

* fix: small fixes around crosschain ui

* fix: avoid negative expiry time

* removed white spaces before processing to BIC (#951)

* feat: resuable slider component (#968)

* fix: update desktop navigation with add/withdraw paths (#969)

* [TASK-11884] request via link with comment and attachment is creating 2 txs in the history (#943)

* PATCH implemented in frontend

* comment input state updating correctly (onBlur)

* freezing amount after updating comments/files input

* debounce attachment options and update requests on file change (avoiding race conditions when attaching files!)

* style: Apply prettier formatting

* removed malicious code

Signed-off-by: facundobozzi <[email protected]>

* PATCH method using withFormData

* better onBlur logic

* bug fixes

* blur logic fixed

* nit pick comments

* code rabbit suggestion

* replaced useEffect setting state with derived state and debouncing

* disabling amount input after request creation

* linting

---------

Signed-off-by: facundobozzi <[email protected]>

* fix: support page staging (#972)

* fix: update desktop navigation with add/withdraw paths

* fix: support page

* fix: ui comments (#973)

* Support and beta changes to staging (#978)

* refactor: fetch external wallet balances from mobula (#956)

* fix: update desktop navigation (#970)

* fix: support page prod (#971)

* fix: update desktop navigation

* fix: support page

* [TASK-12746] feat: beta changes (#975)

* feat: beta changes

- Banner that redirects to support page
- Funds warning modal

* refactor(banner): remove from landing and add hand thumbs up

---------

Co-authored-by: Kushagra Sarathe <[email protected]>

* [TASK-12312] Bugfix/ens error withdrawing (#976)

* ENS/eth address network error being displayed on the frontend

* linting

* fixed andre QA observations

* deleting console.log

* formatting

* logic fixed

* fixed testst

---------

Signed-off-by: facundobozzi <[email protected]>

* fix: coral small issues (#979)

* chore: enable usdt in mainnet (#980)

* fix: slider tap bug logic (#983)

* fix: slider tap bug logic

* fix: tap bug on slider

* fix: some issues and comments (#984)

* [TASK-12771] Feat/new landing page (#974)

* removed legacy button and changed try now button colors

* try now button color and hero description

* YourMoney component

* NoFees component first part

* stars done

* scribble in zero fees

* no hidden fees section done

* securityBuiltIn done

* sendInSeconds progress

* sendInSeconds done

* updated try now button to be a link

* business integration initiation

* businessIntegrate done

* order and marquee reusability

* order fixed

* background animations in Landing Page compoejnnts

* changed image for text in hero section

* figma details

* landing page responsiveness improvements

* landing page responsiveness done

* coderabbit suggestion

* business integration button

* fixed iphone screenshots

* CTA button animation

* added debugging for CTA button animation

* changed animation since react gave errors

* arrows in hero section

* NoFees new Zero

* no fees responsiveness fixed

* sendInSeconds details done

* coderabbit suggestions

* formatting

* hand-token wasnt pushed? forgot to stage or sum? anyways fixed

* build issues fixed

* coderabbit optimization

* code formatting

* arrows and ZERO thickness

* shade in try now button

* progress in button animation

* undoing button changes

* small detail fixes

* added asset

* changed peanut business to svg

* integrate peanut component done

* added pay-zero-fees.svg

* added new illustrations

* uout money anywhere svg

* securitybuiltin component SVGs

* adding YourMoney new SVGs

* your money anywhere component

* instantly send & receive svg

* arrows fixed

* button and arrows done

* desktop sendinseconds button done

* removed arrows disappearing effect

* MOBILE: hero button done

* added mobile svg

* yourMoney responsive component done

* added mobile-zero-fees.svg

* added no-hidden-fees.svg

* noFees mobile svg

* noFees desktop + mobile improvements

* noFees done

* mobile security built in SVG

* securityprivacy mobile done

* mobile-send-in-seconds.svg

* sendInSeconds mobile done

* business integrate mobile

* business integrate button and final details

* removed footer

* formatting

* removed pino-pretty

* fixed button instead of sticky/floating

---------

Signed-off-by: facundobozzi <[email protected]>

* [TASK-13136] feat: allow uppercase in url (#986)

* feat: allow uppercase in url

* fix: allow uppercase in recipient

* fix: inform create request type when creating from UI (#987)

* fix: balance warning modal (#988)

- Slider instead of button
- Expiry for local storage instead of session storage
- Warning icon color

* chore: remove unused file (#990)

* chore: re-add removed code for gas estimation

---------

Signed-off-by: facundobozzi <[email protected]>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: kushagrasarathe <[email protected]>
Co-authored-by: facundobozzi <[email protected]>

---------

Signed-off-by: facundobozzi <[email protected]>
Co-authored-by: Kushagra Sarathe <[email protected]>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: facundobozzi <[email protected]>

* refactor(payments): add payerAddress to payment creation (#1002)

* feat: claim a send link to bank flow  (#995)

* feat: update add/withdraw flow to use new slider component

* feat: guest receive to exchange/crypto flows

* fix: coderabbit comments

* fix: slider usage

* feat: new server actions for guest flow

* feat: update card and success view component for bank claims

* feat: claim to bank flow components

* fix: coderbbit comments

* fix: import

* feat: handle bank link claims for when sender is non-kyced (#996)

* feat: handle bank link claims for when sender is non-kyced

* fix: kyc status check for sender

* fix: codderabbit comments

* fix: update route payloads based on be changes

* fix: merge conflict

* feat: ui updates to bank flow

* fix: rename comp name

* fix: wrap fn in callback

* feat: min ammount modal for send link claims

* [TASK-12649] fix: allow user to change their email address if they have not completed kyc (#999)

* fix: allow user to change their email address if they have not completed kyc

* fix: account incorrect field

* Feat: Landing page changes (#1006)

* fix: links v2 send flow qa fixes (#1008)

* fix: add reuseOnError key for guest external accounts creation

* fix: success view for guest claim to bank account flow

* fix: infinite loop of post signup flow using claim link

* fix: back btn navigation

* fix: show confirm view for xchain claims

* fix: links v2 qa bug fixes (#1014)

* feat: add slider in withdraw crypto flow

* fix: cross chain claiming

* fix: claim modal on homepage

* fix: coral issue on staging (#1018)

* fix: coral issue on staging

* fix: squid api url const

* Make txn history private (#1017)

* chore: update mobula endpoint (#1020)

* chore: update mobula endpoint

* Update tokens.ts

Signed-off-by: Hugo Montenegro <[email protected]>

---------

Signed-off-by: Hugo Montenegro <[email protected]>
Co-authored-by: Hugo Montenegro <[email protected]>

* fix: minor bugs before prod-release (#1025)

* fix: add money ui issue for same chain external wallet txn

* fix: amount in withdraw to crypto sucess view

* fix: reset states on flows (#1026)

* fix: add money ui issue for same chain external wallet txn

* fix: amount in withdraw to crypto sucess view

* fix; reset states

* merge: peanut-wallet in peanut-wallet-dev

* fix: remove dupe title

* merge: peanut-wallet in peanut-wallet-dev (#1032)

* merge: peanut-wallet in peanut-wallet-dev

* fix: remove dupe title

* Fix KYC issues (#1029)

* fix: TOS acceptance taking too much time

* remove log

* Fix: add money button position (#1031)

* fix: Wrong flag shown in add monet flow for some countries (#1027)

* fix(kernel-client): catch kernel client errors (#1036)

---------

Signed-off-by: facundobozzi <[email protected]>
Signed-off-by: Hugo Montenegro <[email protected]>
Co-authored-by: Juan José Ramírez <[email protected]>
Co-authored-by: Juan José Ramírez <[email protected]>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: kushagrasarathe <[email protected]>
Co-authored-by: facundobozzi <[email protected]>
Co-authored-by: Mohd Zishan <[email protected]>
Hugo0 added a commit that referenced this pull request Aug 1, 2025
* feat: abstract squid route fetching

Stop using the skd and use the squid API directly, this give us more
control and access to all the data that returns squid (for example,
we now have access to the fees and don't have to recalculate them
ourselves)

* refactor: use parseunits

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* refactor: remove console.dir

* feat: handle very large numbers with careful scaling

* refactor: use const for squid api url

* feat: add cross-chain action card

Use coral through squid to get the cross-chain route for the different
flows. This enables xchain withdraw for peanut wallet

* refactor: use decimals from token price instead of hardcoded

* style: Apply prettier formatting

* feat: show min received for cross-chain payments

* chore: clean unused variables

* fix: tests ach_pull to ach

* fix: pr comments

* fix: withdrawData and pulsate animation

* fix: cursor placement in token amount input

* fix: delete unused code

* fix: add camera perm modal

* fix: enable mexico bank offramp

* refactor: better comments for direct usd payments

* feat: add qr scanning for xchain

* fix: remove malicious code

* fix: handle mxn in offramp destination details (#945)

* fix: show share receipt option in direct send status view (#946)

* [TASK-12678] fix: coral withdraw fixes (#949)

* fix: coral withdraw fixes

- Stop refreshing the page after successful payment
- Better error message for unsupported token pairs

* chore: add squid env vars

* refactor: better copy for non rfq routes from peanut wallet

Also send warning to sentry

* fix: show amount in USD for withdrawals to other tokens to other tokens

* fix: lock orientation to portrait mode (#947)

* fix: lock orienatation to protrait mode

* style(fix): add new line

* style: format

* fix: if condition

* fix: update payment form for crosschain add money (#954)

* [TASK-12682] fix: show token selector for guest flow (#955)

* fix: show token selector for guest flow

* docs: add comment to explain url request flow

* implemented Context instead of sessionStorage in onrampData to avoid discrepancies with the Offramp logic (#953)

* refactor: fetch external wallet balances from mobula (#956) (#958)

* [TASK-12645] copy button for individual fields (#960)

* copy button for individual fields

* changed getOnrampCurrencyConfig (deprecated)to getCurrencyConfig + user now copies raw IBAN value

* fix: gas estimation for external wallets (#961)

We were re-rendering unnecesarily the prepare transaction, also now we
catch error if any

* [TASK-12603] reset send flow state when navigating to/from payment link creation (#964)

* reset send flow state when navigating to/from payment link creation

* linting (formatting)

* [TASK-12312] ENS/eth address network error being displayed on the frontend (#963)

* ENS/eth address network error being displayed on the frontend

* linting

* fix: centre align views on mobile (#950)

* [TASK-12542] added formatIban function for correct display (#952)

* added formatIban function for correct display

* coderabbit suggestion

Signed-off-by: facundobozzi <[email protected]>

* updated formatting

* added iban formatting in all pages

---------

Signed-off-by: facundobozzi <[email protected]>

* [TASK-12672] feat: show sponsored by peanut message (#959)

* feat: show sponsored by peanut message

This message is shown when we are making a transaction from the peanut
wallet. If the amount is more than one cent we also show the fee that
the user is saving by using peanut.

* fix(fees): show correct ammounts for externalwallet

* refactor: rename estimatedGasCostUsd to estimatedGasCostUsdUsd

* fix: correct approval owner and base rpc (#965)

Two things here:

1. We were using the peanut address for approval checking on deposits,
   this didn't affect because if the approval call failed we just
   continued with the deposit
2: The base rpc url was the sepolia one, not the mainnet. Big oversight
   there

* feat: add alachemy as fallback rpc url (#948)

* feat: add alachemy as fallback rpc url

* fix: remove commented line

* fix: address pr review comments

* [TASK-12866] fix: small fixes around crosschain ui (#966)

* fix: small fixes around crosschain ui

* fix: avoid negative expiry time

* removed white spaces before processing to BIC (#951)

* feat: resuable slider component (#968)

* fix: update desktop navigation with add/withdraw paths (#969)

* [TASK-11884] request via link with comment and attachment is creating 2 txs in the history (#943)

* PATCH implemented in frontend

* comment input state updating correctly (onBlur)

* freezing amount after updating comments/files input

* debounce attachment options and update requests on file change (avoiding race conditions when attaching files!)

* style: Apply prettier formatting

* removed malicious code

Signed-off-by: facundobozzi <[email protected]>

* PATCH method using withFormData

* better onBlur logic

* bug fixes

* blur logic fixed

* nit pick comments

* code rabbit suggestion

* replaced useEffect setting state with derived state and debouncing

* disabling amount input after request creation

* linting

---------

Signed-off-by: facundobozzi <[email protected]>

* fix: support page staging (#972)

* fix: update desktop navigation with add/withdraw paths

* fix: support page

* fix: ui comments (#973)

* Support and beta changes to staging (#978)

* refactor: fetch external wallet balances from mobula (#956)

* fix: update desktop navigation (#970)

* fix: support page prod (#971)

* fix: update desktop navigation

* fix: support page

* [TASK-12746] feat: beta changes (#975)

* feat: beta changes

- Banner that redirects to support page
- Funds warning modal

* refactor(banner): remove from landing and add hand thumbs up

---------

Co-authored-by: Kushagra Sarathe <[email protected]>

* [TASK-12312] Bugfix/ens error withdrawing (#976)

* ENS/eth address network error being displayed on the frontend

* linting

* fixed andre QA observations

* deleting console.log

* formatting

* logic fixed

* fixed testst

---------

Signed-off-by: facundobozzi <[email protected]>

* fix: coral small issues (#979)

* chore: enable usdt in mainnet (#980)

* fix: slider tap bug logic (#983)

* fix: slider tap bug logic

* fix: tap bug on slider

* fix: some issues and comments (#984)

* [TASK-12771] Feat/new landing page (#974)

* removed legacy button and changed try now button colors

* try now button color and hero description

* YourMoney component

* NoFees component first part

* stars done

* scribble in zero fees

* no hidden fees section done

* securityBuiltIn done

* sendInSeconds progress

* sendInSeconds done

* updated try now button to be a link

* business integration initiation

* businessIntegrate done

* order and marquee reusability

* order fixed

* background animations in Landing Page compoejnnts

* changed image for text in hero section

* figma details

* landing page responsiveness improvements

* landing page responsiveness done

* coderabbit suggestion

* business integration button

* fixed iphone screenshots

* CTA button animation

* added debugging for CTA button animation

* changed animation since react gave errors

* arrows in hero section

* NoFees new Zero

* no fees responsiveness fixed

* sendInSeconds details done

* coderabbit suggestions

* formatting

* hand-token wasnt pushed? forgot to stage or sum? anyways fixed

* build issues fixed

* coderabbit optimization

* code formatting

* arrows and ZERO thickness

* shade in try now button

* progress in button animation

* undoing button changes

* small detail fixes

* added asset

* changed peanut business to svg

* integrate peanut component done

* added pay-zero-fees.svg

* added new illustrations

* uout money anywhere svg

* securitybuiltin component SVGs

* adding YourMoney new SVGs

* your money anywhere component

* instantly send & receive svg

* arrows fixed

* button and arrows done

* desktop sendinseconds button done

* removed arrows disappearing effect

* MOBILE: hero button done

* added mobile svg

* yourMoney responsive component done

* added mobile-zero-fees.svg

* added no-hidden-fees.svg

* noFees mobile svg

* noFees desktop + mobile improvements

* noFees done

* mobile security built in SVG

* securityprivacy mobile done

* mobile-send-in-seconds.svg

* sendInSeconds mobile done

* business integrate mobile

* business integrate button and final details

* removed footer

* formatting

* removed pino-pretty

* fixed button instead of sticky/floating

---------

Signed-off-by: facundobozzi <[email protected]>

* [TASK-13136] feat: allow uppercase in url (#986)

* feat: allow uppercase in url

* fix: allow uppercase in recipient

* fix: inform create request type when creating from UI (#987)

* fix: balance warning modal (#988)

- Slider instead of button
- Expiry for local storage instead of session storage
- Warning icon color

* chore: remove unused file (#990)

* feat: send links guest flow ( exchange/crypto) (#982)

* feat: update add/withdraw flow to use new slider component

* feat: guest receive to exchange/crypto flows

* fix: coderabbit comments

* fix: slider usage

* Chore/prod to staging (#994)

* refactor: fetch external wallet balances from mobula (#956)

* fix: update desktop navigation (#970)

* fix: support page prod (#971)

* fix: update desktop navigation

* fix: support page

* [TASK-12746] feat: beta changes (#975)

* feat: beta changes

- Banner that redirects to support page
- Funds warning modal

* refactor(banner): remove from landing and add hand thumbs up

* [TASK-13082] Sprint 100 prod release  (#992)

* feat: abstract squid route fetching

Stop using the skd and use the squid API directly, this give us more
control and access to all the data that returns squid (for example,
we now have access to the fees and don't have to recalculate them
ourselves)

* refactor: use parseunits

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* refactor: remove console.dir

* feat: handle very large numbers with careful scaling

* refactor: use const for squid api url

* feat: add cross-chain action card

Use coral through squid to get the cross-chain route for the different
flows. This enables xchain withdraw for peanut wallet

* refactor: use decimals from token price instead of hardcoded

* style: Apply prettier formatting

* feat: show min received for cross-chain payments

* chore: clean unused variables

* fix: tests ach_pull to ach

* fix: pr comments

* fix: withdrawData and pulsate animation

* fix: cursor placement in token amount input

* fix: delete unused code

* fix: add camera perm modal

* fix: enable mexico bank offramp

* refactor: better comments for direct usd payments

* feat: add qr scanning for xchain

* fix: remove malicious code

* fix: handle mxn in offramp destination details (#945)

* fix: show share receipt option in direct send status view (#946)

* [TASK-12678] fix: coral withdraw fixes (#949)

* fix: coral withdraw fixes

- Stop refreshing the page after successful payment
- Better error message for unsupported token pairs

* chore: add squid env vars

* refactor: better copy for non rfq routes from peanut wallet

Also send warning to sentry

* fix: show amount in USD for withdrawals to other tokens to other tokens

* fix: lock orientation to portrait mode (#947)

* fix: lock orienatation to protrait mode

* style(fix): add new line

* style: format

* fix: if condition

* fix: update payment form for crosschain add money (#954)

* [TASK-12682] fix: show token selector for guest flow (#955)

* fix: show token selector for guest flow

* docs: add comment to explain url request flow

* implemented Context instead of sessionStorage in onrampData to avoid discrepancies with the Offramp logic (#953)

* refactor: fetch external wallet balances from mobula (#956) (#958)

* [TASK-12645] copy button for individual fields (#960)

* copy button for individual fields

* changed getOnrampCurrencyConfig (deprecated)to getCurrencyConfig + user now copies raw IBAN value

* fix: gas estimation for external wallets (#961)

We were re-rendering unnecesarily the prepare transaction, also now we
catch error if any

* [TASK-12603] reset send flow state when navigating to/from payment link creation (#964)

* reset send flow state when navigating to/from payment link creation

* linting (formatting)

* [TASK-12312] ENS/eth address network error being displayed on the frontend (#963)

* ENS/eth address network error being displayed on the frontend

* linting

* fix: centre align views on mobile (#950)

* [TASK-12542] added formatIban function for correct display (#952)

* added formatIban function for correct display

* coderabbit suggestion

Signed-off-by: facundobozzi <[email protected]>

* updated formatting

* added iban formatting in all pages

---------

Signed-off-by: facundobozzi <[email protected]>

* [TASK-12672] feat: show sponsored by peanut message (#959)

* feat: show sponsored by peanut message

This message is shown when we are making a transaction from the peanut
wallet. If the amount is more than one cent we also show the fee that
the user is saving by using peanut.

* fix(fees): show correct ammounts for externalwallet

* refactor: rename estimatedGasCostUsd to estimatedGasCostUsdUsd

* fix: correct approval owner and base rpc (#965)

Two things here:

1. We were using the peanut address for approval checking on deposits,
   this didn't affect because if the approval call failed we just
   continued with the deposit
2: The base rpc url was the sepolia one, not the mainnet. Big oversight
   there

* feat: add alachemy as fallback rpc url (#948)

* feat: add alachemy as fallback rpc url

* fix: remove commented line

* fix: address pr review comments

* [TASK-12866] fix: small fixes around crosschain ui (#966)

* fix: small fixes around crosschain ui

* fix: avoid negative expiry time

* removed white spaces before processing to BIC (#951)

* feat: resuable slider component (#968)

* fix: update desktop navigation with add/withdraw paths (#969)

* [TASK-11884] request via link with comment and attachment is creating 2 txs in the history (#943)

* PATCH implemented in frontend

* comment input state updating correctly (onBlur)

* freezing amount after updating comments/files input

* debounce attachment options and update requests on file change (avoiding race conditions when attaching files!)

* style: Apply prettier formatting

* removed malicious code

Signed-off-by: facundobozzi <[email protected]>

* PATCH method using withFormData

* better onBlur logic

* bug fixes

* blur logic fixed

* nit pick comments

* code rabbit suggestion

* replaced useEffect setting state with derived state and debouncing

* disabling amount input after request creation

* linting

---------

Signed-off-by: facundobozzi <[email protected]>

* fix: support page staging (#972)

* fix: update desktop navigation with add/withdraw paths

* fix: support page

* fix: ui comments (#973)

* Support and beta changes to staging (#978)

* refactor: fetch external wallet balances from mobula (#956)

* fix: update desktop navigation (#970)

* fix: support page prod (#971)

* fix: update desktop navigation

* fix: support page

* [TASK-12746] feat: beta changes (#975)

* feat: beta changes

- Banner that redirects to support page
- Funds warning modal

* refactor(banner): remove from landing and add hand thumbs up

---------

Co-authored-by: Kushagra Sarathe <[email protected]>

* [TASK-12312] Bugfix/ens error withdrawing (#976)

* ENS/eth address network error being displayed on the frontend

* linting

* fixed andre QA observations

* deleting console.log

* formatting

* logic fixed

* fixed testst

---------

Signed-off-by: facundobozzi <[email protected]>

* fix: coral small issues (#979)

* chore: enable usdt in mainnet (#980)

* fix: slider tap bug logic (#983)

* fix: slider tap bug logic

* fix: tap bug on slider

* fix: some issues and comments (#984)

* [TASK-12771] Feat/new landing page (#974)

* removed legacy button and changed try now button colors

* try now button color and hero description

* YourMoney component

* NoFees component first part

* stars done

* scribble in zero fees

* no hidden fees section done

* securityBuiltIn done

* sendInSeconds progress

* sendInSeconds done

* updated try now button to be a link

* business integration initiation

* businessIntegrate done

* order and marquee reusability

* order fixed

* background animations in Landing Page compoejnnts

* changed image for text in hero section

* figma details

* landing page responsiveness improvements

* landing page responsiveness done

* coderabbit suggestion

* business integration button

* fixed iphone screenshots

* CTA button animation

* added debugging for CTA button animation

* changed animation since react gave errors

* arrows in hero section

* NoFees new Zero

* no fees responsiveness fixed

* sendInSeconds details done

* coderabbit suggestions

* formatting

* hand-token wasnt pushed? forgot to stage or sum? anyways fixed

* build issues fixed

* coderabbit optimization

* code formatting

* arrows and ZERO thickness

* shade in try now button

* progress in button animation

* undoing button changes

* small detail fixes

* added asset

* changed peanut business to svg

* integrate peanut component done

* added pay-zero-fees.svg

* added new illustrations

* uout money anywhere svg

* securitybuiltin component SVGs

* adding YourMoney new SVGs

* your money anywhere component

* instantly send & receive svg

* arrows fixed

* button and arrows done

* desktop sendinseconds button done

* removed arrows disappearing effect

* MOBILE: hero button done

* added mobile svg

* yourMoney responsive component done

* added mobile-zero-fees.svg

* added no-hidden-fees.svg

* noFees mobile svg

* noFees desktop + mobile improvements

* noFees done

* mobile security built in SVG

* securityprivacy mobile done

* mobile-send-in-seconds.svg

* sendInSeconds mobile done

* business integrate mobile

* business integrate button and final details

* removed footer

* formatting

* removed pino-pretty

* fixed button instead of sticky/floating

---------

Signed-off-by: facundobozzi <[email protected]>

* [TASK-13136] feat: allow uppercase in url (#986)

* feat: allow uppercase in url

* fix: allow uppercase in recipient

* fix: inform create request type when creating from UI (#987)

* fix: balance warning modal (#988)

- Slider instead of button
- Expiry for local storage instead of session storage
- Warning icon color

* chore: remove unused file (#990)

* chore: re-add removed code for gas estimation

---------

Signed-off-by: facundobozzi <[email protected]>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: kushagrasarathe <[email protected]>
Co-authored-by: facundobozzi <[email protected]>

---------

Signed-off-by: facundobozzi <[email protected]>
Co-authored-by: Kushagra Sarathe <[email protected]>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: facundobozzi <[email protected]>

* refactor(payments): add payerAddress to payment creation (#1002)

* feat: claim a send link to bank flow  (#995)

* feat: update add/withdraw flow to use new slider component

* feat: guest receive to exchange/crypto flows

* fix: coderabbit comments

* fix: slider usage

* feat: new server actions for guest flow

* feat: update card and success view component for bank claims

* feat: claim to bank flow components

* fix: coderbbit comments

* fix: import

* feat: handle bank link claims for when sender is non-kyced (#996)

* feat: handle bank link claims for when sender is non-kyced

* fix: kyc status check for sender

* fix: codderabbit comments

* fix: update route payloads based on be changes

* fix: merge conflict

* feat: ui updates to bank flow

* fix: rename comp name

* fix: wrap fn in callback

* feat: min ammount modal for send link claims

* [TASK-12649] fix: allow user to change their email address if they have not completed kyc (#999)

* fix: allow user to change their email address if they have not completed kyc

* fix: account incorrect field

* Feat: Landing page changes (#1006)

* fix: links v2 send flow qa fixes (#1008)

* fix: add reuseOnError key for guest external accounts creation

* fix: success view for guest claim to bank account flow

* fix: infinite loop of post signup flow using claim link

* fix: back btn navigation

* fix: show confirm view for xchain claims

* fix: links v2 qa bug fixes (#1014)

* feat: add slider in withdraw crypto flow

* fix: cross chain claiming

* fix: claim modal on homepage

* fix: coral issue on staging (#1018)

* fix: coral issue on staging

* fix: squid api url const

* Make txn history private (#1017)

* chore: update mobula endpoint (#1020)

* chore: update mobula endpoint

* Update tokens.ts

Signed-off-by: Hugo Montenegro <[email protected]>

---------

Signed-off-by: Hugo Montenegro <[email protected]>
Co-authored-by: Hugo Montenegro <[email protected]>

* fix: minor bugs before prod-release (#1025)

* fix: add money ui issue for same chain external wallet txn

* fix: amount in withdraw to crypto sucess view

* fix: reset states on flows (#1026)

* fix: add money ui issue for same chain external wallet txn

* fix: amount in withdraw to crypto sucess view

* fix; reset states

* merge: peanut-wallet in peanut-wallet-dev

* fix: remove dupe title

* merge: peanut-wallet in peanut-wallet-dev (#1032)

* merge: peanut-wallet in peanut-wallet-dev

* fix: remove dupe title

* Fix KYC issues (#1029)

* fix: TOS acceptance taking too much time

* remove log

* Fix: add money button position (#1031)

* fix: Wrong flag shown in add monet flow for some countries (#1027)

* fix(kernel-client): catch kernel client errors (#1036)

* fix: more and more bugssssss (#1030)

* fix: guest flow navigation and ofac

* fix: withdraw flow navigation

* fix: always show usd value in reciept and success views

* fix: show $ in txn drawer

* fix: mark prop as optional

* fix: update text (#1035)

* feat: guest claimed link history ui (#1007)

* feat: guest claimed link history ui

* fix: pr review comments

* fix: format transfer id

* Fix: Add crypto showing incorrect view on refresh (#1028)

* fix: refreshing the page in the last screen when adding money shows the money was successfully added when it wasn’t

* fix: payment not working on refresh

* fix: charge state bug

* feat: add subtext (#1019)

* fix: refetch wallet balance (#1040)

* chore: remove dead code

* fix: refetch wallet balance wen direct req is paid

* fix: activity issues (#1034)

* fix: campaign icon (#1037)

* Fix: Cancel button not showing for send and request link creator (#1039)

* Fix: Cancel button not showing for send and request link creator

* Add Cancel link warning modal

* remove unused import

* Fix: loading states

* nit: use `currentColor`

* Fix : buttons loading state

* copy changes for hotfix from prod (#1042)

* fix btn position (#1043)

* Fix: KYC modal close button not working in withdraw flow (#1044)

* fix: KYC modal close btn not working in withdraw flow

* remove logs

* Fix kyc close navigation flow (#1046)

* Fix/withdraw amt issue (#1045)

* fix: withdraw amount state issue

* fix: amount in PeanutActionDetailsCard

* fix: withdraw usd value

* fix(semantic-send): fix history for payments (#1048)

Treat as a direct send if there is no request id

* fix: bic fetching (#1050)

* fix: kyc issues (yes, again, and it works this time) (#1052)

* fix: kyc iframe closing on verfication done

* fix: tos closing issue

* typo hotfix

---------

Signed-off-by: facundobozzi <[email protected]>
Signed-off-by: Hugo Montenegro <[email protected]>
Co-authored-by: Juan José Ramírez <[email protected]>
Co-authored-by: Juan José Ramírez <[email protected]>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: facundobozzi <[email protected]>
Co-authored-by: Mohd Zishan <[email protected]>
Co-authored-by: Hugo Montenegro <[email protected]>
Co-authored-by: Hugo Montenegro <[email protected]>
Hugo0 added a commit that referenced this pull request Aug 6, 2025
* feat: abstract squid route fetching

Stop using the skd and use the squid API directly, this give us more
control and access to all the data that returns squid (for example,
we now have access to the fees and don't have to recalculate them
ourselves)

* refactor: use parseunits

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* refactor: remove console.dir

* feat: handle very large numbers with careful scaling

* refactor: use const for squid api url

* feat: add cross-chain action card

Use coral through squid to get the cross-chain route for the different
flows. This enables xchain withdraw for peanut wallet

* refactor: use decimals from token price instead of hardcoded

* style: Apply prettier formatting

* feat: show min received for cross-chain payments

* chore: clean unused variables

* fix: tests ach_pull to ach

* fix: pr comments

* fix: withdrawData and pulsate animation

* fix: cursor placement in token amount input

* fix: delete unused code

* fix: add camera perm modal

* fix: enable mexico bank offramp

* refactor: better comments for direct usd payments

* feat: add qr scanning for xchain

* fix: remove malicious code

* fix: handle mxn in offramp destination details (#945)

* fix: show share receipt option in direct send status view (#946)

* [TASK-12678] fix: coral withdraw fixes (#949)

* fix: coral withdraw fixes

- Stop refreshing the page after successful payment
- Better error message for unsupported token pairs

* chore: add squid env vars

* refactor: better copy for non rfq routes from peanut wallet

Also send warning to sentry

* fix: show amount in USD for withdrawals to other tokens to other tokens

* fix: lock orientation to portrait mode (#947)

* fix: lock orienatation to protrait mode

* style(fix): add new line

* style: format

* fix: if condition

* fix: update payment form for crosschain add money (#954)

* [TASK-12682] fix: show token selector for guest flow (#955)

* fix: show token selector for guest flow

* docs: add comment to explain url request flow

* implemented Context instead of sessionStorage in onrampData to avoid discrepancies with the Offramp logic (#953)

* refactor: fetch external wallet balances from mobula (#956) (#958)

* [TASK-12645] copy button for individual fields (#960)

* copy button for individual fields

* changed getOnrampCurrencyConfig (deprecated)to getCurrencyConfig + user now copies raw IBAN value

* fix: gas estimation for external wallets (#961)

We were re-rendering unnecesarily the prepare transaction, also now we
catch error if any

* [TASK-12603] reset send flow state when navigating to/from payment link creation (#964)

* reset send flow state when navigating to/from payment link creation

* linting (formatting)

* [TASK-12312] ENS/eth address network error being displayed on the frontend (#963)

* ENS/eth address network error being displayed on the frontend

* linting

* fix: centre align views on mobile (#950)

* [TASK-12542] added formatIban function for correct display (#952)

* added formatIban function for correct display

* coderabbit suggestion

Signed-off-by: facundobozzi <[email protected]>

* updated formatting

* added iban formatting in all pages

---------

Signed-off-by: facundobozzi <[email protected]>

* [TASK-12672] feat: show sponsored by peanut message (#959)

* feat: show sponsored by peanut message

This message is shown when we are making a transaction from the peanut
wallet. If the amount is more than one cent we also show the fee that
the user is saving by using peanut.

* fix(fees): show correct ammounts for externalwallet

* refactor: rename estimatedGasCostUsd to estimatedGasCostUsdUsd

* fix: correct approval owner and base rpc (#965)

Two things here:

1. We were using the peanut address for approval checking on deposits,
   this didn't affect because if the approval call failed we just
   continued with the deposit
2: The base rpc url was the sepolia one, not the mainnet. Big oversight
   there

* feat: add alachemy as fallback rpc url (#948)

* feat: add alachemy as fallback rpc url

* fix: remove commented line

* fix: address pr review comments

* [TASK-12866] fix: small fixes around crosschain ui (#966)

* fix: small fixes around crosschain ui

* fix: avoid negative expiry time

* removed white spaces before processing to BIC (#951)

* feat: resuable slider component (#968)

* fix: update desktop navigation with add/withdraw paths (#969)

* [TASK-11884] request via link with comment and attachment is creating 2 txs in the history (#943)

* PATCH implemented in frontend

* comment input state updating correctly (onBlur)

* freezing amount after updating comments/files input

* debounce attachment options and update requests on file change (avoiding race conditions when attaching files!)

* style: Apply prettier formatting

* removed malicious code

Signed-off-by: facundobozzi <[email protected]>

* PATCH method using withFormData

* better onBlur logic

* bug fixes

* blur logic fixed

* nit pick comments

* code rabbit suggestion

* replaced useEffect setting state with derived state and debouncing

* disabling amount input after request creation

* linting

---------

Signed-off-by: facundobozzi <[email protected]>

* fix: support page staging (#972)

* fix: update desktop navigation with add/withdraw paths

* fix: support page

* fix: ui comments (#973)

* Support and beta changes to staging (#978)

* refactor: fetch external wallet balances from mobula (#956)

* fix: update desktop navigation (#970)

* fix: support page prod (#971)

* fix: update desktop navigation

* fix: support page

* [TASK-12746] feat: beta changes (#975)

* feat: beta changes

- Banner that redirects to support page
- Funds warning modal

* refactor(banner): remove from landing and add hand thumbs up

---------

Co-authored-by: Kushagra Sarathe <[email protected]>

* [TASK-12312] Bugfix/ens error withdrawing (#976)

* ENS/eth address network error being displayed on the frontend

* linting

* fixed andre QA observations

* deleting console.log

* formatting

* logic fixed

* fixed testst

---------

Signed-off-by: facundobozzi <[email protected]>

* fix: coral small issues (#979)

* chore: enable usdt in mainnet (#980)

* fix: slider tap bug logic (#983)

* fix: slider tap bug logic

* fix: tap bug on slider

* fix: some issues and comments (#984)

* [TASK-12771] Feat/new landing page (#974)

* removed legacy button and changed try now button colors

* try now button color and hero description

* YourMoney component

* NoFees component first part

* stars done

* scribble in zero fees

* no hidden fees section done

* securityBuiltIn done

* sendInSeconds progress

* sendInSeconds done

* updated try now button to be a link

* business integration initiation

* businessIntegrate done

* order and marquee reusability

* order fixed

* background animations in Landing Page compoejnnts

* changed image for text in hero section

* figma details

* landing page responsiveness improvements

* landing page responsiveness done

* coderabbit suggestion

* business integration button

* fixed iphone screenshots

* CTA button animation

* added debugging for CTA button animation

* changed animation since react gave errors

* arrows in hero section

* NoFees new Zero

* no fees responsiveness fixed

* sendInSeconds details done

* coderabbit suggestions

* formatting

* hand-token wasnt pushed? forgot to stage or sum? anyways fixed

* build issues fixed

* coderabbit optimization

* code formatting

* arrows and ZERO thickness

* shade in try now button

* progress in button animation

* undoing button changes

* small detail fixes

* added asset

* changed peanut business to svg

* integrate peanut component done

* added pay-zero-fees.svg

* added new illustrations

* uout money anywhere svg

* securitybuiltin component SVGs

* adding YourMoney new SVGs

* your money anywhere component

* instantly send & receive svg

* arrows fixed

* button and arrows done

* desktop sendinseconds button done

* removed arrows disappearing effect

* MOBILE: hero button done

* added mobile svg

* yourMoney responsive component done

* added mobile-zero-fees.svg

* added no-hidden-fees.svg

* noFees mobile svg

* noFees desktop + mobile improvements

* noFees done

* mobile security built in SVG

* securityprivacy mobile done

* mobile-send-in-seconds.svg

* sendInSeconds mobile done

* business integrate mobile

* business integrate button and final details

* removed footer

* formatting

* removed pino-pretty

* fixed button instead of sticky/floating

---------

Signed-off-by: facundobozzi <[email protected]>

* [TASK-13136] feat: allow uppercase in url (#986)

* feat: allow uppercase in url

* fix: allow uppercase in recipient

* fix: inform create request type when creating from UI (#987)

* fix: balance warning modal (#988)

- Slider instead of button
- Expiry for local storage instead of session storage
- Warning icon color

* chore: remove unused file (#990)

* feat: send links guest flow ( exchange/crypto) (#982)

* feat: update add/withdraw flow to use new slider component

* feat: guest receive to exchange/crypto flows

* fix: coderabbit comments

* fix: slider usage

* Chore/prod to staging (#994)

* refactor: fetch external wallet balances from mobula (#956)

* fix: update desktop navigation (#970)

* fix: support page prod (#971)

* fix: update desktop navigation

* fix: support page

* [TASK-12746] feat: beta changes (#975)

* feat: beta changes

- Banner that redirects to support page
- Funds warning modal

* refactor(banner): remove from landing and add hand thumbs up

* [TASK-13082] Sprint 100 prod release  (#992)

* feat: abstract squid route fetching

Stop using the skd and use the squid API directly, this give us more
control and access to all the data that returns squid (for example,
we now have access to the fees and don't have to recalculate them
ourselves)

* refactor: use parseunits

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* refactor: remove console.dir

* feat: handle very large numbers with careful scaling

* refactor: use const for squid api url

* feat: add cross-chain action card

Use coral through squid to get the cross-chain route for the different
flows. This enables xchain withdraw for peanut wallet

* refactor: use decimals from token price instead of hardcoded

* style: Apply prettier formatting

* feat: show min received for cross-chain payments

* chore: clean unused variables

* fix: tests ach_pull to ach

* fix: pr comments

* fix: withdrawData and pulsate animation

* fix: cursor placement in token amount input

* fix: delete unused code

* fix: add camera perm modal

* fix: enable mexico bank offramp

* refactor: better comments for direct usd payments

* feat: add qr scanning for xchain

* fix: remove malicious code

* fix: handle mxn in offramp destination details (#945)

* fix: show share receipt option in direct send status view (#946)

* [TASK-12678] fix: coral withdraw fixes (#949)

* fix: coral withdraw fixes

- Stop refreshing the page after successful payment
- Better error message for unsupported token pairs

* chore: add squid env vars

* refactor: better copy for non rfq routes from peanut wallet

Also send warning to sentry

* fix: show amount in USD for withdrawals to other tokens to other tokens

* fix: lock orientation to portrait mode (#947)

* fix: lock orienatation to protrait mode

* style(fix): add new line

* style: format

* fix: if condition

* fix: update payment form for crosschain add money (#954)

* [TASK-12682] fix: show token selector for guest flow (#955)

* fix: show token selector for guest flow

* docs: add comment to explain url request flow

* implemented Context instead of sessionStorage in onrampData to avoid discrepancies with the Offramp logic (#953)

* refactor: fetch external wallet balances from mobula (#956) (#958)

* [TASK-12645] copy button for individual fields (#960)

* copy button for individual fields

* changed getOnrampCurrencyConfig (deprecated)to getCurrencyConfig + user now copies raw IBAN value

* fix: gas estimation for external wallets (#961)

We were re-rendering unnecesarily the prepare transaction, also now we
catch error if any

* [TASK-12603] reset send flow state when navigating to/from payment link creation (#964)

* reset send flow state when navigating to/from payment link creation

* linting (formatting)

* [TASK-12312] ENS/eth address network error being displayed on the frontend (#963)

* ENS/eth address network error being displayed on the frontend

* linting

* fix: centre align views on mobile (#950)

* [TASK-12542] added formatIban function for correct display (#952)

* added formatIban function for correct display

* coderabbit suggestion

Signed-off-by: facundobozzi <[email protected]>

* updated formatting

* added iban formatting in all pages

---------

Signed-off-by: facundobozzi <[email protected]>

* [TASK-12672] feat: show sponsored by peanut message (#959)

* feat: show sponsored by peanut message

This message is shown when we are making a transaction from the peanut
wallet. If the amount is more than one cent we also show the fee that
the user is saving by using peanut.

* fix(fees): show correct ammounts for externalwallet

* refactor: rename estimatedGasCostUsd to estimatedGasCostUsdUsd

* fix: correct approval owner and base rpc (#965)

Two things here:

1. We were using the peanut address for approval checking on deposits,
   this didn't affect because if the approval call failed we just
   continued with the deposit
2: The base rpc url was the sepolia one, not the mainnet. Big oversight
   there

* feat: add alachemy as fallback rpc url (#948)

* feat: add alachemy as fallback rpc url

* fix: remove commented line

* fix: address pr review comments

* [TASK-12866] fix: small fixes around crosschain ui (#966)

* fix: small fixes around crosschain ui

* fix: avoid negative expiry time

* removed white spaces before processing to BIC (#951)

* feat: resuable slider component (#968)

* fix: update desktop navigation with add/withdraw paths (#969)

* [TASK-11884] request via link with comment and attachment is creating 2 txs in the history (#943)

* PATCH implemented in frontend

* comment input state updating correctly (onBlur)

* freezing amount after updating comments/files input

* debounce attachment options and update requests on file change (avoiding race conditions when attaching files!)

* style: Apply prettier formatting

* removed malicious code

Signed-off-by: facundobozzi <[email protected]>

* PATCH method using withFormData

* better onBlur logic

* bug fixes

* blur logic fixed

* nit pick comments

* code rabbit suggestion

* replaced useEffect setting state with derived state and debouncing

* disabling amount input after request creation

* linting

---------

Signed-off-by: facundobozzi <[email protected]>

* fix: support page staging (#972)

* fix: update desktop navigation with add/withdraw paths

* fix: support page

* fix: ui comments (#973)

* Support and beta changes to staging (#978)

* refactor: fetch external wallet balances from mobula (#956)

* fix: update desktop navigation (#970)

* fix: support page prod (#971)

* fix: update desktop navigation

* fix: support page

* [TASK-12746] feat: beta changes (#975)

* feat: beta changes

- Banner that redirects to support page
- Funds warning modal

* refactor(banner): remove from landing and add hand thumbs up

---------

Co-authored-by: Kushagra Sarathe <[email protected]>

* [TASK-12312] Bugfix/ens error withdrawing (#976)

* ENS/eth address network error being displayed on the frontend

* linting

* fixed andre QA observations

* deleting console.log

* formatting

* logic fixed

* fixed testst

---------

Signed-off-by: facundobozzi <[email protected]>

* fix: coral small issues (#979)

* chore: enable usdt in mainnet (#980)

* fix: slider tap bug logic (#983)

* fix: slider tap bug logic

* fix: tap bug on slider

* fix: some issues and comments (#984)

* [TASK-12771] Feat/new landing page (#974)

* removed legacy button and changed try now button colors

* try now button color and hero description

* YourMoney component

* NoFees component first part

* stars done

* scribble in zero fees

* no hidden fees section done

* securityBuiltIn done

* sendInSeconds progress

* sendInSeconds done

* updated try now button to be a link

* business integration initiation

* businessIntegrate done

* order and marquee reusability

* order fixed

* background animations in Landing Page compoejnnts

* changed image for text in hero section

* figma details

* landing page responsiveness improvements

* landing page responsiveness done

* coderabbit suggestion

* business integration button

* fixed iphone screenshots

* CTA button animation

* added debugging for CTA button animation

* changed animation since react gave errors

* arrows in hero section

* NoFees new Zero

* no fees responsiveness fixed

* sendInSeconds details done

* coderabbit suggestions

* formatting

* hand-token wasnt pushed? forgot to stage or sum? anyways fixed

* build issues fixed

* coderabbit optimization

* code formatting

* arrows and ZERO thickness

* shade in try now button

* progress in button animation

* undoing button changes

* small detail fixes

* added asset

* changed peanut business to svg

* integrate peanut component done

* added pay-zero-fees.svg

* added new illustrations

* uout money anywhere svg

* securitybuiltin component SVGs

* adding YourMoney new SVGs

* your money anywhere component

* instantly send & receive svg

* arrows fixed

* button and arrows done

* desktop sendinseconds button done

* removed arrows disappearing effect

* MOBILE: hero button done

* added mobile svg

* yourMoney responsive component done

* added mobile-zero-fees.svg

* added no-hidden-fees.svg

* noFees mobile svg

* noFees desktop + mobile improvements

* noFees done

* mobile security built in SVG

* securityprivacy mobile done

* mobile-send-in-seconds.svg

* sendInSeconds mobile done

* business integrate mobile

* business integrate button and final details

* removed footer

* formatting

* removed pino-pretty

* fixed button instead of sticky/floating

---------

Signed-off-by: facundobozzi <[email protected]>

* [TASK-13136] feat: allow uppercase in url (#986)

* feat: allow uppercase in url

* fix: allow uppercase in recipient

* fix: inform create request type when creating from UI (#987)

* fix: balance warning modal (#988)

- Slider instead of button
- Expiry for local storage instead of session storage
- Warning icon color

* chore: remove unused file (#990)

* chore: re-add removed code for gas estimation

---------

Signed-off-by: facundobozzi <[email protected]>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: kushagrasarathe <[email protected]>
Co-authored-by: facundobozzi <[email protected]>

---------

Signed-off-by: facundobozzi <[email protected]>
Co-authored-by: Kushagra Sarathe <[email protected]>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: facundobozzi <[email protected]>

* refactor(payments): add payerAddress to payment creation (#1002)

* feat: claim a send link to bank flow  (#995)

* feat: update add/withdraw flow to use new slider component

* feat: guest receive to exchange/crypto flows

* fix: coderabbit comments

* fix: slider usage

* feat: new server actions for guest flow

* feat: update card and success view component for bank claims

* feat: claim to bank flow components

* fix: coderbbit comments

* fix: import

* feat: handle bank link claims for when sender is non-kyced (#996)

* feat: handle bank link claims for when sender is non-kyced

* fix: kyc status check for sender

* fix: codderabbit comments

* fix: update route payloads based on be changes

* fix: merge conflict

* feat: ui updates to bank flow

* fix: rename comp name

* fix: wrap fn in callback

* feat: min ammount modal for send link claims

* [TASK-12649] fix: allow user to change their email address if they have not completed kyc (#999)

* fix: allow user to change their email address if they have not completed kyc

* fix: account incorrect field

* Feat: Landing page changes (#1006)

* fix: links v2 send flow qa fixes (#1008)

* fix: add reuseOnError key for guest external accounts creation

* fix: success view for guest claim to bank account flow

* fix: infinite loop of post signup flow using claim link

* fix: back btn navigation

* fix: show confirm view for xchain claims

* fix: links v2 qa bug fixes (#1014)

* feat: add slider in withdraw crypto flow

* fix: cross chain claiming

* fix: claim modal on homepage

* fix: coral issue on staging (#1018)

* fix: coral issue on staging

* fix: squid api url const

* Make txn history private (#1017)

* chore: update mobula endpoint (#1020)

* chore: update mobula endpoint

* Update tokens.ts

Signed-off-by: Hugo Montenegro <[email protected]>

---------

Signed-off-by: Hugo Montenegro <[email protected]>
Co-authored-by: Hugo Montenegro <[email protected]>

* fix: minor bugs before prod-release (#1025)

* fix: add money ui issue for same chain external wallet txn

* fix: amount in withdraw to crypto sucess view

* fix: reset states on flows (#1026)

* fix: add money ui issue for same chain external wallet txn

* fix: amount in withdraw to crypto sucess view

* fix; reset states

* merge: peanut-wallet in peanut-wallet-dev

* fix: remove dupe title

* merge: peanut-wallet in peanut-wallet-dev (#1032)

* merge: peanut-wallet in peanut-wallet-dev

* fix: remove dupe title

* Fix KYC issues (#1029)

* fix: TOS acceptance taking too much time

* remove log

* Fix: add money button position (#1031)

* fix: Wrong flag shown in add monet flow for some countries (#1027)

* fix(kernel-client): catch kernel client errors (#1036)

* fix: more and more bugssssss (#1030)

* fix: guest flow navigation and ofac

* fix: withdraw flow navigation

* fix: always show usd value in reciept and success views

* fix: show $ in txn drawer

* fix: mark prop as optional

* fix: update text (#1035)

* feat: guest claimed link history ui (#1007)

* feat: guest claimed link history ui

* fix: pr review comments

* fix: format transfer id

* Fix: Add crypto showing incorrect view on refresh (#1028)

* fix: refreshing the page in the last screen when adding money shows the money was successfully added when it wasn’t

* fix: payment not working on refresh

* fix: charge state bug

* feat: add subtext (#1019)

* fix: refetch wallet balance (#1040)

* chore: remove dead code

* fix: refetch wallet balance wen direct req is paid

* fix: activity issues (#1034)

* fix: campaign icon (#1037)

* Fix: Cancel button not showing for send and request link creator (#1039)

* Fix: Cancel button not showing for send and request link creator

* Add Cancel link warning modal

* remove unused import

* Fix: loading states

* nit: use `currentColor`

* Fix : buttons loading state

* copy changes for hotfix from prod (#1042)

* fix btn position (#1043)

* Fix: KYC modal close button not working in withdraw flow (#1044)

* fix: KYC modal close btn not working in withdraw flow

* remove logs

* Fix kyc close navigation flow (#1046)

* Fix/withdraw amt issue (#1045)

* fix: withdraw amount state issue

* fix: amount in PeanutActionDetailsCard

* fix: withdraw usd value

* fix(semantic-send): fix history for payments (#1048)

Treat as a direct send if there is no request id

* fix: bic fetching (#1050)

* fix: kyc issues (yes, again, and it works this time) (#1052)

* fix: kyc iframe closing on verfication done

* fix: tos closing issue

* typo hotfix

* revert hotfix

* Feat/social preview copies (#1000)

* claim copies done

* DRY pattern for ENS getter function

* fixed copy for claim link

* request OG copy and image

* logic for receipts in request links

* receipt social preview UI + copy fixes

* format

* coderabbit suggestions

* Update copy

* fetch correct username from `chargeDetails`

* fix: preview links not working on X

* fix: build issues

* Add social preview for profile links

* remove social preview white borders

* Add comment for profile link handling and refine OG image generation conditions

* Add robots.txt for twitter card preview

* update `robots.txt`

* delete `robots.txt` and update `robots.ts` rules for twitterbot

* refactor `printableAddress` function to print even shorter address on Social Previews

* remove `resolveAddressToENS` and use `resolveAddressToUsername`

---------

Co-authored-by: Zishan Mohd <[email protected]>

* feat: remove totals from public profile (#1049)

* fix: typo (#1059)

* chore: hide referral campaign (#1062)

* [TASK-13143] fix(cross-chain): improve route estimation (#1047)

* fix(cross-chain): improve route estimation

- Use linear interpolation to set realistic bounds

* refactor: get route from our own service

* fix: typo

* fix: merge conflict

---------

Signed-off-by: Juan José Ramírez <[email protected]>

* fix: consecutive withdraw bug issue (#1056)

* Fix social preview bugs (#1064)

* fix bugs

* update comment

* fix: balance warning modal width

* refactor(request-link): dont disable amount when not generating link

* Fix: request with comment generating multiple activity entries (#1066)

* fix: updating comment creating multiple requests

* Add missing dependencies and remove eslint disable comment

* fix: new link getting created on clearing comment input

* refactor: remove console.logs

---------

Signed-off-by: facundobozzi <[email protected]>
Signed-off-by: Hugo Montenegro <[email protected]>
Signed-off-by: Juan José Ramírez <[email protected]>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: kushagrasarathe <[email protected]>
Co-authored-by: facundobozzi <[email protected]>
Co-authored-by: Mohd Zishan <[email protected]>
Co-authored-by: Hugo Montenegro <[email protected]>
Co-authored-by: Hugo Montenegro <[email protected]>
Co-authored-by: Zishan Mohd <[email protected]>
@coderabbitai coderabbitai bot mentioned this pull request Sep 11, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants