|
| 1 | +'use client' |
| 2 | + |
| 3 | +import NavHeader from '@/components/Global/NavHeader' |
| 4 | +import { useParams, useRouter } from 'next/navigation' |
| 5 | +import React, { useMemo } from 'react' |
| 6 | +import { countryData } from '@/components/AddMoney/consts' |
| 7 | +import ShareButton from '@/components/Global/ShareButton' |
| 8 | +import { MantecaDepositResponseData } from '@/types/manteca.types' |
| 9 | +import { PaymentInfoRow } from '@/components/Payment/PaymentInfoRow' |
| 10 | +import { Icon } from '@/components/Global/Icons/Icon' |
| 11 | +import Image from 'next/image' |
| 12 | +import { Card } from '@/components/0_Bruddle/Card' |
| 13 | + |
| 14 | +const MantecaDepositShareDetails = ({ |
| 15 | + depositDetails, |
| 16 | + source, |
| 17 | +}: { |
| 18 | + depositDetails: MantecaDepositResponseData |
| 19 | + source: 'bank' | 'regionalMethod' |
| 20 | +}) => { |
| 21 | + const router = useRouter() |
| 22 | + const params = useParams() |
| 23 | + const currentCountryName = params.country as string |
| 24 | + |
| 25 | + const currentCountryDetails = useMemo(() => { |
| 26 | + // check if we have country params (from dynamic route) |
| 27 | + if (currentCountryName) { |
| 28 | + return countryData.find( |
| 29 | + (country) => country.type === 'country' && country.path === currentCountryName.toLowerCase() |
| 30 | + ) |
| 31 | + } |
| 32 | + // Default to Argentina |
| 33 | + return countryData.find((c) => c.id === 'AR') |
| 34 | + }, [currentCountryName]) |
| 35 | + |
| 36 | + const countryCodeForFlag = useMemo(() => { |
| 37 | + const countryId = currentCountryDetails?.id || 'AR' |
| 38 | + return countryId.toLowerCase() |
| 39 | + }, [currentCountryDetails]) |
| 40 | + |
| 41 | + const depositAddressLabel = useMemo(() => { |
| 42 | + switch (currentCountryDetails?.id) { |
| 43 | + case 'AR': |
| 44 | + return 'CBU' |
| 45 | + case 'BR': |
| 46 | + return 'Pix Key' |
| 47 | + default: |
| 48 | + return 'Deposit Address' |
| 49 | + } |
| 50 | + }, [currentCountryDetails]) |
| 51 | + |
| 52 | + const depositAddress = depositDetails.details.depositAddress |
| 53 | + const depositAlias = depositDetails.details.depositAlias |
| 54 | + const depositAmount = depositDetails.stages['1'].thresholdAmount |
| 55 | + const usdAmount = depositDetails.stages['3'].amount |
| 56 | + const currencySymbol = depositDetails.stages['1'].asset |
| 57 | + const exchangeRate = depositDetails.details.price |
| 58 | + |
| 59 | + const generateShareText = () => { |
| 60 | + const textParts = [] |
| 61 | + const currencySymbol = currentCountryDetails?.currency || 'ARS' |
| 62 | + |
| 63 | + textParts.push(`Amount: ${currencySymbol} ${depositAmount}`) |
| 64 | + |
| 65 | + if (depositAddress) { |
| 66 | + textParts.push(`${depositAddressLabel}: ${depositAddress}`) |
| 67 | + } |
| 68 | + if (depositAlias) { |
| 69 | + textParts.push(`Alias: ${depositAlias}`) |
| 70 | + } |
| 71 | + |
| 72 | + return textParts.join('\n') |
| 73 | + } |
| 74 | + |
| 75 | + return ( |
| 76 | + <div className="flex h-full w-full flex-col justify-start gap-8 self-start"> |
| 77 | + <NavHeader title={'Add Money'} onPrev={() => router.back()} /> |
| 78 | + <div className="my-auto flex h-full w-full flex-col justify-center space-y-4"> |
| 79 | + {/* Amount Display Card */} |
| 80 | + <Card className="p-4"> |
| 81 | + <div className="flex items-center space-x-3"> |
| 82 | + <div className="relative h-12 w-12"> |
| 83 | + <Image |
| 84 | + src={`https://flagcdn.com/w160/${countryCodeForFlag}.png`} |
| 85 | + alt={`flag`} |
| 86 | + width={48} |
| 87 | + height={48} |
| 88 | + className="h-12 w-12 rounded-full object-cover" |
| 89 | + /> |
| 90 | + <div className="absolute -bottom-1 -right-1 flex h-6 w-6 items-center justify-center rounded-full bg-yellow-1"> |
| 91 | + <Icon name="bank" size={12} /> |
| 92 | + </div> |
| 93 | + </div> |
| 94 | + <div> |
| 95 | + <p className="flex items-center gap-1 text-center text-sm text-gray-600"> |
| 96 | + <Icon name="arrow-down" size={10} /> You're adding |
| 97 | + </p> |
| 98 | + <p className="text-2xl font-bold"> |
| 99 | + {currencySymbol} {depositAmount} |
| 100 | + </p> |
| 101 | + <div className="text-lg font-bold">≈ {usdAmount} USD</div> |
| 102 | + </div> |
| 103 | + </div> |
| 104 | + </Card> |
| 105 | + <h2 className="font-bold">Account details</h2> |
| 106 | + <Card className="space-y-0 rounded-sm px-4"> |
| 107 | + {depositAddress && <PaymentInfoRow label={depositAddressLabel} value={depositAddress} allowCopy />} |
| 108 | + {depositAlias && <PaymentInfoRow label="Alias" value={depositAlias} allowCopy />} |
| 109 | + {currentCountryDetails?.id === 'AR' && ( |
| 110 | + <> |
| 111 | + <PaymentInfoRow label="Razón Social" value="Sixalime Sas" /> |
| 112 | + <PaymentInfoRow label="CUIT" value="30-71678845-3" /> |
| 113 | + </> |
| 114 | + )} |
| 115 | + <PaymentInfoRow label="Exchange Rate" value={`1 USD = ${exchangeRate} ${currencySymbol}`} /> |
| 116 | + <PaymentInfoRow label="Peanut fee" value="Sponsored by Peanut!" hideBottomBorder /> |
| 117 | + </Card> |
| 118 | + </div> |
| 119 | + |
| 120 | + <ShareButton |
| 121 | + generateText={async () => generateShareText()} |
| 122 | + title="Bank Transfer Details" |
| 123 | + variant="purple" |
| 124 | + className="w-full" |
| 125 | + > |
| 126 | + Share Details |
| 127 | + </ShareButton> |
| 128 | + </div> |
| 129 | + ) |
| 130 | +} |
| 131 | + |
| 132 | +export default MantecaDepositShareDetails |
0 commit comments