frontend: only show buyable coins in moonpay dropdown

The dropdown checks now each coin if buying is supported and only shows those accounts.
BitBoxSwiss · Jan 14, 2021 · 9c2c669 · 9c2c669
1 parent 24387bd
commit 9c2c669
Showing 1 changed file with 32 additions and 9 deletions.
diff --git 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<Props, State> {
     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<Props, State> {
         }
     }
 
+    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<Props>,
         {
             status,
             selected,
+            options,
         }: State
     ) {
         const name = (code === 'btc' || code === 'tbtc') ? 'Bitcoin' : 'crypto';
@@ -170,17 +196,14 @@ class BuyInfo extends Component<Props, State> {
                                     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"
                                 />