Frontend send refactor

frontends/web/src/api/account.ts

@@ -65,7 +65,7 @@ export interface IAccount {
   active: boolean;
   watch: boolean;
   coinCode: CoinCode;
-  coinUnit: string;
+  coinUnit: CoinUnit;
   coinName: string;
   code: AccountCode;
   name: string;

frontends/web/src/routes/account/send/components/confirm/confirm.tsx

@@ -25,28 +25,23 @@ import { TConfirmSendProps } from '@/routes/account/send/components/confirm/type
 import { ConfirmingWaitDialog } from '@/routes/account/send/components/confirm/dialogs/confirm-wait-dialog';
 import style from './confirm.module.css';
 
+type TConfirmSend = { bb01Paired: boolean | undefined } & TConfirmSendProps;
+
 type TFiatValueProps = {
   baseCurrencyUnit: ConversionUnit;
   amount: string
 }
 
-export const ConfirmSend = (props: TConfirmSendProps) => {
-  switch (props.device) {
-  case 'bitbox':
-    return (
-      <ConfirmingWaitDialog
-        {...props}
-      />
-    );
-  case 'bitbox02':
-    return (
-      <BB02ConfirmSend
-        {...props}
-      />
-    );
-  default:
-    return null;
-  }
+export const ConfirmSend = (props: TConfirmSend) => {
+  return (props.bb01Paired !== undefined ? (
+    <ConfirmingWaitDialog
+      {...props}
+    />
+  ) : (
+    <BB02ConfirmSend
+      {...props}
+    />
+  ));
 };
 
 export const BB02ConfirmSend = ({
@@ -57,7 +52,7 @@ export const BB02ConfirmSend = ({
   selectedUTXOs,
   coinCode,
   transactionDetails
-}: Omit<TConfirmSendProps, 'device'>) => {
+}: TConfirmSendProps) => {
 
   const { t } = useTranslation();
   const {

frontends/web/src/routes/account/send/components/confirm/dialogs/confirm-wait-dialog.tsx

@@ -31,7 +31,7 @@ export const ConfirmingWaitDialog = ({
   selectedUTXOs,
   coinCode,
   transactionDetails
-}: Omit<TConfirmSendProps, 'device'>) => {
+}: TConfirmSendProps) => {
   const { t } = useTranslation();
   const [signProgress, setSignProgress] = useState<TSignProgress>();
 

frontends/web/src/routes/account/send/components/confirm/types.ts

@@ -15,7 +15,6 @@
  */
 
 import { ConversionUnit, CoinCode, FeeTargetCode, Fiat, IAmount } from '@/api/account';
-import { TProductName } from '@/api/devices';
 
 export type TransactionDetails = {
     proposedAmount?: IAmount;
@@ -28,7 +27,6 @@ export type TransactionDetails = {
   }
 
 export type TConfirmSendProps = {
-    device: TProductName;
     baseCurrencyUnit: ConversionUnit;
     note: string;
     hasSelectedUTXOs: boolean;

frontends/web/src/routes/account/send/send-wrapper.tsx

@@ -1,5 +1,5 @@
 /**
- * Copyright 2023 Shift Crypto AG
+ * Copyright 2024 Shift Crypto AG
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -14,11 +14,14 @@
  * limitations under the License.
  */
 
-import { useContext } from 'react';
+import { useContext, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { AccountCode, IAccount } from '@/api/account';
-import { TDevices } from '@/api/devices';
+import { hasMobileChannel, TDevices } from '@/api/devices';
+import { getDeviceInfo } from '@/api/bitbox01';
 import { RatesContext } from '@/contexts/RatesContext';
-import { findAccount } from '@/routes/account/utils';
+import { findAccount, isBitcoinBased } from '@/routes/account/utils';
+import { alertUser } from '@/components/alert/Alert';
 import { Send } from './send';
 
 type TSendProps = {
@@ -29,14 +32,39 @@ type TSendProps = {
 }
 
 export const SendWrapper = ({ accounts, code, deviceIDs, devices }: TSendProps) => {
+  const { t } = useTranslation();
   const { defaultCurrency } = useContext(RatesContext);
+
+  const [bb01Paired, setBB01Paired] = useState<boolean>();
+  const [noMobileChannelError, setNoMobileChannelError] = useState<boolean>();
+
   const account = findAccount(accounts, code);
+
+  useEffect(() => {
+    const product = deviceIDs.length > 0 ? devices[deviceIDs[0]] : undefined;
+    if (account && product === 'bitbox') {
+      const fetchData = async () => {
+        try {
+          const mobileChannel = await hasMobileChannel(deviceIDs[0])();
+          const { pairing } = await getDeviceInfo(deviceIDs[0]);
+          setBB01Paired(mobileChannel && pairing);
+          setNoMobileChannelError(pairing && !mobileChannel && isBitcoinBased(account.coinCode));
+        } catch (error) {
+          console.error(error);
+        }
+      };
+      fetchData();
+    }
+  }, [account, deviceIDs, devices]);
+
+  if (noMobileChannelError) {
+    alertUser(t('warning.sendPairing'));
+  }
   return (
     account ? (
       <Send
         account={account}
-        devices={devices}
-        deviceIDs={deviceIDs}
+        bb01Paired={bb01Paired}
         activeCurrency={defaultCurrency}
       />
     ) : (null)

frontends/web/src/routes/account/send/send.tsx

@@ -20,8 +20,6 @@ import * as accountApi from '@/api/account';
 import { syncdone } from '@/api/accountsync';
 import { convertFromCurrency, convertToCurrency, parseExternalBtcAmount } from '@/api/coins';
 import { View, ViewContent } from '@/components/view/view';
-import { TDevices, hasMobileChannel } from '@/api/devices';
-import { getDeviceInfo } from '@/api/bitbox01';
 import { alertUser } from '@/components/alert/Alert';
 import { Balance } from '@/components/balance/balance';
 import { HideAmountsButton } from '@/components/hideamountsbutton/hideamountsbutton';
@@ -47,8 +45,8 @@ import style from './send.module.css';
 
 interface SendProps {
     account: accountApi.IAccount;
-    devices: TDevices;
-    deviceIDs: string[];
+    // undefined if bb02 is connected.
+    bb01Paired: boolean | undefined;
     activeCurrency: accountApi.Fiat;
 }
 
@@ -74,7 +72,6 @@ export type State = {
     amountError?: TProposalError['amountError'];
     feeError?: TProposalError['feeError'];
     paired?: boolean;
-    noMobileChannelError?: boolean;
     note: string;
 }
 
@@ -94,7 +91,6 @@ class Send extends Component<Props, State> {
     sendAll: false,
     isConfirming: false,
     isUpdatingProposal: false,
-    noMobileChannelError: false,
     note: '',
     customFee: '',
   };
@@ -106,17 +102,6 @@ class Send extends Component<Props, State> {
 
     updateBalance(this.props.account.code);
 
-    if (this.props.deviceIDs.length > 0 && this.props.devices[this.props.deviceIDs[0]] === 'bitbox') {
-      hasMobileChannel(this.props.deviceIDs[0])().then((mobileChannel: boolean) => {
-        return getDeviceInfo(this.props.deviceIDs[0])
-          .then(({ pairing }) => {
-            const paired = mobileChannel && pairing;
-            const noMobileChannelError = pairing && !mobileChannel && isBitcoinBased(this.props.account.coinCode);
-            this.setState(prevState => ({ ...prevState, paired, noMobileChannelError }));
-          });
-      }).catch(console.error);
-    }
-
     this.unsubscribe = syncdone((code) => {
       if (this.props.account.code === code) {
         updateBalance(code);
@@ -131,10 +116,6 @@ class Send extends Component<Props, State> {
   }
 
   private send = async () => {
-    if (this.state.noMobileChannelError) {
-      alertUser(this.props.t('warning.sendPairing'));
-      return;
-    }
     const code = this.props.account.code;
     const connectResult = await accountApi.connectKeystore(code);
     if (!connectResult.success) {
@@ -383,7 +364,13 @@ class Send extends Component<Props, State> {
   };
 
   public render() {
-    const { account, activeCurrency, t } = this.props;
+    const {
+      account,
+      bb01Paired,
+      activeCurrency,
+      t,
+    } = this.props;
+
     const {
       balance,
       proposedFee,
@@ -417,8 +404,6 @@ class Send extends Component<Props, State> {
       activeCurrency,
     };
 
-    const device = this.props.deviceIDs.length > 0 && this.props.devices[this.props.deviceIDs[0]];
-
     return (
       <GuideWrapper>
         <GuidedContent>
@@ -519,20 +504,16 @@ class Send extends Component<Props, State> {
                   </Column>
                 </Grid>
               </ViewContent>
-
-              {device && (
-                <ConfirmSend
-                  device={device}
-                  baseCurrencyUnit={activeCurrency}
-                  note={note}
-                  hasSelectedUTXOs={this.hasSelectedUTXOs()}
-                  isConfirming={isConfirming}
-                  selectedUTXOs={Object.keys(this.selectedUTXOs)}
-                  coinCode={account.coinCode}
-                  transactionDetails={waitDialogTransactionDetails}
-                />
-              )}
-
+              <ConfirmSend
+                bb01Paired={bb01Paired}
+                baseCurrencyUnit={activeCurrency}
+                note={note}
+                hasSelectedUTXOs={this.hasSelectedUTXOs()}
+                isConfirming={isConfirming}
+                selectedUTXOs={Object.keys(this.selectedUTXOs)}
+                coinCode={account.coinCode}
+                transactionDetails={waitDialogTransactionDetails}
+              />
               <MessageWaitDialog result={sendResult}/>
             </View>
           </Main>

frontends/web/src/routes/account/utils.test.ts

@@ -15,7 +15,7 @@
  */
 
 import { describe, it, expect } from 'vitest';
-import { CoinCode, IAccount } from '@/api/account';
+import { CoinCode, CoinUnit, IAccount } from '@/api/account';
 import { getAccountsByKeystore } from './utils';
 
 
@@ -31,7 +31,7 @@ const createAccount = ({
     code: 'v0-123de678-tbtc-0',
     coinCode: 'tbtc' as CoinCode,
     coinName: 'Bitcoin Testnet',
-    coinUnit: 'TBTC',
+    coinUnit: 'TBTC' as CoinUnit,
     isToken: false,
     keystore: {
       connected: false,