diff --git a/assets/img/services/payment-methods/apple-pay-logo.svg b/assets/img/services/payment-methods/apple-pay-logo.svg deleted file mode 100644 index 9ac889274..000000000 --- a/assets/img/services/payment-methods/apple-pay-logo.svg +++ /dev/null @@ -1,28 +0,0 @@ - - - Apple_Pay_Mark_RGB_041619 2 - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/assets/img/services/payment-methods/icon-bank.svg b/assets/img/services/payment-methods/icon-bank.svg deleted file mode 100644 index c9d3c1d36..000000000 --- a/assets/img/services/payment-methods/icon-bank.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - Group 5 - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/assets/img/services/payment-methods/icon-creditcard.svg b/assets/img/services/payment-methods/icon-creditcard.svg deleted file mode 100644 index 2865cd78c..000000000 --- a/assets/img/services/payment-methods/icon-creditcard.svg +++ /dev/null @@ -1,20 +0,0 @@ - - - Group 2 - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/assets/img/services/payment-methods/icon-debitcard.svg b/assets/img/services/payment-methods/icon-debitcard.svg deleted file mode 100644 index 3da6a59c6..000000000 --- a/assets/img/services/payment-methods/icon-debitcard.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - credit-card - - - - - - - - - - \ No newline at end of file diff --git a/assets/img/services/swap-crypto/down-arrow.svg b/assets/img/swap-crypto/down-arrow.svg similarity index 100% rename from assets/img/services/swap-crypto/down-arrow.svg rename to assets/img/swap-crypto/down-arrow.svg diff --git a/assets/img/services/swap-crypto/icon-history.svg b/assets/img/swap-crypto/icon-history.svg similarity index 100% rename from assets/img/services/swap-crypto/icon-history.svg rename to assets/img/swap-crypto/icon-history.svg diff --git a/assets/img/services/swap-crypto/slider-thumb.png b/assets/img/swap-crypto/slider-thumb.png similarity index 100% rename from assets/img/services/swap-crypto/slider-thumb.png rename to assets/img/swap-crypto/slider-thumb.png diff --git a/src/components/icons/payment-methods/payment-methods.tsx b/src/components/icons/payment-methods/payment-methods.tsx new file mode 100644 index 000000000..6b21500d9 --- /dev/null +++ b/src/components/icons/payment-methods/payment-methods.tsx @@ -0,0 +1,305 @@ +import React from 'react'; +import {Svg, Path, G, Mask, Polygon, Rect} from 'react-native-svg'; +import {useTheme} from 'styled-components/native'; +import {PaymentMethodKey} from '../../../navigation/services/buy-crypto/constants/BuyCryptoConstants'; +import {WithdrawalMethodKey} from '../../../navigation/services/sell-crypto/constants/SellCryptoConstants'; +import {White} from '../../../styles/colors'; + +const PaymentMethodIcon: React.FC<{ + paymentMethodId: PaymentMethodKey | WithdrawalMethodKey; + width?: number; + height?: number; +}> = ({paymentMethodId, width, height}) => { + const renderSvg = (id: PaymentMethodKey | WithdrawalMethodKey) => { + const theme = useTheme(); + switch (id) { + case 'ach': + case 'gbpBankTransfer': + case 'sepaBankTransfer': + return ( + + + + + + + + + + + + + + + + + ); + case 'applePay': + return ( + + + + + + + + + + + + + + + + + + + + + + + + ); + + case 'creditCard': + case 'other': + return ( + + + + + + + + + + + + + + + + + + + ); + + case 'debitCard': + return ( + + + + + + + + + + + + ); + + case 'paypal': + return ( + + + + + + + + + + + + ); + + case 'venmo': + return ( + + + + ); + + default: + return null; + } + }; + + return renderSvg(paymentMethodId); +}; + +export default PaymentMethodIcon; diff --git a/src/navigation/services/buy-crypto/components/PaymentMethodModal.tsx b/src/navigation/services/buy-crypto/components/PaymentMethodModal.tsx index a6980497b..ce65e3587 100644 --- a/src/navigation/services/buy-crypto/components/PaymentMethodModal.tsx +++ b/src/navigation/services/buy-crypto/components/PaymentMethodModal.tsx @@ -1,5 +1,6 @@ import React from 'react'; import {ScrollView, SafeAreaView, View} from 'react-native'; +import {orderBy} from 'lodash'; import styled from 'styled-components/native'; import { ModalContainer, @@ -39,6 +40,7 @@ import { import {useAppDispatch, useAppSelector} from '../../../../utils/hooks'; import {useTranslation} from 'react-i18next'; import {PaymentMethod} from '../constants/BuyCryptoConstants'; +import {WithdrawalMethod} from '../../sell-crypto/constants/SellCryptoConstants'; import {showBottomNotificationModal} from '../../../../store/app/app.actions'; import {sleep} from '../../../../utils/helper-methods'; @@ -145,6 +147,14 @@ const PaymentMethodsModal = ({ const EnabledPaymentMethods = getEnabledPaymentMethods(); + const OrderedEnabledPaymentMethods = EnabledPaymentMethods + ? orderBy( + EnabledPaymentMethods, + ['order'], + ['asc'], + ) + : null; + const showOtherPaymentMethodsInfoSheet = async ( paymentMethod: PaymentMethod, onPress: Function, @@ -252,113 +262,116 @@ const PaymentMethodsModal = ({ - {EnabledPaymentMethods - ? Object.values(EnabledPaymentMethods).map(paymentMethod => { - return ( - { - paymentMethod.method !== 'other' - ? onPress(paymentMethod) - : showOtherPaymentMethodsInfoSheet( - paymentMethod, - onPress, - ); - }}> - - onPress(paymentMethod)} - checked={ - selectedPaymentMethod.method == paymentMethod.method - } - /> - - - {paymentMethod.label} - + {OrderedEnabledPaymentMethods + ? Object.values(OrderedEnabledPaymentMethods).map( + paymentMethod => { + return paymentMethod ? ( + { + paymentMethod.method !== 'other' + ? onPress(paymentMethod) + : showOtherPaymentMethodsInfoSheet( + paymentMethod, + onPress, + ); + }}> + + onPress(paymentMethod)} + checked={ + selectedPaymentMethod.method == + paymentMethod.method + } + /> + + + {paymentMethod.label} + + + {paymentMethod.method === 'other' ? ( + + + See + + + other supported payment methods + + + ) : null} - {paymentMethod.method === 'other' ? ( - + - See + {t('Provided by')} - - other supported payment methods - - - ) : null} - - - - {t('Provided by')} - - - - {context === 'buyCrypto' ? ( - <> - {preSetPartner && - BuyCryptoSupportedExchanges.includes( - preSetPartner as BuyCryptoExchangeKey, - ) - ? getPartnerLogo(preSetPartner, false) - : BuyCryptoSupportedExchanges.map( - exchange => { - return coin && - currency && - chain && - isPaymentMethodSupported( - exchange, - paymentMethod, - coin, - chain, - currency, - locationData?.countryShortCode || - 'US', - ) - ? getPartnerLogo(exchange, true) - : null; - }, - )} - - ) : null} - {context === 'sellCrypto' ? ( - <> - {preSetPartner && - SellCryptoSupportedExchanges.includes( - preSetPartner as SellCryptoExchangeKey, - ) - ? getPartnerLogo(preSetPartner) - : SellCryptoSupportedExchanges.map( - exchange => { - return coin && - currency && - chain && - isWithdrawalMethodSupported( - exchange, - paymentMethod, - coin, - chain, - currency, - locationData?.countryShortCode || - 'US', - ) - ? getPartnerLogo(exchange) - : null; - }, - )} - - ) : null} - - - - - ); - }) + + + {context === 'buyCrypto' ? ( + <> + {preSetPartner && + BuyCryptoSupportedExchanges.includes( + preSetPartner as BuyCryptoExchangeKey, + ) + ? getPartnerLogo(preSetPartner, false) + : BuyCryptoSupportedExchanges.map( + exchange => { + return coin && + currency && + chain && + isPaymentMethodSupported( + exchange, + paymentMethod as PaymentMethod, + coin, + chain, + currency, + locationData?.countryShortCode || + 'US', + ) + ? getPartnerLogo(exchange, true) + : null; + }, + )} + + ) : null} + {context === 'sellCrypto' ? ( + <> + {preSetPartner && + SellCryptoSupportedExchanges.includes( + preSetPartner as SellCryptoExchangeKey, + ) + ? getPartnerLogo(preSetPartner) + : SellCryptoSupportedExchanges.map( + exchange => { + return coin && + currency && + chain && + isWithdrawalMethodSupported( + exchange, + paymentMethod as WithdrawalMethod, + coin, + chain, + currency, + locationData?.countryShortCode || + 'US', + ) + ? getPartnerLogo(exchange) + : null; + }, + )} + + ) : null} + + + + + ) : null; + }, + ) : null} diff --git a/src/navigation/services/buy-crypto/constants/BuyCryptoConstants.tsx b/src/navigation/services/buy-crypto/constants/BuyCryptoConstants.tsx index a00f8f40e..13eaad0cf 100644 --- a/src/navigation/services/buy-crypto/constants/BuyCryptoConstants.tsx +++ b/src/navigation/services/buy-crypto/constants/BuyCryptoConstants.tsx @@ -1,11 +1,6 @@ import React from 'react'; import {Platform} from 'react-native'; - -// Images -import ApplePayIcon from '../../../../../assets/img/services/payment-methods/apple-pay-logo.svg'; -import BankIcon from '../../../../../assets/img/services/payment-methods/icon-bank.svg'; -import CreditCardIcon from '../../../../../assets/img/services/payment-methods/icon-creditcard.svg'; -import DebitCardIcon from '../../../../../assets/img/services/payment-methods/icon-debitcard.svg'; +import PaymentMethodIcon from '../../../../components/icons/payment-methods/payment-methods'; import { countriesWithACH, countriesWithSEPA, @@ -18,13 +13,16 @@ export type PaymentMethodKey = | 'creditCard' | 'debitCard' | 'sepaBankTransfer' - | 'other'; + | 'other' + | 'paypal' + | 'venmo'; export type PaymentMethods = { [key in PaymentMethodKey]: PaymentMethod; }; export interface PaymentMethod { + order: number; label: string; method: PaymentMethodKey; imgSrc: JSX.Element; @@ -37,9 +35,10 @@ export interface PaymentMethod { export const PaymentMethodsAvailable: PaymentMethods = { ach: { + order: 6, label: 'ACH Bank Transfer', method: 'ach', - imgSrc: , + imgSrc: , supportedExchanges: { banxa: false, moonpay: false, @@ -52,9 +51,12 @@ export const PaymentMethodsAvailable: PaymentMethods = { enabled: true, }, applePay: { + order: 2, label: 'Apple Pay', method: 'applePay', - imgSrc: , + imgSrc: ( + + ), supportedExchanges: { banxa: true, moonpay: true, @@ -66,9 +68,12 @@ export const PaymentMethodsAvailable: PaymentMethods = { enabled: Platform.OS === 'ios', }, creditCard: { + order: 5, label: 'Credit Card', method: 'creditCard', - imgSrc: , + imgSrc: ( + + ), supportedExchanges: { banxa: true, moonpay: true, @@ -80,9 +85,12 @@ export const PaymentMethodsAvailable: PaymentMethods = { enabled: true, }, debitCard: { + order: 1, label: 'Debit Card', method: 'debitCard', - imgSrc: , + imgSrc: ( + + ), supportedExchanges: { banxa: true, moonpay: true, @@ -94,9 +102,16 @@ export const PaymentMethodsAvailable: PaymentMethods = { enabled: true, }, sepaBankTransfer: { + order: 7, label: 'SEPA Bank Transfer', method: 'sepaBankTransfer', - imgSrc: , + imgSrc: ( + + ), supportedExchanges: { banxa: true, moonpay: true, @@ -109,9 +124,12 @@ export const PaymentMethodsAvailable: PaymentMethods = { enabled: true, }, other: { + order: 8, label: 'Other', method: 'other', - imgSrc: , + imgSrc: ( + + ), supportedExchanges: { banxa: true, moonpay: true, @@ -122,4 +140,38 @@ export const PaymentMethodsAvailable: PaymentMethods = { }, enabled: true, }, + paypal: { + order: 3, + label: 'PayPal', + method: 'paypal', + imgSrc: ( + + ), + supportedExchanges: { + banxa: false, + moonpay: true, + ramp: false, + sardine: false, + simplex: false, + transak: false, + }, + enabled: true, + }, + venmo: { + order: 4, + label: 'Venmo', + method: 'venmo', + imgSrc: ( + + ), + supportedExchanges: { + banxa: false, + moonpay: true, + ramp: false, + sardine: false, + simplex: false, + transak: false, + }, + enabled: true, + }, }; diff --git a/src/navigation/services/buy-crypto/screens/BuyCryptoOffers.tsx b/src/navigation/services/buy-crypto/screens/BuyCryptoOffers.tsx index 50e498e48..de75cd9ae 100644 --- a/src/navigation/services/buy-crypto/screens/BuyCryptoOffers.tsx +++ b/src/navigation/services/buy-crypto/screens/BuyCryptoOffers.tsx @@ -49,7 +49,10 @@ import { BanxaQuoteData, BuyCryptoLimits, MoonpayGetCurrencyLimitsRequestData, + MoonpayGetSignedPaymentUrlData, + MoonpayGetSignedPaymentUrlReqData, MoonpayPaymentData, + MoonpayPaymentType, RampGetAssetsData, RampGetAssetsRequestData, RampPaymentData, @@ -101,6 +104,7 @@ import { } from '../utils/banxa-utils'; import { getMoonpayFixedCurrencyAbbreviation, + getMoonpayPaymentMethodFormat, moonpayEnv, } from '../utils/moonpay-utils'; import { @@ -728,23 +732,12 @@ const BuyCryptoOffers: React.FC = () => { return; } - let _paymentMethod: string | undefined; - switch (paymentMethod.method) { - case 'debitCard': - case 'creditCard': - _paymentMethod = 'credit_debit_card'; - break; - case 'sepaBankTransfer': - _paymentMethod = 'sepa_bank_transfer'; - // Moonpay only accepts EUR as a base currency for SEPA payments - offers.moonpay.fiatCurrency = 'EUR'; - break; - case 'applePay': - _paymentMethod = 'mobile_wallet'; - break; - default: - _paymentMethod = undefined; - break; + let _paymentMethod: MoonpayPaymentType | undefined = + getMoonpayPaymentMethodFormat(paymentMethod.method); + + if (_paymentMethod === 'sepa_bank_transfer') { + // Moonpay only accepts EUR as a base currency for SEPA payments + offers.moonpay.fiatCurrency = 'EUR'; } offers.moonpay.fiatAmount = @@ -1844,7 +1837,7 @@ const BuyCryptoOffers: React.FC = () => { }), ); - const quoteData = { + const quoteData: MoonpayGetSignedPaymentUrlReqData = { currencyCode: getMoonpayFixedCurrencyAbbreviation( coin.toLowerCase(), destinationChain, @@ -1860,9 +1853,17 @@ const BuyCryptoOffers: React.FC = () => { showWalletAddressForm: false, }; - let data; + let _paymentMethod: MoonpayPaymentType | undefined = + getMoonpayPaymentMethodFormat(paymentMethod.method); + if (_paymentMethod) { + quoteData.paymentMethod = _paymentMethod; + } + + let data: MoonpayGetSignedPaymentUrlData; try { - data = await selectedWallet.moonpayGetSignedPaymentUrl(quoteData); + data = (await selectedWallet.moonpayGetSignedPaymentUrl( + quoteData, + )) as MoonpayGetSignedPaymentUrlData; } catch (err) { const reason = 'moonpayGetSignedPaymentUrl Error'; showMoonpayError(err, reason); diff --git a/src/navigation/services/buy-crypto/utils/moonpay-utils.ts b/src/navigation/services/buy-crypto/utils/moonpay-utils.ts index 7327b275c..95579f0d4 100644 --- a/src/navigation/services/buy-crypto/utils/moonpay-utils.ts +++ b/src/navigation/services/buy-crypto/utils/moonpay-utils.ts @@ -1,7 +1,9 @@ import {t} from 'i18next'; import cloneDeep from 'lodash.clonedeep'; +import {MoonpayPaymentType} from '../../../../store/buy-crypto/buy-crypto.models'; import {getCurrencyAbbreviation} from '../../../../utils/helper-methods'; import {externalServicesCoinMapping} from '../../utils/external-services-utils'; +import {PaymentMethodKey} from '../constants/BuyCryptoConstants'; export const moonpayEnv = __DEV__ ? 'sandbox' : 'production'; @@ -191,6 +193,36 @@ export const getMoonpayFixedCurrencyAbbreviation = ( } }; +export const getMoonpayPaymentMethodFormat = ( + method: PaymentMethodKey, +): MoonpayPaymentType | undefined => { + let moonpayPaymentMethod: MoonpayPaymentType | undefined; + if (method) { + switch (method) { + case 'debitCard': + case 'creditCard': + moonpayPaymentMethod = 'credit_debit_card'; + break; + case 'sepaBankTransfer': + moonpayPaymentMethod = 'sepa_bank_transfer'; + break; + case 'applePay': + moonpayPaymentMethod = 'mobile_wallet'; + break; + case 'paypal': + moonpayPaymentMethod = 'paypal'; + break; + case 'venmo': + moonpayPaymentMethod = 'venmo'; + break; + default: + moonpayPaymentMethod = undefined; + break; + } + } + return moonpayPaymentMethod; +}; + export const getMoonpayFiatAmountLimits = () => { return { min: 30, diff --git a/src/navigation/services/sell-crypto/constants/SellCryptoConstants.tsx b/src/navigation/services/sell-crypto/constants/SellCryptoConstants.tsx index e24bb7ec4..f4dd732ee 100644 --- a/src/navigation/services/sell-crypto/constants/SellCryptoConstants.tsx +++ b/src/navigation/services/sell-crypto/constants/SellCryptoConstants.tsx @@ -1,9 +1,5 @@ import React from 'react'; - -// Images -import BankIcon from '../../../../../assets/img/services/payment-methods/icon-bank.svg'; -import CreditCardIcon from '../../../../../assets/img/services/payment-methods/icon-creditcard.svg'; -import DebitCardIcon from '../../../../../assets/img/services/payment-methods/icon-debitcard.svg'; +import PaymentMethodIcon from '../../../../components/icons/payment-methods/payment-methods'; import { countriesWithACH, countriesWithGBPTransfer, @@ -11,21 +7,23 @@ import { } from '../../constants/PaymentMethodsConstants'; import {SellCryptoExchangeKey} from '../utils/sell-crypto-utils'; -// ach_bank_transfer, credit_debit_card, sepa_bank_transfer and gbp_bank_transfer -export type PaymentMethodKey = +export type WithdrawalMethodKey = | 'ach' | 'creditCard' | 'debitCard' | 'sepaBankTransfer' - | 'gbpBankTransfer'; + | 'gbpBankTransfer' + | 'paypal' + | 'venmo'; -export type PaymentMethods = { - [key in PaymentMethodKey]: PaymentMethod; +export type WithdrawalMethods = { + [key in WithdrawalMethodKey]: WithdrawalMethod; }; -export interface PaymentMethod { +export interface WithdrawalMethod { + order: number; label: string; - method: PaymentMethodKey; + method: WithdrawalMethodKey; imgSrc: JSX.Element; supportedExchanges: { [key in SellCryptoExchangeKey]: boolean; @@ -34,11 +32,12 @@ export interface PaymentMethod { supportedCountries?: string[]; } -export const PaymentMethodsAvailable: PaymentMethods = { +export const WithdrawalMethodsAvailable: WithdrawalMethods = { ach: { + order: 5, label: 'ACH Bank Transfer', method: 'ach', - imgSrc: , + imgSrc: , supportedExchanges: { moonpay: true, simplex: false, @@ -47,9 +46,12 @@ export const PaymentMethodsAvailable: PaymentMethods = { enabled: true, }, creditCard: { + order: 4, label: 'Credit Card', method: 'creditCard', - imgSrc: , + imgSrc: ( + + ), supportedExchanges: { moonpay: false, simplex: true, @@ -57,9 +59,12 @@ export const PaymentMethodsAvailable: PaymentMethods = { enabled: true, }, debitCard: { + order: 1, label: 'Debit Card', method: 'debitCard', - imgSrc: , + imgSrc: ( + + ), supportedExchanges: { moonpay: true, simplex: true, @@ -67,9 +72,16 @@ export const PaymentMethodsAvailable: PaymentMethods = { enabled: true, }, sepaBankTransfer: { + order: 6, label: 'SEPA Bank Transfer', method: 'sepaBankTransfer', - imgSrc: , + imgSrc: ( + + ), supportedExchanges: { moonpay: true, simplex: true, @@ -78,9 +90,16 @@ export const PaymentMethodsAvailable: PaymentMethods = { enabled: true, }, gbpBankTransfer: { + order: 7, label: 'GBP Bank Transfer', method: 'gbpBankTransfer', - imgSrc: , + imgSrc: ( + + ), supportedExchanges: { moonpay: true, simplex: false, @@ -88,4 +107,30 @@ export const PaymentMethodsAvailable: PaymentMethods = { supportedCountries: countriesWithGBPTransfer, enabled: true, }, + paypal: { + order: 2, + label: 'PayPal', + method: 'paypal', + imgSrc: ( + + ), + supportedExchanges: { + moonpay: true, + simplex: false, + }, + enabled: true, + }, + venmo: { + order: 3, + label: 'Venmo', + method: 'venmo', + imgSrc: ( + + ), + supportedExchanges: { + moonpay: true, + simplex: false, + }, + enabled: true, + }, }; diff --git a/src/navigation/services/sell-crypto/screens/MoonpaySellCheckout.tsx b/src/navigation/services/sell-crypto/screens/MoonpaySellCheckout.tsx index e4cf57c83..2584a07cb 100644 --- a/src/navigation/services/sell-crypto/screens/MoonpaySellCheckout.tsx +++ b/src/navigation/services/sell-crypto/screens/MoonpaySellCheckout.tsx @@ -101,7 +101,7 @@ import {MoonpaySettingsProps} from '../../../../navigation/tabs/settings/externa import SendToPill from '../../../../navigation/wallet/components/SendToPill'; import {SellCryptoActions} from '../../../../store/sell-crypto'; import haptic from '../../../../components/haptic-feedback/haptic'; -import {PaymentMethodsAvailable} from '../constants/SellCryptoConstants'; +import {WithdrawalMethodsAvailable} from '../constants/SellCryptoConstants'; import {getSendMaxData} from '../../utils/external-services-utils'; import { ConfirmHardwareWalletModal, @@ -924,7 +924,7 @@ const MoonpaySellCheckout: React.FC = () => { ) : ( <> {getPayoutMethodKeyFromMoonpayType(txData?.payoutMethod) && - PaymentMethodsAvailable[ + WithdrawalMethodsAvailable[ getPayoutMethodKeyFromMoonpayType(txData?.payoutMethod)! ] ? ( <> @@ -935,7 +935,7 @@ const MoonpaySellCheckout: React.FC = () => { numberOfLines={1} ellipsizeMode={'tail'}> { - PaymentMethodsAvailable[ + WithdrawalMethodsAvailable[ getPayoutMethodKeyFromMoonpayType( txData?.payoutMethod, )! @@ -946,9 +946,9 @@ const MoonpaySellCheckout: React.FC = () => { - ) : PaymentMethodsAvailable && + ) : WithdrawalMethodsAvailable && sellOrder.payment_method && - PaymentMethodsAvailable[sellOrder.payment_method] ? ( + WithdrawalMethodsAvailable[sellOrder.payment_method] ? ( <> {t('Withdrawing Method')} @@ -956,7 +956,10 @@ const MoonpaySellCheckout: React.FC = () => { - {PaymentMethodsAvailable[sellOrder.payment_method].label} + { + WithdrawalMethodsAvailable[sellOrder.payment_method] + .label + } diff --git a/src/navigation/services/sell-crypto/screens/SellCryptoOffers.tsx b/src/navigation/services/sell-crypto/screens/SellCryptoOffers.tsx index 94036919d..79fba3f26 100644 --- a/src/navigation/services/sell-crypto/screens/SellCryptoOffers.tsx +++ b/src/navigation/services/sell-crypto/screens/SellCryptoOffers.tsx @@ -36,7 +36,6 @@ import { BitPay, LuckySevens, } from '../../../../styles/colors'; -import {RootState} from '../../../../store'; import { GetPrecision, IsERCToken, @@ -67,7 +66,7 @@ import { getCurrencyAbbreviation, sleep, } from '../../../../utils/helper-methods'; -import {PaymentMethod} from '../constants/SellCryptoConstants'; +import {WithdrawalMethod} from '../constants/SellCryptoConstants'; import {useTranslation} from 'react-i18next'; import { TermsContainer, @@ -100,10 +99,6 @@ import { SimplexSellPaymentRequestReqData, } from '../../../../store/sell-crypto/models/simplex-sell.models'; import {SellCryptoScreens} from '../SellCryptoGroup'; -import { - simplexGetSellQuote, - simplexSellPaymentRequest, -} from '../../../../store/buy-crypto/effects/simplex/simplex'; export type SellCryptoOffersScreenParams = { amount: number; @@ -112,7 +107,7 @@ export type SellCryptoOffersScreenParams = { chain: string; country: string; selectedWallet: Wallet; - paymentMethod: PaymentMethod; + paymentMethod: WithdrawalMethod; sellCryptoConfig: SellCryptoConfig | undefined; preSetPartner?: SellCryptoExchangeKey | undefined; preLoadPartnersData?: PreLoadPartnersData; @@ -382,9 +377,12 @@ const SellCryptoOffers: React.FC = () => { } offersDefault[exchange].fiatCurrency = - getAvailableSellCryptoFiatCurrencies(exchange).includes(fiatCurrency) + getAvailableSellCryptoFiatCurrencies( + exchange, + paymentMethod.method, + ).includes(fiatCurrency) ? fiatCurrency - : getBaseSellCryptoFiatCurrencies(exchange); + : getBaseSellCryptoFiatCurrencies(exchange, paymentMethod.method); if ( preSetPartner && diff --git a/src/navigation/services/sell-crypto/screens/SellCryptoRoot.tsx b/src/navigation/services/sell-crypto/screens/SellCryptoRoot.tsx index 0da45dd4c..99e178bd6 100644 --- a/src/navigation/services/sell-crypto/screens/SellCryptoRoot.tsx +++ b/src/navigation/services/sell-crypto/screens/SellCryptoRoot.tsx @@ -16,8 +16,7 @@ import { } from '../../../../utils/hooks'; import {SellCryptoScreens, SellCryptoGroupParamList} from '../SellCryptoGroup'; import { - PaymentMethod, - PaymentMethodKey, + WithdrawalMethod, } from '../../sell-crypto/constants/SellCryptoConstants'; import PaymentMethodsModal from '../../buy-crypto/components/PaymentMethodModal'; import AmountModal from '../../../../components/amount/AmountModal'; @@ -286,7 +285,7 @@ const SellCryptoRoot = ({ const [walletSelectorModalVisible, setWalletSelectorModalVisible] = useState(false); const [selectedPaymentMethod, setSelectedPaymentMethod] = - useState(); + useState(); const [sellCryptoSupportedCoins, setSellCryptoSupportedCoins] = useState(); const [moonpaySelectedCoin, setMoonpaySelectedCoin] = @@ -585,21 +584,10 @@ const SellCryptoRoot = ({ }; const setDefaultPaymentMethod = () => { - const defaultPaymentMethod: PaymentMethod = getDefaultPaymentMethod( + const defaultPaymentMethod: WithdrawalMethod = getDefaultPaymentMethod( locationData?.countryShortCode, ); setSelectedPaymentMethod(defaultPaymentMethod); - checkAndSetFiatCurrency(defaultPaymentMethod.method); - }; - - const checkAndSetFiatCurrency = (paymentMethodKey: PaymentMethodKey) => { - const fiatList = getMoonpayFiatListByPayoutMethod(paymentMethodKey); - if (fiatList && fiatList[0] && !fiatList.includes(fiatCurrency)) { - logger.debug( - `Updating fiat currency from ${fiatCurrency} to ${fiatList[0]}.`, - ); - setFiatCurrency(fiatList[0]); - } }; const checkPaymentMethod = () => { @@ -1780,7 +1768,6 @@ const SellCryptoRoot = ({ setUseSendMax(false); setSendMaxInfo(undefined); setLoadingQuote(false); - checkAndSetFiatCurrency(paymentMethod.method); }} isVisible={paymentMethodModalVisible} onBackdropPress={() => hideModal('paymentMethod')} diff --git a/src/navigation/services/sell-crypto/screens/SimplexSellCheckout.tsx b/src/navigation/services/sell-crypto/screens/SimplexSellCheckout.tsx index 300c9f8a8..1c151cabb 100644 --- a/src/navigation/services/sell-crypto/screens/SimplexSellCheckout.tsx +++ b/src/navigation/services/sell-crypto/screens/SimplexSellCheckout.tsx @@ -92,7 +92,7 @@ import {SimplexSettingsProps} from '../../../../navigation/tabs/settings/externa import SendToPill from '../../../../navigation/wallet/components/SendToPill'; import {SellCryptoActions} from '../../../../store/sell-crypto'; import haptic from '../../../../components/haptic-feedback/haptic'; -import {PaymentMethodKey} from '../constants/SellCryptoConstants'; +import {WithdrawalMethodKey} from '../constants/SellCryptoConstants'; import { ConfirmHardwareWalletModal, SimpleConfirmPaymentState, @@ -143,7 +143,7 @@ export interface SimplexSellCheckoutProps { wallet: Wallet; amount: number; externalId: string; - paymentMethod: PaymentMethodKey; + paymentMethod: WithdrawalMethodKey; simplexTxId: string; useSendMax?: boolean; sendMaxInfo?: SendMaxInfo; diff --git a/src/navigation/services/sell-crypto/utils/moonpay-sell-utils.ts b/src/navigation/services/sell-crypto/utils/moonpay-sell-utils.ts index 36edfac32..669cda55c 100644 --- a/src/navigation/services/sell-crypto/utils/moonpay-sell-utils.ts +++ b/src/navigation/services/sell-crypto/utils/moonpay-sell-utils.ts @@ -5,7 +5,7 @@ import { } from '../../../../store/sell-crypto/models/moonpay-sell.models'; import {t} from 'i18next'; import {getCurrencyAbbreviation} from '../../../../utils/helper-methods'; -import {PaymentMethodKey} from '../constants/SellCryptoConstants'; +import {WithdrawalMethodKey} from '../constants/SellCryptoConstants'; import cloneDeep from 'lodash.clonedeep'; export const moonpaySellEnv = __DEV__ ? 'sandbox' : 'production'; @@ -231,7 +231,7 @@ export const getMoonpaySellCurrenciesFixedProps = ( }; export const getMoonpaySellPayoutMethodFormat = ( - method: PaymentMethodKey, + method: WithdrawalMethodKey, ): MoonpayPayoutMethodType | undefined => { if (!method) { return undefined; @@ -251,6 +251,12 @@ export const getMoonpaySellPayoutMethodFormat = ( case 'gbpBankTransfer': formattedPaymentMethod = 'gbp_bank_transfer'; break; + case 'paypal': + formattedPaymentMethod = 'paypal'; + break; + case 'venmo': + formattedPaymentMethod = 'venmo'; + break; default: formattedPaymentMethod = undefined; break; @@ -260,11 +266,11 @@ export const getMoonpaySellPayoutMethodFormat = ( export const getPayoutMethodKeyFromMoonpayType = ( method: MoonpayPayoutMethodType | undefined, -): PaymentMethodKey | undefined => { +): WithdrawalMethodKey | undefined => { if (!method) { return undefined; } - let formattedPaymentMethod: PaymentMethodKey | undefined; + let formattedPaymentMethod: WithdrawalMethodKey | undefined; switch (method) { case 'ach_bank_transfer': formattedPaymentMethod = 'ach'; @@ -286,18 +292,17 @@ export const getPayoutMethodKeyFromMoonpayType = ( }; export const getMoonpayFiatListByPayoutMethod = ( - method: PaymentMethodKey, -): string[] | undefined => { - if (!method) { - return undefined; - } - let fiatList: string[] | undefined; + method: WithdrawalMethodKey, +): string[] => { + let fiatList: string[]; switch (method) { case 'ach': fiatList = ['USD']; break; case 'creditCard': case 'debitCard': + case 'paypal': + case 'venmo': const debitCardSupportedFiat = cloneDeep( moonpaySellSupportedFiatCurrencies, ); diff --git a/src/navigation/services/sell-crypto/utils/sell-crypto-utils.ts b/src/navigation/services/sell-crypto/utils/sell-crypto-utils.ts index a6bcd4954..59bd2d40e 100644 --- a/src/navigation/services/sell-crypto/utils/sell-crypto-utils.ts +++ b/src/navigation/services/sell-crypto/utils/sell-crypto-utils.ts @@ -1,9 +1,11 @@ import { - PaymentMethod, - PaymentMethods, - PaymentMethodsAvailable, + WithdrawalMethod, + WithdrawalMethodKey, + WithdrawalMethods, + WithdrawalMethodsAvailable, } from '../constants/SellCryptoConstants'; import { + getMoonpayFiatListByPayoutMethod, getMoonpaySellSupportedCurrencies, moonpaySellSupportedFiatCurrencies, } from './moonpay-sell-utils'; @@ -29,13 +31,13 @@ export const getSellEnabledPaymentMethods = ( locationCountry?: string, userCountry?: string, exchange?: SellCryptoExchangeKey | undefined, -): Partial => { +): Partial => { if (!currency || !coin || !chain) { return {}; } const isPaymentMethodEnabled = ( - paymentMethod: PaymentMethod, + paymentMethod: WithdrawalMethod, locationCountry: string | undefined, userCountry: string | undefined, ) => { @@ -46,20 +48,20 @@ export const getSellEnabledPaymentMethods = ( ); }; - PaymentMethodsAvailable.sepaBankTransfer.enabled = isPaymentMethodEnabled( - PaymentMethodsAvailable.sepaBankTransfer, + WithdrawalMethodsAvailable.sepaBankTransfer.enabled = isPaymentMethodEnabled( + WithdrawalMethodsAvailable.sepaBankTransfer, locationCountry, userCountry, ); - PaymentMethodsAvailable.ach.enabled = isPaymentMethodEnabled( - PaymentMethodsAvailable.ach, + WithdrawalMethodsAvailable.ach.enabled = isPaymentMethodEnabled( + WithdrawalMethodsAvailable.ach, locationCountry, userCountry, ); - PaymentMethodsAvailable.gbpBankTransfer.enabled = isPaymentMethodEnabled( - PaymentMethodsAvailable.gbpBankTransfer, + WithdrawalMethodsAvailable.gbpBankTransfer.enabled = isPaymentMethodEnabled( + WithdrawalMethodsAvailable.gbpBankTransfer, locationCountry, userCountry, ); @@ -67,7 +69,7 @@ export const getSellEnabledPaymentMethods = ( // Helper function to check if a payment method is supported by a specific exchange const isSupportedByExchange = ( exchange: SellCryptoExchangeKey, - method: PaymentMethod, + method: WithdrawalMethod, coin: string, chain: string, currency: string, @@ -88,7 +90,7 @@ export const getSellEnabledPaymentMethods = ( // Determine supported exchanges for a payment method const getSupportedExchanges = ( exchange: SellCryptoExchangeKey | undefined, - method: PaymentMethod, + method: WithdrawalMethod, coin: string, chain: string, currency: string, @@ -131,45 +133,48 @@ export const getSellEnabledPaymentMethods = ( }; // Filter enabled payment methods - const EnabledPaymentMethods = pickBy(PaymentMethodsAvailable, method => { - return ( - method.enabled && - getSupportedExchanges( - exchange, - method, - coin, - chain, - currency, - locationCountry, - userCountry, - ) - ); - }); + const EnabledWithdrawalMethods = pickBy( + WithdrawalMethodsAvailable, + method => { + return ( + method.enabled && + getSupportedExchanges( + exchange, + method, + coin, + chain, + currency, + locationCountry, + userCountry, + ) + ); + }, + ); - return EnabledPaymentMethods; + return EnabledWithdrawalMethods; }; -export const getDefaultPaymentMethod = (country?: string): PaymentMethod => { +export const getDefaultPaymentMethod = (country?: string): WithdrawalMethod => { if (!country) { - return PaymentMethodsAvailable.debitCard; + return WithdrawalMethodsAvailable.debitCard; } else if ( - PaymentMethodsAvailable.ach.supportedCountries?.includes(country) + WithdrawalMethodsAvailable.ach.supportedCountries?.includes(country) ) { - return PaymentMethodsAvailable.ach; + return WithdrawalMethodsAvailable.ach; } else if ( - PaymentMethodsAvailable.gbpBankTransfer.supportedCountries?.includes( + WithdrawalMethodsAvailable.gbpBankTransfer.supportedCountries?.includes( country, ) ) { - return PaymentMethodsAvailable.gbpBankTransfer; + return WithdrawalMethodsAvailable.gbpBankTransfer; } else if ( - PaymentMethodsAvailable.sepaBankTransfer.supportedCountries?.includes( + WithdrawalMethodsAvailable.sepaBankTransfer.supportedCountries?.includes( country, ) ) { - return PaymentMethodsAvailable.sepaBankTransfer; + return WithdrawalMethodsAvailable.sepaBankTransfer; } - return PaymentMethodsAvailable.debitCard; + return WithdrawalMethodsAvailable.debitCard; }; export const getSellCryptoSupportedCoins = ( @@ -205,10 +210,15 @@ export const getSellCryptoSupportedCoins = ( export const getAvailableSellCryptoFiatCurrencies = ( exchange?: string, + paymentMethodKey?: WithdrawalMethodKey, ): string[] => { switch (exchange) { case 'moonpay': - return moonpaySellSupportedFiatCurrencies; + if (paymentMethodKey) { + return getMoonpayFiatListByPayoutMethod(paymentMethodKey); + } else { + return moonpaySellSupportedFiatCurrencies; + } case 'simplex': return simplexSellSupportedFiatCurrencies; default: @@ -222,10 +232,17 @@ export const getAvailableSellCryptoFiatCurrencies = ( } }; -export const getBaseSellCryptoFiatCurrencies = (exchange?: string): string => { +export const getBaseSellCryptoFiatCurrencies = ( + exchange?: string, + paymentMethodKey?: WithdrawalMethodKey, +): string => { switch (exchange) { case 'moonpay': - return 'USD'; + const fiatList = getAvailableSellCryptoFiatCurrencies( + 'moonpay', + paymentMethodKey, + ); + return fiatList[0] || 'USD'; case 'simplex': return 'EUR'; default: @@ -235,7 +252,7 @@ export const getBaseSellCryptoFiatCurrencies = (exchange?: string): string => { export const isWithdrawalMethodSupported = ( exchange: SellCryptoExchangeKey, - paymentMethod: PaymentMethod, + paymentMethod: WithdrawalMethod, coin: string, chain: string, currency: string, diff --git a/src/navigation/services/sell-crypto/utils/simplex-sell-utils.ts b/src/navigation/services/sell-crypto/utils/simplex-sell-utils.ts index e8bb7410c..fc896dc50 100644 --- a/src/navigation/services/sell-crypto/utils/simplex-sell-utils.ts +++ b/src/navigation/services/sell-crypto/utils/simplex-sell-utils.ts @@ -4,7 +4,7 @@ import { } from '../../../../store/sell-crypto/models/simplex-sell.models'; import {t} from 'i18next'; import {getCurrencyAbbreviation} from '../../../../utils/helper-methods'; -import {PaymentMethodKey} from '../constants/SellCryptoConstants'; +import {WithdrawalMethodKey} from '../constants/SellCryptoConstants'; import {externalServicesCoinMapping} from '../../utils/external-services-utils'; import {SimplexCurrencyNetworkCode} from '../../../../store/buy-crypto/models/simplex.models'; import {isEuCountry} from '../../../../store/location/location.effects'; @@ -130,7 +130,7 @@ export const getChainFromSimplexNetworkCode = ( }; export const getSimplexSellPayoutMethodFormat = ( - method: PaymentMethodKey, + method: WithdrawalMethodKey, ): SimplexPayoutMethodType | undefined => { if (!method) { return undefined; diff --git a/src/navigation/services/swap-crypto/SwapCryptoGroup.tsx b/src/navigation/services/swap-crypto/SwapCryptoGroup.tsx index 2d33e5244..a1e12a88f 100644 --- a/src/navigation/services/swap-crypto/SwapCryptoGroup.tsx +++ b/src/navigation/services/swap-crypto/SwapCryptoGroup.tsx @@ -13,7 +13,7 @@ import ThorswapCheckout, { } from './screens/ThorswapCheckout'; import {HeaderRightContainer} from '../../../components/styled/Containers'; import {Wallet} from '../../../store/wallet/wallet.models'; -import HistoryIcon from '../../../../assets/img/services/swap-crypto/icon-history.svg'; +import HistoryIcon from '../../../../assets/img/swap-crypto/icon-history.svg'; import {useAppSelector} from '../../../utils/hooks'; import {useTranslation} from 'react-i18next'; import {Root, navigationRef} from '../../../Root'; diff --git a/src/navigation/services/swap-crypto/screens/SwapCryptoOffers.tsx b/src/navigation/services/swap-crypto/screens/SwapCryptoOffers.tsx index 62e02f80d..3b7b9dc4d 100644 --- a/src/navigation/services/swap-crypto/screens/SwapCryptoOffers.tsx +++ b/src/navigation/services/swap-crypto/screens/SwapCryptoOffers.tsx @@ -104,7 +104,7 @@ import throttle from 'lodash.throttle'; import {SwapCryptoScreens} from '../SwapCryptoGroup'; import Checkbox from '../../../../components/checkbox/Checkbox'; -const ThumbImage = require('../../../../../assets/img/services/swap-crypto/slider-thumb.png'); +const ThumbImage = require('../../../../../assets/img/swap-crypto/slider-thumb.png'); export type SwapCryptoOffersScreenParams = { amountFrom: number; diff --git a/src/navigation/services/swap-crypto/screens/SwapCryptoRoot.tsx b/src/navigation/services/swap-crypto/screens/SwapCryptoRoot.tsx index 4429e1e6d..bdc1a61fd 100644 --- a/src/navigation/services/swap-crypto/screens/SwapCryptoRoot.tsx +++ b/src/navigation/services/swap-crypto/screens/SwapCryptoRoot.tsx @@ -78,7 +78,7 @@ import { dismissOnGoingProcessModal, showBottomNotificationModal, } from '../../../../store/app/app.actions'; -import ArrowDown from '../../../../../assets/img/services/swap-crypto/down-arrow.svg'; +import ArrowDown from '../../../../../assets/img/swap-crypto/down-arrow.svg'; import InfoSvg from '../../../../../assets/img/info.svg'; import {AppActions} from '../../../../store/app'; import {useTranslation} from 'react-i18next'; diff --git a/src/navigation/wallet/screens/GlobalSelect.tsx b/src/navigation/wallet/screens/GlobalSelect.tsx index db3084d25..bbbd90877 100644 --- a/src/navigation/wallet/screens/GlobalSelect.tsx +++ b/src/navigation/wallet/screens/GlobalSelect.tsx @@ -1608,7 +1608,8 @@ const GlobalSelect: React.FC = ({ onBackdropPress={() => { setCryptoSelectModalVisible(false); }}> - +

{cryptoSelectContext?.title}

diff --git a/src/store/buy-crypto/buy-crypto.models.ts b/src/store/buy-crypto/buy-crypto.models.ts index 630b29417..3a1b4bdd7 100644 --- a/src/store/buy-crypto/buy-crypto.models.ts +++ b/src/store/buy-crypto/buy-crypto.models.ts @@ -261,6 +261,30 @@ export interface MoonpayGetCurrencyLimitsRequestData { paymentMethod?: string; } +export type MoonpayPaymentType = + | 'venmo' + | 'paypal' + | 'mobile_wallet' // applePay + | 'sepa_bank_transfer' + | 'credit_debit_card'; + +export interface MoonpayGetSignedPaymentUrlReqData { + env: 'sandbox' | 'production'; + currencyCode: string; + walletAddress: string; + baseCurrencyCode: string; + baseCurrencyAmount: number; + externalTransactionId: string; + redirectURL: string; + lockAmount: boolean; + showWalletAddressForm: boolean; + paymentMethod?: MoonpayPaymentType; +} + +export interface MoonpayGetSignedPaymentUrlData { + urlWithSignature: string; +} + export interface MoonpayPaymentData { address: string; chain: string; diff --git a/src/store/sell-crypto/models/moonpay-sell.models.ts b/src/store/sell-crypto/models/moonpay-sell.models.ts index bcca17a34..e8daa2953 100644 --- a/src/store/sell-crypto/models/moonpay-sell.models.ts +++ b/src/store/sell-crypto/models/moonpay-sell.models.ts @@ -1,4 +1,4 @@ -import {PaymentMethodKey} from '../../../navigation/services/sell-crypto/constants/SellCryptoConstants'; +import {WithdrawalMethodKey} from '../../../navigation/services/sell-crypto/constants/SellCryptoConstants'; export type MoonpaySellOrderStatus = | 'createdOrder' @@ -22,7 +22,7 @@ export interface MoonpaySellOrderData { fiat_receiving_amount: number; fiat_fee_amount: number; fiat_currency: string; - payment_method: PaymentMethodKey; // bitpay-app payment method id + payment_method: WithdrawalMethodKey; // bitpay-app payment method id external_id: string; // bitpay-app custom id status: MoonpaySellOrderStatus; transaction_id?: string; // id form moonpay @@ -40,7 +40,7 @@ export interface MoonpaySellIncomingData { baseCurrencyAmount?: string | number; // cryptoAmount fiatAmount?: number; fiatCurrencyCode?: string; - paymentMethod?: PaymentMethodKey; + paymentMethod?: WithdrawalMethodKey; totalFee?: number; depositWalletAddress?: string; txSentOn?: number; @@ -89,7 +89,9 @@ export type MoonpayPayoutMethodType = | 'ach_bank_transfer' | 'credit_debit_card' | 'sepa_bank_transfer' - | 'gbp_bank_transfer'; + | 'gbp_bank_transfer' + | 'paypal' + | 'venmo'; export interface MoonpayGetSellQuoteRequestData { env: 'sandbox' | 'production';