Merge pull request #1190 from peanutprotocol/feat/manteca-qr

[TASK-12883] Add manteca QR payments

Author: jjramirezn

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

@@ -0,0 +1,12 @@
+import { generateMetadata } from '@/app/metadata'
+import PageContainer from '@/components/0_Bruddle/PageContainer'
+import React from 'react'
+
+export const metadata = generateMetadata({
+    title: 'QR Payment | Peanut',
+    description: 'Use Peanut to pay Argentinian MercadoPago and Brazilian Pix QR codes',
+})
+
+export default function QRPayLayout({ children }: { children: React.ReactNode }) {
+    return <PageContainer>{children}</PageContainer>
+}

src/app/(mobile-ui)/qr-pay/page.tsx

@@ -497,7 +497,7 @@ export default function PaymentPage({ recipient, flow = 'request_pay' }: Props)
                                 ? {
                                       code: currencyCode,
                                       symbol: currencySymbol!,
-                                      price: currencyPrice!,
+                                      price: currencyPrice!.buy,
                                   }
                                 : undefined
                         }

src/app/[...recipient]/client.tsx

@@ -1,55 +1,45 @@
 'use server'
 import { unstable_cache } from 'next/cache'
-import { fetchWithSentry } from '@/utils'
 import { getExchangeRate } from './exchange-rate'
 import { AccountType } from '@/interfaces'
+import { mantecaApi } from '@/services/manteca'
+
+const MANTECA_CURRENCIES = ['ARS', 'BRL', 'COP', 'CRC', 'PUSD', 'GTQ', 'PHP', 'BOB']
 
 export const getCurrencyPrice = unstable_cache(
-    async (currencyCode: string): Promise<number> => {
-        let price: number
+    async (currencyCode: string): Promise<{ buy: number; sell: number }> => {
+        let buy: number
+        let sell: number
         currencyCode = currencyCode.toUpperCase()
-        switch (currencyCode) {
-            case 'USD':
-                price = 1
-                break
-            case 'EUR':
-            case 'MXN':
-                {
-                    let accountType: AccountType
-                    if (currencyCode === 'EUR') {
-                        accountType = AccountType.IBAN
-                    } else if (currencyCode === 'MXN') {
-                        accountType = AccountType.CLABE
-                    } else {
-                        throw new Error('Invalid currency code')
-                    }
-                    const { data, error } = await getExchangeRate(accountType)
-                    if (error) {
-                        throw new Error('Failed to fetch exchange rate from bridge')
-                    }
-                    if (!data) {
-                        throw new Error('No data returned from exchange rate API')
-                    }
-                    price = parseFloat(data.buy_rate)
-                }
-                break
-            case 'ARS':
-                {
-                    const response = await fetchWithSentry('https://dolarapi.com/v1/dolares/cripto')
-                    const data = await response.json()
-
-                    if (!data.compra || !data.venta) {
-                        throw new Error('Invalid response from dolarapi')
-                    }
-
-                    // Average between buy and sell price
-                    price = (data.compra + data.venta) / 2
-                }
-                break
-            default:
-                throw new Error('Unsupported currency')
+        if (currencyCode === 'USD') {
+            buy = 1
+            sell = 1
+        } else if (['EUR', 'MXN'].includes(currencyCode)) {
+            let accountType: AccountType
+            if (currencyCode === 'EUR') {
+                accountType = AccountType.IBAN
+            } else if (currencyCode === 'MXN') {
+                accountType = AccountType.CLABE
+            } else {
+                throw new Error('Invalid currency code')
+            }
+            const { data, error } = await getExchangeRate(accountType)
+            if (error) {
+                throw new Error('Failed to fetch exchange rate from bridge')
+            }
+            if (!data) {
+                throw new Error('No data returned from exchange rate API')
+            }
+            buy = parseFloat(data.buy_rate)
+            sell = parseFloat(data.sell_rate)
+        } else if (MANTECA_CURRENCIES.includes(currencyCode)) {
+            const response = await mantecaApi.getPrices({ asset: 'USDC', against: currencyCode })
+            buy = Number(response.effectiveBuy)
+            sell = Number(response.effectiveSell)
+        } else {
+            throw new Error('Invalid currency code')
         }
-        return price
+        return { buy, sell }
     },
     ['getCurrencyPrice'],
     {

src/app/actions/currency.ts

@@ -78,7 +78,7 @@ export async function createOnrampForGuest(
     try {
         const { currency, paymentRail } = getCurrencyConfig(params.country.id, 'onramp')
         const price = await getCurrencyPrice(currency)
-        const amount = (Number(params.amount) * price).toFixed(2)
+        const amount = (Number(params.amount) * price.buy).toFixed(2)
 
         const response = await fetchWithSentry(`${apiUrl}/bridge/onramp/create-for-guest`, {
             method: 'POST',

src/app/actions/onramp.ts

@@ -3,4 +3,5 @@ export { default as GOOGLE_PAY } from './google-pay.svg'
 export { default as MERCADO_PAGO } from './mercado-pago.svg'
 export { default as PAYPAL } from './paypal.svg'
 export { default as SATISPAY } from './satispay.svg'
+export { default as PIX } from './pix.svg'
 

src/assets/payment-apps/index.ts

@@ -29,7 +29,7 @@ const Card = ({ children, className, shadowSize, color = 'primary', ...props }:
         <div
             // Tailwind merge makes sure classes added through className by component caller are merged and overrides the default classes
             className={twMerge(
-                `flex flex-col border border-n-1 bg-white dark:border-white dark:bg-n-1`,
+                `flex flex-col rounded-sm border border-n-1 bg-white dark:border-white dark:bg-n-1`,
                 shadowClass,
                 className
             )}

src/assets/payment-apps/mercado-pago.svg

@@ -53,7 +53,7 @@ const InputAmountStep = ({
                             ? {
                                   code: currencyData.code!,
                                   symbol: currencyData.symbol!,
-                                  price: currencyData.price!,
+                                  price: currencyData.price!.buy,
                               }
                             : undefined
                     }