[TASK-14942] feat(manteca-deposit): fix manteca deposit

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

@@ -1,5 +1,5 @@
 'use client'
-import MercadoPago from '@/components/AddMoney/components/RegionalMethods/MercadoPago'
+import MantecaAddMoney from '@/components/AddMoney/components/MantecaAddMoney'
 import { CountryData, countryData } from '@/components/AddMoney/consts'
 import { MantecaSupportedExchanges } from '@/components/AddMoney/consts'
 import { useParams } from 'next/navigation'
@@ -13,10 +13,9 @@ export default function AddMoneyRegionalMethodPage() {
 
     if (
         MantecaSupportedExchanges[countryDetails?.id as keyof typeof MantecaSupportedExchanges] &&
-        method === 'mercadopago'
+        method === 'manteca'
     ) {
-        return <MercadoPago source="regionalMethod" />
+        return <MantecaAddMoney source="regionalMethod" />
     }
-
-    return <div>Unsupported Method</div>
+    return null
 }

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

@@ -24,7 +24,6 @@ import { updateUserById } from '@/app/actions/users'
 import AddMoneyBankDetails from '@/components/AddMoney/components/AddMoneyBankDetails'
 import { getCurrencyConfig, getCurrencySymbol, getMinimumAmount } from '@/utils/bridge.utils'
 import { OnrampConfirmationModal } from '@/components/AddMoney/components/OnrampConfirmationModal'
-import MercadoPago from '@/components/AddMoney/components/RegionalMethods/MercadoPago'
 import { InitiateBridgeKYCModal } from '@/components/Kyc/InitiateBridgeKYCModal'
 
 type AddStep = 'inputAmount' | 'kyc' | 'loading' | 'collectUserDetails' | 'showDetails'
@@ -319,11 +318,6 @@ export default function OnrampBankPage() {
         return <AddMoneyBankDetails />
     }
 
-    // Show Mercado Pago flow for Argentina bank transfers
-    if (step === 'inputAmount' && selectedCountry.id === 'AR') {
-        return <MercadoPago source="bank" />
-    }
-
     if (step === 'inputAmount') {
         return (
             <div className="flex flex-col justify-start space-y-8">

src/components/AddMoney/components/InputAmountStep.tsx

@@ -44,8 +44,6 @@ const InputAmountStep = ({
                 <TokenAmountInput
                     tokenValue={tokenAmount}
                     setTokenValue={(e) => setTokenAmount(e ?? '')}
-                    walletBalance={undefined}
-                    hideCurrencyToggle
                     setUsdValue={(e) => setTokenUSDAmount(e)}
                     currency={
                         currencyData
@@ -56,7 +54,7 @@ const InputAmountStep = ({
                               }
                             : undefined
                     }
-                    hideBalance={true}
+                    hideBalance
                 />
                 <div className="flex items-center gap-2 text-xs text-grey-1">
                     <Icon name="info" width={16} height={16} />

src/components/AddMoney/components/RegionalMethods/MercadoPago/index.tsx → src/components/AddMoney/components/MantecaAddMoney.tsx

@@ -1,32 +1,32 @@
 'use client'
 import { FC, useEffect, useMemo, useState } from 'react'
-import MercadoPagoDepositDetails from './MercadoPagoDepositDetails'
-import InputAmountStep from '../../InputAmountStep'
+import MantecaDepositShareDetails from '@/components/AddMoney/components/MantecaDepositShareDetails'
+import InputAmountStep from '@/components/AddMoney/components/InputAmountStep'
 import { useParams, useRouter } from 'next/navigation'
 import { CountryData, countryData } from '@/components/AddMoney/consts'
-import { MantecaDepositDetails } from '@/types/manteca.types'
+import { MantecaDepositResponseData } from '@/types/manteca.types'
 import { InitiateMantecaKYCModal } from '@/components/Kyc/InitiateMantecaKYCModal'
 import { useMantecaKycFlow } from '@/hooks/useMantecaKycFlow'
 import { useCurrency } from '@/hooks/useCurrency'
 import { useAuth } from '@/context/authContext'
 import { useWebSocket } from '@/hooks/useWebSocket'
 import { mantecaApi } from '@/services/manteca'
 
-interface MercadoPagoProps {
+interface MantecaAddMoneyProps {
     source: 'bank' | 'regionalMethod'
 }
 
 type stepType = 'inputAmount' | 'depositDetails'
 
-const MercadoPago: FC<MercadoPagoProps> = ({ source }) => {
+const MantecaAddMoney: FC<MantecaAddMoneyProps> = ({ source }) => {
     const params = useParams()
     const router = useRouter()
     const [step, setStep] = useState<stepType>('inputAmount')
     const [isCreatingDeposit, setIsCreatingDeposit] = useState(false)
     const [tokenAmount, setTokenAmount] = useState('')
     const [tokenUSDAmount, setTokenUSDAmount] = useState('')
     const [error, setError] = useState<string | null>(null)
-    const [depositDetails, setDepositDetails] = useState<MantecaDepositDetails>()
+    const [depositDetails, setDepositDetails] = useState<MantecaDepositResponseData>()
     const [isKycModalOpen, setIsKycModalOpen] = useState(false)
 
     const selectedCountryPath = params.country as string
@@ -97,7 +97,7 @@ const MercadoPago: FC<MercadoPagoProps> = ({ source }) => {
         if (isMantecaKycRequired) {
             setIsKycModalOpen(true)
         }
-    }, [isMantecaKycRequired, countryData])
+    }, [isMantecaKycRequired])
 
     if (!selectedCountry) return null
 
@@ -131,10 +131,10 @@ const MercadoPago: FC<MercadoPagoProps> = ({ source }) => {
     }
 
     if (step === 'depositDetails' && depositDetails) {
-        return <MercadoPagoDepositDetails source={source} depositDetails={depositDetails} />
+        return <MantecaDepositShareDetails source={source} depositDetails={depositDetails} />
     }
 
     return null
 }
 
-export default MercadoPago
+export default MantecaAddMoney

src/components/AddMoney/components/MantecaDepositShareDetails.tsx

@@ -0,0 +1,132 @@
+'use client'
+
+import NavHeader from '@/components/Global/NavHeader'
+import { useParams, useRouter } from 'next/navigation'
+import React, { useMemo } from 'react'
+import { countryData } from '@/components/AddMoney/consts'
+import ShareButton from '@/components/Global/ShareButton'
+import { MantecaDepositResponseData } from '@/types/manteca.types'
+import { PaymentInfoRow } from '@/components/Payment/PaymentInfoRow'
+import { Icon } from '@/components/Global/Icons/Icon'
+import Image from 'next/image'
+import { Card } from '@/components/0_Bruddle/Card'
+
+const MantecaDepositShareDetails = ({
+    depositDetails,
+    source,
+}: {
+    depositDetails: MantecaDepositResponseData
+    source: 'bank' | 'regionalMethod'
+}) => {
+    const router = useRouter()
+    const params = useParams()
+    const currentCountryName = params.country as string
+
+    const currentCountryDetails = useMemo(() => {
+        // check if we have country params (from dynamic route)
+        if (currentCountryName) {
+            return countryData.find(
+                (country) => country.type === 'country' && country.path === currentCountryName.toLowerCase()
+            )
+        }
+        // Default to Argentina
+        return countryData.find((c) => c.id === 'AR')
+    }, [currentCountryName])
+
+    const countryCodeForFlag = useMemo(() => {
+        const countryId = currentCountryDetails?.id || 'AR'
+        return countryId.toLowerCase()
+    }, [currentCountryDetails])
+
+    const depositAddressLabel = useMemo(() => {
+        switch (currentCountryDetails?.id) {
+            case 'AR':
+                return 'CBU'
+            case 'BR':
+                return 'Pix Key'
+            default:
+                return 'Deposit Address'
+        }
+    }, [currentCountryDetails])
+
+    const depositAddress = depositDetails.details.depositAddress
+    const depositAlias = depositDetails.details.depositAlias
+    const depositAmount = depositDetails.stages['1'].thresholdAmount
+    const usdAmount = depositDetails.stages['3'].amount
+    const currencySymbol = depositDetails.stages['1'].asset
+    const exchangeRate = depositDetails.details.price
+
+    const generateShareText = () => {
+        const textParts = []
+        const currencySymbol = currentCountryDetails?.currency || 'ARS'
+
+        textParts.push(`Amount: ${currencySymbol} ${depositAmount}`)
+
+        if (depositAddress) {
+            textParts.push(`${depositAddressLabel}: ${depositAddress}`)
+        }
+        if (depositAlias) {
+            textParts.push(`Alias: ${depositAlias}`)
+        }
+
+        return textParts.join('\n')
+    }
+
+    return (
+        <div className="flex h-full w-full flex-col justify-start gap-8 self-start">
+            <NavHeader title={'Add Money'} onPrev={() => router.back()} />
+            <div className="my-auto flex h-full w-full flex-col justify-center space-y-4">
+                {/* Amount Display Card */}
+                <Card className="p-4">
+                    <div className="flex items-center space-x-3">
+                        <div className="relative h-12 w-12">
+                            <Image
+                                src={`https://flagcdn.com/w160/${countryCodeForFlag}.png`}
+                                alt={`flag`}
+                                width={48}
+                                height={48}
+                                className="h-12 w-12 rounded-full object-cover"
+                            />
+                            <div className="absolute -bottom-1 -right-1 flex h-6 w-6 items-center justify-center rounded-full bg-yellow-1">
+                                <Icon name="bank" size={12} />
+                            </div>
+                        </div>
+                        <div>
+                            <p className="flex items-center gap-1 text-center text-sm text-gray-600">
+                                <Icon name="arrow-down" size={10} /> You're adding
+                            </p>
+                            <p className="text-2xl font-bold">
+                                {currencySymbol} {depositAmount}
+                            </p>
+                            <div className="text-lg font-bold">≈ {usdAmount} USD</div>
+                        </div>
+                    </div>
+                </Card>
+                <h2 className="font-bold">Account details</h2>
+                <Card className="space-y-0 rounded-sm px-4">
+                    {depositAddress && <PaymentInfoRow label={depositAddressLabel} value={depositAddress} allowCopy />}
+                    {depositAlias && <PaymentInfoRow label="Alias" value={depositAlias} allowCopy />}
+                    {currentCountryDetails?.id === 'AR' && (
+                        <>
+                            <PaymentInfoRow label="Razón Social" value="Sixalime Sas" />
+                            <PaymentInfoRow label="CUIT" value="30-71678845-3" />
+                        </>
+                    )}
+                    <PaymentInfoRow label="Exchange Rate" value={`1 USD = ${exchangeRate} ${currencySymbol}`} />
+                    <PaymentInfoRow label="Peanut fee" value="Sponsored by Peanut!" hideBottomBorder />
+                </Card>
+            </div>
+
+            <ShareButton
+                generateText={async () => generateShareText()}
+                title="Bank Transfer Details"
+                variant="purple"
+                className="w-full"
+            >
+                Share Details
+            </ShareButton>
+        </div>
+    )
+}
+
+export default MantecaDepositShareDetails