frontend/buy: prompt connecting keystore when selecting an account

It would be prompted automatically later when the device is actually
needed, but the UX is better if it is done upfront before spending
possibly lots of time in the MoonPay or Pocket widget and then
realizing the device is not nearby.

Author: benma

frontends/web/src/components/accountselector/accountselector.tsx

@@ -32,11 +32,12 @@ export type TOption = {
 }
 
 type TAccountSelector = {
-    title: string;
-    options: TOption[];
-    selected?: string;
-    onChange: (value: string) => void;
-    onProceed: () => void;
+  title: string;
+  disabled?: boolean;
+  options: TOption[];
+  selected?: string;
+  onChange: (value: string) => void;
+  onProceed: () => void;
 }
 
 const SelectSingleValue: FunctionComponent<SingleValueProps<TOption>> = (props) => {
@@ -80,7 +81,7 @@ const DropdownIndicator: FunctionComponent<DropdownIndicatorProps<TOption>> = (p
 
 
 
-export const AccountSelector = ({ title, options, selected, onChange, onProceed }: TAccountSelector) => {
+export const AccountSelector = ({ title, disabled, options, selected, onChange, onProceed }: TAccountSelector) => {
   const { t } = useTranslation();
   const [selectedAccount, setSelectedAccount] = useState<TOption>();
 
@@ -118,11 +119,11 @@ export const AccountSelector = ({ title, options, selected, onChange, onProceed
         <Button
           primary
           onClick={onProceed}
-          disabled={!selected}>
+          disabled={!selected || disabled}>
           {t('buy.info.next')}
         </Button>
       </div>
     </>
 
   );
-};
+};

frontends/web/src/routes/buy/info.tsx

@@ -17,7 +17,7 @@
 import { useState, useEffect, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { route } from '../../utils/route';
-import { IAccount } from '../../api/account';
+import * as accountApi from '../../api/account';
 import { getExchangeSupportedAccounts } from './utils';
 import { getBalance } from '../../api/account';
 import Guide from './guide';
@@ -29,13 +29,14 @@ import { View, ViewContent } from '../../components/view/view';
 import { HideAmountsButton } from '../../components/hideamountsbutton/hideamountsbutton';
 
 type TProps = {
-    accounts: IAccount[];
+    accounts: accountApi.IAccount[];
     code: string;
 }
 
 export const BuyInfo = ({ code, accounts }: TProps) => {
   const [selected, setSelected] = useState<string>(code);
   const [options, setOptions] = useState<TOption[]>();
+  const [disabled, setDisabled] = useState<boolean>(false);
 
   const { t } = useTranslation();
 
@@ -52,9 +53,14 @@ export const BuyInfo = ({ code, accounts }: TProps) => {
 
   }, [accounts]);
 
-  const maybeProceed = useCallback(() => {
+  const maybeProceed = useCallback(async () => {
     if (options !== undefined && options.length === 1) {
-      route(`/buy/exchange/${options[0].value}`);
+      const accountCode = options[0].value;
+      const connectResult = await accountApi.connectKeystore(accountCode);
+      if (!connectResult.success) {
+        return;
+      }
+      route(`/buy/exchange/${accountCode}`);
     }
   }, [options]);
 
@@ -81,7 +87,17 @@ export const BuyInfo = ({ code, accounts }: TProps) => {
     });
   };
 
-  const handleProceed = () => {
+  const handleProceed = async () => {
+    setDisabled(true);
+    try {
+      const connectResult = await accountApi.connectKeystore(selected);
+      if (!connectResult.success) {
+        return;
+      }
+    } finally {
+      setDisabled(false);
+    }
+
     route(`/buy/exchange/${selected}`);
   };
   if (options === undefined) {
@@ -105,6 +121,7 @@ export const BuyInfo = ({ code, accounts }: TProps) => {
               ) : (
                 <AccountSelector
                   title={t('buy.title', { name })}
+                  disabled={disabled}
                   options={options}
                   selected={selected}
                   onChange={handleChangeAccount}