From 20e3867129c0382370abae622d32a124ef373758 Mon Sep 17 00:00:00 2001
From: Michal <miso.szorad@gmail.com>
Date: Fri, 29 Sep 2023 12:07:59 +0100
Subject: [PATCH 1/5] Add components

---
 .../Swap/common/RawTxConfirm/RawTxConfirm.tsx | 47 +++++++++++++++++++
 .../StartSwapScreen/ListOrders/OpenOrders.tsx | 38 +++------------
 2 files changed, 54 insertions(+), 31 deletions(-)
 create mode 100644 apps/wallet-mobile/src/features/Swap/common/RawTxConfirm/RawTxConfirm.tsx

diff --git a/apps/wallet-mobile/src/features/Swap/common/RawTxConfirm/RawTxConfirm.tsx b/apps/wallet-mobile/src/features/Swap/common/RawTxConfirm/RawTxConfirm.tsx
new file mode 100644
index 0000000000..6ab1942656
--- /dev/null
+++ b/apps/wallet-mobile/src/features/Swap/common/RawTxConfirm/RawTxConfirm.tsx
@@ -0,0 +1,47 @@
+import React, {useEffect, useState} from 'react'
+import {ConfirmWithSpendingPassword} from '../ConfirmWithSpendingPassword'
+import {Spacer} from '../../../../components'
+import {useSelectedWallet} from '../../../../SelectedWallet'
+import {useAuthOsWithEasyConfirmation} from '../../../../yoroi-wallets/auth'
+
+export const ConfirmPasswordWalletRawTx = ({onConfirm}: {onConfirm: (rootKey: string) => Promise<void>}) => {
+  const wallet = useSelectedWallet()
+  const {authWithOs} = useAuthOsWithEasyConfirmation({id: wallet.id}, {onSuccess: (rootKey) => onConfirm(rootKey)})
+
+  const handlePasswordConfirm = async (password: string) => {
+    const rootKey = await wallet.encryptedStorage.rootKey.read(password)
+    return onConfirm(rootKey)
+  }
+
+  useEffect(() => {
+    authWithOs()
+  }, [wallet.isEasyConfirmationEnabled])
+
+  return <PasswordModalContent onConfirm={handlePasswordConfirm} />
+}
+
+const PasswordModalContent = ({onConfirm}: {onConfirm: (password: string) => Promise<void>}) => {
+  const [error, setError] = useState<Error | null>(null)
+  const [loading, setLoading] = useState(false)
+
+  const onConfirmPress = async (password: string) => {
+    setError(null)
+    setLoading(true)
+    try {
+      await onConfirm(password)
+    } catch (e: unknown) {
+      if (e instanceof Error) {
+        setError(e)
+      }
+    }
+    setLoading(false)
+  }
+
+  return (
+    <>
+      <ConfirmWithSpendingPassword onSubmit={onConfirmPress} isLoading={loading} error={error ?? undefined} />
+
+      <Spacer height={10} />
+    </>
+  )
+}
diff --git a/apps/wallet-mobile/src/features/Swap/useCases/StartSwapScreen/ListOrders/OpenOrders.tsx b/apps/wallet-mobile/src/features/Swap/useCases/StartSwapScreen/ListOrders/OpenOrders.tsx
index c47a900dbe..0efd0a38af 100644
--- a/apps/wallet-mobile/src/features/Swap/useCases/StartSwapScreen/ListOrders/OpenOrders.tsx
+++ b/apps/wallet-mobile/src/features/Swap/useCases/StartSwapScreen/ListOrders/OpenOrders.tsx
@@ -36,6 +36,7 @@ import {PoolIcon} from '../../../common/PoolIcon/PoolIcon'
 import {useStrings} from '../../../common/strings'
 import {convertBech32ToHex, getMuesliSwapTransactionAndSigners, useCancellationOrderFee} from './helpers'
 import {mapOrders, MappedOrder} from './mapOrders'
+import {ConfirmPasswordWalletRawTx} from '../../../common/RawTxConfirm/RawTxConfirm'
 
 export const OpenOrders = () => {
   const [bottomSheetState, setBottomSheetState] = React.useState<BottomSheetState & {height: number}>({
@@ -107,10 +108,10 @@ export const OpenOrders = () => {
     })
   }
 
-  const handlePasswordConfirm = async (password: string, orderId: string) => {
+  const handlePasswordWalletConfirm = async (rootKey: string, orderId: string) => {
     const order = normalizedOrders.find((o) => o.id === orderId)
     if (!order || order.owner === undefined || order.utxo === undefined) return
-    const tx = await createCancellationTxAndSign(order.id, password)
+    const tx = await createCancellationTxAndSign(order.id, rootKey)
     if (!tx) return
     await wallet.submitTransaction(tx.txBase64)
     trackCancellationSubmitted(order)
@@ -122,7 +123,9 @@ export const OpenOrders = () => {
     setBottomSheetState({
       openId: id,
       title: strings.signTransaction,
-      content: wallet.isHW ? null : <PasswordModal onConfirm={(password) => handlePasswordConfirm(password, id)} />,
+      content: wallet.isHW ? null : (
+        <ConfirmPasswordWalletRawTx onConfirm={(rootKey) => handlePasswordWalletConfirm(rootKey, id)} />
+      ),
       height: 350,
     })
   }
@@ -146,7 +149,7 @@ export const OpenOrders = () => {
 
   const createCancellationTxAndSign = async (
     orderId: string,
-    password: string,
+    rootKey: string,
   ): Promise<{txBase64: string} | undefined> => {
     const order = normalizedOrders.find((o) => o.id === orderId)
     if (!order || order.owner === undefined || order.utxo === undefined) return
@@ -157,7 +160,6 @@ export const OpenOrders = () => {
       utxos: {collateral: collateralUtxo, order: utxo},
       address: addressHex,
     })
-    const rootKey = await wallet.encryptedStorage.rootKey.read(password)
     const {cbor, signers} = await getMuesliSwapTransactionAndSigners(originalCbor, wallet)
 
     const keys = await Promise.all(signers.map(async (signer) => createRawTxSigningKey(rootKey, signer)))
@@ -369,32 +371,6 @@ const HiddenInfo = ({
   )
 }
 
-const PasswordModal = ({onConfirm}: {onConfirm: (password: string) => Promise<void>}) => {
-  const [error, setError] = useState<Error | null>(null)
-  const [loading, setLoading] = useState(false)
-
-  const onConfirmPress = async (password) => {
-    setError(null)
-    setLoading(true)
-    try {
-      await onConfirm(password)
-    } catch (e: unknown) {
-      if (e instanceof Error) {
-        setError(e)
-      }
-    }
-    setLoading(false)
-  }
-
-  return (
-    <>
-      <ConfirmWithSpendingPassword onSubmit={onConfirmPress} isLoading={loading} error={error ?? undefined} />
-
-      <Spacer height={10} />
-    </>
-  )
-}
-
 const MainInfo = ({tokenPrice, tokenAmount}: {tokenPrice: string; tokenAmount: string}) => {
   const strings = useStrings()
   return (

From ae2a45a703d5efeeeb2779c00e8a032adb8eb76a Mon Sep 17 00:00:00 2001
From: Michal <miso.szorad@gmail.com>
Date: Fri, 29 Sep 2023 12:55:00 +0100
Subject: [PATCH 2/5] Add easy confirmation support

---
 .../Swap/common/RawTxConfirm/RawTxConfirm.tsx | 30 +++++++++++++++++--
 .../StartSwapScreen/ListOrders/OpenOrders.tsx |  5 ++--
 .../messages/src/yoroi-wallets/auth/auth.json | 24 +++++++--------
 3 files changed, 41 insertions(+), 18 deletions(-)

diff --git a/apps/wallet-mobile/src/features/Swap/common/RawTxConfirm/RawTxConfirm.tsx b/apps/wallet-mobile/src/features/Swap/common/RawTxConfirm/RawTxConfirm.tsx
index 6ab1942656..1da7fc1dfc 100644
--- a/apps/wallet-mobile/src/features/Swap/common/RawTxConfirm/RawTxConfirm.tsx
+++ b/apps/wallet-mobile/src/features/Swap/common/RawTxConfirm/RawTxConfirm.tsx
@@ -1,12 +1,17 @@
 import React, {useEffect, useState} from 'react'
-import {ConfirmWithSpendingPassword} from '../ConfirmWithSpendingPassword'
+import {ActivityIndicator, StyleSheet, View} from 'react-native'
+
 import {Spacer} from '../../../../components'
 import {useSelectedWallet} from '../../../../SelectedWallet'
 import {useAuthOsWithEasyConfirmation} from '../../../../yoroi-wallets/auth'
+import {ConfirmWithSpendingPassword} from '../ConfirmWithSpendingPassword'
 
 export const ConfirmPasswordWalletRawTx = ({onConfirm}: {onConfirm: (rootKey: string) => Promise<void>}) => {
   const wallet = useSelectedWallet()
-  const {authWithOs} = useAuthOsWithEasyConfirmation({id: wallet.id}, {onSuccess: (rootKey) => onConfirm(rootKey)})
+  const {authWithOs, isLoading} = useAuthOsWithEasyConfirmation(
+    {id: wallet.id},
+    {onSuccess: (rootKey) => onConfirm(rootKey)},
+  )
 
   const handlePasswordConfirm = async (password: string) => {
     const rootKey = await wallet.encryptedStorage.rootKey.read(password)
@@ -14,8 +19,17 @@ export const ConfirmPasswordWalletRawTx = ({onConfirm}: {onConfirm: (rootKey: st
   }
 
   useEffect(() => {
+    if (!wallet.isEasyConfirmationEnabled) return
     authWithOs()
-  }, [wallet.isEasyConfirmationEnabled])
+  }, [wallet.isEasyConfirmationEnabled, authWithOs])
+
+  if (isLoading) {
+    return (
+      <View style={styles.loading}>
+        <ActivityIndicator size="large" color="black" />
+      </View>
+    )
+  }
 
   return <PasswordModalContent onConfirm={handlePasswordConfirm} />
 }
@@ -45,3 +59,13 @@ const PasswordModalContent = ({onConfirm}: {onConfirm: (password: string) => Pro
     </>
   )
 }
+
+const styles = StyleSheet.create({
+  loading: {
+    position: 'absolute',
+    height: '100%',
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+})
diff --git a/apps/wallet-mobile/src/features/Swap/useCases/StartSwapScreen/ListOrders/OpenOrders.tsx b/apps/wallet-mobile/src/features/Swap/useCases/StartSwapScreen/ListOrders/OpenOrders.tsx
index 0efd0a38af..6713720076 100644
--- a/apps/wallet-mobile/src/features/Swap/useCases/StartSwapScreen/ListOrders/OpenOrders.tsx
+++ b/apps/wallet-mobile/src/features/Swap/useCases/StartSwapScreen/ListOrders/OpenOrders.tsx
@@ -2,7 +2,7 @@ import {useFocusEffect} from '@react-navigation/native'
 import {useSwap, useSwapOrdersByStatusOpen} from '@yoroi/swap'
 import {Buffer} from 'buffer'
 import _ from 'lodash'
-import React, {Suspense, useState} from 'react'
+import React, {Suspense} from 'react'
 import {useIntl} from 'react-intl'
 import {ActivityIndicator, Alert, Linking, ScrollView, StyleSheet, TouchableOpacity, View} from 'react-native'
 
@@ -29,14 +29,13 @@ import {useSelectedWallet} from '../../../../../SelectedWallet'
 import {COLORS} from '../../../../../theme'
 import {createRawTxSigningKey, generateCIP30UtxoCbor} from '../../../../../yoroi-wallets/cardano/utils'
 import {useTokenInfos, useTransactionInfos} from '../../../../../yoroi-wallets/hooks'
-import {ConfirmWithSpendingPassword} from '../../../common/ConfirmWithSpendingPassword'
 import {Counter} from '../../../common/Counter/Counter'
 import {useNavigateTo} from '../../../common/navigation'
 import {PoolIcon} from '../../../common/PoolIcon/PoolIcon'
+import {ConfirmPasswordWalletRawTx} from '../../../common/RawTxConfirm/RawTxConfirm'
 import {useStrings} from '../../../common/strings'
 import {convertBech32ToHex, getMuesliSwapTransactionAndSigners, useCancellationOrderFee} from './helpers'
 import {mapOrders, MappedOrder} from './mapOrders'
-import {ConfirmPasswordWalletRawTx} from '../../../common/RawTxConfirm/RawTxConfirm'
 
 export const OpenOrders = () => {
   const [bottomSheetState, setBottomSheetState] = React.useState<BottomSheetState & {height: number}>({
diff --git a/apps/wallet-mobile/translations/messages/src/yoroi-wallets/auth/auth.json b/apps/wallet-mobile/translations/messages/src/yoroi-wallets/auth/auth.json
index e048120d6d..de9c073a1f 100644
--- a/apps/wallet-mobile/translations/messages/src/yoroi-wallets/auth/auth.json
+++ b/apps/wallet-mobile/translations/messages/src/yoroi-wallets/auth/auth.json
@@ -4,14 +4,14 @@
     "defaultMessage": "!!!Authorize",
     "file": "src/yoroi-wallets/auth/auth.ts",
     "start": {
-      "line": 254,
+      "line": 255,
       "column": 13,
-      "index": 8406
+      "index": 8429
     },
     "end": {
-      "line": 257,
+      "line": 258,
       "column": 3,
-      "index": 8513
+      "index": 8536
     }
   },
   {
@@ -19,14 +19,14 @@
     "defaultMessage": "!!!Too many attempts",
     "file": "src/yoroi-wallets/auth/auth.ts",
     "start": {
-      "line": 258,
+      "line": 259,
       "column": 19,
-      "index": 8534
+      "index": 8557
     },
     "end": {
-      "line": 261,
+      "line": 262,
       "column": 3,
-      "index": 8645
+      "index": 8668
     }
   },
   {
@@ -34,14 +34,14 @@
     "defaultMessage": "!!!Unknown error!",
     "file": "src/yoroi-wallets/auth/auth.ts",
     "start": {
-      "line": 262,
+      "line": 263,
       "column": 16,
-      "index": 8663
+      "index": 8686
     },
     "end": {
-      "line": 265,
+      "line": 266,
       "column": 3,
-      "index": 8770
+      "index": 8793
     }
   }
 ]
\ No newline at end of file

From 6d43d354370da4513033b6f7652fc6ab6e5bd130 Mon Sep 17 00:00:00 2001
From: Michal <miso.szorad@gmail.com>
Date: Fri, 29 Sep 2023 12:56:29 +0100
Subject: [PATCH 3/5] Refactor ConfirmPasswordWalletRawTx

---
 .../ConfirmPasswordWalletRawTx.tsx}                             | 0
 .../Swap/useCases/StartSwapScreen/ListOrders/OpenOrders.tsx     | 2 +-
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename apps/wallet-mobile/src/features/Swap/common/{RawTxConfirm/RawTxConfirm.tsx => ConfirmPasswordWalletRawTx/ConfirmPasswordWalletRawTx.tsx} (100%)

diff --git a/apps/wallet-mobile/src/features/Swap/common/RawTxConfirm/RawTxConfirm.tsx b/apps/wallet-mobile/src/features/Swap/common/ConfirmPasswordWalletRawTx/ConfirmPasswordWalletRawTx.tsx
similarity index 100%
rename from apps/wallet-mobile/src/features/Swap/common/RawTxConfirm/RawTxConfirm.tsx
rename to apps/wallet-mobile/src/features/Swap/common/ConfirmPasswordWalletRawTx/ConfirmPasswordWalletRawTx.tsx
diff --git a/apps/wallet-mobile/src/features/Swap/useCases/StartSwapScreen/ListOrders/OpenOrders.tsx b/apps/wallet-mobile/src/features/Swap/useCases/StartSwapScreen/ListOrders/OpenOrders.tsx
index 6713720076..7957c36bde 100644
--- a/apps/wallet-mobile/src/features/Swap/useCases/StartSwapScreen/ListOrders/OpenOrders.tsx
+++ b/apps/wallet-mobile/src/features/Swap/useCases/StartSwapScreen/ListOrders/OpenOrders.tsx
@@ -29,10 +29,10 @@ import {useSelectedWallet} from '../../../../../SelectedWallet'
 import {COLORS} from '../../../../../theme'
 import {createRawTxSigningKey, generateCIP30UtxoCbor} from '../../../../../yoroi-wallets/cardano/utils'
 import {useTokenInfos, useTransactionInfos} from '../../../../../yoroi-wallets/hooks'
+import {ConfirmPasswordWalletRawTx} from '../../../common/ConfirmPasswordWalletRawTx/ConfirmPasswordWalletRawTx'
 import {Counter} from '../../../common/Counter/Counter'
 import {useNavigateTo} from '../../../common/navigation'
 import {PoolIcon} from '../../../common/PoolIcon/PoolIcon'
-import {ConfirmPasswordWalletRawTx} from '../../../common/RawTxConfirm/RawTxConfirm'
 import {useStrings} from '../../../common/strings'
 import {convertBech32ToHex, getMuesliSwapTransactionAndSigners, useCancellationOrderFee} from './helpers'
 import {mapOrders, MappedOrder} from './mapOrders'

From d5c92494c533387811cd9f24b7b27f75f4d0e673 Mon Sep 17 00:00:00 2001
From: Michal <miso.szorad@gmail.com>
Date: Fri, 29 Sep 2023 14:02:48 +0100
Subject: [PATCH 4/5] Refactor easy confirmation

---
 .../.storybook/storybook.requires.js          |  1 +
 .../ConfirmPasswordWalletRawTx.tsx            | 71 -------------------
 .../ConfirmRawTx/ConfirmRawTx.stories.tsx     | 55 ++++++++++++++
 .../Swap/common/ConfirmRawTx/ConfirmRawTx.tsx | 20 ++++++
 .../ConfirmRawTx/ConfirmRawTxWithHW.tsx       |  4 ++
 .../ConfirmRawTx/ConfirmRawTxWithOs.tsx       | 47 ++++++++++++
 .../ConfirmRawTx/ConfirmRawTxWithPassword.tsx | 42 +++++++++++
 .../ConfirmWithSpendingPassword.tsx           |  4 +-
 .../StartSwapScreen/ListOrders/OpenOrders.tsx |  6 +-
 9 files changed, 174 insertions(+), 76 deletions(-)
 delete mode 100644 apps/wallet-mobile/src/features/Swap/common/ConfirmPasswordWalletRawTx/ConfirmPasswordWalletRawTx.tsx
 create mode 100644 apps/wallet-mobile/src/features/Swap/common/ConfirmRawTx/ConfirmRawTx.stories.tsx
 create mode 100644 apps/wallet-mobile/src/features/Swap/common/ConfirmRawTx/ConfirmRawTx.tsx
 create mode 100644 apps/wallet-mobile/src/features/Swap/common/ConfirmRawTx/ConfirmRawTxWithHW.tsx
 create mode 100644 apps/wallet-mobile/src/features/Swap/common/ConfirmRawTx/ConfirmRawTxWithOs.tsx
 create mode 100644 apps/wallet-mobile/src/features/Swap/common/ConfirmRawTx/ConfirmRawTxWithPassword.tsx

diff --git a/apps/wallet-mobile/.storybook/storybook.requires.js b/apps/wallet-mobile/.storybook/storybook.requires.js
index c820f86bef..242a8c4a84 100644
--- a/apps/wallet-mobile/.storybook/storybook.requires.js
+++ b/apps/wallet-mobile/.storybook/storybook.requires.js
@@ -136,6 +136,7 @@ const getStories = () => {
     "./src/features/Settings/WalletSettings/WalletSettingsScreen.stories.tsx": require("../src/features/Settings/WalletSettings/WalletSettingsScreen.stories.tsx"),
     "./src/features/Swap/common/AmountCard/AmountCard.stories.tsx": require("../src/features/Swap/common/AmountCard/AmountCard.stories.tsx"),
     "./src/features/Swap/common/ButtonGroup/ButtonGroup.stories.tsx": require("../src/features/Swap/common/ButtonGroup/ButtonGroup.stories.tsx"),
+    "./src/features/Swap/common/ConfirmRawTx/ConfirmRawTx.stories.tsx": require("../src/features/Swap/common/ConfirmRawTx/ConfirmRawTx.stories.tsx"),
     "./src/features/Swap/common/ConfirmWithSpendingPassword/ConfirmWithSpendingPassword.stories.tsx": require("../src/features/Swap/common/ConfirmWithSpendingPassword/ConfirmWithSpendingPassword.stories.tsx"),
     "./src/features/Swap/common/SelectPool/SelectPoolFromList/SelectPoolFromList.stories.tsx": require("../src/features/Swap/common/SelectPool/SelectPoolFromList/SelectPoolFromList.stories.tsx"),
     "./src/features/Swap/useCases/ConfirmTxScreen/ConfirmTxScreen.stories.tsx": require("../src/features/Swap/useCases/ConfirmTxScreen/ConfirmTxScreen.stories.tsx"),
diff --git a/apps/wallet-mobile/src/features/Swap/common/ConfirmPasswordWalletRawTx/ConfirmPasswordWalletRawTx.tsx b/apps/wallet-mobile/src/features/Swap/common/ConfirmPasswordWalletRawTx/ConfirmPasswordWalletRawTx.tsx
deleted file mode 100644
index 1da7fc1dfc..0000000000
--- a/apps/wallet-mobile/src/features/Swap/common/ConfirmPasswordWalletRawTx/ConfirmPasswordWalletRawTx.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import React, {useEffect, useState} from 'react'
-import {ActivityIndicator, StyleSheet, View} from 'react-native'
-
-import {Spacer} from '../../../../components'
-import {useSelectedWallet} from '../../../../SelectedWallet'
-import {useAuthOsWithEasyConfirmation} from '../../../../yoroi-wallets/auth'
-import {ConfirmWithSpendingPassword} from '../ConfirmWithSpendingPassword'
-
-export const ConfirmPasswordWalletRawTx = ({onConfirm}: {onConfirm: (rootKey: string) => Promise<void>}) => {
-  const wallet = useSelectedWallet()
-  const {authWithOs, isLoading} = useAuthOsWithEasyConfirmation(
-    {id: wallet.id},
-    {onSuccess: (rootKey) => onConfirm(rootKey)},
-  )
-
-  const handlePasswordConfirm = async (password: string) => {
-    const rootKey = await wallet.encryptedStorage.rootKey.read(password)
-    return onConfirm(rootKey)
-  }
-
-  useEffect(() => {
-    if (!wallet.isEasyConfirmationEnabled) return
-    authWithOs()
-  }, [wallet.isEasyConfirmationEnabled, authWithOs])
-
-  if (isLoading) {
-    return (
-      <View style={styles.loading}>
-        <ActivityIndicator size="large" color="black" />
-      </View>
-    )
-  }
-
-  return <PasswordModalContent onConfirm={handlePasswordConfirm} />
-}
-
-const PasswordModalContent = ({onConfirm}: {onConfirm: (password: string) => Promise<void>}) => {
-  const [error, setError] = useState<Error | null>(null)
-  const [loading, setLoading] = useState(false)
-
-  const onConfirmPress = async (password: string) => {
-    setError(null)
-    setLoading(true)
-    try {
-      await onConfirm(password)
-    } catch (e: unknown) {
-      if (e instanceof Error) {
-        setError(e)
-      }
-    }
-    setLoading(false)
-  }
-
-  return (
-    <>
-      <ConfirmWithSpendingPassword onSubmit={onConfirmPress} isLoading={loading} error={error ?? undefined} />
-
-      <Spacer height={10} />
-    </>
-  )
-}
-
-const styles = StyleSheet.create({
-  loading: {
-    position: 'absolute',
-    height: '100%',
-    width: '100%',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-})
diff --git a/apps/wallet-mobile/src/features/Swap/common/ConfirmRawTx/ConfirmRawTx.stories.tsx b/apps/wallet-mobile/src/features/Swap/common/ConfirmRawTx/ConfirmRawTx.stories.tsx
new file mode 100644
index 0000000000..b65ea4543e
--- /dev/null
+++ b/apps/wallet-mobile/src/features/Swap/common/ConfirmRawTx/ConfirmRawTx.stories.tsx
@@ -0,0 +1,55 @@
+import {storiesOf} from '@storybook/react-native'
+import {mockSwapManager, mockSwapStateDefault, SwapProvider} from '@yoroi/swap'
+import React from 'react'
+import {StyleSheet, View} from 'react-native'
+
+import {SelectedWalletProvider} from '../../../../SelectedWallet'
+import {YoroiWallet} from '../../../../yoroi-wallets/cardano/types'
+import {mocks as walletMocks} from '../../../../yoroi-wallets/mocks'
+import {mocks} from '../mocks'
+import {SwapFormProvider} from '../SwapFormProvider'
+import {ConfirmRawTx} from './ConfirmRawTx'
+
+storiesOf('ConfirmRawTx', module)
+  .addDecorator((story) => <View style={styles.container}>{story()}</View>)
+  .add('ConfirmRawTxWithPassword', () => (
+    <Provider wallet={walletMocks.wallet}>
+      <ConfirmRawTx />
+    </Provider>
+  ))
+  .add('ConfirmRawTxWithOs', () => (
+    <Provider wallet={{...walletMocks.wallet, isEasyConfirmationEnabled: true}}>
+      <ConfirmRawTx />
+    </Provider>
+  ))
+  .add('ConfirmRawTxWithHw', () => (
+    <Provider wallet={{...walletMocks.wallet, isHW: true}}>
+      <ConfirmRawTx />
+    </Provider>
+  ))
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 16,
+  },
+})
+
+const Provider = ({children, wallet}: {children: React.ReactNode; wallet: YoroiWallet}) => {
+  return (
+    <SelectedWalletProvider wallet={wallet}>
+      <SwapProvider
+        initialState={{
+          ...mockSwapStateDefault,
+          unsignedTx: walletMocks.yoroiUnsignedTx,
+          createOrder: {...mocks.confirmTx.createOrder},
+        }}
+        swapManager={{
+          ...mockSwapManager,
+        }}
+      >
+        <SwapFormProvider>{children}</SwapFormProvider>
+      </SwapProvider>
+    </SelectedWalletProvider>
+  )
+}
diff --git a/apps/wallet-mobile/src/features/Swap/common/ConfirmRawTx/ConfirmRawTx.tsx b/apps/wallet-mobile/src/features/Swap/common/ConfirmRawTx/ConfirmRawTx.tsx
new file mode 100644
index 0000000000..3685037542
--- /dev/null
+++ b/apps/wallet-mobile/src/features/Swap/common/ConfirmRawTx/ConfirmRawTx.tsx
@@ -0,0 +1,20 @@
+import React from 'react'
+
+import {useSelectedWallet} from '../../../../SelectedWallet'
+import {ConfirmRawTxWithHW} from './ConfirmRawTxWithHW'
+import {ConfirmRawTxWithOs} from './ConfirmRawTxWithOs'
+import {ConfirmRawTxWithPassword} from './ConfirmRawTxWithPassword'
+
+export const ConfirmRawTx = ({onConfirm}: {onConfirm?: (rootKey: string) => Promise<void>}) => {
+  const wallet = useSelectedWallet()
+
+  if (wallet.isHW) {
+    return <ConfirmRawTxWithHW />
+  }
+
+  if (wallet.isEasyConfirmationEnabled) {
+    return <ConfirmRawTxWithOs onConfirm={onConfirm} />
+  }
+
+  return <ConfirmRawTxWithPassword onConfirm={onConfirm} />
+}
diff --git a/apps/wallet-mobile/src/features/Swap/common/ConfirmRawTx/ConfirmRawTxWithHW.tsx b/apps/wallet-mobile/src/features/Swap/common/ConfirmRawTx/ConfirmRawTxWithHW.tsx
new file mode 100644
index 0000000000..56697d7792
--- /dev/null
+++ b/apps/wallet-mobile/src/features/Swap/common/ConfirmRawTx/ConfirmRawTxWithHW.tsx
@@ -0,0 +1,4 @@
+export const ConfirmRawTxWithHW = () => {
+  // TODO: Needs to be implemented
+  return null
+}
diff --git a/apps/wallet-mobile/src/features/Swap/common/ConfirmRawTx/ConfirmRawTxWithOs.tsx b/apps/wallet-mobile/src/features/Swap/common/ConfirmRawTx/ConfirmRawTxWithOs.tsx
new file mode 100644
index 0000000000..290c69993a
--- /dev/null
+++ b/apps/wallet-mobile/src/features/Swap/common/ConfirmRawTx/ConfirmRawTxWithOs.tsx
@@ -0,0 +1,47 @@
+import React, {useEffect} from 'react'
+import {ActivityIndicator, StyleSheet, Text, View} from 'react-native'
+
+import {useSelectedWallet} from '../../../../SelectedWallet'
+import {COLORS} from '../../../../theme'
+import {useAuthOsWithEasyConfirmation} from '../../../../yoroi-wallets/auth'
+
+export const ConfirmRawTxWithOs = ({onConfirm}: {onConfirm?: (rootKey: string) => Promise<void>}) => {
+  const wallet = useSelectedWallet()
+
+  const {authWithOs, error} = useAuthOsWithEasyConfirmation(
+    {id: wallet.id},
+    {onSuccess: (rootKey) => onConfirm?.(rootKey)},
+  )
+
+  useEffect(() => {
+    if (!wallet.isEasyConfirmationEnabled) return
+    authWithOs()
+  }, [wallet.isEasyConfirmationEnabled, authWithOs])
+
+  if (error) {
+    return (
+      <View style={styles.center}>
+        <Text style={styles.errorMessage} numberOfLines={3}>
+          {error.message}
+        </Text>
+      </View>
+    )
+  }
+
+  return (
+    <View style={styles.center}>
+      <ActivityIndicator size="large" color="black" />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  center: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  errorMessage: {
+    color: COLORS.ERROR_TEXT_COLOR,
+    textAlign: 'center',
+  },
+})
diff --git a/apps/wallet-mobile/src/features/Swap/common/ConfirmRawTx/ConfirmRawTxWithPassword.tsx b/apps/wallet-mobile/src/features/Swap/common/ConfirmRawTx/ConfirmRawTxWithPassword.tsx
new file mode 100644
index 0000000000..56922cd9bf
--- /dev/null
+++ b/apps/wallet-mobile/src/features/Swap/common/ConfirmRawTx/ConfirmRawTxWithPassword.tsx
@@ -0,0 +1,42 @@
+import React, {useState} from 'react'
+
+import {Spacer} from '../../../../components'
+import {useSelectedWallet} from '../../../../SelectedWallet'
+import {ConfirmWithSpendingPassword} from '../ConfirmWithSpendingPassword'
+
+export const ConfirmRawTxWithPassword = ({onConfirm}: {onConfirm?: (rootKey: string) => Promise<void>}) => {
+  const wallet = useSelectedWallet()
+
+  const handlePasswordConfirm = async (password: string) => {
+    const rootKey = await wallet.encryptedStorage.rootKey.read(password)
+    return onConfirm?.(rootKey)
+  }
+
+  return <PasswordInput onConfirm={handlePasswordConfirm} />
+}
+
+const PasswordInput = ({onConfirm}: {onConfirm: (password: string) => Promise<void>}) => {
+  const [error, setError] = useState<Error | null>(null)
+  const [loading, setLoading] = useState(false)
+
+  const onConfirmPress = async (password: string) => {
+    setError(null)
+    setLoading(true)
+    try {
+      await onConfirm(password)
+    } catch (e: unknown) {
+      if (e instanceof Error) {
+        setError(e)
+      }
+    }
+    setLoading(false)
+  }
+
+  return (
+    <>
+      <ConfirmWithSpendingPassword onSubmit={onConfirmPress} isLoading={loading} error={error ?? undefined} />
+
+      <Spacer height={10} />
+    </>
+  )
+}
diff --git a/apps/wallet-mobile/src/features/Swap/common/ConfirmWithSpendingPassword/ConfirmWithSpendingPassword.tsx b/apps/wallet-mobile/src/features/Swap/common/ConfirmWithSpendingPassword/ConfirmWithSpendingPassword.tsx
index b1570251c9..395e9d5413 100644
--- a/apps/wallet-mobile/src/features/Swap/common/ConfirmWithSpendingPassword/ConfirmWithSpendingPassword.tsx
+++ b/apps/wallet-mobile/src/features/Swap/common/ConfirmWithSpendingPassword/ConfirmWithSpendingPassword.tsx
@@ -74,11 +74,13 @@ const styles = StyleSheet.create({
   },
   errorMessage: {
     color: COLORS.ERROR_TEXT_COLOR,
+    textAlign: 'center',
   },
   loading: {
     position: 'absolute',
     height: '100%',
-    width: '100%',
+    left: 0,
+    right: 0,
     alignItems: 'center',
     justifyContent: 'center',
   },
diff --git a/apps/wallet-mobile/src/features/Swap/useCases/StartSwapScreen/ListOrders/OpenOrders.tsx b/apps/wallet-mobile/src/features/Swap/useCases/StartSwapScreen/ListOrders/OpenOrders.tsx
index 7957c36bde..18fcf20345 100644
--- a/apps/wallet-mobile/src/features/Swap/useCases/StartSwapScreen/ListOrders/OpenOrders.tsx
+++ b/apps/wallet-mobile/src/features/Swap/useCases/StartSwapScreen/ListOrders/OpenOrders.tsx
@@ -29,7 +29,7 @@ import {useSelectedWallet} from '../../../../../SelectedWallet'
 import {COLORS} from '../../../../../theme'
 import {createRawTxSigningKey, generateCIP30UtxoCbor} from '../../../../../yoroi-wallets/cardano/utils'
 import {useTokenInfos, useTransactionInfos} from '../../../../../yoroi-wallets/hooks'
-import {ConfirmPasswordWalletRawTx} from '../../../common/ConfirmPasswordWalletRawTx/ConfirmPasswordWalletRawTx'
+import {ConfirmRawTx} from '../../../common/ConfirmRawTx/ConfirmRawTx'
 import {Counter} from '../../../common/Counter/Counter'
 import {useNavigateTo} from '../../../common/navigation'
 import {PoolIcon} from '../../../common/PoolIcon/PoolIcon'
@@ -122,9 +122,7 @@ export const OpenOrders = () => {
     setBottomSheetState({
       openId: id,
       title: strings.signTransaction,
-      content: wallet.isHW ? null : (
-        <ConfirmPasswordWalletRawTx onConfirm={(rootKey) => handlePasswordWalletConfirm(rootKey, id)} />
-      ),
+      content: <ConfirmRawTx onConfirm={(rootKey) => handlePasswordWalletConfirm(rootKey, id)} />,
       height: 350,
     })
   }

From d1e53399880818a590726515287e0ae20da658e3 Mon Sep 17 00:00:00 2001
From: Michal <miso.szorad@gmail.com>
Date: Fri, 29 Sep 2023 14:06:37 +0100
Subject: [PATCH 5/5] Rename handler

---
 .../Swap/useCases/StartSwapScreen/ListOrders/OpenOrders.tsx   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/wallet-mobile/src/features/Swap/useCases/StartSwapScreen/ListOrders/OpenOrders.tsx b/apps/wallet-mobile/src/features/Swap/useCases/StartSwapScreen/ListOrders/OpenOrders.tsx
index 18fcf20345..2059700aaf 100644
--- a/apps/wallet-mobile/src/features/Swap/useCases/StartSwapScreen/ListOrders/OpenOrders.tsx
+++ b/apps/wallet-mobile/src/features/Swap/useCases/StartSwapScreen/ListOrders/OpenOrders.tsx
@@ -107,7 +107,7 @@ export const OpenOrders = () => {
     })
   }
 
-  const handlePasswordWalletConfirm = async (rootKey: string, orderId: string) => {
+  const onRawTxConfirm = async (rootKey: string, orderId: string) => {
     const order = normalizedOrders.find((o) => o.id === orderId)
     if (!order || order.owner === undefined || order.utxo === undefined) return
     const tx = await createCancellationTxAndSign(order.id, rootKey)
@@ -122,7 +122,7 @@ export const OpenOrders = () => {
     setBottomSheetState({
       openId: id,
       title: strings.signTransaction,
-      content: <ConfirmRawTx onConfirm={(rootKey) => handlePasswordWalletConfirm(rootKey, id)} />,
+      content: <ConfirmRawTx onConfirm={(rootKey) => onRawTxConfirm(rootKey, id)} />,
       height: 350,
     })
   }