diff --git a/src/images/svg/payment-airtm.svg b/src/images/svg/payment-methods/payment-airtm.svg similarity index 100% rename from src/images/svg/payment-airtm.svg rename to src/images/svg/payment-methods/payment-airtm.svg diff --git a/src/images/svg/payment-bank-transfer.svg b/src/images/svg/payment-methods/payment-bank-transfer.svg similarity index 100% rename from src/images/svg/payment-bank-transfer.svg rename to src/images/svg/payment-methods/payment-bank-transfer.svg diff --git a/src/images/svg/payment-methods/payment-banxa.svg b/src/images/svg/payment-methods/payment-banxa.svg new file mode 100644 index 00000000000..793c9fe2048 --- /dev/null +++ b/src/images/svg/payment-methods/payment-banxa.svg @@ -0,0 +1,55 @@ + \ No newline at end of file diff --git a/src/images/svg/payment-binance-usd.svg b/src/images/svg/payment-methods/payment-binance-usd.svg similarity index 100% rename from src/images/svg/payment-binance-usd.svg rename to src/images/svg/payment-methods/payment-binance-usd.svg diff --git a/src/images/svg/payment-bitcoin.svg b/src/images/svg/payment-methods/payment-bitcoin.svg similarity index 100% rename from src/images/svg/payment-bitcoin.svg rename to src/images/svg/payment-methods/payment-bitcoin.svg diff --git a/src/images/svg/payment-methods/payment-changelly.svg b/src/images/svg/payment-methods/payment-changelly.svg new file mode 100644 index 00000000000..04b456bb8ae --- /dev/null +++ b/src/images/svg/payment-methods/payment-changelly.svg @@ -0,0 +1,25 @@ + \ No newline at end of file diff --git a/src/images/svg/payment-diners.svg b/src/images/svg/payment-methods/payment-diners.svg similarity index 100% rename from src/images/svg/payment-diners.svg rename to src/images/svg/payment-methods/payment-diners.svg diff --git a/src/images/svg/payment-dragon-pay.svg b/src/images/svg/payment-methods/payment-dragon-pay.svg similarity index 100% rename from src/images/svg/payment-dragon-pay.svg rename to src/images/svg/payment-methods/payment-dragon-pay.svg diff --git a/src/images/svg/payment-dragon-phoenix.svg b/src/images/svg/payment-methods/payment-dragon-phoenix.svg similarity index 100% rename from src/images/svg/payment-dragon-phoenix.svg rename to src/images/svg/payment-methods/payment-dragon-phoenix.svg diff --git a/src/images/svg/payment-ethereum.svg b/src/images/svg/payment-methods/payment-ethereum.svg similarity index 100% rename from src/images/svg/payment-ethereum.svg rename to src/images/svg/payment-methods/payment-ethereum.svg diff --git a/src/images/svg/payment-fasapay.svg b/src/images/svg/payment-methods/payment-fasapay.svg similarity index 100% rename from src/images/svg/payment-fasapay.svg rename to src/images/svg/payment-methods/payment-fasapay.svg diff --git a/src/images/svg/payment-help-pay.svg b/src/images/svg/payment-methods/payment-help-pay.svg similarity index 100% rename from src/images/svg/payment-help-pay.svg rename to src/images/svg/payment-methods/payment-help-pay.svg diff --git a/src/images/svg/payment-idk.svg b/src/images/svg/payment-methods/payment-idk.svg similarity index 100% rename from src/images/svg/payment-idk.svg rename to src/images/svg/payment-methods/payment-idk.svg diff --git a/src/images/svg/payment-jeton.svg b/src/images/svg/payment-methods/payment-jeton.svg similarity index 100% rename from src/images/svg/payment-jeton.svg rename to src/images/svg/payment-methods/payment-jeton.svg diff --git a/src/images/svg/payment-litecoin.svg b/src/images/svg/payment-methods/payment-litecoin.svg similarity index 100% rename from src/images/svg/payment-litecoin.svg rename to src/images/svg/payment-methods/payment-litecoin.svg diff --git a/src/images/svg/payment-maestro.svg b/src/images/svg/payment-methods/payment-maestro.svg similarity index 100% rename from src/images/svg/payment-maestro.svg rename to src/images/svg/payment-methods/payment-maestro.svg diff --git a/src/images/svg/payment-mastercard.svg b/src/images/svg/payment-methods/payment-mastercard.svg similarity index 100% rename from src/images/svg/payment-mastercard.svg rename to src/images/svg/payment-methods/payment-mastercard.svg diff --git a/src/images/svg/payment-multi-collateral-dai.svg b/src/images/svg/payment-methods/payment-multi-collateral-dai.svg similarity index 100% rename from src/images/svg/payment-multi-collateral-dai.svg rename to src/images/svg/payment-methods/payment-multi-collateral-dai.svg diff --git a/src/images/svg/payment-neteller.svg b/src/images/svg/payment-methods/payment-neteller.svg similarity index 100% rename from src/images/svg/payment-neteller.svg rename to src/images/svg/payment-methods/payment-neteller.svg diff --git a/src/images/svg/payment-ngan-luong.svg b/src/images/svg/payment-methods/payment-ngan-luong.svg similarity index 100% rename from src/images/svg/payment-ngan-luong.svg rename to src/images/svg/payment-methods/payment-ngan-luong.svg diff --git a/src/images/svg/payment-paxos-standard.svg b/src/images/svg/payment-methods/payment-paxos-standard.svg similarity index 100% rename from src/images/svg/payment-paxos-standard.svg rename to src/images/svg/payment-methods/payment-paxos-standard.svg diff --git a/src/images/svg/payment-paysafe.svg b/src/images/svg/payment-methods/payment-paysafe.svg similarity index 100% rename from src/images/svg/payment-paysafe.svg rename to src/images/svg/payment-methods/payment-paysafe.svg diff --git a/src/images/svg/payment-paytrust.svg b/src/images/svg/payment-methods/payment-paytrust.svg similarity index 100% rename from src/images/svg/payment-paytrust.svg rename to src/images/svg/payment-methods/payment-paytrust.svg diff --git a/src/images/svg/payment-perfect-money.svg b/src/images/svg/payment-methods/payment-perfect-money.svg similarity index 100% rename from src/images/svg/payment-perfect-money.svg rename to src/images/svg/payment-methods/payment-perfect-money.svg diff --git a/src/images/svg/payment-qiwi.svg b/src/images/svg/payment-methods/payment-qiwi.svg similarity index 100% rename from src/images/svg/payment-qiwi.svg rename to src/images/svg/payment-methods/payment-qiwi.svg diff --git a/src/images/svg/payment-skrill.svg b/src/images/svg/payment-methods/payment-skrill.svg similarity index 100% rename from src/images/svg/payment-skrill.svg rename to src/images/svg/payment-methods/payment-skrill.svg diff --git a/src/images/svg/payment-stasis-euro.svg b/src/images/svg/payment-methods/payment-stasis-euro.svg similarity index 100% rename from src/images/svg/payment-stasis-euro.svg rename to src/images/svg/payment-methods/payment-stasis-euro.svg diff --git a/src/images/svg/payment-sticpay.svg b/src/images/svg/payment-methods/payment-sticpay.svg similarity index 100% rename from src/images/svg/payment-sticpay.svg rename to src/images/svg/payment-methods/payment-sticpay.svg diff --git a/src/images/svg/payment-tether.svg b/src/images/svg/payment-methods/payment-tether.svg similarity index 100% rename from src/images/svg/payment-tether.svg rename to src/images/svg/payment-methods/payment-tether.svg diff --git a/src/images/svg/payment-true-usd.svg b/src/images/svg/payment-methods/payment-true-usd.svg similarity index 100% rename from src/images/svg/payment-true-usd.svg rename to src/images/svg/payment-methods/payment-true-usd.svg diff --git a/src/images/svg/payment-usd-coin.svg b/src/images/svg/payment-methods/payment-usd-coin.svg similarity index 100% rename from src/images/svg/payment-usd-coin.svg rename to src/images/svg/payment-methods/payment-usd-coin.svg diff --git a/src/images/svg/payment-usdk.svg b/src/images/svg/payment-methods/payment-usdk.svg similarity index 100% rename from src/images/svg/payment-usdk.svg rename to src/images/svg/payment-methods/payment-usdk.svg diff --git a/src/images/svg/payment-visa.svg b/src/images/svg/payment-methods/payment-visa.svg similarity index 100% rename from src/images/svg/payment-visa.svg rename to src/images/svg/payment-methods/payment-visa.svg diff --git a/src/images/svg/payment-webmoney.svg b/src/images/svg/payment-methods/payment-webmoney.svg similarity index 100% rename from src/images/svg/payment-webmoney.svg rename to src/images/svg/payment-methods/payment-webmoney.svg diff --git a/src/images/svg/payment-methods/payment-wyre.svg b/src/images/svg/payment-methods/payment-wyre.svg new file mode 100644 index 00000000000..d8fcd82ad19 --- /dev/null +++ b/src/images/svg/payment-methods/payment-wyre.svg @@ -0,0 +1,34 @@ + \ No newline at end of file diff --git a/src/images/svg/payment-methods/payment-xanpool.svg b/src/images/svg/payment-methods/payment-xanpool.svg new file mode 100644 index 00000000000..ae84567337d --- /dev/null +++ b/src/images/svg/payment-methods/payment-xanpool.svg @@ -0,0 +1,27 @@ + \ No newline at end of file diff --git a/src/images/svg/payment-zing-pay.svg b/src/images/svg/payment-methods/payment-zing-pay.svg similarity index 100% rename from src/images/svg/payment-zing-pay.svg rename to src/images/svg/payment-methods/payment-zing-pay.svg diff --git a/src/pages/payment-methods/_expanded-list.js b/src/pages/payment-methods/_expanded-list.js index 0fdbd3e5b42..1470a0eccae 100644 --- a/src/pages/payment-methods/_expanded-list.js +++ b/src/pages/payment-methods/_expanded-list.js @@ -77,7 +77,7 @@ const StyledText = styled(Text)` const Deposit = styled(Td)` & > p { - max-width: 12rem; + max-width: ${(props) => (props.is_fiat_onramp ? '21rem' : '12rem')}; } ` @@ -92,7 +92,11 @@ const Withdrawal = styled(Td)` } ` -const ExpandList = ({ data, config, is_crypto }) => { +const Currencies = styled(Td)` + width: 289px; +` + +const ExpandList = ({ data, config, is_crypto, is_fiat_onramp }) => { const [is_expanded, setIsExpanded] = React.useState(false) const toggleExpand = () => { @@ -105,9 +109,16 @@ const ExpandList = ({ data, config, is_crypto }) => { <> {data.method} - - {data.currencies} - + {is_fiat_onramp ? ( + + {data.currencies} + + ) : ( + + {data.currencies} + + )} + {Array.isArray(data.min_max_deposit) ? ( data.min_max_deposit.map((md, idx) => {md}) @@ -115,23 +126,31 @@ const ExpandList = ({ data, config, is_crypto }) => { {data.min_max_deposit} )} - - <> - {Array.isArray(data.min_max_withdrawal) ? ( - data.min_max_withdrawal.map((md, idx) => {md}) - ) : is_crypto ? ( - {getCryptoConfig(data.name)} - ) : ( - {data.min_max_withdrawal} - )} - - - + {!is_fiat_onramp && ( + + <> + {Array.isArray(data.min_max_withdrawal) ? ( + data.min_max_withdrawal.map((md, idx) => ( + {md} + )) + ) : is_crypto ? ( + {getCryptoConfig(data.name)} + ) : ( + {data.min_max_withdrawal} + )} + + + )} + {data.deposit_time} - - {data.withdrawal_time} - + + {!is_fiat_onramp && ( + + {data.withdrawal_time} + + )} + {data.reference ? ( , @@ -607,6 +625,53 @@ const payment_data = [ // }, ], }, + { + name: , + is_fiat_onramp: true, + data: [ + { + method: , + currencies: 'USD EUR GBP BTC', + min_max_deposit: 'USD50', + deposit_time: , + description: ( + + ), + name: 'Changelly', + reference: 'changelly-payment-method.pdf', + }, + // { + // method: , + // currencies: 'USD EUR GBP AUD MXN BTC ETH WETH DAI', + // min_max_deposit: , + // deposit_time: , + // description: ( + // + // ), + // name: 'Wyre', + // }, + // { + // method: , + // currencies: 'HKD SGD MYR PHP THB INR VND IDR BTC ETH LTC USDT', + // min_max_deposit: , + // deposit_time: , + // description: ( + // + // ), + // name: 'Xanpool', + // }, + { + method: , + currencies: 'USD EUR GBP AUD CAD BTC LTC USDT USDC', + min_max_deposit: 'USD20', + deposit_time: , + description: ( + + ), + name: 'Banxa', + }, + ], + }, ] export default payment_data diff --git a/src/pages/payment-methods/index.js b/src/pages/payment-methods/index.js index 66ad7791746..49ea31db78c 100644 --- a/src/pages/payment-methods/index.js +++ b/src/pages/payment-methods/index.js @@ -111,7 +111,7 @@ const DisplayAccordianItem = ({ pd, crypto_config }) => { {localize('Currencies')} - {pd.is_crypto ? ( + {pd.is_crypto || pd.is_fiat_onramp ? ( {localize('Min deposit')} ) : ( @@ -120,26 +120,38 @@ const DisplayAccordianItem = ({ pd, crypto_config }) => { )} - - {pd.is_crypto ? ( - <> - {localize('Min withdrawal')} - - ) : ( - - {localize('Min-max')} - {localize('withdrawal')} - - )} - - - {localize('Deposit')} - {localize('processing time')} - - - {localize('Withdrawal')} - {localize('processing time')} - + {!pd.is_fiat_onramp && ( + + {pd.is_crypto ? ( + <> + {localize('Min withdrawal')} + + ) : ( + + {localize('Min-max')} + {localize('withdrawal')} + + )} + + )} + {pd.is_fiat_onramp ? ( + + {localize('Deposit processing time')} + + ) : ( + + {localize('Deposit')} + {localize('processing time')} + + )} + + {!pd.is_fiat_onramp && ( + + {localize('Withdrawal')} + {localize('processing time')} + + )} + {localize('Reference')} @@ -148,15 +160,14 @@ const DisplayAccordianItem = ({ pd, crypto_config }) => { {pd.data.map((data, indx) => { - return pd.is_crypto ? ( + return ( - ) : ( - ) })} diff --git a/static/payment-methods/changelly-payment-method.pdf b/static/payment-methods/changelly-payment-method.pdf new file mode 100644 index 00000000000..fc1c5f3835d Binary files /dev/null and b/static/payment-methods/changelly-payment-method.pdf differ