fix(swap): Improve ledger flow (#2764)

Emurgo · Oct 12, 2023 · 733eb0b · 733eb0b
1 parent 3e50ac0
commit 733eb0b
Show file tree

Hide file tree

Showing 4 changed files with 490 additions and 447 deletions.
diff --git a/apps/wallet-mobile/src/features/Swap/common/ConfirmRawTx/ConfirmRawTxWithHW.tsx b/apps/wallet-mobile/src/features/Swap/common/ConfirmRawTx/ConfirmRawTxWithHW.tsx
@@ -1,11 +1,13 @@
 import React, {useState} from 'react'
-import {ActivityIndicator, ScrollView} from 'react-native'
+import {ActivityIndicator, ScrollView, StyleSheet, View} from 'react-native'
 
+import {Text} from '../../../../components'
 import {LedgerConnect} from '../../../../HW'
 import {useSelectedWallet} from '../../../../SelectedWallet'
 import {DeviceId, DeviceObj, withBLE, withUSB} from '../../../../yoroi-wallets/hw'
 import {walletManager} from '../../../../yoroi-wallets/walletManager'
 import {LedgerTransportSwitch} from '../../useCases/ConfirmTxScreen/LedgerTransportSwitch'
+import {useStrings} from '../strings'
 
 type TransportType = 'USB' | 'BLE'
 type Step = 'select-transport' | 'connect-transport' | 'loading'
@@ -18,6 +20,7 @@ export const ConfirmRawTxWithHW = ({onConfirm}: Props) => {
   const [transportType, setTransportType] = useState<TransportType>('USB')
   const [step, setStep] = useState<Step>('select-transport')
   const wallet = useSelectedWallet()
+  const strings = useStrings()
 
   const onSelectTransport = (transportType: TransportType) => {
     setTransportType(transportType)
@@ -53,5 +56,25 @@ export const ConfirmRawTxWithHW = ({onConfirm}: Props) => {
     )
   }
 
-  return <ActivityIndicator size="large" color="black" />
+  return (
+    <View style={styles.container}>
+      <ActivityIndicator size="large" color="black" />
+
+      <Text style={styles.text}>{strings.continueOnLedger}</Text>
+    </View>
+  )
 }
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 35,
+  },
+  text: {
+    fontSize: 18,
+    color: '#000',
+    textAlign: 'center',
+  },
+})
diff --git a/apps/wallet-mobile/src/features/Swap/common/strings.ts b/apps/wallet-mobile/src/features/Swap/common/strings.ts
@@ -117,6 +117,7 @@ export const useStrings = () => {
     noPool: intl.formatMessage(messages.noPool),
     generalErrorTitle: intl.formatMessage(errorMessages.generalError.title),
     generalErrorMessage: (e) => intl.formatMessage(errorMessages.generalError.message, {message: e}),
+    continueOnLedger: intl.formatMessage(ledgerMessages.continueOnLedger),
   }
 }
 
@@ -527,4 +528,8 @@ export const messages = defineMessages({
     id: 'swap.swapScreen.noPool',
     defaultMessage: '!!! This pair is not available in any liquidity pool',
   },
+  continueOnLedger: {
+    id: 'global.ledgerMessages.continueOnLedger',
+    defaultMessage: '!!!Continue on Ledger',
+  },
 })
diff --git a/apps/wallet-mobile/src/features/Swap/useCases/ConfirmTxScreen/ConfirmTxWithHW.tsx b/apps/wallet-mobile/src/features/Swap/useCases/ConfirmTxScreen/ConfirmTxWithHW.tsx
@@ -1,8 +1,7 @@
-import React from 'react'
-import {ScrollView} from 'react-native'
+import React, {useState} from 'react'
+import {ActivityIndicator, ScrollView, StyleSheet, View} from 'react-native'
 
-import {Boundary, TwoActionView} from '../../../../components'
-import {TransferSummary} from '../../../../Dashboard/WithdrawStakingRewards/TransferSummary'
+import {Text} from '../../../../components'
 import {LedgerConnect} from '../../../../HW'
 import {YoroiWallet} from '../../../../yoroi-wallets/cardano/types'
 import {useSignWithHwAndSubmitTx} from '../../../../yoroi-wallets/hooks'
@@ -20,70 +19,71 @@ type Props = {
 }
 
 type TransportType = 'USB' | 'BLE'
+type Step = 'select-transport' | 'connect-transport' | 'loading'
 
-export const ConfirmTxWithHW = (props: Props) => {
-  const {wallet} = props
+export const ConfirmTxWithHW = ({onSuccess, wallet, unsignedTx}: Props) => {
   const [transportType, setTransportType] = React.useState<TransportType>('USB')
-  const [step, setStep] = React.useState<'select-transport' | 'connect-transport' | 'confirm'>('select-transport')
+  const [step, setStep] = useState<Step>('select-transport')
+  const strings = useStrings()
+
+  const {signAndSubmitTx} = useSignWithHwAndSubmitTx(
+    {wallet}, //
+    {signTx: {onSuccess}},
+  )
 
   const onSelectTransport = (transportType: TransportType) => {
     setTransportType(transportType)
     setStep('connect-transport')
   }
 
   const onConnectBLE = async (deviceId: DeviceId) => {
+    setStep('loading')
     await walletManager.updateHWDeviceInfo(wallet, withBLE(wallet, deviceId))
-    setStep('confirm')
+    signAndSubmitTx({unsignedTx, useUSB: false})
   }
 
   const onConnectUSB = async (deviceObj: DeviceObj) => {
+    setStep('loading')
     await walletManager.updateHWDeviceInfo(wallet, withUSB(wallet, deviceObj))
-    setStep('confirm')
+    signAndSubmitTx({unsignedTx, useUSB: true})
   }
 
-  return (
-    <>
-      <Route active={step === 'select-transport'}>
-        <LedgerTransportSwitch
-          onSelectBLE={() => onSelectTransport('BLE')}
-          onSelectUSB={() => onSelectTransport('USB')}
-        />
-      </Route>
-
-      <Route active={step === 'connect-transport'}>
-        <ScrollView>
-          <LedgerConnect onConnectBLE={onConnectBLE} onConnectUSB={onConnectUSB} />
-        </ScrollView>
-      </Route>
-
-      <Route active={step === 'confirm'}>
-        <Boundary>
-          <Confirm {...props} transport={transportType} />
-        </Boundary>
-      </Route>
-    </>
-  )
-}
+  if (step === 'select-transport') {
+    return (
+      <LedgerTransportSwitch
+        onSelectBLE={() => onSelectTransport('BLE')}
+        onSelectUSB={() => onSelectTransport('USB')}
+      />
+    )
+  }
 
-const Confirm = ({wallet, onSuccess, unsignedTx, transport: transportType}: Props & {transport: TransportType}) => {
-  const strings = useStrings()
-  const {signAndSubmitTx, isLoading} = useSignWithHwAndSubmitTx(
-    {wallet}, //
-    {signTx: {onSuccess}},
-  )
+  if (step === 'connect-transport') {
+    return (
+      <ScrollView>
+        <LedgerConnect useUSB={transportType === 'USB'} onConnectBLE={onConnectBLE} onConnectUSB={onConnectUSB} />
+      </ScrollView>
+    )
+  }
 
   return (
-    <TwoActionView
-      title={strings.confirm}
-      primaryButton={{
-        disabled: isLoading,
-        label: strings.confirm,
-        onPress: () => signAndSubmitTx({unsignedTx, useUSB: transportType === 'USB'}),
-      }}
-    >
-      <TransferSummary wallet={wallet} unsignedTx={unsignedTx} />
-    </TwoActionView>
+    <View style={styles.container}>
+      <ActivityIndicator size="large" color="black" />
+
+      <Text style={styles.text}>{strings.continueOnLedger}</Text>
+    </View>
   )
 }
 
-const Route = ({active, children}: {active: boolean; children: React.ReactNode}) => <>{active ? children : null}</>
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 35,
+  },
+  text: {
+    fontSize: 18,
+    color: '#000',
+    textAlign: 'center',
+  },
+})