diff --git a/frontends/web/src/routes/buy/info.tsx b/frontends/web/src/routes/buy/info.tsx index 0d0e8e46a6..a877e2a51c 100644 --- a/frontends/web/src/routes/buy/info.tsx +++ b/frontends/web/src/routes/buy/info.tsx @@ -23,8 +23,9 @@ import { load } from '../../decorators/load'; import { translate, TranslateProps } from '../../decorators/translate'; import { Button, Checkbox, Select } from '../../components/forms'; import { Devices } from '../device/deviceswitch'; -import { AccountInterface } from '../account/account'; +import { AccountInterface, CoinCode } from '../account/account'; import { setConfig } from '../../utils/config'; +import { apiGet } from '../../utils/request'; import * as style from './info.css'; interface BuyInfoProps { @@ -37,9 +38,15 @@ interface LoadedBuyInfoProps { config: any; } +interface Option { + text: string; + value: CoinCode; +} + interface State { status: 'choose' | 'agree' selected?: string; + options: Option[] } type Props = BuyInfoProps & LoadedBuyInfoProps & TranslateProps; @@ -48,6 +55,11 @@ class BuyInfo extends Component { public readonly state: State = { status: this.props.config.frontend.skipBuyDisclaimer ? 'choose' : 'agree', selected: this.props.code, + options: [], + } + + public componentDidMount() { + this.checkSupportedCoins(); } private handleProceed = () => { @@ -59,17 +71,31 @@ class BuyInfo extends Component { } } + private checkSupportedCoins = () => { + Promise.all( + this.props.accounts.map((account) => ( + apiGet(`account/${account.code}/exchange/moonpay/buy-supported`) + .then(isSupported => (isSupported ? account : false)) + )) + ) + .then(results => results.filter(result => result)) + // @ts-ignore + .then(accounts => accounts.map(({ name, code }) => ({ text: name, value: code }))) + .then(options => () => this.setState({ options })) + .catch(console.error); + } + private handleSkipDisclaimer = (e) => { setConfig({ frontend: { skipBuyDisclaimer: e.target.checked }}); } public render( - { accounts, - code, + { code, t }: RenderableProps, { status, selected, + options, }: State ) { const name = (code === 'btc' || code === 'tbtc') ? 'Bitcoin' : 'crypto'; @@ -170,17 +196,14 @@ class BuyInfo extends Component { label={t('buy.info.selectLabel')} placeholder={t('buy.info.selectPlaceholder')} options={[{ - text: t('buy.info.selectPlaceholder'), + text: t(options.length ? 'buy.info.selectPlaceholder' : 'loading'), disabled: true, value: 'choose', }, - ...accounts.map(({ code, name}) => ({ - text: `${name} (${code})`, - value: code, - }))] + ...options] } onChange={e => this.setState({ selected: e.target.value})} - value={selected} + value={options.length ? selected : 'choose'} defaultValue={'choose'} id="coinAndAccountCode" />