How much do you want to add?
- How much do you want to add?
-
- router.back()} />
-
+
-
- Where are you adding from?
- - {/* Exchanges Section */} -
-
-
- {/* Wallets Section - with a top margin for separation */}
-
- router.push('/add-money/crypto/direct')}
- />
-
-
+ router.replace('/profile')} />
+
+
+
+ {/* FAQ Modal: What if I lose my phone? */}
+
+
+
+
+
+ Enable backup now
+-
+ {backupSteps.map((step, index) => (
+
-
+
{step.title}
+{step.description}
+
+ ))}
+
+ setActiveModal('lose-phone')}>
+
+ setActiveModal('change-phone')}>
+
+ setActiveModal('export-keys')}>
+
+
+ Common questions
+
+
+ What if I lose my phone?
+
+
+ What if I change phone?
+
+
+ Why can't I export my private key?
+-
+
- Verify backup is working (check step 3 above) +
- Know your {accountType} password +
- Keep old phone until new one works +
+
+ Passkeys are safer by design
++ Unlike traditional private keys that can be copied as text, passkeys are cryptographic + credentials that can't be: +
+-
+
- Screenshot by accident +
- Sent in a text message +
- Saved in an unsafe note app +
- Stolen by malware +
+
+ The tradeoff
++ You get better security, but passkeys are locked to your device ecosystem (Apple or + Google). That's why cloud backup is critical. +
+
+
+ i
+
+
+
+ }
+ />
+
+ )
+}
diff --git a/src/app/(mobile-ui)/profile/exchange-rate/page.tsx b/src/app/(mobile-ui)/profile/exchange-rate/page.tsx
index 5d5b2479b..6f1b7a965 100644
--- a/src/app/(mobile-ui)/profile/exchange-rate/page.tsx
+++ b/src/app/(mobile-ui)/profile/exchange-rate/page.tsx
@@ -4,7 +4,7 @@ import PageContainer from '@/components/0_Bruddle/PageContainer'
import ExchangeRateWidget from '@/components/Global/ExchangeRateWidget'
import NavHeader from '@/components/Global/NavHeader'
import { useWallet } from '@/hooks/wallet/useWallet'
-import { printableUsdc } from '@/utils'
+import { printableUsdc } from '@/utils/balance.utils'
import { getExchangeRateWidgetRedirectRoute } from '@/utils/exchangeRateWidget.utils'
import { useRouter } from 'next/navigation'
import { useEffect } from 'react'
diff --git a/src/app/(mobile-ui)/qr-pay/page.tsx b/src/app/(mobile-ui)/qr-pay/page.tsx
index 4d8312ae9..47a7556d2 100644
--- a/src/app/(mobile-ui)/qr-pay/page.tsx
+++ b/src/app/(mobile-ui)/qr-pay/page.tsx
@@ -14,14 +14,21 @@ import NavHeader from '@/components/Global/NavHeader'
import { MERCADO_PAGO, PIX, SIMPLEFI } from '@/assets/payment-apps'
import Image from 'next/image'
import PeanutLoading from '@/components/Global/PeanutLoading'
-import TokenAmountInput from '@/components/Global/TokenAmountInput'
+import AmountInput from '@/components/Global/AmountInput'
import { useWallet } from '@/hooks/wallet/useWallet'
import { useSignUserOp } from '@/hooks/wallet/useSignUserOp'
-import { clearRedirectUrl, getRedirectUrl, isTxReverted, saveRedirectUrl, formatNumberForDisplay } from '@/utils'
+import {
+ clearRedirectUrl,
+ getRedirectUrl,
+ isTxReverted,
+ saveRedirectUrl,
+ formatNumberForDisplay,
+} from '@/utils/general.utils'
import { getShakeClass, type ShakeIntensity } from '@/utils/perk.utils'
import { calculateSavingsInCents, isArgentinaMantecaQrPayment, getSavingsMessage } from '@/utils/qr-payment.utils'
import ErrorAlert from '@/components/Global/ErrorAlert'
-import { PEANUT_WALLET_TOKEN_DECIMALS, TRANSACTIONS, PERK_HOLD_DURATION_MS } from '@/constants'
+import { PEANUT_WALLET_TOKEN_DECIMALS } from '@/constants/zerodev.consts'
+import { PERK_HOLD_DURATION_MS } from '@/constants/general.consts'
import { MANTECA_DEPOSIT_ADDRESS } from '@/constants/manteca.consts'
import { MIN_MANTECA_QR_PAYMENT_AMOUNT } from '@/constants/payment.consts'
import { formatUnits, parseUnits } from 'viem'
@@ -32,7 +39,6 @@ import { EHistoryEntryType, EHistoryUserRole } from '@/hooks/useTransactionHisto
import { loadingStateContext } from '@/context'
import { getCurrencyPrice } from '@/app/actions/currency'
import { PaymentInfoRow } from '@/components/Payment/PaymentInfoRow'
-import { usePendingTransactions } from '@/hooks/wallet/usePendingTransactions'
import { captureException } from '@sentry/nextjs'
import {
isPaymentProcessorQR,
@@ -56,9 +62,10 @@ import { usePointsCalculation } from '@/hooks/usePointsCalculation'
import { useWebSocket } from '@/hooks/useWebSocket'
import type { HistoryEntry } from '@/hooks/useTransactionHistory'
import { completeHistoryEntry } from '@/utils/history.utils'
-import { useSupportModalContext } from '@/context/SupportModalContext'
+import { useModalsContext } from '@/context/ModalsContext'
import maintenanceConfig from '@/config/underMaintenance.config'
import PointsCard from '@/components/Common/PointsCard'
+import { TRANSACTIONS } from '@/constants/query.consts'
const MAX_QR_PAYMENT_AMOUNT = '2000'
const MIN_QR_PAYMENT_AMOUNT = '0.1'
@@ -112,7 +119,6 @@ export default function QRPayPage() {
const { shouldBlockPay, kycGateState } = useQrKycGate(paymentProcessor)
const queryClient = useQueryClient()
- const { hasPendingTransactions } = usePendingTransactions()
const [isShaking, setIsShaking] = useState(false)
const [shakeIntensity, setShakeIntensity] = useStateWe're exploring advanced export options for power users in future updates.
+
diff --git a/src/app/(mobile-ui)/qr/[code]/page.tsx b/src/app/(mobile-ui)/qr/[code]/page.tsx
index b76b9c2b8..ec6994235 100644
--- a/src/app/(mobile-ui)/qr/[code]/page.tsx
+++ b/src/app/(mobile-ui)/qr/[code]/page.tsx
@@ -1,16 +1,16 @@
'use client'
-import { Button } from '@/components/0_Bruddle'
+import { Button } from '@/components/0_Bruddle/Button'
import Card from '@/components/Global/Card'
import NavHeader from '@/components/Global/NavHeader'
-import { PEANUT_API_URL } from '@/constants'
+import { PEANUT_API_URL } from '@/constants/general.consts'
import { useAuth } from '@/context/authContext'
import { useRouter, useParams } from 'next/navigation'
import { useCallback, useEffect, useState } from 'react'
import PeanutLoading from '@/components/Global/PeanutLoading'
import ErrorAlert from '@/components/Global/ErrorAlert'
import { Icon } from '@/components/Global/Icons/Icon'
-import { saveRedirectUrl, generateInviteCodeLink, sanitizeRedirectURL } from '@/utils'
+import { saveRedirectUrl, generateInviteCodeLink, sanitizeRedirectURL } from '@/utils/general.utils'
import { getShakeClass } from '@/utils/perk.utils'
import Cookies from 'js-cookie'
import { useRedirectQrStatus } from '@/hooks/useRedirectQrStatus'
diff --git a/src/app/(mobile-ui)/qr/[code]/success/page.tsx b/src/app/(mobile-ui)/qr/[code]/success/page.tsx
index 1f2e50eed..f8627e897 100644
--- a/src/app/(mobile-ui)/qr/[code]/success/page.tsx
+++ b/src/app/(mobile-ui)/qr/[code]/success/page.tsx
@@ -1,9 +1,8 @@
'use client'
-import { Button } from '@/components/0_Bruddle'
+import { Button } from '@/components/0_Bruddle/Button'
import Card from '@/components/Global/Card'
import NavHeader from '@/components/Global/NavHeader'
-import { BASE_URL } from '@/constants'
import { useRouter, useParams } from 'next/navigation'
import { useEffect } from 'react'
import PeanutLoading from '@/components/Global/PeanutLoading'
@@ -12,6 +11,7 @@ import { confettiPresets } from '@/utils/confetti'
import { useRedirectQrStatus } from '@/hooks/useRedirectQrStatus'
import QRCodeWrapper from '@/components/Global/QRCodeWrapper'
import { useToast } from '@/components/0_Bruddle/Toast'
+import { BASE_URL } from '@/constants/general.consts'
export default function RedirectQrSuccessPage() {
const router = useRouter()
diff --git a/src/app/(mobile-ui)/recover-funds/page.tsx b/src/app/(mobile-ui)/recover-funds/page.tsx
index f3d6c5c93..2ce27cdd9 100644
--- a/src/app/(mobile-ui)/recover-funds/page.tsx
+++ b/src/app/(mobile-ui)/recover-funds/page.tsx
@@ -7,11 +7,12 @@ import { type IUserBalance } from '@/interfaces'
import { useState, useEffect, useCallback, useContext } from 'react'
import { useWallet } from '@/hooks/wallet/useWallet'
import { fetchWalletBalances } from '@/app/actions/tokens'
-import { PEANUT_WALLET_CHAIN, PEANUT_WALLET_TOKEN, nativeCurrencyAddresses } from '@/constants'
-import { areEvmAddressesEqual, isTxReverted, getExplorerUrl, getChainName, getTokenLogo } from '@/utils'
+import { PEANUT_WALLET_CHAIN, PEANUT_WALLET_TOKEN } from '@/constants/zerodev.consts'
+import { nativeCurrencyAddresses } from '@/constants/general.consts'
+import { areEvmAddressesEqual, isTxReverted, getExplorerUrl, getChainName, getTokenLogo } from '@/utils/general.utils'
import { type RecipientState } from '@/context/WithdrawFlowContext'
import GeneralRecipientInput, { type GeneralRecipientUpdate } from '@/components/Global/GeneralRecipientInput'
-import { Button } from '@/components/0_Bruddle'
+import { Button } from '@/components/0_Bruddle/Button'
import ErrorAlert from '@/components/Global/ErrorAlert'
import Card from '@/components/Global/Card'
import Image from 'next/image'
@@ -21,10 +22,10 @@ import { erc20Abi, parseUnits, encodeFunctionData, formatUnits } from 'viem'
import type { Address, Hash, TransactionReceipt } from 'viem'
import { useRouter } from 'next/navigation'
import { loadingStateContext } from '@/context'
-import Icon from '@/components/Global/Icon'
import { captureException } from '@sentry/nextjs'
import { mainnet, base, linea } from 'viem/chains'
import { getPublicClient } from '@/app/actions/clients'
+import { Icon } from '@/components/Global/Icons/Icon'
// Helper function to check if a token is native ETH
const isNativeToken = (tokenAddress: string): boolean => {
@@ -256,7 +257,7 @@ export default function RecoverFundsPage() {
className="flex items-center gap-2 hover:underline"
>
View on explorer
-
diff --git a/src/app/(mobile-ui)/request/pay/page.tsx b/src/app/(mobile-ui)/request/pay/page.tsx
index d2adc3f10..8f65bffda 100644
--- a/src/app/(mobile-ui)/request/pay/page.tsx
+++ b/src/app/(mobile-ui)/request/pay/page.tsx
@@ -1,6 +1,6 @@
import { PayRequestLink } from '@/components/Request/Pay/Pay'
import { chargesApi } from '@/services/charges'
-import { formatAmount, printableAddress } from '@/utils'
+import { formatAmount, printableAddress } from '@/utils/general.utils'
import { type Metadata } from 'next'
export const dynamic = 'force-dynamic'
diff --git a/src/app/(mobile-ui)/send/page.tsx b/src/app/(mobile-ui)/send/page.tsx
index 751b72780..9ef6bab40 100644
--- a/src/app/(mobile-ui)/send/page.tsx
+++ b/src/app/(mobile-ui)/send/page.tsx
@@ -10,7 +10,7 @@ export const metadata = generateMetadata({
keywords: 'crypto transfer, send crypto, cross-chain transfer, offramp, digital dollars',
})
-export default function SendPage() {
+export default function DirectSendPage() {
return (
-
- )}
-
{error.showError ? (
)}
{error.showError &&
-
- โ ๏ธ
-
-
- - Service Temporarily Unavailable -
-- Withdrawals to {nonEuroCurrency} bank accounts are temporarily unavailable. - Please try again later. -
-
-
+ - You've earned {pointsData.estimatedPoints}{' '} - {pointsData.estimatedPoints === 1 ? 'point' : 'points'}! -
-
@@ -442,27 +411,35 @@ export default function MantecaWithdrawFlow() {
{step === 'amountInput' && (
- Amount to withdraw
-
-
- )
+ // semantic request for address/ens recipients
+ if (isAddressRecipient || isEnsRecipient) {
+ return
-
- )
+ if (hasAmountSegment || hasChainSpecified) {
+ return
+ return (
+
+
)
}
-
-const getDefaultError: (isUser: boolean) => ValidationErrorViewProps = (isUser) => ({
- title: 'Invalid Payment URL!',
- message: 'They payment you are trying to access is invalid. Please check the URL and try again.',
- buttonText: isUser ? 'Go to home' : 'Create your Peanut Wallet',
- redirectTo: isUser ? '/home' : '/setup',
-})
-
-function getErrorProps({
- error,
- isUser,
- recipient,
-}: {
- error: ParseUrlError
- isUser: boolean
- recipient: string[]
-}): ValidationErrorViewProps {
- const username = recipient[0] || 'unknown'
-
- switch (error.message) {
- case EParseUrlError.INVALID_RECIPIENT:
- return {
- title: `We don't know any @${username}`,
- message: 'Are you sure you clicked on the right link?',
- buttonText: 'Go back to home',
- redirectTo: '/home',
- showLearnMore: false,
- supportMessageTemplate: 'I clicked on this link but got an error: {url}',
- }
- case EParseUrlError.INVALID_CHAIN:
- return {
- title: 'Invalid Chain',
- message: 'You can pay the recipient in their preferred chain',
- buttonText: 'Pay them in their preferred chain',
- redirectTo: `/${error.recipient}`,
- }
- case EParseUrlError.INVALID_TOKEN:
- return {
- title: 'Invalid Token',
- message: 'You can pay the recipient in their preferred token',
- buttonText: 'Pay them in their preferred token',
- redirectTo: `/${error.recipient}`,
- }
- case EParseUrlError.INVALID_AMOUNT:
- return {
- title: 'Invalid Amount',
- message: 'Please check the url and try again',
- buttonText: isUser ? 'Go to home' : 'Create your Peanut Wallet',
- redirectTo: isUser ? '/home' : '/setup',
- }
- case EParseUrlError.INVALID_URL_FORMAT:
- default:
- return getDefaultError(isUser)
- }
-}
diff --git a/src/app/[...recipient]/error.tsx b/src/app/[...recipient]/error.tsx
index 363fdd47d..3ff40afd8 100644
--- a/src/app/[...recipient]/error.tsx
+++ b/src/app/[...recipient]/error.tsx
@@ -1,13 +1,14 @@
'use client'
-import { Button, Card } from '@/components/0_Bruddle'
import { useEffect } from 'react'
import { useRouter } from 'next/navigation'
-import { useSupportModalContext } from '@/context/SupportModalContext'
+import { useModalsContext } from '@/context/ModalsContext'
+import { Button } from '@/components/0_Bruddle/Button'
+import { Card } from '@/components/0_Bruddle/Card'
export default function PaymentError({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
const router = useRouter()
- const { setIsSupportModalOpen } = useSupportModalContext()
+ const { setIsSupportModalOpen } = useModalsContext()
useEffect(() => {
console.error(error)
diff --git a/src/app/[...recipient]/page.tsx b/src/app/[...recipient]/page.tsx
index 64b5c73df..fe535e751 100644
--- a/src/app/[...recipient]/page.tsx
+++ b/src/app/[...recipient]/page.tsx
@@ -2,9 +2,9 @@ import PageContainer from '@/components/0_Bruddle/PageContainer'
import { use } from 'react'
import PaymentPage from './client'
import getOrigin from '@/lib/hosting/get-origin'
-import { BASE_URL } from '@/constants'
+import { BASE_URL } from '@/constants/general.consts'
import { isAddress } from 'viem'
-import { printableAddress, resolveAddressToUsername } from '@/utils'
+import { printableAddress } from '@/utils/general.utils'
import { chargesApi } from '@/services/charges'
import { parseAmountAndToken } from '@/lib/url-parser/parser'
import { notFound } from 'next/navigation'
diff --git a/src/app/[...recipient]/payment-layout-wrapper.tsx b/src/app/[...recipient]/payment-layout-wrapper.tsx
index 3850ca3e1..9968068d4 100644
--- a/src/app/[...recipient]/payment-layout-wrapper.tsx
+++ b/src/app/[...recipient]/payment-layout-wrapper.tsx
@@ -41,7 +41,7 @@ export default function PaymentLayoutWrapper({ children }: { children: React.Rea
className={classNames(
twMerge(
'flex-1 overflow-y-auto bg-background p-6 md:pb-6',
- isUserLoggedIn ? 'pb-24' : 'pb-6'
+ isUserLoggedIn ? 'pb-24' : 'pb-4'
)
)}
>
diff --git a/src/app/actions.ts b/src/app/actions.ts
deleted file mode 100644
index 6aacf0936..000000000
--- a/src/app/actions.ts
+++ /dev/null
@@ -1,113 +0,0 @@
-'use server'
-
-import { PEANUT_API_URL } from '@/constants'
-import { fetchWithSentry } from '@/utils'
-import { cookies } from 'next/headers'
-import webpush from 'web-push'
-
-const updateSubscription = async ({ userId, pushSubscriptionId }: { userId: string; pushSubscriptionId: string }) => {
- const cookieStore = cookies()
- const jwtToken = (await cookieStore).get('jwt-token')?.value
-
- return await fetchWithSentry(`${PEANUT_API_URL}/update-user`, {
- method: 'POST',
- headers: {
- 'Content-Type': 'application/json',
- Authorization: `Bearer ${jwtToken}`,
- 'api-key': process.env.PEANUT_API_KEY!,
- },
- body: JSON.stringify({
- userId,
- pushSubscriptionId,
- }),
- })
-}
-
-// add validation for VAPID environment variables
-const validateVapidEnv = () => {
- const vapidSubject = process.env.NEXT_PUBLIC_VAPID_SUBJECT
- const vapidPublicKey = process.env.NEXT_PUBLIC_VAPID_PUBLIC_KEY
- const vapidPrivateKey = process.env.VAPID_PRIVATE_KEY
-
- if (!vapidSubject || !vapidPublicKey || !vapidPrivateKey) {
- throw new Error('VAPID environment variables are not set. Please check your environment configuration.')
- }
-
- return { vapidSubject, vapidPublicKey, vapidPrivateKey }
-}
-
-// initialize webpush with try-catch
-// NOTE: This is legacy code - we now use OneSignal for push notifications
-// TODO: Remove this entire file once PushProvider is fully migrated to OneSignal
-try {
- const { vapidSubject, vapidPublicKey, vapidPrivateKey } = validateVapidEnv()
-
- webpush.setVapidDetails(vapidSubject, vapidPublicKey, vapidPrivateKey)
-} catch (error) {
- // Silently fail in test environment to avoid breaking tests
- if (process.env.NODE_ENV !== 'test') {
- console.error('Failed to initialize web push:', error)
- // in development, provide more helpful error message
- if (process.env.NODE_ENV === 'development') {
- console.info(`
- Please ensure you have the following environment variables set:
- - NEXT_PUBLIC_VAPID_SUBJECT (usually a mailto: URL)
- - NEXT_PUBLIC_VAPID_PUBLIC_KEY
- - VAPID_PRIVATE_KEY
- `)
- console.log('VAPID Subject:', process.env.NEXT_PUBLIC_VAPID_SUBJECT)
- }
- }
-}
-
-let subscription: webpush.PushSubscription | null = null
-
-export async function subscribeUser(
- userId: string,
- sub: {
- endpoint: string
- keys: {
- p256dh: string
- auth: string
- }
- }
-) {
- try {
- await updateSubscription({
- userId,
- pushSubscriptionId: JSON.stringify(sub),
- })
-
- return { success: true }
- } catch (error) {
- console.error('Error updating subscription:', error)
- return { success: false, error: 'Failed to update subscription' }
- }
-}
-
-export async function unsubscribeUser() {
- subscription = null
- // In a production environment, you would want to remove the subscription from the database
- // For example: await db.subscriptions.delete({ where: { ... } })
- return { success: true }
-}
-
-export async function sendNotification(
- sub: webpush.PushSubscription,
- { message, title }: { message: string; title: string }
-) {
- try {
- await webpush.sendNotification(
- sub,
- JSON.stringify({
- title,
- message,
- icon: '/icons/icon-192x192-beta.png',
- })
- )
- return { success: true }
- } catch (error) {
- console.error('Error sending push notification:', error)
- return { success: false, error: 'Failed to send notification' }
- }
-}
diff --git a/src/app/actions/bridge/get-customer.ts b/src/app/actions/bridge/get-customer.ts
index 66a47b757..94e5fccf5 100644
--- a/src/app/actions/bridge/get-customer.ts
+++ b/src/app/actions/bridge/get-customer.ts
@@ -1,8 +1,8 @@
'use server'
import { unstable_cache } from 'next/cache'
-import { PEANUT_API_KEY, PEANUT_API_URL } from '@/constants'
import { countryData } from '@/components/AddMoney/consts'
+import { PEANUT_API_KEY, PEANUT_API_URL } from '@/constants/general.consts'
type BridgeCustomer = {
id: string
diff --git a/src/app/actions/claimLinks.ts b/src/app/actions/claimLinks.ts
index c56662415..e3feeeffe 100644
--- a/src/app/actions/claimLinks.ts
+++ b/src/app/actions/claimLinks.ts
@@ -6,8 +6,8 @@ import { getContract } from 'viem'
import { getPublicClient, type ChainId } from '@/app/actions/clients'
import { fetchTokenDetails } from '@/app/actions/tokens'
-import { getLinkFromReceipt } from '@/utils'
-import { PEANUT_WALLET_CHAIN } from '@/constants'
+import { getLinkFromReceipt } from '@/utils/general.utils'
+import { PEANUT_WALLET_CHAIN } from '@/constants/zerodev.consts'
export const getLinkDetails = unstable_cache(
async (link: string): Promise => {
diff --git a/src/app/actions/clients.ts b/src/app/actions/clients.ts
index 1cf663731..126dfb980 100644
--- a/src/app/actions/clients.ts
+++ b/src/app/actions/clients.ts
@@ -1,8 +1,9 @@
+import { rpcUrls } from '@/constants/general.consts'
+import { BUNDLER_URL, PAYMASTER_URL, PEANUT_WALLET_CHAIN } from '@/constants/zerodev.consts'
import type { PublicClient, Chain, Transport } from 'viem'
import { createPublicClient, http, extractChain, fallback } from 'viem'
import * as chains from 'viem/chains'
-
-import { PUBLIC_CLIENTS_BY_CHAIN, rpcUrls } from '@/constants'
+import { arbitrum, mainnet, base, linea } from 'viem/chains'
const allChains = Object.values(chains)
export type ChainId = (typeof allChains)[number]['id']
@@ -13,7 +14,6 @@ export type ChainId = (typeof allChains)[number]['id']
* @see https://viem.sh/docs/clients/transports/fallback#fallback-transport
*/
export function getTransportWithFallback(chainId: ChainId): Transport {
- // Handle circular dependency during module initialization (e.g., in tests)
const providerUrls = rpcUrls?.[chainId]
if (!providerUrls || !Array.isArray(providerUrls) || providerUrls.length === 0) {
// If no premium providers are configured, viem will use a default one
@@ -28,6 +28,85 @@ export function getTransportWithFallback(chainId: ChainId): Transport {
)
}
+const ZERODEV_V3_URL = process.env.NEXT_PUBLIC_ZERO_DEV_RECOVERY_BUNDLER_URL
+const zerodevV3Url = (chainId: number | string) => `${ZERODEV_V3_URL}/chain/${chainId}`
+
+/**
+ * This is a mapping of chain ID to the public client and chain details
+ * This is for the standard chains supported in the app. Arbitrum is always included
+ * as it's the primary wallet chain. Additional chains (mainnet, base, linea) are only
+ * included if NEXT_PUBLIC_ZERO_DEV_RECOVERY_BUNDLER_URL is configured.
+ * Note: PUBLIC_CLIENTS_BY_CHAIN and peanutPublicClient are now exported from here to avoid circular dependencies
+ */
+export const PUBLIC_CLIENTS_BY_CHAIN: Record<
+ string,
+ {
+ client: PublicClient
+ chain: Chain
+ bundlerUrl: string
+ paymasterUrl: string
+ }
+> = {
+ // Arbitrum (primary wallet chain - always included)
+ [arbitrum.id]: {
+ client: createPublicClient({
+ transport: getTransportWithFallback(arbitrum.id),
+ chain: arbitrum,
+ pollingInterval: 500,
+ }),
+ chain: PEANUT_WALLET_CHAIN,
+ bundlerUrl: BUNDLER_URL,
+ paymasterUrl: PAYMASTER_URL,
+ },
+}
+
+// Conditionally add recovery chains if env var is configured
+if (ZERODEV_V3_URL) {
+ const mainnetUrl = zerodevV3Url(mainnet.id)
+ if (mainnetUrl) {
+ PUBLIC_CLIENTS_BY_CHAIN[mainnet.id] = {
+ client: createPublicClient({
+ transport: getTransportWithFallback(mainnet.id),
+ chain: mainnet,
+ pollingInterval: 12000,
+ }),
+ chain: mainnet,
+ bundlerUrl: mainnetUrl,
+ paymasterUrl: mainnetUrl,
+ }
+ }
+
+ const baseUrl = zerodevV3Url(base.id)
+ if (baseUrl) {
+ PUBLIC_CLIENTS_BY_CHAIN[base.id] = {
+ client: createPublicClient({
+ transport: getTransportWithFallback(base.id),
+ chain: base,
+ pollingInterval: 2000,
+ }) as PublicClient,
+ chain: base,
+ bundlerUrl: baseUrl,
+ paymasterUrl: baseUrl,
+ }
+ }
+
+ const lineaUrl = zerodevV3Url(linea.id)
+ if (lineaUrl) {
+ PUBLIC_CLIENTS_BY_CHAIN[linea.id] = {
+ client: createPublicClient({
+ transport: getTransportWithFallback(linea.id),
+ chain: linea,
+ pollingInterval: 3000,
+ }),
+ chain: linea,
+ bundlerUrl: lineaUrl,
+ paymasterUrl: lineaUrl,
+ }
+ }
+}
+
+export const peanutPublicClient = PUBLIC_CLIENTS_BY_CHAIN[PEANUT_WALLET_CHAIN.id].client
+
export function getPublicClient(chainId: ChainId): PublicClient {
let client: PublicClient | undefined = PUBLIC_CLIENTS_BY_CHAIN[chainId]?.client
if (client) return client
diff --git a/src/app/actions/ens.ts b/src/app/actions/ens.ts
index e79f1162d..6e9998134 100644
--- a/src/app/actions/ens.ts
+++ b/src/app/actions/ens.ts
@@ -1,7 +1,7 @@
'use server'
import { unstable_cache } from 'next/cache'
-import { PEANUT_API_URL } from '@/constants'
-import { fetchWithSentry } from '@/utils'
+import { fetchWithSentry } from '@/utils/sentry.utils'
+import { PEANUT_API_URL } from '@/constants/general.consts'
const API_KEY = process.env.PEANUT_API_KEY!
diff --git a/src/app/actions/exchange-rate.ts b/src/app/actions/exchange-rate.ts
index e7c7748a1..0ed97f55b 100644
--- a/src/app/actions/exchange-rate.ts
+++ b/src/app/actions/exchange-rate.ts
@@ -1,6 +1,6 @@
'use server'
-import { fetchWithSentry } from '@/utils'
+import { fetchWithSentry } from '@/utils/sentry.utils'
import { AccountType } from '@/interfaces'
const API_KEY = process.env.PEANUT_API_KEY!
diff --git a/src/app/actions/external-accounts.ts b/src/app/actions/external-accounts.ts
index c210a6f30..bc47f33bb 100644
--- a/src/app/actions/external-accounts.ts
+++ b/src/app/actions/external-accounts.ts
@@ -1,6 +1,6 @@
'use server'
-import { fetchWithSentry } from '@/utils'
+import { fetchWithSentry } from '@/utils/sentry.utils'
import { type AddBankAccountPayload } from './types/users.types'
import { type IBridgeAccount } from '@/interfaces'
diff --git a/src/app/actions/history.ts b/src/app/actions/history.ts
index 0735e84b8..fc6d163ef 100644
--- a/src/app/actions/history.ts
+++ b/src/app/actions/history.ts
@@ -2,8 +2,8 @@
import { EHistoryEntryType, completeHistoryEntry } from '@/utils/history.utils'
import type { HistoryEntry } from '@/utils/history.utils'
-import { PEANUT_API_URL } from '@/constants'
-import { fetchWithSentry } from '@/utils'
+import { PEANUT_API_URL } from '@/constants/general.consts'
+import { fetchWithSentry } from '@/utils/sentry.utils'
/**
* Fetches a single history entry from the API. This is used for receipts
diff --git a/src/app/actions/invites.ts b/src/app/actions/invites.ts
index 2eabe0e99..eff8d6d0e 100644
--- a/src/app/actions/invites.ts
+++ b/src/app/actions/invites.ts
@@ -1,7 +1,7 @@
'use server'
-import { PEANUT_API_URL } from '@/constants'
-import { fetchWithSentry } from '@/utils'
+import { fetchWithSentry } from '@/utils/sentry.utils'
+import { PEANUT_API_URL } from '@/constants/general.consts'
const API_KEY = process.env.PEANUT_API_KEY!
diff --git a/src/app/actions/offramp.ts b/src/app/actions/offramp.ts
index ed81a42b0..fd9c96b6e 100644
--- a/src/app/actions/offramp.ts
+++ b/src/app/actions/offramp.ts
@@ -2,7 +2,7 @@
import { cookies } from 'next/headers'
import { type TCreateOfframpRequest } from '../../services/services.types'
-import { fetchWithSentry } from '@/utils'
+import { fetchWithSentry } from '@/utils/sentry.utils'
const API_KEY = process.env.PEANUT_API_KEY!
diff --git a/src/app/actions/onramp.ts b/src/app/actions/onramp.ts
index 5c28ffab8..2ed5402d8 100644
--- a/src/app/actions/onramp.ts
+++ b/src/app/actions/onramp.ts
@@ -1,7 +1,7 @@
'use server'
import { cookies } from 'next/headers'
-import { fetchWithSentry } from '@/utils'
+import { fetchWithSentry } from '@/utils/sentry.utils'
import { type CountryData } from '@/components/AddMoney/consts'
import { getCurrencyConfig } from '@/utils/bridge.utils'
import { getCurrencyPrice } from '@/app/actions/currency'
diff --git a/src/app/actions/squid.ts b/src/app/actions/squid.ts
index 23c2d9390..38b7777c0 100644
--- a/src/app/actions/squid.ts
+++ b/src/app/actions/squid.ts
@@ -3,7 +3,7 @@
import { getSquidChains, getSquidTokens } from '@squirrel-labs/peanut-sdk'
import { unstable_cache } from 'next/cache'
import { interfaces } from '@squirrel-labs/peanut-sdk'
-import { supportedPeanutChains } from '@/constants'
+import { supportedPeanutChains } from '@/constants/general.consts'
const supportedByPeanut = (chain: interfaces.ISquidChain): boolean =>
'evm' === chain.chainType &&
diff --git a/src/app/actions/tokens.ts b/src/app/actions/tokens.ts
index d86f1da81..d84632811 100644
--- a/src/app/actions/tokens.ts
+++ b/src/app/actions/tokens.ts
@@ -1,11 +1,18 @@
'use server'
import { unstable_cache } from 'next/cache'
-import { fetchWithSentry, isAddressZero, estimateIfIsStableCoinFromPrice } from '@/utils'
+import {
+ isAddressZero,
+ estimateIfIsStableCoinFromPrice,
+ getTokenDetails,
+ isStableCoin,
+ areEvmAddressesEqual,
+} from '@/utils/general.utils'
+import { fetchWithSentry } from '@/utils/sentry.utils'
+import { NATIVE_TOKEN_ADDRESS } from '@/utils/token.utils'
import { type ITokenPriceData } from '@/interfaces'
import { parseAbi, formatUnits } from 'viem'
import { type ChainId, getPublicClient } from '@/app/actions/clients'
import type { Address, Hex } from 'viem'
-import { getTokenDetails, isStableCoin, areEvmAddressesEqual, NATIVE_TOKEN_ADDRESS } from '@/utils'
import { type IUserBalance } from '@/interfaces'
type IMobulaMarketData = {
diff --git a/src/app/actions/users.ts b/src/app/actions/users.ts
index 8c6180bc9..31be9651e 100644
--- a/src/app/actions/users.ts
+++ b/src/app/actions/users.ts
@@ -1,12 +1,12 @@
'use server'
-import { PEANUT_API_URL } from '@/constants'
import { type ApiUser } from '@/services/users'
-import { fetchWithSentry } from '@/utils'
+import { fetchWithSentry } from '@/utils/sentry.utils'
import { cookies } from 'next/headers'
import { type AddBankAccountPayload, BridgeEndorsementType, type InitiateKycResponse } from './types/users.types'
import { type User } from '@/interfaces'
import { type ContactsResponse } from '@/interfaces'
+import { PEANUT_API_URL } from '@/constants/general.consts'
const API_KEY = process.env.PEANUT_API_KEY!
@@ -168,6 +168,7 @@ export async function trackDaimoDepositTransactionHash({
export async function getContacts(params: {
limit: number
offset: number
+ search?: string
}): Promise<{ data?: ContactsResponse; error?: string }> {
const cookieStore = cookies()
const jwtToken = (await cookieStore).get('jwt-token')?.value
@@ -182,6 +183,11 @@ export async function getContacts(params: {
offset: params.offset.toString(),
})
+ // add search param if provided
+ if (params.search?.trim()) {
+ queryParams.append('search', params.search.trim())
+ }
+
const response = await fetchWithSentry(`${PEANUT_API_URL}/users/contacts?${queryParams}`, {
method: 'GET',
headers: {
diff --git a/src/app/api/apple-app-site-association/route.ts b/src/app/api/apple-app-site-association/route.ts
index 159aac016..28d4d279b 100644
--- a/src/app/api/apple-app-site-association/route.ts
+++ b/src/app/api/apple-app-site-association/route.ts
@@ -1,7 +1,7 @@
-import { PEANUT_API_URL } from '@/constants'
-import { fetchWithSentry } from '@/utils'
+import { fetchWithSentry } from '@/utils/sentry.utils'
import type { NextRequest } from 'next/server'
import { NextResponse } from 'next/server'
+import { PEANUT_API_URL } from '@/constants/general.consts'
export const dynamic = 'force-dynamic'
export async function GET(_request: NextRequest) {
diff --git a/src/app/api/assetLinks/route.ts b/src/app/api/assetLinks/route.ts
index 949c2f6bb..59df4c891 100644
--- a/src/app/api/assetLinks/route.ts
+++ b/src/app/api/assetLinks/route.ts
@@ -1,8 +1,8 @@
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
-import { PEANUT_API_URL } from '@/constants'
+import { PEANUT_API_URL } from '@/constants/general.consts'
export const dynamic = 'force-dynamic'
-import { fetchWithSentry } from '@/utils'
+import { fetchWithSentry } from '@/utils/sentry.utils'
export async function GET(request: NextRequest) {
const response = await fetchWithSentry(`${PEANUT_API_URL}/assetLinks.json`)
diff --git a/src/app/api/health/backend/route.ts b/src/app/api/health/backend/route.ts
index 3d1333455..10bf1e40d 100644
--- a/src/app/api/health/backend/route.ts
+++ b/src/app/api/health/backend/route.ts
@@ -1,6 +1,6 @@
import { NextResponse } from 'next/server'
-import { PEANUT_API_URL } from '@/constants'
-import { fetchWithSentry } from '@/utils'
+import { fetchWithSentry } from '@/utils/sentry.utils'
+import { PEANUT_API_URL } from '@/constants/general.consts'
export const dynamic = 'force-dynamic'
export const revalidate = 0
diff --git a/src/app/api/health/justaname/route.ts b/src/app/api/health/justaname/route.ts
index 1d9db5588..54912392f 100644
--- a/src/app/api/health/justaname/route.ts
+++ b/src/app/api/health/justaname/route.ts
@@ -1,4 +1,4 @@
-import { fetchWithSentry } from '@/utils'
+import { fetchWithSentry } from '@/utils/sentry.utils'
import { NextResponse } from 'next/server'
const JUSTANAME_API_URL = 'https://api.justaname.id'
diff --git a/src/app/api/health/mobula/route.ts b/src/app/api/health/mobula/route.ts
index 36ba0279b..f9a86ff67 100644
--- a/src/app/api/health/mobula/route.ts
+++ b/src/app/api/health/mobula/route.ts
@@ -1,4 +1,4 @@
-import { fetchWithSentry } from '@/utils'
+import { fetchWithSentry } from '@/utils/sentry.utils'
import { NextResponse } from 'next/server'
const MOBULA_API_URL = process.env.MOBULA_API_URL!
diff --git a/src/app/api/health/route.ts b/src/app/api/health/route.ts
index fba4ef5f6..89c696bd0 100644
--- a/src/app/api/health/route.ts
+++ b/src/app/api/health/route.ts
@@ -1,6 +1,6 @@
import { NextResponse } from 'next/server'
-import { fetchWithSentry } from '@/utils'
-import { SELF_URL } from '@/constants'
+import { fetchWithSentry } from '@/utils/sentry.utils'
+import { SELF_URL } from '@/constants/general.consts'
export const dynamic = 'force-dynamic'
export const revalidate = 0
diff --git a/src/app/api/health/rpc/route.ts b/src/app/api/health/rpc/route.ts
index 12a68e998..3f06a4196 100644
--- a/src/app/api/health/rpc/route.ts
+++ b/src/app/api/health/rpc/route.ts
@@ -1,4 +1,4 @@
-import { fetchWithSentry } from '@/utils'
+import { fetchWithSentry } from '@/utils/sentry.utils'
import { NextResponse } from 'next/server'
import { rpcUrls } from '@/constants/general.consts'
diff --git a/src/app/api/health/squid/route.ts b/src/app/api/health/squid/route.ts
index 6607db9c6..08d1c44f7 100644
--- a/src/app/api/health/squid/route.ts
+++ b/src/app/api/health/squid/route.ts
@@ -1,6 +1,6 @@
-import { fetchWithSentry } from '@/utils'
+import { fetchWithSentry } from '@/utils/sentry.utils'
import { NextResponse } from 'next/server'
-import { SQUID_API_URL, SQUID_INTEGRATOR_ID, SQUID_INTEGRATOR_ID_WITHOUT_CORAL } from '@/constants'
+import { SQUID_INTEGRATOR_ID_WITHOUT_CORAL, SQUID_INTEGRATOR_ID, SQUID_API_URL } from '@/constants/general.consts'
/**
* Health check for Squid API
diff --git a/src/app/api/health/zerodev/route.ts b/src/app/api/health/zerodev/route.ts
index e9d3531cb..de604d3dc 100644
--- a/src/app/api/health/zerodev/route.ts
+++ b/src/app/api/health/zerodev/route.ts
@@ -1,5 +1,5 @@
import { NextResponse } from 'next/server'
-import { fetchWithSentry } from '@/utils'
+import { fetchWithSentry } from '@/utils/sentry.utils'
/**
* ZeroDev health check endpoint
diff --git a/src/app/api/og/route.tsx b/src/app/api/og/route.tsx
index 8d67c6076..2d8b6d09a 100644
--- a/src/app/api/og/route.tsx
+++ b/src/app/api/og/route.tsx
@@ -4,13 +4,14 @@ import { NextResponse, type NextRequest } from 'next/server'
import { type PaymentLink } from '@/interfaces'
import { promises as fs } from 'fs'
import path from 'path'
-import { BASE_URL } from '@/constants'
import getOrigin from '@/lib/hosting/get-origin'
import { ReceiptCardOG } from '@/components/og/ReceiptCardOG'
-import { printableAddress, resolveAddressToUsername } from '@/utils'
+import { printableAddress } from '@/utils/general.utils'
+import { resolveAddressToUsername } from '@/utils/ens.utils'
import { isAddress } from 'viem'
import { ProfileCardOG } from '@/components/og/ProfileCardOG'
import { InviteCardOG } from '@/components/og/InviteCardOG'
+import { BASE_URL } from '@/constants/general.consts'
export const runtime = 'nodejs' //node.js instead of edge!
diff --git a/src/app/api/peanut/get-attachment-info/route.ts b/src/app/api/peanut/get-attachment-info/route.ts
index 1c0060158..e9cbfe7cc 100644
--- a/src/app/api/peanut/get-attachment-info/route.ts
+++ b/src/app/api/peanut/get-attachment-info/route.ts
@@ -1,8 +1,5 @@
import type { NextRequest } from 'next/server'
import { NextResponse } from 'next/server'
-import { getRawParamsFromLink, generateKeysFromString } from '@squirrel-labs/peanut-sdk' // Adjust the import paths according to your project structure
-import * as consts from '@/constants'
-import { fetchWithSentry } from '@/utils'
export async function POST(request: NextRequest) {
//TODO: enable if we have attachments again, using /send-link instead of
diff --git a/src/app/api/peanut/get-user-stats/route.ts b/src/app/api/peanut/get-user-stats/route.ts
index b9e063af9..a7c2ad770 100644
--- a/src/app/api/peanut/get-user-stats/route.ts
+++ b/src/app/api/peanut/get-user-stats/route.ts
@@ -1,14 +1,14 @@
// pages/api/get-user-stats.ts
import type { NextRequest } from 'next/server'
import { NextResponse } from 'next/server'
-import * as consts from '@/constants'
-import { fetchWithSentry } from '@/utils'
+import { fetchWithSentry } from '@/utils/sentry.utils'
+import { PEANUT_API_URL } from '@/constants/general.consts'
export async function POST(request: NextRequest) {
try {
const { address } = await request.json()
- const response = await fetchWithSentry(`${consts.PEANUT_API_URL}/get-user-stats`, {
+ const response = await fetchWithSentry(`${PEANUT_API_URL}/get-user-stats`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
diff --git a/src/app/api/peanut/iban/validate-bank-account-number/route.ts b/src/app/api/peanut/iban/validate-bank-account-number/route.ts
index 5e8e372f0..134301de6 100644
--- a/src/app/api/peanut/iban/validate-bank-account-number/route.ts
+++ b/src/app/api/peanut/iban/validate-bank-account-number/route.ts
@@ -1,7 +1,7 @@
import type { NextRequest } from 'next/server'
import { NextResponse } from 'next/server'
-import * as consts from '@/constants'
-import { fetchWithSentry } from '@/utils'
+import { PEANUT_API_URL } from '@/constants/general.consts'
+import { fetchWithSentry } from '@/utils/sentry.utils'
export async function POST(request: NextRequest) {
try {
@@ -12,7 +12,7 @@ export async function POST(request: NextRequest) {
return new NextResponse('Bad Request: missing required parameters', { status: 400 })
}
- const response = await fetchWithSentry(`${consts.PEANUT_API_URL}/validate-bank-account-number`, {
+ const response = await fetchWithSentry(`${PEANUT_API_URL}/validate-bank-account-number`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
diff --git a/src/app/api/peanut/iban/validate-bic/route.ts b/src/app/api/peanut/iban/validate-bic/route.ts
index cd08c39f1..b70604410 100644
--- a/src/app/api/peanut/iban/validate-bic/route.ts
+++ b/src/app/api/peanut/iban/validate-bic/route.ts
@@ -1,7 +1,7 @@
import type { NextRequest } from 'next/server'
import { NextResponse } from 'next/server'
-import * as consts from '@/constants'
-import { fetchWithSentry } from '@/utils'
+import { PEANUT_API_URL } from '@/constants/general.consts'
+import { fetchWithSentry } from '@/utils/sentry.utils'
export async function POST(request: NextRequest) {
try {
@@ -12,7 +12,7 @@ export async function POST(request: NextRequest) {
return new NextResponse('Bad Request: missing required parameters', { status: 400 })
}
- const response = await fetchWithSentry(`${consts.PEANUT_API_URL}/is-valid-bic`, {
+ const response = await fetchWithSentry(`${PEANUT_API_URL}/is-valid-bic`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
diff --git a/src/app/api/peanut/user/add-account/route.ts b/src/app/api/peanut/user/add-account/route.ts
index 4073cc8f0..a71ecff8e 100644
--- a/src/app/api/peanut/user/add-account/route.ts
+++ b/src/app/api/peanut/user/add-account/route.ts
@@ -1,8 +1,8 @@
-import * as consts from '@/constants'
-import { fetchWithSentry } from '@/utils'
+import { fetchWithSentry } from '@/utils/sentry.utils'
import { cookies } from 'next/headers'
import type { NextRequest } from 'next/server'
import { NextResponse } from 'next/server'
+import { PEANUT_API_URL } from '@/constants/general.consts'
export async function POST(request: NextRequest) {
try {
@@ -18,7 +18,7 @@ export async function POST(request: NextRequest) {
return new NextResponse('Bad Request: Missing required fields', { status: 400 })
}
- const response = await fetchWithSentry(`${consts.PEANUT_API_URL}/add-account`, {
+ const response = await fetchWithSentry(`${PEANUT_API_URL}/add-account`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
diff --git a/src/app/api/peanut/user/create-user/route.ts b/src/app/api/peanut/user/create-user/route.ts
index fec7db634..271ca4599 100644
--- a/src/app/api/peanut/user/create-user/route.ts
+++ b/src/app/api/peanut/user/create-user/route.ts
@@ -1,7 +1,7 @@
import type { NextRequest } from 'next/server'
import { NextResponse } from 'next/server'
-import * as consts from '@/constants'
-import { fetchWithSentry } from '@/utils'
+import { fetchWithSentry } from '@/utils/sentry.utils'
+import { PEANUT_API_URL } from '@/constants/general.consts'
export async function POST(request: NextRequest) {
try {
@@ -14,7 +14,7 @@ export async function POST(request: NextRequest) {
return new NextResponse('Bad Request: Missing required fields', { status: 400 })
}
- const response = await fetchWithSentry(`${consts.PEANUT_API_URL}/user/create`, {
+ const response = await fetchWithSentry(`${PEANUT_API_URL}/user/create`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
diff --git a/src/app/api/peanut/user/fetch-user/route.ts b/src/app/api/peanut/user/fetch-user/route.ts
index 67ae6a28e..93ca9b74f 100644
--- a/src/app/api/peanut/user/fetch-user/route.ts
+++ b/src/app/api/peanut/user/fetch-user/route.ts
@@ -1,7 +1,7 @@
import type { NextRequest } from 'next/server'
import { NextResponse } from 'next/server'
-import * as consts from '@/constants'
-import { fetchWithSentry } from '@/utils'
+import { fetchWithSentry } from '@/utils/sentry.utils'
+import { PEANUT_API_URL } from '@/constants/general.consts'
export const dynamic = 'force-dynamic' // Explicitly mark the route as dynamic
@@ -17,7 +17,7 @@ export async function GET(request: NextRequest) {
const uniqueKey = `${Date.now()}-${accountIdentifier}`
const response = await fetchWithSentry(
- `${consts.PEANUT_API_URL}/user/fetch?accountIdentifier=${accountIdentifier}&uniqueKey=${uniqueKey}`,
+ `${PEANUT_API_URL}/user/fetch?accountIdentifier=${accountIdentifier}&uniqueKey=${uniqueKey}`,
{
method: 'GET',
headers: {
diff --git a/src/app/api/peanut/user/get-jwt-token/route.ts b/src/app/api/peanut/user/get-jwt-token/route.ts
index 01ee00810..76dc5dbb4 100644
--- a/src/app/api/peanut/user/get-jwt-token/route.ts
+++ b/src/app/api/peanut/user/get-jwt-token/route.ts
@@ -1,7 +1,7 @@
-import * as consts from '@/constants'
-import { fetchWithSentry } from '@/utils'
+import { fetchWithSentry } from '@/utils/sentry.utils'
import { cookies } from 'next/headers'
import { NextRequest, NextResponse } from 'next/server'
+import { PEANUT_API_URL } from '@/constants/general.consts'
export async function POST(request: NextRequest) {
const { signature, message } = await request.json()
@@ -12,7 +12,7 @@ export async function POST(request: NextRequest) {
}
try {
- const response = await fetchWithSentry(`${consts.PEANUT_API_URL}/get-token`, {
+ const response = await fetchWithSentry(`${PEANUT_API_URL}/get-token`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
diff --git a/src/app/api/peanut/user/get-user-from-cookie/route.ts b/src/app/api/peanut/user/get-user-from-cookie/route.ts
index e3ad7aefe..4ee0bb93b 100644
--- a/src/app/api/peanut/user/get-user-from-cookie/route.ts
+++ b/src/app/api/peanut/user/get-user-from-cookie/route.ts
@@ -1,5 +1,5 @@
-import * as consts from '@/constants'
-import { fetchWithSentry } from '@/utils'
+import { PEANUT_API_URL } from '@/constants/general.consts'
+import { fetchWithSentry } from '@/utils/sentry.utils'
import { cookies } from 'next/headers'
import { NextRequest, NextResponse } from 'next/server'
@@ -12,7 +12,7 @@ export async function GET(_request: NextRequest) {
return new NextResponse('Bad Request: missing required parameters', { status: 400 })
}
try {
- const response = await fetchWithSentry(`${consts.PEANUT_API_URL}/get-user`, {
+ const response = await fetchWithSentry(`${PEANUT_API_URL}/get-user`, {
method: 'POST',
headers: {
Authorization: `Bearer ${token.value}`,
diff --git a/src/app/api/peanut/user/get-user-id/route.ts b/src/app/api/peanut/user/get-user-id/route.ts
index 9795db0fe..dc3c1df14 100644
--- a/src/app/api/peanut/user/get-user-id/route.ts
+++ b/src/app/api/peanut/user/get-user-id/route.ts
@@ -1,6 +1,6 @@
import { NextRequest, NextResponse } from 'next/server'
-import * as consts from '@/constants'
-import { fetchWithSentry } from '@/utils'
+import { fetchWithSentry } from '@/utils/sentry.utils'
+import { PEANUT_API_URL } from '@/constants/general.consts'
export async function POST(request: NextRequest) {
const { accountIdentifier } = await request.json()
@@ -11,7 +11,7 @@ export async function POST(request: NextRequest) {
}
try {
- const response = await fetchWithSentry(`${consts.PEANUT_API_URL}/get-user-id`, {
+ const response = await fetchWithSentry(`${PEANUT_API_URL}/get-user-id`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
diff --git a/src/app/api/peanut/user/get-user-salt/route.ts b/src/app/api/peanut/user/get-user-salt/route.ts
index fd340cda3..f336eb052 100644
--- a/src/app/api/peanut/user/get-user-salt/route.ts
+++ b/src/app/api/peanut/user/get-user-salt/route.ts
@@ -1,6 +1,6 @@
import { NextRequest, NextResponse } from 'next/server'
-import * as consts from '@/constants'
-import { fetchWithSentry } from '@/utils'
+import { fetchWithSentry } from '@/utils/sentry.utils'
+import { PEANUT_API_URL } from '@/constants/general.consts'
export async function POST(request: NextRequest) {
const { email } = await request.json()
@@ -11,7 +11,7 @@ export async function POST(request: NextRequest) {
}
try {
- const response = await fetchWithSentry(`${consts.PEANUT_API_URL}/get-user-salt`, {
+ const response = await fetchWithSentry(`${PEANUT_API_URL}/get-user-salt`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
diff --git a/src/app/api/peanut/user/login-user/route.ts b/src/app/api/peanut/user/login-user/route.ts
index 5fd2992c2..6f48f351c 100644
--- a/src/app/api/peanut/user/login-user/route.ts
+++ b/src/app/api/peanut/user/login-user/route.ts
@@ -1,5 +1,5 @@
-import * as consts from '@/constants'
-import { fetchWithSentry } from '@/utils'
+import { PEANUT_API_URL } from '@/constants/general.consts'
+import { fetchWithSentry } from '@/utils/sentry.utils'
import { cookies } from 'next/headers'
import { NextRequest, NextResponse } from 'next/server'
@@ -12,7 +12,7 @@ export async function POST(request: NextRequest) {
}
try {
- const response = await fetchWithSentry(`${consts.PEANUT_API_URL}/login-user`, {
+ const response = await fetchWithSentry(`${PEANUT_API_URL}/login-user`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
diff --git a/src/app/api/peanut/user/register-user/route.ts b/src/app/api/peanut/user/register-user/route.ts
index 02dce681c..c93f0e027 100644
--- a/src/app/api/peanut/user/register-user/route.ts
+++ b/src/app/api/peanut/user/register-user/route.ts
@@ -1,7 +1,7 @@
-import * as consts from '@/constants'
-import { fetchWithSentry } from '@/utils'
+import { fetchWithSentry } from '@/utils/sentry.utils'
import { cookies } from 'next/headers'
import { NextRequest, NextResponse } from 'next/server'
+import { PEANUT_API_URL } from '@/constants/general.consts'
export async function POST(request: NextRequest) {
const { email, hash, salt, fullName } = await request.json()
@@ -12,7 +12,7 @@ export async function POST(request: NextRequest) {
}
try {
- const response = await fetchWithSentry(`${consts.PEANUT_API_URL}/register-user`, {
+ const response = await fetchWithSentry(`${PEANUT_API_URL}/register-user`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
diff --git a/src/app/api/peanut/user/submit-profile-photo/route.ts b/src/app/api/peanut/user/submit-profile-photo/route.ts
index bddeaea41..6039aa190 100644
--- a/src/app/api/peanut/user/submit-profile-photo/route.ts
+++ b/src/app/api/peanut/user/submit-profile-photo/route.ts
@@ -1,7 +1,7 @@
-import * as consts from '@/constants'
-import { fetchWithSentry } from '@/utils'
+import { fetchWithSentry } from '@/utils/sentry.utils'
import { cookies } from 'next/headers'
import { NextRequest, NextResponse } from 'next/server'
+import { PEANUT_API_URL } from '@/constants/general.consts'
export async function POST(request: NextRequest) {
const formData = await request.formData()
@@ -23,7 +23,7 @@ export async function POST(request: NextRequest) {
const apiFormData = new FormData()
apiFormData.append('file', file)
- const response = await fetchWithSentry(`${consts.PEANUT_API_URL}/submit-profile-photo`, {
+ const response = await fetchWithSentry(`${PEANUT_API_URL}/submit-profile-photo`, {
method: 'POST',
headers: {
Authorization: `Bearer ${token.value}`,
diff --git a/src/app/api/peanut/user/update-user/route.ts b/src/app/api/peanut/user/update-user/route.ts
index a112ef6b1..15d1289f4 100644
--- a/src/app/api/peanut/user/update-user/route.ts
+++ b/src/app/api/peanut/user/update-user/route.ts
@@ -1,7 +1,8 @@
-import * as consts from '@/constants'
-import { fetchWithSentry, type BridgeKycStatus } from '@/utils'
+import { fetchWithSentry } from '@/utils/sentry.utils'
+import type { BridgeKycStatus } from '@/utils/bridge-accounts.utils'
import { cookies } from 'next/headers'
import { NextRequest, NextResponse } from 'next/server'
+import { PEANUT_API_URL } from '@/constants/general.consts'
type UserPayload = {
userId: string
@@ -50,7 +51,7 @@ export async function POST(request: NextRequest) {
payload.fullName = fullName
}
- const response = await fetchWithSentry(`${consts.PEANUT_API_URL}/update-user`, {
+ const response = await fetchWithSentry(`${PEANUT_API_URL}/update-user`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
diff --git a/src/app/api/proxy/[...slug]/route.ts b/src/app/api/proxy/[...slug]/route.ts
index 2b5ffdcc6..773951e2f 100644
--- a/src/app/api/proxy/[...slug]/route.ts
+++ b/src/app/api/proxy/[...slug]/route.ts
@@ -1,6 +1,6 @@
-import { PEANUT_API_URL } from '@/constants'
-import { fetchWithSentry } from '@/utils'
+import { fetchWithSentry } from '@/utils/sentry.utils'
import { NextRequest, NextResponse } from 'next/server'
+import { PEANUT_API_URL } from '@/constants/general.consts'
export const maxDuration = 300 // vercel timeout
diff --git a/src/app/api/proxy/get/[...slug]/route.ts b/src/app/api/proxy/get/[...slug]/route.ts
index 5af77de02..70550e88f 100644
--- a/src/app/api/proxy/get/[...slug]/route.ts
+++ b/src/app/api/proxy/get/[...slug]/route.ts
@@ -1,6 +1,6 @@
-import { PEANUT_API_URL } from '@/constants'
-import { fetchWithSentry } from '@/utils'
+import { fetchWithSentry } from '@/utils/sentry.utils'
import { NextRequest, NextResponse } from 'next/server'
+import { PEANUT_API_URL } from '@/constants/general.consts'
export async function GET(request: NextRequest) {
const separator = '/api/proxy/get/'
diff --git a/src/app/api/proxy/patch/[...slug]/route.ts b/src/app/api/proxy/patch/[...slug]/route.ts
index 8080d11c8..3ddccab83 100644
--- a/src/app/api/proxy/patch/[...slug]/route.ts
+++ b/src/app/api/proxy/patch/[...slug]/route.ts
@@ -1,6 +1,6 @@
-import { PEANUT_API_URL } from '@/constants'
-import { fetchWithSentry } from '@/utils'
+import { fetchWithSentry } from '@/utils/sentry.utils'
import { NextRequest, NextResponse } from 'next/server'
+import { PEANUT_API_URL } from '@/constants/general.consts'
export async function PATCH(request: NextRequest) {
const separator = '/api/proxy/patch/'
diff --git a/src/app/api/proxy/withFormData/[...slug]/route.ts b/src/app/api/proxy/withFormData/[...slug]/route.ts
index 947216215..0b29016d8 100644
--- a/src/app/api/proxy/withFormData/[...slug]/route.ts
+++ b/src/app/api/proxy/withFormData/[...slug]/route.ts
@@ -1,6 +1,6 @@
import { NextRequest, NextResponse } from 'next/server'
-import { PEANUT_API_URL } from '@/constants'
-import { fetchWithSentry } from '@/utils'
+import { fetchWithSentry } from '@/utils/sentry.utils'
+import { PEANUT_API_URL } from '@/constants/general.consts'
async function handleFormDataRequest(request: NextRequest, method: string) {
const separator = '/api/proxy/withFormData/'
diff --git a/src/app/api/recent-transactions/route.ts b/src/app/api/recent-transactions/route.ts
index fc0183e7e..28f05d2cd 100644
--- a/src/app/api/recent-transactions/route.ts
+++ b/src/app/api/recent-transactions/route.ts
@@ -1,4 +1,4 @@
-import { fetchWithSentry } from '@/utils'
+import { fetchWithSentry } from '@/utils/sentry.utils'
import { NextRequest } from 'next/server'
interface TransferDetails {
diff --git a/src/app/api/send-discord-notification/route.ts b/src/app/api/send-discord-notification/route.ts
index 535965cd5..42dc4e2cd 100644
--- a/src/app/api/send-discord-notification/route.ts
+++ b/src/app/api/send-discord-notification/route.ts
@@ -1,5 +1,5 @@
import type { NextRequest } from 'next/server'
-import { fetchWithSentry } from '@/utils'
+import { fetchWithSentry } from '@/utils/sentry.utils'
export async function POST(request: NextRequest) {
try {
diff --git a/src/app/invite/page.tsx b/src/app/invite/page.tsx
index 6a6fa124f..ad6f00809 100644
--- a/src/app/invite/page.tsx
+++ b/src/app/invite/page.tsx
@@ -1,8 +1,8 @@
import InvitesPage from '@/components/Invites/InvitesPage'
-import { BASE_URL } from '@/constants'
import getOrigin from '@/lib/hosting/get-origin'
import { type Metadata } from 'next'
import { validateInviteCode } from '../actions/invites'
+import { BASE_URL } from '@/constants/general.consts'
export const dynamic = 'force-dynamic'
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 5880f53b1..73ec69d1c 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,16 +1,42 @@
-import { ConsoleGreeting } from '@/components/Global/ConsoleGreeting'
-import { ScreenOrientationLocker } from '@/components/Global/ScreenOrientationLocker'
-import { TranslationSafeWrapper } from '@/components/Global/TranslationSafeWrapper'
-import { PeanutProvider } from '@/config'
-import { ContextProvider } from '@/context'
-import { FooterVisibilityProvider } from '@/context/footerVisibility'
+import { ClientProviders } from './ClientProviders'
import { type Viewport } from 'next'
import { Londrina_Solid, Roboto_Flex, Sniglet } from 'next/font/google'
import localFont from 'next/font/local'
import Script from 'next/script'
import '../styles/globals.css'
-import { generateMetadata } from './metadata'
-import { PEANUT_API_URL } from '@/constants/general.consts'
+import { PEANUT_API_URL, BASE_URL } from '@/constants/general.consts'
+import { type Metadata } from 'next'
+
+const baseUrl = BASE_URL || 'https://peanut.me'
+
+export const metadata: Metadata = {
+ title: 'Peanut - Instant Global P2P Payments in Digital Dollars',
+ description:
+ 'Send and receive money instantly with Peanut - a fast, peer-to-peer payments app powered by digital dollars. Easily transfer funds across borders. Enjoy cheap, instant remittances and cash out to local banks without technical hassle.',
+ metadataBase: new URL(baseUrl),
+ icons: { icon: '/favicon.ico' },
+ keywords:
+ 'peer-to-peer payments, send money instantly, request money, fast global transfers, remittances, digital dollar transfers, Latin America, Argentina, Brazil, P2P payments, crypto payments, stablecoin, digital dollars',
+ openGraph: {
+ type: 'website',
+ title: 'Peanut - Instant Global P2P Payments in Digital Dollars',
+ description:
+ 'Send and receive money instantly with Peanut - a fast, peer-to-peer payments app powered by digital dollars.',
+ url: baseUrl,
+ siteName: 'Peanut',
+ images: [{ url: '/metadata-img.png', width: 1200, height: 630, alt: 'Peanut' }],
+ },
+ twitter: {
+ card: 'summary_large_image',
+ title: 'Peanut - Instant Global P2P Payments in Digital Dollars',
+ description:
+ 'Send and receive money instantly with Peanut - a fast, peer-to-peer payments app powered by digital dollars.',
+ images: ['/metadata-img.png'],
+ creator: '@PeanutProtocol',
+ site: '@PeanutProtocol',
+ },
+ applicationName: process.env.NODE_ENV === 'development' ? 'Peanut Dev' : 'Peanut',
+}
const roboto = Roboto_Flex({
subsets: ['latin'],
@@ -48,15 +74,6 @@ const robotoFlexBold = localFont({
variable: '--font-roboto-flex-bold',
})
-export const metadata = generateMetadata({
- title: 'Peanut - Instant Global P2P Payments in Digital Dollars',
- description:
- 'Send and receive money instantly with Peanut - a fast, peer-to-peer payments app powered by digital dollars. Easily transfer funds across borders. Enjoy cheap, instant remittances and cash out to local banks without technical hassle.',
- image: '/metadata-img.png',
- keywords:
- 'peer-to-peer payments, send money instantly, request money, fast global transfers, remittances, digital dollar transfers, Latin America, Argentina, Brazil, P2P payments, crypto payments, stablecoin, digital dollars',
-})
-
export const viewport: Viewport = {
width: 'device-width',
initialScale: 1,
@@ -74,12 +91,13 @@ export default function RootLayout({ children }: { children: React.ReactNode })
- {/* CRITICAL PATH: Optimize QR payment flow loading */}
- {/* Prefetch /qr-pay route + DNS for Manteca API */}
-
+ {/* DNS prefetch for API */}
+ {/* Prefetch /qr-pay route - disabled in dev to avoid 9s+ compile time */}
+ {process.env.NODE_ENV !== 'development' && }
+
{/* Service Worker Registration: Register early for offline support and caching */}
{/* CRITICAL: Must run before React hydration to enable offline-first PWA */}
{process.env.NODE_ENV !== 'development' && (
@@ -138,15 +156,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
-
-
-
- {children}
-
-
-
+ {children}
)
diff --git a/src/app/maintenance/page.tsx b/src/app/maintenance/page.tsx
index e452cd745..7f1fe2def 100644
--- a/src/app/maintenance/page.tsx
+++ b/src/app/maintenance/page.tsx
@@ -1,6 +1,6 @@
'use client'
import chillPeanutAnim from '@/animations/GIF_ALPHA_BACKGORUND/512X512_ALPHA_GIF_konradurban_01.gif'
-import { Button } from '@/components/0_Bruddle'
+import { Button } from '@/components/0_Bruddle/Button'
import Image from 'next/image'
import { useRouter } from 'next/navigation'
diff --git a/src/app/metadata.ts b/src/app/metadata.ts
index 4832b7d44..c7aeb73c7 100644
--- a/src/app/metadata.ts
+++ b/src/app/metadata.ts
@@ -1,4 +1,4 @@
-import { BASE_URL } from '@/constants'
+import { BASE_URL } from '@/constants/general.consts'
import { type Metadata } from 'next'
export function generateMetadata({
diff --git a/src/app/page.tsx b/src/app/page.tsx
index a155a4d03..676202274 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -11,10 +11,10 @@ import {
SendInSeconds,
YourMoney,
RegulatedRails,
- TweetCarousel,
} from '@/components/LandingPage'
import Footer from '@/components/LandingPage/Footer'
import Manteca from '@/components/LandingPage/Manteca'
+import TweetCarousel from '@/components/LandingPage/TweetCarousel'
import { useFooterVisibility } from '@/context/footerVisibility'
import { useEffect, useState, useRef } from 'react'
diff --git a/src/app/quests/[questId]/page.tsx b/src/app/quests/[questId]/page.tsx
index 7e7033157..88b8654e0 100644
--- a/src/app/quests/[questId]/page.tsx
+++ b/src/app/quests/[questId]/page.tsx
@@ -8,7 +8,7 @@ import Image from 'next/image'
import borderCloud from '@/assets/illustrations/border-cloud.svg'
import { Star } from '@/assets'
import { useEffect, useState, useCallback } from 'react'
-import { Button } from '@/components/0_Bruddle'
+import { Button } from '@/components/0_Bruddle/Button'
import { QuestLeaderboard } from '../components/QuestLeaderboard'
import { UserRankCard } from '../components/UserRankCard'
import { QUEST_CONFIG, getQuestStatus, type QuestId } from '../constants'
diff --git a/src/app/quests/components/QuestsHero.tsx b/src/app/quests/components/QuestsHero.tsx
index 8fe928430..4fbc2434a 100644
--- a/src/app/quests/components/QuestsHero.tsx
+++ b/src/app/quests/components/QuestsHero.tsx
@@ -8,7 +8,7 @@ import handPointing from '@/assets/illustrations/got-it-hand.svg'
import { Star } from '@/assets'
import { useRouter, useSearchParams } from 'next/navigation'
import Image from 'next/image'
-import { Button } from '@/components/0_Bruddle'
+import { Button } from '@/components/0_Bruddle/Button'
import { QUEST_CONFIG, getQuestStatus } from '../constants'
import { useAllQuestsLeaderboards } from '../hooks/useQuests'
import { useAuth } from '@/context/authContext'
diff --git a/src/app/quests/explore/page.tsx b/src/app/quests/explore/page.tsx
index 1e6ef4059..cfaa2e94c 100644
--- a/src/app/quests/explore/page.tsx
+++ b/src/app/quests/explore/page.tsx
@@ -5,10 +5,9 @@ import { useRouter, useSearchParams } from 'next/navigation'
import { motion } from 'framer-motion'
import Image from 'next/image'
import borderCloud from '@/assets/illustrations/border-cloud.svg'
-import handPointing from '@/assets/illustrations/got-it-hand.svg'
import { Star } from '@/assets'
import { useEffect, useState, useMemo, useCallback } from 'react'
-import { Button } from '@/components/0_Bruddle'
+import { Button } from '@/components/0_Bruddle/Button'
import { QuestLeaderboard } from '../components/QuestLeaderboard'
import { UserRankCard } from '../components/UserRankCard'
import { QUEST_CONFIG, getQuestStatus } from '../constants'
diff --git a/src/app/receipt/[entryId]/page.tsx b/src/app/receipt/[entryId]/page.tsx
index 3f3a6e1d4..2741503c6 100644
--- a/src/app/receipt/[entryId]/page.tsx
+++ b/src/app/receipt/[entryId]/page.tsx
@@ -10,9 +10,10 @@ import { TransactionDetailsReceipt } from '@/components/TransactionDetails/Trans
import NavHeader from '@/components/Global/NavHeader'
import { generateMetadata as generateBaseMetadata } from '@/app/metadata'
import { type Metadata } from 'next'
-import { BASE_URL } from '@/constants'
-import { formatAmount, formatCurrency, isStableCoin } from '@/utils'
+import { BASE_URL } from '@/constants/general.consts'
+import { formatAmount, formatCurrency, isStableCoin } from '@/utils/general.utils'
import getOrigin from '@/lib/hosting/get-origin'
+import PageContainer from '@/components/0_Bruddle/PageContainer'
// Helper function to map transaction card type to OG image type
function mapTransactionTypeToOGType(transactionType: string): 'send' | 'request' {
@@ -186,13 +187,13 @@ export default async function ReceiptPage({
}
const { transactionDetails } = mapTransactionDataForDrawer(entry)
return (
-
- {/* Popular tokens section - rendered only when there is no wallet connected */}
- {showPopularTokensList && (
-
- {currentView === 'INITIAL' && (
-
+
- setCurrencyAmount(value || '')}
- currencyAmount={currencyAmount}
- showRequestPotInitialView={!!requestId}
- />
-
- )}
- {currentView === 'CONFIRM' && (
-
- {!requestId && showActionList && (
-
-
-
- ) : (
-
+
)
}
diff --git a/src/app/robots.ts b/src/app/robots.ts
index 2a5975684..d9d154d42 100644
--- a/src/app/robots.ts
+++ b/src/app/robots.ts
@@ -1,5 +1,5 @@
import type { MetadataRoute } from 'next'
-import { BASE_URL } from '@/constants'
+import { BASE_URL } from '@/constants/general.consts'
export default function robots(): MetadataRoute.Robots {
return {
diff --git a/src/app/send/[...username]/page.tsx b/src/app/send/[...username]/page.tsx
index ebb8fbcf8..04db24b18 100644
--- a/src/app/send/[...username]/page.tsx
+++ b/src/app/send/[...username]/page.tsx
@@ -1,6 +1,7 @@
-import PaymentPage from '@/app/[...recipient]/client'
import { generateMetadata as generateBaseMetadata } from '@/app/metadata'
import PageContainer from '@/components/0_Bruddle/PageContainer'
+import { ValidatedUsernameWrapper } from '@/components/Username/ValidatedUsernameWrapper'
+import { DirectSendPageWrapper } from '@/features/payments/flows/direct-send/DirectSendPageWrapper'
import { type Metadata } from 'next'
import { use } from 'react'
@@ -11,12 +12,13 @@ type PageProps = {
export default function DirectPaymentPage(props: PageProps) {
const params = use(props.params)
const usernameSegments = params.username ?? []
-
- const recipient = usernameSegments
+ const username = usernameSegments[0] ? decodeURIComponent(usernameSegments[0]) : ''
return (
-
+
)
}
diff --git a/src/assets/exchanges/index.ts b/src/assets/exchanges/index.ts
index 66a9fb97b..c0705fca6 100644
--- a/src/assets/exchanges/index.ts
+++ b/src/assets/exchanges/index.ts
@@ -1,4 +1 @@
export { default as BINANCE_LOGO } from './binance.svg'
-export { default as LEMON_LOGO } from './lemon.svg'
-export { default as RIPIO_LOGO } from './ripio.svg'
-
diff --git a/src/assets/exchanges/lemon.svg b/src/assets/exchanges/lemon.svg
deleted file mode 100644
index 677201915..000000000
--- a/src/assets/exchanges/lemon.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
diff --git a/src/assets/exchanges/ripio.svg b/src/assets/exchanges/ripio.svg
deleted file mode 100644
index a172f071b..000000000
--- a/src/assets/exchanges/ripio.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/src/assets/wallets/coinbase.svg b/src/assets/wallets/coinbase.svg
deleted file mode 100644
index 37d22befe..000000000
--- a/src/assets/wallets/coinbase.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-
diff --git a/src/assets/wallets/index.ts b/src/assets/wallets/index.ts
index f31d91c8e..c50847abf 100644
--- a/src/assets/wallets/index.ts
+++ b/src/assets/wallets/index.ts
@@ -1,5 +1,2 @@
-export { default as COINBASE_LOGO } from './coinbase.svg'
export { default as METAMASK_LOGO } from './metamask.svg'
-export { default as RAINBOW_LOGO } from './rainbow.svg'
-export { default as TRUST_WALLET_LOGO } from './trust_wallet.svg'
export { default as TRUST_WALLET_SMALL_LOGO } from './trust_wallet_2.svg'
diff --git a/src/assets/wallets/rainbow.svg b/src/assets/wallets/rainbow.svg
deleted file mode 100644
index 7fce68b8d..000000000
--- a/src/assets/wallets/rainbow.svg
+++ /dev/null
@@ -1,64 +0,0 @@
-
diff --git a/src/assets/wallets/trust_wallet.svg b/src/assets/wallets/trust_wallet.svg
deleted file mode 100644
index ee816590c..000000000
--- a/src/assets/wallets/trust_wallet.svg
+++ /dev/null
@@ -1,14 +0,0 @@
-
diff --git a/src/components/0_Bruddle/Button.tsx b/src/components/0_Bruddle/Button.tsx
index d73c434a0..a6604a5a5 100644
--- a/src/components/0_Bruddle/Button.tsx
+++ b/src/components/0_Bruddle/Button.tsx
@@ -27,7 +27,7 @@ export interface ButtonProps extends React.ButtonHTMLAttributes(
if (!icon || loading) return null
return (
+ {chainSymbol &&
+ )
+}
+
+export default ChainChip
diff --git a/src/components/AddMoney/components/CryptoMethodDrawer.tsx b/src/components/AddMoney/components/CryptoMethodDrawer.tsx
deleted file mode 100644
index 276a4f9c0..000000000
--- a/src/components/AddMoney/components/CryptoMethodDrawer.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-'use client'
-
-import { ARBITRUM_ICON, OTHER_CHAINS_ICON } from '@/assets'
-import { Card } from '@/components/0_Bruddle'
-import { Drawer, DrawerContent, DrawerTitle } from '@/components/Global/Drawer'
-import Image from 'next/image'
-import { useRouter } from 'next/navigation'
-import React, { type Dispatch, type SetStateAction, useState } from 'react'
-import TokenAndNetworkConfirmationModal from '@/components/Global/TokenAndNetworkConfirmationModal'
-
-const CryptoMethodDrawer = ({
- isDrawerOpen,
- setisDrawerOpen,
- closeDrawer,
-}: {
- isDrawerOpen: boolean
- setisDrawerOpen: Dispatch>
- closeDrawer: () => void
-}) => {
- const router = useRouter()
- const [showRiskModal, setShowRiskModal] = useState(false)
-
- return (
- <>
-
-
- Select a deposit method
-
-
- {
- setShowRiskModal(false)
- setisDrawerOpen(true)
- }}
- onAccept={() => {
- router.push('/add-money/crypto')
- }}
- isVisible={showRiskModal}
- />
-
- )
-}
-
-export default CryptoMethodDrawer
diff --git a/src/components/AddMoney/components/CryptoSourceListCard.tsx b/src/components/AddMoney/components/CryptoSourceListCard.tsx
deleted file mode 100644
index ca1ce90f4..000000000
--- a/src/components/AddMoney/components/CryptoSourceListCard.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-'use client'
-import AvatarWithBadge from '@/components/Profile/AvatarWithBadge'
-import Image, { type StaticImageData } from 'next/image'
-import { twMerge } from 'tailwind-merge'
-import { type CryptoSource } from '../consts'
-import { ActionListCard } from '@/components/ActionListCard'
-
-interface CryptoSourceListCardProps {
- sources: CryptoSource[]
- onItemClick: (source: CryptoSource) => void
-}
-
-const GenericIcon = ({ type }: { type: 'exchange' | 'wallet' }) => (
- >
- setUsdAmount: React.Dispatch>
error: string | null
setCurrencyAmount: (amount: string | undefined) => void
currencyData?: ICurrency
+ setCurrentDenomination?: (denomination: string) => void
}
const InputAmountStep = ({
@@ -27,9 +27,9 @@ const InputAmountStep = ({
onSubmit,
isLoading,
error,
- setUsdAmount,
currencyData,
setCurrencyAmount,
+ setCurrentDenomination,
}: InputAmountStepProps) => {
const router = useRouter()
@@ -43,20 +43,21 @@ const InputAmountStep = ({
setTokenAmount(e ?? '')}
- setUsdValue={setUsdAmount}
- currency={
+ setIsDrawerOpen(false)}
+ {
+ setIsSupportedTokensModalOpen(false)
+ }}
+ onAccept={() => {
+ router.push('/add-money/crypto')
+ }}
+ isVisible={isSupportedTokensModalOpen}
/>
)}
= ({
const [savedAccounts, setSavedAccounts] = useState([])
// local flag only for add flow; for withdraw we derive from context
const [localShowAllMethods, setLocalShowAllMethods] = useState(false)
- const [isDrawerOpen, setIsDrawerOpen] = useState(false)
+ const [isSupportedTokensModalOpen, setIsSupportedTokensModalOpen] = useState(false)
const [, startTransition] = useTransition()
const searchParams = useSearchParams()
const currencyCode = searchParams.get('currencyCode')
@@ -129,7 +134,7 @@ export const AddWithdrawRouterView: FC = ({
}
if (flow === 'add' && method.id === 'crypto') {
- setIsDrawerOpen(true)
+ setIsSupportedTokensModalOpen(true)
return
}
@@ -158,6 +163,9 @@ export const AddWithdrawRouterView: FC = ({
const defaultBackNavigation = () => router.push('/home')
+ // check if we're coming from request fulfillment or similar flow
+ const fromRequestFulfillment = typeof window !== 'undefined' && getFromLocalStorage('fromRequestFulfillment')
+
if (isLoadingPreferences) {
return (
= ({
{
- if (shouldShowAllMethods) {
+ // if coming from request fulfillment or similar external flow, go back immediately
+ if (fromRequestFulfillment) {
+ if (onBackClick) {
+ onBackClick()
+ } else {
+ defaultBackNavigation()
+ }
+ return
+ }
+
+ // otherwise, use toggle logic for better ux when user manually navigated to "select new method"
+ if (shouldShowAllMethods && (recentMethodsState.length > 0 || savedAccounts.length > 0)) {
setShouldShowAllMethods(false)
} else if (onBackClick) {
onBackClick()
@@ -274,10 +297,17 @@ export const AddWithdrawRouterView: FC = ({
{
// from send flow (bank): set method in context and stay on /withdraw?method=bank
if (flow === 'withdraw' && isBankFromSend) {
+ if (isMantecaCountry(country.path)) {
+ const route = `/withdraw/manteca?method=bank-transfer&country=${country.path}`
+ startTransition(() => {
+ router.push(route)
+ })
+ return
+ }
+
// set selected method and let withdraw page move to amount input
setSelectedMethod({
type: 'bridge',
@@ -302,7 +332,7 @@ export const AddWithdrawRouterView: FC = ({
}}
onCryptoClick={() => {
if (flow === 'add') {
- setIsDrawerOpen(true)
+ setIsSupportedTokensModalOpen(true)
} else {
// preserve method param if coming from send flow (though crypto shouldn't show this screen)
const queryParams = methodParam ? `?method=${methodParam}` : ''
@@ -320,10 +350,15 @@ export const AddWithdrawRouterView: FC = ({
}}
flow={flow}
/>
- setIsDrawerOpen(false)}
+
+ {
+ setIsSupportedTokensModalOpen(false)
+ }}
+ onAccept={() => {
+ router.push('/add-money/crypto')
+ }}
+ isVisible={isSupportedTokensModalOpen}
/>
)
diff --git a/src/components/AddWithdraw/DynamicBankAccountForm.tsx b/src/components/AddWithdraw/DynamicBankAccountForm.tsx
index f13c3eea0..a2ffab55d 100644
--- a/src/components/AddWithdraw/DynamicBankAccountForm.tsx
+++ b/src/components/AddWithdraw/DynamicBankAccountForm.tsx
@@ -12,16 +12,15 @@ import { validateIban, validateBic, isValidRoutingNumber } from '@/utils/bridge-
import ErrorAlert from '@/components/Global/ErrorAlert'
import { getBicFromIban } from '@/app/actions/ibanToBic'
import PeanutActionDetailsCard, { type PeanutActionDetailsCardProps } from '../Global/PeanutActionDetailsCard'
-import { PEANUT_WALLET_TOKEN_SYMBOL } from '@/constants'
import { useWithdrawFlow } from '@/context/WithdrawFlowContext'
import { getCountryFromIban, validateMXCLabeAccount, validateUSBankAccount } from '@/utils/withdraw.utils'
import useSavedAccounts from '@/hooks/useSavedAccounts'
import { useAppDispatch, useAppSelector } from '@/redux/hooks'
import { bankFormActions } from '@/redux/slices/bank-form-slice'
import { useDebounce } from '@/hooks/useDebounce'
-import { Icon } from '../Global/Icons/Icon'
import { twMerge } from 'tailwind-merge'
import { MX_STATES, US_STATES } from '@/constants/stateCodes.consts'
+import { PEANUT_WALLET_TOKEN_SYMBOL } from '@/constants/zerodev.consts'
const isIBANCountry = (country: string) => {
return BRIDGE_ALPHA3_TO_ALPHA2[country.toUpperCase()] !== undefined
@@ -31,6 +30,7 @@ export type IBankAccountDetails = {
name?: string
firstName: string
lastName: string
+ accountOwnerName?: string // single field for withdraw flow
email: string
accountNumber: string
bic: string
@@ -78,8 +78,6 @@ export const DynamicBankAccountForm = forwardRef<{ handleSubmit: () => void }, D
const [submissionError, setSubmissionError] = useState(null)
const { country: countryNameParams } = useParams()
const { amountToWithdraw, setSelectedBankAccount } = useWithdrawFlow()
- const [firstName, ...lastNameParts] = (user?.user.fullName ?? '').split(' ')
- const lastName = lastNameParts.join(' ')
const router = useRouter()
const savedAccounts = useSavedAccounts()
const [isCheckingBICValid, setisCheckingBICValid] = useState(false)
@@ -90,6 +88,9 @@ export const DynamicBankAccountForm = forwardRef<{ handleSubmit: () => void }, D
// Get persisted form data from Redux
const persistedFormData = useAppSelector((state) => state.bankForm.formData)
+ // for claim flow: pre-fill accountOwnerName from user if logged in, for withdraw flow: keep empty
+ const defaultAccountOwnerName = flow === 'claim' && user?.user.fullName ? user.user.fullName : ''
+
const {
control,
handleSubmit,
@@ -99,9 +100,10 @@ export const DynamicBankAccountForm = forwardRef<{ handleSubmit: () => void }, D
formState: { errors, isValid, isValidating, touchedFields },
} = useForm({
defaultValues: {
- firstName: firstName ?? '',
- lastName: lastName ?? '',
- email: user?.user.email ?? '',
+ firstName: '', // kept for backwards compatibility but not used in UI
+ lastName: '', // kept for backwards compatibility but not used in UI
+ accountOwnerName: defaultAccountOwnerName,
+ email: flow === 'claim' ? (user?.user.email ?? '') : '', // only pre-fill email in claim flow
accountNumber: '',
bic: '',
routingNumber: '',
@@ -170,7 +172,24 @@ export const DynamicBankAccountForm = forwardRef<{ handleSubmit: () => void }, D
const accountNumber = isMx ? data.clabe : data.accountNumber
- const { firstName, lastName } = data
+ // split accountOwnerName into first and last name for all flows
+ // note: bridge api requires both first_name and last_name for individual accounts,
+ // so we validate that accountOwnerName contains at least 2 words in the form
+ let firstName: string
+ let lastName: string
+
+ if (data.accountOwnerName) {
+ // split the trimmed name into parts using one or more whitespace characters as the separator
+ // this allows to handle cases where the name has multiple parts like "Peanut Guy" or "Happy Peanut Guy"
+ const nameParts = data.accountOwnerName.trim().split(/\s+/)
+ firstName = nameParts[0] || ''
+ lastName = nameParts.slice(1).join(' ') || ''
+ } else {
+ // fallback to firstName/lastName if accountOwnerName is not set (backwards compatibility)
+ firstName = data.firstName || ''
+ lastName = data.lastName || ''
+ }
+
let bic = data.bic || getValues('bic')
const iban = data.iban || getValues('iban')
@@ -204,8 +223,8 @@ export const DynamicBankAccountForm = forwardRef<{ handleSubmit: () => void }, D
accountNumber: isIban ? '' : data.accountNumber,
bic: bic,
country,
- firstName: data.firstName.trim(),
- lastName: data.lastName.trim(),
+ firstName: firstName.trim(),
+ lastName: lastName.trim(),
name: data.name,
})
if (result.error) {
@@ -216,8 +235,8 @@ export const DynamicBankAccountForm = forwardRef<{ handleSubmit: () => void }, D
const formDataToSave = {
...data,
country,
- firstName: data.firstName.trim(),
- lastName: data.lastName.trim(),
+ firstName: firstName.trim(),
+ lastName: lastName.trim(),
}
dispatch(bankFormActions.setFormData(formDataToSave))
setIsSubmitting(false)
@@ -335,16 +354,35 @@ export const DynamicBankAccountForm = forwardRef<{ handleSubmit: () => void }, D
}}
className="space-y-4"
>
+ {/* CLAIM FLOW: show name field for guest users or logged-in users without fullName */}
{flow === 'claim' && !user?.user.userId && (
@@ -58,7 +65,7 @@ export const BadgeStatusDrawer = ({ isOpen, onClose, badge }: BadgeStatusDrawerP
title=""
generateText={() =>
Promise.resolve(
- `${badge.description}\nI just unlocked a ${badge.name} badge on Peanut!`
+ `I earned ${badge.name} badge on Peanut!\n\nJoin Peanut now and start earning points, unlocking achievements and moving money worldwide\n\n${profileLink}`
)
}
>
diff --git a/src/components/Badges/BadgesRow.tsx b/src/components/Badges/BadgesRow.tsx
index 91701128f..bda161c90 100644
--- a/src/components/Badges/BadgesRow.tsx
+++ b/src/components/Badges/BadgesRow.tsx
@@ -5,7 +5,7 @@ import Image from 'next/image'
import { useEffect, useMemo, useRef, useState, useCallback } from 'react'
import { Tooltip } from '../Tooltip'
import { twMerge } from 'tailwind-merge'
-import { Button } from '../0_Bruddle'
+import { Button } from '@/components/0_Bruddle/Button'
import { Icon } from '../Global/Icons/Icon'
import { getBadgeIcon, getPublicBadgeDescription } from './badge.utils'
@@ -31,7 +31,7 @@ interface BadgesRowProps {
* - Tooltips showing badge name and description on hover
* - Automatic sorting by earned date (newest first)
*/
-export function BadgesRow({ badges, className, isSelfProfile = true }: BadgesRowProps) {
+const BadgesRow = ({ badges, className, isSelfProfile = true }: BadgesRowProps) => {
const viewportRef = useRef(null)
const [visibleCount, setVisibleCount] = useState(4)
const [startIdx, setStartIdx] = useState(0)
diff --git a/src/components/Claim/Claim.consts.ts b/src/components/Claim/Claim.consts.ts
index 877d28683..e33d64289 100644
--- a/src/components/Claim/Claim.consts.ts
+++ b/src/components/Claim/Claim.consts.ts
@@ -1,8 +1,8 @@
-import * as consts from '@/constants'
import * as interfaces from '@/interfaces'
import { type IOfframpSuccessScreenProps, type IOfframpConfirmScreenProps } from '../Offramp/Offramp.consts'
import { type ClaimLinkData } from '@/services/sendLinks'
import { type PeanutCrossChainRoute } from '@/services/swap'
+import type { IOfframpForm } from '@/constants/cashout.consts'
export type ClaimType = 'claim' | 'claimxchain'
export type ClaimScreens = 'INITIAL' | 'CONFIRM' | 'SUCCESS'
@@ -48,8 +48,8 @@ export interface IClaimScreenProps {
setHasFetchedRoute: (fetched: boolean) => void
recipientType: interfaces.RecipientType
setRecipientType: (type: interfaces.RecipientType) => void
- offrampForm: consts.IOfframpForm
- setOfframpForm: (form: consts.IOfframpForm) => void
+ offrampForm: IOfframpForm
+ setOfframpForm: (form: IOfframpForm) => void
isOfframpPossible: boolean
userType: 'NEW' | 'EXISTING' | undefined
setUserType: (type: 'NEW' | 'EXISTING' | undefined) => void
diff --git a/src/components/Claim/Claim.tsx b/src/components/Claim/Claim.tsx
index c2a41ced0..36bc6fbc2 100644
--- a/src/components/Claim/Claim.tsx
+++ b/src/components/Claim/Claim.tsx
@@ -1,13 +1,11 @@
'use client'
import { generateKeysFromString } from '@squirrel-labs/peanut-sdk'
-import { useCallback, useContext, useEffect, useMemo, useState } from 'react'
+import { useContext, useEffect, useMemo, useState } from 'react'
import { fetchTokenDetails, fetchTokenPrice } from '@/app/actions/tokens'
-import { Button } from '@/components/0_Bruddle'
import { type StatusType } from '@/components/Global/Badges/StatusBadge'
import { TransactionDetailsReceipt } from '@/components/TransactionDetails/TransactionDetailsReceipt'
import { type TransactionDetails, REWARD_TOKENS } from '@/components/TransactionDetails/transactionTransformer'
-import * as consts from '@/constants'
import { tokenSelectorContext } from '@/context'
import { useAuth } from '@/context/authContext'
import { useTransactionDetailsDrawer } from '@/hooks/useTransactionDetailsDrawer'
@@ -16,7 +14,14 @@ import { useUserInteractions } from '@/hooks/useUserInteractions'
import { useWallet } from '@/hooks/wallet/useWallet'
import * as interfaces from '@/interfaces'
import { ESendLinkStatus, getParamsFromLink, sendLinksApi, type ClaimLinkData } from '@/services/sendLinks'
-import { getInitialsFromName, getTokenDetails, isStableCoin } from '@/utils'
+import {
+ getInitialsFromName,
+ getTokenDetails,
+ isStableCoin,
+ getChainName,
+ getTokenLogo,
+ getChainLogo,
+} from '@/utils/general.utils'
import * as Sentry from '@sentry/nextjs'
import { useQuery } from '@tanstack/react-query'
import type { Hash } from 'viem'
@@ -31,6 +36,7 @@ import { twMerge } from 'tailwind-merge'
import { ClaimBankFlowStep, useClaimBankFlow } from '@/context/ClaimBankFlowContext'
import { useSearchParams } from 'next/navigation'
import { useHaptic } from 'use-haptic'
+import type { IOfframpForm } from '@/constants/cashout.consts'
export const Claim = ({}) => {
const [linkUrl, setLinkUrl] = useState('')
@@ -53,7 +59,7 @@ export const Claim = ({}) => {
const [hasFetchedRoute, setHasFetchedRoute] = useState(false)
const [recipientType, setRecipientType] = useState('address')
- const [offrampForm, setOfframpForm] = useState({
+ const [offrampForm, setOfframpForm] = useState({
name: '',
email: '',
password: '',
@@ -130,26 +136,56 @@ export const Claim = ({}) => {
const rewardData = REWARD_TOKENS[claimLinkData.tokenAddress.toLowerCase()]
+ // determine direction based on user role and status
+ let direction: TransactionDetails['direction'] = 'send'
+ if (status === 'completed') {
+ // if link is claimed, show as send from sender's perspective
+ direction = 'send'
+ }
+
+ // determine recipient name
+ const recipientName =
+ claimLinkData.claim?.recipient?.username ?? claimLinkData.claim?.recipientAddress ?? 'Send via Link'
+
+ // find the claimed event for timestamp
+ const claimedEvent = claimLinkData.events?.find((e) => e.status === 'CLAIMED')
+
let details: Partial = {
id: claimLinkData.pubKey,
+ direction,
status,
amount: Number(formatUnits(claimLinkData.amount, tokenDetails?.decimals ?? 6)),
date: new Date(claimLinkData.createdAt),
+ createdAt: new Date(claimLinkData.createdAt),
+ claimedAt: claimedEvent ? new Date(claimedEvent.timestamp) : undefined,
tokenSymbol: tokenDetails?.symbol,
- initials: getInitialsFromName(claimLinkData.claim?.recipient?.username ?? ''),
+ tokenAddress: claimLinkData.tokenAddress,
+ initials: getInitialsFromName(recipientName),
memo: claimLinkData.textContent,
attachmentUrl: claimLinkData.fileUrl,
- cancelledDate: status === 'cancelled' ? new Date(claimLinkData.events[0].timestamp) : undefined,
+ cancelledDate: status === 'cancelled' ? new Date(claimLinkData.events[0]?.timestamp) : undefined,
+ txHash: claimLinkData.claim?.txHash,
extraDataForDrawer: {
isLinkTransaction: true,
originalType: EHistoryEntryType.SEND_LINK,
originalUserRole: EHistoryUserRole.SENDER,
link: claimLinkData.link,
rewardData,
+ transactionCardType: 'send',
},
- userName:
- claimLinkData.claim?.recipient?.username ?? claimLinkData.claim?.recipientAddress ?? 'Send via Link',
+ userName: recipientName,
+ fullName: claimLinkData.claim?.recipient?.username ?? recipientName,
sourceView: 'history',
+ tokenDisplayDetails: tokenDetails
+ ? {
+ tokenSymbol: tokenDetails.symbol,
+ chainName: getChainName(claimLinkData.chainId),
+ tokenIconUrl: getTokenLogo(tokenDetails.symbol),
+ chainIconUrl: getChainName(claimLinkData.chainId)
+ ? getChainLogo(getChainName(claimLinkData.chainId)!)
+ : undefined,
+ }
+ : undefined,
peanutFeeDetails: {
amountDisplay: '$ 0.00',
},
diff --git a/src/components/Claim/Generic/ClaimError.view.tsx b/src/components/Claim/Generic/ClaimError.view.tsx
index 10a142266..c1f878231 100644
--- a/src/components/Claim/Generic/ClaimError.view.tsx
+++ b/src/components/Claim/Generic/ClaimError.view.tsx
@@ -1,7 +1,7 @@
'use client'
-import { Button } from '@/components/0_Bruddle'
-import { useSupportModalContext } from '@/context/SupportModalContext'
+import { Button } from '@/components/0_Bruddle/Button'
+import { useModalsContext } from '@/context/ModalsContext'
import Image from 'next/image'
import Link from 'next/link'
import PEANUTMAN_CRY from '@/animations/GIF_ALPHA_BACKGORUND/512X512_ALPHA_GIF_konradurban_05.gif'
@@ -14,7 +14,7 @@ type ClaimErrorViewProps = {
}
export const ClaimErrorView = ({ title, message, primaryButtonText, onPrimaryClick }: ClaimErrorViewProps) => {
- const { openSupportWithMessage } = useSupportModalContext()
+ const { openSupportWithMessage } = useModalsContext()
return (
(null)
- // redirect back to country list if selected country is a non-eur sepa country (blocked)
- const { isBlocked: isCountryBlocked } = useNonEurSepaRedirect({
- countryIdentifier: selectedCountry?.id || selectedCountry?.path,
- shouldRedirect: false, // we handle redirect manually in useEffect
- })
-
// websocket for real-time KYC status updates
useWebSocket({
username: user?.user.username ?? undefined,
@@ -109,17 +103,6 @@ export const BankFlowManager = (props: IClaimScreenProps) => {
}
}, [user?.user.bridgeKycStatus])
- // redirect back to country list if trying to access a blocked non-eur sepa country
- useEffect(() => {
- if (
- isCountryBlocked &&
- (claimBankFlowStep === ClaimBankFlowStep.BankDetailsForm ||
- claimBankFlowStep === ClaimBankFlowStep.BankConfirmClaim)
- ) {
- setClaimBankFlowStep(ClaimBankFlowStep.BankCountryList)
- }
- }, [isCountryBlocked, claimBankFlowStep, setClaimBankFlowStep])
-
/**
* @name handleConfirmClaim
* @description claims the link to the deposit address provided by the off-ramp api and confirms the transfer.
@@ -428,11 +411,9 @@ export const BankFlowManager = (props: IClaimScreenProps) => {
onPrev={() => setClaimBankFlowStep(null)}
savedAccounts={savedAccounts}
onAccountClick={async (account) => {
- const [firstName, ...lastNameParts] = (
- account.details.accountOwnerName ||
- user?.user.fullName ||
- ''
- ).split(' ')
+ // for saved accounts, use the user's full name (these are assumed to be user's own accounts)
+ const fullNameToUse = user?.user.fullName || ''
+ const [firstName, ...lastNameParts] = fullNameToUse.split(' ')
const lastName = lastNameParts.join(' ')
const bankDetails = {
@@ -473,13 +454,7 @@ export const BankFlowManager = (props: IClaimScreenProps) => {
/>
)
case ClaimBankFlowStep.BankCountryList:
- return (
-
- isDisabled?: boolean
- clickHandlerRef?: React.MutableRefObject<(() => void) | null>
-}
-
-const ActionListDaimoPayButton = ({
- handleContinueWithPeanut,
- showConfirmModal,
- onBeforeShow,
- isDisabled,
- clickHandlerRef,
-}: ActionListDaimoPayButtonProps) => {
- const dispatch = useAppDispatch()
- const searchParams = useSearchParams()
- const method = ACTION_METHODS.find((method) => method.id === 'exchange-or-wallet')
- const { requestDetails, chargeDetails, attachmentOptions, parsedPaymentData, usdAmount } = usePaymentStore()
- const {
- code: currencyCode,
- symbol: currencySymbol,
- price: currencyPrice,
- } = useCurrency(searchParams.get('currency'))
- const requestId = searchParams.get('id')
- const { address: peanutWalletAddress } = useWallet()
- const [showInviteModal, setShowInviteModal] = useState(false)
- const [confirmLoseInvite, setConfirmLoseInvite] = useState(false)
- const daimoPayButtonClickRef = useRef<(() => void) | null>(null)
-
- const { isProcessing, initiateDaimoPayment, completeDaimoPayment } = usePaymentInitiator()
-
- const handleInitiateDaimoPayment = useCallback(async () => {
- if (!usdAmount || parseFloat(usdAmount) <= 0) {
- console.error('Invalid amount entered')
- dispatch(paymentActions.setError('Invalid amount'))
- return false
- }
-
- if (!parsedPaymentData) {
- console.error('Invalid payment data')
- dispatch(paymentActions.setError('Something went wrong. Please try again or contact support.'))
- return false
- }
-
- dispatch(paymentActions.setError(null))
- dispatch(paymentActions.setDaimoError(null))
- let tokenAmount = usdAmount
-
- const payload: InitiatePaymentPayload = {
- recipient: parsedPaymentData?.recipient,
- tokenAmount,
- requestId: requestId ?? undefined,
- chargeId: chargeDetails?.uuid,
- currency: currencyCode
- ? {
- code: currencyCode,
- symbol: currencySymbol || '',
- price: currencyPrice?.buy || 0,
- }
- : undefined,
- currencyAmount: usdAmount,
- isExternalWalletFlow: false,
- transactionType: 'DIRECT_SEND',
- attachmentOptions: attachmentOptions,
- }
-
- console.log('Initiating Daimo payment', payload)
-
- const result = await initiateDaimoPayment(payload)
-
- if (result.status === 'Charge Created') {
- console.log('Charge created!!')
- return true
- } else if (result.status === 'Error') {
- dispatch(paymentActions.setError('Something went wrong. Please try again or contact support.'))
- console.error('Payment initiation failed:', result)
- return false
- } else {
- console.warn('Unexpected status from usePaymentInitiator:', result.status)
- dispatch(paymentActions.setError('Something went wrong. Please try again or contact support.'))
- return false
- }
- }, [
- usdAmount,
- dispatch,
- chargeDetails,
- requestDetails,
- requestId,
- parsedPaymentData,
- attachmentOptions,
- initiateDaimoPayment,
- currencyCode,
- currencySymbol,
- currencyPrice,
- ])
-
- const handleCompleteDaimoPayment = useCallback(
- async (daimoPaymentResponse: any) => {
- if (chargeDetails) {
- dispatch(paymentActions.setIsDaimoPaymentProcessing(true))
- try {
- // validate and parse destination chain id with proper fallback
- // use chargeDetails chainId if it's a valid non-negative integer, otherwise use daimo response
- const parsedChainId = Number(chargeDetails.chainId)
- const destinationChainId =
- Number.isInteger(parsedChainId) && parsedChainId >= 0
- ? parsedChainId
- : Number(daimoPaymentResponse.payment.destination.chainId)
-
- const result = await completeDaimoPayment({
- chargeDetails: chargeDetails,
- txHash: daimoPaymentResponse.txHash as string,
- destinationchainId: destinationChainId,
- payerAddress: peanutWalletAddress ?? daimoPaymentResponse.payment.source.payerAddress,
- sourceChainId: daimoPaymentResponse.payment.source.chainId,
- sourceTokenAddress: daimoPaymentResponse.payment.source.tokenAddress,
- sourceTokenSymbol: daimoPaymentResponse.payment.source.tokenSymbol,
- })
-
- if (result.status === 'Success') {
- dispatch(paymentActions.setView('STATUS'))
- } else if (result.status === 'Charge Created') {
- dispatch(paymentActions.setView('CONFIRM'))
- } else if (result.status === 'Error') {
- console.error('Payment initiation failed:', result.error)
- } else {
- console.warn('Unexpected status from usePaymentInitiator:', result.status)
- }
- } catch (e) {
- console.error('Error completing daimo payment:', e)
- } finally {
- dispatch(paymentActions.setIsDaimoPaymentProcessing(false))
- }
- }
- },
- [chargeDetails, completeDaimoPayment, dispatch, peanutWalletAddress]
- )
-
- if (!method || !parsedPaymentData) return null
-
- return (
-
- {
- // First check if parent wants to intercept (e.g. show balance modal)
- if (onBeforeShow) {
- const shouldProceed = await onBeforeShow()
- if (!shouldProceed) {
- return false
- }
- }
-
- // Then check invite modal
- if (!confirmLoseInvite && showConfirmModal) {
- setShowInviteModal(true)
- return false
- }
-
- // Finally initiate payment
- return await handleInitiateDaimoPayment()
- }}
- disabled={!usdAmount}
- minAmount={0.1}
- maxAmount={30_000}
- loading={isProcessing}
- onValidationError={(error) => {
- dispatch(paymentActions.setDaimoError(error))
- }}
- >
- {({ onClick, loading }) => {
- // Store the onClick function so we can trigger it from elsewhere
- daimoPayButtonClickRef.current = onClick
- // also store in parent ref if provided (for balance modal in ActionList)
- if (clickHandlerRef) {
- clickHandlerRef.current = onClick
- }
-
- return (
-
-
- {
- setShowInviteModal(false)
- setConfirmLoseInvite(true)
- // Directly initiate the Daimo payment instead of triggering button click
- const success = await handleInitiateDaimoPayment()
- if (success && daimoPayButtonClickRef.current) {
- // Only trigger the actual Daimo widget if payment initiation was successful
- daimoPayButtonClickRef.current()
- }
- }}
- isOpen={showInviteModal}
- onClose={() => {
- setShowInviteModal(false)
- // Reset confirmLoseInvite when modal is closed without proceeding
- setConfirmLoseInvite(false)
- }}
- />
-
- )
-}
-
-export default ActionListDaimoPayButton
diff --git a/src/components/Common/ContactsListSkeleton.tsx b/src/components/Common/ContactsListSkeleton.tsx
new file mode 100644
index 000000000..9f6ba2ced
--- /dev/null
+++ b/src/components/Common/ContactsListSkeleton.tsx
@@ -0,0 +1,28 @@
+'use client'
+import { ActionListCard } from '../ActionListCard'
+import { getCardPosition } from '../Global/Card'
+
+/**
+ * displays a contacts list skeleton during loading
+ */
+export const ContactsListSkeleton = ({ count = 10 }: { count?: number }) => {
+ return (
+ = ({ classNameButton, viewT
const [searchValue, setSearchValue] = useState('')
const [showNetworkList, setShowNetworkList] = useState(false)
const [networkSearchValue, setNetworkSearchValue] = useState('')
- // appkit hooks
- const { open: openAppkitModal } = useAppKit()
- const { disconnect: disconnectWallet } = useDisconnect()
- const { isConnected: isExternalWalletConnected, address: externalWalletAddress } = useAppKitAccount()
-
- // Fetch external wallet balances using TanStack Query (replaces manual useEffect + refs + state)
- const { data: externalBalances = [], isLoading: isLoadingExternalBalances } = useWalletBalances(
- isExternalWalletConnected ? externalWalletAddress : undefined
- )
// state for image loading errors
const [buttonImageError, setButtonImageError] = useState(false)
@@ -77,7 +74,6 @@ const TokenSelector: React.FC = ({ classNameButton, viewT
setSelectedChainID,
selectedTokenAddress,
selectedChainID,
- setSelectedTokenBalance,
} = useContext(tokenSelectorContext)
// drawer utility functions
@@ -87,45 +83,7 @@ const TokenSelector: React.FC = ({ classNameButton, viewT
setTimeout(() => setSearchValue(''), 200)
}, [])
- // Note: external wallet balance fetching is now handled by useWalletBalances hook
- // It automatically:
- // - Fetches when wallet connects (enabled guard)
- // - Refetches when address changes (queryKey includes address)
- // - Clears when wallet disconnects (enabled becomes false)
- // - Auto-refreshes every 60 seconds
- // No manual refs or state management needed!
-
- const sourceBalances = useMemo(() => {
- if (isExternalWalletConnected) {
- return externalBalances // Direct from query (auto-handles all cases)
- } else {
- return [] // return empty array if wallet not connected
- }
- }, [isExternalWalletConnected, externalBalances])
-
- const tokensOnSelectedNetwork = useMemo(() => {
- if (!selectedChainID) {
- return sourceBalances // no network selected, return all source balances
- }
- return sourceBalances.filter((balance) => String(balance.chainId) === selectedChainID)
- }, [sourceBalances, selectedChainID, isExternalWalletConnected])
-
- // display tokens memo, filters tokensOnSelectedNetwork by search value
- const displayUserTokens = useMemo(() => {
- const lowerSearchValue = searchValue.toLowerCase()
- if (!lowerSearchValue) {
- return tokensOnSelectedNetwork // no search value, return all tokens on the network
- }
- return tokensOnSelectedNetwork.filter((balance) => {
- const hasSymbol = !!balance.symbol
- const symbolMatch = hasSymbol && balance.symbol.toLowerCase().includes(lowerSearchValue)
- const nameMatch = balance.name?.toLowerCase().includes(lowerSearchValue) ?? false
- const addressMatch = balance.address?.toLowerCase().includes(lowerSearchValue) ?? false
- return hasSymbol && (symbolMatch || nameMatch || addressMatch)
- })
- }, [tokensOnSelectedNetwork, searchValue, isExternalWalletConnected])
-
- // handles token selection based on token balance
+ // handles token selection
const handleTokenSelect = useCallback(
(balance: IUserBalance) => {
setSelectedTokenAddress(balance.address)
@@ -135,17 +93,6 @@ const TokenSelector: React.FC = ({ classNameButton, viewT
[closeDrawer, setSelectedTokenAddress, setSelectedChainID]
)
- useEffect(() => {
- const tokenBalance = sourceBalances.find(
- (balance) =>
- areEvmAddressesEqual(balance.address, selectedTokenAddress) &&
- String(balance.chainId) === selectedChainID
- )
- if (tokenBalance) {
- setSelectedTokenBalance(tokenBalance.amount.toString())
- }
- }, [selectedTokenAddress, selectedChainID, sourceBalances])
-
// renders network list view
const handleSearchNetwork = useCallback(() => {
setShowNetworkList(true)
@@ -155,14 +102,10 @@ const TokenSelector: React.FC = ({ classNameButton, viewT
const handleChainSelectFromList = useCallback(
(chainId: string) => {
setSelectedChainID(chainId)
- if (isExternalWalletConnected) {
- setSelectedTokenAddress('') // clear token when chain changes with external wallet
- } else {
- setSelectedTokenAddress('') // clear selected token when changing network in popular view
- }
+ setSelectedTokenAddress('') // clear selected token when changing network
setShowNetworkList(false)
},
- [setSelectedChainID, setSelectedTokenAddress, isExternalWalletConnected]
+ [setSelectedChainID, setSelectedTokenAddress]
)
// selected network name memo, being used ui
@@ -189,50 +132,20 @@ const TokenSelector: React.FC = ({ classNameButton, viewT
}
}, [supportedSquidChainsAndTokens])
- // button display variables
+ // button display variables - derive from selected token/chain
let buttonSymbol: string | undefined = undefined
let buttonChainName: string | undefined = undefined
- let buttonFormattedBalance: string | null = null
let buttonLogoURI: string | undefined = undefined
let buttonChainLogoURI: string | undefined = peanutWalletTokenDetails?.chainLogoURI
- if (isExternalWalletConnected) {
- if (selectedTokenAddress && selectedChainID) {
- // wallet connected AND token selected
- const userBalanceDetails = sourceBalances.find(
- (b) => areEvmAddressesEqual(b.address, selectedTokenAddress) && String(b.chainId) === selectedChainID
- )
- const chainInfo = supportedSquidChainsAndTokens[selectedChainID]
- const generalTokenDetails = chainInfo?.tokens.find((t) =>
- areEvmAddressesEqual(t.address, selectedTokenAddress)
- )
-
- if (generalTokenDetails && chainInfo) {
- buttonSymbol = generalTokenDetails.symbol
- buttonLogoURI = generalTokenDetails.logoURI
- buttonChainName = chainInfo.networkName || `Chain ${selectedChainID}`
- buttonChainLogoURI = chainInfo.chainIconURI
- }
- if (userBalanceDetails) {
- buttonFormattedBalance = formatTokenAmount(userBalanceDetails.amount) ?? null
- } else {
- if (generalTokenDetails) buttonFormattedBalance = '0'
- }
- }
- } else {
- // no external wallet connected
- if (selectedTokenAddress && selectedChainID) {
- // popular token selected by user or "usdc on arb" card clicked
- const chainInfo = supportedSquidChainsAndTokens[selectedChainID]
- const generalTokenDetails = chainInfo?.tokens.find((t) =>
- areEvmAddressesEqual(t.address, selectedTokenAddress)
- )
- if (generalTokenDetails && chainInfo) {
- buttonSymbol = generalTokenDetails.symbol
- buttonLogoURI = generalTokenDetails.logoURI
- buttonChainName = chainInfo.networkName || `Chain ${selectedChainID}`
- buttonChainLogoURI = chainInfo.chainIconURI
- }
+ if (selectedTokenAddress && selectedChainID) {
+ const chainInfo = supportedSquidChainsAndTokens[selectedChainID]
+ const tokenDetails = chainInfo?.tokens.find((t) => areEvmAddressesEqual(t.address, selectedTokenAddress))
+ if (tokenDetails && chainInfo) {
+ buttonSymbol = tokenDetails.symbol
+ buttonLogoURI = tokenDetails.logoURI
+ buttonChainName = chainInfo.networkName || `Chain ${selectedChainID}`
+ buttonChainLogoURI = chainInfo.chainIconURI
}
}
@@ -253,6 +166,7 @@ const TokenSelector: React.FC = ({ classNameButton, viewT
}).filter((chain): chain is { chainId: string; name: string; iconURI: string } => Boolean(chain)) // type guard filter nulls
}, [supportedSquidChainsAndTokens])
+ // build list of popular tokens (usdc, usdt, native) for display
const popularTokensList = useMemo(() => {
const popularSymbolsToFind = ['USDC', 'USDT']
const createPopularTokenEntry = (token: IToken, chainId: string): IUserBalance => ({
@@ -325,33 +239,22 @@ const TokenSelector: React.FC = ({ classNameButton, viewT
return sortTokensByPriority(uniqueTokens)
}
- if (!isExternalWalletConnected) {
- if (searchValue) {
- // search active: show searched token across ALL supported networks
- return buildTokensForChainArray(TOKEN_SELECTOR_SUPPORTED_NETWORK_IDS, searchValue)
- }
- if (selectedChainID) {
- // specific chain selected: show popular (USDC, USDT, Native) for that chain
- return buildTokensForChainArray([selectedChainID])
- }
- // default for no wallet: popular tokens on popular chains
- const popularChainIds = popularChainsForButtons.map((pc) => pc.chainId)
- return buildTokensForChainArray(popularChainIds)
+ if (searchValue) {
+ // search active: show searched token across ALL supported networks
+ return buildTokensForChainArray(TOKEN_SELECTOR_SUPPORTED_NETWORK_IDS, searchValue)
}
+ if (selectedChainID) {
+ // specific chain selected: show popular (USDC, USDT, Native) for that chain
+ return buildTokensForChainArray([selectedChainID])
+ }
+ // default: popular tokens on popular chains
+ const popularChainIds = popularChainsForButtons.map((pc) => pc.chainId)
+ return buildTokensForChainArray(popularChainIds)
+ }, [searchValue, selectedChainID, supportedSquidChainsAndTokens, popularChainsForButtons])
- return [] // no popular tokens if wallet is connected
- }, [
- isExternalWalletConnected,
- searchValue,
- selectedChainID,
- supportedSquidChainsAndTokens,
- popularChainsForButtons,
- ])
-
+ // filter popular tokens by search
const filteredPopularTokensToDisplay = useMemo(() => {
- // if searchValue is active, popularTokensList is already filtered by symbol across all chains.
- // if not, popularTokensList is for selected/popular chains, and then we apply broad search.
- if (!searchValue || isExternalWalletConnected) return popularTokensList // no further filtering if search already did its job or wallet connected
+ if (!searchValue) return popularTokensList
const lowerSearchValue = searchValue.toLowerCase()
return popularTokensList.filter((token) => {
@@ -361,105 +264,13 @@ const TokenSelector: React.FC = ({ classNameButton, viewT
const addressMatch = token.address?.toLowerCase().includes(lowerSearchValue) ?? false
return hasSymbol && (symbolMatch || nameMatch || addressMatch)
})
- }, [popularTokensList, searchValue, isExternalWalletConnected])
-
- // visibility flags
- const showPopularTokensList = useMemo(() => !isExternalWalletConnected, [isExternalWalletConnected])
- const showUserTokensList = useMemo(() => isExternalWalletConnected, [isExternalWalletConnected])
-
- const renderUserTokenListContent = () => {
- if (isLoadingExternalBalances) {
- return {
- await disconnectWallet()
- setTimeout(async () => {
- try {
- await initializeAppKit()
- openAppkitModal()
- } catch (error) {
- console.error('Failed to initialize AppKit:', error)
- }
- }, 300)
- }}
- >
- Try connecting to a different wallet.
-
- }
- />
- )
- }
- if (selectedChainID && tokensOnSelectedNetwork.length === 0) {
- return (
-
- You don't have any tokens on {selectedNetworkName}
-
- }
- icon="wallet-cancel"
- cta={
-
- }
- />
- )
- }
- if (searchValue && displayUserTokens.length === 0) {
- return (
- handleTokenSelect(balance)}
- isSelected={isSelected}
- isEnabled={isTokenSupportedBySquid}
- />
- )
- })
- }
- return (
- = ({ classNameButton, viewT
)
}
- // auto disconnect external wallet when claim view is active
- useEffect(() => {
- if (isExternalWalletConnected && viewType === 'claim') {
- disconnectWallet()
- }
- }, [isExternalWalletConnected, viewType])
-
return (
<>
+
+
-
)
}
diff --git a/src/components/0_Bruddle/Checkbox.tsx b/src/components/0_Bruddle/Checkbox.tsx
index ca00cbccf..0f991cf3a 100644
--- a/src/components/0_Bruddle/Checkbox.tsx
+++ b/src/components/0_Bruddle/Checkbox.tsx
@@ -1,4 +1,4 @@
-import Icon from '@/components/Global/Icon'
+import { Icon } from '../Global/Icons/Icon'
type CheckboxProps = {
className?: string
@@ -20,7 +20,7 @@ const Checkbox = ({ className, label, value, onChange }: CheckboxProps) => (
- Amount to send
{formattedCurrencyAmount}
-Deposit reference
- {onrampData?.depositInstructions?.depositMessage || 'Loading...'} + {onrampData?.depositInstructions?.depositMessage?.slice(0, 10) || 'Loading...'}
{onrampData?.depositInstructions?.depositMessage && (Bank Details
+ {onrampData?.depositInstructions?.accountHolderName && ( +{chainName}
+
- {
- setisDrawerOpen(false)
- setShowRiskModal(true)
- }}
- className={'cursor-pointer px-4 py-2 hover:bg-gray-50'}
- >
-
-
- router.push('/add-money/crypto/direct')}
- className={'cursor-pointer px-4 py-2 hover:bg-gray-50'}
- >
-
-
- Select a deposit method
- -
-
-
-
-
-
-
-
-
- USDC on Arbitrum
-
- FREE
-
- Recommended option for deposits
-
-
-
-
-
-
-
-
- Other Tokens
-
- Deposit with any token you hold
-
- {sources.map((source, index) => (
-
- )
-}
diff --git a/src/components/AddMoney/components/InputAmountStep.tsx b/src/components/AddMoney/components/InputAmountStep.tsx
index 6ac941f8a..f91c2a20d 100644
--- a/src/components/AddMoney/components/InputAmountStep.tsx
+++ b/src/components/AddMoney/components/InputAmountStep.tsx
@@ -1,9 +1,9 @@
'use client'
-import { Button } from '@/components/0_Bruddle'
+import { Button } from '@/components/0_Bruddle/Button'
import { Icon } from '@/components/Global/Icons/Icon'
import NavHeader from '@/components/Global/NavHeader'
-import TokenAmountInput from '@/components/Global/TokenAmountInput'
+import AmountInput from '@/components/Global/AmountInput'
import { useRouter } from 'next/navigation'
import ErrorAlert from '@/components/Global/ErrorAlert'
import { useCurrency } from '@/hooks/useCurrency'
@@ -15,10 +15,10 @@ interface InputAmountStepProps {
isLoading: boolean
tokenAmount: string
setTokenAmount: React.DispatchHow much do you want to add?
-
@@ -67,7 +68,7 @@ const InputAmountStep = ({
variant="purple"
shadowSize="4"
onClick={onSubmit}
- disabled={!!error || isLoading || !parseFloat(tokenAmount.replace(/,/g, ''))}
+ disabled={!!error || isLoading || !parseFloat(tokenAmount)}
className="w-full"
loading={isLoading}
>
diff --git a/src/components/AddMoney/components/MantecaAddMoney.tsx b/src/components/AddMoney/components/MantecaAddMoney.tsx
index 2b2f1bc60..b80e0db24 100644
--- a/src/components/AddMoney/components/MantecaAddMoney.tsx
+++ b/src/components/AddMoney/components/MantecaAddMoney.tsx
@@ -1,8 +1,8 @@
'use client'
-import { type FC, useEffect, useMemo, useState } from 'react'
+import { type FC, useEffect, useMemo, useState, useCallback } from 'react'
import MantecaDepositShareDetails from '@/components/AddMoney/components/MantecaDepositShareDetails'
import InputAmountStep from '@/components/AddMoney/components/InputAmountStep'
-import { useParams, useRouter, useSearchParams } from 'next/navigation'
+import { useParams, useRouter } from 'next/navigation'
import { type CountryData, countryData } from '@/components/AddMoney/consts'
import { type MantecaDepositResponseData } from '@/types/manteca.types'
import { MantecaGeoSpecificKycModal } from '@/components/Kyc/InitiateMantecaKYCModal'
@@ -11,13 +11,12 @@ import { useCurrency } from '@/hooks/useCurrency'
import { useAuth } from '@/context/authContext'
import { useWebSocket } from '@/hooks/useWebSocket'
import { mantecaApi } from '@/services/manteca'
-import { PEANUT_WALLET_TOKEN_DECIMALS, TRANSACTIONS } from '@/constants'
import { parseUnits } from 'viem'
import { useQueryClient } from '@tanstack/react-query'
import useKycStatus from '@/hooks/useKycStatus'
-import { usePaymentStore } from '@/redux/hooks'
-import { saveDevConnectIntent } from '@/utils'
import { MAX_MANTECA_DEPOSIT_AMOUNT, MIN_MANTECA_DEPOSIT_AMOUNT } from '@/constants/payment.consts'
+import { PEANUT_WALLET_TOKEN_DECIMALS } from '@/constants/zerodev.consts'
+import { TRANSACTIONS } from '@/constants/query.consts'
interface MantecaAddMoneyProps {
source: 'bank' | 'regionalMethod'
@@ -28,17 +27,15 @@ type stepType = 'inputAmount' | 'depositDetails'
const MantecaAddMoney: FC = ({ source }) => {
const params = useParams()
const router = useRouter()
- const searchParams = useSearchParams()
const [step, setStep] = useState('inputAmount')
const [isCreatingDeposit, setIsCreatingDeposit] = useState(false)
- const [tokenAmount, setTokenAmount] = useState('')
const [currencyAmount, setCurrencyAmount] = useState()
+ const [currentDenomination, setCurrentDenomination] = useState('USD')
const [usdAmount, setUsdAmount] = useState('')
const [error, setError] = useState(null)
const [depositDetails, setDepositDetails] = useState()
const [isKycModalOpen, setIsKycModalOpen] = useState(false)
const queryClient = useQueryClient()
- const { parsedPaymentData } = usePaymentStore()
const selectedCountryPath = params.country as string
const selectedCountry = useMemo(() => {
@@ -66,7 +63,7 @@ const MantecaAddMoney: FC = ({ source }) => {
setError(null)
return
}
- const paymentAmount = parseUnits(usdAmount.replace(/,/g, ''), PEANUT_WALLET_TOKEN_DECIMALS)
+ const paymentAmount = parseUnits(usdAmount, PEANUT_WALLET_TOKEN_DECIMALS)
if (paymentAmount < parseUnits(MIN_MANTECA_DEPOSIT_AMOUNT.toString(), PEANUT_WALLET_TOKEN_DECIMALS)) {
setError(`Deposit amount must be at least $${MIN_MANTECA_DEPOSIT_AMOUNT}`)
} else if (paymentAmount > parseUnits(MAX_MANTECA_DEPOSIT_AMOUNT.toString(), PEANUT_WALLET_TOKEN_DECIMALS)) {
@@ -89,7 +86,7 @@ const MantecaAddMoney: FC = ({ source }) => {
}
}
- const handleAmountSubmit = async () => {
+ const handleAmountSubmit = useCallback(async () => {
if (!selectedCountry?.currency) return
if (isCreatingDeposit) return
@@ -107,8 +104,11 @@ const MantecaAddMoney: FC = ({ source }) => {
try {
setError(null)
setIsCreatingDeposit(true)
+ const isUsdDenominated = currentDenomination === 'USD'
+ const amount = isUsdDenominated ? usdAmount : currencyAmount
const depositData = await mantecaApi.deposit({
- usdAmount: usdAmount.replace(/,/g, ''),
+ amount: amount!,
+ isUsdDenominated,
currency: selectedCountry.currency,
})
if (depositData.error) {
@@ -116,10 +116,6 @@ const MantecaAddMoney: FC = ({ source }) => {
return
}
setDepositDetails(depositData.data)
-
- // @dev: save devconnect intent if this is a devconnect flow - to be deleted post devconnect
- saveDevConnectIntent(user?.user?.userId, parsedPaymentData, usdAmount, depositData.data?.externalId)
-
setStep('depositDetails')
} catch (error) {
console.log(error)
@@ -127,7 +123,7 @@ const MantecaAddMoney: FC = ({ source }) => {
} finally {
setIsCreatingDeposit(false)
}
- }
+ }, [currentDenomination, selectedCountry, usdAmount, currencyAmount])
// handle verification modal opening
useEffect(() => {
@@ -142,14 +138,14 @@ const MantecaAddMoney: FC = ({ source }) => {
return (
<>
x.alpha2 as string)
)
-const enabledBankWithdrawCountries = new Set(
- [...Object.values(BRIDGE_ALPHA3_TO_ALPHA2), 'US', 'MX', 'AR'].filter((code) => !NON_EUR_SEPA_ALPHA2.has(code))
-)
+const enabledBankWithdrawCountries = new Set([...Object.values(BRIDGE_ALPHA3_TO_ALPHA2), 'US', 'MX', 'AR'])
// exclude non-euro sepa countries from bank deposits, same as withdrawals
-const enabledBankDepositCountries = new Set(
- [...Object.values(BRIDGE_ALPHA3_TO_ALPHA2), 'US', 'MX', 'AR'].filter((code) => !NON_EUR_SEPA_ALPHA2.has(code))
-)
+const enabledBankDepositCountries = new Set([...Object.values(BRIDGE_ALPHA3_TO_ALPHA2), 'US', 'MX', 'AR'])
// Helper function to check if a country code is enabled for bank transfers
// Handles both 2-letter and 3-letter country codes
diff --git a/src/components/AddMoney/views/CryptoDepositQR.view.tsx b/src/components/AddMoney/views/CryptoDepositQR.view.tsx
index 4b039b224..ec733a3fb 100644
--- a/src/components/AddMoney/views/CryptoDepositQR.view.tsx
+++ b/src/components/AddMoney/views/CryptoDepositQR.view.tsx
@@ -5,6 +5,7 @@ import CopyToClipboard from '@/components/Global/CopyToClipboard'
import NavHeader from '@/components/Global/NavHeader'
import QRCodeWrapper from '@/components/Global/QRCodeWrapper'
import AvatarWithBadge from '@/components/Profile/AvatarWithBadge'
+import { useAutoTruncatedAddress } from '@/hooks/useAutoTruncatedAddress'
import Image, { type StaticImageData } from 'next/image'
import { useRouter } from 'next/navigation'
@@ -26,6 +27,7 @@ export const CryptoDepositQR = ({
chainIcon,
}: CryptoDepositQRProps) => {
const router = useRouter()
+ const { containerRef, truncatedAddress } = useAutoTruncatedAddress(depositAddress)
return (
(
user?.user?.bridgeKycStatus as BridgeKycStatus
)
- const [isDrawerOpen, setIsDrawerOpen] = useState(false)
+ const [isSupportedTokensModalOpen, setIsSupportedTokensModalOpen] = useState(false)
const { isUserBridgeKycUnderReview } = useKycStatus()
const [showKycStatusModal, setShowKycStatusModal] = useState(false)
@@ -89,12 +89,11 @@ const AddWithdrawCountriesList = ({ flow }: AddWithdrawCountriesListProps) => {
const currentKycStatus = liveKycStatus || user?.user.bridgeKycStatus
const isUserKycVerified = currentKycStatus === 'approved'
- const hasNameOnLoad = !!user?.user.fullName
const hasEmailOnLoad = !!user?.user.email
- // scenario (1): happy path: if the user has already completed kyc and we have their name and email,
- // we can add the bank account directly.
- if (isUserKycVerified && (hasNameOnLoad || rawData.firstName) && (hasEmailOnLoad || rawData.email)) {
+ // scenario (1): happy path: if the user has already completed kyc, we can add the bank account directly
+ // note: we no longer check for fullName as account owner name is now always collected from the form
+ if (isUserKycVerified && (hasEmailOnLoad || rawData.email)) {
const currentAccountIds = new Set(user?.accounts.map((acc) => acc.id) ?? [])
const result = await addBankAccount(payload)
@@ -117,13 +116,13 @@ const AddWithdrawCountriesList = ({ flow }: AddWithdrawCountriesListProps) => {
// fallback to the previous method if we can't find the new account
// this can happen if the user object is not updated immediately
const newAccountFromResponse = result.data as Account
- if (!newAccountFromResponse.details) {
- newAccountFromResponse.details = {
- countryCode: payload.countryCode,
- countryName: payload.countryName,
- bankName: null,
- accountOwnerName: `${payload.accountOwnerName.firstName} ${payload.accountOwnerName.lastName}`,
- }
+ // ensure details has accountOwnerName for confirmation page display
+ newAccountFromResponse.details = {
+ ...(newAccountFromResponse.details || {}),
+ countryCode: payload.countryCode,
+ countryName: payload.countryName,
+ bankName: newAccountFromResponse.details?.bankName || null,
+ accountOwnerName: `${payload.accountOwnerName.firstName} ${payload.accountOwnerName.lastName}`,
}
setSelectedBankAccount(newAccountFromResponse)
}
@@ -135,22 +134,6 @@ const AddWithdrawCountriesList = ({ flow }: AddWithdrawCountriesListProps) => {
return {}
}
- // if the user's profile is missing their full name or email,
- // we update it with the data they just provided in the form.
- if (!hasNameOnLoad || !hasEmailOnLoad) {
- if (user?.user.userId && rawData.firstName && rawData.lastName && rawData.email) {
- const result = await updateUserById({
- userId: user.user.userId,
- fullName: `${rawData.firstName} ${rawData.lastName}`.trim(),
- email: rawData.email,
- })
- if (result.error) {
- return { error: result.error }
- }
- await fetchUser() // refetch user data to get updated name/email
- }
- }
-
// scenario (2): if the user hasn't completed kyc yet
if (!isUserKycVerified) {
setIsKycModalOpen(true)
@@ -209,7 +192,7 @@ const AddWithdrawCountriesList = ({ flow }: AddWithdrawCountriesListProps) => {
const handleAddMethodClick = (method: SpecificPaymentMethod) => {
if (method.path) {
if (method.id === 'crypto-add') {
- setIsDrawerOpen(true)
+ setIsSupportedTokensModalOpen(true)
return
}
// show kyc status modal if user is kyc under review
@@ -402,10 +385,14 @@ const AddWithdrawCountriesList = ({ flow }: AddWithdrawCountriesListProps) => {
renderPaymentMethods('Choose withdrawing method', methods.withdraw)}
{flow === 'add' && (
-
@@ -57,12 +59,16 @@ export const CryptoDepositQR = ({
-
-
+ )
+}
+
+export default RhinoDepositView
diff --git a/src/components/AddMoney/views/TokenSelection.view.tsx b/src/components/AddMoney/views/TokenSelection.view.tsx
index ad3500178..1e61104c4 100644
--- a/src/components/AddMoney/views/TokenSelection.view.tsx
+++ b/src/components/AddMoney/views/TokenSelection.view.tsx
@@ -1,11 +1,11 @@
import StatusBadge from '@/components/Global/Badges/StatusBadge'
import { getCardPosition } from '@/components/Global/Card'
import NavHeader from '@/components/Global/NavHeader'
-import { PEANUT_WALLET_TOKEN_SYMBOL } from '@/constants'
import Image from 'next/image'
import React from 'react'
import { type CryptoToken, DEPOSIT_CRYPTO_TOKENS } from '../consts'
import { ActionListCard } from '@/components/ActionListCard'
+import { PEANUT_WALLET_TOKEN_SYMBOL } from '@/constants/zerodev.consts'
interface TokenSelectionViewProps {
headerTitle?: string
diff --git a/src/components/AddWithdraw/AddWithdrawCountriesList.tsx b/src/components/AddWithdraw/AddWithdrawCountriesList.tsx
index 428705b27..c45b02d52 100644
--- a/src/components/AddWithdraw/AddWithdrawCountriesList.tsx
+++ b/src/components/AddWithdraw/AddWithdrawCountriesList.tsx
@@ -12,7 +12,7 @@ import EmptyState from '../Global/EmptyStates/EmptyState'
import { useAuth } from '@/context/authContext'
import { useEffect, useMemo, useRef, useState } from 'react'
import { DynamicBankAccountForm, type IBankAccountDetails } from './DynamicBankAccountForm'
-import { addBankAccount, updateUserById } from '@/app/actions/users'
+import { addBankAccount } from '@/app/actions/users'
import { type BridgeKycStatus } from '@/utils/bridge-accounts.utils'
import { type AddBankAccountPayload } from '@/app/actions/types/users.types'
import { useWebSocket } from '@/hooks/useWebSocket'
@@ -20,13 +20,13 @@ import { useWithdrawFlow } from '@/context/WithdrawFlowContext'
import { type Account } from '@/interfaces'
import { getCountryCodeForWithdraw } from '@/utils/withdraw.utils'
import { DeviceType, useDeviceType } from '@/hooks/useGetDeviceType'
-import CryptoMethodDrawer from '../AddMoney/components/CryptoMethodDrawer'
import { useAppDispatch } from '@/redux/hooks'
import { bankFormActions } from '@/redux/slices/bank-form-slice'
import { InitiateBridgeKYCModal } from '../Kyc/InitiateBridgeKYCModal'
import useKycStatus from '@/hooks/useKycStatus'
import KycVerifiedOrReviewModal from '../Global/KycVerifiedOrReviewModal'
import { ActionListCard } from '@/components/ActionListCard'
+import TokenAndNetworkConfirmationModal from '../Global/TokenAndNetworkConfirmationModal'
interface AddWithdrawCountriesListProps {
flow: 'add' | 'withdraw'
@@ -55,7 +55,7 @@ const AddWithdrawCountriesList = ({ flow }: AddWithdrawCountriesListProps) => {
const [liveKycStatus, setLiveKycStatus] = useState
- {depositAddress}
+
+ {truncatedAddress}
@@ -208,7 +216,7 @@ export const AddWithdrawRouterView: FC = ({
// preserve method param if coming from send flow
const additionalParams = isBankFromSend ? `&method=${methodParam}` : ''
router.push(
- `/withdraw/manteca?country=${account.details.countryName}&destination=${account.identifier}${additionalParams}`
+ `/withdraw/manteca?country=${account.details.countryName}&destination=${account.identifier}&isSavedAccount=true${additionalParams}`
)
}
}}
@@ -246,10 +254,14 @@ export const AddWithdrawRouterView: FC = ({
- setIsDrawerOpen(false)}
+ {
+ setIsSupportedTokensModalOpen(false)
+ }}
+ onAccept={() => {
+ router.push('/add-money/crypto')
+ }}
+ isVisible={isSupportedTokensModalOpen}
/>
)
@@ -261,7 +273,18 @@ export const AddWithdrawRouterView: FC
- {renderInput('firstName', 'First Name', { required: 'First name is required' })}
- {renderInput('lastName', 'Last Name', { required: 'Last name is required' })}
+ {renderInput('accountOwnerName', 'Account Owner Name', {
+ required: 'Account owner name is required',
+ validate: (value: string) => {
+ const trimmed = value.trim()
+ const parts = trimmed.split(/\s+/)
+ if (parts.length < 2) {
+ return 'Please enter both first and last name'
+ }
+ return true
+ },
+ })}
)}
{flow === 'claim' && user?.user.userId && !user.user.fullName && (
- {renderInput('firstName', 'First Name', { required: 'First name is required' })}
- {renderInput('lastName', 'Last Name', { required: 'Last name is required' })}
+ {renderInput('accountOwnerName', 'Account Owner Name', {
+ required: 'Account owner name is required',
+ validate: (value: string) => {
+ const trimmed = value.trim()
+ const parts = trimmed.split(/\s+/)
+ if (parts.length < 2) {
+ return 'Please enter both first and last name'
+ }
+ return true
+ },
+ })}
)}
{flow === 'claim' &&
@@ -354,10 +392,21 @@ export const DynamicBankAccountForm = forwardRef<{ handleSubmit: () => void }, D
renderInput('email', 'E-mail', {
required: 'Email is required',
})}
- {flow !== 'claim' && !user?.user?.fullName && (
+
+ {/* WITHDRAW FLOW: always show account owner's name field (empty by default) */}
+ {flow !== 'claim' && (
- {renderInput('firstName', 'First Name', { required: 'First name is required' })}
- {renderInput('lastName', 'Last Name', { required: 'Last name is required' })}
+ {renderInput('accountOwnerName', 'Account Owner Name', {
+ required: 'Account owner name is required',
+ validate: (value: string) => {
+ const trimmed = value.trim()
+ const parts = trimmed.split(/\s+/)
+ if (parts.length < 2) {
+ return 'Please enter both first and last name'
+ }
+ return true
+ },
+ })}
)}
{flow !== 'claim' &&
diff --git a/src/components/Badges/BadgeStatusDrawer.tsx b/src/components/Badges/BadgeStatusDrawer.tsx
index 0511e5ce1..1204a57ab 100644
--- a/src/components/Badges/BadgeStatusDrawer.tsx
+++ b/src/components/Badges/BadgeStatusDrawer.tsx
@@ -1,10 +1,12 @@
import { Drawer, DrawerContent } from '@/components/Global/Drawer'
import Image from 'next/image'
-import { formatDate } from '@/utils'
+import { formatDate } from '@/utils/general.utils'
import Card from '../Global/Card'
import { PaymentInfoRow } from '../Payment/PaymentInfoRow'
import ShareButton from '../Global/ShareButton'
import { getBadgeIcon } from './badge.utils'
+import { BASE_URL } from '@/constants/general.consts'
+import { useAuth } from '@/context/authContext'
export type BadgeStatusDrawerProps = {
isOpen: boolean
@@ -20,9 +22,14 @@ export type BadgeStatusDrawerProps = {
// shows a drawer for a newly unlocked badge
export const BadgeStatusDrawer = ({ isOpen, onClose, badge }: BadgeStatusDrawerProps) => {
+ const { user: authUser } = useAuth()
+ const username = authUser?.user.username
const earnedAt = badge.earnedAt ? new Date(badge.earnedAt) : undefined
const dateStr = earnedAt ? formatDate(earnedAt) : undefined
+ // generate profile link for sharing
+ const profileLink = username ? `${BASE_URL}/${username}` : BASE_URL
+
return (
diff --git a/src/components/Claim/Generic/Claimed.view.tsx b/src/components/Claim/Generic/Claimed.view.tsx
index 8330b05fe..5e5accfab 100644
--- a/src/components/Claim/Generic/Claimed.view.tsx
+++ b/src/components/Claim/Generic/Claimed.view.tsx
@@ -1,9 +1,10 @@
'use client'
-import { Button, Card } from '@/components/0_Bruddle'
import { Icon } from '@/components/Global/Icons/Icon'
import { useAuth } from '@/context/authContext'
import { useRouter } from 'next/navigation'
import { type FC } from 'react'
+import { Button } from '@/components/0_Bruddle/Button'
+import { Card } from '@/components/0_Bruddle/Card'
interface ClaimedViewProps {
amount: number | bigint
diff --git a/src/components/Claim/Link/FlowManager.tsx b/src/components/Claim/Link/FlowManager.tsx
index 6dcec133d..66e0c32bf 100644
--- a/src/components/Claim/Link/FlowManager.tsx
+++ b/src/components/Claim/Link/FlowManager.tsx
@@ -22,7 +22,6 @@ const FlowManager = ({
}) => {
const viewComponents: _consts.IFlowManagerClaimComponents = {
INITIAL: InitialClaimLinkView,
- // todo: @dev note, handle bank claims in links-v2 project
CONFIRM: onchainViews.ConfirmClaimLinkView,
SUCCESS: onchainViews.SuccessClaimLinkView,
}
diff --git a/src/components/Claim/Link/Initial.view.tsx b/src/components/Claim/Link/Initial.view.tsx
index 324ffb6da..e203a72e7 100644
--- a/src/components/Claim/Link/Initial.view.tsx
+++ b/src/components/Claim/Link/Initial.view.tsx
@@ -10,21 +10,15 @@ import {
optimismChainId,
usdcAddressOptimism,
} from '@/components/Offramp/Offramp.consts'
-import { PEANUT_WALLET_CHAIN, PEANUT_WALLET_TOKEN, ROUTE_NOT_FOUND_ERROR } from '@/constants'
import { TRANSACTIONS } from '@/constants/query.consts'
import { loadingStateContext, tokenSelectorContext } from '@/context'
import { useAuth } from '@/context/authContext'
import { useWallet } from '@/hooks/wallet/useWallet'
import { sendLinksApi } from '@/services/sendLinks'
-import {
- areEvmAddressesEqual,
- ErrorHandler,
- fetchWithSentry,
- formatTokenAmount,
- getBridgeChainName,
- getBridgeTokenName,
- printableAddress,
-} from '@/utils'
+import { areEvmAddressesEqual, formatTokenAmount, printableAddress } from '@/utils/general.utils'
+import { ErrorHandler } from '@/utils/sdkErrorHandler.utils'
+import { fetchWithSentry } from '@/utils/sentry.utils'
+import { getBridgeChainName, getBridgeTokenName } from '@/utils/bridge-accounts.utils'
import { NATIVE_TOKEN_ADDRESS, SQUID_ETH_ADDRESS, checkTokenSupportsXChain } from '@/utils/token.utils'
import * as Sentry from '@sentry/nextjs'
import { useQueryClient } from '@tanstack/react-query'
@@ -33,14 +27,14 @@ import { useCallback, useContext, useEffect, useMemo, useState, useRef } from 'r
import { formatUnits, isAddress, zeroAddress } from 'viem'
import type { Address } from 'viem'
import { type IClaimScreenProps } from '../Claim.consts'
-import ActionList from '@/components/Common/ActionList'
+import SendLinkActionList from '@/components/Claim/Link/SendLinkActionList'
import { ClaimBankFlowStep, useClaimBankFlow } from '@/context/ClaimBankFlowContext'
import useClaimLink from '../useClaimLink'
import ActionModal from '@/components/Global/ActionModal'
import { Slider } from '@/components/Slider'
import { BankFlowManager } from './views/BankFlowManager.view'
import { type PeanutCrossChainRoute, getRoute } from '@/services/swap'
-import { Button } from '@/components/0_Bruddle'
+import { Button } from '@/components/0_Bruddle/Button'
import Image from 'next/image'
import { PEANUT_LOGO_BLACK, PEANUTMAN_LOGO } from '@/assets'
import { GuestVerificationModal } from '@/components/Global/GuestVerificationModal'
@@ -49,6 +43,8 @@ import MantecaFlowManager from './MantecaFlowManager'
import ErrorAlert from '@/components/Global/ErrorAlert'
import { invitesApi } from '@/services/invites'
import { EInviteType } from '@/services/services.types'
+import { PEANUT_WALLET_CHAIN, PEANUT_WALLET_TOKEN } from '@/constants/zerodev.consts'
+import { ROUTE_NOT_FOUND_ERROR } from '@/constants/general.consts'
export const InitialClaimLinkView = (props: IClaimScreenProps) => {
// get campaign tag from claim link url
@@ -62,7 +58,6 @@ export const InitialClaimLinkView = (props: IClaimScreenProps) => {
recipient,
tokenPrice,
setClaimType,
- setEstimatedPoints,
attachment,
setTransactionHash,
onCustom,
@@ -976,8 +971,7 @@ export const InitialClaimLinkView = (props: IClaimScreenProps) => {
)}
{!claimToExternalWallet && (
- void
+}
+
+/**
+ * shows available payment methods for claiming a send link
+ * note: request flow uses RequestPotActionList instead
+ */
+export default function SendLinkActionList({
+ claimLinkData,
+ isLoggedIn,
+ isInviteLink = false,
+ showDevconnectMethod,
+ setExternalWalletRecipient,
+}: ISendLinkActionListProps) {
+ const router = useRouter()
+ const {
+ setClaimToExternalWallet,
+ setFlowStep: setClaimBankFlowStep,
+ setShowVerificationModal,
+ setClaimToMercadoPago,
+ setRegionalMethodType,
+ setHideTokenSelector,
+ } = useClaimBankFlow()
+ const [showMinAmountError, setShowMinAmountError] = useState(false)
+ const { claimType } = useDetermineBankClaimType(claimLinkData?.sender?.userId ?? '')
+ const savedAccounts = useSavedAccounts()
+ const { addParamStep } = useClaimLink()
+ const [selectedMethod, setSelectedMethod] = useState(null)
+ const [showInviteModal, setShowInviteModal] = useState(false)
+ const { user } = useAuth()
+ const {
+ setSelectedTokenAddress,
+ setSelectedChainID,
+ devconnectChainId,
+ devconnectRecipientAddress,
+ devconnectTokenAddress,
+ } = useContext(tokenSelectorContext)
+ const { isUserMantecaKycApproved } = useKycStatus()
+ const dispatch = useAppDispatch()
+
+ const requiresVerification = useMemo(() => {
+ return claimType === BankClaimType.GuestKycNeeded || claimType === BankClaimType.ReceiverKycNeeded
+ }, [claimType])
+
+ // filter and sort payment methods based on geolocation
+ const { filteredMethods: sortedActionMethods, isLoading: isGeoLoading } = useGeoFilteredPaymentOptions({
+ sortUnavailable: true,
+ isMethodUnavailable: (method) =>
+ method.soon ||
+ (method.id === 'bank' && requiresVerification) ||
+ (['mercadopago', 'pix'].includes(method.id) && !isUserMantecaKycApproved),
+ methods: showDevconnectMethod
+ ? DEVCONNECT_CLAIM_METHODS.filter((method) => method.id !== 'devconnect')
+ : undefined,
+ })
+
+ const handleMethodClick = async (method: PaymentMethod) => {
+ const amountInUsd = parseFloat(formatUnits(claimLinkData.amount, claimLinkData.tokenDecimals))
+ if (method.id === 'bank' && !validateMinimumAmount(amountInUsd, method.id)) {
+ setShowMinAmountError(true)
+ return
+ }
+
+ switch (method.id) {
+ case 'bank':
+ if (claimType === BankClaimType.GuestKycNeeded) {
+ addParamStep('bank')
+ setShowVerificationModal(true)
+ } else {
+ if (savedAccounts.length) {
+ setClaimBankFlowStep(ClaimBankFlowStep.SavedAccountsList)
+ } else {
+ setClaimBankFlowStep(ClaimBankFlowStep.BankCountryList)
+ }
+ }
+ break
+ case 'mercadopago':
+ case 'pix':
+ if (!user) {
+ addParamStep('regional-claim')
+ setShowVerificationModal(true)
+ return
+ }
+ setRegionalMethodType(method.id)
+ setClaimToMercadoPago(true)
+ break
+ case 'devconnect':
+ setExternalWalletRecipient?.({
+ address: devconnectRecipientAddress,
+ name: undefined,
+ })
+ setSelectedTokenAddress(devconnectTokenAddress)
+ setSelectedChainID(devconnectChainId)
+ setHideTokenSelector(true)
+ setClaimToExternalWallet(true)
+ break
+ case 'exchange-or-wallet':
+ setClaimToExternalWallet(true)
+ break
+ }
+ }
+
+ const handleContinueWithPeanut = () => {
+ addParamStep('claim')
+ const redirectUri = encodeURIComponent(window.location.pathname + window.location.search + window.location.hash)
+ const rawUsername = claimLinkData?.sender?.username
+ if (isInviteLink && !userHasAppAccess && rawUsername) {
+ const username = rawUsername.toUpperCase()
+ const inviteCode = `${username}INVITESYOU`
+ dispatch(setupActions.setInviteCode(inviteCode))
+ dispatch(setupActions.setInviteType(EInviteType.PAYMENT_LINK))
+ router.push(`/invite?code=${inviteCode}&redirect_uri=${redirectUri}`)
+ } else {
+ router.push(`/setup?redirect_uri=${redirectUri}`)
+ }
+ }
+
+ const username = claimLinkData?.sender?.username
+ const userHasAppAccess = user?.user?.hasAppAccess ?? false
+ const devconnectMethod = DEVCONNECT_CLAIM_METHODS.find((m) => m.id === 'devconnect')!
+
+ if (isGeoLoading) {
+ return (
+
+ {method.title}
+ {(method.soon || requiresVerification) && (
+
+ }
+ onClick={onClick}
+ isDisabled={method.soon || isDisabled}
+ rightContent={
+
+ )
+ }
+
+ return (
+
+ {showDevconnectMethod && (
+ <>
+
+ setShowMinAmountError(false)}
+ title="Minimum Amount"
+ description={`The minimum amount for this payment method is $${MIN_BANK_TRANSFER_AMOUNT}. Please enter a higher amount or try a different method.`}
+ icon="alert"
+ ctas={[{ text: 'Close', shadowSize: '4', onClick: () => setShowMinAmountError(false) }]}
+ iconContainerClassName="bg-yellow-400"
+ preventClose={false}
+ modalPanelClassName="max-w-md mx-8"
+ />
+
+ {
+ if (selectedMethod) {
+ handleMethodClick(selectedMethod)
+ setShowInviteModal(false)
+ setSelectedMethod(null)
+ }
+ }}
+ isOpen={showInviteModal}
+ onClose={() => {
+ setShowInviteModal(false)
+ setSelectedMethod(null)
+ }}
+ />
+
+ )
+}
+
+const MethodCard = ({
+ method,
+ onClick,
+ requiresVerification,
+ isDisabled,
+}: {
+ method: PaymentMethod
+ onClick: () => void
+ requiresVerification?: boolean
+ isDisabled?: boolean
+}) => {
+ return (
+
+
+ )}
+
+ Invited by {username}, you have early access!
+
+ {sortedActionMethods.map((method) => {
+ let methodRequiresVerification = method.id === 'bank' && requiresVerification
+ if (!isUserMantecaKycApproved && ['mercadopago', 'pix'].includes(method.id)) {
+ methodRequiresVerification = true
+ }
+
+ return (
+ {
+ if (isInviteLink && !userHasAppAccess && method.id !== 'devconnect') {
+ setSelectedMethod(method)
+ setShowInviteModal(true)
+ } else {
+ handleMethodClick(method)
+ }
+ }}
+ key={method.id}
+ method={method}
+ requiresVerification={methodRequiresVerification}
+ />
+ )
+ })}
+
+
+ {!isLoggedIn &&
diff --git a/src/components/Claim/Link/views/Confirm.bank-claim.view.tsx b/src/components/Claim/Link/views/Confirm.bank-claim.view.tsx
index e14d12e99..c3372bc0d 100644
--- a/src/components/Claim/Link/views/Confirm.bank-claim.view.tsx
+++ b/src/components/Claim/Link/views/Confirm.bank-claim.view.tsx
@@ -1,6 +1,6 @@
'use client'
-import { Button } from '@/components/0_Bruddle'
+import { Button } from '@/components/0_Bruddle/Button'
import { ALL_COUNTRIES_ALPHA3_TO_ALPHA2 } from '@/components/AddMoney/consts'
import Card from '@/components/Global/Card'
import ErrorAlert from '@/components/Global/ErrorAlert'
diff --git a/src/components/Claim/Link/views/MantecaDetailsStep.view.tsx b/src/components/Claim/Link/views/MantecaDetailsStep.view.tsx
index 988053c44..163715577 100644
--- a/src/components/Claim/Link/views/MantecaDetailsStep.view.tsx
+++ b/src/components/Claim/Link/views/MantecaDetailsStep.view.tsx
@@ -1,13 +1,13 @@
'use client'
-import { Button } from '@/components/0_Bruddle'
+import { Button } from '@/components/0_Bruddle/Button'
import { Icon } from '@/components/Global/Icons/Icon'
import { MercadoPagoStep } from '@/types/manteca.types'
import { type Dispatch, type FC, type SetStateAction, useState } from 'react'
-import { MANTECA_COUNTRIES_CONFIG } from '@/constants'
import ValidatedInput from '@/components/Global/ValidatedInput'
import { validateCbuCvuAlias } from '@/utils/withdraw.utils'
import ErrorAlert from '@/components/Global/ErrorAlert'
+import { MANTECA_COUNTRIES_CONFIG } from '@/constants/manteca.consts'
interface MantecaDetailsStepProps {
setCurrentStep: Dispatch>
diff --git a/src/components/Claim/Link/views/MantecaReviewStep.tsx b/src/components/Claim/Link/views/MantecaReviewStep.tsx
index ec7e6ea72..7d88100fa 100644
--- a/src/components/Claim/Link/views/MantecaReviewStep.tsx
+++ b/src/components/Claim/Link/views/MantecaReviewStep.tsx
@@ -1,8 +1,7 @@
-import { Button } from '@/components/0_Bruddle'
+import { Button } from '@/components/0_Bruddle/Button'
import ErrorAlert from '@/components/Global/ErrorAlert'
import MantecaDetailsCard, { type MantecaCardRow } from '@/components/Global/MantecaDetailsCard'
import PeanutLoading from '@/components/Global/PeanutLoading'
-import { MANTECA_DEPOSIT_ADDRESS } from '@/constants'
import { useCurrency } from '@/hooks/useCurrency'
import { mantecaApi } from '@/services/manteca'
import { sendLinksApi } from '@/services/sendLinks'
@@ -10,6 +9,7 @@ import { MercadoPagoStep } from '@/types/manteca.types'
import { type Dispatch, type FC, type SetStateAction, useState } from 'react'
import useClaimLink from '@/components/Claim/useClaimLink'
import * as Sentry from '@sentry/nextjs'
+import { MANTECA_DEPOSIT_ADDRESS } from '@/constants/manteca.consts'
interface MantecaReviewStepProps {
setCurrentStep: Dispatch>
@@ -100,7 +100,7 @@ const MantecaReviewStep: FC = ({
}
const { data, error: withdrawError } = await mantecaApi.withdraw({
- amount: amount.replace(/,/g, ''),
+ amount,
destinationAddress,
txHash,
currency,
diff --git a/src/components/Claim/useClaimLink.tsx b/src/components/Claim/useClaimLink.tsx
index 5e60aeb86..9a73f1223 100644
--- a/src/components/Claim/useClaimLink.tsx
+++ b/src/components/Claim/useClaimLink.tsx
@@ -14,11 +14,11 @@ import { useMutation, useQueryClient } from '@tanstack/react-query'
import { usePathname, useSearchParams } from 'next/navigation'
import { captureException } from '@sentry/nextjs'
-import { next_proxy_url } from '@/constants'
import { CLAIM_LINK, CLAIM_LINK_XCHAIN, TRANSACTIONS } from '@/constants/query.consts'
import { loadingStateContext } from '@/context'
-import { isTestnetChain } from '@/utils'
+import { isTestnetChain } from '@/utils/general.utils'
import { sendLinksApi, ESendLinkStatus } from '@/services/sendLinks'
+import { next_proxy_url } from '@/constants/general.consts'
// ============================================================================
// Constants
diff --git a/src/components/Common/ActionList.tsx b/src/components/Common/ActionList.tsx
deleted file mode 100644
index c1de9f64a..000000000
--- a/src/components/Common/ActionList.tsx
+++ /dev/null
@@ -1,498 +0,0 @@
-'use client'
-
-import StatusBadge from '../Global/Badges/StatusBadge'
-import IconStack from '../Global/IconStack'
-import { ClaimBankFlowStep, useClaimBankFlow } from '@/context/ClaimBankFlowContext'
-import { type ClaimLinkData } from '@/services/sendLinks'
-import { formatUnits } from 'viem'
-import { useContext, useMemo, useState, useRef } from 'react'
-import ActionModal from '@/components/Global/ActionModal'
-import Divider from '../0_Bruddle/Divider'
-import { Button } from '../0_Bruddle'
-import { PEANUT_LOGO_BLACK } from '@/assets/illustrations'
-import Image from 'next/image'
-import { useRouter } from 'next/navigation'
-import { PEANUTMAN_LOGO } from '@/assets/peanut'
-import { BankClaimType, useDetermineBankClaimType } from '@/hooks/useDetermineBankClaimType'
-import useSavedAccounts from '@/hooks/useSavedAccounts'
-import { useRequestFulfillmentFlow } from '@/context/RequestFulfillmentFlowContext'
-import { type ParsedURL } from '@/lib/url-parser/types/payment'
-import { useAppDispatch, usePaymentStore } from '@/redux/hooks'
-import { BankRequestType, useDetermineBankRequestType } from '@/hooks/useDetermineBankRequestType'
-import { GuestVerificationModal } from '../Global/GuestVerificationModal'
-import ActionListDaimoPayButton from './ActionListDaimoPayButton'
-import { DEVCONNECT_CLAIM_METHODS, type PaymentMethod } from '@/constants/actionlist.consts'
-import useClaimLink from '../Claim/useClaimLink'
-import { setupActions } from '@/redux/slices/setup-slice'
-import starStraightImage from '@/assets/icons/starStraight.svg'
-import { useAuth } from '@/context/authContext'
-import { EInviteType } from '@/services/services.types'
-import ConfirmInviteModal from '../Global/ConfirmInviteModal'
-import Loading from '../Global/Loading'
-import { useWallet } from '@/hooks/wallet/useWallet'
-import { ActionListCard } from '../ActionListCard'
-import { useGeoFilteredPaymentOptions } from '@/hooks/useGeoFilteredPaymentOptions'
-import { tokenSelectorContext } from '@/context'
-import SupportCTA from '../Global/SupportCTA'
-import { DEVCONNECT_LOGO } from '@/assets'
-import useKycStatus from '@/hooks/useKycStatus'
-import { usePaymentInitiator } from '@/hooks/usePaymentInitiator'
-import { MIN_BANK_TRANSFER_AMOUNT, validateMinimumAmount } from '@/constants'
-
-const SHOW_INVITE_MODAL_FOR_DEVCONNECT = false
-
-interface IActionListProps {
- flow: 'claim' | 'request'
- claimLinkData?: ClaimLinkData
- requestLinkData?: ParsedURL
- isLoggedIn: boolean
- isInviteLink?: boolean
- showDevconnectMethod?: boolean
- setExternalWalletRecipient?: (recipient: { name: string | undefined; address: string }) => void
- usdAmount?: string
-}
-
-/**
- * Shows a list of available payment methods to choose from for claiming a send link or fullfilling a request link
- *
- * @param {object} props
- * @param {ClaimLinkData} props.claimLinkData The claim link data
- * @param {boolean} props.isLoggedIn Whether the user is logged in, used to show cta for continue with peanut if not logged in
- * @returns {JSX.Element}
- */
-export default function ActionList({
- claimLinkData,
- isLoggedIn,
- flow,
- requestLinkData,
- isInviteLink = false,
- showDevconnectMethod,
- setExternalWalletRecipient,
- usdAmount: usdAmountValue,
-}: IActionListProps) {
- const router = useRouter()
- const {
- setClaimToExternalWallet,
- setFlowStep: setClaimBankFlowStep,
- setShowVerificationModal,
- setClaimToMercadoPago,
- setRegionalMethodType,
- setHideTokenSelector,
- } = useClaimBankFlow()
- const { balance } = useWallet()
- const [showMinAmountError, setShowMinAmountError] = useState(false)
- const { claimType } = useDetermineBankClaimType(claimLinkData?.sender?.userId ?? '')
- const { chargeDetails, usdAmount, parsedPaymentData } = usePaymentStore()
- const requesterUserId = chargeDetails?.requestLink?.recipientAccount?.userId ?? ''
- const { requestType } = useDetermineBankRequestType(requesterUserId)
- const savedAccounts = useSavedAccounts()
- const { addParamStep } = useClaimLink()
- const {
- setShowRequestFulfilmentBankFlowManager,
- setFlowStep: setRequestFulfilmentBankFlowStep,
- setFulfillUsingManteca,
- setRegionalMethodType: setRequestFulfillmentRegionalMethodType,
- setTriggerPayWithPeanut,
- } = useRequestFulfillmentFlow()
- const [isGuestVerificationModalOpen, setIsGuestVerificationModalOpen] = useState(false)
- const [selectedMethod, setSelectedMethod] = useState(null)
- const [showInviteModal, setShowInviteModal] = useState(false)
- const { user } = useAuth()
- const {
- setSelectedTokenAddress,
- setSelectedChainID,
- devconnectChainId,
- devconnectRecipientAddress,
- devconnectTokenAddress,
- } = useContext(tokenSelectorContext)
- const [isUsePeanutBalanceModalShown, setIsUsePeanutBalanceModalShown] = useState(false)
- const [showUsePeanutBalanceModal, setShowUsePeanutBalanceModal] = useState(false)
- const [selectedPaymentMethod, setSelectedPaymentMethod] = useState(null)
- const { initiatePayment, loadingStep } = usePaymentInitiator()
- const { isUserMantecaKycApproved } = useKycStatus()
- const isPaymentInProgress = loadingStep !== 'Idle' && loadingStep !== 'Error' && loadingStep !== 'Success'
- // ref to store daimo button click handler for triggering from balance modal
- const daimoButtonClickRef = useRef<(() => void) | null>(null)
-
- const dispatch = useAppDispatch()
-
- const requiresVerification = useMemo(() => {
- if (flow === 'claim') {
- return claimType === BankClaimType.GuestKycNeeded || claimType === BankClaimType.ReceiverKycNeeded
- }
- if (flow === 'request') {
- return requestType === BankRequestType.GuestKycNeeded || requestType === BankRequestType.PayerKycNeeded
- }
- return false
- }, [claimType, requestType, flow])
-
- // use the hook to filter and sort payment methods based on geolocation
- const { filteredMethods: sortedActionMethods, isLoading: isGeoLoading } = useGeoFilteredPaymentOptions({
- sortUnavailable: true,
- isMethodUnavailable: (method) =>
- method.soon ||
- (method.id === 'bank' && requiresVerification) ||
- (['mercadopago', 'pix'].includes(method.id) && !isUserMantecaKycApproved),
- methods: showDevconnectMethod
- ? DEVCONNECT_CLAIM_METHODS.filter((method) => method.id !== 'devconnect')
- : undefined,
- })
-
- // Check if user has enough Peanut balance to pay for the request
- const amountInUsd = usdAmount ? parseFloat(usdAmount) : 0
- const hasSufficientPeanutBalance = user && balance && Number(balance) >= amountInUsd
-
- // check if amount is valid for request flow
- const currentRequestAmount = usdAmountValue ?? usdAmount
- const requestAmountValue = currentRequestAmount ? parseFloat(currentRequestAmount) : 0
- const isAmountEntered = flow === 'request' ? !!currentRequestAmount && requestAmountValue > 0 : true
-
- const handleMethodClick = async (method: PaymentMethod, bypassBalanceModal = false) => {
- // validate minimum amount for bank/mercado pago/pix in request flow
- if (flow === 'request' && requestLinkData) {
- // check minimum amount for bank/mercado pago/pix
- if (
- ['bank', 'mercadopago', 'pix'].includes(method.id) &&
- !validateMinimumAmount(requestAmountValue, method.id)
- ) {
- setShowMinAmountError(true)
- return
- }
- }
-
- // For request flow: Check if user has sufficient Peanut balance and hasn't dismissed the modal
- if (flow === 'request' && requestLinkData && !bypassBalanceModal) {
- if (!isUsePeanutBalanceModalShown && hasSufficientPeanutBalance) {
- setSelectedPaymentMethod(method) // Store the method they want to use
- setShowUsePeanutBalanceModal(true)
- return // Show modal, don't proceed with method yet
- }
- }
-
- if (flow === 'claim' && claimLinkData) {
- const amountInUsd = parseFloat(formatUnits(claimLinkData.amount, claimLinkData.tokenDecimals))
- if (method.id === 'bank' && !validateMinimumAmount(amountInUsd, method.id)) {
- setShowMinAmountError(true)
- return
- }
- switch (method.id) {
- case 'bank':
- {
- if (claimType === BankClaimType.GuestKycNeeded) {
- addParamStep('bank')
- setShowVerificationModal(true)
- } else {
- if (savedAccounts.length) {
- setClaimBankFlowStep(ClaimBankFlowStep.SavedAccountsList)
- } else {
- setClaimBankFlowStep(ClaimBankFlowStep.BankCountryList)
- }
- }
- }
- break
- case 'mercadopago':
- case 'pix':
- if (!user) {
- addParamStep('regional-claim')
- setShowVerificationModal(true)
- return
- }
- setRegionalMethodType(method.id)
- setClaimToMercadoPago(true)
- break
- case 'devconnect':
- setExternalWalletRecipient?.({
- address: devconnectRecipientAddress, // Address sent from devconnect app
- name: undefined,
- })
- // For devconnect claims we need to set address and chain from the url params
- setSelectedTokenAddress(devconnectTokenAddress)
- setSelectedChainID(devconnectChainId)
- setHideTokenSelector(true)
- setClaimToExternalWallet(true)
- break
- case 'exchange-or-wallet':
- setClaimToExternalWallet(true)
- break
- }
- } else if (flow === 'request' && requestLinkData) {
- // for bank/mercadopago/pix in request flow, redirect to add-money flow
- switch (method.id) {
- case 'bank':
- case 'mercadopago':
- case 'pix':
- if (user?.user) {
- // user is logged in, redirect to add-money
- router.push('/add-money')
- } else {
- // user is not logged in, save redirect url and go to setup
- const redirectUri = encodeURIComponent('/add-money')
- router.push(`/setup?redirect_uri=${redirectUri}`)
- }
- break
- // 'exchange-or-wallet' case removed - handled by ActionListDaimoPayButton
- }
- }
- }
-
- const handleContinueWithPeanut = () => {
- if (flow === 'claim') {
- addParamStep('claim')
- }
- // push to setup page with redirect uri, to prevent the user from losing the flow context
- const redirectUri = encodeURIComponent(window.location.pathname + window.location.search + window.location.hash)
- const rawUsername =
- flow === 'request' ? requestLinkData?.recipient?.identifier : claimLinkData?.sender?.username
- if (isInviteLink && !userHasAppAccess && rawUsername) {
- const username = rawUsername ? rawUsername.toUpperCase() : ''
- const inviteCode = `${username}INVITESYOU`
- dispatch(setupActions.setInviteCode(inviteCode))
- dispatch(setupActions.setInviteType(EInviteType.PAYMENT_LINK))
- router.push(`/invite?code=${inviteCode}&redirect_uri=${redirectUri}`)
- } else {
- router.push(`/setup?redirect_uri=${redirectUri}`)
- }
- }
-
- const username = claimLinkData?.sender?.username ?? requestLinkData?.recipient?.identifier
- const userHasAppAccess = user?.user?.hasAppAccess ?? false
-
- const devconnectMethod = DEVCONNECT_CLAIM_METHODS.find((m) => m.id === 'devconnect')!
-
- if (isGeoLoading) {
- return (
-
- {method.title}
- {(method.soon || requiresVerification) && (
-
- }
- onClick={onClick}
- isDisabled={method.soon || isDisabled}
- rightContent={
-
- )
- }
-
- return (
-
- {/* TODO @dev remove this after devconnect app testing phase */}
- {showDevconnectMethod && (
- <>
-
-
- setShowMinAmountError(false)}
- title="Minimum Amount"
- description={`The minimum amount for this payment method is $${MIN_BANK_TRANSFER_AMOUNT}. Please enter a higher amount or try a different method.`}
- icon="alert"
- ctas={[{ text: 'Close', shadowSize: '4', onClick: () => setShowMinAmountError(false) }]}
- iconContainerClassName="bg-yellow-400"
- preventClose={false}
- modalPanelClassName="max-w-md mx-8"
- />
-
- setIsGuestVerificationModalOpen(false)}
- description="To fulfill this request using bank account, please create an account and verify your identity."
- redirectToVerification
- />
-
- {/* Invites modal */}
-
- {
- if (selectedMethod) {
- handleMethodClick(selectedMethod)
- setShowInviteModal(false)
- setSelectedMethod(null)
- }
- }}
- isOpen={showInviteModal}
- onClose={() => {
- setShowInviteModal(false)
- setSelectedMethod(null)
- }}
- />
-
- {
- setShowUsePeanutBalanceModal(false)
- setIsUsePeanutBalanceModalShown(true)
- setSelectedPaymentMethod(null)
- }}
- title="Use your Peanut balance instead"
- description={
- 'You already have enough funds in your Peanut account. Using this method is instant and avoids delays.'
- }
- icon="user-plus"
- ctas={[
- {
- text: 'Pay with Peanut',
- shadowSize: '4',
- onClick: () => {
- setShowUsePeanutBalanceModal(false)
- setIsUsePeanutBalanceModalShown(true)
- setSelectedPaymentMethod(null)
- setTriggerPayWithPeanut(true)
- },
- },
- {
- text: 'Continue',
- shadowSize: '4',
- variant: 'stroke',
- onClick: () => {
- setShowUsePeanutBalanceModal(false)
- setIsUsePeanutBalanceModalShown(true)
- // Proceed with the method the user originally selected
- if (selectedPaymentMethod) {
- // for exchange-or-wallet, trigger daimo button after state updates
- if (selectedPaymentMethod.id === 'exchange-or-wallet' && daimoButtonClickRef.current) {
- // use setTimeout to ensure state updates are processed before triggering daimo
- setTimeout(() => {
- daimoButtonClickRef.current?.()
- }, 0)
- } else {
- // for other methods, use handleMethodClick
- handleMethodClick(selectedPaymentMethod, true) // true = bypass modal check
- }
- }
- setSelectedPaymentMethod(null)
- },
- },
- ]}
- iconContainerClassName="bg-primary-1"
- preventClose={false}
- modalPanelClassName="max-w-md mx-8"
- />
-
- )
-}
-
-export const MethodCard = ({
- method,
- onClick,
- requiresVerification,
- isDisabled,
-}: {
- method: PaymentMethod
- onClick: () => void
- requiresVerification?: boolean
- isDisabled?: boolean
-}) => {
- return (
-
-
- )}
- Invited by {username}, you have early access!
-
- {sortedActionMethods.map((method) => {
- if (flow === 'request' && method.id === 'exchange-or-wallet') {
- return (
- {
- if (isInviteLink && !userHasAppAccess && method.id !== 'devconnect') {
- setSelectedMethod(method)
- setShowInviteModal(true)
- } else {
- handleMethodClick(method)
- }
- }}
- key={method.id}
- method={method}
- requiresVerification={
- methodRequiresVerification ||
- (['mercadopago', 'pix'].includes(method.id) && !isUserMantecaKycApproved)
- }
- isDisabled={!isAmountEntered}
- />
- )
- })}
-
- {flow === 'claim' && !isLoggedIn &&
- {
- // Check balance before showing Daimo widget
- if (!isUsePeanutBalanceModalShown && hasSufficientPeanutBalance) {
- setSelectedPaymentMethod(method)
- setShowUsePeanutBalanceModal(true)
- return false // Don't show Daimo yet
- }
- return true // Proceed with Daimo
- }}
- isDisabled={!isAmountEntered}
- clickHandlerRef={daimoButtonClickRef}
- />
-
- )
- }
-
- let methodRequiresVerification = method.id === 'bank' && requiresVerification
-
- if (!isUserMantecaKycApproved && ['mercadopago', 'pix'].includes(method.id)) {
- methodRequiresVerification = true
- }
-
- return (
-
+
+ )
+}
diff --git a/src/components/Common/CountryList.tsx b/src/components/Common/CountryList.tsx
index 1f40a8a86..839f735d7 100644
--- a/src/components/Common/CountryList.tsx
+++ b/src/components/Common/CountryList.tsx
@@ -1,11 +1,9 @@
'use client'
import {
- BRIDGE_ALPHA3_TO_ALPHA2,
type CountryData,
countryData,
MantecaSupportedExchanges,
ALL_COUNTRIES_ALPHA3_TO_ALPHA2,
- NON_EUR_SEPA_ALPHA2,
} from '@/components/AddMoney/consts'
import EmptyState from '@/components/Global/EmptyStates/EmptyState'
import { SearchInput } from '@/components/SearchInput'
@@ -165,9 +163,7 @@ export const CountryList = ({
} else if (viewMode === 'claim-request') {
// support bridge or manteca supported countries, but temporarily disable sepa corridors
// where local currency is not eur (show as soon)
- const isDisabledNonEurSepa = NON_EUR_SEPA_ALPHA2.has(twoLetterCountryCode.toUpperCase())
- const isBridgeAndNotDisabled = isBridgeSupportedCountry && !isDisabledNonEurSepa
- isSupported = isBridgeAndNotDisabled || isMantecaSupportedCountry
+ isSupported = isBridgeSupportedCountry || isMantecaSupportedCountry
} else {
// support all countries
isSupported = true
diff --git a/src/components/Common/CountryListRouter.tsx b/src/components/Common/CountryListRouter.tsx
index c5b46624a..fdc1953c8 100644
--- a/src/components/Common/CountryListRouter.tsx
+++ b/src/components/Common/CountryListRouter.tsx
@@ -1,9 +1,6 @@
'use client'
import NavHeader from '@/components/Global/NavHeader'
-import PeanutActionDetailsCard, {
- type PeanutActionDetailsCardRecipientType,
- type PeanutActionDetailsCardTransactionType,
-} from '@/components/Global/PeanutActionDetailsCard'
+import PeanutActionDetailsCard from '@/components/Global/PeanutActionDetailsCard'
import { ClaimBankFlowStep, useClaimBankFlow } from '@/context/ClaimBankFlowContext'
import { formatUnits } from 'viem'
import { formatTokenAmount, printableAddress } from '@/utils/general.utils'
@@ -11,178 +8,62 @@ import { CountryList } from '@/components/Common/CountryList'
import { type ClaimLinkData } from '@/services/sendLinks'
import { type CountryData, MantecaSupportedExchanges } from '@/components/AddMoney/consts'
import useSavedAccounts from '@/hooks/useSavedAccounts'
-import { type ParsedURL } from '@/lib/url-parser/types/payment'
import { useCallback, useMemo } from 'react'
-import { RequestFulfillmentBankFlowStep, useRequestFulfillmentFlow } from '@/context/RequestFulfillmentFlowContext'
-import { usePaymentStore } from '@/redux/hooks'
-import { useAuth } from '@/context/authContext'
-import { BankRequestType, useDetermineBankRequestType } from '@/hooks/useDetermineBankRequestType'
interface ICountryListRouterViewProps {
- claimLinkData?: ClaimLinkData
+ claimLinkData: ClaimLinkData
inputTitle: string
- requestLinkData?: ParsedURL
- flow: 'claim' | 'request'
}
/**
- * Used to display countries list for claim link and request flow with @PeanutActionDetailsCard component as header
- *
- * @param {object} props
- * @param {'claim' | 'request'} props.flow The flow type (claim or request)
- * @param {ClaimLinkData} props.claimLinkData The claim link data
- * @param {ParsedURL} props.requestLinkData The request link data
- * @param {string} props.inputTitle The input title to be passed to @CountryList component
- * @returns {JSX.Element}
+ * displays countries list for claim link flow with @PeanutActionDetailsCard component as header
*/
-export const CountryListRouter = ({
- flow,
- claimLinkData,
- requestLinkData,
- inputTitle,
-}: ICountryListRouterViewProps) => {
+export const CountryListRouter = ({ claimLinkData, inputTitle }: ICountryListRouterViewProps) => {
const {
setFlowStep: setClaimBankFlowStep,
setSelectedCountry,
setClaimToMercadoPago,
setFlowStep,
} = useClaimBankFlow()
- const {
- setFlowStep: setRequestFulfilmentBankFlowStep,
- setShowRequestFulfilmentBankFlowManager,
- setSelectedCountry: setSelectedCountryForRequest,
- setShowVerificationModal,
- setFulfillUsingManteca,
- } = useRequestFulfillmentFlow()
const savedAccounts = useSavedAccounts()
- const { chargeDetails } = usePaymentStore()
- const { requestType } = useDetermineBankRequestType(chargeDetails?.requestLink.recipientAccount.userId ?? '')
- const { user } = useAuth()
const handleCountryClick = (country: CountryData) => {
const isMantecaSupportedCountry = Object.keys(MantecaSupportedExchanges).includes(country.id)
- if (flow === 'claim') {
- setSelectedCountry(country)
- if (isMantecaSupportedCountry) {
- setFlowStep(null) // reset the flow step to initial view first
- setClaimToMercadoPago(true)
- } else {
- setClaimBankFlowStep(ClaimBankFlowStep.BankDetailsForm)
- }
- } else if (flow === 'request') {
- if (isMantecaSupportedCountry) {
- setShowRequestFulfilmentBankFlowManager(false)
- setFulfillUsingManteca(true)
- }
- setSelectedCountryForRequest(country)
- if (requestType === BankRequestType.PayerKycNeeded) {
- if (user && (!user.user.fullName || !user.user.email)) {
- setRequestFulfilmentBankFlowStep(RequestFulfillmentBankFlowStep.CollectUserDetails)
- } else {
- setShowVerificationModal(true)
- }
- } else {
- setRequestFulfilmentBankFlowStep(RequestFulfillmentBankFlowStep.OnrampConfirmation)
- }
+ setSelectedCountry(country)
+ if (isMantecaSupportedCountry) {
+ setFlowStep(null) // reset the flow step to initial view first
+ setClaimToMercadoPago(true)
+ } else {
+ setClaimBankFlowStep(ClaimBankFlowStep.BankDetailsForm)
}
}
- const receipientType = useCallback((): PeanutActionDetailsCardRecipientType => {
- switch (flow) {
- case 'claim':
- return 'USERNAME'
- case 'request': {
- if (requestLinkData?.recipient?.recipientType === 'USERNAME') {
- return 'USERNAME'
- } else if (requestLinkData?.recipient?.recipientType === 'ADDRESS') {
- return 'ADDRESS'
- } else if (requestLinkData?.recipient?.recipientType === 'ENS') {
- return 'ENS'
- }
- return 'USERNAME'
- }
- }
- }, [flow, requestLinkData])
-
- const receipientName = useCallback(() => {
- switch (flow) {
- case 'claim':
- return claimLinkData?.sender?.username ?? printableAddress(claimLinkData?.senderAddress ?? '')
- case 'request':
- if (chargeDetails?.requestLink.recipientAccount.type === 'peanut-wallet') {
- return (
- chargeDetails?.requestLink.recipientAccount.user.username ??
- printableAddress(chargeDetails?.requestLink.recipientAddress as string)
- )
- } else {
- return printableAddress(chargeDetails?.requestLink.recipientAccount.identifier as string)
- }
- }
- }, [flow, claimLinkData, chargeDetails])
-
- const amount = useCallback(() => {
- switch (flow) {
- case 'claim':
- return formatTokenAmount(
- Number(formatUnits(claimLinkData?.amount ?? 0n, claimLinkData?.tokenDecimals ?? 0))
- )
- case 'request':
- return chargeDetails?.tokenAmount ?? '0'
- }
- }, [flow, claimLinkData, chargeDetails])
-
- const tokenSymbol = useCallback(() => {
- switch (flow) {
- case 'claim':
- return claimLinkData?.tokenSymbol ?? requestLinkData?.token?.symbol
- case 'request':
- return chargeDetails?.tokenSymbol
- }
- }, [flow, claimLinkData, requestLinkData, chargeDetails])
+ const recipientName = useMemo(() => {
+ return claimLinkData?.sender?.username ?? printableAddress(claimLinkData?.senderAddress ?? '')
+ }, [claimLinkData])
- const peanutActionDetailsCardProps = useMemo(() => {
- const transactionType: PeanutActionDetailsCardTransactionType =
- flow === 'claim' ? 'CLAIM_LINK' : 'REQUEST_PAYMENT'
-
- return {
- avatarSize: 'small',
- transactionType,
- recipientType: receipientType(),
- recipientName: receipientName(),
- amount: amount(),
- tokenSymbol: tokenSymbol(),
- }
- }, [flow, claimLinkData, requestLinkData, chargeDetails])
+ const amount = useMemo(() => {
+ return formatTokenAmount(Number(formatUnits(claimLinkData?.amount ?? 0n, claimLinkData?.tokenDecimals ?? 0)))
+ }, [claimLinkData])
const onPrev = useCallback(() => {
- if (flow === 'claim') {
- if (savedAccounts.length > 0) {
- setClaimBankFlowStep(ClaimBankFlowStep.SavedAccountsList)
- } else {
- setClaimBankFlowStep(null)
- }
- } else if (flow === 'request') {
- setRequestFulfilmentBankFlowStep(null)
- setShowRequestFulfilmentBankFlowManager(false)
+ if (savedAccounts.length > 0) {
+ setClaimBankFlowStep(ClaimBankFlowStep.SavedAccountsList)
+ } else {
+ setClaimBankFlowStep(null)
}
- }, [
- flow,
- savedAccounts,
- setClaimBankFlowStep,
- setRequestFulfilmentBankFlowStep,
- setShowRequestFulfilmentBankFlowManager,
- ])
+ }, [savedAccounts, setClaimBankFlowStep])
return (
Your contacts
+
+ {Array.from({ length: count }).map((_, index) => {
+ const position = getCardPosition(index, count)
+ return (
+
+
- ) => {
- const { setIsSupportModalOpen } = useSupportModalContext()
+ const { setIsSupportModalOpen } = useModalsContext()
const handleClick = () => {
setIsSupportModalOpen(true)
diff --git a/src/components/Global/ActionModal/index.tsx b/src/components/Global/ActionModal/index.tsx
index c872fb9ac..d3e3e2836 100644
--- a/src/components/Global/ActionModal/index.tsx
+++ b/src/components/Global/ActionModal/index.tsx
@@ -197,7 +197,7 @@ const ActionModal: React.FC = ({
{children}
{btnIcon && currentIconPosition === 'left' && (
= ({
{text}
{btnIcon && currentIconPosition === 'right' && (
(
- isAddress(address) ? printableAddress(address) : address
+ isCryptoAddress(address) ? printableAddress(address) : address
)
const [urlAddress, setUrlAddress] = useState(address)
- // Look up ENS name only for Ethereum addresses
+ // Look up ENS name only for Ethereum addresses (ENS doesn't apply to Solana/Tron)
const { primaryName: ensName } = usePrimaryName({
address: isAddress(address) ? (address as `0x${string}`) : undefined,
chainId: 1, // Mainnet for ENS lookups
@@ -26,7 +26,7 @@ const AddressLink = ({ address, className = '', isLink = true }: AddressLinkProp
})
useEffect(() => {
- // Update display: prefer ENS name for addresses, otherwise use as-is
+ // Update display: prefer ENS name for EVM addresses, otherwise shorten any crypto address
if (isAddress(address) && ensName) {
// for peanut ens names, strip the domain from the displayed string so its just a username (no ens subdomain)
const peanutEnsDomain = process.env.NEXT_PUBLIC_JUSTANAME_ENS_DOMAIN || ''
@@ -35,7 +35,7 @@ const AddressLink = ({ address, className = '', isLink = true }: AddressLinkProp
setDisplayAddress(normalizedEnsName)
setUrlAddress(normalizedEnsName)
} else {
- setDisplayAddress(isAddress(address) ? printableAddress(address) : address)
+ setDisplayAddress(isCryptoAddress(address) ? printableAddress(address) : address)
}
}, [address, ensName])
diff --git a/src/components/Global/AmountInput/index.tsx b/src/components/Global/AmountInput/index.tsx
new file mode 100644
index 000000000..d8af865d0
--- /dev/null
+++ b/src/components/Global/AmountInput/index.tsx
@@ -0,0 +1,309 @@
+'use client'
+
+import { formatTokenAmount } from '@/utils/general.utils'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { twMerge } from 'tailwind-merge'
+import { Icon as IconComponent } from '@/components/Global/Icons/Icon'
+import { Slider } from '../Slider'
+import { DeviceType, useDeviceType } from '@/hooks/useGetDeviceType'
+
+// Used for internal calculations, not displayed to the user
+const DECIMAL_SCALE = 18 // Max expected decimal places for any denomination
+
+interface AmountInputProps {
+ className?: string
+ initialAmount?: string
+ onSubmit?: () => void
+ setPrimaryAmount: (value: string) => void
+ setSecondaryAmount?: (value: string) => void
+ onBlur?: () => void
+ disabled?: boolean
+ primaryDenomination?: { symbol: string; price: number; decimals: number }
+ secondaryDenomination?: { symbol: string; price: number; decimals: number }
+ setCurrentDenomination?: (denomination: string) => void
+ walletBalance?: string
+ hideCurrencyToggle?: boolean
+ hideBalance?: boolean
+ infoContent?: React.ReactNode
+
+ showSlider?: boolean
+ maxAmount?: number
+ amountCollected?: number
+ defaultSliderValue?: number
+ defaultSliderSuggestedAmount?: number
+}
+
+const AmountInput = ({
+ className,
+ initialAmount,
+ onSubmit,
+ setPrimaryAmount,
+ setSecondaryAmount,
+ onBlur,
+ disabled,
+ primaryDenomination = { symbol: '$', price: 1, decimals: 2 },
+ secondaryDenomination,
+ setCurrentDenomination,
+ walletBalance,
+ hideCurrencyToggle,
+ hideBalance,
+ infoContent,
+
+ showSlider = false,
+ maxAmount,
+ amountCollected = 0,
+ defaultSliderValue,
+ defaultSliderSuggestedAmount,
+}: AmountInputProps) => {
+ const [isFocused, setIsFocused] = useState(false)
+ const { deviceType } = useDeviceType()
+ // Only autofocus on desktop (WEB), not on mobile devices (IOS/ANDROID)
+ const shouldAutoFocus = deviceType === DeviceType.WEB
+ const showConversion = !hideCurrencyToggle && !!secondaryDenomination
+
+ // Store display value for input field (what user sees when typing)
+ const [displayValue, setDisplayValue] = useState(initialAmount || '')
+ const [exactValue, setExactValue] = useState(Number(initialAmount || '') * 10 ** DECIMAL_SCALE)
+ const [displaySymbol, setDisplaySymbol] = useState(primaryDenomination.symbol)
+
+ // Track when user is actively editing to prevent feedback loops from initialAmount sync
+ const isEditingRef = useRef(false)
+
+ // Check if displayValue has a meaningful numeric value (not empty, "0", "0.00", etc.)
+ const hasValue = Boolean(Number(displayValue))
+
+ // Sync displayValue with initialAmount changes (e.g. when charge is fetched)
+ // Skip sync if user is actively editing to prevent overwriting their input
+ useEffect(() => {
+ if (initialAmount && initialAmount !== displayValue && !isEditingRef.current) {
+ setDisplayValue(initialAmount)
+ setExactValue(Number(initialAmount) * 10 ** DECIMAL_SCALE)
+ }
+ }, [initialAmount])
+
+ const denominations = {
+ [primaryDenomination.symbol]: primaryDenomination,
+ }
+ if (secondaryDenomination) {
+ denominations[secondaryDenomination.symbol] = secondaryDenomination
+ }
+
+ const alternativeDisplaySymbol = useMemo(() => {
+ return Object.keys(denominations).find((key) => key !== displaySymbol) ?? ''
+ }, [displaySymbol])
+
+ useEffect(() => {
+ if (setCurrentDenomination) {
+ setCurrentDenomination(displaySymbol)
+ }
+ }, [displaySymbol])
+
+ /*
+ * Rate needed to convert from primary to secondary denomination by
+ * multiplying the primary rate by the exchange rate.
+ * Expressed as a integer with the scale of the max resolution denomination
+ */
+ const exchangeRate = useMemo(() => {
+ if (!secondaryDenomination) return 1
+ const alternativePrice = denominations[alternativeDisplaySymbol]?.price
+ const mainPrice = denominations[displaySymbol]?.price
+ return alternativePrice / mainPrice
+ }, [displaySymbol, alternativeDisplaySymbol, secondaryDenomination])
+
+ const alternativeValue = useMemo(() => {
+ if (!secondaryDenomination || !displayValue) return 0
+ return exactValue * exchangeRate
+ }, [exactValue, secondaryDenomination, exchangeRate, displayValue])
+
+ const alternativeDisplayValue = useMemo(() => {
+ if (!secondaryDenomination || !alternativeValue) return '0.00'
+ const scaledDownValue = alternativeValue / 10 ** DECIMAL_SCALE
+ return formatTokenAmount(scaledDownValue, denominations[alternativeDisplaySymbol]?.decimals) ?? '0.00'
+ }, [alternativeValue, alternativeDisplaySymbol, secondaryDenomination])
+
+ useEffect(() => {
+ const isPrimaryDenomination = displaySymbol === primaryDenomination.symbol
+ // Strip commas before passing to consumers - they expect raw numeric strings
+ const rawDisplayValue = displayValue.replace(/,/g, '')
+ // Don't output "0.00" when there's no actual value - keep it empty to avoid feedback loops
+ const rawAlternativeValue = hasValue ? alternativeDisplayValue.replace(/,/g, '') : ''
+
+ if (isPrimaryDenomination) {
+ setPrimaryAmount(rawDisplayValue)
+ setSecondaryAmount?.(rawAlternativeValue)
+ } else {
+ setPrimaryAmount(rawAlternativeValue)
+ setSecondaryAmount?.(rawDisplayValue)
+ }
+ }, [displayValue, alternativeDisplayValue, displaySymbol, secondaryDenomination, hasValue])
+
+ const onSliderValueChange = useCallback(
+ (value: number[]) => {
+ if (maxAmount) {
+ isEditingRef.current = true
+ const selectedPercentage = value[0]
+ let selectedAmount = (selectedPercentage / 100) * maxAmount
+
+ // Only snap to exact remaining amount when user selects the 33.33% magnetic snap point
+ // This ensures equal splits fill the pot exactly to 100%
+ const SNAP_POINT_TOLERANCE = 0.5 // percentage points - allows magnetic snapping
+ const COMPLETION_THRESHOLD = 0.98 // 98% - if 33.33% would nearly complete pot
+ const EQUAL_SPLIT_PERCENTAGE = 100 / 3 // 33.333...%
+
+ const isAt33SnapPoint = Math.abs(selectedPercentage - EQUAL_SPLIT_PERCENTAGE) < SNAP_POINT_TOLERANCE
+ if (isAt33SnapPoint && amountCollected > 0) {
+ const remainingAmount = maxAmount - amountCollected
+ // Only snap if there's remaining amount and 33.33% would nearly complete the pot
+ if (remainingAmount > 0 && selectedAmount >= remainingAmount * COMPLETION_THRESHOLD) {
+ selectedAmount = remainingAmount
+ }
+ }
+
+ const selectedAmountStr = parseFloat(selectedAmount.toFixed(4)).toString()
+ const formattedAmount = formatTokenAmount(
+ selectedAmountStr,
+ denominations[displaySymbol]?.decimals,
+ true
+ )
+ if (formattedAmount) {
+ setDisplayValue(formattedAmount)
+ setExactValue(Number(formattedAmount) * 10 ** DECIMAL_SCALE)
+ }
+ }
+ },
+ [maxAmount, amountCollected]
+ )
+
+ // Sync default slider suggested amount to the input
+ useEffect(() => {
+ if (defaultSliderSuggestedAmount) {
+ const formattedAmount = formatTokenAmount(defaultSliderSuggestedAmount.toString(), 2)
+ if (formattedAmount) {
+ setDisplayValue(formattedAmount)
+ setExactValue(Number(formattedAmount) * 10 ** DECIMAL_SCALE)
+ }
+ }
+ }, [defaultSliderSuggestedAmount])
+
+ const inputRef = useRef(null)
+ // set input width based on display value length
+ // add extra space for decimal numbers to prevent cutoff
+ useEffect(() => {
+ if (inputRef.current) {
+ const length = displayValue?.length || 0
+ // add 0.6ch extra width to prevent cutoff, minimum 4ch
+ const width = length ? `${length + 0.6}ch` : '4ch'
+ inputRef.current.style.width = width
+ }
+ }, [displayValue])
+
+ return (
+
+ )
+}
+
+export default AmountInput
diff --git a/src/components/Global/Badges/StatusBadge.tsx b/src/components/Global/Badges/StatusBadge.tsx
index 55c3ff751..8eaf7335d 100644
--- a/src/components/Global/Badges/StatusBadge.tsx
+++ b/src/components/Global/Badges/StatusBadge.tsx
@@ -1,7 +1,16 @@
import React from 'react'
import { twMerge } from 'tailwind-merge'
-export type StatusType = 'completed' | 'pending' | 'failed' | 'cancelled' | 'soon' | 'processing' | 'custom' | 'closed'
+export type StatusType =
+ | 'completed'
+ | 'pending'
+ | 'failed'
+ | 'cancelled'
+ | 'soon'
+ | 'processing'
+ | 'custom'
+ | 'closed'
+ | 'refunded'
interface StatusBadgeProps {
status: StatusType
@@ -21,6 +30,7 @@ const StatusBadge: React.FC = ({ status, className, size = 'sm
return 'bg-secondary-4 text-yellow-6 border border-yellow-7'
case 'failed':
case 'cancelled':
+ case 'refunded':
return 'bg-error-1 text-error border border-error-2'
case 'soon':
case 'custom':
@@ -42,6 +52,8 @@ const StatusBadge: React.FC = ({ status, className, size = 'sm
return 'Failed'
case 'cancelled':
return 'Cancelled'
+ case 'refunded':
+ return 'Refunded'
case 'soon':
return 'Soon!'
case 'closed':
diff --git a/src/components/Global/Banner/index.tsx b/src/components/Global/Banner/index.tsx
index 8ccb19e83..1204c9b1e 100644
--- a/src/components/Global/Banner/index.tsx
+++ b/src/components/Global/Banner/index.tsx
@@ -6,7 +6,7 @@ import { MarqueeWrapper } from '../MarqueeWrapper'
import maintenanceConfig from '@/config/underMaintenance.config'
import { HandThumbsUp } from '@/assets'
import Image from 'next/image'
-import { useSupportModalContext } from '@/context/SupportModalContext'
+import { useModalsContext } from '@/context/ModalsContext'
import { GIT_COMMIT_HASH, IS_PRODUCTION } from '@/constants/general.consts'
export function Banner() {
@@ -26,7 +26,7 @@ export function Banner() {
}
function FeedbackBanner() {
- const { setIsSupportModalOpen } = useSupportModalContext()
+ const { setIsSupportModalOpen } = useModalsContext()
const handleClick = () => {
setIsSupportModalOpen(true)
diff --git a/src/components/Global/ChainSelector/index.tsx b/src/components/Global/ChainSelector/index.tsx
deleted file mode 100644
index 919e4bf34..000000000
--- a/src/components/Global/ChainSelector/index.tsx
+++ /dev/null
@@ -1,151 +0,0 @@
-'use client'
-
-import { supportedPeanutChains } from '@/constants'
-import { tokenSelectorContext } from '@/context'
-import { type IPeanutChainDetails, type IUserBalance } from '@/interfaces'
-import { calculateValuePerChain, formatTokenAmount } from '@/utils'
-import { Menu, Transition } from '@headlessui/react'
-import { useContext, useMemo, useState } from 'react'
-import Icon from '../Icon'
-import Search from '../Search'
-
-type Chain = {
- name: string
- icon: {
- url: string
- format: string
- }
- mainnet: boolean
-}
-
-interface IChainSelectorProps {
- chainsToDisplay?: IPeanutChainDetails[]
- onChange?: (chainId: string) => void
- balances: IUserBalance[]
-}
-
-const ChainSelector = ({ chainsToDisplay, onChange, balances }: IChainSelectorProps) => {
- const [, setVisible] = useState(false)
- const [filterValue, setFilterValue] = useState('')
-
- const { selectedChainID, setSelectedChainID } = useContext(tokenSelectorContext)
-
- const valuePerChain = useMemo(() => calculateValuePerChain(balances), [balances])
-
- const _chainsToDisplay = useMemo(() => {
- let chains
- if (chainsToDisplay) {
- chains = chainsToDisplay
- } else {
- chains = supportedPeanutChains
- }
- if (valuePerChain.length > 0) {
- // Sort the chains based on the value
- chains = chains.sort((a, b) => {
- const aValue = valuePerChain.find((value) => value.chainId === a.chainId)?.valuePerChain || 0
- const bValue = valuePerChain.find((value) => value.chainId === b.chainId)?.valuePerChain || 0
- return bValue - aValue
- })
- }
- if (filterValue) {
- chains = chains.filter(
- (chain) =>
- chain.name.toLowerCase().includes(filterValue.toLowerCase()) ||
- chain.shortName.toLowerCase().includes(filterValue.toLowerCase())
- )
- }
- return chains
- }, [filterValue, valuePerChain, chainsToDisplay])
-
- function setChain(chainId: string): void {
- setSelectedChainID(chainId)
- setVisible(false)
- onChange?.(chainId)
- }
-
- return (
-
- )
-}
-
-const chainItem = ({
- chain,
- setChain,
- valuePerChain,
-}: {
- chain: Chain
- setChain: () => void
- valuePerChain?: number
-}) => {
- return (
-
-
- )
-}
-
-export default ChainSelector
diff --git a/src/components/Global/ConfirmDetails/Index.tsx b/src/components/Global/ConfirmDetails/Index.tsx
deleted file mode 100644
index 57e09e99b..000000000
--- a/src/components/Global/ConfirmDetails/Index.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import { formatAmount } from '@/utils'
-import Icon from '../Icon'
-
-interface IConfirmDetailsProps {
- tokenSymbol: string
- tokenIconUri: string
- chainName: string
- chainIconUri: string
- tokenAmount: string
- tokenPrice?: number
- title?: string
- showOnlyUSD?: boolean
-}
-
-// @dev TODO: makes no sense to have 1 component thats only used in 1 view. Better to have inline then.
-// This component should be used in pay confirm too!
-const ConfirmDetails = ({
- tokenSymbol,
- tokenIconUri,
- chainName,
- chainIconUri,
- title,
- tokenAmount,
- tokenPrice,
- showOnlyUSD,
-}: IConfirmDetailsProps) => {
- return (
- (
+ ({ textToCopy, fill = 'black', className, iconSize = '6', type = 'icon', buttonSize }, ref) => {
+ const [copied, setCopied] = useState(false)
- const handleCopy = (e: React.MouseEvent) => {
- e.stopPropagation()
- navigator.clipboard.writeText(textToCopy).then(() => {
- setCopied(true)
- setTimeout(() => setCopied(false), 2000)
- })
- }
+ const copy = useCallback(() => {
+ navigator.clipboard.writeText(textToCopy).then(() => {
+ setCopied(true)
+ setTimeout(() => setCopied(false), 2000)
+ })
+ }, [textToCopy])
+
+ useImperativeHandle(ref, () => ({ copy }), [copy])
+
+ const handleCopy = (e: React.MouseEvent) => {
+ e.stopPropagation()
+ copy()
+ }
+
+ // convert tailwind size to pixels (2=8px, 3=12px, 4=16px, 6=24px, 8=32px)
+ const sizeMap: Record = {
+ '2': 8,
+ '3': 12,
+ '4': 16,
+ '6': 24,
+ '8': 32,
+ }
+
+ const iconSizePx = sizeMap[iconSize] || 24
+
+ if (type === 'button') {
+ return (
+
+ )
+ }
- if (type === 'button') {
return (
-
+ />
)
}
+)
- return (
- >
[EModalType.UNRECOGNIZED]: UnrecognizedContent,
}
+// note: push notifications are now handled by onesignal via useNotifications hook.
+// this component just tracks the metric and shows confirmation.
function NotSupportedContent({ setModalContent, qrType }: ModalContentProps) {
- const pushNotifications = usePush()
const { user } = useAuth()
return (
}
ctas={[]}
- modalPanelClassName="max-w-xs"
+ modalPanelClassName="max-w-sm"
/>
)
}
diff --git a/src/components/Global/TokenSelector/Components/NetworkButton.tsx b/src/components/Global/TokenSelector/Components/NetworkButton.tsx
index a73756bb1..53452b1e2 100644
--- a/src/components/Global/TokenSelector/Components/NetworkButton.tsx
+++ b/src/components/Global/TokenSelector/Components/NetworkButton.tsx
@@ -1,4 +1,10 @@
-import { Button } from '@/components/0_Bruddle'
+/**
+ * button component for selecting a network in the token selector
+ *
+ * displays chain icon and name, or a search icon for the "more" button
+ */
+
+import { Button } from '@/components/0_Bruddle/Button'
import AvatarWithBadge from '@/components/Profile/AvatarWithBadge'
import Image from 'next/image'
import React, { useState } from 'react'
diff --git a/src/components/Global/TokenSelector/Components/NetworkListItem.tsx b/src/components/Global/TokenSelector/Components/NetworkListItem.tsx
index 177ae3346..9ef4b377d 100644
--- a/src/components/Global/TokenSelector/Components/NetworkListItem.tsx
+++ b/src/components/Global/TokenSelector/Components/NetworkListItem.tsx
@@ -2,7 +2,7 @@ import Image from 'next/image'
import React, { useState } from 'react'
import { twMerge } from 'tailwind-merge'
-import { Button } from '@/components/0_Bruddle'
+import { Button } from '@/components/0_Bruddle/Button'
import Card from '@/components/Global/Card'
import NavigationArrow from '@/components/Global/NavigationArrow'
import AvatarWithBadge from '@/components/Profile/AvatarWithBadge'
diff --git a/src/components/Global/TokenSelector/Components/NetworkListView.tsx b/src/components/Global/TokenSelector/Components/NetworkListView.tsx
index b1cc74475..2866a4507 100644
--- a/src/components/Global/TokenSelector/Components/NetworkListView.tsx
+++ b/src/components/Global/TokenSelector/Components/NetworkListView.tsx
@@ -1,3 +1,10 @@
+/**
+ * full network list view for the token selector
+ *
+ * shows searchable list of all supported networks plus "coming soon" networks
+ * accessed via the "more" button in the popular networks section
+ */
+
import React, { useMemo } from 'react'
import EmptyState from '../../EmptyStates/EmptyState'
diff --git a/src/components/Global/TokenSelector/Components/SearchInput.tsx b/src/components/Global/TokenSelector/Components/SearchInput.tsx
index 62f24691d..9a2a60231 100644
--- a/src/components/Global/TokenSelector/Components/SearchInput.tsx
+++ b/src/components/Global/TokenSelector/Components/SearchInput.tsx
@@ -1,4 +1,4 @@
-import { Button } from '@/components/0_Bruddle'
+import { Button } from '@/components/0_Bruddle/Button'
import BaseInput from '@/components/0_Bruddle/BaseInput'
import { Icon } from '@/components/Global/Icons/Icon'
import React from 'react'
diff --git a/src/components/Global/TokenSelector/Components/TokenListItem.tsx b/src/components/Global/TokenSelector/Components/TokenListItem.tsx
index 66315dae6..11fc53132 100644
--- a/src/components/Global/TokenSelector/Components/TokenListItem.tsx
+++ b/src/components/Global/TokenSelector/Components/TokenListItem.tsx
@@ -1,8 +1,15 @@
+/**
+ * token list item component for the token selector
+ *
+ * displays token icon, symbol, chain, and optionally balance/price
+ * handles selection state and disabled state for unsupported tokens
+ */
+
import Card, { type CardPosition } from '@/components/Global/Card'
import AvatarWithBadge from '@/components/Profile/AvatarWithBadge'
import { tokenSelectorContext } from '@/context/tokenSelector.context'
import { type IUserBalance } from '@/interfaces'
-import { formatAmountWithSignificantDigits, formatAmount } from '@/utils'
+import { formatAmountWithSignificantDigits, formatAmount } from '@/utils/general.utils'
import Image from 'next/image'
import React, { useContext, useMemo, useState } from 'react'
import { twMerge } from 'tailwind-merge'
diff --git a/src/components/Global/TokenSelector/TokenSelector.tsx b/src/components/Global/TokenSelector/TokenSelector.tsx
index 4b9c735a9..04a6d7ba4 100644
--- a/src/components/Global/TokenSelector/TokenSelector.tsx
+++ b/src/components/Global/TokenSelector/TokenSelector.tsx
@@ -1,18 +1,25 @@
'use client'
+/**
+ * token and network selector component
+ *
+ * allows users to select which token/chain to receive payments on.
+ * shows popular networks (arb, base, op, eth) and tokens (usdc, usdt, native).
+ *
+ * used by: withdraw, claim, and req_pay flows
+ */
+
import Image from 'next/image'
-import React, { type ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
+import React, { type ReactNode, useCallback, useContext, useMemo, useRef, useState } from 'react'
import { twMerge } from 'tailwind-merge'
-import { Button } from '@/components/0_Bruddle'
+import { Button } from '@/components/0_Bruddle/Button'
import Divider from '@/components/0_Bruddle/Divider'
import { PEANUT_WALLET_CHAIN, PEANUT_WALLET_TOKEN } from '@/constants/zerodev.consts'
import { tokenSelectorContext } from '@/context'
import { type IToken, type IUserBalance } from '@/interfaces'
-import { areEvmAddressesEqual, formatTokenAmount, isNativeCurrency, getChainName } from '@/utils'
+import { areEvmAddressesEqual, isNativeCurrency, getChainName } from '@/utils/general.utils'
import { SQUID_ETH_ADDRESS } from '@/utils/token.utils'
-import { initializeAppKit } from '@/config/wagmi.config'
-import { useAppKit, useAppKitAccount, useDisconnect } from '@reown/appkit/react'
import EmptyState from '../EmptyStates/EmptyState'
import { Icon, type IconName } from '../Icons/Icon'
import NetworkButton from './Components/NetworkButton'
@@ -25,7 +32,6 @@ import {
TOKEN_SELECTOR_POPULAR_NETWORK_IDS,
TOKEN_SELECTOR_SUPPORTED_NETWORK_IDS,
} from './TokenSelector.consts'
-import { useWalletBalances } from '@/hooks/useWalletBalances'
import { Drawer, DrawerContent, DrawerTitle } from '../Drawer'
interface SectionProps {
@@ -59,15 +65,6 @@ const TokenSelector: React.FC
-
- 
-
- {valuePerChain && {chain.name}
- ${formatTokenAmount(valuePerChain, 2)}
}
-
- {title && }
-
- )
-}
-
-export default ConfirmDetails
diff --git a/src/components/Global/ConfirmInviteModal/index.tsx b/src/components/Global/ConfirmInviteModal/index.tsx
index 57f4f16bc..eccaf540e 100644
--- a/src/components/Global/ConfirmInviteModal/index.tsx
+++ b/src/components/Global/ConfirmInviteModal/index.tsx
@@ -1,9 +1,9 @@
'use client'
-import React, { type FC } from 'react'
+import { type FC } from 'react'
import Image from 'next/image'
import { PEANUT_LOGO_BLACK, PEANUTMAN_LOGO } from '@/assets'
import Modal from '../Modal'
-import { Button } from '@/components/0_Bruddle'
+import { Button } from '@/components/0_Bruddle/Button'
import chillPeanutAnim from '@/animations/GIF_ALPHA_BACKGORUND/512X512_ALPHA_GIF_konradurban_01.gif'
interface ConfirmInviteModalProps {
diff --git a/src/components/Global/Contributors/ContributorCard.tsx b/src/components/Global/Contributors/ContributorCard.tsx
index e31207355..5ee49a55c 100644
--- a/src/components/Global/Contributors/ContributorCard.tsx
+++ b/src/components/Global/Contributors/ContributorCard.tsx
@@ -4,7 +4,7 @@ import Card, { type CardPosition } from '../Card'
import AvatarWithBadge from '@/components/Profile/AvatarWithBadge'
import { getColorForUsername } from '@/utils/color.utils'
import { VerifiedUserLabel } from '@/components/UserHeader'
-import { formatTokenAmount } from '@/utils'
+import { formatTokenAmount } from '@/utils/general.utils'
import { isAddress } from 'viem'
import { useRouter } from 'next/navigation'
import { twMerge } from 'tailwind-merge'
diff --git a/src/components/Global/Contributors/index.tsx b/src/components/Global/Contributors/index.tsx
index a8844fa7c..ff8d3b2be 100644
--- a/src/components/Global/Contributors/index.tsx
+++ b/src/components/Global/Contributors/index.tsx
@@ -1,6 +1,5 @@
import { type ChargeEntry } from '@/services/services.types'
-import { getContributorsFromCharge } from '@/utils'
-import React from 'react'
+import { getContributorsFromCharge } from '@/utils/general.utils'
import ContributorCard from './ContributorCard'
import { getCardPosition } from '../Card'
diff --git a/src/components/Global/CopyField/index.tsx b/src/components/Global/CopyField/index.tsx
index 8c7bd8e0f..64c2a940e 100644
--- a/src/components/Global/CopyField/index.tsx
+++ b/src/components/Global/CopyField/index.tsx
@@ -1,7 +1,7 @@
'use client'
-import { Button, type ButtonVariant } from '@/components/0_Bruddle'
+import { Button, type ButtonVariant } from '@/components/0_Bruddle/Button'
import BaseInput from '@/components/0_Bruddle/BaseInput'
-import { copyTextToClipboardWithFallback } from '@/utils'
+import { copyTextToClipboardWithFallback } from '@/utils/general.utils'
import { useCallback, useState } from 'react'
import { twMerge } from 'tailwind-merge'
diff --git a/src/components/Global/CopyToClipboard/index.tsx b/src/components/Global/CopyToClipboard/index.tsx
index 69f28a1c6..d5aaa8d8f 100644
--- a/src/components/Global/CopyToClipboard/index.tsx
+++ b/src/components/Global/CopyToClipboard/index.tsx
@@ -1,7 +1,11 @@
-import React, { useState } from 'react'
+import React, { useState, forwardRef, useImperativeHandle, useCallback } from 'react'
import { twMerge } from 'tailwind-merge'
import { Icon } from '../Icons/Icon'
-import { Button, type ButtonSize } from '@/components/0_Bruddle'
+import { Button, type ButtonSize } from '@/components/0_Bruddle/Button'
+
+export interface CopyToClipboardRef {
+ copy: () => void
+}
interface Props {
textToCopy: string
@@ -12,43 +16,62 @@ interface Props {
buttonSize?: ButtonSize
}
-const CopyToClipboard = ({ textToCopy, fill, className, iconSize = '6', type = 'icon', buttonSize }: Props) => {
- const [copied, setCopied] = useState(false)
+const CopyToClipboard = forwardRef
- {showOnlyUSD ? (
-
- {!showOnlyUSD && (
-
-
- From Peanut Wallet
-
- ) : (
- <>
-
- {tokenIconUri ? (
- 
- ) : (
-
- {tokenPrice && (
-
- )}
-
- )}
-
- {chainIconUri ? (
- 
- ) : (
-
- )}
-
@@ -60,15 +57,10 @@ function NotSupportedContent({ setModalContent, qrType }: ModalContentProps) {
Get notified when it goes live!
+ icon={
-
- {icon &&
)
}
@@ -183,7 +183,7 @@ export default function PeanutActionDetailsCard({
)}
{!isRegionalMethodClaim && (
diff --git a/src/components/Global/PeanutSponsored/index.tsx b/src/components/Global/PeanutSponsored/index.tsx
deleted file mode 100644
index bda90915f..000000000
--- a/src/components/Global/PeanutSponsored/index.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import Icon from '../Icon'
-
-const PeanutSponsored = () => {
- return (
-
+
(null)
const containerRef = useRef(null)
const forcesConfiguredRef = useRef(false)
+ const initialZoomDoneRef = useRef(false)
const [containerWidth, setContainerWidth] = useState(null)
+ // Drag vs click detection
+ const dragStartRef = useRef<{ x: number; y: number; time: number } | null>(null)
+ const isDraggingRef = useRef(false)
+
// Measure container width for minimal mode
useEffect(() => {
if (!isMinimal || !containerRef.current) return
@@ -359,7 +368,41 @@ export default function InvitesGraph(props: InvitesGraphProps) {
return link.type === 'DIRECT' ? 1.5 : 1
}, [])
+ // Handle drag start to track for click vs drag detection
+ const handleNodeDragStart = useCallback((node: any, _translate: any) => {
+ dragStartRef.current = { x: node.x, y: node.y, time: Date.now() }
+ isDraggingRef.current = false
+ }, [])
+
+ // Handle drag to detect actual dragging
+ const handleNodeDrag = useCallback((node: any) => {
+ if (!dragStartRef.current) return
+ const dx = node.x - dragStartRef.current.x
+ const dy = node.y - dragStartRef.current.y
+ const distance = Math.sqrt(dx * dx + dy * dy)
+ if (distance > CLICK_MAX_DISTANCE_PX) {
+ isDraggingRef.current = true
+ }
+ }, [])
+
+ // Handle drag end
+ const handleNodeDragEnd = useCallback(() => {
+ // Small delay to let the click handler check the drag state
+ setTimeout(() => {
+ dragStartRef.current = null
+ isDraggingRef.current = false
+ }, 50)
+ }, [])
+
const handleNodeClick = useCallback((node: any) => {
+ // Skip click if we were dragging
+ if (isDraggingRef.current) {
+ return
+ }
+ // Also check time-based threshold
+ if (dragStartRef.current && Date.now() - dragStartRef.current.time > CLICK_MAX_DURATION_MS) {
+ return
+ }
setSelectedUserId((prev) => (prev === node.id ? null : node.id))
}, [])
@@ -393,15 +436,20 @@ export default function InvitesGraph(props: InvitesGraphProps) {
setSearchResults([])
}, [])
- // Configure D3 forces
+ // Configure D3 forces - called as soon as graph ref is available
const configureForces = useCallback(async () => {
if (!graphRef.current || forcesConfiguredRef.current) return
const graph = graphRef.current
+ const nodeCount = filteredGraphData?.nodes?.length ?? 0
+
+ // Scale force parameters based on node count
+ const chargeStrength = nodeCount > 50 ? -300 : nodeCount > 20 ? -200 : -150
+ const linkDistance = nodeCount > 50 ? 100 : nodeCount > 20 ? 80 : 60
- graph.d3Force('charge')?.strength(-150)
- graph.d3Force('charge')?.distanceMax(300)
- graph.d3Force('link')?.distance(60)
+ graph.d3Force('charge')?.strength(chargeStrength)
+ graph.d3Force('charge')?.distanceMax(400)
+ graph.d3Force('link')?.distance(linkDistance)
graph.d3Force('link')?.strength(0.7)
const d3 = await import('d3-force')
@@ -412,15 +460,56 @@ export default function InvitesGraph(props: InvitesGraphProps) {
const hasAccess = node.hasAppAccess
const baseSize = hasAccess ? 6 : 3
const pointsMultiplier = Math.sqrt(node.totalPoints) / 10
- return baseSize + Math.min(pointsMultiplier, 25) + 15
+ return baseSize + Math.min(pointsMultiplier, 25) + 20
})
- .strength(0.9)
+ .strength(1)
)
graph.d3Force('center', d3.forceCenter())
forcesConfiguredRef.current = true
+
+ // Reheat the simulation to apply forces properly
+ graph.d3ReheatSimulation()
+ }, [filteredGraphData?.nodes?.length])
+
+ // Initial zoom to fit after graph stabilizes
+ const handleEngineStop = useCallback(() => {
+ if (!graphRef.current || initialZoomDoneRef.current) return
+ // Zoom to fit with padding after initial simulation
+ setTimeout(() => {
+ graphRef.current?.zoomToFit(400, 40)
+ initialZoomDoneRef.current = true
+ }, 100)
}, [])
+ // Configure forces early - poll until graphRef is available
+ useEffect(() => {
+ if (forcesConfiguredRef.current) return
+
+ const checkAndConfigure = () => {
+ if (graphRef.current && !forcesConfiguredRef.current) {
+ configureForces()
+ }
+ }
+
+ // Try immediately
+ checkAndConfigure()
+
+ // Also poll a few times in case ref isn't ready yet
+ const intervals = [50, 100, 200, 500].map((delay) => setTimeout(checkAndConfigure, delay))
+
+ return () => intervals.forEach(clearTimeout)
+ }, [configureForces, filteredGraphData])
+
+ // Reset force config and zoom when filtered data changes (e.g., user selected)
+ useEffect(() => {
+ if (selectedUserId !== null) {
+ // Reset zoom done flag when viewing a subset
+ initialZoomDoneRef.current = false
+ forcesConfiguredRef.current = false
+ }
+ }, [selectedUserId])
+
// Center on selected node
useEffect(() => {
if (selectedUserId && graphRef.current && filteredGraphData) {
@@ -479,7 +568,7 @@ export default function InvitesGraph(props: InvitesGraphProps) {
if (isMinimal) {
const minimalWidth = containerWidth ?? width ?? 350
return (
-
diff --git a/src/components/Global/PeanutActionDetailsCard/index.tsx b/src/components/Global/PeanutActionDetailsCard/index.tsx
index df52aa665..0054d0661 100644
--- a/src/components/Global/PeanutActionDetailsCard/index.tsx
+++ b/src/components/Global/PeanutActionDetailsCard/index.tsx
@@ -1,7 +1,6 @@
import AvatarWithBadge, { type AvatarSize } from '@/components/Profile/AvatarWithBadge'
-import { PEANUT_WALLET_TOKEN_SYMBOL } from '@/constants'
import { type RecipientType } from '@/lib/url-parser/types/payment'
-import { printableAddress } from '@/utils'
+import { printableAddress } from '@/utils/general.utils'
import { AVATAR_TEXT_DARK, getColorForUsername } from '@/utils/color.utils'
import { useCallback } from 'react'
import { twMerge } from 'tailwind-merge'
@@ -11,6 +10,7 @@ import { Icon, type IconName } from '../Icons/Icon'
import RouteExpiryTimer from '../RouteExpiryTimer'
import Image, { type StaticImageData } from 'next/image'
import Loading from '../Loading'
+import { PEANUT_WALLET_TOKEN_SYMBOL } from '@/constants/zerodev.consts'
export type PeanutActionDetailsCardTransactionType =
| 'REQUEST'
@@ -115,7 +115,7 @@ export default function PeanutActionDetailsCard({
if (transactionType === 'REGIONAL_METHOD_CLAIM') title = recipientName // Render the string as is for regional method
return (
diff --git a/src/components/Global/ErrorAlert/index.tsx b/src/components/Global/ErrorAlert/index.tsx
index e95e010e1..3115eb7fc 100644
--- a/src/components/Global/ErrorAlert/index.tsx
+++ b/src/components/Global/ErrorAlert/index.tsx
@@ -11,7 +11,7 @@ interface ErrorAlertProps {
const ErrorAlert = ({ className, iconSize = 16, description, iconClassName }: ErrorAlertProps) => {
return (
= ({ ctaLabel, ctaIcon, c
setSelectedCurrency={setSourceCurrency}
// excludeCurrencies={[destinationCurrency]}
trigger={
-
diff --git a/src/components/Global/InfoRow/index.tsx b/src/components/Global/InfoRow/index.tsx
deleted file mode 100644
index 818b8aead..000000000
--- a/src/components/Global/InfoRow/index.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { twMerge } from 'tailwind-merge'
-import Icon from '../Icon'
-import MoreInfo from '../MoreInfo'
-
-interface InfoRowProps {
- iconName: string
- label: string
- value: number | string
- moreInfoText: string
- loading?: boolean
- smallFont?: boolean
-}
-
-const InfoRow = ({ iconName, label, value, moreInfoText, loading, smallFont }: InfoRowProps) => (
-
-
)
diff --git a/src/components/Global/ExchangeRateWidget/index.tsx b/src/components/Global/ExchangeRateWidget/index.tsx
index 767e47626..912c4c869 100644
--- a/src/components/Global/ExchangeRateWidget/index.tsx
+++ b/src/components/Global/ExchangeRateWidget/index.tsx
@@ -1,12 +1,12 @@
import CurrencySelect from '@/components/LandingPage/CurrencySelect'
-import { countryCurrencyMappings } from '@/constants/countryCurrencyMapping'
+import countryCurrencyMappings from '@/constants/countryCurrencyMapping'
import { useDebounce } from '@/hooks/useDebounce'
import { useExchangeRate } from '@/hooks/useExchangeRate'
import Image from 'next/image'
import { useRouter, useSearchParams } from 'next/navigation'
import { type FC, useCallback, useEffect, useMemo } from 'react'
import { Icon, type IconName } from '../Icons/Icon'
-import { Button } from '@/components/0_Bruddle'
+import { Button } from '@/components/0_Bruddle/Button'
interface IExchangeRateWidgetProps {
ctaLabel: string
@@ -126,7 +126,7 @@ const ExchangeRateWidget: FC{description}
-
-)
-
-export default InfoRow
diff --git a/src/components/Global/InvitesGraph/index.tsx b/src/components/Global/InvitesGraph/index.tsx
index 6340e9b46..32f2ff19e 100644
--- a/src/components/Global/InvitesGraph/index.tsx
+++ b/src/components/Global/InvitesGraph/index.tsx
@@ -10,6 +10,10 @@ const ForceGraph2D = dynamic(() => import('react-force-graph-2d'), {
ssr: false,
}) as any
+// Constants for drag vs click detection
+const CLICK_MAX_DURATION_MS = 200
+const CLICK_MAX_DISTANCE_PX = 5
+
// Types
export interface GraphNode {
id: string
@@ -255,8 +259,13 @@ export default function InvitesGraph(props: InvitesGraphProps) {
const graphRef = useRef
-
- {loading ? (
-
- ) : (
-
-
- )}
-
- {value}
-
-
+
{/* Graph Canvas */}
-
{containerWidth !== null && (
)
@@ -653,7 +757,7 @@ export default function InvitesGraph(props: InvitesGraphProps) {
+
+
{Array.isArray(message)
? message.map((msg, index) => (
@@ -71,6 +70,6 @@ export function MarqueeComp({
)}
-
+
)
}
diff --git a/src/components/Global/Modal/index.tsx b/src/components/Global/Modal/index.tsx
index 6a7f3f536..03184501f 100644
--- a/src/components/Global/Modal/index.tsx
+++ b/src/components/Global/Modal/index.tsx
@@ -1,7 +1,7 @@
-import Icon from '@/components/Global/Icon'
import { Dialog, Transition } from '@headlessui/react'
import { Fragment, useRef } from 'react'
import { twMerge } from 'tailwind-merge'
+import { Icon } from '../Icons/Icon'
type ModalProps = {
className?: string
@@ -16,8 +16,6 @@ type ModalProps = {
video?: boolean
hideOverlay?: boolean
classNameWrapperDiv?: string
- showPrev?: boolean
- onPrev?: () => void
preventClose?: boolean
}
@@ -34,8 +32,6 @@ const Modal = ({
video,
hideOverlay,
classNameWrapperDiv,
- showPrev,
- onPrev,
preventClose = false,
}: ModalProps) => {
let dialogRef = useRef(null)
@@ -86,20 +82,12 @@ const Modal = ({
>
{!hideOverlay ? (
<>
- {showPrev && (
-
- )}
{title ? (
<>
{title}
@@ -117,7 +105,7 @@ const Modal = ({
)}
onClick={onClose}
>
-
-
- {text}
-
- )
-}
diff --git a/src/components/Global/PeanutActionCard/index.tsx b/src/components/Global/PeanutActionCard/index.tsx
index db74adff6..489681dc6 100644
--- a/src/components/Global/PeanutActionCard/index.tsx
+++ b/src/components/Global/PeanutActionCard/index.tsx
@@ -24,7 +24,7 @@ const PeanutActionCard = ({ type }: PeanutActionCardProps) => {
Perfect for group chats!
+Perfect to DM friends!
- {icon &&
)
}
@@ -183,7 +183,7 @@ export default function PeanutActionDetailsCard({
)}
{!isRegionalMethodClaim && (
-
)}
-
- )
-}
-
-export default PeanutSponsored
diff --git a/src/components/Global/PostSignupActionManager/index.tsx b/src/components/Global/PostSignupActionManager/index.tsx
index 9fcb060bd..4c0821810 100644
--- a/src/components/Global/PostSignupActionManager/index.tsx
+++ b/src/components/Global/PostSignupActionManager/index.tsx
@@ -1,6 +1,6 @@
'use client'
-import { getRedirectUrl, clearRedirectUrl } from '@/utils'
+import { getRedirectUrl, clearRedirectUrl } from '@/utils/general.utils'
import { useRouter } from 'next/navigation'
import { useEffect, useState } from 'react'
import ActionModal from '../ActionModal'
diff --git a/src/components/Global/QRScanner/index.tsx b/src/components/Global/QRScanner/index.tsx
index d41c73113..173492f24 100644
--- a/src/components/Global/QRScanner/index.tsx
+++ b/src/components/Global/QRScanner/index.tsx
@@ -1,14 +1,14 @@
import { useCallback, useEffect, useRef, useState } from 'react'
import { useToast } from '@/components/0_Bruddle/Toast'
-import { Button } from '@/components/0_Bruddle'
-import Icon from '@/components/Global/Icon'
+import { Button } from '@/components/0_Bruddle/Button'
import { createPortal } from 'react-dom'
import jsQR from 'jsqr'
import { useDeviceType, DeviceType } from '@/hooks/useGetDeviceType'
-import { MERCADO_PAGO, PIX, SIMPLEFI } from '@/assets/payment-apps'
+import { MERCADO_PAGO, PIX } from '@/assets/payment-apps'
import { PEANUTMAN_LOGO } from '@/assets/peanut'
import { ETHEREUM_ICON } from '@/assets/icons'
import Image from 'next/image'
+import { Icon } from '../Icons/Icon'
// QR Scanner Configuration
const QR_SCAN_INTERVAL_MS = 100 // Scan every 100ms (10 times per second)
@@ -85,28 +85,24 @@ export default function QRScanner({ onScan, onClose, isOpen = true }: QRScannerP
console.error('Error closing QR scanner:', error)
}
}, [onClose, stopCamera])
- const handleQRScan = useCallback(
- async (data: string) => {
- if (processingQR) return
- try {
- setProcessingQR(true)
- const result = await onScan(data)
- if (result.success) {
- toast.info('QR code recognized')
- } else {
- toast.error(result.error || 'QR code processing failed')
- // Resume scanning
- setProcessingQR(false)
- }
- } catch (error) {
- console.error('Error processing QR code:', error)
- toast.error('Error processing QR code')
+ const handleQRScan = async (data: string) => {
+ try {
+ setProcessingQR(true)
+ const result = await onScan(data)
+ if (result.success) {
+ toast.info('QR code recognized')
+ } else {
+ toast.error(result.error || 'QR code processing failed')
+ // Resume scanning
setProcessingQR(false)
}
- },
- [processingQR]
- )
- const setupQRScanning = useCallback(() => {
+ } catch (error) {
+ console.error('Error processing QR code:', error)
+ toast.error('Error processing QR code')
+ setProcessingQR(false)
+ }
+ }
+ const setupQRScanning = () => {
if (!videoRef.current || !canvasRef.current) return
const video = videoRef.current
const canvas = canvasRef.current
@@ -132,7 +128,7 @@ export default function QRScanner({ onScan, onClose, isOpen = true }: QRScannerP
inversionAttempts: 'attemptBoth',
})
- if (code && !processingQR) {
+ if (code) {
handleQRScan(code.data)
}
} catch (err) {
@@ -140,7 +136,7 @@ export default function QRScanner({ onScan, onClose, isOpen = true }: QRScannerP
}
}
}, QR_SCAN_INTERVAL_MS)
- }, [handleQRScan, processingQR])
+ }
const startCamera = useCallback(async () => {
setError(null)
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
@@ -214,7 +210,7 @@ export default function QRScanner({ onScan, onClose, isOpen = true }: QRScannerP
} else {
setError('Your browser does not support camera access')
}
- }, [facingMode, setupQRScanning, isScanning, deviceType])
+ }, [facingMode, isScanning, deviceType])
// Handle visibility change - pause camera when app goes to background
useEffect(() => {
const handleVisibilityChange = () => {
@@ -297,7 +293,7 @@ export default function QRScanner({ onScan, onClose, isOpen = true }: QRScannerP
className="border-1 mx-auto flex h-8 w-8 items-center justify-center border-white p-0"
onClick={closeScanner}
>
-
diff --git a/src/components/Global/RecipientInput/index.tsx b/src/components/Global/RecipientInput/index.tsx
deleted file mode 100644
index 946c9cfa6..000000000
--- a/src/components/Global/RecipientInput/index.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-'use client'
-
-import Icon from '@/components/Global/Icon'
-
-type RecipientInputProps = {
- placeholder: string
- value: string
- setValue: (value: string) => void
- onEnter?: () => void
-}
-
-const RecipientInput = ({ placeholder, value, setValue, onEnter }: RecipientInputProps) => {
- return (
- (false)
- const [rewardLinks, setRewardLinks] = useState([])
- const [activeReward, setActiveReward] = useState(undefined)
- const { user } = useAuth()
- const router = useRouter()
-
- // get active reward link (pnt first, then usdc)
- const getActiveReward = () => {
- return rewardLinks.find((r) => r.assetCode === REWARD_ASSET_TYPE.PNT)
- /*
- const pntReward = rewardLinks.find((r) => r.assetCode === REWARD_ASSET_TYPE.PNT)
- const usdcReward = rewardLinks.find((r) => r.assetCode === REWARD_ASSET_TYPE.USDC)
- return pntReward || usdcReward
- */
- }
-
- useEffect(() => {
- const activeReward = getActiveReward()
- setActiveReward(activeReward)
- }, [rewardLinks])
-
- // get modal content based on active reward
- const getModalContent = () => {
- //TODO: change after aleph event
- return {
- title: 'Welcome to Peanut!',
- subtitle: (
-
- Here's a Beer to celebrate your new{' '}
- Peanut Wallet
-
- ),
- ctaText: 'Claim your Beer!',
- }
- /*
- if (!activeReward) return null
-
- const isPNTReward = activeReward.assetCode === REWARD_ASSET_TYPE.PNT
-
- return {
- title: isPNTReward ? 'Welcome to Peanut!' : `Wait, there's more!`,
- subtitle: isPNTReward ? (
- "You've received 2 Beers!"
- ) : (
-
- Here's $5 for you to explore{' '}
- Peanut Wallet and its features!
-
- ),
- ctaText: isPNTReward ? 'Claim your Beers!' : 'Claim',
- }
- */
- }
-
- useEffect(() => {
- if (user) {
- rewardsApi
- .getByUser(user.user.userId)
- .then((res) => {
- setRewardLinks(res)
- })
- .catch((_err) => {
- console.log('rewards api err', _err)
- })
- }
- }, [user])
-
- useEffect(() => {
- if (!rewardLinks.length || !activeReward) {
- setShowModal(false)
- } else {
- setShowModal(true)
- }
- }, [rewardLinks, activeReward])
-
- const modalContent = getModalContent()
-
- return (
- (false)
- return (
-
- )
-}
-
-export default Sorting
diff --git a/src/components/Global/StatusPill/index.tsx b/src/components/Global/StatusPill/index.tsx
index 89a986a07..269888fe7 100644
--- a/src/components/Global/StatusPill/index.tsx
+++ b/src/components/Global/StatusPill/index.tsx
@@ -13,6 +13,7 @@ const StatusPill = ({ status }: StatusPillProps) => {
completed: 'border-success-5 bg-success-2 text-success-4',
pending: 'border-yellow-8 bg-secondary-4 text-yellow-6',
cancelled: 'border-error-2 bg-error-1 text-error',
+ refunded: 'border-error-2 bg-error-1 text-error',
failed: 'border-error-2 bg-error-1 text-error',
processing: 'border-yellow-8 bg-secondary-4 text-yellow-6',
soon: 'border-yellow-8 bg-secondary-4 text-yellow-6',
@@ -26,6 +27,7 @@ const StatusPill = ({ status }: StatusPillProps) => {
soon: 'pending',
pending: 'pending',
cancelled: 'cancel',
+ refunded: 'cancel',
closed: 'success',
}
@@ -36,6 +38,7 @@ const StatusPill = ({ status }: StatusPillProps) => {
soon: 7,
pending: 8,
cancelled: 6,
+ refunded: 6,
closed: 7,
}
diff --git a/src/components/Global/StatusViewWrapper/index.tsx b/src/components/Global/StatusViewWrapper/index.tsx
deleted file mode 100644
index 156506fde..000000000
--- a/src/components/Global/StatusViewWrapper/index.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { Card } from '@/components/0_Bruddle'
-import { CrispButton } from '@/components/CrispChat'
-import React from 'react'
-import { PaymentsFooter } from '../PaymentsFooter'
-
-interface StatusViewWrapperProps {
- title: React.ReactNode
- description?: string
- children?: React.ReactNode
- hideSupportCta?: boolean
- supportCtaText?: string
-}
-
-const StatusViewWrapper: React.FC = ({
- title,
- description,
- children,
- hideSupportCta = false,
- supportCtaText,
-}) => {
- return (
-
-
- {title}
- {description && {description} }
-
- {children && (
-
-
- )}
- {!hideSupportCta && (
-
- )}
-
- )
-}
-
-export default StatusViewWrapper
diff --git a/src/components/Global/SupportDrawer/index.tsx b/src/components/Global/SupportDrawer/index.tsx
index 68611fb17..74e2eb5a7 100644
--- a/src/components/Global/SupportDrawer/index.tsx
+++ b/src/components/Global/SupportDrawer/index.tsx
@@ -1,14 +1,14 @@
'use client'
import { useState, useEffect } from 'react'
-import { useSupportModalContext } from '@/context/SupportModalContext'
+import { useModalsContext } from '@/context/ModalsContext'
import { useCrispUserData } from '@/hooks/useCrispUserData'
import { useCrispProxyUrl } from '@/hooks/useCrispProxyUrl'
import { Drawer, DrawerContent, DrawerTitle } from '../Drawer'
import PeanutLoading from '../PeanutLoading'
const SupportDrawer = () => {
- const { isSupportModalOpen, setIsSupportModalOpen, prefilledMessage } = useSupportModalContext()
+ const { isSupportModalOpen, setIsSupportModalOpen, supportPrefilledMessage: prefilledMessage } = useModalsContext()
const userData = useCrispUserData()
const [isLoading, setIsLoading] = useState(true)
diff --git a/src/components/Global/TablePagination/index.tsx b/src/components/Global/TablePagination/index.tsx
deleted file mode 100644
index 04dc1fe94..000000000
--- a/src/components/Global/TablePagination/index.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-'use client'
-import Icon from '@/components/Global/Icon'
-
-type TablePaginationProps = {
- onNext: () => void
- onPrev: () => void
- currentPage: number
- totalPages: number
-}
-
-const TablePagination = ({ onNext, onPrev, currentPage, totalPages }: TablePaginationProps) => (
- (null)
-
- useEffect(() => {
- if (isEditing && inputRef.current) {
- inputRef.current.focus()
- }
- }, [isEditing])
-
- const handleTextChange = (event: React.ChangeEvent) => {
- setText(event.target.value)
- }
-
- const handleBlur = () => {
- setIsEditing(false)
- onTextChange(text)
- }
-
- const handleKeyDown = (event: React.KeyboardEvent) => {
- const key = event.key
-
- // Allow alphanumeric characters and control keys
- if (!/^[a-zA-Z0-9]$/.test(key) && !['Backspace', 'ArrowLeft', 'ArrowRight', 'Delete'].includes(key)) {
- event.preventDefault()
- }
- if (event.key === 'Enter') {
- setIsEditing(false)
- onTextChange(text)
- }
- }
-
- useEffect(() => {
- setText(initialText)
- }, [initialText])
-
- return (
- (null)
- const inputType = useMemo(() => (window.innerWidth < 640 ? 'text' : 'number'), [])
- const [isFocused, setIsFocused] = useState(false)
- const { deviceType } = useDeviceType()
- // Only autofocus on desktop (WEB), not on mobile devices (IOS/ANDROID)
- const shouldAutoFocus = deviceType === DeviceType.WEB
-
- // Store display value for input field (what user sees when typing)
- const [displayValue, setDisplayValue] = useState(tokenValue || '')
- const [isInputUsd, setIsInputUsd] = useState(!currency || isInitialInputUsd)
- const [displaySymbol, setDisplaySymbol] = useState('')
- const [alternativeDisplayValue, setAlternativeDisplayValue] = useState('0.00')
- const [alternativeDisplaySymbol, setAlternativeDisplaySymbol] = useState('')
-
- const displayMode = useMemo<'TOKEN' | 'STABLE' | 'FIAT'>(() => {
- if (currency) return 'FIAT'
- if (selectedTokenData?.symbol && STABLE_COINS.includes(selectedTokenData?.symbol)) {
- return 'STABLE'
- } else {
- return 'TOKEN'
- }
- }, [currency, selectedTokenData?.symbol])
-
- const decimals = useMemo(() => {
- let _decimals: number
- if (displayMode === 'TOKEN' && isInputUsd && selectedTokenData?.decimals) {
- _decimals = selectedTokenData.decimals
- } else {
- _decimals = PEANUT_WALLET_TOKEN_DECIMALS
- }
- // For displaying the token amount, anything more breaks the UI
- return 6 < _decimals ? 6 : _decimals
- }, [displayMode, selectedTokenData?.decimals, isInputUsd])
-
- const calculateAlternativeValue = useCallback(
- (value: string) => {
- // There is no alternative display when dealing with stables
- if (displayMode === 'STABLE') return ''
-
- let price: number
- if (displayMode === 'TOKEN') {
- if (!selectedTokenData?.price) return ''
- price = selectedTokenData.price
- } else if (displayMode === 'FIAT') {
- if (!currency?.price) return ''
- price = 1 / currency.price
- } else {
- throw new Error('Invalid display mode')
- }
-
- if (isInputUsd) {
- return formatTokenAmount(Number(value) / price, decimals)!
- } else {
- return formatTokenAmount(Number(value) * price, decimals)!
- }
- },
- [displayMode, currency?.price, selectedTokenData?.price, isInputUsd, decimals]
- )
-
- const onChange = useCallback(
- (value: string, _isInputUsd: boolean) => {
- setDisplayValue(value)
- setAlternativeDisplayValue(calculateAlternativeValue(value))
- let tokenValue: string
- switch (displayMode) {
- case 'STABLE': {
- tokenValue = value
- break
- }
- case 'TOKEN': {
- tokenValue = _isInputUsd ? (Number(value) / (selectedTokenData?.price ?? 1)).toString() : value
- break
- }
- case 'FIAT': {
- if (!currency?.price) throw new Error('Invalid currency')
- const usdValue = _isInputUsd ? Number(value) : Number(value) / currency.price
- // For when we have a non stablecoin request in currency mode
- tokenValue = formatTokenAmount(usdValue / (selectedTokenData?.price ?? 1), decimals)!
- const currencyValue = _isInputUsd ? (Number(value) * currency.price).toString() : value
- setCurrencyAmount?.(currencyValue)
- break
- }
- default: {
- throw new Error('Invalid display mode')
- }
- }
- setTokenValue(tokenValue)
- },
- [displayMode, currency?.price, selectedTokenData?.price, calculateAlternativeValue]
- )
-
- const onSliderValueChange = useCallback(
- (value: number[]) => {
- if (maxAmount) {
- const selectedPercentage = value[0]
- let selectedAmount = (selectedPercentage / 100) * maxAmount
-
- // Only snap to exact remaining amount when user selects the 33.33% magnetic snap point
- // This ensures equal splits fill the pot exactly to 100%
- const SNAP_POINT_TOLERANCE = 0.5 // percentage points - allows magnetic snapping
- const COMPLETION_THRESHOLD = 0.98 // 98% - if 33.33% would nearly complete pot
- const EQUAL_SPLIT_PERCENTAGE = 100 / 3 // 33.333...%
-
- const isAt33SnapPoint = Math.abs(selectedPercentage - EQUAL_SPLIT_PERCENTAGE) < SNAP_POINT_TOLERANCE
- if (isAt33SnapPoint && amountCollected > 0) {
- const remainingAmount = maxAmount - amountCollected
- // Only snap if there's remaining amount and 33.33% would nearly complete the pot
- if (remainingAmount > 0 && selectedAmount >= remainingAmount * COMPLETION_THRESHOLD) {
- selectedAmount = remainingAmount
- }
- }
-
- const selectedAmountStr = parseFloat(selectedAmount.toFixed(4)).toString()
- const maxDecimals = displayMode === 'FIAT' || displayMode === 'STABLE' || isInputUsd ? 2 : decimals
- const formattedAmount = formatTokenAmount(selectedAmountStr, maxDecimals, true)
- if (formattedAmount) {
- onChange(formattedAmount, isInputUsd)
- }
- }
- },
- [maxAmount, amountCollected, onChange, displayMode, isInputUsd, decimals]
- )
-
- const showConversion = useMemo(() => {
- return !hideCurrencyToggle && (displayMode === 'TOKEN' || displayMode === 'FIAT')
- }, [hideCurrencyToggle, displayMode])
-
- // This is needed because if we change the token we selected the value
- // should change. This only depends on the price on purpose!! we don't want
- // to change when we change the display mode or the value (we already call
- // onchange on the input change so dont add those dependencies here!)
- useEffect(() => {
- // early return if tokenValue is empty.
- if (!tokenValue) return
-
- if (!isInitialInputUsd) {
- const value = tokenValue ? Number(tokenValue) : 0
- const formattedValue = (value * (currency?.price ?? 1)).toFixed(2)
- onChange(formattedValue, isInputUsd)
- } else {
- onChange(displayValue, isInputUsd)
- }
- }, [selectedTokenData?.price])
-
- useEffect(() => {
- switch (displayMode) {
- case 'STABLE': {
- setDisplaySymbol('$')
- setAlternativeDisplaySymbol('')
- break
- }
- case 'TOKEN': {
- if (isInputUsd) {
- setDisplaySymbol('$')
- setAlternativeDisplaySymbol(selectedTokenData?.symbol || '')
- } else {
- setDisplaySymbol(selectedTokenData?.symbol || '')
- setAlternativeDisplaySymbol('$')
- }
- break
- }
- case 'FIAT': {
- if (isInputUsd) {
- setDisplaySymbol('USD')
- setAlternativeDisplaySymbol(currency?.symbol || '')
- } else {
- setDisplaySymbol(currency?.symbol || '')
- setAlternativeDisplaySymbol('USD')
- }
- break
- }
- default: {
- throw new Error('Invalid display mode')
- }
- }
- }, [displayMode, selectedTokenData?.symbol, currency?.symbol, isInputUsd])
-
- useEffect(() => {
- if (inputRef.current) {
- if (displayValue?.length !== 0) {
- inputRef.current.style.width = `${displayValue?.length ?? 0}ch`
- } else {
- inputRef.current.style.width = `4ch`
- }
- }
- }, [displayValue, currency])
-
- useEffect(() => {
- if (!setUsdValue) return
- if (displayMode === 'STABLE') {
- setUsdValue(displayValue)
- } else {
- setUsdValue(isInputUsd ? displayValue : alternativeDisplayValue)
- }
- }, [setUsdValue, displayValue, alternativeDisplayValue, isInputUsd, displayMode])
-
- const formRef = useRef(null)
-
- const sliderValue = useMemo(() => {
- if (!maxAmount || !tokenValue) return [0]
- const tokenNum = parseFloat(tokenValue.replace(/,/g, ''))
- const usdValue = tokenNum * (selectedTokenData?.price ?? 1)
- return [(usdValue / maxAmount) * 100]
- }, [maxAmount, tokenValue, selectedTokenData?.price])
-
- const handleContainerClick = () => {
- if (inputRef.current) {
- inputRef.current.focus()
- }
- }
-
- // Sync default slider suggested amount to the input
- useEffect(() => {
- if (defaultSliderSuggestedAmount) {
- const formattedAmount = formatTokenAmount(defaultSliderSuggestedAmount.toString(), 2)
- if (formattedAmount) {
- setTokenValue(formattedAmount)
- setDisplayValue(formattedAmount)
- }
- }
- }, [defaultSliderSuggestedAmount])
-
- return (
-
- )
-}
-
-export default TokenAmountInput
diff --git a/src/components/Global/TokenAndNetworkConfirmationModal/index.tsx b/src/components/Global/TokenAndNetworkConfirmationModal/index.tsx
index eb5062de6..ebbab2a59 100644
--- a/src/components/Global/TokenAndNetworkConfirmationModal/index.tsx
+++ b/src/components/Global/TokenAndNetworkConfirmationModal/index.tsx
@@ -1,26 +1,22 @@
import ActionModal from '@/components/Global/ActionModal'
import { Slider } from '@/components/Slider'
-import { ARBITRUM_ICON } from '@/assets'
-import { type NetworkConfig } from '@/components/Global/TokenSelector/TokenSelector.consts'
-import { type CryptoToken } from '@/components/AddMoney/consts'
-import Image from 'next/image'
+import ChainChip from '@/components/AddMoney/components/ChainChip'
+import {
+ RHINO_SUPPORTED_CHAINS,
+ RHINO_SUPPORTED_EVM_CHAINS,
+ RHINO_SUPPORTED_OTHER_CHAINS,
+ RHINO_SUPPORTED_TOKENS,
+} from '@/constants/rhino.consts'
export default function TokenAndNetworkConfirmationModal({
- token,
- network,
onClose,
onAccept,
isVisible = true,
}: {
- token?: Pick
- network?: Pick
onClose: () => void
onAccept: () => void
isVisible?: boolean
}) {
- token = token ?? { symbol: 'USDC', icon: 'https://assets.coingecko.com/coins/images/6319/small/USD_Coin_icon.png' }
- network = network ?? { name: 'Arbitrum', iconUrl: ARBITRUM_ICON }
-
return (
-
}
footer={
@@ -50,7 +66,7 @@ export default function TokenAndNetworkConfirmationModal({
- setValue(e.target.value)}
- onKeyDown={(e) => {
- if (e.key === 'Enter' && onEnter) {
- onEnter()
- }
- }}
- />
- {value && (
-
- )
-}
-
-export default RecipientInput
diff --git a/src/components/Global/RewardsModal/index.tsx b/src/components/Global/RewardsModal/index.tsx
deleted file mode 100644
index 9df918f6a..000000000
--- a/src/components/Global/RewardsModal/index.tsx
+++ /dev/null
@@ -1,188 +0,0 @@
-import { PEANUTMAN_RAISING_HANDS } from '@/assets'
-import { Button } from '@/components/0_Bruddle'
-import { useAuth } from '@/context/authContext'
-import { rewardsApi } from '@/services/rewards'
-import { type RewardLink } from '@/services/services.types'
-import { hitUserMetric } from '@/utils/metrics.utils'
-import Image from 'next/image'
-import Link from 'next/link'
-import { useRouter } from 'next/navigation'
-import { useEffect, useState } from 'react'
-import Icon from '../Icon'
-import Modal from '../Modal'
-
-enum REWARD_ASSET_TYPE {
- 'PNT' = 'stable_day_berlin_blockchain_week_2025_1_pnt',
- 'USDC' = 'aleph_pinta_mar_2025_welcome_usdc',
- 'DEPOSIT' = 'aleph_pinta_mar_2025_deposit_reward_pnt',
-}
-
-export const RewardDetails = () => {
- return (
-
-
-
- )}
-
-
- )
-}
-
-export const PartnerBarLocation = ({ text = 'partner bars.' }: { text?: string }) => {
- return (
-
- {text}
-
- )
-}
-
-const RewardsModal = () => {
- const [showModal, setShowModal] = useState
-
- Exclusive benefits:
- -
-
- Visit our booth to unlock more rewards -
- setShowModal(false)}
- className="items-center rounded-none"
- classWrap="sm:m-auto sm:self-center self-center m-4 bg-background rounded-none border-0"
- >
- {/* Main content container */}
-
-
- )
-}
-
-export default RewardsModal
diff --git a/src/components/Global/Search/index.tsx b/src/components/Global/Search/index.tsx
deleted file mode 100644
index 8a370f253..000000000
--- a/src/components/Global/Search/index.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import Icon from '@/components/Global/Icon'
-
-type SearchProps = {
- className?: string
- placeholder: string
- value: string
- onChange: any
- onSubmit: any
- large?: boolean
- medium?: boolean
- border?: boolean
-}
-
-const Search = ({ className, placeholder, value, onChange, onSubmit, large, medium, border }: SearchProps) => {
- return (
-
-
-
- {/* Peanutman with beer character at the top */}
-
-
-
-
- {activeReward?.assetCode === REWARD_ASSET_TYPE.PNT &&
-
- {activeReward?.assetCode === REWARD_ASSET_TYPE.PNT ? (
- {modalContent?.title}
-{modalContent?.subtitle}
-- During Stablecoin Day at Berlin Blockchain Week, use your Beer Tokens to enjoy free - beers at the Peanut booth -
- ) : ( -Your seamless crypto experience starts now.
- )} -
-
-
-
-
-
- {' '}
-
- )
-}
-
-export default Search
diff --git a/src/components/Global/Select/index.tsx b/src/components/Global/Select/index.tsx
index 3ba6c0fb4..198798637 100644
--- a/src/components/Global/Select/index.tsx
+++ b/src/components/Global/Select/index.tsx
@@ -1,8 +1,8 @@
-import Icon from '@/components/Global/Icon'
import { Listbox, Transition } from '@headlessui/react'
import { useRef } from 'react'
import { createPortal } from 'react-dom'
import { twMerge } from 'tailwind-merge'
+import { Icon } from '../Icons/Icon'
type SelectItem = {
id: string
@@ -66,7 +66,7 @@ const Select = ({
small ? '-mr-2 ml-2' : ''
} ${open ? 'rotate-180' : ''} ${classArrow}`
)}
- name="arrow-bottom"
+ name="chevron-down"
/>
{open &&
diff --git a/src/components/Global/ShareButton/index.tsx b/src/components/Global/ShareButton/index.tsx
index 397df771e..5df9ce5c4 100644
--- a/src/components/Global/ShareButton/index.tsx
+++ b/src/components/Global/ShareButton/index.tsx
@@ -1,10 +1,10 @@
'use client'
-import { Button, type ButtonVariant } from '@/components/0_Bruddle'
import { useToast } from '@/components/0_Bruddle/Toast'
import * as Sentry from '@sentry/nextjs'
import { useCallback } from 'react'
import { Icon } from '../Icons/Icon'
+import { Button, type ButtonVariant } from '@/components/0_Bruddle/Button'
type ShareButtonProps = {
title?: string
diff --git a/src/components/Global/Sorting/index.tsx b/src/components/Global/Sorting/index.tsx
deleted file mode 100644
index 1fbd91bde..000000000
--- a/src/components/Global/Sorting/index.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { useState } from 'react'
-import Icon from '@/components/Global/Icon'
-
-type SortingProps = {
- title: string
-}
-
-const Sorting = ({ title }: SortingProps) => {
- const [active, setActive] = useState{children}
-
-
-
-
-
-)
-
-export default TablePagination
diff --git a/src/components/Global/Testimonials/index.tsx b/src/components/Global/Testimonials/index.tsx
index a421d5277..6f05207a7 100644
--- a/src/components/Global/Testimonials/index.tsx
+++ b/src/components/Global/Testimonials/index.tsx
@@ -1,7 +1,6 @@
import { useRef } from 'react'
-import { Stack, Box, Flex, SimpleGrid, GridItem } from '@chakra-ui/react'
import { motion } from 'framer-motion'
-import { useMediaQuery } from '@chakra-ui/react'
+import useMediaQuery from '@mui/material/useMediaQuery'
interface Testimonial {
name: string
@@ -18,9 +17,9 @@ type TestimonialsProps = {
export function Testimonials({ testimonials }: TestimonialsProps) {
const ref = useRef(null)
- const [isLargerThan768] = useMediaQuery('(min-width: 768px)')
+ const isLargerThan768 = useMediaQuery('(min-width: 768px)')
- // Animation variants
+ // animation variants
const gridItemVariants = [
{
hidden: { opacity: 0, translateY: 20, translateX: 0, rotate: 0 },
@@ -164,10 +163,10 @@ export function Testimonials({ testimonials }: TestimonialsProps) {
]
return (
-
- Page {currentPage} of {totalPages}
-
-
-
-
+
)
}
diff --git a/src/components/Global/TextEdit/index.tsx b/src/components/Global/TextEdit/index.tsx
deleted file mode 100644
index ddda91e9c..000000000
--- a/src/components/Global/TextEdit/index.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import React, { useState, useRef, useEffect } from 'react'
-
-const TextEdit = ({ initialText, onTextChange }: { initialText: string; onTextChange: (text: string) => void }) => {
- const [text, setText] = useState(initialText)
- const [isEditing, setIsEditing] = useState(false)
- const inputRef = useRef
+
{testimonials.map((testimonial, index) => (
-
+
+
))}
-
+
{isLargerThan768 ? (
)}
-
- {isEditing ? (
-
- ) : (
- {
- setIsEditing(true)
- }}
- >
- {text}
-
- )}
-
- {!isEditing && (
-
- )}
-
- )
-}
-
-export default TextEdit
diff --git a/src/components/Global/Timeline/index.tsx b/src/components/Global/Timeline/index.tsx
deleted file mode 100644
index 84da01f3e..000000000
--- a/src/components/Global/Timeline/index.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-interface TimelineProps {
- label: string
- value: string
-}
-
-const Timeline = ({ label, value }: TimelineProps) => {
- return (
-
-
- )
-}
-
-export default Timeline
diff --git a/src/components/Global/ToggleTheme/index.tsx b/src/components/Global/ToggleTheme/index.tsx
deleted file mode 100644
index e8503dafd..000000000
--- a/src/components/Global/ToggleTheme/index.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-'use client'
-import Icon from '@/components/Global/Icon'
-import { useColorMode } from '@chakra-ui/color-mode'
-
-type ToggleThemeProps = {}
-
-const ToggleTheme = ({}: ToggleThemeProps) => {
- const { colorMode, setColorMode } = useColorMode()
-
- const items: {
- icon: string
- active: boolean
- onClick: () => void
- }[] = [
- {
- icon: 'sun',
- active: colorMode === 'light',
- onClick: () => setColorMode('light'),
- },
- {
- icon: 'moon',
- active: colorMode === 'dark',
- onClick: () => setColorMode('dark'),
- },
- ]
-
- return (
-
-
-
-
- {label}
- {value}
-
- {items.map((item, index) => (
-
- ))}
-
- )
-}
-
-export default ToggleTheme
diff --git a/src/components/Global/TokenAmountInput/index.tsx b/src/components/Global/TokenAmountInput/index.tsx
deleted file mode 100644
index ac6feaaf9..000000000
--- a/src/components/Global/TokenAmountInput/index.tsx
+++ /dev/null
@@ -1,416 +0,0 @@
-'use client'
-
-import { PEANUT_WALLET_TOKEN_DECIMALS, STABLE_COINS } from '@/constants'
-import { tokenSelectorContext } from '@/context'
-import { formatTokenAmount, formatCurrency } from '@/utils'
-import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
-import { useRouter, useSearchParams } from 'next/navigation'
-import Icon from '../Icon'
-import { twMerge } from 'tailwind-merge'
-import { Icon as IconComponent } from '@/components/Global/Icons/Icon'
-import { Slider } from '../Slider'
-import { DeviceType, useDeviceType } from '@/hooks/useGetDeviceType'
-
-interface TokenAmountInputProps {
- className?: string
- tokenValue: string | undefined
- setTokenValue: (tokenvalue: string | undefined) => void
- setUsdValue?: (usdvalue: string) => void
- setCurrencyAmount?: (currencyvalue: string | undefined) => void
- onSubmit?: () => void
- onBlur?: () => void
- disabled?: boolean
- walletBalance?: string
- currency?: {
- code: string
- symbol: string
- price: number
- }
- hideCurrencyToggle?: boolean
- hideBalance?: boolean
- showInfoText?: boolean
- infoText?: string
- showSlider?: boolean
- maxAmount?: number
- amountCollected?: number
- isInitialInputUsd?: boolean
- defaultSliderValue?: number
- defaultSliderSuggestedAmount?: number
-}
-
-const TokenAmountInput = ({
- className,
- tokenValue,
- setTokenValue,
- setCurrencyAmount,
- onSubmit,
- onBlur,
- disabled,
- walletBalance,
- currency,
- setUsdValue,
- hideCurrencyToggle = false,
- hideBalance = false,
- infoText,
- showInfoText,
- showSlider = false,
- maxAmount,
- amountCollected = 0,
- isInitialInputUsd = false,
- defaultSliderValue,
- defaultSliderSuggestedAmount,
-}: TokenAmountInputProps) => {
- const { selectedTokenData } = useContext(tokenSelectorContext)
- const router = useRouter()
- const searchParams = useSearchParams()
- const inputRef = useRef
-
-
-
- Sending funds via any other network will result in a permanent loss.
+ Sending the wrong token or using the wrong network will result in permanent loss.
+
+
+
+
+ Supported Networks
+ +
+ {RHINO_SUPPORTED_OTHER_CHAINS.map((chain) => (
+
+
+
Supported Tokens
+ +
+ {RHINO_SUPPORTED_TOKENS.map((token) => (
+
+ Loading balances...
- }
- // this section only renders if isExternalWalletConnected is true
- if (sourceBalances.length === 0) {
- return (
- Activity
- {
)}
>
{
return (
- {({ onClose }) => (
+
+ {({ close }) => (
<>
- {trigger}
-
-
- = ({ username, isLoggedIn = false, onSendClick }) => {
- const dispatch = useAppDispatch()
const [totalSentByLoggedInUser, setTotalSentByLoggedInUser] = useState('0')
const [fullName, setFullName] = useState(username)
const [showFullName, setShowFullName] = useState(false)
@@ -45,12 +42,10 @@ const PublicProfile: React.FC = ({ username, isLoggedIn = fa
earnedAt?: string | Date
}>
>([])
- // Handle send button click
+ // handle send button click
const handleSend = () => {
if (onSendClick) {
onSendClick()
- } else {
- dispatch(paymentActions.setView('INITIAL'))
}
}
diff --git a/src/components/Profile/index.tsx b/src/components/Profile/index.tsx
index 9d5c4fc71..cbf3439b1 100644
--- a/src/components/Profile/index.tsx
+++ b/src/components/Profile/index.tsx
@@ -1,13 +1,13 @@
'use client'
-import { Button } from '@/components/0_Bruddle'
+import { Button } from '@/components/0_Bruddle/Button'
import { Icon } from '@/components/Global/Icons/Icon'
import { useAuth } from '@/context/authContext'
import NavHeader from '../Global/NavHeader'
import ProfileHeader from './components/ProfileHeader'
import ProfileMenuItem from './components/ProfileMenuItem'
import { useRouter } from 'next/navigation'
-import { checkIfInternalNavigation, generateInviteCodeLink, generateInvitesShareText } from '@/utils'
+import { checkIfInternalNavigation, generateInviteCodeLink, generateInvitesShareText } from '@/utils/general.utils'
import ActionModal from '../Global/ActionModal'
import { useState } from 'react'
import useKycStatus from '@/hooks/useKycStatus'
@@ -99,6 +99,13 @@ export const Profile = () => {
+
-
diff --git a/src/components/Kyc/InitiateBridgeKYCModal.tsx b/src/components/Kyc/InitiateBridgeKYCModal.tsx
index 8fbca218c..0fdb440bf 100644
--- a/src/components/Kyc/InitiateBridgeKYCModal.tsx
+++ b/src/components/Kyc/InitiateBridgeKYCModal.tsx
@@ -3,7 +3,7 @@ import { useBridgeKycFlow } from '@/hooks/useBridgeKycFlow'
import IframeWrapper from '@/components/Global/IframeWrapper'
import { KycVerificationInProgressModal } from './KycVerificationInProgressModal'
import { type IconName } from '@/components/Global/Icons/Icon'
-import { saveRedirectUrl } from '@/utils'
+import { saveRedirectUrl } from '@/utils/general.utils'
import useClaimLink from '../Claim/useClaimLink'
interface BridgeKycModalFlowProps {
diff --git a/src/components/Kyc/InitiateMantecaKYCModal.tsx b/src/components/Kyc/InitiateMantecaKYCModal.tsx
index ca854e913..d72f425cc 100644
--- a/src/components/Kyc/InitiateMantecaKYCModal.tsx
+++ b/src/components/Kyc/InitiateMantecaKYCModal.tsx
@@ -5,7 +5,7 @@ import IframeWrapper from '@/components/Global/IframeWrapper'
import { type IconName } from '@/components/Global/Icons/Icon'
import { useMantecaKycFlow } from '@/hooks/useMantecaKycFlow'
import { type CountryData } from '@/components/AddMoney/consts'
-import { Button } from '../0_Bruddle'
+import { Button } from '@/components/0_Bruddle/Button'
import { PeanutDoesntStoreAnyPersonalInformation } from './KycVerificationInProgressModal'
import { useEffect } from 'react'
@@ -19,6 +19,7 @@ interface Props {
description?: string | React.ReactNode
ctaText?: string
footer?: React.ReactNode
+ autoStartKyc?: boolean
}
const InitiateMantecaKYCModal = ({
@@ -31,6 +32,7 @@ const InitiateMantecaKYCModal = ({
description,
ctaText,
footer,
+ autoStartKyc,
}: Props) => {
const { isLoading, iframeOptions, openMantecaKyc, handleIframeClose } = useMantecaKycFlow({
onClose: onManualClose, // any non-success close from iframe is a manual close in case of Manteca KYC
@@ -53,16 +55,26 @@ const InitiateMantecaKYCModal = ({
}
}, [])
+ useEffect(() => {
+ if (autoStartKyc) {
+ openMantecaKyc(country)
+ }
+ }, [autoStartKyc])
+
+ const isAutoStarting = autoStartKyc && isLoading
+ const displayTitle = isAutoStarting ? 'Starting verification...' : (title ?? 'Verify your identity first')
+ const displayDescription = isAutoStarting
+ ? 'Please wait while we start your verification...'
+ : (description ??
+ 'To continue, you need to complete identity verification. This usually takes just a few minutes.')
+
return (
<>
-
You're still in Peanut jail
- -Prisoner #{data?.position}
-- No bail without an invite. Got a code? Prove it below. No code? Back to the waitlist. Go beg - your friend! -
- -
- {
- setIsValid(isValid)
- setIsChanging(isChanging)
- setInviteCode(value)
- }}
- isSetupFlow
- isInputChanging={isChanging}
- className={twMerge(
- !isValid && !isChanging && !!inviteCode && 'border-error dark:border-error',
- isValid &&
- !isChanging &&
- !!inviteCode &&
- 'border-secondary-8 dark:border-secondary-8',
- 'rounded-sm'
- )}
- />
+ {!isPermissionGranted && (
+
+ )}
+
+ {isPermissionGranted && (
+
+
-
- {!isValid && !isChanging && !!inviteCode && (
- Enable notifications
+We'll send you an update as soon as you get access.
+
+ )}
You're still in Peanut jail
+ +Prisoner #{data?.position}
++ No bail without an invite. Got a code? Prove it below. No code? Back to the waitlist. Go + beg your friend! +
+ +
+ {
+ setIsValid(isValid)
+ setIsChanging(isChanging)
+ setInviteCode(value)
+ }}
+ isSetupFlow
+ isInputChanging={isChanging}
+ className={twMerge(
+ !isValid && !isChanging && !!inviteCode && 'border-error dark:border-error',
+ isValid &&
+ !isChanging &&
+ !!inviteCode &&
+ 'border-secondary-8 dark:border-secondary-8',
+ 'rounded-sm'
+ )}
+ />
+
+
+
+
+ {!isValid && !isChanging && !!inviteCode && (
+
- (null)
- const inputType = useMemo(() => (window.innerWidth < 640 ? 'text' : 'number'), [])
- const [isFocused, setIsFocused] = useState(false)
- const { deviceType } = useDeviceType()
- // Only autofocus on desktop (WEB), not on mobile devices (IOS/ANDROID)
- const shouldAutoFocus = deviceType === DeviceType.WEB
-
- // Store display value for input field (what user sees when typing)
- const [displayValue, setDisplayValue] = useState(tokenValue || '')
- const [isInputUsd, setIsInputUsd] = useState(!currency || isInitialInputUsd)
- const [displaySymbol, setDisplaySymbol] = useState('')
- const [alternativeDisplayValue, setAlternativeDisplayValue] = useState('0.00')
- const [alternativeDisplaySymbol, setAlternativeDisplaySymbol] = useState('')
-
- const displayMode = useMemo<'TOKEN' | 'STABLE' | 'FIAT'>(() => {
- if (currency) return 'FIAT'
- if (selectedTokenData?.symbol && STABLE_COINS.includes(selectedTokenData?.symbol)) {
- return 'STABLE'
- } else {
- return 'TOKEN'
- }
- }, [currency, selectedTokenData?.symbol])
-
- const decimals = useMemo(() => {
- let _decimals: number
- if (displayMode === 'TOKEN' && isInputUsd && selectedTokenData?.decimals) {
- _decimals = selectedTokenData.decimals
- } else {
- _decimals = PEANUT_WALLET_TOKEN_DECIMALS
- }
- // For displaying the token amount, anything more breaks the UI
- return 6 < _decimals ? 6 : _decimals
- }, [displayMode, selectedTokenData?.decimals, isInputUsd])
-
- const calculateAlternativeValue = useCallback(
- (value: string) => {
- // There is no alternative display when dealing with stables
- if (displayMode === 'STABLE') return ''
-
- let price: number
- if (displayMode === 'TOKEN') {
- if (!selectedTokenData?.price) return ''
- price = selectedTokenData.price
- } else if (displayMode === 'FIAT') {
- if (!currency?.price) return ''
- price = 1 / currency.price
- } else {
- throw new Error('Invalid display mode')
- }
-
- if (isInputUsd) {
- return formatTokenAmount(Number(value) / price, decimals)!
- } else {
- return formatTokenAmount(Number(value) * price, decimals)!
- }
- },
- [displayMode, currency?.price, selectedTokenData?.price, isInputUsd, decimals]
- )
-
- const onChange = useCallback(
- (value: string, _isInputUsd: boolean) => {
- setDisplayValue(value)
- setAlternativeDisplayValue(calculateAlternativeValue(value))
- let tokenValue: string
- switch (displayMode) {
- case 'STABLE': {
- tokenValue = value
- break
- }
- case 'TOKEN': {
- tokenValue = _isInputUsd ? (Number(value) / (selectedTokenData?.price ?? 1)).toString() : value
- break
- }
- case 'FIAT': {
- if (!currency?.price) throw new Error('Invalid currency')
- const usdValue = _isInputUsd ? Number(value) : Number(value) / currency.price
- // For when we have a non stablecoin request in currency mode
- tokenValue = formatTokenAmount(usdValue / (selectedTokenData?.price ?? 1), decimals)!
- const currencyValue = _isInputUsd ? (Number(value) * currency.price).toString() : value
- setCurrencyAmount?.(currencyValue)
- break
- }
- default: {
- throw new Error('Invalid display mode')
- }
- }
- setTokenValue(tokenValue)
- },
- [displayMode, currency?.price, selectedTokenData?.price, calculateAlternativeValue]
- )
-
- const onSliderValueChange = useCallback(
- (value: number[]) => {
- if (maxAmount) {
- const selectedPercentage = value[0]
- let selectedAmount = (selectedPercentage / 100) * maxAmount
-
- // Only snap to exact remaining amount when user selects the 33.33% magnetic snap point
- // This ensures equal splits fill the pot exactly to 100%
- const SNAP_POINT_TOLERANCE = 0.5 // percentage points - allows magnetic snapping
- const COMPLETION_THRESHOLD = 0.98 // 98% - if 33.33% would nearly complete pot
- const EQUAL_SPLIT_PERCENTAGE = 100 / 3 // 33.333...%
-
- const isAt33SnapPoint = Math.abs(selectedPercentage - EQUAL_SPLIT_PERCENTAGE) < SNAP_POINT_TOLERANCE
- if (isAt33SnapPoint && amountCollected > 0) {
- const remainingAmount = maxAmount - amountCollected
- // Only snap if there's remaining amount and 33.33% would nearly complete the pot
- if (remainingAmount > 0 && selectedAmount >= remainingAmount * COMPLETION_THRESHOLD) {
- selectedAmount = remainingAmount
- }
- }
-
- const selectedAmountStr = parseFloat(selectedAmount.toFixed(4)).toString()
- const maxDecimals = displayMode === 'FIAT' || displayMode === 'STABLE' || isInputUsd ? 2 : decimals
- const formattedAmount = formatTokenAmount(selectedAmountStr, maxDecimals, true)
- if (formattedAmount) {
- onChange(formattedAmount, isInputUsd)
- }
- }
- },
- [maxAmount, amountCollected, onChange, displayMode, isInputUsd, decimals]
- )
-
- const showConversion = useMemo(() => {
- return !hideCurrencyToggle && (displayMode === 'TOKEN' || displayMode === 'FIAT')
- }, [hideCurrencyToggle, displayMode])
-
- // This is needed because if we change the token we selected the value
- // should change. This only depends on the price on purpose!! we don't want
- // to change when we change the display mode or the value (we already call
- // onchange on the input change so dont add those dependencies here!)
- useEffect(() => {
- // early return if tokenValue is empty.
- if (!tokenValue) return
-
- if (!isInitialInputUsd) {
- const value = tokenValue ? Number(tokenValue) : 0
- const formattedValue = (value * (currency?.price ?? 1)).toFixed(2)
- onChange(formattedValue, isInputUsd)
- } else {
- onChange(displayValue, isInputUsd)
- }
- }, [selectedTokenData?.price, displayValue, isInputUsd])
-
- useEffect(() => {
- switch (displayMode) {
- case 'STABLE': {
- setDisplaySymbol('$')
- setAlternativeDisplaySymbol('')
- break
- }
- case 'TOKEN': {
- if (isInputUsd) {
- setDisplaySymbol('$')
- setAlternativeDisplaySymbol(selectedTokenData?.symbol || '')
- } else {
- setDisplaySymbol(selectedTokenData?.symbol || '')
- setAlternativeDisplaySymbol('$')
- }
- break
- }
- case 'FIAT': {
- if (isInputUsd) {
- setDisplaySymbol('USD')
- setAlternativeDisplaySymbol(currency?.symbol || '')
- } else {
- setDisplaySymbol(currency?.symbol || '')
- setAlternativeDisplaySymbol('USD')
- }
- break
- }
- default: {
- throw new Error('Invalid display mode')
- }
- }
- }, [displayMode, selectedTokenData?.symbol, currency?.symbol, isInputUsd])
-
- useEffect(() => {
- if (inputRef.current) {
- if (displayValue?.length !== 0) {
- inputRef.current.style.width = `${displayValue?.length ?? 0}ch`
- } else {
- inputRef.current.style.width = `4ch`
- }
- }
- }, [displayValue, currency])
-
- useEffect(() => {
- if (!setUsdValue) return
- if (displayMode === 'STABLE') {
- setUsdValue(displayValue)
- } else {
- setUsdValue(isInputUsd ? displayValue : alternativeDisplayValue)
- }
- }, [setUsdValue, displayValue, alternativeDisplayValue, isInputUsd, displayMode])
-
- const formRef = useRef(null)
-
- const sliderValue = useMemo(() => {
- if (!maxAmount || !tokenValue) return [0]
- const tokenNum = parseFloat(tokenValue.replace(/,/g, ''))
- const usdValue = tokenNum * (selectedTokenData?.price ?? 1)
- return [(usdValue / maxAmount) * 100]
- }, [maxAmount, tokenValue, selectedTokenData?.price])
-
- const handleContainerClick = () => {
- if (inputRef.current) {
- inputRef.current.focus()
- }
- }
-
- // Sync default slider suggested amount to the input
- useEffect(() => {
- if (defaultSliderSuggestedAmount) {
- const formattedAmount = formatTokenAmount(defaultSliderSuggestedAmount.toString(), 2)
- if (formattedAmount) {
- setTokenValue(formattedAmount)
- setDisplayValue(formattedAmount)
- }
- }
- }, [defaultSliderSuggestedAmount])
-
- return (
-
- )
-}
-
-export default PaymentAmountInput
diff --git a/src/components/Payment/PaymentForm/index.tsx b/src/components/Payment/PaymentForm/index.tsx
deleted file mode 100644
index 8c3bf8e09..000000000
--- a/src/components/Payment/PaymentForm/index.tsx
+++ /dev/null
@@ -1,1000 +0,0 @@
-'use client'
-
-import { PEANUT_LOGO_BLACK } from '@/assets'
-import { PEANUTMAN_LOGO } from '@/assets/peanut'
-import { Button } from '@/components/0_Bruddle'
-import ActionModal from '@/components/Global/ActionModal'
-import AddressLink from '@/components/Global/AddressLink'
-import ErrorAlert from '@/components/Global/ErrorAlert'
-import FileUploadInput from '@/components/Global/FileUploadInput'
-import { type IconName } from '@/components/Global/Icons/Icon'
-import NavHeader from '@/components/Global/NavHeader'
-import PaymentAmountInput from '@/components/Payment/PaymentAmountInput'
-import TokenSelector from '@/components/Global/TokenSelector/TokenSelector'
-import UserCard from '@/components/User/UserCard'
-import { PEANUT_WALLET_TOKEN, PEANUT_WALLET_TOKEN_DECIMALS, PEANUT_WALLET_CHAIN } from '@/constants'
-import { tokenSelectorContext } from '@/context'
-import { useAuth } from '@/context/authContext'
-import { useRequestFulfillmentFlow } from '@/context/RequestFulfillmentFlowContext'
-import { type InitiatePaymentPayload, usePaymentInitiator } from '@/hooks/usePaymentInitiator'
-import { useWallet } from '@/hooks/wallet/useWallet'
-import { usePendingTransactions } from '@/hooks/wallet/usePendingTransactions'
-import { useTokenPrice } from '@/hooks/useTokenPrice'
-import { useSquidChainsAndTokens } from '@/hooks/useSquidChainsAndTokens'
-import { type ParsedURL } from '@/lib/url-parser/types/payment'
-import { useAppDispatch, usePaymentStore } from '@/redux/hooks'
-import { paymentActions } from '@/redux/slices/payment-slice'
-import { walletActions } from '@/redux/slices/wallet-slice'
-import { areEvmAddressesEqual, ErrorHandler, formatAmount, formatCurrency, getContributorsFromCharge } from '@/utils'
-import { useAppKit, useDisconnect } from '@reown/appkit/react'
-import { initializeAppKit } from '@/config/wagmi.config'
-import Image from 'next/image'
-import { useRouter, useSearchParams } from 'next/navigation'
-import { useCallback, useContext, useEffect, useMemo, useState } from 'react'
-import { formatUnits } from 'viem'
-import { useAccount } from 'wagmi'
-import { useUserInteractions } from '@/hooks/useUserInteractions'
-import { useUserByUsername } from '@/hooks/useUserByUsername'
-import { type PaymentFlow } from '@/app/[...recipient]/client'
-import { invitesApi } from '@/services/invites'
-import { EInviteType } from '@/services/services.types'
-import ContributorCard from '@/components/Global/Contributors/ContributorCard'
-import { getCardPosition } from '@/components/Global/Card'
-import * as Sentry from '@sentry/nextjs'
-import { useHaptic } from 'use-haptic'
-import TokenAmountInput from '@/components/Global/TokenAmountInput'
-
-export type PaymentFlowProps = {
- isExternalWalletFlow?: boolean
- /** Whether this is a direct USD payment flow (bypasses token conversion) */
- isDirectUsdPayment?: boolean
- currency?: {
- code: string
- symbol: string
- price: number
- }
- currencyAmount?: string
- setCurrencyAmount?: (currencyvalue: string | undefined) => void
- headerTitle?: string
- flow?: PaymentFlow
- showRequestPotInitialView?: boolean
-}
-
-export type PaymentFormProps = ParsedURL & PaymentFlowProps
-
-export const PaymentForm = ({
- recipient,
- amount,
- token,
- chain,
- currency,
- currencyAmount,
- setCurrencyAmount,
- isExternalWalletFlow,
- isDirectUsdPayment,
- headerTitle,
- flow,
- showRequestPotInitialView,
-}: PaymentFormProps) => {
- const dispatch = useAppDispatch()
- const router = useRouter()
- const { user, fetchUser } = useAuth()
- const {
- requestDetails,
- chargeDetails,
- daimoError,
- error: paymentStoreError,
- attachmentOptions,
- currentView,
- parsedPaymentData,
- } = usePaymentStore()
- const { triggerPayWithPeanut, setTriggerPayWithPeanut } = useRequestFulfillmentFlow()
- const recipientUsername = !chargeDetails && recipient?.recipientType === 'USERNAME' ? recipient.identifier : null
- const { user: recipientUser } = useUserByUsername(recipientUsername)
-
- const recipientUserId =
- requestDetails?.recipientAccount?.userId ||
- chargeDetails?.requestLink.recipientAccount.userId ||
- recipientUser?.userId
- const recipientKycStatus =
- chargeDetails?.requestLink.recipientAccount.user?.bridgeKycStatus || recipientUser?.bridgeKycStatus
-
- const { interactions } = useUserInteractions(recipientUserId ? [recipientUserId] : [])
- const { isConnected: isPeanutWalletConnected, balance } = useWallet()
- const { isConnected: isExternalWalletConnected, status } = useAccount()
-
- // Fetch Squid chains and tokens for token price lookup
- const { data: supportedSquidChainsAndTokens = {} } = useSquidChainsAndTokens()
-
- // Fetch token price for request details (xchain requests)
- const { data: requestedTokenPriceData } = useTokenPrice({
- tokenAddress: requestDetails?.tokenAddress,
- chainId: requestDetails?.chainId,
- supportedSquidChainsAndTokens,
- isPeanutWallet: false, // Request details are always external tokens
- })
- const [initialSetupDone, setInitialSetupDone] = useState(false)
- const [inputTokenAmount, setInputTokenAmount] = useState(
- chargeDetails?.tokenAmount || requestDetails?.tokenAmount || amount || ''
- )
- const [isAcceptingInvite, setIsAcceptingInvite] = useState(false)
- const [inviteError, setInviteError] = useState(false)
-
- // states
- const [disconnectWagmiModal, setDisconnectWagmiModal] = useState(false)
- const [inputUsdValue, setInputUsdValue] = useState('')
- const [usdValue, setUsdValue] = useState('')
-
- const { initiatePayment, isProcessing, error: initiatorError } = usePaymentInitiator()
- const { hasPendingTransactions } = usePendingTransactions()
-
- const peanutWalletBalance = useMemo(() => {
- return balance !== undefined ? formatCurrency(formatUnits(balance, PEANUT_WALLET_TOKEN_DECIMALS)) : ''
- }, [balance])
-
- const error = useMemo(() => {
- if (paymentStoreError) return ErrorHandler(paymentStoreError)
- if (initiatorError) return ErrorHandler(initiatorError)
- if (inviteError) return 'Something went wrong. Please try again or contact support.'
- return null
- }, [paymentStoreError, initiatorError, inviteError])
-
- const {
- selectedChainID,
- selectedTokenAddress,
- selectedTokenData,
- setSelectedChainID,
- setSelectedTokenAddress,
- selectedTokenBalance,
- } = useContext(tokenSelectorContext)
- const { open: openReownModal } = useAppKit()
- const { disconnect: disconnectWagmi } = useDisconnect()
- const { address: wagmiAddress } = useAccount()
- const searchParams = useSearchParams()
- const requestId = searchParams.get('id')
- const isDepositRequest = searchParams.get('action') === 'deposit'
- const { triggerHaptic } = useHaptic()
-
- const isUsingExternalWallet = useMemo(() => {
- return isExternalWalletFlow || !isPeanutWalletConnected
- }, [isPeanutWalletConnected, isExternalWalletFlow])
-
- const isConnected = useMemo(() => {
- return isPeanutWalletConnected || isExternalWalletConnected
- }, [isPeanutWalletConnected, isExternalWalletConnected, status])
-
- const isActivePeanutWallet = useMemo(() => !!user && isPeanutWalletConnected, [user, isPeanutWalletConnected])
-
- const isRequestPotLink = !!chargeDetails?.requestLink
-
- useEffect(() => {
- // skip this step for request pot payments
- // Amount is set by the user so we dont need to manually update it
- // chain and token are also USDC arb always, for cross-chain we use Daimo
- if (initialSetupDone || showRequestPotInitialView || isRequestPotLink) return
-
- // prioritize charge amount over URL amount
- if (chargeDetails?.tokenAmount) {
- setInputTokenAmount(chargeDetails.tokenAmount)
- } else if (amount) {
- setInputTokenAmount(amount)
- }
-
- // for ADDRESS/ENS recipients, initialize token/chain from URL or defaults
- const isExternalRecipient = recipient?.recipientType === 'ADDRESS' || recipient?.recipientType === 'ENS'
-
- if (chain) {
- setSelectedChainID((chain.chainId || requestDetails?.chainId) ?? '')
- if (!token && !requestDetails?.tokenAddress) {
- const defaultToken = chain.tokens.find((t) => t.symbol.toLowerCase() === 'usdc')
- if (defaultToken) {
- setSelectedTokenAddress(defaultToken.address)
- // Note: decimals automatically derived by useTokenPrice hook
- }
- }
- } else if (isExternalRecipient && !selectedChainID) {
- // default to arbitrum for external recipients if no chain specified
- setSelectedChainID(PEANUT_WALLET_CHAIN.id.toString())
- }
-
- if (token) {
- setSelectedTokenAddress((token.address || requestDetails?.tokenAddress) ?? '')
- // Note: decimals automatically derived by useTokenPrice hook
- } else if (isExternalRecipient && !selectedTokenAddress && selectedChainID) {
- // default to USDC for external recipients if no token specified
- const chainData = supportedSquidChainsAndTokens[selectedChainID]
- const defaultToken = chainData?.tokens.find((t) => t.symbol.toLowerCase() === 'usdc')
- if (defaultToken) {
- setSelectedTokenAddress(defaultToken.address)
- }
- }
-
- setInitialSetupDone(true)
- }, [
- chain,
- token,
- amount,
- initialSetupDone,
- requestDetails,
- showRequestPotInitialView,
- isRequestPotLink,
- recipient?.recipientType,
- selectedChainID,
- selectedTokenAddress,
- supportedSquidChainsAndTokens,
- ])
-
- // reset error when component mounts or recipient changes
- useEffect(() => {
- dispatch(paymentActions.setError(null))
- dispatch(paymentActions.setDaimoError(null))
- }, [dispatch, recipient])
-
- useEffect(() => {
- // Skip balance check if on CONFIRM or STATUS view, or if transaction is being processed, or if we have pending txs
- if (currentView === 'CONFIRM' || currentView === 'STATUS' || isProcessing || hasPendingTransactions) {
- return
- }
-
- dispatch(paymentActions.setError(null))
-
- const currentInputAmountStr = String(inputTokenAmount)
- const parsedInputAmount = parseFloat(currentInputAmountStr.replace(/,/g, ''))
-
- if (!currentInputAmountStr || isNaN(parsedInputAmount) || parsedInputAmount <= 0) {
- // if input is invalid or zero, no balance check is needed yet, or clear error if it was for insufficient balance
- return
- }
-
- try {
- if (isExternalWalletFlow) {
- // ADD MONEY FLOW: Strictly check external wallet if connected
- if (isExternalWalletConnected && selectedTokenData && selectedTokenBalance !== undefined) {
- if (selectedTokenData.decimals === undefined) {
- console.error('Selected token has no decimals information for Add Money.')
- dispatch(paymentActions.setError('Cannot verify balance: token data incomplete.'))
- return
- }
- const numericSelectedTokenBalance = parseFloat(String(selectedTokenBalance).replace(/,/g, ''))
- if (numericSelectedTokenBalance < parsedInputAmount) {
- dispatch(paymentActions.setError('Insufficient balance in connected wallet'))
- } else {
- dispatch(paymentActions.setError(null))
- }
- } else {
- // not connected or data missing for add money flow, clear error
- dispatch(paymentActions.setError(null))
- }
- } else {
- // regular send/pay
- const isExternalRecipient = recipient?.recipientType === 'ADDRESS' || recipient?.recipientType === 'ENS'
-
- if (
- !showRequestPotInitialView && // don't apply balance check on request pot payment initial view
- isActivePeanutWallet &&
- !isExternalRecipient
- ) {
- // peanut wallet payment for USERNAME recipients
- const walletNumeric = parseFloat(String(peanutWalletBalance).replace(/,/g, ''))
- if (walletNumeric < parsedInputAmount) {
- dispatch(paymentActions.setError('Insufficient balance'))
- } else {
- dispatch(paymentActions.setError(null))
- }
- } else if (
- !showRequestPotInitialView &&
- isActivePeanutWallet &&
- isExternalRecipient &&
- areEvmAddressesEqual(selectedTokenAddress, PEANUT_WALLET_TOKEN)
- ) {
- // for external recipients (ADDRESS/ENS) paying with peanut wallet, check peanut wallet balance directly
- const walletNumeric = parseFloat(String(peanutWalletBalance).replace(/,/g, ''))
- if (walletNumeric < parsedInputAmount) {
- dispatch(paymentActions.setError('Insufficient balance'))
- } else {
- dispatch(paymentActions.setError(null))
- }
- } else if (
- isExternalWalletConnected &&
- !isActivePeanutWallet &&
- selectedTokenData &&
- selectedTokenBalance !== undefined
- ) {
- // external wallet payment (not add money flow)
- if (selectedTokenData.decimals === undefined) {
- console.error('Selected token has no decimals information.')
- dispatch(paymentActions.setError('Cannot verify balance: token data incomplete.'))
- return
- }
- const numericSelectedTokenBalance = parseFloat(String(selectedTokenBalance).replace(/,/g, ''))
- if (numericSelectedTokenBalance < parsedInputAmount) {
- dispatch(paymentActions.setError('Insufficient balance'))
- } else {
- dispatch(paymentActions.setError(null))
- }
- } else if (isExternalRecipient && isActivePeanutWallet) {
- // for external recipients with peanut wallet using non-USDC tokens, balance will be checked via cross-chain route
- dispatch(paymentActions.setError(null))
- } else {
- dispatch(paymentActions.setError(null))
- }
- }
- } catch (e) {
- console.error('Error during balance check:', e)
- if (
- e instanceof Error &&
- (e.message.toLowerCase().includes('invalid character') ||
- e.message.toLowerCase().includes('invalid BigInt value'))
- ) {
- dispatch(paymentActions.setError('Invalid amount for balance check'))
- } else {
- dispatch(paymentActions.setError('Error verifying balance'))
- }
- }
- }, [
- selectedTokenBalance,
- peanutWalletBalance,
- selectedTokenAddress,
- inputTokenAmount,
- isActivePeanutWallet,
- dispatch,
- selectedTokenData,
- isExternalWalletConnected,
- isExternalWalletFlow,
- showRequestPotInitialView,
- currentView,
- isProcessing,
- hasPendingTransactions,
- recipient?.recipientType,
- ])
-
- // Calculate USD value when requested token price is available
- useEffect(() => {
- // skip this step for request pot payments
- // Amount is set by the user so we dont need to manually update it
- // No usd conversion needed because amount will always be USDC
- if (
- showRequestPotInitialView ||
- !requestedTokenPriceData?.price ||
- !requestDetails?.tokenAmount ||
- isRequestPotLink
- )
- return
-
- const tokenAmount = parseFloat(requestDetails.tokenAmount)
- if (isNaN(tokenAmount) || tokenAmount <= 0) return
-
- if (isNaN(requestedTokenPriceData.price) || requestedTokenPriceData.price === 0) return
-
- const usdValue = formatAmount(tokenAmount * requestedTokenPriceData.price)
-
- setInputTokenAmount(usdValue)
- setUsdValue(usdValue)
- }, [requestedTokenPriceData?.price, requestDetails?.tokenAmount, showRequestPotInitialView, isRequestPotLink])
-
- const canInitiatePayment = useMemo(() => {
- let amountIsSet = false
- if (isActivePeanutWallet) {
- amountIsSet = !!inputTokenAmount && parseFloat(inputTokenAmount) > 0
- } else {
- amountIsSet =
- (!!inputTokenAmount && parseFloat(inputTokenAmount) > 0) || (!!usdValue && parseFloat(usdValue) > 0)
- }
-
- const isExternalRecipient = recipient?.recipientType === 'ADDRESS' || recipient?.recipientType === 'ENS'
- // for external recipients, token selection is required
- // for USERNAME recipients, token is always PEANUT_WALLET_TOKEN
- const tokenSelected = isExternalRecipient
- ? !!selectedTokenAddress && !!selectedChainID
- : !!selectedTokenAddress && !!selectedChainID
- const recipientExists = !!recipient
- const walletConnected = isConnected
-
- // If its requestPotPayment, we only need to check if the recipient exists, amount is set, and token is selected
- if (showRequestPotInitialView) {
- return recipientExists && amountIsSet && tokenSelected && showRequestPotInitialView
- }
-
- return recipientExists && amountIsSet && tokenSelected && walletConnected
- }, [
- showRequestPotInitialView,
- recipient,
- inputTokenAmount,
- usdValue,
- selectedTokenAddress,
- selectedChainID,
- isConnected,
- isActivePeanutWallet,
- ])
-
- const handleAcceptInvite = async () => {
- try {
- setIsAcceptingInvite(true)
- const inviteCode = `${recipient?.identifier}INVITESYOU`
- const result = await invitesApi.acceptInvite(inviteCode, EInviteType.PAYMENT_LINK)
-
- if (!result.success) {
- console.error('Failed to accept invite')
- setInviteError(true)
- setIsAcceptingInvite(false)
- return false
- }
-
- // fetch user so that we have the latest state and user can access the app.
- // We dont need to wait for this, can happen in background.
- await fetchUser()
- setIsAcceptingInvite(false)
- return true
- } catch (error) {
- console.error('Failed to accept invite', error)
- setInviteError(true)
- setIsAcceptingInvite(false)
- return false
- }
- }
-
- const handleInitiatePayment = useCallback(async () => {
- // clear invite error
- if (inviteError) {
- setInviteError(false)
- }
- // redirect to add money if insufficient balance
- if (!showRequestPotInitialView && isActivePeanutWallet && isInsufficientBalanceError && !isExternalWalletFlow) {
- // if the user doesn't have app access, accept the invite before redirecting
- // only applies to USERNAME recipients (invite links)
- if (recipient.recipientType === 'USERNAME' && !user?.user.hasAppAccess) {
- const isAccepted = await handleAcceptInvite()
- if (!isAccepted) return
- }
- router.push('/add-money')
- return
- }
-
- // skip this step for request pots initial view
- if (!showRequestPotInitialView && !isExternalWalletConnected && isExternalWalletFlow) {
- try {
- await initializeAppKit()
- openReownModal()
- } catch (error) {
- console.error('Failed to initialize AppKit:', error)
- Sentry.captureException(error, {
- tags: { context: 'payment_form_external_wallet' },
- extra: { flow: 'external_wallet_payment' },
- })
- }
- }
-
- // skip this step for request pots initial view
- if (!showRequestPotInitialView && !isConnected) {
- dispatch(walletActions.setSignInModalVisible(true))
- return
- }
-
- if (!canInitiatePayment) return
-
- // regular payment flow
- if (!inputTokenAmount || parseFloat(inputTokenAmount) <= 0) {
- console.error('Invalid amount entered')
- dispatch(paymentActions.setError('Please enter a valid amount'))
- return
- }
-
- if (inputUsdValue && parseFloat(inputUsdValue) > 0) {
- dispatch(paymentActions.setUsdAmount(inputUsdValue))
- }
-
- if (
- !isActivePeanutWallet &&
- isExternalWalletConnected &&
- selectedTokenData &&
- selectedChainID &&
- !!chargeDetails
- ) {
- dispatch(paymentActions.setView('CONFIRM'))
- return
- }
-
- dispatch(paymentActions.setError(null))
-
- const requestedToken = chargeDetails?.tokenAddress ?? requestDetails?.tokenAddress
- const requestedChain = chargeDetails?.chainId ?? requestDetails?.chainId
-
- let tokenAmount = inputTokenAmount
- if (
- requestedToken &&
- requestedTokenPriceData?.price &&
- (requestedChain !== selectedChainID || !areEvmAddressesEqual(requestedToken, selectedTokenAddress))
- ) {
- // Validate price before division
- if (isNaN(requestedTokenPriceData.price) || requestedTokenPriceData.price === 0) {
- console.error('Invalid token price for conversion')
- dispatch(paymentActions.setError('Cannot calculate token amount: invalid price data'))
- return
- }
-
- const usdAmount = parseFloat(inputUsdValue)
- if (isNaN(usdAmount)) {
- console.error('Invalid USD amount')
- dispatch(paymentActions.setError('Invalid amount entered'))
- return
- }
-
- tokenAmount = (usdAmount / requestedTokenPriceData.price).toString()
- }
-
- const payload: InitiatePaymentPayload = {
- recipient: recipient,
- tokenAmount,
- requestId: requestId ?? undefined,
- chargeId: chargeDetails?.uuid,
- currency,
- currencyAmount,
- isExternalWalletFlow: !!isExternalWalletFlow,
- transactionType: isExternalWalletFlow
- ? 'DEPOSIT'
- : isDirectUsdPayment || !requestId
- ? 'DIRECT_SEND'
- : 'REQUEST',
- attachmentOptions: attachmentOptions,
- returnAfterChargeCreation: !!showRequestPotInitialView, // For request pot initial view, return after charge creation without initiating payment
- }
-
- console.log('Initiating payment with payload:', payload)
-
- const result = await initiatePayment(payload)
-
- if (result.status === 'Success') {
- triggerHaptic()
- dispatch(paymentActions.setView('STATUS'))
- } else if (result.status === 'Charge Created') {
- if (!showRequestPotInitialView) {
- dispatch(paymentActions.setView('CONFIRM'))
- }
- } else if (result.status === 'Error') {
- console.error('Payment initiation failed:', result.error)
- } else {
- console.warn('Unexpected status from usePaymentInitiator:', result.status)
- }
- }, [
- canInitiatePayment,
- isDepositRequest,
- isConnected,
- openReownModal,
- recipient,
- inputTokenAmount,
- requestId,
- initiatePayment,
- chargeDetails,
- isExternalWalletFlow,
- requestDetails,
- selectedTokenAddress,
- selectedChainID,
- inputUsdValue,
- requestedTokenPriceData?.price,
- inviteError,
- handleAcceptInvite,
- showRequestPotInitialView,
- ])
-
- const getButtonText = () => {
- if (!isExternalWalletConnected && isExternalWalletFlow) {
- return 'Connect Wallet'
- }
-
- if (isExternalWalletFlow) {
- return 'Review'
- }
-
- if (isProcessing) {
- return 'Send'
- }
-
- if (showRequestPotInitialView) {
- return 'Choose payment method'
- }
-
- if (isActivePeanutWallet && isInsufficientBalanceError && !isExternalWalletFlow) {
- return (
- setShowMoreInfo(!showMoreInfo)}
/>
{showMoreInfo && (
diff --git a/src/components/Payment/Views/Confirm.payment.view.tsx b/src/components/Payment/Views/Confirm.payment.view.tsx
deleted file mode 100644
index 786e8952a..000000000
--- a/src/components/Payment/Views/Confirm.payment.view.tsx
+++ /dev/null
@@ -1,566 +0,0 @@
-'use client'
-
-import { Button } from '@/components/0_Bruddle'
-import ActionModal from '@/components/Global/ActionModal'
-import Card from '@/components/Global/Card'
-import DisplayIcon from '@/components/Global/DisplayIcon'
-import ErrorAlert from '@/components/Global/ErrorAlert'
-import { type IconName } from '@/components/Global/Icons/Icon'
-import NavHeader from '@/components/Global/NavHeader'
-import PeanutActionDetailsCard from '@/components/Global/PeanutActionDetailsCard'
-import PeanutLoading from '@/components/Global/PeanutLoading'
-import { TRANSACTIONS } from '@/constants/query.consts'
-import { tokenSelectorContext } from '@/context'
-import { usePaymentInitiator } from '@/hooks/usePaymentInitiator'
-import { useTokenChainIcons } from '@/hooks/useTokenChainIcons'
-import { useWallet } from '@/hooks/wallet/useWallet'
-import { useAppDispatch, usePaymentStore } from '@/redux/hooks'
-import { paymentActions } from '@/redux/slices/payment-slice'
-import { chargesApi } from '@/services/charges'
-import { ErrorHandler, formatAmount, areEvmAddressesEqual, isStableCoin } from '@/utils'
-import { useQueryClient } from '@tanstack/react-query'
-import { useSearchParams } from 'next/navigation'
-import { useCallback, useContext, useEffect, useMemo, useState } from 'react'
-import { useAccount } from 'wagmi'
-import { PaymentInfoRow } from '../PaymentInfoRow'
-import { formatUnits } from 'viem'
-import type { Address } from 'viem'
-import {
- PEANUT_WALLET_CHAIN,
- PEANUT_WALLET_TOKEN,
- ROUTE_NOT_FOUND_ERROR,
- PEANUT_WALLET_TOKEN_SYMBOL,
-} from '@/constants'
-import { captureMessage } from '@sentry/nextjs'
-import AddressLink from '@/components/Global/AddressLink'
-import { useHaptic } from 'use-haptic'
-
-type ConfirmPaymentViewProps = {
- currency?: {
- code: string
- symbol: string
- price: number
- }
- currencyAmount?: string
- isExternalWalletFlow?: boolean
- /** Whether this is a direct payment, for xchain we dont care if a little
- * less arrives*/
- isDirectUsdPayment?: boolean
- headerTitle?: string
-}
-
-/**
- * Confirmation view for payment transactions. Displays payment details, fees, and handles
- * transaction execution for various payment flows including cross-chain payments, direct USD
- * payments, and add money flows.
- *
- * @param currency - Currency details for display (code, symbol, price)
- * @param currencyAmount - Amount in the specified currency
- * @param isExternalWalletFlow - Whether this is an add money flow (deposit to wallet)
- * @param isDirectUsdPayment - Whether this is a direct payment, for xchain we dont care if a little less arrives
- */
-export default function ConfirmPaymentView({
- currency,
- currencyAmount,
- isExternalWalletFlow,
- isDirectUsdPayment = false,
- headerTitle,
-}: ConfirmPaymentViewProps) {
- const dispatch = useAppDispatch()
- const searchParams = useSearchParams()
- const chargeIdFromUrl = searchParams.get('chargeId')
- const { chargeDetails, parsedPaymentData, usdAmount } = usePaymentStore()
- const {
- initiatePayment,
- prepareTransactionDetails,
- isProcessing,
- isPreparingTx,
- loadingStep,
- error: paymentError,
- estimatedGasCostUsd,
- isCalculatingFees,
- isEstimatingGas,
- isFeeEstimationError,
- cancelOperation: cancelPaymentOperation,
- xChainRoute,
- } = usePaymentInitiator()
- const { selectedTokenData, selectedChainID } = useContext(tokenSelectorContext)
- const { isConnected: isPeanutWallet, fetchBalance, address: peanutWalletAddress } = useWallet()
- const { isConnected: isWagmiConnected, address: wagmiAddress } = useAccount()
- const queryClient = useQueryClient()
- const [isRouteExpired, setIsRouteExpired] = useState(false)
- const { triggerHaptic } = useHaptic()
-
- const isUsingExternalWallet = useMemo(
- () => isExternalWalletFlow || !isPeanutWallet,
- [isExternalWalletFlow, isPeanutWallet]
- )
-
- const networkFee = useMemo(() => {
- if (isFeeEstimationError) return '-'
- if (estimatedGasCostUsd === undefined) {
- return isUsingExternalWallet ? '-' : 'Sponsored by Peanut!'
- }
-
- // external wallet flows
- if (isUsingExternalWallet) {
- return estimatedGasCostUsd < 0.01 ? '$ <0.01' : `$ ${estimatedGasCostUsd.toFixed(2)}`
- }
-
- // peanut-sponsored transactions
- if (estimatedGasCostUsd < 0.01) return 'Sponsored by Peanut!'
-
- return (
- <>
- $ {estimatedGasCostUsd.toFixed(2)}
- {' - '}
- Sponsored by Peanut!
-
- )
- }, [estimatedGasCostUsd, isFeeEstimationError, isUsingExternalWallet])
-
- const {
- tokenIconUrl: sendingTokenIconUrl,
- chainIconUrl: sendingChainIconUrl,
- resolvedChainName: sendingResolvedChainName,
- resolvedTokenSymbol: sendingResolvedTokenSymbol,
- } = useTokenChainIcons({
- chainId: isUsingExternalWallet ? selectedChainID : PEANUT_WALLET_CHAIN.id.toString(),
- tokenAddress: isUsingExternalWallet ? selectedTokenData?.address : PEANUT_WALLET_TOKEN,
- tokenSymbol: isUsingExternalWallet ? selectedTokenData?.symbol : PEANUT_WALLET_TOKEN_SYMBOL,
- })
-
- const {
- tokenIconUrl: requestedTokenIconUrl,
- chainIconUrl: requestedChainIconUrl,
- resolvedChainName: requestedResolvedChainName,
- resolvedTokenSymbol: requestedResolvedTokenSymbol,
- } = useTokenChainIcons({
- chainId: chargeDetails?.chainId,
- tokenAddress: chargeDetails?.tokenAddress,
- tokenSymbol: chargeDetails?.tokenSymbol,
- })
-
- const showExternalWalletConfirmationModal = useMemo((): boolean => {
- if (isCalculatingFees || isEstimatingGas) return false
-
- return (
- isProcessing &&
- isUsingExternalWallet &&
- ['Switching Network', 'Sending Transaction', 'Confirming Transaction', 'Preparing Transaction'].includes(
- loadingStep
- )
- )
- }, [isProcessing, loadingStep, isCalculatingFees, isEstimatingGas])
-
- useEffect(() => {
- if (chargeIdFromUrl && !chargeDetails) {
- chargesApi
- .get(chargeIdFromUrl)
- .then((fetchedChargeDetails) => {
- dispatch(paymentActions.setChargeDetails(fetchedChargeDetails))
- })
- .catch((error) => {
- const errorString = ErrorHandler(error)
- dispatch(paymentActions.setError(errorString))
- dispatch(paymentActions.setChargeDetails(null))
- })
- } else if (!chargeIdFromUrl && !chargeDetails) {
- dispatch(
- paymentActions.setError('Payment details are missing. Please go back and try again or contact support.')
- )
- }
- }, [chargeIdFromUrl, chargeDetails, dispatch])
-
- const handleRouteRefresh = useCallback(async () => {
- if (chargeDetails && selectedTokenData && selectedChainID) {
- setIsRouteExpired(false)
- const fromTokenAddress = !isUsingExternalWallet ? PEANUT_WALLET_TOKEN : selectedTokenData.address
- const fromChainId = !isUsingExternalWallet ? PEANUT_WALLET_CHAIN.id.toString() : selectedChainID
- const usdAmount =
- isDirectUsdPayment && chargeDetails.currencyCode.toLowerCase() === 'usd'
- ? chargeDetails.currencyAmount
- : undefined
- const senderAddress = isUsingExternalWallet ? wagmiAddress : peanutWalletAddress
- await prepareTransactionDetails({
- chargeDetails,
- from: {
- address: senderAddress as Address,
- tokenAddress: fromTokenAddress as Address,
- chainId: fromChainId,
- },
- usdAmount,
- disableCoral: isExternalWalletFlow && isUsingExternalWallet,
- })
- }
- }, [
- chargeDetails,
- selectedTokenData,
- selectedChainID,
- prepareTransactionDetails,
- isDirectUsdPayment,
- wagmiAddress,
- peanutWalletAddress,
- isExternalWalletFlow,
- isUsingExternalWallet,
- ])
-
- useEffect(() => {
- // get route on mount
- handleRouteRefresh()
- }, [handleRouteRefresh])
-
- const isConnected = useMemo(() => isPeanutWallet || isWagmiConnected, [isPeanutWallet, isWagmiConnected])
-
- const isLoading = useMemo(
- () => isProcessing || isPreparingTx || isCalculatingFees || isEstimatingGas,
- [isProcessing, isPreparingTx, isCalculatingFees, isEstimatingGas]
- )
-
- const isCrossChainPayment = useMemo((): boolean => {
- if (!chargeDetails) return false
- if (!isUsingExternalWallet) {
- return (
- !areEvmAddressesEqual(chargeDetails.tokenAddress, PEANUT_WALLET_TOKEN) ||
- chargeDetails.chainId !== PEANUT_WALLET_CHAIN.id.toString()
- )
- } else if (selectedTokenData && selectedChainID) {
- return (
- !areEvmAddressesEqual(chargeDetails.tokenAddress, selectedTokenData.address) ||
- chargeDetails.chainId !== selectedChainID
- )
- }
- return false
- }, [chargeDetails, selectedTokenData, selectedChainID])
-
- const routeTypeError = useMemo((): string | null => {
- // error only applies to peanut wallet flows (not external wallet) where cross-chain swap route is RFQ-required.
- if (!isCrossChainPayment || !xChainRoute || isUsingExternalWallet || !isPeanutWallet) return null
-
- // For peanut wallet flows, only RFQ routes are allowed
- if (xChainRoute.type === 'swap') {
- captureMessage('No RFQ route found for this token pair', {
- level: 'warning',
- extra: {
- flow: 'payment',
- routeObject: xChainRoute,
- },
- })
- return ROUTE_NOT_FOUND_ERROR
- }
-
- return null
- }, [isCrossChainPayment, xChainRoute, isUsingExternalWallet, isPeanutWallet])
-
- const errorMessage = useMemo((): string | undefined => {
- if (isRouteExpired) return 'This quoute has expired. Please retry to fetch latest quote.'
- return routeTypeError ?? paymentError ?? undefined
- }, [routeTypeError, paymentError, isRouteExpired])
-
- const handleGoBack = () => {
- if (isExternalWalletFlow) {
- dispatch(paymentActions.setView('INITIAL'))
- return
- }
- dispatch(paymentActions.setView('INITIAL'))
- window.history.replaceState(null, '', `${window.location.pathname}`)
- dispatch(paymentActions.setChargeDetails(null))
- dispatch(paymentActions.setError(null))
- }
-
- const handlePayment = useCallback(async () => {
- if (!chargeDetails || !parsedPaymentData) return
-
- const result = await initiatePayment({
- recipient: parsedPaymentData.recipient,
- tokenAmount: chargeDetails.tokenAmount,
- chargeId: chargeDetails.uuid,
- skipChargeCreation: true,
- currency,
- currencyAmount,
- isExternalWalletFlow,
- transactionType: isExternalWalletFlow ? 'DEPOSIT' : 'REQUEST',
- })
-
- if (result.success) {
- setTimeout(() => {
- fetchBalance()
- queryClient.invalidateQueries({ queryKey: [TRANSACTIONS] })
- }, 3000)
- triggerHaptic()
- dispatch(paymentActions.setView('STATUS'))
- }
- }, [
- chargeDetails,
- initiatePayment,
- parsedPaymentData,
- dispatch,
- fetchBalance,
- queryClient,
- currency,
- currencyAmount,
- isExternalWalletFlow,
- ])
-
- const handleRetry = useCallback(async () => {
- if (routeTypeError) {
- handleGoBack()
- } else if (isRouteExpired) {
- await handleRouteRefresh()
- } else {
- await handlePayment()
- }
- }, [handlePayment, routeTypeError, handleRouteRefresh, isRouteExpired])
-
- const getButtonText = useCallback(() => {
- const buttonText = headerTitle ? 'Send money' : 'Add Money'
- if (isProcessing) {
- if (isExternalWalletFlow) return buttonText
- return loadingStep === 'Idle' ? 'Send' : 'Sending'
- }
- if (isExternalWalletFlow) return buttonText
- if (isEstimatingGas || isCalculatingFees || isPreparingTx) return 'Send'
- return 'Send'
- }, [isProcessing, loadingStep, isPreparingTx, isEstimatingGas, isCalculatingFees, isExternalWalletFlow])
-
- const getIcon = useCallback((): IconName | undefined => {
- if (isExternalWalletFlow && headerTitle) return 'arrow-up-right'
- if (isExternalWalletFlow) return 'arrow-down'
- if (isProcessing) return undefined
- return 'arrow-up-right'
- }, [isExternalWalletFlow])
-
- const amountForDisplay = useMemo(() => {
- if (usdAmount) {
- return `$ ${formatAmount(Number(usdAmount))}`
- }
- return formatAmount(chargeDetails?.tokenAmount ?? '')
- }, [usdAmount, chargeDetails?.tokenAmount])
-
- const symbolForDisplay = useMemo(() => {
- if (usdAmount) {
- return ''
- }
- return chargeDetails?.tokenSymbol ?? ''
- }, [usdAmount, chargeDetails?.tokenSymbol])
-
- if (!chargeDetails && !paymentError) {
- return chargeIdFromUrl ? (() => {
- if (!chargeDetails?.tokenDecimals || !requestedResolvedTokenSymbol) return null
- if (!xChainRoute) {
- return `$ ${chargeDetails?.tokenAmount}`
- }
- const amount = formatAmount(
- formatUnits(BigInt(xChainRoute.rawResponse.route.estimate.toAmountMin), chargeDetails.tokenDecimals)
- )
- return isStableCoin(requestedResolvedTokenSymbol) ? `$ ${amount}` : `${amount} ${requestedResolvedTokenSymbol}`
- }, [xChainRoute, chargeDetails?.tokenDecimals, requestedResolvedTokenSymbol])
-
- return (
- (null)
- const { supportedCountries, unsupportedCountries } = getCountriesForRegion(region)
+ const { supportedCountries, limitedAccessCountries, unsupportedCountries } = getCountriesForRegion(region)
// Filter both arrays based on search term
const filteredSupportedCountries = supportedCountries.filter((country) =>
country.title.toLowerCase().includes(searchTerm.toLowerCase())
)
+ const filteredLimitedAccessCountries = limitedAccessCountries.filter((country) =>
+ country.title.toLowerCase().includes(searchTerm.toLowerCase())
+ )
+
const filteredUnsupportedCountries = unsupportedCountries.filter((country) =>
country.title.toLowerCase().includes(searchTerm.toLowerCase())
)
@@ -63,7 +70,7 @@ const IdentityVerificationCountryList = ({ region }: { region: string }) => {
value="limited-access"
title="Limited access"
description="These countries support verification, but don't have full payment support yet."
- countries={filteredUnsupportedCountries}
+ countries={filteredLimitedAccessCountries}
onCountryClick={(country) => {
// Check if country is in MantecaSupportedExchanges
const countryCode = country.iso2?.toUpperCase()
@@ -94,7 +101,52 @@ const IdentityVerificationCountryList = ({ region }: { region: string }) => {
)}
defaultOpen
/>
+
+ {filteredUnsupportedCountries.length > 0 && (
+ {
+ setSelectedUnavailableCountry(country.title)
+ setIsUnavailableModalOpen(true)
+ }}
+ rightContent={() => (
+ {
+ setSelectedUnavailableCountry(null)
+ setIsUnavailableModalOpen(false)
+ }}
+ ctas={[
+ {
+ text: 'I Understand',
+ shadowSize: '4',
+ onClick: () => {
+ setSelectedUnavailableCountry(null)
+ setIsUnavailableModalOpen(false)
+ },
+ },
+ ]}
+ />
)
}
diff --git a/src/components/Profile/components/ProfileHeader.tsx b/src/components/Profile/components/ProfileHeader.tsx
index 334330807..8bd05c492 100644
--- a/src/components/Profile/components/ProfileHeader.tsx
+++ b/src/components/Profile/components/ProfileHeader.tsx
@@ -1,4 +1,4 @@
-import { Button } from '@/components/0_Bruddle'
+import { Button } from '@/components/0_Bruddle/Button'
import { BASE_URL } from '@/components/Global/DirectSendQR/utils'
import { Icon } from '@/components/Global/Icons/Icon'
import React, { useState } from 'react'
diff --git a/src/components/Profile/components/PublicProfile.tsx b/src/components/Profile/components/PublicProfile.tsx
index 7928ea90d..ef6137a33 100644
--- a/src/components/Profile/components/PublicProfile.tsx
+++ b/src/components/Profile/components/PublicProfile.tsx
@@ -1,19 +1,17 @@
'use client'
import { HandThumbsUpV2, PEANUT_LOGO_BLACK, PEANUTMAN_LOGO } from '@/assets'
-import { Button } from '@/components/0_Bruddle'
+import { Button } from '@/components/0_Bruddle/Button'
import { Icon } from '@/components/Global/Icons/Icon'
import NavHeader from '@/components/Global/NavHeader'
import HomeHistory from '@/components/Home/HomeHistory'
-import { useAppDispatch } from '@/redux/hooks'
-import { paymentActions } from '@/redux/slices/payment-slice'
import Image from 'next/image'
import ProfileHeader from './ProfileHeader'
import { useState, useEffect, useMemo } from 'react'
import { usersApi } from '@/services/users'
import { useRouter } from 'next/navigation'
import Card from '@/components/Global/Card'
-import { checkIfInternalNavigation } from '@/utils'
+import { checkIfInternalNavigation } from '@/utils/general.utils'
import { useAuth } from '@/context/authContext'
import ShareButton from '@/components/Global/ShareButton'
import ActionModal from '@/components/Global/ActionModal'
@@ -27,7 +25,6 @@ interface PublicProfileProps {
}
const PublicProfile: React.FC
- setSearchTerm(e.target.value)}
- className="h-10 w-full rounded-sm border-[1.15px] border-black pl-10 pr-10 font-normal caret-[#FF90E8] focus:border-black focus:outline-none focus:ring-0"
- />
+ {trigger}
+
+
)}
diff --git a/src/components/LandingPage/TweetCarousel.tsx b/src/components/LandingPage/TweetCarousel.tsx
index 29b2e8ba3..5db714d10 100644
--- a/src/components/LandingPage/TweetCarousel.tsx
+++ b/src/components/LandingPage/TweetCarousel.tsx
@@ -1,8 +1,8 @@
'use client'
+import { TWEETS, type Tweet } from '@/constants/tweets.consts'
import { useMemo, useState } from 'react'
import Marquee from 'react-fast-marquee'
-import { TWEETS, type Tweet } from '@/constants'
// =============================================================================
// Constants
@@ -328,7 +328,7 @@ const buildColumns = (tweets: Tweet[]): ColumnType[] => {
* - Lazy loaded images with fallbacks
* - Links open in new tab
*/
-export const TweetCarousel = () => {
+const TweetCarousel = () => {
const columns = useMemo(() => buildColumns(TWEETS), [])
if (columns.length === 0) return null
diff --git a/src/components/LandingPage/dropLink.tsx b/src/components/LandingPage/dropLink.tsx
index d3d97a7fd..0f10006ce 100644
--- a/src/components/LandingPage/dropLink.tsx
+++ b/src/components/LandingPage/dropLink.tsx
@@ -1,7 +1,7 @@
'use client'
import Image from 'next/image'
import { motion } from 'framer-motion'
-import { Button } from '../0_Bruddle'
+import { Button } from '@/components/0_Bruddle/Button'
import iphoneDropALink from '@/assets/iphone-ss/iphone-drop-a-link.png'
import iphoneDropALinkMobile from '@/assets/iphone-ss/iphone-drop-a-link-mobile.png'
import { WHATSAPP_ICON, IMESSAGE_ICON, FBMessenger_ICON, TELEGRAM_ICON } from '@/assets/icons'
diff --git a/src/components/LandingPage/faq.tsx b/src/components/LandingPage/faq.tsx
index f47d3d668..27ec5e5de 100644
--- a/src/components/LandingPage/faq.tsx
+++ b/src/components/LandingPage/faq.tsx
@@ -2,8 +2,6 @@
import { Eyes, PeanutsBG } from '@/assets'
import { MarqueeComp } from '@/components/Global/MarqueeWrapper'
-import { Box } from '@chakra-ui/react'
-import { useState } from 'react'
import { FAQsPanel, type FAQsProps } from '../Global/FAQs'
type LocalFAQsProps = FAQsProps & {
@@ -14,14 +12,8 @@ type LocalFAQsProps = FAQsProps & {
}
export function FAQs({ heading, questions, marquee = { visible: false } }: LocalFAQsProps) {
- const [openFaq, setOpenFaq] = useState(-1)
-
- const setFaq = function (index: number) {
- setOpenFaq(openFaq === index ? -1 : index)
- }
-
return (
-
)
}
diff --git a/src/components/LandingPage/hero.tsx b/src/components/LandingPage/hero.tsx
index 89aa52feb..eb851376d 100644
--- a/src/components/LandingPage/hero.tsx
+++ b/src/components/LandingPage/hero.tsx
@@ -4,7 +4,7 @@ import { useEffect, useState } from 'react'
import { twMerge } from 'tailwind-merge'
import { CloudImages, HeroImages } from './imageAssets'
import Image from 'next/image'
-import { Button } from '../0_Bruddle'
+import { Button } from '@/components/0_Bruddle/Button'
type CTAButton = {
label: string
diff --git a/src/components/LandingPage/index.ts b/src/components/LandingPage/index.ts
index 17bdddcac..3288a182e 100644
--- a/src/components/LandingPage/index.ts
+++ b/src/components/LandingPage/index.ts
@@ -3,9 +3,7 @@ export * from './faq'
export * from './hero'
export * from './marquee'
export * from './noFees'
-export * from './nutsDivider'
export * from './securityBuiltIn'
export * from './sendInSeconds'
export * from './yourMoney'
export * from './RegulatedRails'
-export * from './TweetCarousel'
diff --git a/src/components/LandingPage/noFees.tsx b/src/components/LandingPage/noFees.tsx
index 388eb3419..4b830ac6c 100644
--- a/src/components/LandingPage/noFees.tsx
+++ b/src/components/LandingPage/noFees.tsx
@@ -1,6 +1,6 @@
'use client'
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
import { motion } from 'framer-motion'
import borderCloud from '@/assets/illustrations/border-cloud.svg'
import noHiddenFees from '@/assets/illustrations/no-hidden-fees.svg'
@@ -8,7 +8,7 @@ import { Star } from '@/assets'
import Image from 'next/image'
import ExchangeRateWidget from '../Global/ExchangeRateWidget'
import { useRouter } from 'next/navigation'
-import { printableUsdc } from '@/utils'
+import { printableUsdc } from '@/utils/balance.utils'
import { getExchangeRateWidgetRedirectRoute } from '@/utils/exchangeRateWidget.utils'
import { useWallet } from '@/hooks/wallet/useWallet'
import { useAuth } from '@/context/authContext'
diff --git a/src/components/LandingPage/nutsDivider.tsx b/src/components/LandingPage/nutsDivider.tsx
deleted file mode 100644
index 1241425e9..000000000
--- a/src/components/LandingPage/nutsDivider.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-'use client'
-
-import { Box } from '@chakra-ui/react'
-import { PeanutsBG } from '@/assets'
-
-type DividerProps = {
- height?: string
- className?: string
-}
-
-export function NutsDivider({ height = 'h-[10vw] md:h-[7vw]', className }: DividerProps) {
- const inlineStyle = {
- backgroundImage: `url(${PeanutsBG.src})`,
- backgroundSize: '8rem auto',
- backgroundRepeat: 'repeat',
- }
-
- const boxClass = `${height} grow border-4 border-n-1 bg-primary ring-2 ring-white shadow-md`
-
- return
-
-
+
+
+ setSearchTerm(e.target.value)}
+ className="h-10 w-full rounded-sm border-[1.15px] border-black pl-10 pr-10 font-normal caret-[#FF90E8] focus:border-black focus:outline-none focus:ring-0"
+ />
+
-
+
+
- {!searchTerm && (
- {
- if (!currency.comingSoon) {
- onClose()
- setSelectedCurrency(currency.currency)
- }
- }}
- />
- ))}
+ {
+ if (!currency.comingSoon) {
+ close()
+ setSelectedCurrency(currency.currency)
+ }
+ }}
+ />
+ ))}
-
-
+ - Popular currencies -
- )} - {filteredCurrencies - .filter((currency) => popularCurrencies.includes(currency.currency)) - .map((currency, index) => ( -
+ {!searchTerm && (
+ {
+ if (!currency.comingSoon) {
+ close()
+ setSelectedCurrency(currency.currency)
+ }
+ }}
+ />
+ ))}
- {!searchTerm && (
- {
- if (!currency.comingSoon) {
- onClose()
- setSelectedCurrency(currency.currency)
- }
- }}
- />
- ))}
-
+ {!searchTerm && (
+ Popular currencies
+ )} + {filteredCurrencies + .filter((currency) => popularCurrencies.includes(currency.currency)) + .map((currency, index) => ( +All currencies
- )} - {filteredCurrencies - .filter((currency) => !popularCurrencies.includes(currency.currency)) - .map((currency, index) => ( -All currencies
+ )} + {filteredCurrencies + .filter((currency) => !popularCurrencies.includes(currency.currency)) + .map((currency, index) => ( +
-
- )
- }
-
- if (isActivePeanutWallet) {
- return (
- Add funds to
-
-
-
-
- )
- }
-
- return 'Review'
- }
-
- const getButtonIcon = (): IconName | undefined => {
- if (!showRequestPotInitialView && !isExternalWalletConnected && isExternalWalletFlow) return 'wallet-outline'
-
- if (!showRequestPotInitialView && isActivePeanutWallet && isInsufficientBalanceError && !isExternalWalletFlow)
- return 'arrow-down'
-
- if (!showRequestPotInitialView && !isProcessing && isActivePeanutWallet && !isExternalWalletFlow)
- return 'arrow-up-right'
-
- return undefined
- }
-
- useEffect(() => {
- if (!inputTokenAmount) return
- if (selectedTokenData?.price) {
- const amount = parseFloat(inputTokenAmount)
- if (isNaN(amount) || amount < 0) return
-
- if (isNaN(selectedTokenData.price) || selectedTokenData.price === 0) return
-
- setUsdValue((amount * selectedTokenData.price).toString())
- }
- }, [inputTokenAmount, selectedTokenData?.price])
-
- // Initialize inputTokenAmount
- useEffect(() => {
- // skip this step for request pot payments and request pot links (charge view)
- // Amount is set by the user so we dont need to manually update it
- if (amount && !inputTokenAmount && !initialSetupDone && !showRequestPotInitialView && !isRequestPotLink) {
- setInputTokenAmount(amount)
- }
- }, [amount, inputTokenAmount, initialSetupDone, showRequestPotInitialView, isRequestPotLink])
-
- // Trigger payment with peanut from action list
- useEffect(() => {
- if (triggerPayWithPeanut) {
- handleInitiatePayment()
- setTriggerPayWithPeanut(false)
- }
- }, [triggerPayWithPeanut, handleInitiatePayment, setTriggerPayWithPeanut])
-
- const isInsufficientBalanceError = useMemo(() => {
- return error?.includes("You don't have enough balance.") || error?.includes('Insufficient balance')
- }, [error])
-
- const isButtonDisabled = useMemo(() => {
- if (isProcessing) return true
- if (isActivePeanutWallet && isInsufficientBalanceError && !isExternalWalletFlow) return false
- if (!!error) return true
-
- // ensure inputTokenAmount is a valid positive number before allowing payment
- const numericAmount = parseFloat(inputTokenAmount)
-
- if (isNaN(numericAmount) || numericAmount <= 0) {
- if (!isExternalWalletFlow) return true
- }
-
- if (isExternalWalletFlow) {
- if (!isExternalWalletConnected) return false // "Connect Wallet" button should be active
- return (
- !inputTokenAmount ||
- isNaN(parseFloat(inputTokenAmount)) ||
- parseFloat(inputTokenAmount) <= 0 ||
- !selectedTokenAddress ||
- !selectedChainID ||
- isProcessing
- )
- }
-
- if (flow === 'request_pay') return false
-
- // fallback for other cases if not explicitly handled above
- return false
- }, [
- isProcessing,
- error,
- inputTokenAmount,
- isExternalWalletFlow,
- isExternalWalletConnected,
- selectedTokenAddress,
- selectedChainID,
- isConnected,
- isActivePeanutWallet,
- ])
-
- const recipientDisplayName = useMemo(() => {
- return recipient ? recipient.identifier : 'Unknown Recipient'
- }, [recipient])
-
- const handleGoBack = () => {
- if (window.history.length > 1) {
- router.back()
- } else {
- router.push('/')
- }
- }
-
- const contributors = getContributorsFromCharge(requestDetails?.charges || [])
-
- const totalAmountCollected = requestDetails?.totalCollectedAmount ?? 0
-
- // determine when to use TokenAmountInput vs PaymentAmountInput
- // use TokenAmountInput for:
- // 1. request pot payments to usernames (typing bug fix)
- // 2. payments to ADDRESS/ENS recipients (typing bug fix)
- // note: kush to kill the annoying token amount input component
- const shouldUseTokenAmountInput = useMemo(() => {
- const isRequestPotToUsername =
- showRequestPotInitialView && recipient?.recipientType === 'USERNAME' && !!requestDetails
- const isExternalRecipient = recipient?.recipientType === 'ADDRESS' || recipient?.recipientType === 'ENS'
- return isRequestPotToUsername || isExternalRecipient
- }, [showRequestPotInitialView, recipient?.recipientType, requestDetails])
-
- const defaultSliderValue = useMemo(() => {
- const charges = requestDetails?.charges
- const totalAmount = requestDetails?.tokenAmount ? parseFloat(requestDetails.tokenAmount) : 0
- const totalCollected = totalAmountCollected
-
- if (totalAmount <= 0) return { percentage: 0, suggestedAmount: 0 }
-
- // No charges yet - suggest 100% (full pot)
- if (!charges || charges.length === 0) {
- return { percentage: 100, suggestedAmount: totalAmount }
- }
-
- // Calculate average contribution from existing charges
- const contributionAmounts = charges
- .map((charge) => parseFloat(charge.tokenAmount))
- .filter((amount) => !isNaN(amount) && amount > 0)
-
- if (contributionAmounts.length === 0) return { percentage: 0, suggestedAmount: 0 }
-
- // Check if this is an equal-split pattern (1 payment at ~33% or 2 payments at ~66%)
- const collectedPercentage = (totalCollected / totalAmount) * 100
- const isOneThirdCollected = Math.abs(collectedPercentage - 100 / 3) < 2 // ~33.33%
- const isTwoThirdsCollected = Math.abs(collectedPercentage - 200 / 3) < 2 // ~66.67%
-
- if (isOneThirdCollected || isTwoThirdsCollected) {
- // Suggest exact 33.33% to maintain equal split pattern
- const exactThird = 100 / 3
- return { percentage: exactThird, suggestedAmount: totalAmount * (exactThird / 100) }
- }
-
- // Otherwise suggest the median contribution (more robust against outliers than average)
- const sortedAmounts = [...contributionAmounts].sort((a, b) => a - b)
- const midIndex = Math.floor(sortedAmounts.length / 2)
- const suggestedAmount =
- sortedAmounts.length % 2 === 0
- ? (sortedAmounts[midIndex - 1] + sortedAmounts[midIndex]) / 2 // even: average of middle two
- : sortedAmounts[midIndex] // odd: middle value
-
- // Convert amount to percentage of total pot
- const percentage = (suggestedAmount / totalAmount) * 100
- // Cap at 100% max
- return { percentage: Math.min(percentage, 100), suggestedAmount }
- }, [requestDetails?.charges, requestDetails?.tokenAmount, totalAmountCollected])
-
- return (
- Send with
-
-
-
- setDisconnectWagmiModal(false)}
- title="Disconnect wallet?"
- description="You'll need to reconnect to continue using crypto features."
- icon="switch"
- ctaClassName="flex-row"
- hideModalCloseButton={true}
- ctas={[
- {
- text: 'Disconnect',
- onClick: () => {
- disconnectWagmi()
- setDisconnectWagmiModal(false)
- },
- shadowSize: '4',
- },
- {
- text: 'Cancel',
- onClick: () => {
- setDisconnectWagmiModal(false)
- },
- shadowSize: '4',
- className: 'bg-grey-4 hover:bg-grey-4 hover:text-black active:bg-grey-4',
- },
- ]}
- />
-
- )
-}
diff --git a/src/components/Payment/PaymentInfoRow.tsx b/src/components/Payment/PaymentInfoRow.tsx
index 19962b8cb..0e9cebade 100644
--- a/src/components/Payment/PaymentInfoRow.tsx
+++ b/src/components/Payment/PaymentInfoRow.tsx
@@ -51,7 +51,8 @@ export const PaymentInfoRow = ({
>
- {isExternalWalletConnected && isUsingExternalWallet && (
-
- )}
- {/* Recipient Info Card */}
- {recipient && !isExternalWalletFlow && (
- setInputTokenAmount(value || '')}
- setUsdValue={(value: string) => {
- setInputUsdValue(value)
- dispatch(paymentActions.setUsdAmount(value))
- }}
- setCurrencyAmount={setCurrencyAmount}
- className="w-full"
- disabled={
- !showRequestPotInitialView &&
- !isExternalWalletFlow &&
- (!!requestDetails?.tokenAmount || !!chargeDetails?.tokenAmount)
- }
- walletBalance={isActivePeanutWallet ? peanutWalletBalance : undefined}
- currency={currency}
- hideCurrencyToggle={!currency}
- hideBalance={isExternalWalletFlow}
- showSlider={showRequestPotInitialView && amount ? Number(amount) > 0 : false}
- maxAmount={showRequestPotInitialView && amount ? Number(amount) : undefined}
- amountCollected={showRequestPotInitialView ? totalAmountCollected : 0}
- defaultSliderValue={showRequestPotInitialView ? defaultSliderValue.percentage : undefined}
- defaultSliderSuggestedAmount={
- showRequestPotInitialView ? defaultSliderValue.suggestedAmount : undefined
- }
- />
- ) : (
- setInputTokenAmount(value || '')}
- setUsdValue={(value: string) => {
- setInputUsdValue(value)
- dispatch(paymentActions.setUsdAmount(value))
- }}
- setCurrencyAmount={setCurrencyAmount}
- className="w-full"
- disabled={
- !showRequestPotInitialView &&
- !isExternalWalletFlow &&
- (!!requestDetails?.tokenAmount || !!chargeDetails?.tokenAmount)
- }
- walletBalance={isActivePeanutWallet ? peanutWalletBalance : undefined}
- currency={currency}
- hideCurrencyToggle={!currency}
- hideBalance={isExternalWalletFlow}
- showSlider={showRequestPotInitialView && amount ? Number(amount) > 0 : false}
- maxAmount={showRequestPotInitialView && amount ? Number(amount) : undefined}
- amountCollected={showRequestPotInitialView ? totalAmountCollected : 0}
- defaultSliderValue={showRequestPotInitialView ? defaultSliderValue.percentage : undefined}
- defaultSliderSuggestedAmount={
- showRequestPotInitialView ? defaultSliderValue.suggestedAmount : undefined
- }
- />
- )}
-
- {/* Token selector for external ADDRESS/ENS recipients */}
- {/* only show if chain is not specified in URL */}
- {!isExternalWalletFlow &&
- !showRequestPotInitialView &&
- !chain?.chainId &&
- (recipient?.recipientType === 'ADDRESS' || recipient?.recipientType === 'ENS') &&
- isConnected && (
- dispatch(paymentActions.setAttachmentOptions(options))}
- className="h-11"
- />
- )}
-
-
-
- {showRequestPotInitialView && contributors.length > 0 && (
-
-
- )}
-
- {isDirectUsdPayment && (
-
- Use USDC on Arbitrum for free transactions!
-
- )}
-
- {(showRequestPotInitialView ||
- (isPeanutWalletConnected && (!error || isInsufficientBalanceError))) && (
-
- )}
- {isPeanutWalletConnected && error && !isInsufficientBalanceError && (
-
- )}
- {daimoError &&
-
-
- )}
-
- Contributors ({contributors.length})
- {contributors.map((contributor, index) => ( -
-
- )
- }
-
- const minReceived = useMemo
-
- )
-}
-
-interface TokenChainInfoDisplayProps {
- tokenIconUrl?: string
- chainIconUrl?: string
- resolvedTokenSymbol?: string
- fallbackTokenSymbol: string
- resolvedChainName?: string
- fallbackChainName: string
-}
-
-/**
- * Displays token and chain information with icons and names.
- * Shows token icon with chain icon as a badge overlay, along with formatted text.
- *
- * @param tokenIconUrl - URL for the token icon
- * @param chainIconUrl - URL for the chain icon (displayed as overlay)
- * @param resolvedTokenSymbol - Resolved token symbol from API
- * @param fallbackTokenSymbol - Fallback token symbol if resolution fails
- * @param resolvedChainName - Resolved chain name from API
- * @param fallbackChainName - Fallback chain name if resolution fails
- */
-function TokenChainInfoDisplay({
- tokenIconUrl,
- chainIconUrl,
- resolvedTokenSymbol,
- fallbackTokenSymbol,
- resolvedChainName,
- fallbackChainName,
-}: TokenChainInfoDisplayProps) {
- const tokenSymbol = resolvedTokenSymbol || fallbackTokenSymbol
- const chainName = resolvedChainName || fallbackChainName
-
- return (
-
- {parsedPaymentData?.recipient && (
- {
- setIsRouteExpired(true)
- }}
- disableTimerRefetch={isProcessing}
- timerError={routeTypeError}
- />
- )}
-
-
-
-
- {
- cancelPaymentOperation()
- }}
- title="Continue in your wallet"
- description="Please confirm the transaction in your wallet app to proceed."
- isLoadingIcon={true}
- preventClose={true}
- />
-
-
- {errorMessage ? (
-
- ) : (
-
- )}
- {errorMessage && (
-
-
-
- )}
-
- {(tokenIconUrl || chainIconUrl) && (
-
- )
-}
diff --git a/src/components/Payment/Views/Error.validation.view.tsx b/src/components/Payment/Views/Error.validation.view.tsx
index 48c140354..a9d8502fd 100644
--- a/src/components/Payment/Views/Error.validation.view.tsx
+++ b/src/components/Payment/Views/Error.validation.view.tsx
@@ -1,11 +1,11 @@
'use client'
import PEANUTMAN_CRY from '@/animations/GIF_ALPHA_BACKGORUND/512X512_ALPHA_GIF_konradurban_05.gif'
-import { Button } from '@/components/0_Bruddle'
+import { Button } from '@/components/0_Bruddle/Button'
import Link from 'next/link'
import Image from 'next/image'
import { useRouter } from 'next/navigation'
-import { useSupportModalContext } from '@/context/SupportModalContext'
+import { useModalsContext } from '@/context/ModalsContext'
import { useEffect, useState } from 'react'
export type ValidationErrorViewProps = {
@@ -28,7 +28,7 @@ function ValidationErrorView({
supportButtonText = 'Talk to support',
}: ValidationErrorViewProps) {
const router = useRouter()
- const { openSupportWithMessage } = useSupportModalContext()
+ const { openSupportWithMessage } = useModalsContext()
const [currentUrl, setCurrentUrl] = useState('')
useEffect(() => {
diff --git a/src/components/Payment/Views/Initial.payment.view.tsx b/src/components/Payment/Views/Initial.payment.view.tsx
deleted file mode 100644
index 09e3b16a5..000000000
--- a/src/components/Payment/Views/Initial.payment.view.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { PaymentForm, type PaymentFormProps } from '../PaymentForm'
-
-export default function InitialPaymentView(props: PaymentFormProps) {
- return (
-
- {tokenIconUrl && (
-
- )}
-
- {tokenSymbol} on {chainName}
-
-
-
- )}
-
- {depositData?.data && (
- {
- // close the modal and let the user continue with amount input
- setIsKYCModalOpen(false)
- fetchUser()
- }}
- selectedCountry={selectedCountry || argentinaCountryData}
- />
- )}
-
- )
-}
-
-export default MantecaFulfillment
diff --git a/src/components/Profile/AvatarWithBadge.tsx b/src/components/Profile/AvatarWithBadge.tsx
index 0a326da32..486562f93 100644
--- a/src/components/Profile/AvatarWithBadge.tsx
+++ b/src/components/Profile/AvatarWithBadge.tsx
@@ -1,9 +1,8 @@
-import { getInitialsFromName } from '@/utils'
+import { getInitialsFromName } from '@/utils/general.utils'
import { getColorForUsername } from '@/utils/color.utils'
import React, { useMemo } from 'react'
import { twMerge } from 'tailwind-merge'
import { Icon, type IconName } from '../Global/Icons/Icon'
-import StatusPill, { type StatusPillType } from '../Global/StatusPill'
import Image, { type StaticImageData } from 'next/image'
export type AvatarSize = 'tiny' | 'extra-small' | 'small' | 'medium' | 'large'
diff --git a/src/components/Profile/components/IdentityVerificationCountryList.tsx b/src/components/Profile/components/IdentityVerificationCountryList.tsx
index b38f5243f..4146a8dad 100644
--- a/src/components/Profile/components/IdentityVerificationCountryList.tsx
+++ b/src/components/Profile/components/IdentityVerificationCountryList.tsx
@@ -4,23 +4,30 @@ import { SearchInput } from '@/components/SearchInput'
import { getCountriesForRegion } from '@/utils/identityVerification'
import { MantecaSupportedExchanges } from '@/components/AddMoney/consts'
import StatusBadge from '@/components/Global/Badges/StatusBadge'
-import { Button } from '@/components/0_Bruddle'
+import { Button } from '@/components/0_Bruddle/Button'
import * as Accordion from '@radix-ui/react-accordion'
import { useRouter } from 'next/navigation'
import { useState } from 'react'
import CountryListSection from './CountryListSection'
+import ActionModal from '@/components/Global/ActionModal'
const IdentityVerificationCountryList = ({ region }: { region: string }) => {
const [searchTerm, setSearchTerm] = useState('')
const router = useRouter()
+ const [isUnavailableModalOpen, setIsUnavailableModalOpen] = useState(false)
+ const [selectedUnavailableCountry, setSelectedUnavailableCountry] = useState
+
+ )}
+ defaultOpen
+ />
+ )}
+
+
-
{
- // props and basic setup
- const { user, fetchUser } = useAuth()
- const { createOnramp } = useCreateOnramp()
- const { chargeDetails } = usePaymentStore()
- const { requestType } = useDetermineBankRequestType(chargeDetails?.requestLink.recipientAccount.userId ?? '')
- const [isUpdatingUser, setIsUpdatingUser] = useState(false)
- const [errorMessage, setErrorMessage] = useState(null)
- const [isUserDetailsFormValid, setIsUserDetailsFormValid] = useState(false)
- const formRef = useRef<{ handleSubmit: () => void }>(null)
- const [isKycModalOpen, setIsKycModalOpen] = useState(false)
-
- // state from the centralized context
- const {
- flowStep: requestFulfilmentBankFlowStep,
- setFlowStep: setRequestFulfilmentBankFlowStep,
- selectedCountry,
- setOnrampData,
- requesterDetails,
- showVerificationModal,
- setShowVerificationModal,
- } = useRequestFulfillmentFlow()
-
- useEffect(() => {
- if (showVerificationModal) {
- setIsKycModalOpen(true)
- }
- }, [showVerificationModal])
-
- useEffect(() => {
- if (!chargeDetails || !selectedCountry) return
- const { currency } = getCurrencyConfig(selectedCountry.id, 'onramp')
- const usdAmount = chargeDetails.tokenAmount
- const minAmount = getMinimumAmount(selectedCountry.id)
- getCurrencyPrice(currency).then((price) => {
- const currencyAmount = Number(usdAmount) * price.buy
- if (currencyAmount < minAmount) {
- setErrorMessage(`Minimum amount is ${minAmount.toFixed(2)} ${currency}`)
- } else {
- setErrorMessage(null)
- }
- })
- }, [chargeDetails, selectedCountry])
-
- const handleOnrampConfirmation = async () => {
- if (!selectedCountry) return
- setErrorMessage(null)
- try {
- let onrampDataResponse
-
- if (requestType === BankRequestType.GuestBankRequest) {
- onrampDataResponse = await createOnrampForGuest({
- amount: chargeDetails?.tokenAmount ?? '0',
- country: selectedCountry,
- userId: requesterDetails?.userId ?? '',
- chargeId: chargeDetails?.uuid,
- })
- } else {
- onrampDataResponse = await createOnramp({
- usdAmount: chargeDetails?.tokenAmount ?? '0',
- country: selectedCountry,
- chargeId: chargeDetails?.uuid,
- recipientAddress: parsedPaymentData.recipient.resolvedAddress as Address,
- })
- }
-
- if (
- requestType === BankRequestType.GuestBankRequest &&
- onrampDataResponse.data &&
- onrampDataResponse.data.transferId
- ) {
- setOnrampData(onrampDataResponse.data)
- setRequestFulfilmentBankFlowStep(RequestFulfillmentBankFlowStep.DepositBankDetails)
- } else if (onrampDataResponse.transferId) {
- setOnrampData(onrampDataResponse)
- setRequestFulfilmentBankFlowStep(RequestFulfillmentBankFlowStep.DepositBankDetails)
- } else {
- console.error('Onramp creation response issue:', onrampDataResponse)
- setRequestFulfilmentBankFlowStep(RequestFulfillmentBankFlowStep.BankCountryList)
- }
- } catch (error) {
- console.error('Failed to create onramp', error)
- setRequestFulfilmentBankFlowStep(RequestFulfillmentBankFlowStep.BankCountryList)
- }
- }
-
- const handleKycSuccess = () => {
- setShowVerificationModal(false)
- setRequestFulfilmentBankFlowStep(RequestFulfillmentBankFlowStep.BankCountryList)
- fetchUser()
- }
-
- const handleUserDetailsSubmit = async (data: UserDetailsFormData) => {
- setIsUpdatingUser(true)
- setErrorMessage(null)
- try {
- if (!user?.user.userId) throw new Error('User not found')
- const result = await updateUserById({
- userId: user.user.userId,
- fullName: `${data.fullName}`,
- email: data.email,
- })
- if (result.error) {
- throw new Error(result.error)
- }
- await fetchUser()
- setShowVerificationModal(true)
- } catch (error: any) {
- setErrorMessage(error.message)
- return { error: error.message }
- } finally {
- setIsUpdatingUser(false)
- }
- return {}
- }
-
- const [firstName, ...lastNameParts] = (user?.user.fullName ?? '').split(' ')
- const lastName = lastNameParts.join(' ')
-
- const initialUserDetails: Partial = useMemo(
- () => ({
- firstName: user?.user.fullName ? firstName : '',
- lastName: user?.user.fullName ? lastName : '',
- email: user?.user.email ?? '',
- }),
- [user?.user.fullName, user?.user.email, firstName, lastName]
- )
-
- // main render logic based on the current flow step
- if (showVerificationModal) {
- return (
- {
- setIsKycModalOpen(false)
- }}
- onKycSuccess={handleKycSuccess}
- onManualClose={() => {
- setShowVerificationModal(false)
- setRequestFulfilmentBankFlowStep(RequestFulfillmentBankFlowStep.BankCountryList)
- }}
- flow="request_fulfillment"
- />
- )
- }
-
- switch (requestFulfilmentBankFlowStep) {
- case RequestFulfillmentBankFlowStep.BankCountryList:
- return (
- {
- setRequestFulfilmentBankFlowStep(RequestFulfillmentBankFlowStep.BankCountryList)
- }}
- onConfirm={() => {
- handleOnrampConfirmation()
- }}
- amount={chargeDetails?.tokenAmount ?? '0'}
- currency={'$'}
- />
- )
- case RequestFulfillmentBankFlowStep.DepositBankDetails:
- return
+
+ )
+}
+
export default LinkSendFlowManager
diff --git a/src/components/Send/link/views/Initial.link.send.view.tsx b/src/components/Send/link/views/Initial.link.send.view.tsx
index 007b69988..a742bc933 100644
--- a/src/components/Send/link/views/Initial.link.send.view.tsx
+++ b/src/components/Send/link/views/Initial.link.send.view.tsx
@@ -3,30 +3,38 @@
import { useCreateLink } from '@/components/Create/useCreateLink'
import ErrorAlert from '@/components/Global/ErrorAlert'
import PeanutActionCard from '@/components/Global/PeanutActionCard'
-import { PEANUT_WALLET_TOKEN_DECIMALS } from '@/constants'
+import { PEANUT_WALLET_TOKEN_DECIMALS } from '@/constants/zerodev.consts'
import { TRANSACTIONS } from '@/constants/query.consts'
import { loadingStateContext } from '@/context'
+import { useLinkSendFlow } from '@/context/LinkSendFlowContext'
import { useWallet } from '@/hooks/wallet/useWallet'
-import { useAppDispatch, useSendFlowStore } from '@/redux/hooks'
-import { sendFlowActions } from '@/redux/slices/send-flow-slice'
import { sendLinksApi } from '@/services/sendLinks'
-import { ErrorHandler, printableUsdc } from '@/utils'
+import { ErrorHandler } from '@/utils/sdkErrorHandler.utils'
+import { printableUsdc } from '@/utils/balance.utils'
import { captureException } from '@sentry/nextjs'
import { useQueryClient } from '@tanstack/react-query'
import { useCallback, useContext, useEffect, useMemo } from 'react'
import { parseUnits } from 'viem'
-import { Button } from '../../../0_Bruddle'
+import { Button } from '@/components/0_Bruddle/Button'
import FileUploadInput from '../../../Global/FileUploadInput'
-import TokenAmountInput from '../../../Global/TokenAmountInput'
+import AmountInput from '../../../Global/AmountInput'
import { usePendingTransactions } from '@/hooks/wallet/usePendingTransactions'
const LinkSendInitialView = () => {
- const dispatch = useAppDispatch()
- const { attachmentOptions, errorState, tokenValue } = useSendFlowStore()
+ const {
+ attachmentOptions,
+ setAttachmentOptions,
+ errorState,
+ setErrorState,
+ tokenValue,
+ setTokenValue,
+ setLink,
+ setView,
+ } = useLinkSendFlow()
const { createLink } = useCreateLink()
- const { setLoadingState, loadingState, isLoading } = useContext(loadingStateContext)
+ const { setLoadingState, isLoading } = useContext(loadingStateContext)
const { fetchBalance, balance } = useWallet()
const queryClient = useQueryClient()
@@ -43,24 +51,19 @@ const LinkSendInitialView = () => {
setLoadingState('Loading')
// clear any previous errors
- dispatch(
- sendFlowActions.setErrorState({
- showError: false,
- errorMessage: '',
- })
- )
+ setErrorState({ showError: false, errorMessage: '' })
const { link, pubKey, chainId, contractVersion, depositIdx, txHash, amount, tokenAddress } =
await createLink(parseUnits(tokenValue!, PEANUT_WALLET_TOKEN_DECIMALS))
- dispatch(sendFlowActions.setLink(link))
- dispatch(sendFlowActions.setView('SUCCESS'))
+ setLink(link)
+ setView('SUCCESS')
fetchBalance()
queryClient.invalidateQueries({
queryKey: [TRANSACTIONS],
})
- // We dont need to wait for this to finish in order to proceed
+ // we dont need to wait for this to finish in order to proceed
setTimeout(async () => {
try {
await sendLinksApi.create({
@@ -77,7 +80,7 @@ const LinkSendInitialView = () => {
mimetype: attachmentOptions?.rawFile?.type,
})
} catch (error) {
- // We want to capture any errors here because we are already in the background
+ // we want to capture any errors here because we are already in the background
console.error(error)
captureException(error)
}
@@ -85,20 +88,26 @@ const LinkSendInitialView = () => {
} catch (error) {
// handle errors
const errorString = ErrorHandler(error)
- dispatch(
- sendFlowActions.setErrorState({
- showError: true,
- errorMessage: errorString,
- })
- )
+ setErrorState({ showError: true, errorMessage: errorString })
captureException(error)
} finally {
setLoadingState('Idle')
}
- }, [isLoading, tokenValue, createLink, fetchBalance, dispatch, queryClient, setLoadingState, attachmentOptions])
+ }, [
+ isLoading,
+ tokenValue,
+ createLink,
+ fetchBalance,
+ queryClient,
+ setLoadingState,
+ attachmentOptions,
+ setLink,
+ setView,
+ setErrorState,
+ ])
useEffect(() => {
- // Skip balance check if transaction is pending
+ // skip balance check if transaction is pending
// (balance may be optimistically updated during transaction)
// isLoading covers the createLink operation which directly uses handleSendUserOpEncoded
if (hasPendingTransactions || isLoading) {
@@ -106,43 +115,27 @@ const LinkSendInitialView = () => {
}
if (!peanutWalletBalance || !tokenValue) {
- // Clear error state when no balance or token value
- dispatch(
- sendFlowActions.setErrorState({
- showError: false,
- errorMessage: '',
- })
- )
+ // clear error state when no balance or token value
+ setErrorState({ showError: false, errorMessage: '' })
return
}
if (
parseUnits(peanutWalletBalance, PEANUT_WALLET_TOKEN_DECIMALS) <
parseUnits(tokenValue, PEANUT_WALLET_TOKEN_DECIMALS)
) {
- dispatch(
- sendFlowActions.setErrorState({
- showError: true,
- errorMessage: 'Insufficient balance',
- })
- )
+ setErrorState({ showError: true, errorMessage: 'Insufficient balance' })
} else {
- dispatch(
- sendFlowActions.setErrorState({
- showError: false,
- errorMessage: '',
- })
- )
+ setErrorState({ showError: false, errorMessage: '' })
}
- }, [peanutWalletBalance, tokenValue, dispatch, hasPendingTransactions, isLoading])
+ }, [peanutWalletBalance, tokenValue, setErrorState, hasPendingTransactions, isLoading])
return (
dispatch(sendFlowActions.setTokenValue(value))}
+
- setView('confirm')}
walletBalance={peanutWalletBalance}
hideCurrencyToggle
diff --git a/src/components/Request/link/views/Create.request.link.view.tsx b/src/components/Request/link/views/Create.request.link.view.tsx
index 80a64e634..13fc3f5e7 100644
--- a/src/components/Request/link/views/Create.request.link.view.tsx
+++ b/src/components/Request/link/views/Create.request.link.view.tsx
@@ -1,6 +1,6 @@
'use client'
import { fetchTokenDetails } from '@/app/actions/tokens'
-import { Button } from '@/components/0_Bruddle'
+import { Button } from '@/components/0_Bruddle/Button'
import { useToast } from '@/components/0_Bruddle/Toast'
import FileUploadInput from '@/components/Global/FileUploadInput'
import Loading from '@/components/Global/Loading'
@@ -8,22 +8,24 @@ import NavHeader from '@/components/Global/NavHeader'
import PeanutActionCard from '@/components/Global/PeanutActionCard'
import QRCodeWrapper from '@/components/Global/QRCodeWrapper'
import ShareButton from '@/components/Global/ShareButton'
-import TokenAmountInput from '@/components/Global/TokenAmountInput'
-import { PEANUT_WALLET_CHAIN, PEANUT_WALLET_TOKEN } from '@/constants'
+import AmountInput from '@/components/Global/AmountInput'
+import { PEANUT_WALLET_CHAIN, PEANUT_WALLET_TOKEN } from '@/constants/zerodev.consts'
import { TRANSACTIONS } from '@/constants/query.consts'
import * as context from '@/context'
import { useAuth } from '@/context/authContext'
import { useDebounce } from '@/hooks/useDebounce'
import { useWallet } from '@/hooks/wallet/useWallet'
import { type IToken } from '@/interfaces'
-import { type IAttachmentOptions } from '@/redux/types/send-flow.types'
+import { type IAttachmentOptions } from '@/interfaces/attachment'
import { requestsApi } from '@/services/requests'
-import { fetchTokenSymbol, formatTokenAmount, getRequestLink, isNativeCurrency, printableUsdc } from '@/utils'
+import { fetchTokenSymbol, formatTokenAmount, getRequestLink, isNativeCurrency } from '@/utils/general.utils'
+import { printableUsdc } from '@/utils/balance.utils'
import * as Sentry from '@sentry/nextjs'
import { interfaces as peanutInterfaces } from '@squirrel-labs/peanut-sdk'
import { useQueryClient } from '@tanstack/react-query'
import { useRouter, useSearchParams } from 'next/navigation'
import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
+import { Icon as IconComponent } from '@/components/Global/Icons/Icon'
export const CreateRequestLinkView = () => {
const toast = useToast()
@@ -354,15 +356,22 @@ export const CreateRequestLinkView = () => {
isLoading={isCreatingLink || isUpdatingRequest}
/>
-
+
+ }
/>
+ {' '} + Leave empty to let payers choose amounts. +
+
- setRequestFulfilmentBankFlowStep(RequestFulfillmentBankFlowStep.BankCountryList)}
- title="Identity Verification"
- />
-
- )
- default:
- return null
- }
-}
diff --git a/src/components/SearchInput/index.tsx b/src/components/SearchInput/index.tsx
index e00cae23f..7a482d643 100644
--- a/src/components/SearchInput/index.tsx
+++ b/src/components/SearchInput/index.tsx
@@ -1,5 +1,5 @@
import { Icon } from '@/components/Global/Icons/Icon'
-import { Button } from '../0_Bruddle'
+import { Button } from '@/components/0_Bruddle/Button'
import BaseInput from '../0_Bruddle/BaseInput'
interface SearchInputProps {
diff --git a/src/components/Send/link/LinkSendFlowManager.tsx b/src/components/Send/link/LinkSendFlowManager.tsx
index d12ea45a9..f80923780 100644
--- a/src/components/Send/link/LinkSendFlowManager.tsx
+++ b/src/components/Send/link/LinkSendFlowManager.tsx
@@ -1,22 +1,22 @@
'use client'
-import { PEANUT_WALLET_CHAIN, PEANUT_WALLET_TOKEN, SQUID_API_URL, SQUID_INTEGRATOR_ID } from '@/constants'
import { tokenSelectorContext } from '@/context'
-import { useAppDispatch, useSendFlowStore } from '@/redux/hooks'
-import { sendFlowActions } from '@/redux/slices/send-flow-slice'
-import { fetchWithSentry } from '@/utils'
+import { LinkSendFlowProvider, useLinkSendFlow } from '@/context/LinkSendFlowContext'
+import { fetchWithSentry } from '@/utils/sentry.utils'
import { useContext, useEffect } from 'react'
import NavHeader from '../../Global/NavHeader'
import LinkSendInitialView from './views/Initial.link.send.view'
import LinkSendSuccessView from './views/Success.link.send.view'
+import { SQUID_INTEGRATOR_ID, SQUID_API_URL } from '@/constants/general.consts'
+import { PEANUT_WALLET_CHAIN, PEANUT_WALLET_TOKEN } from '@/constants/zerodev.consts'
interface LinkSendFlowManagerProps {
onPrev?: () => void
}
-const LinkSendFlowManager = ({ onPrev }: LinkSendFlowManagerProps) => {
- const dispatch = useAppDispatch()
- const { view } = useSendFlowStore()
+// inner component that uses the context
+const LinkSendFlowContent = ({ onPrev }: LinkSendFlowManagerProps) => {
+ const { view, setCrossChainDetails } = useLinkSendFlow()
const { resetTokenContextProvider, setSelectedChainID, setSelectedTokenAddress } = useContext(tokenSelectorContext)
const fetchAndSetCrossChainDetails = async () => {
@@ -30,8 +30,7 @@ const LinkSendFlowManager = ({ onPrev }: LinkSendFlowManagerProps) => {
throw new Error('Squid: Network response was not ok')
}
const data = await response.json()
-
- dispatch(sendFlowActions.setCrossChainDetails(data.chains))
+ setCrossChainDetails(data.chains)
}
useEffect(() => {
@@ -61,4 +60,13 @@ const LinkSendFlowManager = ({ onPrev }: LinkSendFlowManagerProps) => {
)
}
+// wrapper component that provides the context
+const LinkSendFlowManager = ({ onPrev }: LinkSendFlowManagerProps) => {
+ return (
+
-
- Verify your details
-
diff --git a/src/components/Send/link/views/Success.link.send.view.tsx b/src/components/Send/link/views/Success.link.send.view.tsx
index 2c0a70004..e4003d405 100644
--- a/src/components/Send/link/views/Success.link.send.view.tsx
+++ b/src/components/Send/link/views/Success.link.send.view.tsx
@@ -4,14 +4,12 @@ import { Button } from '@/components/0_Bruddle/Button'
import CancelSendLinkModal from '@/components/Global/CancelSendLinkModal'
import { Icon } from '@/components/Global/Icons/Icon'
import NavHeader from '@/components/Global/NavHeader'
-import PeanutLoading from '@/components/Global/PeanutLoading'
import QRCodeWrapper from '@/components/Global/QRCodeWrapper'
import ShareButton from '@/components/Global/ShareButton'
import { SuccessViewDetailsCard } from '@/components/Global/SuccessViewComponents/SuccessViewDetailsCard'
import { useWallet } from '@/hooks/wallet/useWallet'
-import { useAppDispatch, useSendFlowStore, useUserStore } from '@/redux/hooks'
-import { sendFlowActions } from '@/redux/slices/send-flow-slice'
-import { sendLinksApi } from '@/services/sendLinks'
+import { useLinkSendFlow } from '@/context/LinkSendFlowContext'
+import { useUserStore } from '@/redux/hooks'
import { captureException } from '@sentry/nextjs'
import { useQueryClient } from '@tanstack/react-query'
import { useRouter } from 'next/navigation'
@@ -21,9 +19,8 @@ import { useToast } from '@/components/0_Bruddle/Toast'
import { TRANSACTIONS } from '@/constants/query.consts'
const LinkSendSuccessView = () => {
- const dispatch = useAppDispatch()
const router = useRouter()
- const { link, attachmentOptions, tokenValue } = useSendFlowStore()
+ const { link, attachmentOptions, tokenValue, resetLinkSendFlow } = useLinkSendFlow()
const queryClient = useQueryClient()
const { fetchBalance } = useWallet()
const { user } = useUserStore()
@@ -37,9 +34,9 @@ const LinkSendSuccessView = () => {
useEffect(() => {
return () => {
// clear state on unmount
- dispatch(sendFlowActions.resetSendFlow())
+ resetLinkSendFlow()
}
- }, [dispatch])
+ }, [resetLinkSendFlow])
return (
@@ -48,7 +45,7 @@ const LinkSendSuccessView = () => {
title="Send"
onPrev={() => {
router.push('/home')
- dispatch(sendFlowActions.resetSendFlow())
+ resetLinkSendFlow()
}}
/>
diff --git a/src/components/Send/views/Contacts.view.tsx b/src/components/Send/views/Contacts.view.tsx
index 0fd722b1f..148b4e59b 100644
--- a/src/components/Send/views/Contacts.view.tsx
+++ b/src/components/Send/views/Contacts.view.tsx
@@ -1,26 +1,32 @@
'use client'
-import { useAppDispatch } from '@/redux/hooks'
-import { sendFlowActions } from '@/redux/slices/send-flow-slice'
import { useRouter, useSearchParams } from 'next/navigation'
import NavHeader from '@/components/Global/NavHeader'
import { ActionListCard } from '@/components/ActionListCard'
import { useContacts } from '@/hooks/useContacts'
import { useInfiniteScroll } from '@/hooks/useInfiniteScroll'
-import { useMemo, useState } from 'react'
+import { useState, useEffect } from 'react'
import AvatarWithBadge from '@/components/Profile/AvatarWithBadge'
import { VerifiedUserLabel } from '@/components/UserHeader'
import { SearchInput } from '@/components/SearchInput'
import PeanutLoading from '@/components/Global/PeanutLoading'
import EmptyState from '@/components/Global/EmptyStates/EmptyState'
-import { Button } from '@/components/0_Bruddle'
+import { Button } from '@/components/0_Bruddle/Button'
+import { useDebounce } from '@/hooks/useDebounce'
+import { ContactsListSkeleton } from '@/components/Common/ContactsListSkeleton'
export default function ContactsView() {
const router = useRouter()
- const dispatch = useAppDispatch()
const searchParams = useSearchParams()
const isSendingByLink = searchParams.get('view') === 'link' || searchParams.get('createLink') === 'true'
const isSendingToContacts = searchParams.get('view') === 'contacts'
+ const [searchQuery, setSearchQuery] = useState('')
+ const [hasLoadedOnce, setHasLoadedOnce] = useState(false)
+
+ // debounce search query to avoid excessive API calls
+ const debouncedSearchQuery = useDebounce(searchQuery, 300)
+
+ // fetch contacts with server-side search
const {
contacts,
isLoading: isFetchingContacts,
@@ -29,39 +35,33 @@ export default function ContactsView() {
hasNextPage,
isFetchingNextPage,
refetch,
- } = useContacts({ limit: 50 })
- const [searchQuery, setSearchQuery] = useState('')
+ } = useContacts({
+ limit: 50,
+ search: debouncedSearchQuery || undefined,
+ })
- // infinite scroll hook - disabled when searching (search is client-side)
+ // infinite scroll hook - always enabled for server-side pagination
const { loaderRef } = useInfiniteScroll({
hasNextPage,
isFetchingNextPage,
fetchNextPage,
- enabled: !searchQuery, // disable when user is searching
+ enabled: true,
})
- // client-side search filtering
- const filteredContacts = useMemo(() => {
- if (!searchQuery.trim()) return contacts
-
- const query = searchQuery.trim().toLowerCase()
- return contacts.filter((contact) => {
- const fullName = contact.fullName?.toLowerCase() ?? ''
- return contact.username.toLowerCase().includes(query) || fullName.includes(query)
- })
- }, [contacts, searchQuery])
+ // track when we've loaded data at least once
+ useEffect(() => {
+ if (!hasLoadedOnce && !isFetchingContacts) {
+ setHasLoadedOnce(true)
+ }
+ }, [isFetchingContacts, hasLoadedOnce])
const redirectToSendByLink = () => {
- // reset send flow state when entering link creation flow
- dispatch(sendFlowActions.resetSendFlow())
router.push(`${window.location.pathname}?view=link`)
}
const handlePrev = () => {
- // reset send flow state and navigate deterministically
// when in sub-views (link or contacts), go back to base send page
// otherwise, go to home
- dispatch(sendFlowActions.resetSendFlow())
if (isSendingByLink || isSendingToContacts) {
router.push('/send')
} else {
@@ -78,7 +78,8 @@ export default function ContactsView() {
router.push(`/send/${username}`)
}
- if (isFetchingContacts) {
+ // only show full loading on initial load (before any data has been fetched)
+ if (isFetchingContacts && !hasLoadedOnce) {
return
-
- {
- transaction.extraDataForDrawer.depositInstructions
- .account_holder_name
- }
-
-
- }
- hideBottomBorder={true}
- />
- )}
) : (
/* US format (Account Number/Routing Number) */
diff --git a/src/components/TransactionDetails/transaction-details.utils.ts b/src/components/TransactionDetails/transaction-details.utils.ts
index e1b93915b..8b4af2775 100644
--- a/src/components/TransactionDetails/transaction-details.utils.ts
+++ b/src/components/TransactionDetails/transaction-details.utils.ts
@@ -7,6 +7,7 @@ export type TransactionDetailsRowKey =
| 'txId'
| 'cancelled'
| 'completed'
+ | 'refunded'
| 'exchangeRate'
| 'bankAccountDetails'
| 'transferId'
@@ -26,6 +27,7 @@ export const transactionDetailsRowKeys: TransactionDetailsRowKey[] = [
'cancelled',
'claimed',
'completed',
+ 'refunded',
'closed',
'to',
'tokenAndNetwork',
diff --git a/src/components/TransactionDetails/transactionTransformer.ts b/src/components/TransactionDetails/transactionTransformer.ts
index 0a271bdc1..9bee557d2 100644
--- a/src/components/TransactionDetails/transactionTransformer.ts
+++ b/src/components/TransactionDetails/transactionTransformer.ts
@@ -12,7 +12,7 @@ import {
} from '@/utils/general.utils'
import { type StatusPillType } from '../Global/StatusPill'
import type { Address } from 'viem'
-import { PEANUT_WALLET_CHAIN } from '@/constants'
+import { PEANUT_WALLET_CHAIN } from '@/constants/zerodev.consts'
import { type HistoryEntryPerkReward, type ChargeEntry } from '@/services/services.types'
/**
@@ -436,6 +436,9 @@ export function mapTransactionDataForDrawer(entry: HistoryEntry): MappedTransact
case 'EXPIRED':
uiStatus = 'cancelled'
break
+ case 'REFUNDED':
+ uiStatus = 'refunded'
+ break
case 'CLOSED':
// If the total amount collected is 0, the link is treated as cancelled
uiStatus = entry.totalAmountCollected === 0 ? 'cancelled' : 'closed'
diff --git a/src/components/User/UserCard.tsx b/src/components/User/UserCard.tsx
index e0a96ecb8..a6d156356 100644
--- a/src/components/User/UserCard.tsx
+++ b/src/components/User/UserCard.tsx
@@ -9,9 +9,11 @@ import AvatarWithBadge, { type AvatarSize } from '../Profile/AvatarWithBadge'
import { VerifiedUserLabel } from '../UserHeader'
import { twMerge } from 'tailwind-merge'
import ProgressBar from '../Global/ProgressBar'
+import { ContributorsDrawer } from '@/features/payments/flows/contribute-pot/components/ContributorsDrawer'
+import type { PotContributor } from '@/features/payments/flows/contribute-pot/ContributePotFlowContext'
interface UserCardProps {
- type: 'send' | 'request' | 'received_link' | 'request_pay'
+ type: 'send' | 'request' | 'received_link' | 'request_pay' | 'request_fulfilment'
username: string
fullName?: string
recipientType?: RecipientType
@@ -23,6 +25,7 @@ interface UserCardProps {
amount?: number
amountCollected?: number
isRequestPot?: boolean
+ contributors?: PotContributor[]
}
const UserCard = ({
@@ -38,11 +41,13 @@ const UserCard = ({
amount,
amountCollected,
isRequestPot,
+ contributors,
}: UserCardProps) => {
const getIcon = (): IconName | undefined => {
if (type === 'send') return 'arrow-up-right'
if (type === 'request') return 'arrow-down-left'
if (type === 'received_link') return 'arrow-down-left'
+ if (type === 'request_fulfilment') return 'arrow-up-right'
}
const getTitle = useCallback(() => {
@@ -52,7 +57,7 @@ const UserCard = ({
if (type === 'request') title = `Requesting money from`
if (type === 'received_link') title = `You received`
if (type === 'request_pay') title = `${fullName ?? username} is requesting`
-
+ if (type === 'request_fulfilment') title = `Sending ${fullName ?? username}`
return (
) => {
+ // if auth is required and user is not logged in, redirect to login
+ if (requiresAuth && !user?.user?.userId && !isFetchingUser) {
+ saveRedirectUrl()
+ router.push('/setup')
+ return
+ }
+
+ if (isLoggedIn && insufficientBalance) {
+ // save current url so back button works properly
+ saveRedirectUrl()
+ saveToLocalStorage('fromRequestFulfillment', 'true')
+ router.push('/add-money')
+ return
+ }
+
+ // otherwise call the provided onClick handler
+ onClick?.(e)
+ }
+
+ const icon = useMemo((): IconName | undefined => {
+ if (!isLoggedIn) {
+ return undefined
+ }
+ if (insufficientBalance) {
+ return 'arrow-down'
+ }
+ return 'arrow-up-right'
+ }, [isLoggedIn, insufficientBalance])
+
+ const peanutLogo = useMemo((): React.ReactNode => {
+ return (
+
+ fetchCharge: (chargeId: string) => Promise
+ setCharge: (charge: TRequestChargeResponse | null) => void
+ reset: () => void
+}
+
+export const useChargeManager = (): UseChargeManagerReturn => {
+ const [charge, setCharge] = useState(null)
+ const [isCreating, setIsCreating] = useState(false)
+ const [isFetching, setIsFetching] = useState(false)
+ const [error, setError] = useState(null)
+
+ // fetch existing charge by id
+ const fetchCharge = useCallback(async (chargeId: string): Promise => {
+ setIsFetching(true)
+ setError(null)
+
+ try {
+ const chargeDetails = await chargesApi.get(chargeId)
+ setCharge(chargeDetails)
+ return chargeDetails
+ } catch (err) {
+ const message = err instanceof Error ? err.message : 'failed to fetch charge'
+ setError(message)
+ throw err
+ } finally {
+ setIsFetching(false)
+ }
+ }, [])
+
+ // create a new charge
+ const createCharge = useCallback(async (params: CreateChargeParams): Promise => {
+ setIsCreating(true)
+ setError(null)
+
+ try {
+ // if requestId provided, validate it exists
+ let validRequestId = params.requestId
+ if (params.requestId) {
+ try {
+ const request = await requestsApi.get(params.requestId)
+ validRequestId = request.uuid
+ } catch {
+ throw new Error('invalid request id')
+ }
+ }
+
+ // build the create charge payload
+ const localPrice =
+ params.currencyAmount && params.currencyCode
+ ? { amount: params.currencyAmount, currency: params.currencyCode }
+ : { amount: params.tokenAmount, currency: 'USD' }
+
+ const createPayload: {
+ pricing_type: 'fixed_price'
+ local_price: { amount: string; currency: string }
+ baseUrl: string
+ requestId?: string
+ requestProps: {
+ chainId: string
+ tokenAmount: string
+ tokenAddress: Address
+ tokenType: peanutInterfaces.EPeanutLinkType
+ tokenSymbol: string
+ tokenDecimals: number
+ recipientAddress: Address
+ }
+ transactionType?: TChargeTransactionType
+ attachment?: File
+ reference?: string
+ mimeType?: string
+ filename?: string
+ } = {
+ pricing_type: 'fixed_price',
+ local_price: localPrice,
+ baseUrl: typeof window !== 'undefined' ? window.location.origin : '',
+ requestProps: {
+ chainId: params.chainId,
+ tokenAmount: params.tokenAmount,
+ tokenAddress: params.tokenAddress,
+ tokenType: isNativeCurrency(params.tokenAddress)
+ ? peanutInterfaces.EPeanutLinkType.native
+ : peanutInterfaces.EPeanutLinkType.erc20,
+ tokenSymbol: params.tokenSymbol,
+ tokenDecimals: params.tokenDecimals,
+ recipientAddress: params.recipientAddress,
+ },
+ transactionType: params.transactionType,
+ }
+
+ // add request id if provided
+ if (validRequestId) {
+ createPayload.requestId = validRequestId
+ }
+
+ // add attachment if present
+ if (params.attachment) {
+ createPayload.attachment = params.attachment
+ createPayload.filename = params.attachment.name
+ createPayload.mimeType = params.attachment.type
+ }
+
+ // add reference/message if present
+ if (params.reference) {
+ createPayload.reference = params.reference
+ }
+
+ // create the charge
+ const chargeResponse: TCharge = await chargesApi.create(createPayload)
+
+ if (!chargeResponse.data.id) {
+ throw new Error('charge created but missing uuid')
+ }
+
+ // fetch full charge details
+ const chargeDetails = await chargesApi.get(chargeResponse.data.id)
+ setCharge(chargeDetails)
+
+ return chargeDetails
+ } catch (err) {
+ const message = err instanceof Error ? err.message : 'failed to create charge'
+ setError(message)
+ throw err
+ } finally {
+ setIsCreating(false)
+ }
+ }, [])
+
+ // reset all state
+ const reset = useCallback(() => {
+ setCharge(null)
+ setIsCreating(false)
+ setIsFetching(false)
+ setError(null)
+ }, [])
+
+ return {
+ charge,
+ isCreating,
+ isFetching,
+ error,
+ createCharge,
+ fetchCharge,
+ setCharge,
+ reset,
+ }
+}
diff --git a/src/features/payments/shared/hooks/usePaymentRecorder.ts b/src/features/payments/shared/hooks/usePaymentRecorder.ts
new file mode 100644
index 000000000..487fd6c1f
--- /dev/null
+++ b/src/features/payments/shared/hooks/usePaymentRecorder.ts
@@ -0,0 +1,91 @@
+'use client'
+
+/**
+ * hook for recording payments to the backend after transaction execution
+ *
+ * after a blockchain transaction is confirmed, this hook notifies our backend
+ * so we can:
+ * - mark the charge as paid
+ * - update the recipient's balance/history
+ * - track cross-chain payment sources
+ *
+ * @example
+ * const { recordPayment } = usePaymentRecorder()
+ * await recordPayment({ chargeId, chainId, txHash, tokenAddress, payerAddress })
+ */
+
+import { useState, useCallback } from 'react'
+import { chargesApi } from '@/services/charges'
+import { type PaymentCreationResponse } from '@/services/services.types'
+import { type Address } from 'viem'
+
+// params for recording a payment
+export interface RecordPaymentParams {
+ chargeId: string
+ chainId: string
+ txHash: string
+ tokenAddress: Address
+ payerAddress: Address
+ // optional cross-chain source info
+ sourceChainId?: string
+ sourceTokenAddress?: string
+ sourceTokenSymbol?: string
+}
+
+// return type for the hook
+export interface UsePaymentRecorderReturn {
+ payment: PaymentCreationResponse | null
+ isRecording: boolean
+ error: string | null
+ recordPayment: (params: RecordPaymentParams) => Promise
+ reset: () => void
+}
+
+export const usePaymentRecorder = (): UsePaymentRecorderReturn => {
+ const [payment, setPayment] = useState(null)
+ const [isRecording, setIsRecording] = useState(false)
+ const [error, setError] = useState(null)
+
+ // record payment to backend
+ const recordPayment = useCallback(async (params: RecordPaymentParams): Promise => {
+ setIsRecording(true)
+ setError(null)
+
+ try {
+ const paymentResponse = await chargesApi.createPayment({
+ chargeId: params.chargeId,
+ chainId: params.chainId,
+ hash: params.txHash,
+ tokenAddress: params.tokenAddress,
+ payerAddress: params.payerAddress,
+ sourceChainId: params.sourceChainId,
+ sourceTokenAddress: params.sourceTokenAddress,
+ sourceTokenSymbol: params.sourceTokenSymbol,
+ })
+
+ setPayment(paymentResponse)
+ return paymentResponse
+ } catch (err) {
+ const message = err instanceof Error ? err.message : 'failed to record payment'
+ setError(message)
+ throw err
+ } finally {
+ setIsRecording(false)
+ }
+ }, [])
+
+ // reset state
+ const reset = useCallback(() => {
+ setPayment(null)
+ setIsRecording(false)
+ setError(null)
+ }, [])
+
+ return {
+ payment,
+ isRecording,
+ error,
+ recordPayment,
+ reset,
+ }
+}
diff --git a/src/features/payments/shared/hooks/useRouteCalculation.ts b/src/features/payments/shared/hooks/useRouteCalculation.ts
new file mode 100644
index 000000000..2f9612671
--- /dev/null
+++ b/src/features/payments/shared/hooks/useRouteCalculation.ts
@@ -0,0 +1,233 @@
+'use client'
+
+/**
+ * hook for calculating cross-chain routes and preparing transactions
+ *
+ * handles two scenarios:
+ * 1. same chain + same token: prepares a simple transfer
+ * 2. cross-chain or different token: uses squid router to find best route
+ * todo: @dev squid to be updated in deposit v2
+ *
+ * returns unsigned transactions ready to be sent via wallet
+ *
+ * @example
+ * const { calculateRoute, transactions, estimatedGasCostUsd } = useRouteCalculation()
+ * await calculateRoute({ source: { ... }, destination: { ... } })
+ */
+
+import { useState, useCallback } from 'react'
+import { parseUnits } from 'viem'
+import { type Address, type Hex } from 'viem'
+import { peanut, interfaces as peanutInterfaces } from '@squirrel-labs/peanut-sdk'
+import { getRoute, type PeanutCrossChainRoute } from '@/services/swap'
+import { estimateTransactionCostUsd } from '@/app/actions/tokens'
+import { areEvmAddressesEqual } from '@/utils/general.utils'
+import { captureException } from '@sentry/nextjs'
+
+// source token info for route calculation
+export interface RouteSourceInfo {
+ address: Address
+ tokenAddress: Address
+ chainId: string
+}
+
+// destination charge info for route calculation
+export interface RouteDestinationInfo {
+ recipientAddress: Address
+ tokenAddress: Address
+ tokenAmount: string
+ tokenDecimals: number
+ tokenType: number
+ chainId: string
+}
+
+// unsigned transaction ready for execution
+export interface PreparedTransaction {
+ to: Address
+ data?: Hex
+ value?: bigint
+}
+
+// return type for the hook
+export interface UseRouteCalculationReturn {
+ route: PeanutCrossChainRoute | null
+ transactions: PreparedTransaction[] | null
+ estimatedGasCostUsd: number | undefined
+ estimatedFromValue: string
+ slippagePercentage: number | undefined
+ isXChain: boolean
+ isDiffToken: boolean
+ isCalculating: boolean
+ isFeeEstimationError: boolean
+ error: string | null
+ calculateRoute: (params: {
+ source: RouteSourceInfo
+ destination: RouteDestinationInfo
+ usdAmount?: string
+ disableCoral?: boolean
+ skipGasEstimate?: boolean
+ }) => Promise
+ reset: () => void
+}
+
+export const useRouteCalculation = (): UseRouteCalculationReturn => {
+ const [route, setRoute] = useState(null)
+ const [transactions, setTransactions] = useState(null)
+ const [estimatedGasCostUsd, setEstimatedGasCostUsd] = useState(undefined)
+ const [estimatedFromValue, setEstimatedFromValue] = useState('0')
+ const [slippagePercentage, setSlippagePercentage] = useState(undefined)
+ const [isCalculating, setIsCalculating] = useState(false)
+ const [isFeeEstimationError, setIsFeeEstimationError] = useState(false)
+ const [error, setError] = useState(null)
+
+ // computed values
+ const [isXChain, setIsXChain] = useState(false)
+ const [isDiffToken, setIsDiffToken] = useState(false)
+
+ // calculate route for cross-chain or same-chain swap
+ const calculateRoute = useCallback(
+ async ({
+ source,
+ destination,
+ usdAmount,
+ disableCoral = false,
+ skipGasEstimate = false,
+ }: {
+ source: RouteSourceInfo
+ destination: RouteDestinationInfo
+ usdAmount?: string
+ disableCoral?: boolean
+ skipGasEstimate?: boolean
+ }) => {
+ setIsCalculating(true)
+ setError(null)
+ setIsFeeEstimationError(false)
+ setRoute(null)
+ setTransactions(null)
+ setEstimatedGasCostUsd(undefined)
+
+ try {
+ const _isXChain = source.chainId !== destination.chainId
+ const _isDiffToken = !areEvmAddressesEqual(source.tokenAddress, destination.tokenAddress)
+
+ setIsXChain(_isXChain)
+ setIsDiffToken(_isDiffToken)
+
+ if (_isXChain || _isDiffToken) {
+ // cross-chain or token swap needed
+ const amount = usdAmount
+ ? { fromUsd: usdAmount }
+ : { toAmount: parseUnits(destination.tokenAmount, destination.tokenDecimals) }
+
+ const xChainRoute = await getRoute(
+ {
+ from: source,
+ to: {
+ address: destination.recipientAddress,
+ tokenAddress: destination.tokenAddress,
+ chainId: destination.chainId,
+ },
+ ...amount,
+ },
+ { disableCoral }
+ )
+
+ if (xChainRoute.error) {
+ throw new Error(xChainRoute.error)
+ }
+
+ const slippage = Number(xChainRoute.fromAmount) / Number(destination.tokenAmount) - 1
+
+ setRoute(xChainRoute)
+ setTransactions(
+ xChainRoute.transactions.map((tx) => ({
+ to: tx.to,
+ data: tx.data,
+ value: BigInt(tx.value),
+ }))
+ )
+ setEstimatedGasCostUsd(xChainRoute.feeCostsUsd)
+ setEstimatedFromValue(xChainRoute.fromAmount)
+ setSlippagePercentage(slippage)
+ } else {
+ // same chain, same token - prepare simple transfer
+ const tx = peanut.prepareRequestLinkFulfillmentTransaction({
+ recipientAddress: destination.recipientAddress,
+ tokenAddress: destination.tokenAddress,
+ tokenAmount: destination.tokenAmount,
+ tokenDecimals: destination.tokenDecimals,
+ tokenType: destination.tokenType as peanutInterfaces.EPeanutLinkType,
+ })
+
+ if (!tx?.unsignedTx) {
+ throw new Error('failed to prepare transaction')
+ }
+
+ const preparedTx: PreparedTransaction = {
+ to: tx.unsignedTx.to as Address,
+ data: tx.unsignedTx.data as Hex | undefined,
+ value: tx.unsignedTx.value ? BigInt(tx.unsignedTx.value.toString()) : undefined,
+ }
+
+ setTransactions([preparedTx])
+ setEstimatedFromValue(destination.tokenAmount)
+ setSlippagePercentage(undefined)
+
+ // estimate gas for external wallets
+ if (!skipGasEstimate && tx.unsignedTx.from && tx.unsignedTx.to && tx.unsignedTx.data) {
+ try {
+ const gasCost = await estimateTransactionCostUsd(
+ tx.unsignedTx.from as Address,
+ tx.unsignedTx.to as Address,
+ tx.unsignedTx.data as Hex,
+ destination.chainId
+ )
+ setEstimatedGasCostUsd(gasCost)
+ } catch (gasError) {
+ captureException(gasError)
+ setIsFeeEstimationError(true)
+ }
+ } else {
+ setEstimatedGasCostUsd(0)
+ }
+ }
+ } catch (err) {
+ const message = err instanceof Error ? err.message : 'failed to calculate route'
+ setError(message)
+ setIsFeeEstimationError(true)
+ } finally {
+ setIsCalculating(false)
+ }
+ },
+ []
+ )
+
+ // reset all state
+ const reset = useCallback(() => {
+ setRoute(null)
+ setTransactions(null)
+ setEstimatedGasCostUsd(undefined)
+ setEstimatedFromValue('0')
+ setSlippagePercentage(undefined)
+ setIsXChain(false)
+ setIsDiffToken(false)
+ setIsCalculating(false)
+ setIsFeeEstimationError(false)
+ setError(null)
+ }, [])
+
+ return {
+ route,
+ transactions,
+ estimatedGasCostUsd,
+ estimatedFromValue,
+ slippagePercentage,
+ isXChain,
+ isDiffToken,
+ isCalculating,
+ isFeeEstimationError,
+ error,
+ calculateRoute,
+ reset,
+ }
+}
diff --git a/src/hooks/query/user.ts b/src/hooks/query/user.ts
index 9f08f765c..70553493e 100644
--- a/src/hooks/query/user.ts
+++ b/src/hooks/query/user.ts
@@ -1,12 +1,12 @@
-import { USER } from '@/constants'
import { type IUserProfile } from '@/interfaces'
import { useAppDispatch, useUserStore } from '@/redux/hooks'
import { userActions } from '@/redux/slices/user-slice'
-import { fetchWithSentry } from '@/utils'
+import { fetchWithSentry } from '@/utils/sentry.utils'
import { hitUserMetric } from '@/utils/metrics.utils'
import { keepPreviousData, useQuery } from '@tanstack/react-query'
import { usePWAStatus } from '../usePWAStatus'
import { useDeviceType } from '../useGetDeviceType'
+import { USER } from '@/constants/query.consts'
export const useUserQuery = (dependsOn: boolean = true) => {
const isPwa = usePWAStatus()
diff --git a/src/hooks/useAccountSetup.ts b/src/hooks/useAccountSetup.ts
index a086cc1de..c68e11af6 100644
--- a/src/hooks/useAccountSetup.ts
+++ b/src/hooks/useAccountSetup.ts
@@ -3,7 +3,8 @@ import { useRouter, useSearchParams } from 'next/navigation'
import * as Sentry from '@sentry/nextjs'
import { useAuth } from '@/context/authContext'
import { WalletProviderType } from '@/interfaces'
-import { getRedirectUrl, getValidRedirectUrl, clearRedirectUrl, clearAuthState } from '@/utils'
+import { getRedirectUrl, getValidRedirectUrl, clearRedirectUrl } from '@/utils/general.utils'
+import { clearAuthState } from '@/utils/auth.utils'
import { POST_SIGNUP_ACTIONS } from '@/components/Global/PostSignupActionManager/post-signup-action.consts'
import { useSetupStore } from '@/redux/hooks'
@@ -20,6 +21,33 @@ export const useAccountSetup = () => {
const [error, setError] = useState(null)
const [isProcessing, setIsProcessing] = useState(false)
+ const handleRedirect = () => {
+ const redirect_uri = searchParams.get('redirect_uri')
+ if (redirect_uri) {
+ const validRedirectUrl = getValidRedirectUrl(redirect_uri, '/home')
+ console.log('[useAccountSetup] Redirecting to redirect_uri:', validRedirectUrl)
+ router.push(validRedirectUrl)
+ return true
+ }
+
+ const localStorageRedirect = getRedirectUrl()
+ if (localStorageRedirect) {
+ const matchedAction = POST_SIGNUP_ACTIONS.find((action) => action.pathPattern.test(localStorageRedirect))
+ if (matchedAction) {
+ console.log('[useAccountSetup] Matched post-signup action, redirecting to /home')
+ router.push('/home')
+ } else {
+ clearRedirectUrl()
+ const validRedirectUrl = getValidRedirectUrl(localStorageRedirect, '/home')
+ console.log('[useAccountSetup] Redirecting to localStorage redirect:', validRedirectUrl)
+ router.push(validRedirectUrl)
+ }
+ } else {
+ console.log('[useAccountSetup] No redirect found, going to /home')
+ router.push('/home')
+ }
+ }
+
/**
* finalize account setup by adding account to db and navigating
*/
@@ -76,32 +104,7 @@ export const useAccountSetup = () => {
}
}
- const redirect_uri = searchParams.get('redirect_uri')
- if (redirect_uri) {
- const validRedirectUrl = getValidRedirectUrl(redirect_uri, '/home')
- console.log('[useAccountSetup] Redirecting to redirect_uri:', validRedirectUrl)
- router.push(validRedirectUrl)
- return true
- }
-
- const localStorageRedirect = getRedirectUrl()
- if (localStorageRedirect) {
- const matchedAction = POST_SIGNUP_ACTIONS.find((action) =>
- action.pathPattern.test(localStorageRedirect)
- )
- if (matchedAction) {
- console.log('[useAccountSetup] Matched post-signup action, redirecting to /home')
- router.push('/home')
- } else {
- clearRedirectUrl()
- const validRedirectUrl = getValidRedirectUrl(localStorageRedirect, '/home')
- console.log('[useAccountSetup] Redirecting to localStorage redirect:', validRedirectUrl)
- router.push(validRedirectUrl)
- }
- } else {
- console.log('[useAccountSetup] No redirect found, going to /home')
- router.push('/home')
- }
+ handleRedirect()
return true
} catch (e) {
@@ -122,5 +125,6 @@ export const useAccountSetup = () => {
isProcessing,
error,
setError,
+ handleRedirect,
}
}
diff --git a/src/hooks/useAutoTruncatedAddress.ts b/src/hooks/useAutoTruncatedAddress.ts
new file mode 100644
index 000000000..0c9156732
--- /dev/null
+++ b/src/hooks/useAutoTruncatedAddress.ts
@@ -0,0 +1,199 @@
+import { useEffect, useState, useRef, useCallback } from 'react'
+
+/** Safety margin multiplier to account for font rendering differences between canvas and DOM */
+const SAFETY_MARGIN = 0.9
+
+/**
+ * Calculates the optimal truncation for an address to fit within a container width.
+ * Returns the formatted address like "0xF3...3he7e" with dynamic character counts.
+ *
+ * Shows as many characters as fit in the container, never causing overflow.
+ *
+ * @param address - The full address to truncate
+ * @param containerWidth - Available width in pixels
+ * @param charWidth - Estimated width per character in pixels (default: 8)
+ * @returns Formatted address string
+ */
+export const formatAddressToFitWidth = (address: string, containerWidth: number, charWidth: number = 8): string => {
+ if (!address || containerWidth <= 0) return address || ''
+
+ // Apply safety margin to container width
+ const safeWidth = containerWidth * SAFETY_MARGIN
+
+ // "..." is 3 characters
+ const ellipsisWidth = charWidth * 3
+
+ // Calculate max characters that can fit (excluding ellipsis)
+ const availableWidth = safeWidth - ellipsisWidth
+ const maxChars = Math.floor(availableWidth / charWidth)
+
+ // If full address fits (with margin), return it
+ if (address.length * charWidth <= safeWidth) return address
+
+ // Calculate chars for each side (half on each side)
+ const fitsPerSide = Math.floor(maxChars / 2)
+ const charsPerSide = Math.max(1, fitsPerSide)
+
+ // Edge case: container too narrow for even minimal truncation (need at least 1+3+1=5 chars width)
+ if (maxChars < 2) {
+ return address.substring(0, Math.max(1, maxChars)) + 'โฆ'
+ }
+
+ const firstBit = address.substring(0, charsPerSide)
+ const lastBit = address.substring(address.length - charsPerSide)
+
+ return `${firstBit}...${lastBit}`
+}
+
+// Cache for measured char widths to avoid repeated DOM operations
+const charWidthCache = new WeakMap()
+
+/**
+ * Measures the approximate character width for a given element's font.
+ * Results are cached per element to avoid layout thrashing.
+ */
+const measureCharWidth = (element: HTMLElement): number => {
+ const computedStyle = window.getComputedStyle(element)
+ const fontKey = `${computedStyle.fontSize}-${computedStyle.fontFamily}-${computedStyle.fontWeight}`
+
+ // Check cache
+ const cached = charWidthCache.get(element)
+ if (cached && cached.fontKey === fontKey) {
+ return cached.width
+ }
+
+ // Measure using canvas (no DOM manipulation, much faster)
+ const canvas = document.createElement('canvas')
+ const ctx = canvas.getContext('2d')
+ if (!ctx) return 8 // Fallback
+
+ ctx.font = `${computedStyle.fontWeight} ${computedStyle.fontSize} ${computedStyle.fontFamily}`
+ const testString = '0123456789abcdefx'
+ const width = ctx.measureText(testString).width / testString.length
+
+ // Cache result
+ charWidthCache.set(element, { width, fontKey })
+
+ return width
+}
+
+interface UseAutoTruncatedAddressOptions {
+ /** @deprecated No longer used - kept for API compatibility */
+ minChars?: number
+ /** Extra padding to subtract from container width (default: 0) */
+ padding?: number
+}
+
+/**
+ * React hook that automatically truncates an address to fit within a container.
+ * Uses ResizeObserver to adapt to container size changes.
+ *
+ * @example
+ * ```tsx
+ * const { containerRef, truncatedAddress } = useAutoTruncatedAddress(depositAddress)
+ *
+ * return (
+ * (
+ address: string,
+ options: UseAutoTruncatedAddressOptions = {}
+): {
+ containerRef: (node: T | null) => void
+ truncatedAddress: string
+} => {
+ const { padding = 0 } = options
+ const elementRef = useRef(null)
+ const [truncatedAddress, setTruncatedAddress] = useState(address)
+ const resizeObserverRef = useRef(null)
+ const rafIdRef = useRef(null)
+ const lastWidthRef = useRef(0)
+
+ // Store options in refs to avoid recreating callbacks
+ const optionsRef = useRef({ padding, address })
+ optionsRef.current = { padding, address }
+
+ const updateTruncation = useCallback(() => {
+ const container = elementRef.current
+ const { address: addr, padding: pad } = optionsRef.current
+
+ if (!container || !addr) {
+ setTruncatedAddress(addr || '')
+ return
+ }
+
+ const containerWidth = container.offsetWidth - pad
+
+ // Skip if width hasn't changed (avoid unnecessary work)
+ if (containerWidth === lastWidthRef.current && truncatedAddress !== addr) {
+ return
+ }
+ lastWidthRef.current = containerWidth
+
+ const charWidth = measureCharWidth(container)
+ const formatted = formatAddressToFitWidth(addr, containerWidth, charWidth)
+
+ setTruncatedAddress(formatted)
+ }, []) // Empty deps - uses refs for values
+
+ // Debounced update using requestAnimationFrame
+ const scheduleUpdate = useCallback(() => {
+ if (rafIdRef.current) {
+ cancelAnimationFrame(rafIdRef.current)
+ }
+ rafIdRef.current = requestAnimationFrame(() => {
+ updateTruncation()
+ rafIdRef.current = null
+ })
+ }, [updateTruncation])
+
+ // Stable callback ref
+ const containerRef = useCallback(
+ (node: T | null) => {
+ // Cleanup previous observer
+ if (resizeObserverRef.current) {
+ resizeObserverRef.current.disconnect()
+ resizeObserverRef.current = null
+ }
+
+ elementRef.current = node
+
+ if (node) {
+ // Initial calculation (immediate, no debounce)
+ updateTruncation()
+
+ // Watch for container size changes (debounced)
+ resizeObserverRef.current = new ResizeObserver(scheduleUpdate)
+ resizeObserverRef.current.observe(node)
+ }
+ },
+ [updateTruncation, scheduleUpdate]
+ )
+
+ // Update when address or padding changes
+ useEffect(() => {
+ lastWidthRef.current = 0 // Reset to force recalculation
+ updateTruncation()
+ }, [address, padding, updateTruncation])
+
+ // Cleanup on unmount
+ useEffect(() => {
+ return () => {
+ if (resizeObserverRef.current) {
+ resizeObserverRef.current.disconnect()
+ }
+ if (rafIdRef.current) {
+ cancelAnimationFrame(rafIdRef.current)
+ }
+ }
+ }, [])
+
+ return {
+ containerRef,
+ truncatedAddress,
+ }
+}
diff --git a/src/hooks/useBravePWAInstallState.ts b/src/hooks/useBravePWAInstallState.ts
new file mode 100644
index 000000000..72ce6a4ce
--- /dev/null
+++ b/src/hooks/useBravePWAInstallState.ts
@@ -0,0 +1,67 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { usePWAStatus } from './usePWAStatus'
+import { BrowserType, useGetBrowserType } from './useGetBrowserType'
+
+type InstalledRelatedApp = { platform: string; url?: string; id?: string; version?: string }
+
+/**
+ * tracks whether the user is on Brave and has the Peanut PWA installed.
+ *
+ * combines:
+ * - current PWA display mode (standalone/web)
+ * - `navigator.getInstalledRelatedApps` (when available)
+ * - `appinstalled` event
+ */
+export const useBravePWAInstallState = () => {
+ const isStandalonePWA = usePWAStatus()
+ const { browserType } = useGetBrowserType()
+ const [hasInstalledRelatedApp, setHasInstalledRelatedApp] = useState(false)
+
+ useEffect(() => {
+ if (typeof window === 'undefined') return
+
+ const _navigator = window.navigator as Navigator & {
+ getInstalledRelatedApps?: () => Promise
+ }
+
+ if (typeof _navigator.getInstalledRelatedApps !== 'function') return
+
+ let cancelled = false
+
+ const checkInstallation = async () => {
+ try {
+ const installedApps = await _navigator.getInstalledRelatedApps!()
+ if (!cancelled) {
+ setHasInstalledRelatedApp(installedApps.length > 0)
+ }
+ } catch {
+ if (!cancelled) {
+ setHasInstalledRelatedApp(false)
+ }
+ }
+ }
+
+ void checkInstallation()
+
+ const handleAppInstalled = () => {
+ if (!cancelled) {
+ setHasInstalledRelatedApp(true)
+ }
+ }
+
+ window.addEventListener('appinstalled', handleAppInstalled)
+
+ return () => {
+ cancelled = true
+ window.removeEventListener('appinstalled', handleAppInstalled)
+ }
+ }, [])
+
+ const isPWAInstalled = isStandalonePWA || hasInstalledRelatedApp
+ const isBrave = browserType === BrowserType.BRAVE
+ const isBravePWAInstalled = isBrave && isPWAInstalled
+
+ return { isBrave, isPWAInstalled, isBravePWAInstalled }
+}
diff --git a/src/hooks/useBridgeKycFlow.ts b/src/hooks/useBridgeKycFlow.ts
index adbb746cc..2cde6dead 100644
--- a/src/hooks/useBridgeKycFlow.ts
+++ b/src/hooks/useBridgeKycFlow.ts
@@ -3,7 +3,7 @@ import { useRouter } from 'next/navigation'
import { type IFrameWrapperProps } from '@/components/Global/IframeWrapper'
import { useWebSocket } from '@/hooks/useWebSocket'
import { useUserStore } from '@/redux/hooks'
-import { type BridgeKycStatus, convertPersonaUrl } from '@/utils'
+import { type BridgeKycStatus, convertPersonaUrl } from '@/utils/bridge-accounts.utils'
import { type InitiateKycResponse } from '@/app/actions/types/users.types'
import { getKycDetails, updateUserById } from '@/app/actions/users'
import { type IUserKycVerification } from '@/interfaces'
diff --git a/src/hooks/useContacts.ts b/src/hooks/useContacts.ts
index 84ee7074a..9f8b70b55 100644
--- a/src/hooks/useContacts.ts
+++ b/src/hooks/useContacts.ts
@@ -8,21 +8,24 @@ export type { Contact }
interface UseContactsOptions {
limit?: number
+ search?: string
}
/**
- * hook to fetch all contacts for the current user with infinite scroll
+ * hook to fetch all contacts for the current user with infinite scroll and optional search
* includes: inviter, invitees, and all transaction counterparties (sent/received money, request pots)
+ * when search is provided, filters contacts by username or full name on the server
*/
export function useContacts(options: UseContactsOptions = {}) {
- const { limit = 50 } = options
+ const { limit = 50, search } = options
const { data, isLoading, error, fetchNextPage, hasNextPage, isFetchingNextPage, refetch } = useInfiniteQuery({
- queryKey: [CONTACTS, limit],
+ queryKey: [CONTACTS, limit, search],
queryFn: async ({ pageParam = 0 }): Promise => {
const result = await getContacts({
limit,
offset: pageParam * limit,
+ search,
})
if (result.error) {
diff --git a/src/hooks/useGetBrowserType.ts b/src/hooks/useGetBrowserType.ts
index 7b2e29c8f..2eadba972 100644
--- a/src/hooks/useGetBrowserType.ts
+++ b/src/hooks/useGetBrowserType.ts
@@ -53,17 +53,17 @@ export const useGetBrowserType = () => {
return BrowserType.SAMSUNG
}
+ // Check for Brave browser BEFORE Chrome (Brave uses Chrome UA so must check first)
+ if ((navigator as any).brave && (await (navigator as any).brave.isBrave?.()) === true) {
+ return BrowserType.BRAVE
+ }
+
// Check for Chrome (desktop and mobile)
// CriOS = Chrome on iOS
if (userAgent.includes('chrome') || userAgent.includes('crios')) {
return BrowserType.CHROME
}
- // Check for Brave browser (uses Chrome UA)
- if ((navigator as any).brave && (await (navigator as any).brave.isBrave?.()) === true) {
- return BrowserType.BRAVE
- }
-
// Check for Safari (desktop and mobile - must be last since all iOS browsers include "safari" in UA)
if (userAgent.includes('safari')) {
return BrowserType.SAFARI
diff --git a/src/hooks/useHoldToClaim.ts b/src/hooks/useHoldToClaim.ts
index 4618547ef..27acdb961 100644
--- a/src/hooks/useHoldToClaim.ts
+++ b/src/hooks/useHoldToClaim.ts
@@ -1,5 +1,5 @@
+import { PERK_HOLD_DURATION_MS } from '@/constants/general.consts'
import { useCallback, useEffect, useRef, useState } from 'react'
-import { PERK_HOLD_DURATION_MS } from '@/constants'
export type ShakeIntensity = 'none' | 'weak' | 'medium' | 'strong' | 'intense'
diff --git a/src/hooks/useHomeCarouselCTAs.tsx b/src/hooks/useHomeCarouselCTAs.tsx
index 5cc35372b..70a43822c 100644
--- a/src/hooks/useHomeCarouselCTAs.tsx
+++ b/src/hooks/useHomeCarouselCTAs.tsx
@@ -7,14 +7,11 @@ import { useNotifications } from './useNotifications'
import { useRouter } from 'next/navigation'
import useKycStatus from './useKycStatus'
import type { StaticImageData } from 'next/image'
-import { useQrCodeContext } from '@/context/QrCodeContext'
-import { getUserPreferences, updateUserPreferences } from '@/utils'
-import { DEVCONNECT_LOGO, STAR_STRAIGHT_ICON } from '@/assets'
-import { DEVCONNECT_INTENT_EXPIRY_MS } from '@/constants'
+import { useModalsContext } from '@/context/ModalsContext'
import { DeviceType, useDeviceType } from './useGetDeviceType'
import { usePWAStatus } from './usePWAStatus'
-import { useModalsContext } from '@/context/ModalsContext'
import { useGeoLocation } from './useGeoLocation'
+import { STAR_STRAIGHT_ICON } from '@/assets'
export type CarouselCTA = {
id: string
@@ -42,54 +39,9 @@ export const useHomeCarouselCTAs = () => {
const isPwa = usePWAStatus()
const { setIsIosPwaInstallModalOpen } = useModalsContext()
- const { setIsQRScannerOpen } = useQrCodeContext()
+ const { setIsQRScannerOpen } = useModalsContext()
const { countryCode: userCountryCode } = useGeoLocation()
- // --------------------------------------------------------------------------------------------------
- /**
- * check if there's a pending devconnect intent and clean up old ones
- *
- * @dev: note, this code needs to be deleted post devconnect, this is just to temporarily support onramp to devconnect wallet using bank accounts
- */
- const [pendingDevConnectIntent, setPendingDevConnectIntent] = useState<
- | {
- id: string
- recipientAddress: string
- chain: string
- amount: string
- onrampId?: string
- createdAt: number
- status: 'pending' | 'completed'
- }
- | undefined
- >(undefined)
-
- useEffect(() => {
- if (!user?.user?.userId) {
- setPendingDevConnectIntent(undefined)
- return
- }
-
- const prefs = getUserPreferences(user.user.userId)
- const intents = prefs?.devConnectIntents ?? []
-
- // clean up intents older than 7 days
- const expiryTime = Date.now() - DEVCONNECT_INTENT_EXPIRY_MS
- const recentIntents = intents.filter((intent) => intent.createdAt >= expiryTime && intent.status === 'pending')
-
- // update user preferences if we cleaned up any old intents
- if (recentIntents.length !== intents.length) {
- updateUserPreferences(user.user.userId, {
- devConnectIntents: recentIntents,
- })
- }
-
- // get the most recent pending intent (sorted by createdAt descending)
- const mostRecentIntent = recentIntents.sort((a, b) => b.createdAt - a.createdAt)[0]
- setPendingDevConnectIntent(mostRecentIntent)
- }, [user?.user?.userId])
- // --------------------------------------------------------------------------------------------------
-
const generateCarouselCTAs = useCallback(() => {
const _carouselCTAs: CarouselCTA[] = []
@@ -111,7 +63,6 @@ export const useHomeCarouselCTAs = () => {
},
})
}
-
// show notification cta only in pwa when notifications are not granted
// clicking it triggers native prompt (or shows reinstall modal if denied)
if (!isPermissionGranted && isPwa) {
@@ -190,34 +141,6 @@ export const useHomeCarouselCTAs = () => {
iconSize: 16,
})
}
- // ------------------------------------------------------------------------------------------------
-
- // ------------------------------------------------------------------------------------------------
- // add devconnect payment cta if there's a pending intent
- // @dev: note, this code needs to be deleted post devconnect, this is just to temporarily support onramp to devconnect wallet using bank accounts
- if (pendingDevConnectIntent) {
- _carouselCTAs.push({
- id: 'devconnect-payment',
- title: 'Fund your DevConnect wallet',
- description: `Deposit funds to your DevConnect wallet`,
- logo: DEVCONNECT_LOGO,
- icon: 'arrow-up-right',
- onClick: () => {
- // navigate to the semantic request flow where user can pay with peanut wallet
- const paymentUrl = `/${pendingDevConnectIntent.recipientAddress}@${pendingDevConnectIntent.chain}`
- router.push(paymentUrl)
- },
- onClose: () => {
- // remove the intent when user dismisses the cta
- if (user?.user?.userId) {
- updateUserPreferences(user.user.userId, {
- devConnectIntents: [],
- })
- }
- },
- })
- }
- // --------------------------------------------------------------------------------------------------
if (!hasKycApproval && !isUserBridgeKycUnderReview) {
_carouselCTAs.push({
@@ -242,7 +165,6 @@ export const useHomeCarouselCTAs = () => {
setCarouselCTAs(_carouselCTAs)
}, [
- pendingDevConnectIntent,
user?.user?.userId,
isPermissionGranted,
isPermissionDenied,
diff --git a/src/hooks/useLogin.tsx b/src/hooks/useLogin.tsx
index 1c4c66183..57f96abc5 100644
--- a/src/hooks/useLogin.tsx
+++ b/src/hooks/useLogin.tsx
@@ -1,7 +1,7 @@
import { useAuth } from '@/context/authContext'
import { useZeroDev } from './useZeroDev'
import { useEffect, useState } from 'react'
-import { getRedirectUrl, getValidRedirectUrl, clearRedirectUrl } from '@/utils'
+import { getRedirectUrl, getValidRedirectUrl, clearRedirectUrl } from '@/utils/general.utils'
import { useRouter, useSearchParams } from 'next/navigation'
/**
diff --git a/src/hooks/useMantecaKycFlow.ts b/src/hooks/useMantecaKycFlow.ts
index ff57a2c82..b0f0864ab 100644
--- a/src/hooks/useMantecaKycFlow.ts
+++ b/src/hooks/useMantecaKycFlow.ts
@@ -3,9 +3,9 @@ import type { IFrameWrapperProps } from '@/components/Global/IframeWrapper'
import { mantecaApi } from '@/services/manteca'
import { useAuth } from '@/context/authContext'
import { type CountryData, MantecaSupportedExchanges } from '@/components/AddMoney/consts'
-import { BASE_URL } from '@/constants'
import { MantecaKycStatus } from '@/interfaces'
import { useWebSocket } from './useWebSocket'
+import { BASE_URL } from '@/constants/general.consts'
type UseMantecaKycFlowOptions = {
onClose?: () => void
diff --git a/src/hooks/useNonEurSepaRedirect.ts b/src/hooks/useNonEurSepaRedirect.ts
deleted file mode 100644
index cf4d13395..000000000
--- a/src/hooks/useNonEurSepaRedirect.ts
+++ /dev/null
@@ -1,115 +0,0 @@
-import { useEffect, useMemo } from 'react'
-import { useRouter } from 'next/navigation'
-import {
- countryData,
- NON_EUR_SEPA_ALPHA2,
- ALL_COUNTRIES_ALPHA3_TO_ALPHA2,
- type CountryData,
-} from '@/components/AddMoney/consts'
-import countryCurrencyMappings from '@/constants/countryCurrencyMapping'
-
-interface UseNonEurSepaRedirectOptions {
- countryIdentifier?: string // the country path or code (e.g., 'united-kingdom' or 'GB')
- redirectPath?: string // redirect path on failure (e.g., '/add-money' or '/withdraw')
- shouldRedirect?: boolean // whether to actually redirect or just return the status
-}
-
-interface UseNonEurSepaRedirectResult {
- isBlocked: boolean // true if the country is a non-eur sepa country and bank operations should be blocked
- country: CountryData | null // the detected country object
-}
-
-/**
- * hook to check if a country is a non-eur sepa country and optionally redirect
- * non-eur sepa countries are those that use sepa but don't have eur as their currency
- * (e.g., poland with pln, hungary with huf, etc.)
- */
-export function useNonEurSepaRedirect({
- countryIdentifier,
- redirectPath,
- shouldRedirect = true,
-}: UseNonEurSepaRedirectOptions = {}): UseNonEurSepaRedirectResult {
- const router = useRouter()
-
- // find the country from the identifier (could be path, iso2, or iso3)
- const country = useMemo(() => {
- if (!countryIdentifier) return null
-
- // try to find by path first
- let found = countryData.find((c) => c.type === 'country' && c.path === countryIdentifier.toLowerCase())
-
- // if not found, try by iso2
- if (!found) {
- found = countryData.find(
- (c) => c.type === 'country' && c.iso2?.toLowerCase() === countryIdentifier.toLowerCase()
- )
- }
-
- // if not found, try by iso3
- if (!found) {
- found = countryData.find(
- (c) => c.type === 'country' && c.iso3?.toLowerCase() === countryIdentifier.toLowerCase()
- )
- }
-
- return found || null
- }, [countryIdentifier])
-
- // determine if the country should be blocked for bank operations
- const isBlocked = useMemo(() => {
- if (!country || country.type !== 'country') return false
-
- // get the 2-letter country code for the check
- let countryCode: string | undefined
-
- // try to get from iso2 first
- if (country.iso2) {
- countryCode = country.iso2
- }
- // otherwise try to map from iso3
- else if (country.iso3 && ALL_COUNTRIES_ALPHA3_TO_ALPHA2[country.iso3]) {
- countryCode = ALL_COUNTRIES_ALPHA3_TO_ALPHA2[country.iso3]
- }
- // fallback to id
- else {
- countryCode = country.id
- }
-
- if (!countryCode) return false
-
- // check if it's in the non-eur sepa set
- if (NON_EUR_SEPA_ALPHA2.has(countryCode)) {
- return true
- }
-
- // additional check using currency mappings
- // this catches countries where currency is not usd/eur/mxn
- const currencyMapping = countryCurrencyMappings.find(
- (currency) =>
- countryCode?.toLowerCase() === currency.country.toLowerCase() ||
- currency.path?.toLowerCase() === country.path?.toLowerCase()
- )
-
- const isNonStandardCurrency = !!(
- currencyMapping &&
- currencyMapping.currencyCode &&
- currencyMapping.currencyCode !== 'EUR' &&
- currencyMapping.currencyCode !== 'USD' &&
- currencyMapping.currencyCode !== 'MXN'
- )
-
- return isNonStandardCurrency
- }, [country])
-
- // redirect if needed
- useEffect(() => {
- if (isBlocked && shouldRedirect && redirectPath) {
- router.replace(redirectPath)
- }
- }, [isBlocked, shouldRedirect, redirectPath, router])
-
- return {
- isBlocked,
- country,
- }
-}
diff --git a/src/hooks/useNotifications.ts b/src/hooks/useNotifications.ts
index 3fdd84bbd..6388138b0 100644
--- a/src/hooks/useNotifications.ts
+++ b/src/hooks/useNotifications.ts
@@ -2,7 +2,7 @@
import { useCallback, useEffect, useRef, useState } from 'react'
import OneSignal from 'react-onesignal'
-import { getUserPreferences, updateUserPreferences } from '@/utils'
+import { getUserPreferences, updateUserPreferences } from '@/utils/general.utils'
import { useUserStore } from '@/redux/hooks'
export function useNotifications() {
diff --git a/src/hooks/usePaymentInitiator.ts b/src/hooks/usePaymentInitiator.ts
deleted file mode 100644
index 528494636..000000000
--- a/src/hooks/usePaymentInitiator.ts
+++ /dev/null
@@ -1,809 +0,0 @@
-import { PEANUT_WALLET_CHAIN, PEANUT_WALLET_TOKEN } from '@/constants'
-import { tokenSelectorContext } from '@/context'
-import { useWallet } from '@/hooks/wallet/useWallet'
-import { type ParsedURL } from '@/lib/url-parser/types/payment'
-import { useAppDispatch, usePaymentStore } from '@/redux/hooks'
-import { paymentActions } from '@/redux/slices/payment-slice'
-import { type IAttachmentOptions } from '@/redux/types/send-flow.types'
-import { chargesApi } from '@/services/charges'
-import { requestsApi } from '@/services/requests'
-import {
- type CreateChargeRequest,
- type PaymentCreationResponse,
- type TCharge,
- type TChargeTransactionType,
- type TRequestChargeResponse,
-} from '@/services/services.types'
-import { areEvmAddressesEqual, ErrorHandler, isNativeCurrency, isTxReverted } from '@/utils'
-import { useAppKitAccount } from '@reown/appkit/react'
-import { peanut, interfaces as peanutInterfaces } from '@squirrel-labs/peanut-sdk'
-import { useCallback, useContext, useEffect, useMemo, useState } from 'react'
-import { parseUnits } from 'viem'
-import type { TransactionReceipt, Address, Hex, Hash } from 'viem'
-import { useConfig, useSendTransaction, useSwitchChain, useAccount as useWagmiAccount } from 'wagmi'
-import { waitForTransactionReceipt } from 'wagmi/actions'
-import { getRoute, type PeanutCrossChainRoute } from '@/services/swap'
-import { estimateTransactionCostUsd } from '@/app/actions/tokens'
-import { captureException } from '@sentry/nextjs'
-import { useRouter } from 'next/navigation'
-
-enum ELoadingStep {
- IDLE = 'Idle',
- PREPARING_TRANSACTION = 'Preparing Transaction',
- SENDING_TRANSACTION = 'Sending Transaction',
- CONFIRMING_TRANSACTION = 'Confirming Transaction',
- UPDATING_PAYMENT_STATUS = 'Updating Payment Status',
- CHARGE_CREATED = 'Charge Created',
- ERROR = 'Error',
- SUCCESS = 'Success',
- FETCHING_CHARGE_DETAILS = 'Fetching Charge Details',
- CREATING_CHARGE = 'Creating Charge',
- SWITCHING_NETWORK = 'Switching Network',
-}
-
-type LoadingStep = `${ELoadingStep}`
-
-export interface InitiatePaymentPayload {
- recipient: ParsedURL['recipient']
- tokenAmount: string
- chargeId?: string
- skipChargeCreation?: boolean
- requestId?: string // optional request ID from URL
- currency?: {
- code: string
- symbol: string
- price: number
- }
- currencyAmount?: string
- isExternalWalletFlow?: boolean
- transactionType?: TChargeTransactionType
- attachmentOptions?: IAttachmentOptions
- returnAfterChargeCreation?: boolean
-}
-
-interface InitiationResult {
- status: string
- charge?: TRequestChargeResponse | null
- payment?: PaymentCreationResponse | null
- error?: string | null
- txHash?: string | null
- success?: boolean
-}
-
-// hook for handling payment initiation and processing
-export const usePaymentInitiator = () => {
- const dispatch = useAppDispatch()
- const { requestDetails, chargeDetails: chargeDetailsFromStore, currentView } = usePaymentStore()
- const { selectedTokenData, selectedChainID, selectedTokenAddress, setIsXChain } = useContext(tokenSelectorContext)
- const { isConnected: isPeanutWallet, address: peanutWalletAddress, sendTransactions, sendMoney } = useWallet()
- const { switchChainAsync } = useSwitchChain()
- const { address: wagmiAddress } = useAppKitAccount()
- const { sendTransactionAsync } = useSendTransaction()
- const router = useRouter()
- const config = useConfig()
- const { chain: connectedWalletChain } = useWagmiAccount()
-
- const [slippagePercentage, setSlippagePercentage] = useState(undefined)
- const [unsignedTx, setUnsignedTx] = useState(null)
- const [xChainUnsignedTxs, setXChainUnsignedTxs] = useState(
- null
- )
- const [isFeeEstimationError, setIsFeeEstimationError] = useState(false)
-
- const [isCalculatingFees, setIsCalculatingFees] = useState(false)
- const [isPreparingTx, setIsPreparingTx] = useState(false)
-
- const [estimatedGasCostUsd, setEstimatedGasCostUsd] = useState(undefined)
- const [estimatedFromValue, setEstimatedFromValue] = useState('0')
- const [loadingStep, setLoadingStep] = useState('Idle')
- const [error, setError] = useState(null)
- const [createdChargeDetails, setCreatedChargeDetails] = useState(null)
- const [transactionHash, setTransactionHash] = useState(null)
- const [paymentDetails, setPaymentDetails] = useState(null)
- const [isEstimatingGas, setIsEstimatingGas] = useState(false)
- const [xChainRoute, setXChainRoute] = useState(undefined)
-
- // use chargeDetails from the store primarily, fallback to createdChargeDetails
- const activeChargeDetails = useMemo(
- () => chargeDetailsFromStore ?? createdChargeDetails,
- [chargeDetailsFromStore, createdChargeDetails]
- )
-
- const isXChain = useMemo(() => {
- if (!activeChargeDetails || !selectedChainID) return false
- return selectedChainID !== activeChargeDetails.chainId
- }, [activeChargeDetails, selectedChainID])
-
- const diffTokens = useMemo(() => {
- if (!selectedTokenData || !activeChargeDetails) return false
- return !areEvmAddressesEqual(selectedTokenData.address, activeChargeDetails.tokenAddress)
- }, [selectedTokenData, activeChargeDetails])
-
- const isProcessing = useMemo(
- () =>
- loadingStep !== 'Idle' &&
- loadingStep !== 'Success' &&
- loadingStep !== 'Error' &&
- loadingStep !== 'Charge Created',
- [loadingStep]
- )
- const reset = useCallback(() => {
- setError(null)
- setLoadingStep('Idle')
- setIsFeeEstimationError(false)
- setIsCalculatingFees(false)
- setIsPreparingTx(false)
- setIsEstimatingGas(false)
- setUnsignedTx(null)
- setXChainUnsignedTxs(null)
- setXChainRoute(undefined)
- setEstimatedFromValue('0')
- setSlippagePercentage(undefined)
- setEstimatedGasCostUsd(undefined)
- setTransactionHash(null)
- setPaymentDetails(null)
- setCreatedChargeDetails(null)
- }, [])
-
- // reset state
- useEffect(() => {
- reset()
- }, [selectedChainID, selectedTokenAddress, requestDetails, reset])
-
- const handleError = useCallback(
- (err: unknown, step: string): InitiationResult => {
- console.error(`Error during ${step}:`, err)
- const errorMessage = ErrorHandler(err)
- setError(errorMessage)
- setLoadingStep('Error')
- if (activeChargeDetails && step !== 'Creating Charge') {
- const currentUrl = new URL(window.location.href)
- if (currentUrl.searchParams.get('chargeId') === activeChargeDetails.uuid) {
- const newUrl = new URL(window.location.href)
- newUrl.searchParams.delete('chargeId')
- // Use router.push (not window.history.replaceState) so that
- // the components using the search params will be updated
- router.push(newUrl.pathname + newUrl.search)
- }
- }
- return {
- status: 'Error',
- error: errorMessage,
- charge: activeChargeDetails,
- success: false,
- }
- },
- [activeChargeDetails, router]
- )
-
- // prepare transaction details (called from Confirm view)
- const prepareTransactionDetails = useCallback(
- async ({
- chargeDetails,
- from,
- usdAmount,
- disableCoral = false,
- }: {
- chargeDetails: TRequestChargeResponse
- from: {
- address: Address
- tokenAddress: Address
- chainId: string
- }
- usdAmount?: string
- disableCoral?: boolean
- }) => {
- setError(null)
- setIsFeeEstimationError(false)
- setUnsignedTx(null)
- setXChainUnsignedTxs(null)
- setXChainRoute(undefined)
-
- setEstimatedGasCostUsd(undefined)
-
- setIsPreparingTx(true)
-
- try {
- const _isXChain = from.chainId !== chargeDetails.chainId
- const _diffTokens = !areEvmAddressesEqual(from.tokenAddress, chargeDetails.tokenAddress)
- setIsXChain(_isXChain)
-
- if (_isXChain || _diffTokens) {
- setLoadingStep('Preparing Transaction')
- setIsCalculatingFees(true)
- const amount = usdAmount
- ? {
- fromUsd: usdAmount,
- }
- : {
- toAmount: parseUnits(chargeDetails.tokenAmount, chargeDetails.tokenDecimals),
- }
- const xChainRoute = await getRoute(
- {
- from,
- to: {
- address: chargeDetails.requestLink.recipientAddress as Address,
- tokenAddress: chargeDetails.tokenAddress as Address,
- chainId: chargeDetails.chainId,
- },
- ...amount,
- },
- { disableCoral }
- )
-
- if (xChainRoute.error) throw new Error(xChainRoute.error)
-
- const slippagePercentage = Number(xChainRoute.fromAmount) / Number(chargeDetails.tokenAmount) - 1
- setXChainRoute(xChainRoute)
- setXChainUnsignedTxs(
- xChainRoute.transactions.map((tx) => ({
- to: tx.to,
- data: tx.data,
- value: BigInt(tx.value),
- }))
- )
- setIsCalculatingFees(false)
- setEstimatedGasCostUsd(xChainRoute.feeCostsUsd)
- setEstimatedFromValue(xChainRoute.fromAmount)
- setSlippagePercentage(slippagePercentage)
- } else {
- setLoadingStep('Preparing Transaction')
- const tx = peanut.prepareRequestLinkFulfillmentTransaction({
- recipientAddress: chargeDetails.requestLink.recipientAddress,
- tokenAddress: chargeDetails.tokenAddress,
- tokenAmount: chargeDetails.tokenAmount,
- tokenDecimals: chargeDetails.tokenDecimals,
- tokenType: Number(chargeDetails.tokenType) as peanutInterfaces.EPeanutLinkType,
- })
-
- if (!tx?.unsignedTx) {
- throw new Error('Failed to prepare transaction')
- }
-
- setIsCalculatingFees(true)
- let gasCost = 0
- if (!isPeanutWallet) {
- try {
- gasCost = await estimateTransactionCostUsd(
- tx.unsignedTx.from! as Address,
- tx.unsignedTx.to! as Address,
- tx.unsignedTx.data! as Hex,
- chargeDetails.chainId
- )
- } catch (error) {
- captureException(error)
- setIsFeeEstimationError(true)
- }
- }
- setEstimatedGasCostUsd(gasCost)
- setIsCalculatingFees(false)
- setUnsignedTx(tx.unsignedTx)
- setEstimatedFromValue(chargeDetails.tokenAmount)
- setSlippagePercentage(undefined)
- }
- setLoadingStep('Idle')
- } catch (err) {
- console.error('Error preparing transaction details:', err)
- const errorMessage = ErrorHandler(err)
- setError(errorMessage)
- setIsFeeEstimationError(true)
- setLoadingStep('Error')
- } finally {
- setIsPreparingTx(false)
- }
- },
- [setIsXChain, isPeanutWallet]
- )
-
- // helper function: determine charge details (fetch or create)
- const determineChargeDetails = useCallback(
- async (
- payload: InitiatePaymentPayload
- ): Promise<{ chargeDetails: TRequestChargeResponse; chargeCreated: boolean }> => {
- let chargeDetailsToUse: TRequestChargeResponse | null = null
- let chargeCreated = false
-
- if (payload.chargeId) {
- chargeDetailsToUse = activeChargeDetails
- if (!chargeDetailsToUse || chargeDetailsToUse.uuid !== payload.chargeId) {
- setLoadingStep('Fetching Charge Details')
- chargeDetailsToUse = await chargesApi.get(payload.chargeId)
- setCreatedChargeDetails(chargeDetailsToUse)
- }
- } else {
- setLoadingStep('Creating Charge')
- let validRequestId: string | undefined = payload.requestId
-
- if (payload.requestId) {
- try {
- const request = await requestsApi.get(payload.requestId)
- validRequestId = request.uuid
- } catch (error) {
- console.error('Invalid request ID provided:', payload.requestId, error)
- throw new Error('Invalid request ID')
- }
- } else if (!requestDetails) {
- console.error('Request details not found and cannot create new one for this payment type.')
- throw new Error('Request details not found.')
- } else {
- validRequestId = requestDetails.uuid
- }
-
- if (!validRequestId) {
- console.error('Could not determine request ID for charge creation.')
- throw new Error('Could not determine request ID')
- }
-
- const recipientChainId = requestDetails?.chainId ?? selectedChainID
- const recipientTokenAddress = requestDetails?.tokenAddress ?? selectedTokenAddress
- const recipientTokenSymbol = requestDetails?.tokenSymbol ?? selectedTokenData?.symbol ?? 'TOKEN'
- const recipientTokenDecimals = requestDetails?.tokenDecimals ?? selectedTokenData?.decimals ?? 18
-
- const localPrice =
- payload.currencyAmount && payload.currency
- ? { amount: payload.currencyAmount, currency: payload.currency.code }
- : { amount: payload.tokenAmount, currency: 'USD' }
- const createChargeRequestPayload: CreateChargeRequest = {
- pricing_type: 'fixed_price',
- local_price: localPrice,
- baseUrl: window.location.origin,
- requestId: validRequestId,
- requestProps: {
- chainId: recipientChainId,
- tokenAmount: payload.tokenAmount,
- tokenAddress: recipientTokenAddress,
- tokenType: isNativeCurrency(recipientTokenAddress)
- ? peanutInterfaces.EPeanutLinkType.native
- : peanutInterfaces.EPeanutLinkType.erc20,
- tokenSymbol: recipientTokenSymbol,
- tokenDecimals: Number(recipientTokenDecimals),
- recipientAddress: payload.recipient?.resolvedAddress,
- },
- transactionType: payload.transactionType,
- }
-
- // add attachment if present
- if (payload.attachmentOptions?.rawFile) {
- createChargeRequestPayload.attachment = payload.attachmentOptions.rawFile
- createChargeRequestPayload.filename = payload.attachmentOptions.rawFile.name
- }
- if (payload.attachmentOptions?.message) {
- createChargeRequestPayload.reference = payload.attachmentOptions.message
- }
-
- if (payload.attachmentOptions?.rawFile?.type) {
- createChargeRequestPayload.mimeType = payload.attachmentOptions.rawFile.type
- }
-
- console.log('Creating charge with payload:', createChargeRequestPayload)
- const charge: TCharge = await chargesApi.create(createChargeRequestPayload)
- console.log('Charge created response:', charge)
-
- if (!charge.data.id) {
- console.error('CRITICAL: Charge created but UUID (ID) is missing!', charge.data)
- throw new Error('Charge created successfully, but is missing a UUID.')
- }
-
- // fetch the charge using the correct ID field from the response
- chargeDetailsToUse = await chargesApi.get(charge.data.id)
- console.log('Fetched charge details:', chargeDetailsToUse)
-
- dispatch(paymentActions.setChargeDetails(chargeDetailsToUse))
- setCreatedChargeDetails(chargeDetailsToUse) // keep track of the newly created charge
- chargeCreated = true
-
- // update URL
- const currentUrl = new URL(window.location.href)
- if (currentUrl.searchParams.get('chargeId') !== chargeDetailsToUse.uuid) {
- const newUrl = new URL(window.location.href)
- if (payload.requestId) newUrl.searchParams.delete('id')
- newUrl.searchParams.set('chargeId', chargeDetailsToUse.uuid)
- // Use router.push (not window.history.replaceState) so that
- // the components using the search params will be updated
- router.push(newUrl.pathname + newUrl.search)
- console.log('Updated URL with chargeId:', newUrl.href)
- }
- }
-
- // ensure we have charge details to proceed
- if (!chargeDetailsToUse) {
- console.error('Charge details are null after determination step.')
- throw new Error('Failed to load or create charge details.')
- }
-
- return { chargeDetails: chargeDetailsToUse, chargeCreated }
- },
- [dispatch, requestDetails, activeChargeDetails, selectedTokenData, selectedChainID, selectedTokenAddress]
- )
-
- // helper function: Handle Peanut Wallet payment
- const handlePeanutWalletPayment = useCallback(
- async (chargeDetails: TRequestChargeResponse): Promise => {
- setLoadingStep('Preparing Transaction')
-
- // validate required properties for preparing the transaction.
- if (
- !chargeDetails.requestLink?.recipientAddress ||
- !chargeDetails.tokenAddress ||
- !chargeDetails.tokenAmount ||
- chargeDetails.tokenDecimals === undefined ||
- chargeDetails.tokenType === undefined
- ) {
- console.error('Charge data is missing required properties for transaction preparation:', chargeDetails)
- throw new Error('Charge data is missing required properties for transaction preparation.')
- }
-
- let receipt: TransactionReceipt | null
- let userOpHash: Hash
- const transactionsToSend = xChainUnsignedTxs ?? (unsignedTx ? [unsignedTx] : null)
- if (transactionsToSend && transactionsToSend.length > 0) {
- setLoadingStep('Sending Transaction')
- const txResult = await sendTransactions(transactionsToSend, PEANUT_WALLET_CHAIN.id.toString())
- receipt = txResult.receipt
- userOpHash = txResult.userOpHash
- } else if (
- areEvmAddressesEqual(chargeDetails.tokenAddress, PEANUT_WALLET_TOKEN) &&
- chargeDetails.chainId === PEANUT_WALLET_CHAIN.id.toString()
- ) {
- const txResult = await sendMoney(
- chargeDetails.requestLink.recipientAddress as `0x${string}`,
- chargeDetails.tokenAmount
- )
- receipt = txResult.receipt
- userOpHash = txResult.userOpHash
- } else {
- console.error('No transaction prepared to send for peanut wallet.')
- throw new Error('No transaction prepared to send.')
- }
-
- // validation of the received receipt.
- if (receipt !== null && isTxReverted(receipt)) {
- console.error('Transaction reverted according to receipt:', receipt)
- throw new Error(`Transaction failed (reverted). Hash: ${receipt.transactionHash}`)
- }
-
- const txHash = receipt?.transactionHash ?? userOpHash
- // update payment status in the backend api.
- setLoadingStep('Updating Payment Status')
- // peanut wallet flow: payer is the peanut wallet itself
- const payment: PaymentCreationResponse = await chargesApi.createPayment({
- chargeId: chargeDetails.uuid,
- chainId: PEANUT_WALLET_CHAIN.id.toString(),
- hash: txHash,
- tokenAddress: PEANUT_WALLET_TOKEN,
- payerAddress: peanutWalletAddress ?? '',
- })
- console.log('Backend payment creation response:', payment)
-
- setPaymentDetails(payment)
- dispatch(paymentActions.setPaymentDetails(payment))
- dispatch(paymentActions.setTransactionHash(txHash))
-
- setLoadingStep('Success')
- console.log('Peanut Wallet payment successful.')
- return { status: 'Success', charge: chargeDetails, payment, txHash: txHash, success: true }
- },
- [sendTransactions, xChainUnsignedTxs, unsignedTx, peanutWalletAddress]
- )
-
- // helper function: Handle External Wallet payment
- const handleExternalWalletPayment = useCallback(
- async (chargeDetails: TRequestChargeResponse): Promise => {
- const sourceChainId = Number(selectedChainID)
- const connectedChainId = connectedWalletChain?.id
- console.log(`Selected chain: ${sourceChainId}, Connected chain: ${connectedChainId}`)
-
- if (connectedChainId !== undefined && sourceChainId !== connectedChainId) {
- console.log(`Switching network from ${connectedChainId} to ${sourceChainId}`)
- setLoadingStep('Switching Network')
- try {
- await switchChainAsync({ chainId: sourceChainId })
- console.log(`Network switched successfully to ${sourceChainId}`)
- } catch (switchError: any) {
- console.error('Wallet network switch failed:', switchError)
- const message =
- switchError.shortMessage ||
- `Failed to switch network to chain ${sourceChainId}. Please switch manually in your wallet.`
- throw new Error(message) // throw error, to be caught by main initiatePayment function
- }
- }
-
- const transactionsToSend = xChainUnsignedTxs ?? (unsignedTx ? [unsignedTx] : null)
- if (!transactionsToSend || transactionsToSend.length === 0) {
- console.error('No transaction prepared to send for external wallet.')
- throw new Error('No transaction prepared to send.')
- }
- console.log('Transactions prepared for sending:', transactionsToSend)
-
- let receipt: TransactionReceipt
- const receipts: TransactionReceipt[] = []
- let currentStep = 'Sending Transaction'
-
- try {
- for (let i = 0; i < transactionsToSend.length; i++) {
- const tx = transactionsToSend[i]
- console.log(`Sending transaction ${i + 1}/${transactionsToSend.length}:`, tx)
- setLoadingStep(`Sending Transaction`)
- currentStep = 'Sending Transaction'
-
- const txGasOptions: any = {}
- console.log('Using gas options:', txGasOptions)
-
- const hash = await sendTransactionAsync({
- to: (tx.to ? tx.to : undefined) as `0x${string}` | undefined,
- value: tx.value ? BigInt(tx.value.toString()) : undefined,
- data: tx.data ? (tx.data as `0x${string}`) : undefined,
- ...txGasOptions,
- chainId: sourceChainId,
- })
- console.log(`Transaction ${i + 1} hash: ${hash}`)
-
- setLoadingStep(`Confirming Transaction`)
- currentStep = 'Confirming Transaction'
-
- const txReceipt = await waitForTransactionReceipt(config, {
- hash: hash,
- chainId: sourceChainId,
- confirmations: 1,
- })
- console.log(`Transaction ${i + 1} receipt:`, txReceipt)
- receipts.push(txReceipt)
-
- if (isTxReverted(txReceipt)) {
- console.error(`Transaction ${i + 1} reverted:`, txReceipt)
- throw new Error(`Transaction ${i + 1} failed (reverted).`)
- }
- }
- // check if receipts were actually generated
- if (receipts.length === 0 || !receipts[receipts.length - 1]) {
- console.error('Transaction sequence completed, but failed to get final receipt.')
- throw new Error('Transaction sent but failed to get receipt.')
- }
- receipt = receipts[receipts.length - 1] // use the last receipt
- } catch (txError: any) {
- // re-throw the error with the current step context
- console.error(`Transaction failed during ${currentStep}:`, txError)
- throw txError
- }
-
- const txHash = receipt.transactionHash
- setTransactionHash(txHash)
- dispatch(paymentActions.setTransactionHash(txHash))
- console.log('External wallet final transaction hash:', txHash)
-
- setLoadingStep('Updating Payment Status')
- console.log('Updating payment status in backend for external wallet. Hash:', txHash)
- // external wallet / add-money flow: payer is the connected wallet address
- const payment = await chargesApi.createPayment({
- chargeId: chargeDetails.uuid,
- chainId: sourceChainId.toString(),
- hash: txHash,
- tokenAddress: selectedTokenData?.address || chargeDetails.tokenAddress,
- payerAddress: wagmiAddress ?? '',
- })
- console.log('Backend payment creation response:', payment)
-
- setPaymentDetails(payment)
- dispatch(paymentActions.setPaymentDetails(payment))
-
- setLoadingStep('Success')
- console.log('External wallet payment successful.')
- return { status: 'Success', charge: chargeDetails, payment, txHash, success: true }
- },
- [
- dispatch,
- selectedChainID,
- connectedWalletChain,
- switchChainAsync,
- xChainUnsignedTxs,
- unsignedTx,
- sendTransactionAsync,
- config,
- selectedTokenData,
- wagmiAddress,
- ]
- )
-
- // @dev TODO: Refactor to TanStack Query mutation for architectural consistency
- // Current: This async function works correctly (protected by isProcessing state)
- // but is NOT tracked by usePendingTransactions mutation system.
- // Future improvement: Wrap in useMutation for consistency with other balance-decreasing ops.
- // mutationKey: [BALANCE_DECREASE, INITIATE_PAYMENT]
- // Complexity: HIGH - complex state/Redux integration. Low priority.
- //
- // initiate and process payments
- const initiatePayment = useCallback(
- async (payload: InitiatePaymentPayload): Promise => {
- setLoadingStep('Idle')
- setError(null)
- setTransactionHash(null)
- setPaymentDetails(null)
-
- let determinedChargeDetails: TRequestChargeResponse | null = null
- let chargeCreated = false
-
- try {
- // 1. determine Charge Details
- const { chargeDetails, chargeCreated: created } = await determineChargeDetails(payload)
- determinedChargeDetails = chargeDetails
- chargeCreated = created
- console.log('Proceeding with charge details:', determinedChargeDetails.uuid)
-
- // 2. handle charge state
- if (
- payload.returnAfterChargeCreation || // For request pot payment, return after charge creation
- (chargeCreated &&
- (payload.isExternalWalletFlow ||
- !isPeanutWallet ||
- (isPeanutWallet &&
- (!areEvmAddressesEqual(determinedChargeDetails.tokenAddress, PEANUT_WALLET_TOKEN) ||
- determinedChargeDetails.chainId !== PEANUT_WALLET_CHAIN.id.toString()))))
- ) {
- console.log(
- `Charge created. Transitioning to Confirm view for: ${
- payload.isExternalWalletFlow ? 'Add Money Flow' : 'External Wallet'
- }.`
- )
- setLoadingStep('Charge Created')
- return { status: 'Charge Created', charge: determinedChargeDetails, success: false }
- }
-
- // 3. if user is on the initial screen and chargeid is present, execute the handle charge state flow
- if (payload.isExternalWalletFlow && currentView === 'INITIAL' && payload.chargeId) {
- console.log('Executing add money flow: ChargeID already exists')
- setLoadingStep('Charge Created')
-
- return { status: 'Charge Created', charge: determinedChargeDetails, success: false }
- }
-
- // 4. execute payment based on wallet type
- if (payload.isExternalWalletFlow) {
- if (!wagmiAddress) {
- console.error('Add Money flow requires an external wallet (WAGMI) to be connected.')
- throw new Error('External wallet not connected for Add Money flow.')
- }
- console.log('Executing External Wallet transaction for Add Money flow.')
- // Ensure charge details are passed, even if just created.
- if (!determinedChargeDetails)
- throw new Error('Charge details missing for Add Money external payment.')
- return await handleExternalWalletPayment(determinedChargeDetails)
- } else if (isPeanutWallet && peanutWalletAddress) {
- console.log(`Executing Peanut Wallet transaction (chargeCreated: ${chargeCreated})`)
- return await handlePeanutWalletPayment(determinedChargeDetails)
- } else if (!isPeanutWallet) {
- console.log('Handling payment for External Wallet (non-AddMoney, called from Confirm view).')
- if (!determinedChargeDetails) throw new Error('Charge details missing for External Wallet payment.')
- return await handleExternalWalletPayment(determinedChargeDetails)
- } else {
- console.error('Invalid payment state: Could not determine wallet type or required action.')
- throw new Error('Invalid payment state: Could not determine wallet type or required action.')
- }
- } catch (err) {
- // Ensure chargeId is removed from URL if error occurs after creation attempt
- if (chargeCreated && determinedChargeDetails) {
- console.log('Error occurred after charge creation, removing chargeId from URL.')
- const currentUrl = new URL(window.location.href)
- if (currentUrl.searchParams.get('chargeId') === determinedChargeDetails.uuid) {
- const newUrl = new URL(window.location.href)
- newUrl.searchParams.delete('chargeId')
- // Use router.push (not window.history.replaceState) so that
- // the components using the search params will be updated
- router.push(newUrl.pathname + newUrl.search)
- console.log('URL updated, chargeId removed.')
- }
- }
- // handleError already logs the error and sets state
- return handleError(err, loadingStep)
- }
- },
- [
- determineChargeDetails,
- handlePeanutWalletPayment,
- handleExternalWalletPayment,
- isPeanutWallet,
- peanutWalletAddress,
- wagmiAddress,
- handleError,
- setLoadingStep,
- setError,
- router,
- setTransactionHash,
- setPaymentDetails,
- loadingStep,
- ]
- )
-
- const cancelOperation = useCallback(() => {
- setError('Please confirm the request in your wallet.')
- setLoadingStep('Error')
- }, [setError, setLoadingStep])
-
- const initiateDaimoPayment = useCallback(
- async (payload: InitiatePaymentPayload) => {
- try {
- console.log('handleDaimoPayment', payload)
- let determinedChargeDetails: TRequestChargeResponse | null = null
- const { chargeDetails } = await determineChargeDetails(payload)
-
- determinedChargeDetails = chargeDetails
- console.log('Proceeding with charge details:', determinedChargeDetails.uuid)
- return { status: 'Charge Created', charge: determinedChargeDetails, success: false }
- } catch (err) {
- return handleError(err, loadingStep)
- }
- },
- [determineChargeDetails, setLoadingStep, setPaymentDetails]
- )
-
- const completeDaimoPayment = useCallback(
- async ({
- chargeDetails,
- destinationchainId,
- txHash,
- payerAddress,
- sourceChainId,
- sourceTokenAddress,
- sourceTokenSymbol,
- }: {
- chargeDetails: TRequestChargeResponse
- txHash: string
- destinationchainId: number
- payerAddress: string
- sourceChainId: number
- sourceTokenAddress: string
- sourceTokenSymbol: string
- }) => {
- try {
- setLoadingStep('Updating Payment Status')
- const payment = await chargesApi.createPayment({
- chargeId: chargeDetails.uuid,
- chainId: destinationchainId.toString(),
- hash: txHash,
- tokenAddress: chargeDetails.tokenAddress,
- payerAddress,
- sourceChainId: sourceChainId?.toString(),
- sourceTokenAddress,
- sourceTokenSymbol,
- })
-
- setPaymentDetails(payment)
- dispatch(paymentActions.setPaymentDetails(payment))
-
- setLoadingStep('Success')
- console.log('Daimo payment successful.')
- return { status: 'Success', charge: chargeDetails, payment, txHash, success: true }
- } catch (err) {
- return handleError(err, loadingStep)
- }
- },
- [determineChargeDetails, setLoadingStep, setPaymentDetails]
- )
-
- return {
- initiatePayment,
- prepareTransactionDetails,
- isProcessing,
- isPreparingTx,
- loadingStep,
- setLoadingStep,
- error,
- activeChargeDetails,
- transactionHash,
- paymentDetails,
- slippagePercentage,
- estimatedFromValue,
- xChainUnsignedTxs,
- estimatedGasCostUsd,
- unsignedTx,
- isCalculatingFees,
- isFeeEstimationError,
- isEstimatingGas,
- isXChain,
- diffTokens,
- cancelOperation,
- xChainRoute,
- reset,
- completeDaimoPayment,
- initiateDaimoPayment,
- }
-}
diff --git a/src/hooks/useRedirectQrStatus.ts b/src/hooks/useRedirectQrStatus.ts
index ee299f592..732cca469 100644
--- a/src/hooks/useRedirectQrStatus.ts
+++ b/src/hooks/useRedirectQrStatus.ts
@@ -1,5 +1,5 @@
import { useQuery } from '@tanstack/react-query'
-import { PEANUT_API_URL } from '@/constants'
+import { PEANUT_API_URL } from '@/constants/general.consts'
interface RedirectQrStatusData {
claimed: boolean
diff --git a/src/hooks/useTokenPrice.ts b/src/hooks/useTokenPrice.ts
index 8ad152162..da78ac6ab 100644
--- a/src/hooks/useTokenPrice.ts
+++ b/src/hooks/useTokenPrice.ts
@@ -1,18 +1,17 @@
import { useQuery } from '@tanstack/react-query'
import { fetchTokenPrice } from '@/app/actions/tokens'
import {
+ PEANUT_WALLET_CHAIN,
PEANUT_WALLET_TOKEN,
PEANUT_WALLET_TOKEN_DECIMALS,
PEANUT_WALLET_TOKEN_SYMBOL,
PEANUT_WALLET_TOKEN_NAME,
- PEANUT_WALLET_CHAIN,
PEANUT_WALLET_TOKEN_IMG_URL,
- STABLE_COINS,
- supportedMobulaChains,
-} from '@/constants'
+} from '@/constants/zerodev.consts'
import { type ITokenPriceData } from '@/interfaces'
import * as Sentry from '@sentry/nextjs'
import { interfaces } from '@squirrel-labs/peanut-sdk'
+import { STABLE_COINS, supportedMobulaChains } from '@/constants/general.consts'
interface UseTokenPriceParams {
tokenAddress: string | undefined
diff --git a/src/hooks/useTransactionHistory.ts b/src/hooks/useTransactionHistory.ts
index 87f078dbf..dbf841f7b 100644
--- a/src/hooks/useTransactionHistory.ts
+++ b/src/hooks/useTransactionHistory.ts
@@ -1,11 +1,11 @@
-import { PEANUT_API_URL } from '@/constants'
import { TRANSACTIONS } from '@/constants/query.consts'
-import { fetchWithSentry } from '@/utils'
+import { fetchWithSentry } from '@/utils/sentry.utils'
import type { InfiniteData, InfiniteQueryObserverResult, QueryObserverResult } from '@tanstack/react-query'
import { useInfiniteQuery, useQuery } from '@tanstack/react-query'
import Cookies from 'js-cookie'
import { completeHistoryEntry } from '@/utils/history.utils'
import type { HistoryEntry } from '@/utils/history.utils'
+import { PEANUT_API_URL } from '@/constants/general.consts'
//TODO: remove and import all from utils everywhere
export { EHistoryEntryType, EHistoryUserRole } from '@/utils/history.utils'
diff --git a/src/hooks/useUserByUsername.ts b/src/hooks/useUserByUsername.ts
index 2661a4fc7..4d1ebe77a 100644
--- a/src/hooks/useUserByUsername.ts
+++ b/src/hooks/useUserByUsername.ts
@@ -8,7 +8,7 @@ import { type ApiUser, usersApi } from '@/services/users'
*/
export const useUserByUsername = (username: string | null | undefined) => {
const [user, setUser] = useState(null)
- const [isLoading, setIsLoading] = useState(false)
+ const [isLoading, setIsLoading] = useState(!!username)
const [error, setError] = useState(null)
useEffect(() => {
diff --git a/src/hooks/useZeroDev.ts b/src/hooks/useZeroDev.ts
index c7cb01450..c8518ecd6 100644
--- a/src/hooks/useZeroDev.ts
+++ b/src/hooks/useZeroDev.ts
@@ -6,7 +6,8 @@ import { useAuth } from '@/context/authContext'
import { useKernelClient } from '@/context/kernelClient.context'
import { useAppDispatch, useSetupStore, useZerodevStore } from '@/redux/hooks'
import { zerodevActions } from '@/redux/slices/zerodev-slice'
-import { getFromCookie, removeFromCookie, saveToCookie, clearAuthState } from '@/utils'
+import { getFromCookie, removeFromCookie, saveToCookie } from '@/utils/general.utils'
+import { clearAuthState } from '@/utils/auth.utils'
import { toWebAuthnKey, WebAuthnMode } from '@zerodev/passkey-validator'
import { useCallback, useContext } from 'react'
import type { TransactionReceipt, Hex, Hash } from 'viem'
diff --git a/src/hooks/wallet/__tests__/useSendMoney.test.tsx b/src/hooks/wallet/__tests__/useSendMoney.test.tsx
index 89c32dc9a..d8fe210f3 100644
--- a/src/hooks/wallet/__tests__/useSendMoney.test.tsx
+++ b/src/hooks/wallet/__tests__/useSendMoney.test.tsx
@@ -8,16 +8,16 @@
* 4. Balance invalidation on success
*/
-import { renderHook, waitFor } from '@testing-library/react'
+import { renderHook, waitFor, act } from '@testing-library/react'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { ToastProvider } from '@/components/0_Bruddle/Toast'
import { useSendMoney } from '../useSendMoney'
import { parseUnits } from 'viem'
-import { PEANUT_WALLET_TOKEN_DECIMALS } from '@/constants'
+import { PEANUT_WALLET_TOKEN_DECIMALS } from '@/constants/zerodev.consts'
import type { ReactNode } from 'react'
// Mock dependencies
-jest.mock('@/constants', () => ({
+jest.mock('@/constants/zerodev.consts', () => ({
PEANUT_WALLET_TOKEN: '0x1234567890123456789012345678901234567890',
PEANUT_WALLET_TOKEN_DECIMALS: 6,
PEANUT_WALLET_CHAIN: { id: 137 },
@@ -72,20 +72,18 @@ describe('useSendMoney', () => {
{ wrapper }
)
- // Trigger mutation
- const promise = result.current.mutateAsync({
- toAddress: '0x9999999999999999999999999999999999999999' as `0x${string}`,
- amountInUsd: amountToSend,
- })
-
- // Check optimistic update happened immediately
- await waitFor(() => {
- const currentBalance = queryClient.getQueryData(['balance', mockAddress])
- const expectedBalance = initialBalance - parseUnits(amountToSend, PEANUT_WALLET_TOKEN_DECIMALS)
- expect(currentBalance).toEqual(expectedBalance)
+ // Trigger mutation and wait for completion
+ await act(async () => {
+ await result.current.mutateAsync({
+ toAddress: '0x9999999999999999999999999999999999999999' as `0x${string}`,
+ amountInUsd: amountToSend,
+ })
})
- await promise
+ // After successful mutation, balance should reflect the deduction
+ const currentBalance = queryClient.getQueryData(['balance', mockAddress])
+ const expectedBalance = initialBalance - parseUnits(amountToSend, PEANUT_WALLET_TOKEN_DECIMALS)
+ expect(currentBalance).toEqual(expectedBalance)
})
it('should NOT optimistically update balance when insufficient balance (prevents underflow)', async () => {
diff --git a/src/hooks/wallet/useBalance.ts b/src/hooks/wallet/useBalance.ts
index ef6a89fa4..2d5611a28 100644
--- a/src/hooks/wallet/useBalance.ts
+++ b/src/hooks/wallet/useBalance.ts
@@ -1,7 +1,8 @@
+import { PEANUT_WALLET_TOKEN } from '@/constants/zerodev.consts'
+import { peanutPublicClient } from '@/app/actions/clients'
import { useQuery } from '@tanstack/react-query'
import { erc20Abi } from 'viem'
import type { Address } from 'viem'
-import { PEANUT_WALLET_TOKEN, peanutPublicClient } from '@/constants'
/**
* Hook to fetch and auto-refresh wallet balance using TanStack Query
diff --git a/src/hooks/wallet/useSendMoney.ts b/src/hooks/wallet/useSendMoney.ts
index 2e4d5e9a0..d64ce3a07 100644
--- a/src/hooks/wallet/useSendMoney.ts
+++ b/src/hooks/wallet/useSendMoney.ts
@@ -1,7 +1,7 @@
import { useMutation, useQueryClient } from '@tanstack/react-query'
import { parseUnits, encodeFunctionData, erc20Abi } from 'viem'
import type { Address, Hash, Hex, TransactionReceipt } from 'viem'
-import { PEANUT_WALLET_TOKEN, PEANUT_WALLET_TOKEN_DECIMALS, PEANUT_WALLET_CHAIN } from '@/constants'
+import { PEANUT_WALLET_CHAIN, PEANUT_WALLET_TOKEN, PEANUT_WALLET_TOKEN_DECIMALS } from '@/constants/zerodev.consts'
import { TRANSACTIONS, BALANCE_DECREASE, SEND_MONEY } from '@/constants/query.consts'
import { useToast } from '@/components/0_Bruddle/Toast'
diff --git a/src/hooks/wallet/useWallet.ts b/src/hooks/wallet/useWallet.ts
index 361c23b38..64c796e38 100644
--- a/src/hooks/wallet/useWallet.ts
+++ b/src/hooks/wallet/useWallet.ts
@@ -1,16 +1,17 @@
'use client'
-import { PEANUT_WALLET_CHAIN } from '@/constants'
+import { PEANUT_WALLET_CHAIN, PEANUT_WALLET_TOKEN_DECIMALS } from '@/constants/zerodev.consts'
import { useAppDispatch, useWalletStore } from '@/redux/hooks'
import { walletActions } from '@/redux/slices/wallet-slice'
import { interfaces as peanutInterfaces } from '@squirrel-labs/peanut-sdk'
-import { useCallback, useEffect } from 'react'
-import type { Hex, Address } from 'viem'
+import { useCallback, useEffect, useMemo } from 'react'
+import { formatUnits, type Hex, type Address } from 'viem'
import { useZeroDev } from '../useZeroDev'
import { useAuth } from '@/context/authContext'
import { AccountType } from '@/interfaces'
import { useBalance } from './useBalance'
import { useSendMoney as useSendMoneyMutation } from './useSendMoney'
+import { formatCurrency } from '@/utils/general.utils'
export const useWallet = () => {
const dispatch = useAppDispatch()
@@ -89,9 +90,29 @@ export const useWallet = () => {
// consider balance as fetching until: address is validated and query has resolved
const isBalanceLoading = !isAddressReady || isFetchingBalance
+ // formatted balance for display (e.g. "1,234.56")
+ const formattedBalance = useMemo(() => {
+ if (balance === undefined) return '0.00'
+ return formatCurrency(formatUnits(balance, PEANUT_WALLET_TOKEN_DECIMALS))
+ }, [balance])
+
+ // check if wallet has sufficient balance for a given usd amount
+ const hasSufficientBalance = useCallback(
+ (amountUsd: string | number): boolean => {
+ if (balance === undefined) return false
+ const amount = typeof amountUsd === 'string' ? parseFloat(amountUsd) : amountUsd
+ if (isNaN(amount) || amount < 0) return false
+ const amountInWei = BigInt(Math.floor(amount * 10 ** PEANUT_WALLET_TOKEN_DECIMALS))
+ return balance >= amountInWei
+ },
+ [balance]
+ )
+
return {
address: isAddressReady ? address : undefined, // populate address only if it is validated and matches the user's wallet address
balance,
+ formattedBalance,
+ hasSufficientBalance,
isConnected: isKernelClientReady,
sendTransactions,
sendMoney,
diff --git a/src/interfaces/attachment.ts b/src/interfaces/attachment.ts
new file mode 100644
index 000000000..9b6e0864f
--- /dev/null
+++ b/src/interfaces/attachment.ts
@@ -0,0 +1,11 @@
+/**
+ * shared attachment options type used across payment flows
+ *
+ * allows users to attach a message and/or file to payments.
+ * fileUrl is the uploaded url, rawFile is the original file object.
+ */
+export interface IAttachmentOptions {
+ fileUrl: string | undefined
+ message: string | undefined
+ rawFile: File | undefined
+}
diff --git a/src/interfaces/interfaces.ts b/src/interfaces/interfaces.ts
index 27b19a490..6d8df29c1 100644
--- a/src/interfaces/interfaces.ts
+++ b/src/interfaces/interfaces.ts
@@ -1,8 +1,10 @@
-import { type BridgeKycStatus } from '@/utils'
import { interfaces as peanutInterfaces } from '@squirrel-labs/peanut-sdk'
export type RecipientType = 'address' | 'ens' | 'iban' | 'us' | 'username'
+// Moved here from bridge-accounts.utils.ts to avoid circular dependency
+export type BridgeKycStatus = 'not_started' | 'under_review' | 'approved' | 'rejected' | 'incomplete'
+
export interface IResponse {
success: boolean
data?: any
diff --git a/src/interfaces/wallet.interfaces.ts b/src/interfaces/wallet.interfaces.ts
index 505a8aed6..dcdbd4479 100644
--- a/src/interfaces/wallet.interfaces.ts
+++ b/src/interfaces/wallet.interfaces.ts
@@ -1,10 +1,11 @@
-import * as interfaces from '@/interfaces'
-
// based on API AccountType
+
+import { AccountType, type IUserBalance } from './interfaces'
+
// https://github.com/peanutprotocol/peanut-api-ts/blob/b32570b7bd366efed7879f607040c511fa036a57/src/db/interfaces/account.ts
export enum WalletProviderType {
- PEANUT = interfaces.AccountType.PEANUT_WALLET,
- BYOW = interfaces.AccountType.EVM_ADDRESS,
+ PEANUT = AccountType.PEANUT_WALLET,
+ BYOW = AccountType.EVM_ADDRESS,
REWARDS = 'rewards',
}
@@ -34,7 +35,7 @@ export interface IWallet extends IDBWallet {
id: string
connected: boolean
balance: bigint
- balances?: interfaces.IUserBalance[]
+ balances?: IUserBalance[]
}
export enum WalletErrorType {
diff --git a/src/lib/url-parser/parser.ts b/src/lib/url-parser/parser.ts
index 0cd0c247b..f04feeb0b 100644
--- a/src/lib/url-parser/parser.ts
+++ b/src/lib/url-parser/parser.ts
@@ -1,5 +1,5 @@
import { getSquidChainsAndTokens } from '@/app/actions/squid'
-import { PEANUT_WALLET_CHAIN, PEANUT_WALLET_TOKEN } from '@/constants'
+import { PEANUT_WALLET_CHAIN, PEANUT_WALLET_TOKEN } from '@/constants/zerodev.consts'
import { interfaces } from '@squirrel-labs/peanut-sdk'
import { validateAmount } from '../validation/amount'
import { validateAndResolveRecipient } from '../validation/recipient'
@@ -159,23 +159,13 @@ export async function parsePaymentURL(
tokenDetails = chainDetails.tokens.find((t) => t.symbol.toLowerCase() === 'USDC'.toLowerCase())
}
- // 6. Determine if this is a DevConnect flow
- // @dev: note, this needs to be deleted post devconnect
- // devconnect flow: external address + base chain specified in URL
- const isDevConnectFlow =
- recipientDetails.recipientType === 'ADDRESS' &&
- chainId !== undefined &&
- chainId.toLowerCase() === 'base' &&
- chainDetails !== undefined
-
- // 7. Construct and return the final result
+ // 6. Construct and return the final result
return {
parsedUrl: {
recipient: recipientDetails,
amount: parsedAmount?.amount,
token: tokenDetails,
chain: chainDetails,
- isDevConnectFlow,
},
error: null,
}
diff --git a/src/lib/url-parser/types/payment.ts b/src/lib/url-parser/types/payment.ts
index 37f7d46ce..1c7a9b31e 100644
--- a/src/lib/url-parser/types/payment.ts
+++ b/src/lib/url-parser/types/payment.ts
@@ -13,6 +13,4 @@ export interface ParsedURL {
amount?: string
token?: interfaces.ISquidToken
chain?: interfaces.ISquidChain & { tokens: interfaces.ISquidToken[] }
- /** @dev: flag indicating if this is a devconnect flow (external address + base chain), to be deleted post devconnect */
- isDevConnectFlow?: boolean
}
diff --git a/src/lib/validation/recipient.test.ts b/src/lib/validation/recipient.test.ts
index 41788ee76..ceae06feb 100644
--- a/src/lib/validation/recipient.test.ts
+++ b/src/lib/validation/recipient.test.ts
@@ -13,11 +13,11 @@ jest.mock('@/app/actions/ens', () => ({
},
}))
-jest.mock('@/utils', () => ({
+jest.mock('@/utils/sentry.utils', () => ({
fetchWithSentry: jest.fn(),
}))
-jest.mock('@/constants', () => ({
+jest.mock('@/constants/general.consts', () => ({
JUSTANAME_ENS: 'testvc.eth',
PEANUT_API_URL: process.env.NEXT_PUBLIC_PEANUT_API_URL,
}))
@@ -78,7 +78,7 @@ describe('Recipient Validation', () => {
it('should throw for invalid Peanut usernames', async () => {
// Mock failed API response
- const fetchWithSentry = require('@/utils').fetchWithSentry
+ const { fetchWithSentry } = require('@/utils/sentry.utils')
fetchWithSentry.mockResolvedValueOnce({ status: 404 })
await expect(validateAndResolveRecipient('lmaoo')).rejects.toThrow('Invalid Peanut username')
@@ -92,7 +92,7 @@ describe('Recipient Validation', () => {
describe('verifyPeanutUsername', () => {
it('should return true for valid usernames', async () => {
- const fetchWithSentry = require('@/utils').fetchWithSentry
+ const { fetchWithSentry } = require('@/utils/sentry.utils')
fetchWithSentry.mockResolvedValueOnce({ status: 200 })
const result = await verifyPeanutUsername('kusharc')
@@ -100,7 +100,7 @@ describe('Recipient Validation', () => {
})
it('should return false for invalid usernames', async () => {
- const fetchWithSentry = require('@/utils').fetchWithSentry
+ const { fetchWithSentry } = require('@/utils/sentry.utils')
fetchWithSentry.mockResolvedValueOnce({ status: 404 })
const result = await verifyPeanutUsername('invaliduser')
@@ -108,7 +108,7 @@ describe('Recipient Validation', () => {
})
it('should handle API errors gracefully', async () => {
- const fetchWithSentry = require('@/utils').fetchWithSentry
+ const { fetchWithSentry } = require('@/utils/sentry.utils')
fetchWithSentry.mockRejectedValueOnce(new Error('API Error'))
const result = await verifyPeanutUsername('someuser')
diff --git a/src/lib/validation/recipient.ts b/src/lib/validation/recipient.ts
index e7427c33a..429f3dcab 100644
--- a/src/lib/validation/recipient.ts
+++ b/src/lib/validation/recipient.ts
@@ -1,13 +1,14 @@
import { isAddress } from 'viem'
import { resolveEns } from '@/app/actions/ens'
-import { PEANUT_API_URL } from '@/constants'
+
import { AccountType } from '@/interfaces'
import { usersApi } from '@/services/users'
-import { fetchWithSentry } from '@/utils'
+import { fetchWithSentry } from '@/utils/sentry.utils'
import * as Sentry from '@sentry/nextjs'
import { RecipientValidationError } from '../url-parser/errors'
import { type RecipientType } from '../url-parser/types/payment'
+import { PEANUT_API_URL } from '@/constants/general.consts'
export async function validateAndResolveRecipient(
recipient: string,
diff --git a/src/lib/validation/token.test.ts b/src/lib/validation/token.test.ts
index 02db056da..40064dc97 100644
--- a/src/lib/validation/token.test.ts
+++ b/src/lib/validation/token.test.ts
@@ -95,7 +95,7 @@ const mockSquidChains: Record<
},
}
-jest.mock('@/constants', () => ({
+jest.mock('@/constants/zerodev.consts', () => ({
PEANUT_WALLET_CHAIN: {
id: '1',
name: 'Ethereum',
diff --git a/src/lib/validation/token.ts b/src/lib/validation/token.ts
index 33d43ebf0..a0500cd94 100644
--- a/src/lib/validation/token.ts
+++ b/src/lib/validation/token.ts
@@ -1,5 +1,5 @@
import { getSquidChainsAndTokens } from '@/app/actions/squid'
-import { PEANUT_WALLET_CHAIN, PEANUT_WALLET_TOKEN } from '@/constants'
+import { PEANUT_WALLET_CHAIN, PEANUT_WALLET_TOKEN } from '@/constants/zerodev.consts'
import { interfaces } from '@squirrel-labs/peanut-sdk'
import { ChainValidationError } from '../url-parser/errors'
import { POPULAR_CHAIN_NAME_VARIANTS } from '../url-parser/parser.consts'
diff --git a/src/redux/constants/index.ts b/src/redux/constants/index.ts
index 6a9b137fb..1ee1e58ed 100644
--- a/src/redux/constants/index.ts
+++ b/src/redux/constants/index.ts
@@ -1,7 +1,5 @@
export const SETUP = 'setup'
export const WALLET_SLICE = 'wallet_slice'
export const ZERODEV_SLICE = 'zerodev_slice'
-export const PAYMENT_SLICE = 'payment_slice'
export const AUTH_SLICE = 'auth_slice'
-export const SEND_FLOW_SLICE = 'send_flow_slice'
export const BANK_FORM_SLICE = 'bank_form_slice'
diff --git a/src/redux/hooks.ts b/src/redux/hooks.ts
index e551d90af..d8d7ef1f3 100644
--- a/src/redux/hooks.ts
+++ b/src/redux/hooks.ts
@@ -5,10 +5,8 @@ import { type AppDispatch, type RootState } from './types'
export const useAppDispatch = () => useDispatch()
export const useAppSelector: TypedUseSelectorHook = useSelector
-// Selector hooks for utilization
+// selector hooks for utilization
export const useSetupStore = () => useAppSelector((state) => state.setup)
export const useWalletStore = () => useAppSelector((state) => state.wallet)
export const useZerodevStore = () => useAppSelector((state) => state.zeroDev)
-export const usePaymentStore = () => useAppSelector((state) => state.payment)
export const useUserStore = () => useAppSelector((state) => state.user)
-export const useSendFlowStore = () => useAppSelector((state) => state.sendFlow)
diff --git a/src/redux/slices/payment-slice.ts b/src/redux/slices/payment-slice.ts
deleted file mode 100644
index e736048d6..000000000
--- a/src/redux/slices/payment-slice.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-import { type ParsedURL } from '@/lib/url-parser/types/payment'
-import {
- type PaymentCreationResponse,
- type TCharge,
- type TRequestChargeResponse,
- type TRequestResponse,
-} from '@/services/services.types'
-import { createSlice, type PayloadAction } from '@reduxjs/toolkit'
-import { PAYMENT_SLICE } from '../constants'
-import { type IPaymentState, type TPaymentView } from '../types/payment.types'
-import { type IAttachmentOptions } from '../types/send-flow.types'
-
-const initialState: IPaymentState = {
- currentView: 'INITIAL',
- attachmentOptions: {
- fileUrl: '',
- message: '',
- rawFile: undefined,
- },
- parsedPaymentData: null,
- requestDetails: null,
- chargeDetails: null,
- createdChargeDetails: null,
- transactionHash: null,
- paymentDetails: null,
- resolvedAddress: null,
- error: null,
- usdAmount: null,
- daimoError: null,
- isDaimoPaymentProcessing: false,
-}
-
-const paymentSlice = createSlice({
- name: PAYMENT_SLICE,
- initialState,
- reducers: {
- setView: (state, action: PayloadAction) => {
- state.currentView = action.payload
- },
- setAttachmentOptions: (state, action: PayloadAction) => {
- state.attachmentOptions = action.payload
- },
- setParsedPaymentData: (state, action: PayloadAction) => {
- state.parsedPaymentData = action.payload
- },
- setRequestDetails: (state, action: PayloadAction) => {
- state.requestDetails = action.payload
- },
- setChargeDetails: (state, action: PayloadAction) => {
- state.chargeDetails = action.payload
- },
- setCreatedChargeDetails: (state, action: PayloadAction) => {
- state.createdChargeDetails = action.payload
- },
- setTransactionHash: (state, action: PayloadAction) => {
- state.transactionHash = action.payload
- },
- setPaymentDetails: (state, action: PayloadAction) => {
- state.paymentDetails = action.payload
- },
- setResolvedAddress: (state, action: PayloadAction) => {
- state.resolvedAddress = action.payload
- },
- setError: (state, action: PayloadAction) => {
- state.error = action.payload
- },
- setUsdAmount: (state, action: PayloadAction) => {
- state.usdAmount = action.payload
- },
- setDaimoError: (state, action: PayloadAction) => {
- state.daimoError = action.payload
- },
- setIsDaimoPaymentProcessing: (state, action: PayloadAction) => {
- state.isDaimoPaymentProcessing = action.payload
- },
- resetPaymentState: (state) => {
- return initialState
- },
- },
-})
-
-export const paymentActions = paymentSlice.actions
-export default paymentSlice.reducer
diff --git a/src/redux/slices/send-flow-slice.ts b/src/redux/slices/send-flow-slice.ts
deleted file mode 100644
index 1b9df4a11..000000000
--- a/src/redux/slices/send-flow-slice.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-import { createSlice } from '@reduxjs/toolkit'
-import { interfaces as peanutInterfaces } from '@squirrel-labs/peanut-sdk'
-import { SEND_FLOW_SLICE } from '../constants'
-import {
- type ErrorState,
- type IAttachmentOptions,
- type ISendFlowState,
- type Recipient,
- type SendFlowTxnType,
- type SendFlowView,
-} from '../types/send-flow.types'
-
-const initialState: ISendFlowState = {
- view: 'INITIAL',
- tokenValue: undefined,
- recipient: {
- address: undefined,
- name: undefined,
- },
- usdValue: undefined,
- linkDetails: undefined,
- password: undefined,
- transactionType: 'not-gasless',
- estimatedPoints: undefined,
- gaslessPayload: undefined,
- gaslessPayloadMessage: undefined,
- preparedDepositTxs: undefined,
- txHash: undefined,
- link: undefined,
- transactionCostUSD: undefined,
- attachmentOptions: {
- fileUrl: undefined,
- message: undefined,
- rawFile: undefined,
- },
- errorState: undefined,
- crossChainDetails: undefined,
-}
-
-const sendFlowSlice = createSlice({
- name: SEND_FLOW_SLICE,
- initialState,
- reducers: {
- setView(state, action: { payload: SendFlowView }) {
- state.view = action.payload
- },
- setTokenValue(state, action: { payload: string | undefined }) {
- state.tokenValue = action.payload
- },
- setRecipient(state, action: { payload: Recipient }) {
- state.recipient = action.payload
- },
- setUsdValue(state, action: { payload: string | undefined }) {
- state.usdValue = action.payload
- },
- setLinkDetails(state, action: { payload: peanutInterfaces.IPeanutLinkDetails | undefined }) {
- state.linkDetails = action.payload
- },
- setPassword(state, action: { payload: string | undefined }) {
- state.password = action.payload
- },
- setTransactionType(state, action: { payload: SendFlowTxnType }) {
- state.transactionType = action.payload
- },
- setEstimatedPoints(state, action: { payload: number | undefined }) {
- state.estimatedPoints = action.payload
- },
- setGaslessPayload(state, action: { payload: peanutInterfaces.IGaslessDepositPayload | undefined }) {
- state.gaslessPayload = action.payload
- },
- setGaslessPayloadMessage(state, action: { payload: peanutInterfaces.IPreparedEIP712Message | undefined }) {
- state.gaslessPayloadMessage = action.payload
- },
- setPreparedDepositTxs(state, action: { payload: peanutInterfaces.IPrepareDepositTxsResponse | undefined }) {
- state.preparedDepositTxs = action.payload
- },
- setTxHash(state, action: { payload: string | undefined }) {
- state.txHash = action.payload
- },
- setLink(state, action: { payload: string | undefined }) {
- state.link = action.payload
- },
- setTransactionCostUSD(state, action: { payload: number | undefined }) {
- state.transactionCostUSD = action.payload
- },
- setAttachmentOptions(state, action: { payload: IAttachmentOptions }) {
- state.attachmentOptions = action.payload
- },
- setErrorState(state, action: { payload: ErrorState | undefined }) {
- state.errorState = action.payload
- },
- setCrossChainDetails(state, action: { payload: [] | undefined }) {
- state.crossChainDetails = action.payload
- },
- resetSendFlow: (state) => {
- return initialState
- },
- },
-})
-
-export const sendFlowActions = sendFlowSlice.actions
-export default sendFlowSlice.reducer
diff --git a/src/redux/slices/wallet-slice.ts b/src/redux/slices/wallet-slice.ts
index 787ebdbbe..4bc39443f 100644
--- a/src/redux/slices/wallet-slice.ts
+++ b/src/redux/slices/wallet-slice.ts
@@ -4,7 +4,6 @@ import { type WalletUIState } from '../types/wallet.types'
import { type PayloadAction } from '@reduxjs/toolkit'
const initialState: WalletUIState = {
- signInModalVisible: false,
balance: undefined,
}
@@ -12,9 +11,6 @@ const walletSlice = createSlice({
name: WALLET_SLICE,
initialState,
reducers: {
- setSignInModalVisible: (state, action) => {
- state.signInModalVisible = action.payload
- },
setBalance: (state, action: PayloadAction) => {
state.balance = action.payload.toString()
},
diff --git a/src/redux/store.ts b/src/redux/store.ts
index a3672945b..ea4bd3db0 100644
--- a/src/redux/store.ts
+++ b/src/redux/store.ts
@@ -1,6 +1,4 @@
import { configureStore } from '@reduxjs/toolkit'
-import paymentReducer from './slices/payment-slice'
-import sendFlowReducer from './slices/send-flow-slice'
import setupReducer from './slices/setup-slice'
import userReducer from './slices/user-slice'
import walletReducer from './slices/wallet-slice'
@@ -12,9 +10,7 @@ const store = configureStore({
setup: setupReducer,
wallet: walletReducer,
zeroDev: zeroDevReducer,
- payment: paymentReducer,
user: userReducer,
- sendFlow: sendFlowReducer,
bankForm: bankFormReducer,
},
// disable redux serialization checks
diff --git a/src/redux/types/payment.types.ts b/src/redux/types/payment.types.ts
index a837cbf4c..f413c0c7f 100644
--- a/src/redux/types/payment.types.ts
+++ b/src/redux/types/payment.types.ts
@@ -5,7 +5,7 @@ import {
type TRequestChargeResponse,
type TRequestResponse,
} from '@/services/services.types'
-import { type IAttachmentOptions } from './send-flow.types'
+import { type IAttachmentOptions } from '@/interfaces/attachment'
export type TPaymentView = 'INITIAL' | 'CONFIRM' | 'STATUS' | 'PUBLIC_PROFILE'
diff --git a/src/redux/types/send-flow.types.ts b/src/redux/types/send-flow.types.ts
deleted file mode 100644
index f9445dd30..000000000
--- a/src/redux/types/send-flow.types.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { interfaces as peanutInterfaces } from '@squirrel-labs/peanut-sdk'
-
-export type SendFlowView = 'INITIAL' | 'CONFIRM' | 'SUCCESS' | 'ERROR'
-
-export type SendFlowTxnType = 'not-gasless' | 'gasless'
-
-export type Recipient = { address: string | undefined; name: string | undefined }
-
-export type IAttachmentOptions = {
- fileUrl: string | undefined
- message: string | undefined
- rawFile: File | undefined
-}
-
-export type ErrorState = {
- showError: boolean
- errorMessage: string
-}
-export interface ISendFlowState {
- view: SendFlowView
- tokenValue: string | undefined
- recipient: Recipient
- usdValue: string | undefined
- linkDetails: peanutInterfaces.IPeanutLinkDetails | undefined
- password: string | undefined
- transactionType: SendFlowTxnType
- estimatedPoints: number | undefined
- gaslessPayload: peanutInterfaces.IGaslessDepositPayload | undefined
- gaslessPayloadMessage: peanutInterfaces.IPreparedEIP712Message | undefined
- preparedDepositTxs: peanutInterfaces.IPrepareDepositTxsResponse | undefined
- txHash: string | undefined
- link: string | undefined
- transactionCostUSD: number | undefined
- attachmentOptions: IAttachmentOptions
- errorState: ErrorState | undefined
- crossChainDetails: [] | undefined
-}
diff --git a/src/redux/types/wallet.types.ts b/src/redux/types/wallet.types.ts
index fc1947fc6..63e00b962 100644
--- a/src/redux/types/wallet.types.ts
+++ b/src/redux/types/wallet.types.ts
@@ -1,4 +1,3 @@
export interface WalletUIState {
- signInModalVisible: boolean
balance: string | undefined
}
diff --git a/src/services/charges.ts b/src/services/charges.ts
index ec4397997..409a6f332 100644
--- a/src/services/charges.ts
+++ b/src/services/charges.ts
@@ -1,12 +1,13 @@
-import { PEANUT_API_URL } from '@/constants'
-import { fetchWithSentry, jsonParse } from '@/utils'
+import { fetchWithSentry } from '@/utils/sentry.utils'
+import { jsonParse } from '@/utils/general.utils'
import Cookies from 'js-cookie'
import {
- type CreateChargeRequest,
+ type TRequestChargeResponse,
type PaymentCreationResponse,
type TCharge,
- type TRequestChargeResponse,
+ type CreateChargeRequest,
} from './services.types'
+import { PEANUT_API_URL } from '@/constants/general.consts'
export const chargesApi = {
create: async (data: CreateChargeRequest): Promise => {
diff --git a/src/services/invites.ts b/src/services/invites.ts
index 624d3a7a3..6f069db51 100644
--- a/src/services/invites.ts
+++ b/src/services/invites.ts
@@ -1,8 +1,8 @@
import { validateInviteCode } from '@/app/actions/invites'
-import { PEANUT_API_URL } from '@/constants'
-import { fetchWithSentry } from '@/utils'
+import { fetchWithSentry } from '@/utils/sentry.utils'
import Cookies from 'js-cookie'
import { EInviteType, type PointsInvitesResponse } from './services.types'
+import { PEANUT_API_URL } from '@/constants/general.consts'
export const invitesApi = {
acceptInvite: async (
diff --git a/src/services/manteca.ts b/src/services/manteca.ts
index 282d205e4..6f7f43941 100644
--- a/src/services/manteca.ts
+++ b/src/services/manteca.ts
@@ -1,11 +1,12 @@
-import { PEANUT_API_URL, PEANUT_API_KEY } from '@/constants'
+import { PEANUT_API_URL, PEANUT_API_KEY } from '@/constants/general.consts'
import {
type MantecaDepositResponseData,
type MantecaWithdrawData,
type MantecaWithdrawResponse,
type CreateMantecaOnrampParams,
} from '@/types/manteca.types'
-import { fetchWithSentry, jsonStringify } from '@/utils'
+import { fetchWithSentry } from '@/utils/sentry.utils'
+import { jsonStringify } from '@/utils/general.utils'
import Cookies from 'js-cookie'
import type { Address } from 'viem'
import type { SignUserOperationReturnType } from '@zerodev/sdk/actions'
@@ -253,7 +254,8 @@ export const mantecaApi = {
Authorization: `Bearer ${Cookies.get('jwt-token')}`,
},
body: jsonStringify({
- usdAmount: params.usdAmount,
+ amount: params.amount,
+ isUsdDenominated: params.isUsdDenominated,
currency: params.currency,
chargeId: params.chargeId,
}),
diff --git a/src/services/notifications.ts b/src/services/notifications.ts
index 87532cef6..604d28b12 100644
--- a/src/services/notifications.ts
+++ b/src/services/notifications.ts
@@ -1,5 +1,5 @@
-import { PEANUT_API_URL } from '@/constants'
import Cookies from 'js-cookie'
+import { PEANUT_API_URL } from '@/constants/general.consts'
export type InAppItem = {
id: string
diff --git a/src/services/points.ts b/src/services/points.ts
index 7de61b0f2..562a21880 100644
--- a/src/services/points.ts
+++ b/src/services/points.ts
@@ -1,7 +1,7 @@
import Cookies from 'js-cookie'
import { type CalculatePointsRequest, PointsAction, type TierInfo } from './services.types'
-import { fetchWithSentry } from '@/utils'
-import { PEANUT_API_URL } from '@/constants'
+import { fetchWithSentry } from '@/utils/sentry.utils'
+import { PEANUT_API_URL } from '@/constants/general.consts'
type InvitesGraphResponse = {
success: boolean
diff --git a/src/services/quests.ts b/src/services/quests.ts
index d9066869d..431d77137 100644
--- a/src/services/quests.ts
+++ b/src/services/quests.ts
@@ -4,9 +4,9 @@
*/
import Cookies from 'js-cookie'
-import { fetchWithSentry } from '@/utils'
-import { PEANUT_API_URL } from '@/constants'
+import { fetchWithSentry } from '@/utils/sentry.utils'
import type { QuestLeaderboardData, AllQuestsLeaderboardData } from '@/app/quests/types'
+import { PEANUT_API_URL } from '@/constants/general.consts'
export const questsApi = {
/**
diff --git a/src/services/requests.ts b/src/services/requests.ts
index f7932af47..75d908180 100644
--- a/src/services/requests.ts
+++ b/src/services/requests.ts
@@ -1,7 +1,8 @@
-import { PEANUT_API_URL } from '@/constants'
import { type CreateRequestRequest, type TRequestResponse } from './services.types'
-import { fetchWithSentry, jsonStringify } from '@/utils'
+import { fetchWithSentry } from '@/utils/sentry.utils'
+import { jsonStringify } from '@/utils/general.utils'
import Cookies from 'js-cookie'
+import { PEANUT_API_URL } from '@/constants/general.consts'
export const requestsApi = {
create: async (data: CreateRequestRequest): Promise => {
diff --git a/src/services/rewards.ts b/src/services/rewards.ts
index 3b29313d6..8c1868c09 100644
--- a/src/services/rewards.ts
+++ b/src/services/rewards.ts
@@ -1,7 +1,7 @@
-import { PEANUT_API_URL } from '@/constants'
-import { fetchWithSentry } from '@/utils'
+import { fetchWithSentry } from '@/utils/sentry.utils'
import { type RewardLink } from './services.types'
import Cookies from 'js-cookie'
+import { PEANUT_API_URL } from '@/constants/general.consts'
export const rewardsApi = {
getByUser: async (userId: string): Promise => {
diff --git a/src/services/rhino.ts b/src/services/rhino.ts
new file mode 100644
index 000000000..05df247d5
--- /dev/null
+++ b/src/services/rhino.ts
@@ -0,0 +1,89 @@
+import type { CreateDepositAddressResponse, RhinoChainType } from './services.types'
+import { PEANUT_API_URL } from '@/constants/general.consts'
+import Cookies from 'js-cookie'
+
+export const rhinoApi = {
+ createDepositAddress: async (
+ destinationAddress: string,
+ chainType: RhinoChainType,
+ identifier: string
+ ): Promise => {
+ const token = Cookies.get('jwt-token')
+ if (!token) {
+ throw new Error('Authentication required')
+ }
+
+ const response = await fetch(`${PEANUT_API_URL}/rhino/deposit`, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ Authorization: `Bearer ${token}`,
+ },
+ body: JSON.stringify({ destinationAddress, type: chainType, addressNote: identifier }),
+ })
+ if (!response.ok) {
+ throw new Error(`Failed to fetch deposit address: ${response.statusText}`)
+ }
+ const data = await response.json()
+ return data as CreateDepositAddressResponse
+ },
+
+ getDepositAddressStatus: async (depositAddress: string): Promise<{ status: string; amount?: number }> => {
+ const response = await fetch(`${PEANUT_API_URL}/rhino/status/${depositAddress}`, {
+ method: 'GET',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ })
+
+ if (!response.ok) {
+ throw new Error(`Failed to fetch deposit address status: ${response.statusText}`)
+ }
+
+ const data = await response.json()
+ return data
+ },
+
+ resetDepositAddressStatus: async (depositAddress: string): Promise => {
+ const token = Cookies.get('jwt-token')
+ if (!token) {
+ throw new Error('Authentication required')
+ }
+ const response = await fetch(`${PEANUT_API_URL}/rhino/reset-status/${depositAddress}`, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ Authorization: `Bearer ${token}`,
+ },
+ })
+
+ if (!response.ok) {
+ throw new Error(`Failed to update deposit address status: ${response.statusText}`)
+ }
+
+ return true
+ },
+
+ createRequestFulfilmentAddress: async (
+ chainType: RhinoChainType,
+ chargeId: string,
+ peanutWalletAddress?: string
+ ): Promise => {
+ const response = await fetch(`${PEANUT_API_URL}/rhino/request-fulfilment`, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({
+ type: chainType,
+ chargeId,
+ senderPeanutWalletAddress: peanutWalletAddress,
+ }),
+ })
+ if (!response.ok) {
+ throw new Error(`Failed to fetch Request Fulfilment Address: ${response.statusText}`)
+ }
+ const data = await response.json()
+ return data as CreateDepositAddressResponse
+ },
+}
diff --git a/src/services/sendLinks.ts b/src/services/sendLinks.ts
index b8ba670e2..38150e112 100644
--- a/src/services/sendLinks.ts
+++ b/src/services/sendLinks.ts
@@ -1,9 +1,10 @@
// Removed claimSendLink import - no longer used (was insecure)
-import { PEANUT_API_URL } from '@/constants'
-import { fetchWithSentry, jsonParse, jsonStringify } from '@/utils'
+import { fetchWithSentry } from '@/utils/sentry.utils'
+import { jsonParse, jsonStringify } from '@/utils/general.utils'
import { generateKeysFromString, getParamsFromLink } from '@squirrel-labs/peanut-sdk'
import Cookies from 'js-cookie'
import type { SendLink } from '@/services/services.types'
+import { PEANUT_API_URL } from '@/constants/general.consts'
export { ESendLinkStatus } from '@/services/services.types'
export type { SendLinkStatus, SendLink } from '@/services/services.types'
diff --git a/src/services/services.types.ts b/src/services/services.types.ts
index 4bc1d036c..659bde792 100644
--- a/src/services/services.types.ts
+++ b/src/services/services.types.ts
@@ -1,4 +1,4 @@
-import { type BridgeKycStatus } from '@/utils'
+import { type BridgeKycStatus } from '@/utils/bridge-accounts.utils'
import { interfaces as peanutInterfaces } from '@squirrel-labs/peanut-sdk'
export type TStatus = 'NEW' | 'PENDING' | 'COMPLETED' | 'EXPIRED' | 'FAILED' | 'SIGNED' | 'SUCCESSFUL' | 'CANCELLED'
@@ -66,6 +66,7 @@ export interface ChargeEntry {
}
export interface RequestLink {
+ uuid: string
recipientAddress: string
reference: string | null
attachmentUrl: string | null
@@ -190,6 +191,7 @@ export interface TRequestChargeResponse {
username: string
}
requestLink: {
+ uuid: string
recipientAddress: string
reference: string | null
attachmentUrl: string | null
@@ -469,3 +471,11 @@ export interface HistoryEntryPerkReward {
originatingTxType?: string
perkName?: string
}
+
+export type RhinoChainType = 'EVM' | 'SOL' | 'TRON'
+export interface CreateDepositAddressResponse {
+ depositAddress: string
+ minDepositLimitUsd: number
+ maxDepositLimitUsd: number
+ supportedChains: string[]
+}
diff --git a/src/services/simplefi.ts b/src/services/simplefi.ts
index 7057171db..3c0eed0af 100644
--- a/src/services/simplefi.ts
+++ b/src/services/simplefi.ts
@@ -1,7 +1,7 @@
-import { PEANUT_API_URL } from '@/constants'
-import { fetchWithSentry } from '@/utils'
+import { fetchWithSentry } from '@/utils/sentry.utils'
import Cookies from 'js-cookie'
import type { Address } from 'viem'
+import { PEANUT_API_URL } from '@/constants/general.consts'
export type QrPaymentType = 'STATIC' | 'DYNAMIC' | 'USER_SPECIFIED'
diff --git a/src/services/swap.ts b/src/services/swap.ts
index 910fea268..21076defc 100644
--- a/src/services/swap.ts
+++ b/src/services/swap.ts
@@ -4,8 +4,10 @@ import { parseUnits, formatUnits, encodeFunctionData, erc20Abi } from 'viem'
import { fetchTokenPrice, estimateTransactionCostUsd } from '@/app/actions/tokens'
import { getPublicClient, type ChainId } from '@/app/actions/clients'
-import { fetchWithSentry, isNativeCurrency, areEvmAddressesEqual } from '@/utils'
-import { SQUID_API_URL, USDT_IN_MAINNET, SQUID_INTEGRATOR_ID, SQUID_INTEGRATOR_ID_WITHOUT_CORAL } from '@/constants'
+import { fetchWithSentry } from '@/utils/sentry.utils'
+import { isNativeCurrency, areEvmAddressesEqual } from '@/utils/general.utils'
+import { SQUID_API_URL, SQUID_INTEGRATOR_ID, SQUID_INTEGRATOR_ID_WITHOUT_CORAL } from '@/constants/general.consts'
+import { USDT_IN_MAINNET } from '@/constants/zerodev.consts'
type TokenInfo = {
address: Address
diff --git a/src/services/users.ts b/src/services/users.ts
index b485877c5..824acd885 100644
--- a/src/services/users.ts
+++ b/src/services/users.ts
@@ -1,17 +1,17 @@
import {
- PEANUT_API_URL,
PEANUT_WALLET_CHAIN,
PEANUT_WALLET_TOKEN,
PEANUT_WALLET_TOKEN_DECIMALS,
PEANUT_WALLET_TOKEN_SYMBOL,
-} from '@/constants'
+} from '@/constants/zerodev.consts'
import { AccountType, type IUserKycVerification } from '@/interfaces'
-import { type IAttachmentOptions } from '@/redux/types/send-flow.types'
-import { fetchWithSentry } from '@/utils'
+import { type IAttachmentOptions } from '@/interfaces/attachment'
+import { fetchWithSentry } from '@/utils/sentry.utils'
import { interfaces as peanutInterfaces } from '@squirrel-labs/peanut-sdk'
import { chargesApi } from './charges'
import { type TCharge } from './services.types'
import Cookies from 'js-cookie'
+import { PEANUT_API_URL } from '@/constants/general.consts'
type ApiAccount = {
identifier: string
diff --git a/src/styles/theme.ts b/src/styles/theme.ts
deleted file mode 100644
index 311f8180f..000000000
--- a/src/styles/theme.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import { extendTheme } from '@chakra-ui/react'
-import { StepsTheme as Steps } from 'chakra-ui-steps'
-
-const config = {
- initialColorMode: 'light' as 'light',
- useSystemColorMode: false,
-}
-/**
- * Breakpoints for responsive design.
- *
- * The breakpoints are defined in em units and their equivalent in pixels are:
- * - xs: 22em (352px)
- * - sm: 30em (480px)
- * - md: 48em (768px)
- * - lg: 62em (992px)
- * - xl: 80em (1280px)
- * - 2xl: 96em (1536px)
- */
-export const breakpoints = {
- xs: '22em',
- sm: '30em',
- md: '48em',
- lg: '62em',
- xl: '80em',
- '2xl': '96em',
-}
-
-export const emToPx = (em: string) => parseFloat(em) * 16
-
-export const theme = extendTheme({
- breakpoints,
- config,
- colors: {
- stepperScheme: {
- 50: '#e1f5fe',
- 100: '#b3e5fc',
- 200: '#81d4fa',
- 300: '#4fc3f7',
- 400: '#29b6f6',
- 500: '#03a9f4',
- 600: '#039be5',
- 700: '#0288d1',
- 800: '#0277bd',
- 900: '#01579b',
- },
- pink: {
- 500: '#FF9CEA',
- },
- },
-
- components: {
- Steps,
- },
-})
diff --git a/src/types/manteca.types.ts b/src/types/manteca.types.ts
index 38040e779..d18d23f05 100644
--- a/src/types/manteca.types.ts
+++ b/src/types/manteca.types.ts
@@ -123,7 +123,8 @@ export type MantecaWithdrawResponse = {
}
export interface CreateMantecaOnrampParams {
- usdAmount: string
+ amount: string
+ isUsdDenominated?: boolean
currency: string
chargeId?: string
}
diff --git a/src/utils/__mocks__/web-push.ts b/src/utils/__mocks__/web-push.ts
deleted file mode 100644
index b0c44b7a0..000000000
--- a/src/utils/__mocks__/web-push.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * Mock for web-push
- * Used in Jest tests to avoid VAPID key validation issues
- */
-
-export const setVapidDetails = jest.fn()
-export const sendNotification = jest.fn(() => Promise.resolve())
-export const generateVAPIDKeys = jest.fn(() => ({
- publicKey: 'mock-public-key',
- privateKey: 'mock-private-key',
-}))
-
-const webpush = {
- setVapidDetails,
- sendNotification,
- generateVAPIDKeys,
-}
-
-export default webpush
diff --git a/src/utils/__tests__/balance.utils.test.ts b/src/utils/__tests__/balance.utils.test.ts
new file mode 100644
index 000000000..00516f09a
--- /dev/null
+++ b/src/utils/__tests__/balance.utils.test.ts
@@ -0,0 +1,29 @@
+import { printableUsdc } from '../balance.utils'
+
+describe('balance utils', () => {
+ describe('printableUsdc', () => {
+ it.each([
+ [0n, '0.00'],
+ [10000n, '0.01'],
+ [100000n, '0.10'],
+ [1000000n, '1.00'],
+ [10000000n, '10.00'],
+ [100000000n, '100.00'],
+ [1000000000n, '1000.00'],
+ [10000000000n, '10000.00'],
+ [100000000000n, '100000.00'],
+ [1000000000000n, '1000000.00'],
+ [10000000000000n, '10000000.00'],
+ [100000000000000n, '100000000.00'],
+ [1000000000000000n, '1000000000.00'],
+ [10000000000000000n, '10000000000.00'],
+ [100000000000000000n, '100000000000.00'],
+ [1000000000000000000n, '1000000000000.00'],
+ [303340000n, '303.34'],
+ [303339000n, '303.33'],
+ [303345000n, '303.34'],
+ ])('should return the correct value for %i', (input, expected) => {
+ expect(printableUsdc(input)).toBe(expected)
+ })
+ })
+})
diff --git a/src/utils/__tests__/url-parser.test.ts b/src/utils/__tests__/url-parser.test.ts
index cdd19fe73..e26f64a73 100644
--- a/src/utils/__tests__/url-parser.test.ts
+++ b/src/utils/__tests__/url-parser.test.ts
@@ -84,16 +84,12 @@ jest.mock('@/app/actions/squid', () => ({
}),
}))
-jest.mock('@/constants', () => ({
+jest.mock('@/constants/zerodev.consts', () => ({
PEANUT_WALLET_CHAIN: {
id: '42161',
name: 'Arbitrum',
},
PEANUT_WALLET_TOKEN: '0xFF970A61A04b1cA14834A43f5dE4533eBDDB5CC8',
- chains: [
- { id: 1, name: 'Ethereum' },
- { id: 42161, name: 'Arbitrum' },
- ],
}))
jest.mock('@/lib/url-parser/parser.consts', () => ({
@@ -267,7 +263,6 @@ describe('URL Parser Tests', () => {
chain: expect.objectContaining({ chainId: 42161 }),
amount: '0.1',
token: expect.objectContaining({ symbol: 'USDC' }),
- isDevConnectFlow: false,
})
})
@@ -319,7 +314,6 @@ describe('URL Parser Tests', () => {
chain: undefined,
token: undefined,
amount: undefined,
- isDevConnectFlow: false,
})
})
diff --git a/src/utils/backendTransport.ts b/src/utils/backendTransport.ts
index c709da428..1a316f84b 100644
--- a/src/utils/backendTransport.ts
+++ b/src/utils/backendTransport.ts
@@ -1,7 +1,7 @@
import { custom, type Transport } from 'viem'
-import { PEANUT_API_URL } from '@/constants'
import { jsonStringify } from './general.utils'
import Cookies from 'js-cookie'
+import { PEANUT_API_URL } from '@/constants/general.consts'
export function createBackendRpcTransport(chainId: number): Transport {
return custom({
diff --git a/src/utils/balance.utils.ts b/src/utils/balance.utils.ts
index 051ee3089..48c11a0f8 100644
--- a/src/utils/balance.utils.ts
+++ b/src/utils/balance.utils.ts
@@ -1,4 +1,4 @@
-import { PEANUT_WALLET_TOKEN_DECIMALS } from '@/constants'
+import { PEANUT_WALLET_TOKEN_DECIMALS } from '@/constants/zerodev.consts'
import { type ChainValue, type IUserBalance } from '@/interfaces'
import * as Sentry from '@sentry/nextjs'
import { formatUnits } from 'viem'
@@ -30,9 +30,10 @@ export function calculateValuePerChain(balances: IUserBalance[]): ChainValue[] {
}
export const printableUsdc = (balance: bigint): string => {
- const formatted = formatUnits(balance, PEANUT_WALLET_TOKEN_DECIMALS)
- // floor the formatted value
- const value = Number(formatted)
- const flooredValue = Math.floor(value * 100) / 100
- return flooredValue.toFixed(2)
+ // For 6 decimals, we want 2 decimal places in output
+ // So we divide by 10^4 to keep only 2 decimal places, then format
+ const scaleFactor = BigInt(10 ** (PEANUT_WALLET_TOKEN_DECIMALS - 2)) // 10^4 = 10000n
+ const flooredBigint = (balance / scaleFactor) * scaleFactor
+ const formatted = formatUnits(flooredBigint, PEANUT_WALLET_TOKEN_DECIMALS)
+ return Number(formatted).toFixed(2)
}
diff --git a/src/utils/bridge-accounts.utils.ts b/src/utils/bridge-accounts.utils.ts
index 0c24a2ed7..61bd013c6 100644
--- a/src/utils/bridge-accounts.utils.ts
+++ b/src/utils/bridge-accounts.utils.ts
@@ -1,5 +1,6 @@
-import * as consts from '@/constants'
-import { areEvmAddressesEqual, fetchWithSentry } from '@/utils'
+import { supportedBridgeTokensDictionary, supportedBridgeChainsDictionary } from '@/constants/cashout.consts'
+import { areEvmAddressesEqual } from '@/utils/general.utils'
+import { fetchWithSentry } from '@/utils/sentry.utils'
import { isIBAN } from 'validator'
const ALLOWED_PARENT_DOMAINS = ['intersend.io', 'app.intersend.io']
@@ -31,14 +32,15 @@ export const convertPersonaUrl = (url: string) => {
return `https://bridge.withpersona.com/widget?environment=production&inquiry-template-id=${templateId}&fields[iqt_token=${iqtToken}&iframe-origin=${origin}&redirect-uri=${origin}&fields[developer_id]=${developerId}&reference-id=${referenceId}`
}
-export type BridgeKycStatus = 'not_started' | 'under_review' | 'approved' | 'rejected' | 'incomplete'
+// Re-export from interfaces (defined there to avoid circular dependency)
+export type { BridgeKycStatus } from '@/interfaces/interfaces'
export async function validateIban(iban: string): Promise {
return isIBAN(iban.replace(/\s+/g, ''))
}
export function getBridgeTokenName(chainId: string, tokenAddress: string): string | undefined {
- const token = consts.supportedBridgeTokensDictionary
+ const token = supportedBridgeTokensDictionary
.find((chain) => chain.chainId === chainId)
?.tokens.find((token) => areEvmAddressesEqual(token.address, tokenAddress))
?.token.toLowerCase()
@@ -47,7 +49,7 @@ export function getBridgeTokenName(chainId: string, tokenAddress: string): strin
}
export function getBridgeChainName(chainId: string): string | undefined {
- const chain = consts.supportedBridgeChainsDictionary.find((chain) => chain.chainId === chainId)?.chain
+ const chain = supportedBridgeChainsDictionary.find((chain) => chain.chainId === chainId)?.chain
return chain ?? undefined
}
diff --git a/src/utils/general.utils.ts b/src/utils/general.utils.ts
index f13c7a6ea..afb85130a 100644
--- a/src/utils/general.utils.ts
+++ b/src/utils/general.utils.ts
@@ -1,6 +1,13 @@
-import * as consts from '@/constants'
-import { STABLE_COINS, USER_OPERATION_REVERT_REASON_TOPIC, ENS_NAME_REGEX } from '@/constants'
-import { AccountType } from '@/interfaces'
+import {
+ nativeCurrencyAddresses,
+ supportedPeanutChains,
+ peanutTokenDetails,
+ pathTitles,
+ BASE_URL,
+} from '@/constants/general.consts'
+import { type LoadingStates } from '@/constants/loadingStates.consts'
+import { STABLE_COINS, ENS_NAME_REGEX } from '@/constants/general.consts'
+import { AccountType } from '@/interfaces/interfaces'
import * as Sentry from '@sentry/nextjs'
import peanut, { interfaces as peanutInterfaces } from '@squirrel-labs/peanut-sdk'
import type { Address, TransactionReceipt } from 'viem'
@@ -10,7 +17,8 @@ import { getPublicClient, type ChainId } from '@/app/actions/clients'
import { NATIVE_TOKEN_ADDRESS, SQUID_ETH_ADDRESS } from './token.utils'
import { type ChargeEntry } from '@/services/services.types'
import { toWebAuthnKey } from '@zerodev/passkey-validator'
-import type { ParsedURL } from '@/lib/url-parser/types/payment'
+import { USER_OPERATION_REVERT_REASON_TOPIC } from '@/constants/zerodev.consts'
+import { CHAIN_LOGOS, type ChainName } from '@/constants/rhino.consts'
export function urlBase64ToUint8Array(base64String: string) {
const padding = '='.repeat((4 - (base64String.length % 4)) % 4)
@@ -54,8 +62,36 @@ export const shortenStringLong = (s?: string, chars?: number, firstChars?: numbe
return firstBit + '...' + endingBit
}
+// Address detection patterns (permissive to handle lowercase-stored addresses)
+// These are for display purposes, not cryptographic validation
+const SOLANA_ADDRESS_REGEX = /^[1-9a-zA-Z]{32,44}$/
+const TRON_ADDRESS_REGEX = /^[Tt][0-9a-zA-Z]{33}$/
+
+/**
+ * Checks if a string looks like a Solana address (32-44 alphanumeric characters, no 0)
+ * Permissive to handle lowercase-stored addresses
+ */
+export const isSolanaAddress = (address: string): boolean => {
+ return SOLANA_ADDRESS_REGEX.test(address)
+}
+
+/**
+ * Checks if a string looks like a Tron address (starts with T/t, 34 alphanumeric characters)
+ * Permissive to handle lowercase-stored addresses
+ */
+export const isTronAddress = (address: string): boolean => {
+ return TRON_ADDRESS_REGEX.test(address)
+}
+
+/**
+ * Checks if a string is any valid blockchain address (EVM, Solana, or Tron)
+ */
+export const isCryptoAddress = (address: string): boolean => {
+ return isAddress(address) || isSolanaAddress(address) || isTronAddress(address)
+}
+
export const printableAddress = (address: string, firstCharsLen?: number, lastCharsLen?: number): string => {
- if (!isAddress(address)) return address
+ if (!isCryptoAddress(address)) return address
return shortenStringLong(address, undefined, firstCharsLen, lastCharsLen)
}
@@ -434,7 +470,7 @@ export const isAddressZero = (address: string): boolean => {
}
export const isNativeCurrency = (address: string) => {
- if (consts.nativeCurrencyAddresses.includes(address.toLowerCase())) {
+ if (nativeCurrencyAddresses.includes(address.toLowerCase())) {
return true
} else return false
}
@@ -456,16 +492,6 @@ export type UserPreferences = {
notifBannerShowAt?: number
notifModalClosed?: boolean
hasSeenBalanceWarning?: { value: boolean; expiry: number }
- // @dev: note, this needs to be deleted post devconnect
- devConnectIntents?: Array<{
- id: string
- recipientAddress: string
- chain: string
- amount: string
- onrampId?: string
- createdAt: number
- status: 'pending' | 'completed'
- }>
}
export const updateUserPreferences = (
@@ -511,7 +537,7 @@ export const estimateIfIsStableCoinFromPrice = (tokenPrice: number) => {
}
export const getExplorerUrl = (chainId: string) => {
- const explorers = consts.supportedPeanutChains.find((detail) => detail.chainId === chainId)?.explorers
+ const explorers = supportedPeanutChains.find((detail) => detail.chainId === chainId)?.explorers
// if the explorers array has blockscout, return the blockscout url, else return the first one
if (explorers?.find((explorer) => explorer.url.includes('blockscout'))) {
return explorers?.find((explorer) => explorer.url.includes('blockscout'))?.url
@@ -565,7 +591,7 @@ export const switchNetwork = async ({
}: {
chainId: string
currentChainId: string | undefined
- setLoadingState: (state: consts.LoadingStates) => void
+ setLoadingState: (state: LoadingStates) => void
switchChainAsync: ({ chainId }: { chainId: number }) => Promise
}) => {
if (currentChainId !== chainId) {
@@ -585,7 +611,7 @@ export const switchNetwork = async ({
/** Gets the token decimals for a given token address and chain ID. */
export function getTokenDecimals(tokenAddress: string, chainId: string): number | undefined {
- return consts.peanutTokenDetails
+ return peanutTokenDetails
.find((chain) => chain.chainId === chainId)
?.tokens.find((token) => areEvmAddressesEqual(token.address, tokenAddress))?.decimals
}
@@ -597,7 +623,7 @@ export function getTokenDetails({ tokenAddress, chainId }: { tokenAddress: Addre
decimals: number
}
| undefined {
- const chainTokens = consts.peanutTokenDetails.find((c) => c.chainId === chainId)?.tokens
+ const chainTokens = peanutTokenDetails.find((c) => c.chainId === chainId)?.tokens
if (!chainTokens) return undefined
const tokenDetails = chainTokens.find((token) => areEvmAddressesEqual(token.address, tokenAddress))
if (!tokenDetails) return undefined
@@ -615,7 +641,7 @@ export function getTokenDetails({ tokenAddress, chainId }: { tokenAddress: Addre
export function getTokenSymbol(tokenAddress: string | undefined, chainId: string | undefined): string | undefined {
if (!tokenAddress || !chainId) return undefined
- const chainTokens = consts.peanutTokenDetails.find((chain) => chain.chainId === chainId)?.tokens
+ const chainTokens = peanutTokenDetails.find((chain) => chain.chainId === chainId)?.tokens
if (!chainTokens) return undefined
return chainTokens.find((token) => areEvmAddressesEqual(token.address, tokenAddress))?.symbol
@@ -654,12 +680,15 @@ export async function fetchTokenSymbol(tokenAddress: string, chainId: string): P
}
export function getChainName(chainId: string): string | undefined {
+ if (chainId === '0') {
+ return 'Solana'
+ }
const chain = Object.entries(wagmiChains).find(([, chain]) => chain.id === Number(chainId))?.[1]
return chain?.name ?? undefined
}
export const getHeaderTitle = (pathname: string) => {
- return consts.pathTitles[pathname] || 'Peanut' // default title if path not found
+ return pathTitles[pathname] || 'Peanut' // default title if path not found
}
/**
@@ -780,6 +809,13 @@ export function getChainLogo(chainName: string): string {
default:
name = chainName.toLowerCase()
}
+
+ const chainLogo = CHAIN_LOGOS[name.toUpperCase() as ChainName]
+
+ if (chainLogo) {
+ return chainLogo
+ }
+
return `https://raw.githubusercontent.com/0xsquid/assets/main/images/webp128/chains/${name}.webp`
}
@@ -896,7 +932,7 @@ export const generateInviteCodeSuffix = (username: string): string => {
export const generateInviteCodeLink = (username: string) => {
const suffix = generateInviteCodeSuffix(username)
const inviteCode = `${username.toUpperCase()}INVITESYOU${suffix}`
- const inviteLink = `${consts.BASE_URL}/invite?code=${inviteCode}`
+ const inviteLink = `${BASE_URL}/invite?code=${inviteCode}`
return { inviteLink, inviteCode }
}
@@ -939,109 +975,3 @@ export const getContributorsFromCharge = (charges: ChargeEntry[]) => {
}
})
}
-
-/**
- * helper function to save devconnect intent to user preferences
- * @dev: note, this needs to be deleted post devconnect
- */
-/**
- * create deterministic id for devconnect intent based on recipient + chain only
- * amount is not included as it can change during the flow
- * @dev: to be deleted post devconnect
- */
-const createDevConnectIntentId = (recipientAddress: string, chain: string): string => {
- const str = `${recipientAddress.toLowerCase()}-${chain.toLowerCase()}`
- let hash = 0
- for (let i = 0; i < str.length; i++) {
- const char = str.charCodeAt(i)
- hash = (hash << 5) - hash + char
- hash = hash & hash // convert to 32bit integer
- }
- return Math.abs(hash).toString(36)
-}
-
-export const saveDevConnectIntent = (
- userId: string | undefined,
- parsedPaymentData: ParsedURL | null,
- amount: string,
- onrampId?: string
-): void => {
- if (!userId) return
-
- // check both redux state and user preferences (fallback if state was reset)
- const devconnectFlowData =
- parsedPaymentData?.isDevConnectFlow && parsedPaymentData.recipient && parsedPaymentData.chain
- ? {
- recipientAddress: parsedPaymentData.recipient.resolvedAddress,
- chain: parsedPaymentData.chain.chainId,
- }
- : (() => {
- try {
- const prefs = getUserPreferences(userId)
- const intents = prefs?.devConnectIntents ?? []
- // get the most recent pending intent
- return intents.find((i) => i.status === 'pending') ?? null
- } catch (e) {
- console.error('Failed to read devconnect intent from user preferences:', e)
- }
- return null
- })()
-
- if (devconnectFlowData) {
- // validate required fields
- const recipientAddress = devconnectFlowData.recipientAddress
- const chain = devconnectFlowData.chain
- const cleanedAmount = amount.replace(/,/g, '')
-
- if (!recipientAddress || !chain || !cleanedAmount) {
- console.warn('Skipping DevConnect intent: missing required fields')
- return
- }
-
- try {
- // create deterministic id based on address + chain only
- const intentId = createDevConnectIntentId(recipientAddress, chain)
-
- const prefs = getUserPreferences(userId)
- const existingIntents = prefs?.devConnectIntents ?? []
-
- // check if intent with same id already exists
- const existingIntent = existingIntents.find((intent) => intent.id === intentId)
-
- if (!existingIntent) {
- // create new intent
- const { MAX_DEVCONNECT_INTENTS } = require('@/constants/payment.consts')
- const sortedIntents = existingIntents.sort((a, b) => b.createdAt - a.createdAt)
- const prunedIntents = sortedIntents.slice(0, MAX_DEVCONNECT_INTENTS - 1)
-
- updateUserPreferences(userId, {
- devConnectIntents: [
- {
- id: intentId,
- recipientAddress,
- chain,
- amount: cleanedAmount,
- onrampId,
- createdAt: Date.now(),
- status: 'pending',
- },
- ...prunedIntents,
- ],
- })
- } else {
- // update existing intent with new amount and onrampId
- const updatedIntents = existingIntents.map((intent) =>
- intent.id === intentId
- ? { ...intent, amount: cleanedAmount, onrampId, createdAt: Date.now() }
- : intent
- )
- updateUserPreferences(userId, {
- devConnectIntents: updatedIntents,
- })
- }
- } catch (intentError) {
- console.error('Failed to save DevConnect intent:', intentError)
- // don't block the flow if intent storage fails
- }
- }
-}
diff --git a/src/utils/history.utils.ts b/src/utils/history.utils.ts
index 5f81f18d0..b233e4f5b 100644
--- a/src/utils/history.utils.ts
+++ b/src/utils/history.utils.ts
@@ -1,13 +1,15 @@
import { MERCADO_PAGO, PIX, SIMPLEFI } from '@/assets/payment-apps'
import { type TransactionDetails } from '@/components/TransactionDetails/transactionTransformer'
-import { getFromLocalStorage } from '@/utils'
-import { PEANUT_WALLET_TOKEN_DECIMALS, BASE_URL } from '@/constants'
+import { getFromLocalStorage } from '@/utils/general.utils'
import { formatUnits } from 'viem'
import { type Hash } from 'viem'
-import { getTokenDetails } from '@/utils'
+import { getTokenDetails } from '@/utils/general.utils'
import { getCurrencyPrice } from '@/app/actions/currency'
import { type ChargeEntry } from '@/services/services.types'
+import { BASE_URL } from '@/constants/general.consts'
+import { PEANUT_WALLET_TOKEN_DECIMALS } from '@/constants/zerodev.consts'
+// NOTE: do not change the order, add new entries at the end, keep synced with backend
export enum EHistoryEntryType {
REQUEST = 'REQUEST',
CASHOUT = 'CASHOUT',
@@ -19,10 +21,10 @@ export enum EHistoryEntryType {
BRIDGE_ONRAMP = 'BRIDGE_ONRAMP',
BANK_SEND_LINK_CLAIM = 'BANK_SEND_LINK_CLAIM',
MANTECA_QR_PAYMENT = 'MANTECA_QR_PAYMENT',
- SIMPLEFI_QR_PAYMENT = 'SIMPLEFI_QR_PAYMENT',
MANTECA_OFFRAMP = 'MANTECA_OFFRAMP',
MANTECA_ONRAMP = 'MANTECA_ONRAMP',
BRIDGE_GUEST_OFFRAMP = 'BRIDGE_GUEST_OFFRAMP',
+ SIMPLEFI_QR_PAYMENT = 'SIMPLEFI_QR_PAYMENT',
PERK_REWARD = 'PERK_REWARD',
}
export function historyTypeToNumber(type: EHistoryEntryType): number {
diff --git a/src/utils/identityVerification.tsx b/src/utils/identityVerification.tsx
index 3f6abb80f..d4e1a3f93 100644
--- a/src/utils/identityVerification.tsx
+++ b/src/utils/identityVerification.tsx
@@ -1,22 +1,32 @@
-import { ALL_COUNTRIES_ALPHA3_TO_ALPHA2, countryData, MEXICO_ALPHA3_TO_ALPHA2 } from '@/components/AddMoney/consts'
+import {
+ ALL_COUNTRIES_ALPHA3_TO_ALPHA2,
+ countryData,
+ MEXICO_ALPHA3_TO_ALPHA2,
+ UNSUPPORTED_ALPHA3_TO_ALPHA2,
+} from '@/components/AddMoney/consts'
export const getCountriesForRegion = (region: string) => {
const supportedCountriesIso3 = Object.keys(ALL_COUNTRIES_ALPHA3_TO_ALPHA2).concat(
Object.keys(MEXICO_ALPHA3_TO_ALPHA2) // Add Mexico as well, supported by bridge
)
+ const unsupportedCountriesIso3 = Object.keys(UNSUPPORTED_ALPHA3_TO_ALPHA2)
+
const countries = countryData.filter((country) => country.region === region)
const supportedCountries = []
+ const limitedAccessCountries = []
const unsupportedCountries = []
for (const country of countries) {
if (country.iso3 && supportedCountriesIso3.includes(country.iso3)) {
supportedCountries.push({ ...country, isSupported: true })
- } else {
+ } else if (country.iso3 && unsupportedCountriesIso3.includes(country.iso3)) {
unsupportedCountries.push({ ...country, isSupported: false })
+ } else {
+ limitedAccessCountries.push({ ...country, isSupported: false })
}
}
- return { supportedCountries, unsupportedCountries }
+ return { supportedCountries, limitedAccessCountries, unsupportedCountries }
}
diff --git a/src/utils/index.ts b/src/utils/index.ts
deleted file mode 100644
index 5ea9ac668..000000000
--- a/src/utils/index.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-export * from './general.utils'
-export * from './sdkErrorHandler.utils'
-export * from './bridge-accounts.utils'
-export * from './balance.utils'
-export * from './sentry.utils'
-export * from './token.utils'
-export * from './ens.utils'
-export * from './history.utils'
-export * from './auth.utils'
-export * from './webauthn.utils'
-export * from './passkeyDebug'
-export * from './passkeyPreflight'
-
-// Bridge utils - explicit exports to avoid naming conflicts
-export {
- getCurrencyConfig as getBridgeCurrencyConfig,
- getOfframpCurrencyConfig,
- getPaymentRailDisplayName,
- getMinimumAmount,
-} from './bridge.utils'
-export type { BridgeOperationType } from './bridge.utils'
diff --git a/src/utils/metrics.utils.ts b/src/utils/metrics.utils.ts
index 390991bc2..9edbc8290 100644
--- a/src/utils/metrics.utils.ts
+++ b/src/utils/metrics.utils.ts
@@ -1,7 +1,7 @@
import { type JSONObject } from '@/interfaces'
-import { PEANUT_API_URL } from '@/constants'
-import { fetchWithSentry } from '@/utils'
+import { fetchWithSentry } from '@/utils/sentry.utils'
import Cookies from 'js-cookie'
+import { PEANUT_API_URL } from '@/constants/general.consts'
export async function hitUserMetric(userId: string, name: string, value: JSONObject = {}): Promise {
try {
diff --git a/src/utils/token.utils.ts b/src/utils/token.utils.ts
index ffbd6da4b..7453dea6d 100644
--- a/src/utils/token.utils.ts
+++ b/src/utils/token.utils.ts
@@ -1,4 +1,4 @@
-import { areEvmAddressesEqual } from '@/utils/'
+import { areEvmAddressesEqual } from './general.utils'
export const checkTokenSupportsXChain = (
tokenAddress: string,
diff --git a/tailwind.config.js b/tailwind.config.js
index 55292eab7..dfa378f6d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -100,6 +100,8 @@ module.exports = {
3: '#29CC6A',
4: '#1C6A50',
5: '#88D987',
+ 6: '#ECFFE9',
+ 7: '#4B8A17',
},
white: '#FFFFFF',
red: '#FF0000',
- {/* search input */}
+ {/* search input - always show when there are contacts or when searching */}
setSearchQuery(e.target.value)}
@@ -123,12 +129,15 @@ export default function ContactsView() {
placeholder="Search contacts..."
/>
- {/* contacts list */}
- {filteredContacts.length > 0 ? (
+ {/* contacts list or search results */}
+ {isFetchingContacts ? (
+ // show skeleton when searching/refetching
+ {
const router = useRouter()
- const dispatch = useAppDispatch()
const searchParams = useSearchParams()
const isSendingByLink = searchParams.get('view') === 'link' || searchParams.get('createLink') === 'true'
const isSendingToContacts = searchParams.get('view') === 'contacts'
@@ -77,16 +74,12 @@ export const SendRouterView = () => {
}, [isFetchingContacts, recentContactsAvatarInitials])
const redirectToSendByLink = () => {
- // reset send flow state when entering link creation flow
- dispatch(sendFlowActions.resetSendFlow())
router.push(`${window.location.pathname}?view=link`)
}
const handlePrev = () => {
- // reset send flow state and navigate deterministically
// when in sub-views (link or contacts), go back to base send page
// otherwise, go to home
- dispatch(sendFlowActions.resetSendFlow())
if (isSendingByLink || isSendingToContacts) {
router.push('/send')
} else {
@@ -137,7 +130,7 @@ export const SendRouterView = () => {
...method,
identifierIcon: (
} }).brave
-}
-
const InstallPWA = ({
canInstall,
deferredPrompt,
deviceType,
screenId,
+ setShowBraveSuccessMessage,
}: {
canInstall?: boolean
deferredPrompt?: BeforeInstallPromptEvent | null
deviceType?: DeviceType
screenId?: ScreenId
+ setShowBraveSuccessMessage?: (show: boolean) => void
}) => {
const toast = useToast()
const { handleNext, isLoading: isSetupFlowLoading } = useSetupFlow()
@@ -39,7 +35,8 @@ const InstallPWA = ({
const [installCancelled, setInstallCancelled] = useState(false)
const [isInstallInProgress, setIsInstallInProgress] = useState(false)
const [isPWAInstalled, setIsPWAInstalled] = useState(false)
- const [isBrave, setIsBrave] = useState(false)
+ const { isBrave } = useBravePWAInstallState()
+
const { user } = useAuth()
const { push } = useRouter()
@@ -74,12 +71,7 @@ const InstallPWA = ({
useEffect(() => {
if (!!user) push('/home')
- }, [user])
-
- // detect brave browser on mount
- useEffect(() => {
- setIsBrave(isBraveBrowser())
- }, [])
+ }, [user, push])
useEffect(() => {
const handleAppInstalled = () => {
@@ -100,6 +92,23 @@ const InstallPWA = ({
}
}, [])
+ // notify parent when installation is complete on brave
+ useEffect(() => {
+ if (
+ isBrave &&
+ (isPWAInstalled || installComplete) &&
+ !window.matchMedia('(display-mode: standalone)').matches
+ ) {
+ setShowBraveSuccessMessage?.(true)
+ } else {
+ setShowBraveSuccessMessage?.(false)
+ }
+
+ return () => {
+ setShowBraveSuccessMessage?.(false)
+ }
+ }, [isBrave, isPWAInstalled, installComplete, setShowBraveSuccessMessage])
+
useEffect(() => {
if (screenId === 'pwa-install' && (deviceType === DeviceType.WEB || deviceType === DeviceType.IOS)) {
const timer = setTimeout(() => {
@@ -150,17 +159,7 @@ const InstallPWA = ({
// if on brave browser, show instructions instead of trying to auto-open
// because brave doesn't support auto-opening pwa from browser
if (isBrave) {
- return (
- (null)
const [isSigning, setIsSigning] = useState(false)
@@ -57,10 +55,10 @@ const SignTestTransaction = () => {
useEffect(() => {
if (accountExists) {
- console.log('[SignTestTransaction] Account exists, redirecting to home')
- router.push('/home')
+ console.log('[SignTestTransaction] Account exists, redirecting to the app')
+ handleRedirect()
}
- }, [accountExists, router])
+ }, [accountExists])
const handleTestTransaction = async () => {
if (!address) {
@@ -129,13 +127,12 @@ const SignTestTransaction = () => {
}
// account setup complete - addAccount() already fetched and verified user data
- console.log('[SignTestTransaction] Account setup complete, redirecting to home')
- router.push('/home')
+ console.log('[SignTestTransaction] Account setup complete, redirecting to the app')
+
// keep loading state active until redirect completes
} else {
// if account already exists, just navigate home (login flow)
- console.log('[SignTestTransaction] Account exists, redirecting to home')
- router.push('/home')
+ console.log('[SignTestTransaction] Account exists, redirecting to the app')
// keep loading state active until redirect completes
}
} catch (e) {
diff --git a/src/components/Setup/Views/Signup.tsx b/src/components/Setup/Views/Signup.tsx
index 0efebf83d..d62fe631e 100644
--- a/src/components/Setup/Views/Signup.tsx
+++ b/src/components/Setup/Views/Signup.tsx
@@ -1,11 +1,11 @@
-import { Button } from '@/components/0_Bruddle'
+import { Button } from '@/components/0_Bruddle/Button'
import ErrorAlert from '@/components/Global/ErrorAlert'
import ValidatedInput from '@/components/Global/ValidatedInput'
-import { next_proxy_url } from '@/constants'
+import { next_proxy_url } from '@/constants/general.consts'
import { useSetupFlow } from '@/hooks/useSetupFlow'
import { useAppDispatch, useSetupStore } from '@/redux/hooks'
import { setupActions } from '@/redux/slices/setup-slice'
-import { fetchWithSentry } from '@/utils'
+import { fetchWithSentry } from '@/utils/sentry.utils'
import * as Sentry from '@sentry/nextjs'
import Link from 'next/link'
import { useState } from 'react'
diff --git a/src/components/Setup/Views/Welcome.tsx b/src/components/Setup/Views/Welcome.tsx
index ea375f5a6..9a69796bb 100644
--- a/src/components/Setup/Views/Welcome.tsx
+++ b/src/components/Setup/Views/Welcome.tsx
@@ -1,11 +1,12 @@
'use client'
-import { Button, Card } from '@/components/0_Bruddle'
+import { Button } from '@/components/0_Bruddle/Button'
+import { Card } from '@/components/0_Bruddle/Card'
import { useToast } from '@/components/0_Bruddle/Toast'
import { useAuth } from '@/context/authContext'
import { useSetupFlow } from '@/hooks/useSetupFlow'
import { useZeroDev } from '@/hooks/useZeroDev'
-import { getRedirectUrl, sanitizeRedirectURL, clearRedirectUrl } from '@/utils'
+import { getRedirectUrl, sanitizeRedirectURL, clearRedirectUrl } from '@/utils/general.utils'
import * as Sentry from '@sentry/nextjs'
import { useRouter, useSearchParams } from 'next/navigation'
import { useEffect } from 'react'
diff --git a/src/components/Setup/components/SetupWrapper.tsx b/src/components/Setup/components/SetupWrapper.tsx
index f04d32b5d..4ce9ce47c 100644
--- a/src/components/Setup/components/SetupWrapper.tsx
+++ b/src/components/Setup/components/SetupWrapper.tsx
@@ -1,13 +1,14 @@
import starImage from '@/assets/icons/star.png'
-import { Button } from '@/components/0_Bruddle'
+import { Button } from '@/components/0_Bruddle/Button'
import CloudsBackground from '@/components/0_Bruddle/CloudsBackground'
import { Icon } from '@/components/Global/Icons/Icon'
import { type BeforeInstallPromptEvent, type LayoutType, type ScreenId } from '@/components/Setup/Setup.types'
import InstallPWA from '@/components/Setup/Views/InstallPWA'
+import { useBravePWAInstallState } from '@/hooks/useBravePWAInstallState'
import { DeviceType } from '@/hooks/useGetDeviceType'
import classNames from 'classnames'
import Image from 'next/image'
-import { Children, type ReactNode, cloneElement, memo, type ReactElement } from 'react'
+import { Children, type ReactNode, cloneElement, memo, type ReactElement, useState } from 'react'
import { twMerge } from 'tailwind-merge'
/**
@@ -208,6 +209,19 @@ export const SetupWrapper = memo(
deviceType,
titleClassName,
}: SetupWrapperProps) => {
+ const { isBrave } = useBravePWAInstallState()
+ const [showBraveSuccessMessage, setShowBraveSuccessMessage] = useState(false)
+
+ const shouldShowBraveInstalledHeaderOnly =
+ (screenId === 'pwa-install' || screenId === 'android-initial-pwa-install') &&
+ isBrave &&
+ showBraveSuccessMessage
+
+ const headingTitle = shouldShowBraveInstalledHeaderOnly ? 'Success!' : title
+ const headingDescription = shouldShowBraveInstalledHeaderOnly
+ ? 'Please open the Peanut app from your home screen to continue setup.'
+ : description
+
return (
+
+ {
+ transaction.extraDataForDrawer.depositInstructions
+ .account_holder_name
+ }
+
+
+ }
+ hideBottomBorder={false}
+ />
+ )}
}
- hideBottomBorder={false}
+ hideBottomBorder={true}
/>
- {transaction.extraDataForDrawer.depositInstructions.account_holder_name && (
- Your contacts
- {filteredContacts.map((contact, index) => {
+ {contacts.map((contact, index) => {
const isVerified = contact.bridgeKycStatus === 'approved'
const displayName = contact.showFullName
? contact.fullName || contact.username
@@ -136,11 +145,11 @@ export default function ContactsView() {
return (
- {/* infinite scroll loader - only active when not searching */}
- {!searchQuery && (
-
- ) : (
- // no search results
+ ) : hasNoSearchResults ? (
+ // no search results - keep search input visible
- {isFetchingNextPage && (
-
- )}
+ {/* infinite scroll loader */}
+ Loading more...
- )}
-
+ {isFetchingNextPage && (
+
Loading more...
+ )}
+
-
),
}
diff --git a/src/components/Setup/Views/InstallPWA.tsx b/src/components/Setup/Views/InstallPWA.tsx
index c82699e4d..34243f177 100644
--- a/src/components/Setup/Views/InstallPWA.tsx
+++ b/src/components/Setup/Views/InstallPWA.tsx
@@ -1,4 +1,4 @@
-import { Button } from '@/components/0_Bruddle'
+import { Button } from '@/components/0_Bruddle/Button'
import { useToast } from '@/components/0_Bruddle/Toast'
import ErrorAlert from '@/components/Global/ErrorAlert'
import { Icon } from '@/components/Global/Icons/Icon'
@@ -11,26 +11,22 @@ import { useRouter } from 'next/navigation'
import { useCallback, useEffect, useState } from 'react'
import { captureException } from '@sentry/nextjs'
import { DeviceType } from '@/hooks/useGetDeviceType'
+import { useBravePWAInstallState } from '@/hooks/useBravePWAInstallState'
const StepTitle = ({ text }: { text: string }) => {text}
-// detect if the browser is brave -const isBraveBrowser = () => { - if (typeof window === 'undefined') return false - // brave browser has a specific navigator.brave property - return !!(navigator as Navigator & { brave?: { isBrave: () => Promise
-
- )
+ return null
}
// for other browsers, try to open the pwa in a new tab
diff --git a/src/components/Setup/Views/JoinBeta.tsx b/src/components/Setup/Views/JoinBeta.tsx
index 52e8e7804..b68a1f625 100644
--- a/src/components/Setup/Views/JoinBeta.tsx
+++ b/src/components/Setup/Views/JoinBeta.tsx
@@ -1,10 +1,10 @@
-import { Button } from '@/components/0_Bruddle'
+import { Button } from '@/components/0_Bruddle/Button'
import BaseInput from '@/components/0_Bruddle/BaseInput'
import ErrorAlert from '@/components/Global/ErrorAlert'
import { useSetupFlow } from '@/hooks/useSetupFlow'
import { useAppDispatch, useSetupStore } from '@/redux/hooks'
import { setupActions } from '@/redux/slices/setup-slice'
-import React, { useState } from 'react'
+import { useState } from 'react'
const JoinBeta = () => {
const { handleNext } = useSetupFlow()
diff --git a/src/components/Setup/Views/JoinWaitlist.tsx b/src/components/Setup/Views/JoinWaitlist.tsx
index b63a35204..5c3271284 100644
--- a/src/components/Setup/Views/JoinWaitlist.tsx
+++ b/src/components/Setup/Views/JoinWaitlist.tsx
@@ -1,10 +1,9 @@
'use client'
-import { Button } from '@/components/0_Bruddle'
+import { Button } from '@/components/0_Bruddle/Button'
import { useToast } from '@/components/0_Bruddle/Toast'
import ValidatedInput from '@/components/Global/ValidatedInput'
-import { useZeroDev } from '@/hooks/useZeroDev'
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
import { twMerge } from 'tailwind-merge'
import * as Sentry from '@sentry/nextjs'
import { useSetupFlow } from '@/hooks/useSetupFlow'
diff --git a/src/components/Setup/Views/Landing.tsx b/src/components/Setup/Views/Landing.tsx
index 7f154dbb3..d14aec6e2 100644
--- a/src/components/Setup/Views/Landing.tsx
+++ b/src/components/Setup/Views/Landing.tsx
@@ -1,11 +1,12 @@
'use client'
-import { Button, Card } from '@/components/0_Bruddle'
import { useToast } from '@/components/0_Bruddle/Toast'
import { useSetupFlow } from '@/hooks/useSetupFlow'
import { useLogin } from '@/hooks/useLogin'
import * as Sentry from '@sentry/nextjs'
import Link from 'next/link'
+import { Button } from '@/components/0_Bruddle/Button'
+import { Card } from '@/components/0_Bruddle/Card'
const LandingStep = () => {
const { handleNext } = useSetupFlow()
diff --git a/src/components/Setup/Views/PasskeySetupHelpModal.tsx b/src/components/Setup/Views/PasskeySetupHelpModal.tsx
index 042738966..c201081a6 100644
--- a/src/components/Setup/Views/PasskeySetupHelpModal.tsx
+++ b/src/components/Setup/Views/PasskeySetupHelpModal.tsx
@@ -1,9 +1,9 @@
'use client'
-import { Button } from '@/components/0_Bruddle'
+import { Button } from '@/components/0_Bruddle/Button'
import ActionModal from '@/components/Global/ActionModal'
import InfoCard from '@/components/Global/InfoCard'
-import { PASSKEY_TROUBLESHOOTING_STEPS, PASSKEY_WARNINGS, WebAuthnErrorName } from '@/utils'
+import { PASSKEY_TROUBLESHOOTING_STEPS, PASSKEY_WARNINGS, WebAuthnErrorName } from '@/utils/webauthn.utils'
interface PasskeySetupHelpModalProps {
visible: boolean
diff --git a/src/components/Setup/Views/SetupPasskey.tsx b/src/components/Setup/Views/SetupPasskey.tsx
index d73f43374..f6994f14e 100644
--- a/src/components/Setup/Views/SetupPasskey.tsx
+++ b/src/components/Setup/Views/SetupPasskey.tsx
@@ -1,11 +1,13 @@
-import { Button } from '@/components/0_Bruddle'
+import { Button } from '@/components/0_Bruddle/Button'
import { useSetupStore } from '@/redux/hooks'
import { useZeroDev } from '@/hooks/useZeroDev'
import { useSetupFlow } from '@/hooks/useSetupFlow'
import { useDeviceType } from '@/hooks/useGetDeviceType'
import { useEffect, useState } from 'react'
import Link from 'next/link'
-import { capturePasskeyDebugInfo, checkPasskeySupport, WebAuthnErrorName, withWebAuthnRetry } from '@/utils'
+import { capturePasskeyDebugInfo } from '@/utils/passkeyDebug'
+import { checkPasskeySupport } from '@/utils/passkeyPreflight'
+import { WebAuthnErrorName, withWebAuthnRetry } from '@/utils/webauthn.utils'
import { PasskeySetupHelpModal } from './PasskeySetupHelpModal'
import ErrorAlert from '@/components/Global/ErrorAlert'
import * as Sentry from '@sentry/nextjs'
diff --git a/src/components/Setup/Views/SignTestTransaction.tsx b/src/components/Setup/Views/SignTestTransaction.tsx
index 01d1cc5e4..2b98eab6c 100644
--- a/src/components/Setup/Views/SignTestTransaction.tsx
+++ b/src/components/Setup/Views/SignTestTransaction.tsx
@@ -1,4 +1,4 @@
-import { Button } from '@/components/0_Bruddle'
+import { Button } from '@/components/0_Bruddle/Button'
import { setupActions } from '@/redux/slices/setup-slice'
import { useAppDispatch } from '@/redux/hooks'
import { useZeroDev } from '@/hooks/useZeroDev'
@@ -7,18 +7,16 @@ import { useAuth } from '@/context/authContext'
import { AccountType } from '@/interfaces'
import { useState, useEffect } from 'react'
import { encodeFunctionData, erc20Abi, type Address, type Hex } from 'viem'
-import { PEANUT_WALLET_TOKEN, PEANUT_WALLET_CHAIN } from '@/constants'
-import { capturePasskeyDebugInfo } from '@/utils'
+import { PEANUT_WALLET_CHAIN, PEANUT_WALLET_TOKEN } from '@/constants/zerodev.consts'
+import { capturePasskeyDebugInfo } from '@/utils/passkeyDebug'
import * as Sentry from '@sentry/nextjs'
import Link from 'next/link'
-import { useRouter } from 'next/navigation'
import { twMerge } from 'tailwind-merge'
const SignTestTransaction = () => {
- const router = useRouter()
const dispatch = useAppDispatch()
const { address, handleSendUserOpEncoded } = useZeroDev()
- const { finalizeAccountSetup, isProcessing, error: setupError } = useAccountSetup()
+ const { finalizeAccountSetup, isProcessing, error: setupError, handleRedirect } = useAccountSetup()
const { user, isFetchingUser, fetchUser } = useAuth()
const [error, setError] = useStateApp installed successfully!
-- Please open the Peanut app from your home screen to continue setup. -
- {/* */} -
{/* navigation buttons */}
@@ -248,17 +262,19 @@ export const SetupWrapper = memo(
(screenId === 'signup' || screenId == 'join-beta') && 'md:max-h-12'
)}
>
- {title && (
+ {headingTitle && (
{/* main content area */}
- {title} + {headingTitle}
)} - {description &&{description}
} + {headingDescription && ( +{headingDescription}
+ )}
@@ -269,6 +285,7 @@ export const SetupWrapper = memo(
canInstall,
deviceType,
screenId,
+ setShowBraveSuccessMessage,
})
}
return child
diff --git a/src/components/TransactionDetails/TransactionCard.tsx b/src/components/TransactionDetails/TransactionCard.tsx
index 12b3c65b4..de888e5c3 100644
--- a/src/components/TransactionDetails/TransactionCard.tsx
+++ b/src/components/TransactionDetails/TransactionCard.tsx
@@ -8,11 +8,10 @@ import {
formatNumberForDisplay,
formatCurrency,
printableAddress,
- getAvatarUrl,
- getTransactionSign,
isStableCoin,
shortenStringLong,
-} from '@/utils'
+} from '@/utils/general.utils'
+import { getAvatarUrl, getTransactionSign } from '@/utils/history.utils'
import React, { lazy, Suspense } from 'react'
import Image from 'next/image'
import StatusPill, { type StatusPillType } from '../Global/StatusPill'
@@ -58,6 +57,7 @@ interface TransactionCardProps {
transaction: TransactionDetails
isPending?: boolean
haveSentMoneyToUser?: boolean
+ hideTxnAmount?: boolean
}
/**
@@ -75,6 +75,7 @@ const TransactionCard: React.FC = ({
transaction,
isPending = false,
haveSentMoneyToUser = false,
+ hideTxnAmount = false,
}) => {
// hook to manage the state of the details drawer (open/closed, selected transaction)
const { isDrawerOpen, selectedTransaction, openTransactionDetails, closeTransactionDetails } =
@@ -195,9 +196,17 @@ const TransactionCard: React.FC = ({
) : (
diff --git a/src/components/TransactionDetails/TransactionDetailsHeaderCard.tsx b/src/components/TransactionDetails/TransactionDetailsHeaderCard.tsx
index f32c19cd2..0bd667c89 100644
--- a/src/components/TransactionDetails/TransactionDetailsHeaderCard.tsx
+++ b/src/components/TransactionDetails/TransactionDetailsHeaderCard.tsx
@@ -3,7 +3,7 @@
import StatusBadge, { type StatusType } from '@/components/Global/Badges/StatusBadge'
import TransactionAvatarBadge from '@/components/TransactionDetails/TransactionAvatarBadge'
import { type TransactionType } from '@/components/TransactionDetails/TransactionCard'
-import { printableAddress } from '@/utils'
+import { printableAddress } from '@/utils/general.utils'
import Image from 'next/image'
import React from 'react'
import { isAddress as isWalletAddress } from 'viem'
@@ -280,7 +280,7 @@ export const TransactionDetailsHeaderCard: React.FC
diff --git a/src/components/TransactionDetails/TransactionDetailsReceipt.tsx b/src/components/TransactionDetails/TransactionDetailsReceipt.tsx
index 8e912bf35..dc8852918 100644
--- a/src/components/TransactionDetails/TransactionDetailsReceipt.tsx
+++ b/src/components/TransactionDetails/TransactionDetailsReceipt.tsx
@@ -16,7 +16,8 @@ import { useWallet } from '@/hooks/wallet/useWallet'
import { useUserStore } from '@/redux/hooks'
import { chargesApi } from '@/services/charges'
import useClaimLink from '@/components/Claim/useClaimLink'
-import { formatAmount, formatDate, getInitialsFromName, isStableCoin, formatCurrency, getAvatarUrl } from '@/utils'
+import { formatAmount, formatDate, isStableCoin, formatCurrency } from '@/utils/general.utils'
+import { getAvatarUrl } from '@/utils/history.utils'
import {
formatIban,
getContributorsFromCharge,
@@ -31,7 +32,7 @@ import { useQueryClient } from '@tanstack/react-query'
import Link from 'next/link'
import Image from 'next/image'
import React, { useMemo, useState, useEffect } from 'react'
-import { Button } from '../0_Bruddle'
+import { Button } from '@/components/0_Bruddle/Button'
import DisplayIcon from '../Global/DisplayIcon'
import { Icon } from '../Global/Icons/Icon'
import { PerkIcon } from './PerkIcon'
@@ -49,7 +50,7 @@ import {
type TransactionDetailsRowKey,
transactionDetailsRowKeys,
} from './transaction-details.utils'
-import { useSupportModalContext } from '@/context/SupportModalContext'
+import { useModalsContext } from '@/context/ModalsContext'
import { useRouter } from 'next/navigation'
import { countryData } from '@/components/AddMoney/consts'
import { useToast } from '@/components/0_Bruddle/Toast'
@@ -60,7 +61,7 @@ import {
} from '@/constants/manteca.consts'
import { mantecaApi } from '@/services/manteca'
import { getReceiptUrl } from '@/utils/history.utils'
-import { PEANUT_WALLET_CHAIN, PEANUT_WALLET_TOKEN_SYMBOL } from '@/constants'
+import { PEANUT_WALLET_CHAIN, PEANUT_WALLET_TOKEN_SYMBOL } from '@/constants/zerodev.consts'
import ContributorCard from '../Global/Contributors/ContributorCard'
import { requestsApi } from '@/services/requests'
import { PasskeyDocsLink } from '../Setup/Views/SignTestTransaction'
@@ -99,7 +100,7 @@ export const TransactionDetailsReceipt = ({
const [showCancelLinkModal, setShowCancelLinkModal] = useState(false)
const [tokenData, setTokenData] = useState<{ symbol: string; icon: string } | null>(null)
const [isTokenDataLoading, setIsTokenDataLoading] = useState(true)
- const { setIsSupportModalOpen } = useSupportModalContext()
+ const { setIsSupportModalOpen } = useModalsContext()
const toast = useToast()
const router = useRouter()
const [cancelLinkText, setCancelLinkText] = useState<'Cancelling' | 'Cancelled' | 'Cancel link'>('Cancel link')
@@ -160,25 +161,33 @@ export const TransactionDetailsReceipt = ({
)
),
txId: !!transaction.txHash,
- cancelled: !!(transaction.status === 'cancelled' && transaction.cancelledDate),
+ // show cancelled row if status is cancelled, use cancelledDate or fallback to createdAt
+ cancelled: transaction.status === 'cancelled',
claimed: !!(transaction.status === 'completed' && transaction.claimedAt),
completed: !!(
transaction.status === 'completed' &&
transaction.completedAt &&
transaction.extraDataForDrawer?.originalType !== EHistoryEntryType.DIRECT_SEND
),
- fee: transaction.fee !== undefined,
+ refunded: transaction.status === 'refunded',
+ fee: transaction.fee !== undefined && transaction.status !== 'cancelled',
exchangeRate: !!(
(transaction.direction === 'bank_deposit' ||
transaction.direction === 'qr_payment' ||
transaction.direction === 'bank_withdraw') &&
transaction.currency?.code &&
- transaction.currency.code.toUpperCase() !== 'USD'
+ transaction.currency.code.toUpperCase() !== 'USD' &&
+ transaction.status !== 'cancelled'
+ ),
+ bankAccountDetails: !!(
+ transaction.bankAccountDetails &&
+ transaction.bankAccountDetails.identifier &&
+ transaction.status !== 'cancelled'
),
- bankAccountDetails: !!(transaction.bankAccountDetails && transaction.bankAccountDetails.identifier),
transferId: !!(
transaction.id &&
- (transaction.direction === 'bank_withdraw' || transaction.direction === 'bank_claim')
+ (transaction.direction === 'bank_withdraw' || transaction.direction === 'bank_claim') &&
+ transaction.status !== 'cancelled'
),
depositInstructions: !!(
(transaction.extraDataForDrawer?.originalType === EHistoryEntryType.BRIDGE_ONRAMP ||
@@ -189,10 +198,14 @@ export const TransactionDetailsReceipt = ({
transaction.extraDataForDrawer.depositInstructions.bank_name
),
peanutFee: false, // Perk fee logic removed - perks now show as separate transactions
- points: !!(transaction.points && transaction.points > 0),
- comment: !!transaction.memo?.trim(),
- networkFee: !!(transaction.networkFeeDetails && transaction.sourceView === 'status'),
- attachment: !!transaction.attachmentUrl,
+ points: !!(transaction.points && transaction.points > 0 && transaction.status !== 'cancelled'),
+ comment: !!(transaction.memo?.trim() && transaction.status !== 'cancelled'),
+ networkFee: !!(
+ transaction.networkFeeDetails &&
+ transaction.sourceView === 'status' &&
+ transaction.status !== 'cancelled'
+ ),
+ attachment: !!(transaction.attachmentUrl && transaction.status !== 'cancelled'),
mantecaDepositInfo:
!isPublic &&
transaction.extraDataForDrawer?.originalType === EHistoryEntryType.MANTECA_ONRAMP &&
@@ -621,7 +634,9 @@ export const TransactionDetailsReceipt = ({
{rowVisibilityConfig.cancelled && (
{/* Collapsible bank details */}
+
{showBankDetails && (
<>
+ {transaction.extraDataForDrawer.depositInstructions.account_holder_name && (
+
- {displayAmount}
- {currencyDisplayAmount && (
- {currencyDisplayAmount}
+ {hideTxnAmount ? (
+ ****
+ ) : (
+ <>
+ {displayAmount}
+ {currencyDisplayAmount && (
+
+ {currencyDisplayAmount}
+
+ )}
+
)}
- {transaction.extraDataForDrawer.depositInstructions.deposit_message}
+ {transaction.extraDataForDrawer.depositInstructions.deposit_message.slice(
+ 0,
+ 10
+ )}
@@ -877,8 +904,32 @@ export const TransactionDetailsReceipt = ({
{icon &&
)
}
-export default DirectSuccessView
+export default PaymentSuccessView
diff --git a/src/features/payments/shared/components/SendWithPeanutCta.tsx b/src/features/payments/shared/components/SendWithPeanutCta.tsx
new file mode 100644
index 000000000..644937bc8
--- /dev/null
+++ b/src/features/payments/shared/components/SendWithPeanutCta.tsx
@@ -0,0 +1,115 @@
+'use client'
+
+/**
+ * primary cta button for peanut wallet payments
+ *
+ * shows different states:
+ * - not logged in: "continue with peanut" + redirects to signup, then redirects to the current page
+ * - logged in: "send with peanut" + executes payment
+ */
+
+import { PEANUT_LOGO_BLACK, PEANUTMAN_LOGO } from '@/assets'
+import { Button, type ButtonProps } from '@/components/0_Bruddle/Button'
+import type { IconName } from '@/components/Global/Icons/Icon'
+import { useAuth } from '@/context/authContext'
+import { saveRedirectUrl, saveToLocalStorage } from '@/utils/general.utils'
+import Image from 'next/image'
+import { useRouter } from 'next/navigation'
+import { useMemo } from 'react'
+
+interface SendWithPeanutCtaProps extends ButtonProps {
+ title?: string
+ // when true, will redirect to login if user is not logged in
+ requiresAuth?: boolean
+ insufficientBalance?: boolean
+}
+
+/**
+ * Button to continue with Peanut or login to continue with peanut icon
+ * @param title - The title of the button (optional)
+ * @param requiresAuth - Whether the button requires authentication
+ * @param onClick - The onClick handler
+ * @param props - The props for the button
+ * @returns The button component
+ */
+
+export default function SendWithPeanutCta({
+ title,
+ requiresAuth = true,
+ onClick,
+ insufficientBalance = false,
+ ...props
+}: SendWithPeanutCtaProps) {
+ const router = useRouter()
+ const { user, isFetchingUser } = useAuth()
+
+ const isLoggedIn = !!user?.user?.userId
+
+ const handleClick = (e: React.MouseEvent
{getTitle()}
- {recipientType !== 'USERNAME' || type === 'request_pay' ? (
-
+ {type === 'request_fulfilment' && (
+ 0 && (
= amount} />
)}
+
+ {/* request pot contributors drawer */}
+ {isRequestPot && contributors && ('EVM')
+ const { address: peanutWalletAddress } = useWallet()
+
+ const { data: depositAddressData, isLoading } = useQuery({
+ queryKey: ['rhino-deposit-address', charge?.uuid, chainType],
+ queryFn: () => {
+ if (!charge?.requestLink.uuid) {
+ throw new Error('Request ID is required')
+ }
+ if (!charge.uuid) {
+ throw new Error('Charge ID is required')
+ }
+ return rhinoApi.createRequestFulfilmentAddress(chainType, charge?.uuid as string, peanutWalletAddress)
+ },
+ enabled: !!charge,
+ staleTime: 1000 * 60 * 60 * 24, // 24 hours
+ })
+
+ const onSuccess = useCallback((_: number) => {
+ setIsExternalWalletPayment(true)
+ setCurrentView('STATUS')
+ }, [])
+
+ return (
+ (undefined)
+
+interface SendFlowProviderProps {
+ children: ReactNode
+ initialRecipient?: DirectSendRecipient
+}
+
+export const DirectSendFlowProvider: React.FC = ({ children, initialRecipient }) => {
+ const [amount, setAmount] = useState('')
+ const [usdAmount, setUsdAmount] = useState('')
+ const [currentView, setCurrentView] = useState('INITIAL')
+ const [recipient, setRecipient] = useState(initialRecipient ?? null)
+ const [attachment, setAttachment] = useState({})
+ const [charge, setCharge] = useState(null)
+ const [payment, setPayment] = useState(null)
+ const [txHash, setTxHash] = useState(null)
+ const [error, setError] = useState({ showError: false, errorMessage: '' })
+ const [isLoading, setIsLoading] = useState(false)
+ const [isSuccess, setIsSuccess] = useState(false)
+
+ const resetSendFlow = useCallback(() => {
+ setAmount('')
+ setUsdAmount('')
+ setCurrentView('INITIAL')
+ setAttachment({})
+ setCharge(null)
+ setPayment(null)
+ setTxHash(null)
+ setError({ showError: false, errorMessage: '' })
+ setIsLoading(false)
+ setIsSuccess(false)
+ }, [])
+
+ const value = useMemo(
+ () => ({
+ amount,
+ setAmount,
+ usdAmount,
+ setUsdAmount,
+ currentView,
+ setCurrentView,
+ recipient,
+ setRecipient,
+ attachment,
+ setAttachment,
+ charge,
+ setCharge,
+ payment,
+ setPayment,
+ txHash,
+ setTxHash,
+ error,
+ setError,
+ isLoading,
+ setIsLoading,
+ isSuccess,
+ setIsSuccess,
+ resetSendFlow,
+ }),
+ [
+ amount,
+ usdAmount,
+ currentView,
+ recipient,
+ attachment,
+ charge,
+ payment,
+ txHash,
+ error,
+ isLoading,
+ isSuccess,
+ resetSendFlow,
+ ]
+ )
+
+ return {children}
+}
+
+export const useDirectSendFlowContext = (): DirectSendFlowContextType => {
+ const context = useContext(DirectSendFlowContext)
+ if (context === undefined) {
+ throw new Error('useDirectSendFlowContext must be used within DirectSendFlowProvider')
+ }
+ return context
+}
diff --git a/src/features/payments/flows/direct-send/DirectSendPage.tsx b/src/features/payments/flows/direct-send/DirectSendPage.tsx
new file mode 100644
index 000000000..2c37055f1
--- /dev/null
+++ b/src/features/payments/flows/direct-send/DirectSendPage.tsx
@@ -0,0 +1,42 @@
+'use client'
+
+/**
+ * main entry point for direct send flow
+ *
+ * wraps content with context provider and renders the correct view:
+ * - INITIAL: amount input with optional message
+ * - STATUS: success view after payment
+ *
+ * receives pre-resolved recipient data from wrapper
+ */
+
+import { DirectSendFlowProvider, useDirectSendFlowContext, type DirectSendRecipient } from './DirectSendFlowContext'
+import { SendInputView } from './views/SendInputView'
+import { SendSuccessView } from './views/SendSuccessView'
+
+// internal component that switches views
+function SendFlowContent() {
+ const { currentView } = useDirectSendFlowContext()
+
+ switch (currentView) {
+ case 'STATUS':
+ return
+
+ )
+}
diff --git a/src/features/payments/flows/direct-send/DirectSendPageWrapper.tsx b/src/features/payments/flows/direct-send/DirectSendPageWrapper.tsx
new file mode 100644
index 000000000..06136fc82
--- /dev/null
+++ b/src/features/payments/flows/direct-send/DirectSendPageWrapper.tsx
@@ -0,0 +1,72 @@
+'use client'
+
+/**
+ * wrapper component for DirectSendPage
+ *
+ * handles async username resolution before rendering the actual flow.
+ * finds the user's peanut wallet address from their username.
+ *
+ * shows loading/error states while resolving
+ *
+ * used by: /send/[...username] route
+ */
+
+import { useUserByUsername } from '@/hooks/useUserByUsername'
+import { AccountType } from '@/interfaces'
+import PeanutLoading from '@/components/Global/PeanutLoading'
+import ErrorAlert from '@/components/Global/ErrorAlert'
+import NavHeader from '@/components/Global/NavHeader'
+import { useRouter } from 'next/navigation'
+import { useMemo } from 'react'
+import { type Address } from 'viem'
+import type { DirectSendRecipient } from './DirectSendFlowContext'
+import { DirectSendPage } from './DirectSendPage'
+
+interface DirectSendPageWrapperProps {
+ username: string
+}
+
+export function DirectSendPageWrapper({ username }: DirectSendPageWrapperProps) {
+ const router = useRouter()
+ const { user, isLoading, error } = useUserByUsername(username)
+
+ // resolve user to recipient
+ const recipient = useMemo(() => {
+ if (!user) return null
+
+ // find peanut wallet address
+ const walletAccount = user.accounts.find((acc) => acc.type === AccountType.PEANUT_WALLET)
+ if (!walletAccount) return null
+
+ return {
+ username: user.username,
+ address: walletAccount.identifier as Address,
+ userId: user.userId,
+ fullName: user.fullName,
+ }
+ }, [user])
+
+ // loading state
+ if (isLoading) {
+ return (
+ (null)
+
+interface SemanticRequestFlowProviderProps {
+ children: ReactNode
+ initialParsedUrl: ParsedURL
+ initialChargeId?: string
+}
+
+export function SemanticRequestFlowProvider({
+ children,
+ initialParsedUrl,
+ initialChargeId,
+}: SemanticRequestFlowProviderProps) {
+ // view state - determine initial view based on chargeId and recipient type
+ // for usernames with chargeId: start at INITIAL (direct request flow)
+ // for address/ens with chargeId: start at CONFIRM (semantic request payment)
+ const [currentView, setCurrentView] = useState(() => {
+ if (!initialChargeId) return 'INITIAL'
+ const isUsernameRecipient = initialParsedUrl.recipient?.recipientType === 'USERNAME'
+ return isUsernameRecipient ? 'INITIAL' : 'CONFIRM'
+ })
+
+ // store the initial charge id for fetching
+ const [chargeIdFromUrl] = useState(initialChargeId)
+
+ // parsed url data
+ const [parsedUrl, setParsedUrl] = useState(initialParsedUrl)
+
+ // track what came from url
+ const isAmountFromUrl = !!initialParsedUrl.amount
+ const isTokenFromUrl = !!initialParsedUrl.token
+ const isChainFromUrl = !!initialParsedUrl.chain
+
+ // amount state
+ const [amount, setAmount] = useState(initialParsedUrl.amount || '')
+ const [usdAmount, setUsdAmount] = useState(initialParsedUrl.amount || '')
+
+ // attachment state
+ const [attachment, setAttachment] = useState({})
+
+ // charge and payment results
+ const [charge, setCharge] = useState(null)
+ const [payment, setPayment] = useState(null)
+ const [txHash, setTxHash] = useState(null)
+
+ // ui state
+ const [error, setError] = useState({ showError: false, errorMessage: '' })
+ const [isLoading, setIsLoading] = useState(false)
+ const [isSuccess, setIsSuccess] = useState(false)
+ const [isExternalWalletPayment, setIsExternalWalletPayment] = useState(false)
+
+ // derive recipient from parsed url
+ const recipient = useMemo(() => {
+ if (!parsedUrl?.recipient) return null
+ return {
+ identifier: parsedUrl.recipient.identifier,
+ recipientType: parsedUrl.recipient.recipientType,
+ resolvedAddress: parsedUrl.recipient.resolvedAddress as Address,
+ }
+ }, [parsedUrl])
+
+ // reset flow
+ const resetSemanticRequestFlow = useCallback(() => {
+ setCurrentView('INITIAL')
+ setAmount(initialParsedUrl.amount || '')
+ setUsdAmount(initialParsedUrl.amount || '')
+ setAttachment({})
+ setCharge(null)
+ setPayment(null)
+ setTxHash(null)
+ setError({ showError: false, errorMessage: '' })
+ setIsLoading(false)
+ setIsSuccess(false)
+ setIsExternalWalletPayment(false)
+ }, [initialParsedUrl.amount])
+
+ const value = useMemo(
+ () => ({
+ currentView,
+ setCurrentView,
+ parsedUrl,
+ setParsedUrl,
+ recipient,
+ chargeIdFromUrl,
+ amount,
+ setAmount,
+ usdAmount,
+ setUsdAmount,
+ isAmountFromUrl,
+ isTokenFromUrl,
+ isChainFromUrl,
+ attachment,
+ setAttachment,
+ charge,
+ setCharge,
+ payment,
+ setPayment,
+ txHash,
+ setTxHash,
+ error,
+ setError,
+ isLoading,
+ setIsLoading,
+ isSuccess,
+ setIsSuccess,
+ resetSemanticRequestFlow,
+ isExternalWalletPayment,
+ setIsExternalWalletPayment,
+ }),
+ [
+ currentView,
+ parsedUrl,
+ recipient,
+ chargeIdFromUrl,
+ amount,
+ usdAmount,
+ isAmountFromUrl,
+ isTokenFromUrl,
+ isChainFromUrl,
+ attachment,
+ charge,
+ payment,
+ txHash,
+ error,
+ isLoading,
+ isSuccess,
+ resetSemanticRequestFlow,
+ isExternalWalletPayment,
+ ]
+ )
+
+ return {children}
+}
+
+export function useSemanticRequestFlowContext() {
+ const context = useContext(SemanticRequestFlowContext)
+ if (!context) {
+ throw new Error('useSemanticRequestFlowContext must be used within SemanticRequestFlowProvider')
+ }
+ return context
+}
diff --git a/src/features/payments/flows/semantic-request/SemanticRequestPage.tsx b/src/features/payments/flows/semantic-request/SemanticRequestPage.tsx
new file mode 100644
index 000000000..af8ab5bc7
--- /dev/null
+++ b/src/features/payments/flows/semantic-request/SemanticRequestPage.tsx
@@ -0,0 +1,55 @@
+'use client'
+
+/**
+ * main entry point for semantic request flow
+ *
+ * wraps content with context provider and renders the correct view:
+ * - INITIAL: amount/token input
+ * - CONFIRM: review cross-chain payment details
+ * - STATUS: success view after payment
+ * - RECEIPT: shows receipt for already-paid charges
+ *
+ * receives pre-parsed url data from wrapper
+ */
+
+import { SemanticRequestFlowProvider, useSemanticRequestFlowContext } from './SemanticRequestFlowContext'
+import { SemanticRequestInputView } from './views/SemanticRequestInputView'
+import { SemanticRequestConfirmView } from './views/SemanticRequestConfirmView'
+import { SemanticRequestSuccessView } from './views/SemanticRequestSuccessView'
+import { SemanticRequestReceiptView } from './views/SemanticRequestReceiptView'
+import { type ParsedURL } from '@/lib/url-parser/types/payment'
+import SemanticRequestExternalWalletView from './views/SemanticRequestExternalWalletView'
+
+// internal component that switches views
+function SemanticRequestFlowContent() {
+ const { currentView } = useSemanticRequestFlowContext()
+
+ switch (currentView) {
+ case 'CONFIRM':
+ return
+
+ )
+}
diff --git a/src/features/payments/flows/semantic-request/SemanticRequestPageWrapper.tsx b/src/features/payments/flows/semantic-request/SemanticRequestPageWrapper.tsx
new file mode 100644
index 000000000..09ac39904
--- /dev/null
+++ b/src/features/payments/flows/semantic-request/SemanticRequestPageWrapper.tsx
@@ -0,0 +1,94 @@
+'use client'
+
+/**
+ * wrapper component for SemanticRequestPage
+ *
+ * handles async url parsing before rendering the actual flow.
+ * parses semantic urls like /username, /0x1234..., /vitalik.eth
+ * also supports amount/token/chain in url path
+ *
+ * shows loading/error states while parsing
+ *
+ * used by: /[...recipient] route for address/ens/username payments
+ */
+
+import { SemanticRequestPage } from './SemanticRequestPage'
+import { parsePaymentURL, type ParseUrlError } from '@/lib/url-parser/parser'
+import PeanutLoading from '@/components/Global/PeanutLoading'
+import ErrorAlert from '@/components/Global/ErrorAlert'
+import NavHeader from '@/components/Global/NavHeader'
+import { useRouter, useSearchParams } from 'next/navigation'
+import { useEffect, useState } from 'react'
+import { type ParsedURL } from '@/lib/url-parser/types/payment'
+import { formatAmount } from '@/utils/general.utils'
+
+interface SemanticRequestPageWrapperProps {
+ recipient: string[]
+}
+
+export function SemanticRequestPageWrapper({ recipient }: SemanticRequestPageWrapperProps) {
+ const router = useRouter()
+ const searchParams = useSearchParams()
+ const chargeIdFromUrl = searchParams.get('chargeId')
+
+ const [parsedUrl, setParsedUrl] = useState(null)
+ const [isLoading, setIsLoading] = useState(true)
+ const [error, setError] = useState(null)
+
+ // parse the url segments
+ useEffect(() => {
+ if (!recipient || recipient.length === 0) {
+ setError({ message: 'Invalid URL format' } as ParseUrlError)
+ setIsLoading(false)
+ return
+ }
+
+ setIsLoading(true)
+ setError(null)
+
+ parsePaymentURL(recipient)
+ .then((result) => {
+ if (result.error) {
+ setError(result.error)
+ } else if (result.parsedUrl) {
+ // format amount if present
+ const formatted = {
+ ...result.parsedUrl,
+ amount: result.parsedUrl.amount ? formatAmount(result.parsedUrl.amount) : undefined,
+ }
+ setParsedUrl(formatted)
+ }
+ })
+ .catch((err) => {
+ console.error('failed to parse url:', err)
+ setError({ message: 'Invalid URL format' } as ParseUrlError)
+ })
+ .finally(() => {
+ setIsLoading(false)
+ })
+ }, [recipient])
+
+ // loading state
+ if (isLoading) {
+ return (
+ (() => {
+ if (isFeeEstimationError) return '-'
+ if (calculatedGasCost === undefined) {
+ return 'Sponsored by Peanut!'
+ }
+ if (calculatedGasCost < 0.01) {
+ return 'Sponsored by Peanut!'
+ }
+ return (
+ <>
+ $ {calculatedGasCost.toFixed(2)}
+ {' - '}
+ Sponsored by Peanut!
+
+ )
+ }, [calculatedGasCost, isFeeEstimationError])
+
+ // min received amount
+ const minReceived = useMemo(() => {
+ if (!charge?.tokenDecimals || !requestedResolvedTokenSymbol) return null
+ if (!calculatedRoute) {
+ return `$ ${charge?.tokenAmount}`
+ }
+ const amount = formatAmount(
+ formatUnits(BigInt(calculatedRoute.rawResponse.route.estimate.toAmountMin), charge.tokenDecimals)
+ )
+ return isStableCoin(requestedResolvedTokenSymbol) ? `$ ${amount}` : `${amount} ${requestedResolvedTokenSymbol}`
+ }, [calculatedRoute, charge?.tokenDecimals, charge?.tokenAmount, requestedResolvedTokenSymbol])
+
+ // error message (route expiry auto-retries)
+ const errorMessage = useMemo(() => {
+ if (routeError) return routeError
+ if (error.showError) return error.errorMessage
+ return null
+ }, [routeError, error])
+
+ // handle confirm
+ const handleConfirm = () => {
+ if (!isLoading && !isCalculatingRoute) {
+ executePayment()
+ }
+ }
+
+ // handle retry
+ const handleRetry = async () => {
+ if (errorMessage) {
+ // retry route calculation
+ await prepareRoute()
+ } else {
+ await executePayment()
+ }
+ }
+
+ // show loading if we don't have charge details yet or fetching
+ if (!charge || isFetchingCharge) {
+ return (
+ ('EVM')
+ const { address: peanutWalletAddress } = useWallet()
+
+ const { data: depositAddressData, isLoading } = useQuery({
+ queryKey: ['rhino-deposit-address', charge?.uuid, chainType],
+ queryFn: () => {
+ if (!charge?.uuid) {
+ throw new Error('Charge ID is required')
+ }
+ return rhinoApi.createRequestFulfilmentAddress(chainType, charge?.uuid as string, peanutWalletAddress)
+ },
+ enabled: !!charge,
+ staleTime: 1000 * 60 * 60 * 24, // 24 hours
+ })
+
+ const onSuccess = useCallback((_: number) => {
+ setIsExternalWalletPayment(true)
+ setCurrentView('STATUS')
+ }, [])
+
+ return (
+ setCurrentView('INITIAL')}
+ showUserCard
+ amount={Number(amount)}
+ identifier={
+ charge?.requestLink.recipientAccount.type === 'peanut-wallet'
+ ? charge?.requestLink.recipientAccount.user.username
+ : charge?.requestLink.recipientAccount.identifier
+ }
+ />
+ )
+}
+
+export default SemanticRequestExternalWalletView
diff --git a/src/features/payments/flows/semantic-request/views/SemanticRequestInputView.tsx b/src/features/payments/flows/semantic-request/views/SemanticRequestInputView.tsx
new file mode 100644
index 000000000..f24646be7
--- /dev/null
+++ b/src/features/payments/flows/semantic-request/views/SemanticRequestInputView.tsx
@@ -0,0 +1,207 @@
+'use client'
+
+/**
+ * input view for semantic request flow
+ *
+ * displays:
+ * - recipient card (address/ens/username)
+ * - amount input
+ * - token selector (for address/ens recipients, not usernames)
+ * - payment method options
+ *
+ * for same-chain usdc: executes payment directly
+ * for cross-chain: navigates to confirm view
+ */
+
+import { useEffect, useContext } from 'react'
+import NavHeader from '@/components/Global/NavHeader'
+import AmountInput from '@/components/Global/AmountInput'
+import UserCard from '@/components/User/UserCard'
+import ErrorAlert from '@/components/Global/ErrorAlert'
+import SupportCTA from '@/components/Global/SupportCTA'
+import TokenSelector from '@/components/Global/TokenSelector/TokenSelector'
+import { useSemanticRequestFlow } from '../useSemanticRequestFlow'
+import { useRouter } from 'next/navigation'
+import SendWithPeanutCta from '@/features/payments/shared/components/SendWithPeanutCta'
+import { PaymentMethodActionList } from '@/features/payments/shared/components/PaymentMethodActionList'
+import { printableAddress, areEvmAddressesEqual } from '@/utils/general.utils'
+import { tokenSelectorContext } from '@/context'
+import { PEANUT_WALLET_CHAIN, PEANUT_WALLET_TOKEN } from '@/constants/zerodev.consts'
+
+export function SemanticRequestInputView() {
+ const router = useRouter()
+ const {
+ amount,
+ recipient,
+ parsedUrl,
+ chargeIdFromUrl,
+ isAmountFromUrl,
+ error,
+ formattedBalance,
+ canProceed,
+ isInsufficientBalance,
+ isLoading,
+ isLoggedIn,
+ isConnected,
+ setAmount,
+ handlePayment,
+ setCurrentView,
+ } = useSemanticRequestFlow()
+
+ // token selector context for setting initial values from url
+ const {
+ setSelectedChainID,
+ setSelectedTokenAddress,
+ selectedChainID,
+ selectedTokenAddress,
+ supportedSquidChainsAndTokens,
+ selectedTokenData,
+ } = useContext(tokenSelectorContext)
+
+ // initialize token/chain from parsed url
+ useEffect(() => {
+ if (!parsedUrl) return
+
+ // set chain from url if available
+ if (parsedUrl.chain?.chainId) {
+ setSelectedChainID(parsedUrl.chain.chainId)
+ } else {
+ // default to arbitrum for external recipients
+ setSelectedChainID(PEANUT_WALLET_CHAIN.id.toString())
+ }
+
+ // set token from url if available
+ if (parsedUrl.token?.address) {
+ setSelectedTokenAddress(parsedUrl.token.address)
+ } else if (parsedUrl.chain?.chainId) {
+ // default to usdc on the selected chain
+ const chainData = supportedSquidChainsAndTokens[parsedUrl.chain.chainId]
+ const defaultToken = chainData?.tokens.find((t) => t.symbol.toLowerCase() === 'usdc')
+ if (defaultToken) {
+ setSelectedTokenAddress(defaultToken.address)
+ }
+ } else {
+ // default to peanut wallet usdc
+ setSelectedTokenAddress(PEANUT_WALLET_TOKEN)
+ }
+ }, [parsedUrl, setSelectedChainID, setSelectedTokenAddress, supportedSquidChainsAndTokens])
+
+ // handle submit
+ const handleSubmit = () => {
+ if (canProceed && !isLoading) {
+ handlePayment()
+ }
+ }
+
+ const handleOpenExternalWalletFlow = async () => {
+ if (canProceed && !isLoading) {
+ const res = await handlePayment(true, true) // return after creating charge
+ // Proceed only if charge is created successfully
+ if (res && res.success) {
+ setCurrentView('EXTERNAL_WALLET')
+ }
+ }
+ }
+
+ // handle back navigation
+ const handleGoBack = () => {
+ if (window.history.length > 1) {
+ router.back()
+ } else {
+ router.push('/')
+ }
+ }
+
+ // determine button state
+ const isButtonDisabled = !canProceed || isLoading
+ const isAmountEntered = !!amount && parseFloat(amount) > 0
+
+ // get display name for recipient
+ const recipientDisplayName =
+ recipient?.recipientType === 'ADDRESS'
+ ? printableAddress(recipient.resolvedAddress)
+ : recipient?.identifier || ''
+
+ // check if using peanut wallet default (usdc on arb)
+ const isUsingPeanutDefault =
+ selectedChainID === PEANUT_WALLET_CHAIN.id.toString() &&
+ areEvmAddressesEqual(selectedTokenAddress, PEANUT_WALLET_TOKEN)
+
+ // determine if we should show token selector
+ // only show when chain is NOT specified in url AND recipient is ADDRESS or ENS
+ const showTokenSelector =
+ !parsedUrl?.chain?.chainId &&
+ (recipient?.recipientType === 'ADDRESS' || recipient?.recipientType === 'ENS') &&
+ isConnected
+
+ return (
+ = {
+ id: successfulPayment.payerTransactionHash || charge.uuid,
+ txHash: successfulPayment.payerTransactionHash,
+ status: 'completed' as StatusPillType,
+ amount: parseFloat(charge.tokenAmount),
+ createdAt: new Date(charge.createdAt),
+ completedAt: new Date(successfulPayment.createdAt),
+ tokenSymbol: charge.tokenSymbol,
+ direction: 'receive', // showing receipt from recipient's perspective
+ initials: getInitialsFromName(payerName),
+ extraDataForDrawer: {
+ isLinkTransaction: false,
+ originalType: EHistoryEntryType.REQUEST,
+ originalUserRole: EHistoryUserRole.RECIPIENT,
+ link: receiptLink,
+ },
+ userName: payerName,
+ sourceView: 'status',
+ memo: charge.requestLink?.reference || undefined,
+ attachmentUrl: charge.requestLink?.attachmentUrl || undefined,
+ tokenDisplayDetails: {
+ tokenSymbol: resolvedTokenSymbol || charge.tokenSymbol,
+ chainName: resolvedChainName,
+ tokenIconUrl: tokenIconUrl,
+ chainIconUrl: chainIconUrl,
+ },
+ networkFeeDetails: {
+ amountDisplay: networkFeeDisplayValue,
+ moreInfoText: 'This transaction may face slippage due to token conversion or cross-chain bridging.',
+ },
+ peanutFeeDetails: {
+ amountDisplay: peanutFeeDisplayValue,
+ },
+ currency: charge.currencyAmount ? { amount: charge.currencyAmount, code: 'USD' } : undefined,
+ }
+
+ return details as TransactionDetails
+ }, [charge, recipient, parsedUrl, tokenIconUrl, chainIconUrl, resolvedChainName, resolvedTokenSymbol])
+
+ // show loading if fetching charge
+ if (isFetchingCharge || !charge) {
+ return (
+
+ )
+}
+
+// re-export for backward compatibility
+export { PaymentMethodActionList as SendActionList }
diff --git a/src/components/Payment/Views/Status.payment.view.tsx b/src/features/payments/shared/components/PaymentSuccessView.tsx
similarity index 87%
rename from src/components/Payment/Views/Status.payment.view.tsx
rename to src/features/payments/shared/components/PaymentSuccessView.tsx
index c8b916d61..8789657d1 100644
--- a/src/components/Payment/Views/Status.payment.view.tsx
+++ b/src/features/payments/shared/components/PaymentSuccessView.tsx
@@ -1,5 +1,19 @@
'use client'
-import { Button } from '@/components/0_Bruddle'
+
+/**
+ * shared success view for all payment flows
+ *
+ * displays:
+ * - success animation with peanut mascot
+ * - amount sent and recipient name
+ * - optional message/attachment
+ * - points earned (with confetti)
+ * - receipt drawer for transaction details
+ *
+ * used by: send, contribute-pot, semantic-request, withdraw flows
+ */
+
+import { Button } from '@/components/0_Bruddle/Button'
import AddressLink from '@/components/Global/AddressLink'
import Card from '@/components/Global/Card'
import CreateAccountButton from '@/components/Global/CreateAccountButton'
@@ -9,32 +23,37 @@ import { SoundPlayer } from '@/components/Global/SoundPlayer'
import { type StatusPillType } from '@/components/Global/StatusPill'
import { TransactionDetailsDrawer } from '@/components/TransactionDetails/TransactionDetailsDrawer'
import { type TransactionDetails } from '@/components/TransactionDetails/transactionTransformer'
-import { TRANSACTIONS, BASE_URL } from '@/constants'
import { useTokenChainIcons } from '@/hooks/useTokenChainIcons'
import { useTransactionDetailsDrawer } from '@/hooks/useTransactionDetailsDrawer'
import { EHistoryEntryType, EHistoryUserRole } from '@/hooks/useTransactionHistory'
import { type RecipientType } from '@/lib/url-parser/types/payment'
-import { usePaymentStore, useUserStore } from '@/redux/hooks'
-import { paymentActions } from '@/redux/slices/payment-slice'
-import { type ApiUser } from '@/services/users'
-import { formatAmount, getInitialsFromName, printableAddress } from '@/utils'
+import { useUserStore } from '@/redux/hooks'
+import type { TRequestChargeResponse, PaymentCreationResponse, ChargeEntry } from '@/services/services.types'
+import { formatAmount, getInitialsFromName, printableAddress } from '@/utils/general.utils'
import { useQueryClient } from '@tanstack/react-query'
import Image from 'next/image'
import { useRouter } from 'next/navigation'
import { type ReactNode, useEffect, useMemo, useRef } from 'react'
-import { useDispatch } from 'react-redux'
-import STAR_STRAIGHT_ICON from '@/assets/icons/starStraight.svg'
import { usePointsConfetti } from '@/hooks/usePointsConfetti'
import chillPeanutAnim from '@/animations/GIF_ALPHA_BACKGORUND/512X512_ALPHA_GIF_konradurban_01.gif'
import { useHaptic } from 'use-haptic'
import PointsCard from '@/components/Common/PointsCard'
+import { BASE_URL } from '@/constants/general.consts'
+import { TRANSACTIONS } from '@/constants/query.consts'
+import type { ParsedURL } from '@/lib/url-parser/types/payment'
+
+// minimal user info needed for display
+type UserDisplayInfo = {
+ username?: string
+ fullName?: string
+}
type DirectSuccessViewProps = {
- user?: ApiUser
+ user?: UserDisplayInfo
amount?: string
message?: string | ReactNode
recipientType?: RecipientType
- type?: 'SEND' | 'REQUEST'
+ type?: 'SEND' | 'REQUEST' | 'DEPOSIT'
headerTitle?: string
currencyAmount?: string
isExternalWalletFlow?: boolean
@@ -42,9 +61,14 @@ type DirectSuccessViewProps = {
redirectTo?: string
onComplete?: () => void
points?: number
+ // props to receive data directly instead of from redux
+ chargeDetails?: TRequestChargeResponse | ChargeEntry | null
+ paymentDetails?: PaymentCreationResponse | null
+ parsedPaymentData?: ParsedURL | null
+ usdAmount?: string
}
-const DirectSuccessView = ({
+const PaymentSuccessView = ({
user,
amount,
message,
@@ -57,10 +81,12 @@ const DirectSuccessView = ({
redirectTo = '/home',
onComplete,
points,
+ chargeDetails,
+ paymentDetails,
+ parsedPaymentData,
+ usdAmount,
}: DirectSuccessViewProps) => {
const router = useRouter()
- const { chargeDetails, parsedPaymentData, usdAmount, paymentDetails } = usePaymentStore()
- const dispatch = useDispatch()
const { isDrawerOpen, selectedTransaction, openTransactionDetails, closeTransactionDetails } =
useTransactionDetailsDrawer()
const { user: authUser } = useUserStore()
@@ -174,14 +200,14 @@ const DirectSuccessView = ({
}, [queryClient])
const handleDone = () => {
- onComplete?.()
+ // Navigate first, then call onComplete - otherwise onComplete may reset state
+ // causing this component to unmount before router.push executes
if (!!authUser?.user.userId) {
- // reset payment state when done
router.push('/home')
- dispatch(paymentActions.resetPaymentState())
} else {
router.push('/setup')
}
+ onComplete?.()
}
const getTitle = () => {
@@ -189,6 +215,7 @@ const DirectSuccessView = ({
if (isWithdrawFlow) return 'You just withdrew'
if (type === 'SEND') return 'You sent '
if (type === 'REQUEST') return 'You requested '
+ if (type === 'DEPOSIT') return 'You added '
}
useEffect(() => {
@@ -289,4 +316,4 @@ const DirectSuccessView = ({
+
)}
- isLink={type !== 'request_pay'}
- />
+
+ {type !== 'request_fulfilment' && (
+ ${amount}
+
+
+ Send the exact amount!
+
- {isCryptoAddress ? (
+ {isCryptoAddressComputed ? (
+ *
+ loadingClassName?: string
+}
+
+export function ValidatedUsernameWrapper({
+ username,
+ children,
+ errorProps,
+ loadingClassName = 'flex min-h-[calc(100dvh-180px)] w-full items-center justify-center',
+}: ValidatedUsernameWrapperProps) {
+ const [error, setError] = useState(null)
+ const [isValidating, setIsValidating] = useState(false)
+ const [isValidated, setIsValidated] = useState(false)
+
+ // validate username before showing children
+ useEffect(() => {
+ let isMounted = true
+
+ const validateUsername = async () => {
+ setIsValidating(true)
+ setError(null)
+
+ const isValid = await verifyPeanutUsername(username)
+
+ if (!isMounted) return
+
+ if (!isValid) {
+ setError({
+ title: `We don't know any @${username}`,
+ message: 'Are you sure you clicked on the right link?',
+ buttonText: 'Go back to home',
+ redirectTo: '/home',
+ showLearnMore: false,
+ supportMessageTemplate: 'I clicked on this link but got an error: {url}',
+ ...errorProps,
+ })
+ setIsValidated(false)
+ } else {
+ setIsValidated(true)
+ }
+
+ setIsValidating(false)
+ }
+
+ validateUsername()
+
+ return () => {
+ isMounted = false
+ }
+ }, [username, errorProps])
+
+ // show loading while validating
+ if (isValidating) {
+ return (
+ {
try {
- const response = await fetchWithSentry(`${consts.SQUID_API_URL}/status?transactionId=${txHash}`, {
- headers: { 'x-integrator-id': consts.SQUID_INTEGRATOR_ID }, // TODO: request v2 removes checking squid status
+ const response = await fetchWithSentry(`${SQUID_API_URL}/status?transactionId=${txHash}`, {
+ headers: { 'x-integrator-id': SQUID_INTEGRATOR_ID }, // TODO: request v2 removes checking squid status
})
const data = await response.json()
return data
diff --git a/src/config/peanut.config.tsx b/src/config/peanut.config.tsx
index f663bd95a..79cef901b 100644
--- a/src/config/peanut.config.tsx
+++ b/src/config/peanut.config.tsx
@@ -9,20 +9,17 @@ import { Provider as ReduxProvider } from 'react-redux'
import store from '@/redux/store'
import 'react-tooltip/dist/react-tooltip.css'
-import '../../sentry.client.config'
-import '../../sentry.edge.config'
-import '../../sentry.server.config'
+// Note: Sentry configs are auto-loaded by @sentry/nextjs via next.config.js
+// DO NOT import them here - it bundles server/edge configs into client code
export function PeanutProvider({ children }: { children: React.ReactNode }) {
- if (process.env.NODE_ENV !== 'development') {
- useEffect(() => {
+ useEffect(() => {
+ if (process.env.NODE_ENV !== 'development') {
peanut.toggleVerbose(true)
// LogRocket.init('x2zwq1/peanut-protocol')
countries.registerLocale(enLocale)
- }, [])
- }
-
- console.log('NODE_ENV:', process.env.NODE_ENV)
+ }
+ }, [])
return (
diff --git a/src/config/theme.config.tsx b/src/config/theme.config.tsx
index 8e85b4984..1d6791fa7 100644
--- a/src/config/theme.config.tsx
+++ b/src/config/theme.config.tsx
@@ -1,14 +1,7 @@
'use client'
-import { theme } from '@/styles/theme'
-import { ColorModeProvider, ColorModeScript } from '@chakra-ui/color-mode'
-import { ChakraProvider } from '@chakra-ui/react'
+import { ThemeProvider as MuiThemeProvider, createTheme } from '@mui/material/styles'
export const ThemeProvider = ({ children }: { children: React.ReactNode }) => {
- return (
-
- {children}
-
- )
+ return {children}
}
diff --git a/src/constants/countryCurrencyMapping.ts b/src/constants/countryCurrencyMapping.ts
index 3af5d0e37..26c926cca 100644
--- a/src/constants/countryCurrencyMapping.ts
+++ b/src/constants/countryCurrencyMapping.ts
@@ -7,7 +7,7 @@ export interface CountryCurrencyMapping {
path?: string
}
-export const countryCurrencyMappings: CountryCurrencyMapping[] = [
+const countryCurrencyMappings: CountryCurrencyMapping[] = [
// SEPA Countries (Eurozone)
{ currencyCode: 'EUR', currencyName: 'Euro', country: 'Eurozone', flagCode: 'eu' },
diff --git a/src/constants/index.ts b/src/constants/index.ts
deleted file mode 100644
index 64edf849b..000000000
--- a/src/constants/index.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-export * from './cashout.consts'
-export * from './chains.consts'
-export * from './carousel.consts'
-export * from './general.consts'
-export * from './loadingStates.consts'
-export * from './query.consts'
-export * from './zerodev.consts'
-export * from './manteca.consts'
-export * from './payment.consts'
-export * from './routes'
-export * from './stateCodes.consts'
-export * from './tweets.consts'
diff --git a/src/constants/payment.consts.ts b/src/constants/payment.consts.ts
index 7d62bd236..49b09ddff 100644
--- a/src/constants/payment.consts.ts
+++ b/src/constants/payment.consts.ts
@@ -10,12 +10,6 @@ export const MIN_MANTECA_DEPOSIT_AMOUNT = 1
// QR payment limits for manteca (PIX, MercadoPago, QR3)
export const MIN_MANTECA_QR_PAYMENT_AMOUNT = 0.1 // Manteca provider minimum
-// time constants for devconnect intent cleanup
-export const DEVCONNECT_INTENT_EXPIRY_MS = 7 * 24 * 60 * 60 * 1000 // 7 days
-
-// maximum number of devconnect intents to store per user
-export const MAX_DEVCONNECT_INTENTS = 10
-
/**
* validate if amount meets minimum requirement for a payment method
* @param amount - amount in USD
diff --git a/src/constants/rhino.consts.ts b/src/constants/rhino.consts.ts
new file mode 100644
index 000000000..a99899f88
--- /dev/null
+++ b/src/constants/rhino.consts.ts
@@ -0,0 +1,59 @@
+/** Chain name to logo URL mapping - reusable across the app */
+export const CHAIN_LOGOS = {
+ ARBITRUM: 'https://assets.coingecko.com/asset_platforms/images/33/standard/AO_logomark.png?1706606717',
+ ETHEREUM: 'https://assets.coingecko.com/asset_platforms/images/279/standard/ethereum.png?1706606803',
+ BASE: 'https://assets.coingecko.com/asset_platforms/images/131/standard/base.png?1759905869',
+ OPTIMISM: 'https://assets.coingecko.com/asset_platforms/images/41/standard/optimism.png?1706606778',
+ GNOSIS: 'https://assets.coingecko.com/asset_platforms/images/11062/standard/Aatar_green_white.png?1706606458',
+ POLYGON: 'https://assets.coingecko.com/asset_platforms/images/15/standard/polygon_pos.png?1706606645',
+ BNB: 'https://assets.coingecko.com/asset_platforms/images/1/standard/bnb_smart_chain.png?1706606721',
+ KATANA: 'https://assets.coingecko.com/asset_platforms/images/32239/standard/katana.jpg?1751496126',
+ SCROLL: 'https://assets.coingecko.com/asset_platforms/images/153/standard/scroll.jpeg?1706606782',
+ CELO: 'https://assets.coingecko.com/asset_platforms/images/21/standard/celo.jpeg?1711358666',
+ TRON: 'https://assets.coingecko.com/asset_platforms/images/1094/standard/TRON_LOGO.png?1706606652',
+ SOLANA: 'https://assets.coingecko.com/asset_platforms/images/5/standard/solana.png?1706606708',
+} as const
+
+/** Token symbol to logo URL mapping - reusable across the app */
+export const TOKEN_LOGOS = {
+ USDT: 'https://assets.coingecko.com/coins/images/325/standard/Tether.png?1696501661',
+ USDC: 'https://assets.coingecko.com/coins/images/6319/small/USD_Coin_icon.png',
+} as const
+
+export type ChainName = keyof typeof CHAIN_LOGOS
+export type TokenName = keyof typeof TOKEN_LOGOS
+
+export const SUPPORTED_EVM_CHAINS = [
+ 'ARBITRUM',
+ 'ETHEREUM',
+ 'BASE',
+ 'OPTIMISM',
+ 'BNB',
+ 'POLYGON',
+ 'KATANA',
+ 'SCROLL',
+ 'GNOSIS',
+ 'CELO',
+] as const
+
+export const OTHER_SUPPORTED_CHAINS = ['SOLANA', 'TRON'] as const
+
+/** Rhino-supported chains with their logos */
+export const RHINO_SUPPORTED_CHAINS = (Object.keys(CHAIN_LOGOS) as ChainName[]).map((name) => ({
+ name,
+ logoUrl: CHAIN_LOGOS[name],
+}))
+
+export const RHINO_SUPPORTED_EVM_CHAINS = RHINO_SUPPORTED_CHAINS.filter((chain) =>
+ (SUPPORTED_EVM_CHAINS as readonly string[]).includes(chain.name)
+)
+
+export const RHINO_SUPPORTED_OTHER_CHAINS = RHINO_SUPPORTED_CHAINS.filter((chain) =>
+ (OTHER_SUPPORTED_CHAINS as readonly string[]).includes(chain.name)
+)
+
+/** Rhino-supported tokens with their logos */
+export const RHINO_SUPPORTED_TOKENS = (Object.keys(TOKEN_LOGOS) as TokenName[]).map((name) => ({
+ name,
+ logoUrl: TOKEN_LOGOS[name],
+}))
diff --git a/src/constants/zerodev.consts.ts b/src/constants/zerodev.consts.ts
index ce9ce65a6..5e9c9b4c4 100644
--- a/src/constants/zerodev.consts.ts
+++ b/src/constants/zerodev.consts.ts
@@ -1,8 +1,5 @@
import { getEntryPoint, KERNEL_V3_1 } from '@zerodev/sdk/constants'
-import type { Chain, PublicClient } from 'viem'
-import { createPublicClient } from 'viem'
-import { getTransportWithFallback } from '@/app/actions/clients'
-import { arbitrum, mainnet, base, linea } from 'viem/chains'
+import { arbitrum } from 'viem/chains'
// consts needed to define low level SDK kernel
// as per: https://docs.zerodev.app/sdk/getting-started/tutorial-passkeys
@@ -38,81 +35,3 @@ export const PEANUT_WALLET_SUPPORTED_TOKENS: Record = {
export const USER_OP_ENTRY_POINT = getEntryPoint('0.7')
export const ZERODEV_KERNEL_VERSION = KERNEL_V3_1
export const USER_OPERATION_REVERT_REASON_TOPIC = '0x1c4fada7374c0a9ee8841fc38afe82932dc0f8e69012e927f061a8bae611a201'
-
-const ZERODEV_V3_URL = process.env.NEXT_PUBLIC_ZERO_DEV_RECOVERY_BUNDLER_URL
-const zerodevV3Url = (chainId: number | string) => `${ZERODEV_V3_URL}/chain/${chainId}`
-
-/**
- * This is a mapping of chain ID to the public client and chain details
- * This is for the standard chains supported in the app. Arbitrum is always included
- * as it's the primary wallet chain. Additional chains (mainnet, base, linea) are only
- * included if NEXT_PUBLIC_ZERO_DEV_RECOVERY_BUNDLER_URL is configured.
- */
-export const PUBLIC_CLIENTS_BY_CHAIN: Record<
- string,
- {
- client: PublicClient
- chain: Chain
- bundlerUrl: string
- paymasterUrl: string
- }
-> = {
- // Arbitrum (primary wallet chain - always included)
- [arbitrum.id]: {
- client: createPublicClient({
- transport: getTransportWithFallback(arbitrum.id),
- chain: arbitrum,
- pollingInterval: 500,
- }),
- chain: PEANUT_WALLET_CHAIN,
- bundlerUrl: BUNDLER_URL,
- paymasterUrl: PAYMASTER_URL,
- },
-}
-
-// Conditionally add recovery chains if env var is configured
-if (ZERODEV_V3_URL) {
- const mainnetUrl = zerodevV3Url(mainnet.id)
- if (mainnetUrl) {
- PUBLIC_CLIENTS_BY_CHAIN[mainnet.id] = {
- client: createPublicClient({
- transport: getTransportWithFallback(mainnet.id),
- chain: mainnet,
- pollingInterval: 12000,
- }),
- chain: mainnet,
- bundlerUrl: mainnetUrl,
- paymasterUrl: mainnetUrl,
- }
- }
-
- const baseUrl = zerodevV3Url(base.id)
- if (baseUrl) {
- PUBLIC_CLIENTS_BY_CHAIN[base.id] = {
- client: createPublicClient({
- transport: getTransportWithFallback(base.id),
- chain: base,
- pollingInterval: 2000,
- }) as PublicClient,
- chain: base,
- bundlerUrl: baseUrl,
- paymasterUrl: baseUrl,
- }
- }
-
- const lineaUrl = zerodevV3Url(linea.id)
- if (lineaUrl) {
- PUBLIC_CLIENTS_BY_CHAIN[linea.id] = {
- client: createPublicClient({
- transport: getTransportWithFallback(linea.id),
- chain: linea,
- pollingInterval: 3000,
- }),
- chain: linea,
- bundlerUrl: lineaUrl,
- paymasterUrl: lineaUrl,
- }
- }
-}
-
-export const peanutPublicClient = PUBLIC_CLIENTS_BY_CHAIN[PEANUT_WALLET_CHAIN.id].client
diff --git a/src/context/LinkSendFlowContext.tsx b/src/context/LinkSendFlowContext.tsx
new file mode 100644
index 000000000..2887b1095
--- /dev/null
+++ b/src/context/LinkSendFlowContext.tsx
@@ -0,0 +1,111 @@
+'use client'
+
+/**
+ * context for send link flow state management
+ *
+ * send links let users create claimable payment links that can be:
+ * - shared via any messaging app
+ * - claimed by anyone with the link
+ * - cross-chain claimable
+ *
+ * this context manages state for creating these links
+ */
+
+import { createContext, useContext, useState, useCallback, useMemo, type ReactNode } from 'react'
+import { interfaces as peanutInterfaces } from '@squirrel-labs/peanut-sdk'
+
+// view states for link send flow
+export type LinkSendFlowView = 'INITIAL' | 'SUCCESS'
+
+// attachment options for link (matches IAttachmentOptions from shared types)
+export interface LinkSendAttachmentOptions {
+ fileUrl: string | undefined
+ message: string | undefined
+ rawFile: File | undefined
+}
+
+// error state
+export interface LinkSendErrorState {
+ showError: boolean
+ errorMessage: string
+}
+
+// context type
+interface LinkSendFlowContextType {
+ // state
+ view: LinkSendFlowView
+ setView: (view: LinkSendFlowView) => void
+ tokenValue: string | undefined
+ setTokenValue: (value: string | undefined) => void
+ link: string | undefined
+ setLink: (link: string | undefined) => void
+ attachmentOptions: LinkSendAttachmentOptions
+ setAttachmentOptions: (options: LinkSendAttachmentOptions) => void
+ errorState: LinkSendErrorState | undefined
+ setErrorState: (state: LinkSendErrorState | undefined) => void
+ crossChainDetails: peanutInterfaces.ISquidChain[] | undefined
+ setCrossChainDetails: (details: peanutInterfaces.ISquidChain[] | undefined) => void
+
+ // actions
+ resetLinkSendFlow: () => void
+}
+
+const LinkSendFlowContext = createContext(undefined)
+
+interface LinkSendFlowProviderProps {
+ children: ReactNode
+}
+
+export const LinkSendFlowProvider: React.FC = ({ children }) => {
+ const [view, setView] = useState('INITIAL')
+ const [tokenValue, setTokenValue] = useState(undefined)
+ const [link, setLink] = useState(undefined)
+ const [attachmentOptions, setAttachmentOptions] = useState({
+ fileUrl: undefined,
+ message: undefined,
+ rawFile: undefined,
+ })
+ const [errorState, setErrorState] = useState(undefined)
+ const [crossChainDetails, setCrossChainDetails] = useState(undefined)
+
+ const resetLinkSendFlow = useCallback(() => {
+ setView('INITIAL')
+ setTokenValue(undefined)
+ setLink(undefined)
+ setAttachmentOptions({
+ fileUrl: undefined,
+ message: undefined,
+ rawFile: undefined,
+ })
+ setErrorState(undefined)
+ }, [])
+
+ const value = useMemo(
+ () => ({
+ view,
+ setView,
+ tokenValue,
+ setTokenValue,
+ link,
+ setLink,
+ attachmentOptions,
+ setAttachmentOptions,
+ errorState,
+ setErrorState,
+ crossChainDetails,
+ setCrossChainDetails,
+ resetLinkSendFlow,
+ }),
+ [view, tokenValue, link, attachmentOptions, errorState, crossChainDetails, resetLinkSendFlow]
+ )
+
+ return {children}
+}
+
+export const useLinkSendFlow = (): LinkSendFlowContextType => {
+ const context = useContext(LinkSendFlowContext)
+ if (context === undefined) {
+ throw new Error('useLinkSendFlow must be used within LinkSendFlowProvider')
+ }
+ return context
+}
diff --git a/src/context/ModalsContext.tsx b/src/context/ModalsContext.tsx
index 8658d6f63..98c237028 100644
--- a/src/context/ModalsContext.tsx
+++ b/src/context/ModalsContext.tsx
@@ -1,27 +1,81 @@
'use client'
-import { createContext, useContext, useState, type ReactNode } from 'react'
+import { createContext, useContext, useState, useCallback, useMemo, type ReactNode } from 'react'
interface ModalsContextType {
+ // iOS PWA Install Modal
isIosPwaInstallModalOpen: boolean
setIsIosPwaInstallModalOpen: (isOpen: boolean) => void
+
+ // Guest Login/Sign In Modal
+ isSignInModalOpen: boolean
+ setIsSignInModalOpen: (isOpen: boolean) => void
+
+ // Support Drawer
+ isSupportModalOpen: boolean
+ setIsSupportModalOpen: (isOpen: boolean) => void
+ supportPrefilledMessage: string
+ setSupportPrefilledMessage: (message: string) => void
+ openSupportWithMessage: (message: string) => void
+
+ // QR Scanner
+ isQRScannerOpen: boolean
+ setIsQRScannerOpen: (isOpen: boolean) => void
}
const ModalsContext = createContext(undefined)
export function ModalsProvider({ children }: { children: ReactNode }) {
+ // iOS PWA Install Modal
const [isIosPwaInstallModalOpen, setIsIosPwaInstallModalOpen] = useState(false)
- return (
-
- {children}
-
+ // Guest Login/Sign In Modal
+ const [isSignInModalOpen, setIsSignInModalOpen] = useState(false)
+
+ // Support Drawer
+ const [isSupportModalOpen, setIsSupportModalOpen] = useState(false)
+ const [supportPrefilledMessage, setSupportPrefilledMessage] = useState('')
+
+ // QR Scanner
+ const [isQRScannerOpen, setIsQRScannerOpen] = useState(false)
+
+ const openSupportWithMessage = useCallback((message: string) => {
+ setSupportPrefilledMessage(message)
+ setIsSupportModalOpen(true)
+ }, [])
+
+ const value = useMemo(
+ () => ({
+ // iOS PWA Install Modal
+ isIosPwaInstallModalOpen,
+ setIsIosPwaInstallModalOpen,
+
+ // Guest Login/Sign In Modal
+ isSignInModalOpen,
+ setIsSignInModalOpen,
+
+ // Support Drawer
+ isSupportModalOpen,
+ setIsSupportModalOpen,
+ supportPrefilledMessage,
+ setSupportPrefilledMessage,
+ openSupportWithMessage,
+
+ // QR Scanner
+ isQRScannerOpen,
+ setIsQRScannerOpen,
+ }),
+ [
+ isIosPwaInstallModalOpen,
+ isSignInModalOpen,
+ isSupportModalOpen,
+ supportPrefilledMessage,
+ openSupportWithMessage,
+ isQRScannerOpen,
+ ]
)
+
+ return {children}
}
export function useModalsContext() {
diff --git a/src/context/QrCodeContext.tsx b/src/context/QrCodeContext.tsx
deleted file mode 100644
index 53c740f71..000000000
--- a/src/context/QrCodeContext.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-'use client'
-
-import { createContext, useContext, useState, type ReactNode } from 'react'
-
-interface QrCodeContextType {
- isQRScannerOpen: boolean
- setIsQRScannerOpen: (isOpen: boolean) => void
-}
-
-const QrCodeContext = createContext(undefined)
-
-export function QrCodeProvider({ children }: { children: ReactNode }) {
- const [isQRScannerOpen, setIsQRScannerOpen] = useState(false)
- return {children}
-}
-
-export function useQrCodeContext() {
- const context = useContext(QrCodeContext)
- if (context === undefined) {
- throw new Error('useQrCodeContext must be used within a QrCodeProvider')
- }
- return context
-}
diff --git a/src/context/SupportModalContext.tsx b/src/context/SupportModalContext.tsx
deleted file mode 100644
index 1ef2ca6e3..000000000
--- a/src/context/SupportModalContext.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-'use client'
-
-import { createContext, useContext, useState, type ReactNode } from 'react'
-
-interface SupportModalContextType {
- isSupportModalOpen: boolean
- setIsSupportModalOpen: (isOpen: boolean) => void
- prefilledMessage: string
- setPrefilledMessage: (message: string) => void
- openSupportWithMessage: (message: string) => void
-}
-
-const SupportModalContext = createContext(undefined)
-
-export function SupportModalProvider({ children }: { children: ReactNode }) {
- const [isSupportModalOpen, setIsSupportModalOpen] = useState(false)
- const [prefilledMessage, setPrefilledMessage] = useState('')
-
- const openSupportWithMessage = (message: string) => {
- setPrefilledMessage(message)
- setIsSupportModalOpen(true)
- }
-
- return (
-
- {children}
-
- )
-}
-
-export function useSupportModalContext() {
- const context = useContext(SupportModalContext)
- if (context === undefined) {
- throw new Error('useSupportModal must be used within a SupportModalProvider')
- }
- return context
-}
diff --git a/src/context/WithdrawFlowContext.tsx b/src/context/WithdrawFlowContext.tsx
index 7898bf0d0..aa594e65b 100644
--- a/src/context/WithdrawFlowContext.tsx
+++ b/src/context/WithdrawFlowContext.tsx
@@ -1,6 +1,7 @@
'use client'
import { type ITokenPriceData, type Account } from '@/interfaces'
+import { type TRequestChargeResponse, type PaymentCreationResponse } from '@/services/services.types'
import { interfaces as peanutInterfaces } from '@squirrel-labs/peanut-sdk'
import React, { createContext, type ReactNode, useContext, useMemo, useState, useCallback } from 'react'
@@ -61,6 +62,13 @@ interface WithdrawFlowContextType {
setShowAllWithdrawMethods: (show: boolean) => void
selectedMethod: WithdrawMethod | null
setSelectedMethod: (method: WithdrawMethod | null) => void
+ // charge and payment state (local to withdraw flow)
+ chargeDetails: TRequestChargeResponse | null
+ setChargeDetails: (charge: TRequestChargeResponse | null) => void
+ transactionHash: string | null
+ setTransactionHash: (hash: string | null) => void
+ paymentDetails: PaymentCreationResponse | null
+ setPaymentDetails: (payment: PaymentCreationResponse | null) => void
resetWithdrawFlow: () => void
}
@@ -86,6 +94,11 @@ export const WithdrawFlowContextProvider: React.FC<{ children: ReactNode }> = ({
const [showAllWithdrawMethods, setShowAllWithdrawMethods] = useState(false)
const [selectedMethod, setSelectedMethod] = useState(null)
+ // charge and payment state (local to withdraw flow)
+ const [chargeDetails, setChargeDetails] = useState(null)
+ const [transactionHash, setTransactionHash] = useState(null)
+ const [paymentDetails, setPaymentDetails] = useState(null)
+
const resetWithdrawFlow = useCallback(() => {
setAmountToWithdraw('')
setCurrentView('INITIAL')
@@ -97,6 +110,10 @@ export const WithdrawFlowContextProvider: React.FC<{ children: ReactNode }> = ({
setShowAllWithdrawMethods(false)
setUsdAmount('')
setSelectedMethod(null)
+ // reset charge and payment state
+ setChargeDetails(null)
+ setTransactionHash(null)
+ setPaymentDetails(null)
}, [])
const value = useMemo(
@@ -129,6 +146,12 @@ export const WithdrawFlowContextProvider: React.FC<{ children: ReactNode }> = ({
setShowAllWithdrawMethods,
selectedMethod,
setSelectedMethod,
+ chargeDetails,
+ setChargeDetails,
+ transactionHash,
+ setTransactionHash,
+ paymentDetails,
+ setPaymentDetails,
resetWithdrawFlow,
}),
[
@@ -146,7 +169,9 @@ export const WithdrawFlowContextProvider: React.FC<{ children: ReactNode }> = ({
selectedBankAccount,
showAllWithdrawMethods,
selectedMethod,
- setShowAllWithdrawMethods,
+ chargeDetails,
+ transactionHash,
+ paymentDetails,
resetWithdrawFlow,
]
)
diff --git a/src/context/authContext.tsx b/src/context/authContext.tsx
index 52aa33bd1..43139b0fc 100644
--- a/src/context/authContext.tsx
+++ b/src/context/authContext.tsx
@@ -6,12 +6,12 @@ import { useAppDispatch } from '@/redux/hooks'
import { setupActions } from '@/redux/slices/setup-slice'
import { zerodevActions } from '@/redux/slices/zerodev-slice'
import {
- fetchWithSentry,
removeFromCookie,
syncLocalStorageToCookie,
clearRedirectUrl,
updateUserPreferences,
-} from '@/utils'
+} from '@/utils/general.utils'
+import { fetchWithSentry } from '@/utils/sentry.utils'
import { resetCrispProxySessions } from '@/utils/crisp'
import { useQueryClient } from '@tanstack/react-query'
import { useRouter } from 'next/navigation'
diff --git a/src/context/contextProvider.tsx b/src/context/contextProvider.tsx
index 2b142af28..cdd9f4f49 100644
--- a/src/context/contextProvider.tsx
+++ b/src/context/contextProvider.tsx
@@ -3,43 +3,37 @@ import { OnrampFlowContextProvider } from './OnrampFlowContext'
import { AuthProvider } from './authContext'
import { KernelClientProvider } from './kernelClient.context'
import { LoadingStateContextProvider } from './loadingStates.context'
-import { PushProvider } from './pushProvider'
import { TokenContextProvider } from './tokenSelector.context'
import { WithdrawFlowContextProvider } from './WithdrawFlowContext'
import { ClaimBankFlowContextProvider } from './ClaimBankFlowContext'
import { RequestFulfilmentFlowContextProvider } from './RequestFulfillmentFlowContext'
-import { SupportModalProvider } from './SupportModalContext'
import { PasskeySupportProvider } from './passkeySupportContext'
-import { QrCodeProvider } from './QrCodeContext'
import { ModalsProvider } from './ModalsContext'
+// note: push notifications are now handled by onesignal via useNotifications hook.
+// the legacy PushProvider (web-push based) has been removed.
+
export const ContextProvider = ({ children }: { children: React.ReactNode }) => {
return (
-
-
-
-
-
-
-
-
-
-
-
- {children}
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+ {children}
+
+
+
+
+
+
+
+
)
diff --git a/src/context/kernelClient.context.tsx b/src/context/kernelClient.context.tsx
index 4524727b8..66f8f145c 100644
--- a/src/context/kernelClient.context.tsx
+++ b/src/context/kernelClient.context.tsx
@@ -1,15 +1,10 @@
'use client'
-import {
- PEANUT_WALLET_CHAIN,
- PUBLIC_CLIENTS_BY_CHAIN,
- USER_OP_ENTRY_POINT,
- ZERODEV_KERNEL_VERSION,
-} from '@/constants/zerodev.consts'
+import { PEANUT_WALLET_CHAIN, USER_OP_ENTRY_POINT, ZERODEV_KERNEL_VERSION } from '@/constants/zerodev.consts'
import { useAuth } from '@/context/authContext'
import { createKernelMigrationAccount } from '@zerodev/sdk/accounts'
import { useAppDispatch } from '@/redux/hooks'
import { zerodevActions } from '@/redux/slices/zerodev-slice'
-import { getFromCookie, updateUserPreferences, getUserPreferences } from '@/utils'
+import { getFromCookie, updateUserPreferences, getUserPreferences } from '@/utils/general.utils'
import { PasskeyValidatorContractVersion, toPasskeyValidator, toWebAuthnKey } from '@zerodev/passkey-validator'
import {
createKernelAccount,
@@ -21,6 +16,7 @@ import { createContext, type ReactNode, useCallback, useContext, useEffect, useS
import { type Chain, http, type PublicClient, type Transport } from 'viem'
import type { Address } from 'viem'
import { captureException } from '@sentry/nextjs'
+import { PUBLIC_CLIENTS_BY_CHAIN } from '@/app/actions/clients'
interface KernelClientContextType {
setWebAuthnKey: (webAuthnKey: WebAuthnKey) => void
diff --git a/src/context/loadingStates.context.tsx b/src/context/loadingStates.context.tsx
index cf683e7db..6329de93f 100644
--- a/src/context/loadingStates.context.tsx
+++ b/src/context/loadingStates.context.tsx
@@ -1,10 +1,10 @@
'use client'
-import React, { createContext, useContext, useMemo, useState } from 'react'
+import React, { createContext, useMemo, useState } from 'react'
-import * as consts from '@/constants'
+import type { LoadingStates } from '@/constants/loadingStates.consts'
export const loadingStateContext = createContext({
- loadingState: '' as consts.LoadingStates,
- setLoadingState: (state: consts.LoadingStates) => {},
+ loadingState: '' as LoadingStates,
+ setLoadingState: (state: LoadingStates) => {},
isLoading: false as boolean,
})
@@ -14,7 +14,7 @@ export const loadingStateContext = createContext({
* Used for all loading states; e.g., fetching data, processing transactions, switching chains...
*/
export const LoadingStateContextProvider = ({ children }: { children: React.ReactNode }) => {
- const [loadingState, setLoadingState] = useState('Idle')
+ const [loadingState, setLoadingState] = useState('Idle')
const isLoading = useMemo(() => loadingState !== 'Idle', [loadingState])
return (
diff --git a/src/context/pushProvider.tsx b/src/context/pushProvider.tsx
deleted file mode 100644
index 61663e41f..000000000
--- a/src/context/pushProvider.tsx
+++ /dev/null
@@ -1,163 +0,0 @@
-'use client'
-
-import { sendNotification, subscribeUser } from '@/app/actions'
-import { useToast } from '@/components/0_Bruddle/Toast'
-import { urlBase64ToUint8Array } from '@/utils'
-import { captureException } from '@sentry/nextjs'
-import React, { createContext, useContext, useEffect, useState } from 'react'
-import webpush from 'web-push'
-import { useAuth } from './authContext'
-
-interface PushContextType {
- subscribe: () => Promise
- unsubscribe: () => void
- isSupported: boolean
- isSubscribing: boolean
- isSubscribed: boolean
- send: ({ message, title }: { message: string; title: string }) => void
-}
-
-const PushContext = createContext(undefined)
-
-export function PushProvider({ children }: { children: React.ReactNode }) {
- const toast = useToast()
- const { userId } = useAuth()
- const [isSupported, setIsSupported] = useState(false)
- const [isSubscribed, setIsSubscribed] = useState(false)
- const [isSubscribing, setIsSubscribing] = useState(false)
- const [registration, setRegistration] = useState(null)
- const [subscription, setSubscription] = useState(null)
-
- const registerServiceWorker = async () => {
- console.log('[PushProvider] Getting service worker registration')
- try {
- // Use existing SW registration (registered in layout.tsx for offline support)
- // navigator.serviceWorker.ready waits for SW to be registered and active
- // Timeout after 10s to prevent infinite wait if SW registration fails
- const reg = (await Promise.race([
- navigator.serviceWorker.ready,
- new Promise((_, reject) => setTimeout(() => reject(new Error('SW registration timeout')), 10000)),
- ])) as ServiceWorkerRegistration
-
- console.log('[PushProvider] SW already registered:', reg.scope)
- setRegistration(reg)
- const sub = await reg.pushManager.getSubscription()
-
- console.log('[PushProvider] Push subscription:', sub)
-
- if (sub) {
- // @ts-ignore
- setSubscription(sub)
- setIsSubscribed(true)
- }
- } catch (error) {
- console.error('[PushProvider] Failed to get SW registration:', error)
- captureException(error)
- // toast.error('Failed to initialize notifications')
- }
- }
-
- useEffect(() => {
- console.log('Checking for service worker and push manager')
- if ('serviceWorker' in navigator && 'PushManager' in window) {
- console.log('Service Worker and Push Manager are supported')
- setIsSupported(true)
- // Wait for service worker to be ready
- navigator.serviceWorker.ready
- .then(() => {
- registerServiceWorker()
- })
- .catch((error) => {
- console.error('Service Worker not ready:', error)
- captureException(error)
- // toast.error('Failed to initialize notifications')
- })
- } else {
- console.log('Service Worker and Push Manager are not supported')
- setIsSupported(false)
- }
- }, [])
-
- const subscribe = async (): Promise => {
- if (!registration) {
- toast.error('Something went wrong while initializing notifications')
- return
- } else if (!userId) {
- toast.error('Something went wrong while initializing notifications')
- return
- }
-
- setIsSubscribing(true)
- try {
- const sub = await registration.pushManager.subscribe({
- userVisibleOnly: true,
- applicationServerKey: urlBase64ToUint8Array(process.env.NEXT_PUBLIC_VAPID_PUBLIC_KEY!),
- })
-
- // @ts-ignore
- setSubscription(sub)
-
- const plainSub = {
- endpoint: sub.endpoint,
- keys: {
- p256dh: Buffer.from((sub as any).getKey('p256dh')).toString('base64'),
- auth: Buffer.from((sub as any).getKey('auth')).toString('base64'),
- },
- }
-
- await subscribeUser(userId, plainSub)
-
- setIsSubscribed(true)
- } catch (error: unknown) {
- if (error instanceof Error) {
- console.log(error.message)
- if (error.message.includes('permission denied')) {
- toast.error('Please allow notifications in your browser settings')
- } else {
- toast.error('Failed to enable notifications')
- captureException(error)
- }
- console.error('Error subscribing to push notifications:', error.message)
- } else {
- throw error
- }
- }
- setIsSubscribing(false)
- }
- const unsubscribe = async () => {}
-
- const send = async ({ message, title }: { message: string; title: string }) => {
- const plainSub = {
- endpoint: subscription!.endpoint,
- keys: {
- p256dh: Buffer.from((subscription as any).getKey('p256dh')).toString('base64'),
- auth: Buffer.from((subscription as any).getKey('auth')).toString('base64'),
- },
- }
-
- await sendNotification(plainSub, { message, title })
- }
-
- return (
-
- {children}
-
- )
-}
-
-export function usePush() {
- const context = useContext(PushContext)
- if (context === undefined) {
- throw new Error('usePush must be used within a PushProvider')
- }
- return context
-}
diff --git a/src/context/tokenSelector.context.tsx b/src/context/tokenSelector.context.tsx
index 4761676db..c0425cc8f 100644
--- a/src/context/tokenSelector.context.tsx
+++ b/src/context/tokenSelector.context.tsx
@@ -1,5 +1,5 @@
'use client'
-import React, { createContext, useState, useCallback, useMemo, useEffect } from 'react'
+import React, { createContext, useState, useCallback, useEffect } from 'react'
import {
PEANUT_WALLET_CHAIN,
@@ -8,7 +8,7 @@ import {
PEANUT_WALLET_TOKEN_IMG_URL,
PEANUT_WALLET_TOKEN_NAME,
PEANUT_WALLET_TOKEN_SYMBOL,
-} from '@/constants'
+} from '@/constants/zerodev.consts'
import { useWallet } from '@/hooks/wallet/useWallet'
import { useSquidChainsAndTokens } from '@/hooks/useSquidChainsAndTokens'
import { useTokenPrice } from '@/hooks/useTokenPrice'
diff --git a/src/features/payments/flows/contribute-pot/ContributePotFlowContext.tsx b/src/features/payments/flows/contribute-pot/ContributePotFlowContext.tsx
new file mode 100644
index 000000000..8f99a6c1c
--- /dev/null
+++ b/src/features/payments/flows/contribute-pot/ContributePotFlowContext.tsx
@@ -0,0 +1,249 @@
+'use client'
+
+/**
+ * context provider for request pot flow
+ *
+ * request pots are group payment requests where multiple people can contribute.
+ * this context manages all state for the contribution flow:
+ * - amount being contributed
+ * - request details and recipient info
+ * - charge/payment results after execution
+ * - derived data like total collected and contributors list
+ *
+ * wraps ContributePotPage and provides state to all child views
+ */
+
+import { createContext, useContext, useState, useMemo, useCallback, type ReactNode } from 'react'
+import { type Address, type Hash } from 'viem'
+import { type TRequestResponse, type ChargeEntry, type PaymentCreationResponse } from '@/services/services.types'
+
+// view states for contribute pot flow
+export type ContributePotFlowView = 'INITIAL' | 'STATUS' | 'EXTERNAL_WALLET'
+
+// recipient info derived from request
+export interface PotRecipient {
+ username: string
+ address: Address
+ userId?: string
+ fullName?: string
+}
+
+// contributor info from charges
+export interface PotContributor {
+ uuid: string
+ username?: string
+ address?: string
+ amount: string
+ createdAt: string
+}
+
+// attachment state
+interface ContributePotAttachment {
+ message?: string
+ file?: File
+ fileUrl?: string
+}
+
+// error state
+interface ContributePotError {
+ showError: boolean
+ errorMessage: string
+}
+
+// context value type
+interface ContributePotFlowContextValue {
+ // view state
+ currentView: ContributePotFlowView
+ setCurrentView: (view: ContributePotFlowView) => void
+
+ // request data (fetched from api)
+ request: TRequestResponse | null
+ setRequest: (request: TRequestResponse | null) => void
+
+ // derived recipient
+ recipient: PotRecipient | null
+
+ // amount state
+ amount: string
+ setAmount: (amount: string) => void
+ usdAmount: string
+ setUsdAmount: (amount: string) => void
+
+ // attachment state
+ attachment: ContributePotAttachment
+ setAttachment: (attachment: ContributePotAttachment) => void
+
+ // charge and payment results
+ charge: ChargeEntry | null
+ setCharge: (charge: ChargeEntry | null) => void
+ payment: PaymentCreationResponse | null
+ setPayment: (payment: PaymentCreationResponse | null) => void
+ txHash: Hash | null
+ setTxHash: (hash: Hash | null) => void
+ isExternalWalletPayment: boolean
+ setIsExternalWalletPayment: (isExternalWalletPayment: boolean) => void
+
+ // ui state
+ error: ContributePotError
+ setError: (error: ContributePotError) => void
+ isLoading: boolean
+ setIsLoading: (loading: boolean) => void
+ isSuccess: boolean
+ setIsSuccess: (success: boolean) => void
+
+ // derived data
+ totalAmount: number
+ totalCollected: number
+ contributors: PotContributor[]
+
+ // actions
+ resetContributePotFlow: () => void
+}
+
+const ContributePotFlowContext = createContext(null)
+
+interface ContributePotFlowProviderProps {
+ children: ReactNode
+ initialRequest: TRequestResponse
+}
+
+export function ContributePotFlowProvider({ children, initialRequest }: ContributePotFlowProviderProps) {
+ // view state
+ const [currentView, setCurrentView] = useState('INITIAL')
+
+ // request data
+ const [request, setRequest] = useState(initialRequest)
+
+ // amount state
+ const [amount, setAmount] = useState('')
+ const [usdAmount, setUsdAmount] = useState('')
+
+ // attachment state
+ const [attachment, setAttachment] = useState({})
+
+ // charge and payment results
+ const [charge, setCharge] = useState(null)
+ const [payment, setPayment] = useState(null)
+ const [txHash, setTxHash] = useState(null)
+ const [isExternalWalletPayment, setIsExternalWalletPayment] = useState(false)
+
+ // ui state
+ const [error, setError] = useState({ showError: false, errorMessage: '' })
+ const [isLoading, setIsLoading] = useState(false)
+ const [isSuccess, setIsSuccess] = useState(false)
+
+ // derive recipient from request
+ const recipient = useMemo(() => {
+ if (!request?.recipientAccount) return null
+ return {
+ username: request.recipientAccount.user?.username || request.recipientAccount.identifier,
+ address: request.recipientAddress as Address,
+ userId: request.recipientAccount.userId,
+ }
+ }, [request])
+
+ // derive total amount and collected
+ const totalAmount = useMemo(() => {
+ return request?.tokenAmount ? parseFloat(request.tokenAmount) : 0
+ }, [request?.tokenAmount])
+
+ const totalCollected = useMemo(() => {
+ return request?.totalCollectedAmount ?? 0
+ }, [request?.totalCollectedAmount])
+
+ // derive contributors from charges
+ const contributors = useMemo(() => {
+ if (!request?.charges) return []
+ return request.charges
+ .filter((c) => c.fulfillmentPayment?.status === 'SUCCESSFUL')
+ .map((c) => ({
+ uuid: c.uuid,
+ username: c.fulfillmentPayment?.payerAccount?.user?.username,
+ address: c.fulfillmentPayment?.payerAddress ?? undefined,
+ amount: c.tokenAmount,
+ createdAt: c.createdAt,
+ }))
+ }, [request?.charges])
+
+ // reset flow
+ const resetContributePotFlow = useCallback(() => {
+ setCurrentView('INITIAL')
+ setAmount('')
+ setUsdAmount('')
+ setAttachment({})
+ setCharge(null)
+ setPayment(null)
+ setTxHash(null)
+ setError({ showError: false, errorMessage: '' })
+ setIsLoading(false)
+ setIsSuccess(false)
+ setIsExternalWalletPayment(false)
+ }, [])
+
+ const value = useMemo(
+ () => ({
+ currentView,
+ setCurrentView,
+ request,
+ setRequest,
+ recipient,
+ amount,
+ setAmount,
+ usdAmount,
+ setUsdAmount,
+ attachment,
+ setAttachment,
+ charge,
+ setCharge,
+ payment,
+ setPayment,
+ txHash,
+ setTxHash,
+ error,
+ setError,
+ isLoading,
+ setIsLoading,
+ isSuccess,
+ setIsSuccess,
+ totalAmount,
+ totalCollected,
+ contributors,
+ resetContributePotFlow,
+ isExternalWalletPayment,
+ setIsExternalWalletPayment,
+ }),
+ [
+ currentView,
+ request,
+ recipient,
+ amount,
+ usdAmount,
+ attachment,
+ charge,
+ payment,
+ txHash,
+ error,
+ isLoading,
+ isSuccess,
+ totalAmount,
+ totalCollected,
+ contributors,
+ resetContributePotFlow,
+ isExternalWalletPayment,
+ setIsExternalWalletPayment,
+ ]
+ )
+
+ return {children}
+}
+
+export function useContributePotFlowContext() {
+ const context = useContext(ContributePotFlowContext)
+ if (!context) {
+ throw new Error('useContributePotFlowContext must be used within ContributePotFlowProvider')
+ }
+ return context
+}
+
+// re-export types for convenience
+export type { ContributePotAttachment, ContributePotError }
diff --git a/src/features/payments/flows/contribute-pot/ContributePotPage.tsx b/src/features/payments/flows/contribute-pot/ContributePotPage.tsx
new file mode 100644
index 000000000..40d60a223
--- /dev/null
+++ b/src/features/payments/flows/contribute-pot/ContributePotPage.tsx
@@ -0,0 +1,46 @@
+'use client'
+
+/**
+ * main entry point for contribute pot flow
+ *
+ * wraps content with context provider and renders the correct view:
+ * - INITIAL: amount input with slider
+ * - STATUS: success view after payment
+ *
+ * receives pre-fetched request data from wrapper
+ */
+
+import { ContributePotFlowProvider, useContributePotFlowContext } from './ContributePotFlowContext'
+import { ContributePotInputView } from './views/ContributePotInputView'
+import { ContributePotSuccessView } from './views/ContributePotSuccessView'
+import { type TRequestResponse } from '@/services/services.types'
+import ExternalWalletPaymentView from './views/ExternalWalletPaymentView'
+
+// internal component that switches views
+function ContributePotFlowContent() {
+ const { currentView } = useContributePotFlowContext()
+
+ switch (currentView) {
+ case 'STATUS':
+ return
+
+ )
+}
diff --git a/src/features/payments/flows/contribute-pot/ContributePotPageWrapper.tsx b/src/features/payments/flows/contribute-pot/ContributePotPageWrapper.tsx
new file mode 100644
index 000000000..9f7c22bc5
--- /dev/null
+++ b/src/features/payments/flows/contribute-pot/ContributePotPageWrapper.tsx
@@ -0,0 +1,79 @@
+'use client'
+
+/**
+ * wrapper component for ContributePotPage
+ *
+ * handles async request fetching before rendering the actual flow.
+ * shows loading/error states while fetching.
+ *
+ * used by: /[...recipient]?id=xyz route when id param is a request pot uuid
+ */
+
+import { ContributePotPage } from './ContributePotPage'
+import { requestsApi } from '@/services/requests'
+import PeanutLoading from '@/components/Global/PeanutLoading'
+import ErrorAlert from '@/components/Global/ErrorAlert'
+import NavHeader from '@/components/Global/NavHeader'
+import { useRouter } from 'next/navigation'
+import { useEffect, useState } from 'react'
+import { type TRequestResponse } from '@/services/services.types'
+
+interface ContributePotPageWrapperProps {
+ requestId: string
+}
+
+export function ContributePotPageWrapper({ requestId }: ContributePotPageWrapperProps) {
+ const router = useRouter()
+ const [request, setRequest] = useState(null)
+ const [isLoading, setIsLoading] = useState(true)
+ const [error, setError] = useState(null)
+
+ // fetch request details
+ useEffect(() => {
+ if (!requestId) {
+ setError('no request id provided')
+ setIsLoading(false)
+ return
+ }
+
+ setIsLoading(true)
+ setError(null)
+
+ requestsApi
+ .get(requestId)
+ .then((data) => {
+ setRequest(data)
+ })
+ .catch((err) => {
+ console.error('failed to fetch request:', err)
+ setError('failed to load request. it may not exist or has been deleted.')
+ })
+ .finally(() => {
+ setIsLoading(false)
+ })
+ }, [requestId])
+
+ // loading state
+ if (isLoading) {
+ return (
+ (() => {
+ return contributors.map((c) => ({
+ uuid: c.uuid,
+ payments: [],
+ amount: c.amount,
+ username: c.username || c.address,
+ fulfillmentPayment: null,
+ isUserVerified: false,
+ isPeanutUser: !!c.username,
+ }))
+ }, [contributors])
+
+ if (contributors.length === 0) {
+ return null
+ }
+
+ return (
+
+
+ }
+ variant="transparent"
+ className="h-5 w-fit self-start p-0 text-xs font-normal underline underline-offset-2 active:translate-x-0"
+ >
+ See all contributors
+
+
+
+
+ Contributors ({contributors.length})
+
+
+
+ )
+}
diff --git a/src/features/payments/flows/contribute-pot/components/RequestPotActionList.tsx b/src/features/payments/flows/contribute-pot/components/RequestPotActionList.tsx
new file mode 100644
index 000000000..40baea704
--- /dev/null
+++ b/src/features/payments/flows/contribute-pot/components/RequestPotActionList.tsx
@@ -0,0 +1,249 @@
+'use client'
+
+/**
+ * payment options for request pot flow
+ *
+ * shows payment methods for contributing to a request pot:
+ * - pay with peanut (primary, uses wallet balance)
+ * - bank/mercadopago/pix (redirects to add-money)
+ *
+ * includes smart "use your peanut balance" modal - if user has
+ * enough balance but clicks on bank, suggests using peanut instead
+ *
+ * validates minimum amounts for bank transfers
+ */
+
+import { useMemo, useState } from 'react'
+import { useRouter } from 'next/navigation'
+import Divider from '@/components/0_Bruddle/Divider'
+import StatusBadge from '@/components/Global/Badges/StatusBadge'
+import IconStack from '@/components/Global/IconStack'
+import Loading from '@/components/Global/Loading'
+import ActionModal from '@/components/Global/ActionModal'
+import { ActionListCard } from '@/components/ActionListCard'
+import { useAuth } from '@/context/authContext'
+import { useWallet } from '@/hooks/wallet/useWallet'
+import { useGeoFilteredPaymentOptions } from '@/hooks/useGeoFilteredPaymentOptions'
+import useKycStatus from '@/hooks/useKycStatus'
+import { BankRequestType, useDetermineBankRequestType } from '@/hooks/useDetermineBankRequestType'
+import { ACTION_METHODS, type PaymentMethod } from '@/constants/actionlist.consts'
+import { MIN_BANK_TRANSFER_AMOUNT, validateMinimumAmount } from '@/constants/payment.consts'
+import { saveRedirectUrl, saveToLocalStorage } from '@/utils/general.utils'
+import SendWithPeanutCta from '@/features/payments/shared/components/SendWithPeanutCta'
+
+interface RequestPotActionListProps {
+ isAmountEntered: boolean
+ usdAmount: string
+ recipientUserId?: string
+ onPayWithPeanut: () => void
+ isPaymentLoading?: boolean
+ onPayWithExternalWallet: () => void
+}
+
+export function RequestPotActionList({
+ isAmountEntered,
+ usdAmount,
+ recipientUserId,
+ onPayWithPeanut,
+ isPaymentLoading = false,
+ onPayWithExternalWallet,
+}: RequestPotActionListProps) {
+ const router = useRouter()
+ const { user } = useAuth()
+ const { hasSufficientBalance, isFetchingBalance } = useWallet()
+ const { isUserMantecaKycApproved } = useKycStatus()
+ const { requestType } = useDetermineBankRequestType(recipientUserId ?? '')
+
+ const [showMinAmountError, setShowMinAmountError] = useState(false)
+ const [showUsePeanutBalanceModal, setShowUsePeanutBalanceModal] = useState(false)
+ const [isUsePeanutBalanceModalShown, setIsUsePeanutBalanceModalShown] = useState(false)
+ const [selectedPaymentMethod, setSelectedPaymentMethod] = useState(null)
+
+ const isLoggedIn = !!user?.user?.userId
+
+ // check if verification is required for bank
+ const requiresVerification = useMemo(() => {
+ return requestType === BankRequestType.GuestKycNeeded || requestType === BankRequestType.PayerKycNeeded
+ }, [requestType])
+
+ // check if user has enough peanut balance for the entered amount
+ // only show insufficient balance after balance has loaded to avoid flash
+ const userHasSufficientPeanutBalance = useMemo(() => {
+ if (!user || !usdAmount) return false
+ if (isFetchingBalance) return true // assume sufficient while loading to avoid flash
+ return hasSufficientBalance(usdAmount)
+ }, [user, usdAmount, hasSufficientBalance, isFetchingBalance])
+
+ // filter and sort payment methods
+ const { filteredMethods: sortedMethods, isLoading: isGeoLoading } = useGeoFilteredPaymentOptions({
+ sortUnavailable: true,
+ isMethodUnavailable: (method) =>
+ method.soon ||
+ (method.id === 'bank' && requiresVerification) ||
+ (['mercadopago', 'pix'].includes(method.id) && !isUserMantecaKycApproved),
+ methods: ACTION_METHODS,
+ })
+
+ // handle clicking on a payment method
+ const handleMethodClick = (method: PaymentMethod, bypassBalanceModal = false) => {
+ const requestAmountValue = parseFloat(usdAmount || '0')
+
+ // validate minimum amount for bank/mercadopago/pix against user-entered amount
+ if (
+ ['bank', 'mercadopago', 'pix'].includes(method.id) &&
+ !validateMinimumAmount(requestAmountValue, method.id)
+ ) {
+ setShowMinAmountError(true)
+ return
+ }
+
+ // if user has sufficient peanut balance and hasn't dismissed the modal, suggest using peanut
+ if (!bypassBalanceModal && !isUsePeanutBalanceModalShown && userHasSufficientPeanutBalance) {
+ setSelectedPaymentMethod(method)
+ setShowUsePeanutBalanceModal(true)
+ return
+ }
+
+ if (method.id === 'exchange-or-wallet') {
+ onPayWithExternalWallet()
+ return
+ }
+
+ // redirect to add-money flow for bank/mercadopago/pix
+ switch (method.id) {
+ case 'bank':
+ case 'mercadopago':
+ case 'pix':
+ if (isLoggedIn) {
+ // save current url so back button works properly
+ saveRedirectUrl()
+ // flag that we're coming from request fulfillment
+ saveToLocalStorage('fromRequestFulfillment', 'true')
+ router.push('/add-money')
+ } else {
+ const redirectUri = encodeURIComponent('/add-money')
+ router.push(`/setup?redirect_uri=${redirectUri}`)
+ }
+ break
+ }
+ }
+
+ // handle continue with peanut (for non-logged in users)
+ const handleContinueWithPeanut = () => {
+ if (!isLoggedIn) {
+ saveRedirectUrl()
+ router.push('/setup')
+ } else {
+ onPayWithPeanut()
+ }
+ }
+
+ if (isGeoLoading) {
+ return (
+ setShowMinAmountError(false)}
+ title="Minimum Amount"
+ description={`The minimum amount for this payment method is $${MIN_BANK_TRANSFER_AMOUNT}. Please enter a higher amount or try a different method.`}
+ icon="alert"
+ ctas={[{ text: 'Close', shadowSize: '4', onClick: () => setShowMinAmountError(false) }]}
+ iconContainerClassName="bg-yellow-400"
+ preventClose={false}
+ modalPanelClassName="max-w-md mx-8"
+ />
+
+ {/* use peanut balance modal - only shown when user has enough balance */}
+ {
+ setShowUsePeanutBalanceModal(false)
+ setIsUsePeanutBalanceModalShown(true)
+ setSelectedPaymentMethod(null)
+ }}
+ title="Use your Peanut balance instead"
+ description="You already have enough funds in your Peanut account. Using this method is instant and avoids delays."
+ icon="user-plus"
+ ctas={[
+ {
+ text: 'Pay with Peanut',
+ shadowSize: '4',
+ onClick: () => {
+ setShowUsePeanutBalanceModal(false)
+ setIsUsePeanutBalanceModalShown(true)
+ setSelectedPaymentMethod(null)
+ onPayWithPeanut()
+ },
+ },
+ {
+ text: 'Continue',
+ shadowSize: '4',
+ variant: 'stroke',
+ onClick: () => {
+ setShowUsePeanutBalanceModal(false)
+ setIsUsePeanutBalanceModalShown(true)
+ if (selectedPaymentMethod) {
+ handleMethodClick(selectedPaymentMethod, true)
+ }
+ setSelectedPaymentMethod(null)
+ },
+ },
+ ]}
+ iconContainerClassName="bg-primary-1"
+ preventClose={false}
+ modalPanelClassName="max-w-md mx-8"
+ />
+
+ )
+}
diff --git a/src/features/payments/flows/contribute-pot/useContributePotFlow.ts b/src/features/payments/flows/contribute-pot/useContributePotFlow.ts
new file mode 100644
index 000000000..997a98759
--- /dev/null
+++ b/src/features/payments/flows/contribute-pot/useContributePotFlow.ts
@@ -0,0 +1,282 @@
+'use client'
+
+/**
+ * hook for contribute pot flow
+ *
+ * handles the full payment lifecycle for request pot contributions:
+ * 1. validates amount and checks balance
+ * 2. creates a charge in backend
+ * 3. sends payment via peanut wallet
+ * 4. records the payment to backend
+ *
+ * also provides smart defaults for the contribution slider
+ * based on existing contributions (e.g. suggests 1/3 for split bills)
+ */
+
+import { useCallback, useMemo } from 'react'
+import { type Address, type Hash } from 'viem'
+import { useContributePotFlowContext } from './ContributePotFlowContext'
+import { useChargeManager } from '@/features/payments/shared/hooks/useChargeManager'
+import { usePaymentRecorder } from '@/features/payments/shared/hooks/usePaymentRecorder'
+import { useWallet } from '@/hooks/wallet/useWallet'
+import { useAuth } from '@/context/authContext'
+import { PEANUT_WALLET_CHAIN, PEANUT_WALLET_TOKEN, PEANUT_WALLET_TOKEN_DECIMALS } from '@/constants/zerodev.consts'
+import { ErrorHandler } from '@/utils/sdkErrorHandler.utils'
+
+export function useContributePotFlow() {
+ const {
+ amount,
+ setAmount,
+ usdAmount,
+ setUsdAmount,
+ currentView,
+ setCurrentView,
+ request,
+ recipient,
+ attachment,
+ setAttachment,
+ charge,
+ setCharge,
+ payment,
+ setPayment,
+ txHash,
+ setTxHash,
+ error,
+ setError,
+ isLoading,
+ setIsLoading,
+ isSuccess,
+ setIsSuccess,
+ totalAmount,
+ totalCollected,
+ contributors,
+ resetContributePotFlow,
+ isExternalWalletPayment,
+ setIsExternalWalletPayment,
+ } = useContributePotFlowContext()
+
+ const { user } = useAuth()
+ const { createCharge, isCreating: isCreatingCharge } = useChargeManager()
+ const { recordPayment, isRecording } = usePaymentRecorder()
+ const {
+ isConnected,
+ address: walletAddress,
+ sendMoney,
+ formattedBalance,
+ hasSufficientBalance,
+ isFetchingBalance,
+ } = useWallet()
+
+ const isLoggedIn = !!user?.user?.userId
+
+ // set amount (for peanut wallet, amount is always in usd)
+ const handleSetAmount = useCallback(
+ (value: string) => {
+ setAmount(value)
+ setUsdAmount(value)
+ },
+ [setAmount, setUsdAmount]
+ )
+
+ // clear error
+ const clearError = useCallback(() => {
+ setError({ showError: false, errorMessage: '' })
+ }, [setError])
+
+ // check if can proceed
+ const canProceed = useMemo(() => {
+ if (!amount || !recipient || !request) return false
+ const amountNum = parseFloat(amount)
+ if (isNaN(amountNum) || amountNum <= 0) return false
+ return true
+ }, [amount, recipient, request])
+
+ // check if has sufficient balance for current amount
+ const hasEnoughBalance = useMemo(() => {
+ if (!amount) return false
+ return hasSufficientBalance(amount)
+ }, [amount, hasSufficientBalance])
+
+ // check if should show insufficient balance error
+ // only show after balance has loaded to avoid flash of error on initial render
+ const isInsufficientBalance = useMemo(() => {
+ return (
+ isLoggedIn &&
+ !!amount &&
+ !hasEnoughBalance &&
+ !isLoading &&
+ !isCreatingCharge &&
+ !isRecording &&
+ !isFetchingBalance
+ )
+ }, [isLoggedIn, amount, hasEnoughBalance, isLoading, isCreatingCharge, isRecording, isFetchingBalance])
+
+ // calculate default slider value and suggested amount
+ const sliderDefaults = useMemo(() => {
+ if (totalAmount <= 0) return { percentage: 0, suggestedAmount: 0 }
+
+ // no contributions yet - suggest 100% (full pot)
+ if (contributors.length === 0) {
+ return { percentage: 100, suggestedAmount: totalAmount }
+ }
+
+ // calculate based on existing contributions
+ const contributionAmounts = contributors.map((c) => parseFloat(c.amount)).filter((a) => !isNaN(a) && a > 0)
+
+ if (contributionAmounts.length === 0) return { percentage: 0, suggestedAmount: 0 }
+
+ // check if this is an equal-split pattern
+ const collectedPercentage = (totalCollected / totalAmount) * 100
+ const isOneThirdCollected = Math.abs(collectedPercentage - 100 / 3) < 2
+ const isTwoThirdsCollected = Math.abs(collectedPercentage - 200 / 3) < 2
+
+ if (isOneThirdCollected || isTwoThirdsCollected) {
+ const exactThird = 100 / 3
+ return { percentage: exactThird, suggestedAmount: totalAmount * (exactThird / 100) }
+ }
+
+ // suggest median contribution
+ const sortedAmounts = [...contributionAmounts].sort((a, b) => a - b)
+ const midIndex = Math.floor(sortedAmounts.length / 2)
+ const suggestedAmount =
+ sortedAmounts.length % 2 === 0
+ ? (sortedAmounts[midIndex - 1] + sortedAmounts[midIndex]) / 2
+ : sortedAmounts[midIndex]
+
+ const percentage = Math.min((suggestedAmount / totalAmount) * 100, 100)
+ return { percentage, suggestedAmount }
+ }, [totalAmount, totalCollected, contributors])
+
+ // execute the contribution
+ const executeContribution = useCallback(
+ async (
+ shouldReturnAfterCreatingCharge: boolean = false,
+ bypassLoginCheck: boolean = false
+ ): Promise<{ success: boolean }> => {
+ if (!recipient || !amount || !request) {
+ setError({ showError: true, errorMessage: 'missing required data' })
+ return { success: false }
+ }
+
+ if (!bypassLoginCheck && !walletAddress) {
+ setError({ showError: true, errorMessage: 'Please login to continue' })
+ return { success: false }
+ }
+
+ setIsLoading(true)
+ clearError()
+
+ try {
+ // step 1: create charge for this contribution
+ const chargeResult = await createCharge({
+ tokenAmount: amount,
+ tokenAddress: PEANUT_WALLET_TOKEN as Address,
+ chainId: PEANUT_WALLET_CHAIN.id.toString(),
+ tokenSymbol: 'USDC',
+ tokenDecimals: PEANUT_WALLET_TOKEN_DECIMALS,
+ recipientAddress: recipient.address,
+ transactionType: 'REQUEST',
+ requestId: request.uuid,
+ reference: attachment.message,
+ attachment: attachment.file,
+ currencyAmount: usdAmount,
+ currencyCode: 'USD',
+ })
+
+ setCharge(chargeResult)
+
+ // Return early after creating charge if requested, used in external wallet flow.
+ if (shouldReturnAfterCreatingCharge) {
+ setIsLoading(false)
+ return { success: true }
+ }
+
+ // step 2: send money via peanut wallet
+ const txResult = await sendMoney(recipient.address, amount)
+ const hash = (txResult.receipt?.transactionHash ?? txResult.userOpHash) as Hash
+
+ setTxHash(hash)
+
+ // step 3: record payment to backend
+ const paymentResult = await recordPayment({
+ chargeId: chargeResult.uuid,
+ chainId: PEANUT_WALLET_CHAIN.id.toString(),
+ txHash: hash,
+ tokenAddress: PEANUT_WALLET_TOKEN as Address,
+ payerAddress: walletAddress as Address,
+ })
+
+ setPayment(paymentResult)
+ setIsSuccess(true)
+ setCurrentView('STATUS')
+ setIsLoading(false)
+ return { success: true }
+ } catch (err) {
+ const errorMessage = ErrorHandler(err)
+ setError({ showError: true, errorMessage })
+ setIsLoading(false)
+ return { success: false }
+ }
+ },
+ [
+ recipient,
+ amount,
+ usdAmount,
+ attachment,
+ walletAddress,
+ request,
+ createCharge,
+ sendMoney,
+ recordPayment,
+ setCharge,
+ setTxHash,
+ setPayment,
+ setIsSuccess,
+ setCurrentView,
+ setError,
+ setIsLoading,
+ clearError,
+ ]
+ )
+
+ return {
+ // state
+ amount,
+ usdAmount,
+ currentView,
+ request,
+ recipient,
+ attachment,
+ charge,
+ payment,
+ txHash,
+ error,
+ isLoading: isLoading || isCreatingCharge || isRecording,
+ isSuccess,
+ isExternalWalletPayment,
+
+ // derived data
+ totalAmount,
+ totalCollected,
+ contributors,
+ sliderDefaults,
+
+ // computed
+ canProceed,
+ hasSufficientBalance: hasEnoughBalance,
+ isInsufficientBalance,
+ isLoggedIn,
+ isConnected,
+ walletAddress,
+ formattedBalance,
+
+ // actions
+ setAmount: handleSetAmount,
+ setAttachment,
+ clearError,
+ executeContribution,
+ resetContributePotFlow,
+ setCurrentView,
+ setIsExternalWalletPayment,
+ }
+}
diff --git a/src/features/payments/flows/contribute-pot/views/ContributePotInputView.tsx b/src/features/payments/flows/contribute-pot/views/ContributePotInputView.tsx
new file mode 100644
index 000000000..1c58697e8
--- /dev/null
+++ b/src/features/payments/flows/contribute-pot/views/ContributePotInputView.tsx
@@ -0,0 +1,135 @@
+'use client'
+
+/**
+ * input view for contribute pot flow
+ *
+ * displays:
+ * - recipient card with pot progress (amount collected / total)
+ * - amount input with slider (defaults to smart suggestion)
+ * - payment method options
+ * - contributors drawer (see who else paid)
+ *
+ * executes payment directly on submit
+ */
+
+import NavHeader from '@/components/Global/NavHeader'
+import AmountInput from '@/components/Global/AmountInput'
+import UserCard from '@/components/User/UserCard'
+import ErrorAlert from '@/components/Global/ErrorAlert'
+import SupportCTA from '@/components/Global/SupportCTA'
+import { useContributePotFlow } from '../useContributePotFlow'
+import { useRouter } from 'next/navigation'
+import { useAuth } from '@/context/authContext'
+import { RequestPotActionList } from '../components/RequestPotActionList'
+
+export function ContributePotInputView() {
+ const router = useRouter()
+ const { isFetchingUser } = useAuth()
+ const {
+ amount,
+ request,
+ recipient,
+ error,
+ formattedBalance,
+ canProceed,
+ hasSufficientBalance,
+ isInsufficientBalance,
+ isLoggedIn,
+ isLoading,
+ totalAmount,
+ totalCollected,
+ contributors,
+ sliderDefaults,
+ setAmount,
+ executeContribution,
+ setCurrentView,
+ } = useContributePotFlow()
+
+ // handle submit - directly execute contribution
+ const handlePayWithPeanut = () => {
+ if (canProceed && hasSufficientBalance && !isLoading) {
+ executeContribution()
+ }
+ }
+
+ // handle back navigation
+ const handleGoBack = () => {
+ if (window.history.length > 1) {
+ router.back()
+ } else {
+ router.push('/')
+ }
+ }
+
+ // handle External Wallet click
+ const handleOpenExternalWalletFlow = async () => {
+ if (canProceed && !isLoading) {
+ const res = await executeContribution(true, true) // return after creating charge
+ // Proceed only if charge is created successfully
+ if (res && res.success) {
+ setCurrentView('EXTERNAL_WALLET')
+ }
+ }
+ }
+
+ // determine button state
+ const isAmountEntered = !!amount && parseFloat(amount) > 0
+
+ return (
+
+
+ )
+ }
+
+ // show error if validation failed
+ if (error) {
+ return (
+
+
+ )
+ }
+
+ // show children only after successful validation
+ if (!isValidated) {
+ return (
+
+
+ )
+ }
+
+ return <>{children}
+}
diff --git a/src/components/Withdraw/views/Confirm.withdraw.view.tsx b/src/components/Withdraw/views/Confirm.withdraw.view.tsx
index d556a048a..7c507c3da 100644
--- a/src/components/Withdraw/views/Confirm.withdraw.view.tsx
+++ b/src/components/Withdraw/views/Confirm.withdraw.view.tsx
@@ -1,6 +1,6 @@
'use client'
-import { Button } from '@/components/0_Bruddle'
+import { Button } from '@/components/0_Bruddle/Button'
import AddressLink from '@/components/Global/AddressLink'
import Card from '@/components/Global/Card'
import DisplayIcon from '@/components/Global/DisplayIcon'
@@ -10,12 +10,12 @@ import PeanutActionDetailsCard from '@/components/Global/PeanutActionDetailsCard
import { PaymentInfoRow } from '@/components/Payment/PaymentInfoRow'
import { useTokenChainIcons } from '@/hooks/useTokenChainIcons'
import { type ITokenPriceData } from '@/interfaces'
-import { formatAmount, isStableCoin } from '@/utils'
+import { formatAmount, isStableCoin } from '@/utils/general.utils'
import { interfaces } from '@squirrel-labs/peanut-sdk'
import { type PeanutCrossChainRoute } from '@/services/swap'
import { useMemo, useState } from 'react'
import { formatUnits } from 'viem'
-import { ROUTE_NOT_FOUND_ERROR } from '@/constants'
+import { ROUTE_NOT_FOUND_ERROR } from '@/constants/general.consts'
interface WithdrawConfirmViewProps {
amount: string
diff --git a/src/components/Withdraw/views/Initial.withdraw.view.tsx b/src/components/Withdraw/views/Initial.withdraw.view.tsx
index a7f51f7a1..5ee4b5b56 100644
--- a/src/components/Withdraw/views/Initial.withdraw.view.tsx
+++ b/src/components/Withdraw/views/Initial.withdraw.view.tsx
@@ -5,7 +5,6 @@ import ErrorAlert from '@/components/Global/ErrorAlert'
import GeneralRecipientInput, { type GeneralRecipientUpdate } from '@/components/Global/GeneralRecipientInput'
import NavHeader from '@/components/Global/NavHeader'
import PeanutActionDetailsCard from '@/components/Global/PeanutActionDetailsCard'
-import { PEANUT_WALLET_CHAIN, PEANUT_WALLET_TOKEN } from '@/constants'
import { useWithdrawFlow } from '@/context/WithdrawFlowContext'
import { tokenSelectorContext } from '@/context/tokenSelector.context'
import { type ITokenPriceData } from '@/interfaces'
@@ -14,6 +13,7 @@ import { interfaces } from '@squirrel-labs/peanut-sdk'
import { useRouter } from 'next/navigation'
import { useContext, useEffect } from 'react'
import TokenSelector from '@/components/Global/TokenSelector/TokenSelector'
+import { PEANUT_WALLET_CHAIN, PEANUT_WALLET_TOKEN } from '@/constants/zerodev.consts'
interface InitialWithdrawViewProps {
amount: string
diff --git a/src/components/utils/utils.ts b/src/components/utils/utils.ts
index 034fd3f8b..0fc744b35 100644
--- a/src/components/utils/utils.ts
+++ b/src/components/utils/utils.ts
@@ -1,6 +1,6 @@
-import * as consts from '@/constants'
-import { fetchWithSentry, getExplorerUrl } from '@/utils'
-import * as Sentry from '@sentry/nextjs'
+import { SQUID_API_URL, SQUID_INTEGRATOR_ID } from '@/constants/general.consts'
+import { fetchWithSentry } from '@/utils/sentry.utils'
+import { getExplorerUrl } from '@/utils/general.utils'
type ISquidChainData = {
id: string
@@ -70,8 +70,8 @@ type ISquidStatusResponse = {
export async function checkTransactionStatus(txHash: string): Promise
+ router.back()} />
+
+ )
+ }
+
+ // error state
+ if (error || !request) {
+ return (
+
+
+
+ router.back()} />
+
+ )
+ }
+
+ return
+ {contributorCards.map((contributor, index) => (
+
+
+
+ )
+ }
+
+ return (
+
+ {/* pay with peanut button */}
+
+
+ {/* minimum amount error modal */}
+
+ {sortedMethods.map((method) => {
+ let methodRequiresVerification = method.id === 'bank' && requiresVerification
+ if (!isUserMantecaKycApproved && ['mercadopago', 'pix'].includes(method.id)) {
+ methodRequiresVerification = true
+ }
+
+ return (
+
+ {method.title}
+ {(method.soon || methodRequiresVerification) && (
+
+ }
+ onClick={() => handleMethodClick(method)}
+ isDisabled={method.soon || !isAmountEntered}
+ rightContent={
+
+ )
+}
diff --git a/src/features/payments/flows/contribute-pot/views/ContributePotSuccessView.tsx b/src/features/payments/flows/contribute-pot/views/ContributePotSuccessView.tsx
new file mode 100644
index 000000000..0ac78fa9f
--- /dev/null
+++ b/src/features/payments/flows/contribute-pot/views/ContributePotSuccessView.tsx
@@ -0,0 +1,45 @@
+'use client'
+
+/**
+ * success view for contribute pot flow
+ *
+ * thin wrapper around PaymentSuccessView that:
+ * - pulls data from contribute pot flow context
+ * - calculates points earned for the contribution
+ * - provides reset callback on completion
+ */
+
+import PaymentSuccessView from '@/features/payments/shared/components/PaymentSuccessView'
+import { useContributePotFlow } from '../useContributePotFlow'
+import { usePointsCalculation } from '@/hooks/usePointsCalculation'
+import { PointsAction } from '@/services/services.types'
+
+export function ContributePotSuccessView() {
+ const { usdAmount, recipient, attachment, charge, payment, resetContributePotFlow, isExternalWalletPayment } =
+ useContributePotFlow()
+
+ // calculate points for the contribution
+ const { pointsData } = usePointsCalculation(
+ PointsAction.P2P_REQUEST_PAYMENT,
+ usdAmount,
+ !!payment || isExternalWalletPayment, // For external wallet payments, we dont't have payment info on the FE, its handled by webooks on BE
+ payment?.uuid,
+ recipient?.userId
+ )
+
+ return (
+
+ {/* recipient card with pot info */}
+ {recipient && (
+ 0}
+ maxAmount={totalAmount}
+ amountCollected={totalCollected}
+ defaultSliderValue={sliderDefaults.percentage}
+ defaultSliderSuggestedAmount={sliderDefaults.suggestedAmount}
+ />
+
+ {/* error display */}
+ {isInsufficientBalance && (
+
+
+ {/* support cta */}
+ {!isFetchingUser &&
+ setCurrentView('INITIAL')}
+ identifier={
+ request?.recipientAccount.type === 'peanut-wallet'
+ ? request?.recipientAccount.user.username
+ : request?.recipientAccount.identifier
+ }
+ amount={Number(amount)}
+ />
+
+ )
+}
+
+export default ExternalWalletPaymentView
diff --git a/src/features/payments/flows/direct-send/DirectSendFlowContext.tsx b/src/features/payments/flows/direct-send/DirectSendFlowContext.tsx
new file mode 100644
index 000000000..e2e03d613
--- /dev/null
+++ b/src/features/payments/flows/direct-send/DirectSendFlowContext.tsx
@@ -0,0 +1,155 @@
+'use client'
+
+/**
+ * context for send flow state management
+ *
+ * direct send flow for paying another peanut user by username.
+ * payments are always usdc on arbitrum (peanut wallet).
+ *
+ * route: /send/username
+ *
+ */
+
+import React, { createContext, useContext, useMemo, useState, useCallback, type ReactNode } from 'react'
+import { type Address, type Hash } from 'viem'
+import { type TRequestChargeResponse, type PaymentCreationResponse } from '@/services/services.types'
+
+// view states
+export type DirectSendFlowView = 'INITIAL' | 'STATUS'
+
+// recipient info
+export interface DirectSendRecipient {
+ username: string
+ address: Address
+ userId?: string
+ fullName?: string
+}
+
+// attachment options
+export interface DirectSendAttachment {
+ message?: string
+ file?: File
+ fileUrl?: string
+}
+
+// error state for input view
+export interface DirectSendFlowErrorState {
+ showError: boolean
+ errorMessage: string
+}
+
+// context type
+interface DirectSendFlowContextType {
+ // state
+ amount: string
+ setAmount: (amount: string) => void
+ usdAmount: string
+ setUsdAmount: (amount: string) => void
+ currentView: DirectSendFlowView
+ setCurrentView: (view: DirectSendFlowView) => void
+ recipient: DirectSendRecipient | null
+ setRecipient: (recipient: DirectSendRecipient | null) => void
+ attachment: DirectSendAttachment
+ setAttachment: (attachment: DirectSendAttachment) => void
+ charge: TRequestChargeResponse | null
+ setCharge: (charge: TRequestChargeResponse | null) => void
+ payment: PaymentCreationResponse | null
+ setPayment: (payment: PaymentCreationResponse | null) => void
+ txHash: Hash | null
+ setTxHash: (hash: Hash | null) => void
+ error: DirectSendFlowErrorState
+ setError: (error: DirectSendFlowErrorState) => void
+ isLoading: boolean
+ setIsLoading: (loading: boolean) => void
+ isSuccess: boolean
+ setIsSuccess: (success: boolean) => void
+
+ // actions
+ resetSendFlow: () => void
+}
+
+const DirectSendFlowContext = createContext
+ router.back()} />
+
+ )
+ }
+
+ // error state
+ if (error || !recipient) {
+ return (
+
+
+
+ router.back()} />
+
+ )
+ }
+
+ return
+
+ )
+}
diff --git a/src/features/payments/flows/direct-send/views/SendSuccessView.tsx b/src/features/payments/flows/direct-send/views/SendSuccessView.tsx
new file mode 100644
index 000000000..c12d54b6c
--- /dev/null
+++ b/src/features/payments/flows/direct-send/views/SendSuccessView.tsx
@@ -0,0 +1,44 @@
+'use client'
+
+/**
+ * success view for send flow
+ *
+ * thin wrapper around PaymentSuccessView that:
+ * - pulls data from send flow context
+ * - calculates points earned for the send
+ * - provides reset callback on completion
+ */
+
+import PaymentSuccessView from '@/features/payments/shared/components/PaymentSuccessView'
+import { useDirectSendFlow } from '../useDirectSendFlow'
+import { usePointsCalculation } from '@/hooks/usePointsCalculation'
+import { PointsAction } from '@/services/services.types'
+
+export function SendSuccessView() {
+ const { usdAmount, recipient, attachment, charge, payment, resetSendFlow } = useDirectSendFlow()
+
+ // calculate points for the transaction
+ const { pointsData } = usePointsCalculation(
+ PointsAction.P2P_SEND_LINK,
+ usdAmount,
+ !!payment,
+ payment?.uuid,
+ recipient?.userId
+ )
+
+ return (
+
+ {/* recipient card */}
+ {recipient && (
+
+ setAttachment({
+ message: opts.message,
+ file: opts.rawFile,
+ fileUrl: opts.fileUrl,
+ })
+ }
+ className="h-11"
+ />
+
+ {/* button and error */}
+
+
+ {/* support cta for guest users */}
+ {!isLoggedIn && !isFetchingUser &&
+
+
+ {/* action list for non-logged in users */}
+ {!isLoggedIn && !isFetchingUser &&
+ router.back()} />
+
+ )
+ }
+
+ // error state
+ if (error || !parsedUrl) {
+ return (
+
+
+
+ router.back()} />
+
+ )
+ }
+
+ return
+
+ )
+ }
+
+ return (
+
+
+ )
+}
+
+// helper component for token/chain display
+interface TokenChainInfoDisplayProps {
+ tokenIconUrl?: string
+ chainIconUrl?: string
+ resolvedTokenSymbol?: string
+ fallbackTokenSymbol: string
+ resolvedChainName?: string
+ fallbackChainName: string
+}
+
+function TokenChainInfoDisplay({
+ tokenIconUrl,
+ chainIconUrl,
+ resolvedTokenSymbol,
+ fallbackTokenSymbol,
+ resolvedChainName,
+ fallbackChainName,
+}: TokenChainInfoDisplayProps) {
+ const tokenSymbol = resolvedTokenSymbol || fallbackTokenSymbol
+ const chainName = resolvedChainName || fallbackChainName
+
+ return (
+
+ {recipient && recipient.recipientType && (
+
+
+
+ {/* buttons and error */}
+
+
+ {errorMessage ? (
+
+ ) : (
+
+ )}
+ {errorMessage && (
+
+
+
+ )}
+
+ {(tokenIconUrl || chainIconUrl) && (
+
+ )
+}
diff --git a/src/features/payments/flows/semantic-request/views/SemanticRequestExternalWalletView.tsx b/src/features/payments/flows/semantic-request/views/SemanticRequestExternalWalletView.tsx
new file mode 100644
index 000000000..526126b0f
--- /dev/null
+++ b/src/features/payments/flows/semantic-request/views/SemanticRequestExternalWalletView.tsx
@@ -0,0 +1,51 @@
+import { useCallback, useState } from 'react'
+import { useSemanticRequestFlow } from '../useSemanticRequestFlow'
+import { useWallet } from '@/hooks/wallet/useWallet'
+import { useQuery } from '@tanstack/react-query'
+import { rhinoApi } from '@/services/rhino'
+import RhinoDepositView from '@/components/AddMoney/views/RhinoDeposit.view'
+import type { RhinoChainType } from '@/services/services.types'
+
+const SemanticRequestExternalWalletView = () => {
+ const { charge, setCurrentView, setIsExternalWalletPayment, amount } = useSemanticRequestFlow()
+ const [chainType, setChainType] = useState
+ {tokenIconUrl && (
+
+ )}
+
+ {tokenSymbol} on {chainName}
+
+
+
+ )}
+
+
+ )
+}
diff --git a/src/features/payments/flows/semantic-request/views/SemanticRequestReceiptView.tsx b/src/features/payments/flows/semantic-request/views/SemanticRequestReceiptView.tsx
new file mode 100644
index 000000000..e1b1f91c3
--- /dev/null
+++ b/src/features/payments/flows/semantic-request/views/SemanticRequestReceiptView.tsx
@@ -0,0 +1,131 @@
+'use client'
+
+/**
+ * receipt view for semantic request flow
+ *
+ * displays transaction receipt when visiting a charge url that's already been paid
+ * uses TransactionDetailsReceipt to show full payment details
+ */
+
+import { TransactionDetailsReceipt } from '@/components/TransactionDetails/TransactionDetailsReceipt'
+import { type TransactionDetails } from '@/components/TransactionDetails/transactionTransformer'
+import { useSemanticRequestFlow } from '../useSemanticRequestFlow'
+import { useMemo } from 'react'
+import { type StatusPillType } from '@/components/Global/StatusPill'
+import { EHistoryEntryType, EHistoryUserRole } from '@/hooks/useTransactionHistory'
+import { getInitialsFromName } from '@/utils/general.utils'
+import { BASE_URL } from '@/constants/general.consts'
+import { useTokenChainIcons } from '@/hooks/useTokenChainIcons'
+import PeanutLoading from '@/components/Global/PeanutLoading'
+import NavHeader from '@/components/Global/NavHeader'
+import { useRouter } from 'next/navigation'
+
+export function SemanticRequestReceiptView() {
+ const router = useRouter()
+ const { charge, recipient, parsedUrl, isFetchingCharge } = useSemanticRequestFlow()
+
+ const { tokenIconUrl, chainIconUrl, resolvedChainName, resolvedTokenSymbol } = useTokenChainIcons({
+ chainId: charge?.chainId,
+ tokenSymbol: charge?.tokenSymbol,
+ tokenAddress: charge?.tokenAddress,
+ })
+
+ // construct transaction details for receipt
+ const transactionForReceipt: TransactionDetails | null = useMemo(() => {
+ if (!charge) return null
+
+ // check if charge has been fulfilled
+ const isPaid = charge.fulfillmentPayment?.status === 'SUCCESSFUL'
+ if (!isPaid) return null
+
+ // get the successful payment for payer details
+ const successfulPayment = charge.payments?.find((p) => p.status === 'SUCCESSFUL')
+ if (!successfulPayment) return null
+
+ const recipientIdentifier = recipient?.identifier || parsedUrl?.recipient?.identifier
+ const receiptLink = recipientIdentifier
+ ? `${BASE_URL}/${recipientIdentifier}?chargeId=${charge.uuid}`
+ : undefined
+
+ const networkFeeDisplayValue = '$ 0.00' // fee is zero for peanut wallet txns
+ const peanutFeeDisplayValue = '$ 0.00' // peanut doesn't charge fees yet
+
+ // determine who paid (payer name for display)
+ const payerName = successfulPayment.payerAccount?.user?.username || successfulPayment.payerAddress || 'Unknown'
+
+ const details: Partial
+ {/* recipient card */}
+ {recipient && (
+
+
+ {/* support cta */}
+ {!isLoggedIn &&
+ Use USDC on Arbitrum for free transactions!
+
+ )}
+
+ {/* button and error */}
+
+
+
+ {/* action list for non-logged in users */}
+
+ router.back()} />
+
+ )
+ }
+
+ // show receipt if we have transaction details
+ if (!transactionForReceipt) {
+ return (
+
+
+
+ router.back()} />
+
+ )
+ }
+
+ return (
+
+
+ Unable to load receipt details
+
+ router.back()} />
+
+ )
+}
diff --git a/src/features/payments/flows/semantic-request/views/SemanticRequestSuccessView.tsx b/src/features/payments/flows/semantic-request/views/SemanticRequestSuccessView.tsx
new file mode 100644
index 000000000..bbd41286f
--- /dev/null
+++ b/src/features/payments/flows/semantic-request/views/SemanticRequestSuccessView.tsx
@@ -0,0 +1,55 @@
+'use client'
+
+/**
+ * success view for semantic request flow
+ *
+ * thin wrapper around PaymentSuccessView that:
+ * - pulls data from semantic request flow context
+ * - calculates points earned for the payment
+ * - provides reset callback on completion
+ */
+
+import PaymentSuccessView from '@/features/payments/shared/components/PaymentSuccessView'
+import { useSemanticRequestFlow } from '../useSemanticRequestFlow'
+import { usePointsCalculation } from '@/hooks/usePointsCalculation'
+import { PointsAction } from '@/services/services.types'
+
+export function SemanticRequestSuccessView() {
+ const {
+ usdAmount,
+ recipient,
+ parsedUrl,
+ attachment,
+ charge,
+ payment,
+ resetSemanticRequestFlow,
+ isExternalWalletPayment,
+ } = useSemanticRequestFlow()
+
+ // determine recipient type from parsed url
+ const recipientType = recipient?.recipientType || 'ADDRESS'
+
+ // calculate points for the payment (request fulfillment)
+ const { pointsData } = usePointsCalculation(
+ PointsAction.P2P_REQUEST_PAYMENT,
+ usdAmount,
+ !!payment || isExternalWalletPayment, // For external wallet payments, we dont't have payment info on the FE, its handled by webooks on BE
+ payment?.uuid
+ )
+
+ return (
+
+
+
+
+ )
+ }
+
+ return (
+
+ {showDivider &&
+
+ {sortedMethods.map((method) => {
+ // check if method requires verification (for badge display only)
+ const methodRequiresMantecaVerification =
+ ['mercadopago', 'pix'].includes(method.id) && !isUserMantecaKycApproved
+ const methodRequiresBridgeVerification = method.id === 'bank' && !isUserBridgeKycApproved
+ const methodRequiresVerification =
+ methodRequiresMantecaVerification || methodRequiresBridgeVerification
+ return (
+
+ {method.title}
+ {(method.soon || methodRequiresVerification) && (
+
+ }
+ onClick={() => handleMethodClick(method)}
+ isDisabled={method.soon || !isAmountEntered}
+ rightContent={
+
+ )
+ }, [])
+
+ return (
+
+ )
+}
diff --git a/src/features/payments/shared/hooks/useChargeManager.ts b/src/features/payments/shared/hooks/useChargeManager.ts
new file mode 100644
index 000000000..4d698db9f
--- /dev/null
+++ b/src/features/payments/shared/hooks/useChargeManager.ts
@@ -0,0 +1,194 @@
+'use client'
+
+/**
+ * hook for managing charge lifecycle (create, fetch, cache)
+ *
+ * charges are payment requests stored in our backend. they track:
+ * - what token/chain the recipient wants
+ * - the amount requested
+ * - optional attachments/messages
+ *
+ * used by all payment flows before executing transactions
+ *
+ * @example
+ * const { createCharge, fetchCharge, charge } = useChargeManager()
+ * const newCharge = await createCharge({ tokenAmount: '10', ... })
+ */
+
+import { useState, useCallback } from 'react'
+import { chargesApi } from '@/services/charges'
+import { requestsApi } from '@/services/requests'
+import { type TRequestChargeResponse, type TCharge, type TChargeTransactionType } from '@/services/services.types'
+import { isNativeCurrency } from '@/utils/general.utils'
+import { interfaces as peanutInterfaces } from '@squirrel-labs/peanut-sdk'
+import { type Address } from 'viem'
+
+// params for creating a new charge
+export interface CreateChargeParams {
+ tokenAmount: string
+ tokenAddress: Address
+ chainId: string
+ tokenSymbol: string
+ tokenDecimals: number
+ recipientAddress: Address
+ transactionType?: TChargeTransactionType
+ requestId?: string
+ reference?: string
+ attachment?: File
+ currencyAmount?: string
+ currencyCode?: string
+}
+
+// return type for the hook
+export interface UseChargeManagerReturn {
+ charge: TRequestChargeResponse | null
+ isCreating: boolean
+ isFetching: boolean
+ error: string | null
+ createCharge: (params: CreateChargeParams) => Promise
+ * {truncatedAddress}
+ *
+ * )
+ * ```
+ */
+export const useAutoTruncatedAddress =