fix(collateral): Add collateral UX improvements

apps/wallet-mobile/src/features/Settings/ManageCollateral/ConfirmTx/ConfirmTxScreen.tsx

@@ -8,6 +8,7 @@ import {ConfirmTx} from '../../../../components/ConfirmTx'
 import globalMessages, {confirmationMessages, errorMessages, txLabels} from '../../../../i18n/global-messages'
 import {useSelectedWallet} from '../../../../SelectedWallet'
 import {COLORS} from '../../../../theme'
+import {useSetCollateralId} from '../../../../yoroi-wallets/cardano/utxoManager/useSetCollateralId'
 import {useSaveMemo} from '../../../../yoroi-wallets/hooks'
 import {YoroiSignedTx} from '../../../../yoroi-wallets/types'
 import {debugWalletInfo, features} from '../../..'
@@ -26,6 +27,7 @@ export const ConfirmTxScreen = () => {
   const navigateTo = useNavigateTo()
   const [password, setPassword] = React.useState('')
   const [useUSB, setUseUSB] = React.useState(false)
+  const {setCollateralId} = useSetCollateralId(wallet)
 
   const {memo, yoroiUnsignedTx, targets} = useSend()
 
@@ -39,6 +41,7 @@ export const ConfirmTxScreen = () => {
 
   const onSuccess = (signedTx: YoroiSignedTx) => {
     navigateTo.submittedTx()
+    setCollateralId(`${signedTx.signedTx.id}:0`)
 
     if (memo.length > 0) {
       saveMemo({txId: signedTx.signedTx.id, memo: memo.trim()})

apps/wallet-mobile/src/features/Settings/ManageCollateral/ManageCollateralScreen.stories.tsx

@@ -25,6 +25,7 @@ const goneCollateral: YoroiWallet = {
       },
       collateralId: mocks.wallet.collateralId,
       utxo: undefined,
+      isConfirmed: true,
     }
   },
 }
@@ -40,6 +41,7 @@ const noCollateral: YoroiWallet = {
       },
       collateralId: '',
       utxo: undefined,
+      isConfirmed: true,
     }
   },
 }
@@ -56,6 +58,7 @@ const noFundsWallet: YoroiWallet = {
       },
       collateralId: '',
       utxo: undefined,
+      isConfirmed: true,
     }
   },
 }

apps/wallet-mobile/src/features/Settings/SettingsScreenNavigator.tsx

@@ -158,6 +158,7 @@ export const SettingsScreenNavigator = () => {
           name="collateral-tx-submitted"
           options={{
             title: strings.collateral,
+            headerLeft: () => null,
           }}
           component={SubmittedTxScreen}
         />

apps/wallet-mobile/src/features/Swap/common/ConfirmRawTx/ConfirmRawTxWithOs.tsx

@@ -4,9 +4,12 @@ import {ActivityIndicator, StyleSheet, Text, View} from 'react-native'
 import {useSelectedWallet} from '../../../../SelectedWallet'
 import {COLORS} from '../../../../theme'
 import {useAuthOsWithEasyConfirmation} from '../../../../yoroi-wallets/auth'
+import {getErrorMessage} from '../errors'
+import {useStrings} from '../strings'
 
 export const ConfirmRawTxWithOs = ({onConfirm}: {onConfirm?: (rootKey: string) => Promise<void>}) => {
   const wallet = useSelectedWallet()
+  const strings = useStrings()
 
   const {authWithOs, error} = useAuthOsWithEasyConfirmation(
     {id: wallet.id},
@@ -22,7 +25,7 @@ export const ConfirmRawTxWithOs = ({onConfirm}: {onConfirm?: (rootKey: string) =
     return (
       <View style={styles.center}>
         <Text style={styles.errorMessage} numberOfLines={3}>
-          {error.message}
+          {getErrorMessage(error, strings)}
         </Text>
       </View>
     )

apps/wallet-mobile/src/features/Swap/common/ConfirmWithSpendingPassword/ConfirmWithSpendingPassword.tsx

@@ -4,8 +4,8 @@ import {ActivityIndicator, StyleSheet, TextInput as RNTextInput, View} from 'rea
 import {Button, Spacer, Text, TextInput} from '../../../../components'
 import {debugWalletInfo, features} from '../../../../features'
 import {COLORS} from '../../../../theme'
-import {WrongPassword} from '../../../../yoroi-wallets/cardano/errors'
 import {useStrings} from '../../common/strings'
+import {getErrorMessage} from '../errors'
 
 export type ErrorData = {
   errorMessage: string
@@ -70,17 +70,6 @@ export const ConfirmWithSpendingPassword = ({onSubmit, isLoading, error, onPassw
   )
 }
 
-const getErrorMessage = (error: unknown, strings: Record<'wrongPasswordMessage' | 'error', string>) => {
-  if (error instanceof WrongPassword) {
-    return strings.wrongPasswordMessage
-  }
-  if (error instanceof Error) {
-    return error.message
-  }
-
-  return strings.error
-}
-
 const styles = StyleSheet.create({
   modalText: {
     paddingHorizontal: 70,

apps/wallet-mobile/src/features/Swap/common/errors.ts

@@ -0,0 +1,19 @@
+import {WrongPassword} from '../../../yoroi-wallets/cardano/errors'
+
+export const getErrorMessage = (
+  error: unknown,
+  strings: Record<'wrongPasswordMessage' | 'error' | 'missingCollateral', string>,
+) => {
+  if (error instanceof WrongPassword) {
+    return strings.wrongPasswordMessage
+  }
+  if (error instanceof Error && error.message.includes('InsufficientCollateral')) {
+    return strings.missingCollateral
+  }
+
+  if (error instanceof Error) {
+    return error.message
+  }
+
+  return strings.error
+}

apps/wallet-mobile/src/features/Swap/common/strings.ts

@@ -116,6 +116,7 @@ export const useStrings = () => {
     assignCollateral: intl.formatMessage(messages.assignCollateral),
     collateralNotFound: intl.formatMessage(messages.collateralNotFound),
     noActiveCollateral: intl.formatMessage(messages.noActiveCollateral),
+    collateralTxPending: intl.formatMessage(messages.collateralTxPending),
     failedTxTitle: intl.formatMessage(messages.failedTxTitle),
     failedTxText: intl.formatMessage(messages.failedTxText),
     failedTxButton: intl.formatMessage(messages.failedTxButton),
@@ -147,6 +148,7 @@ export const useStrings = () => {
     emptyOpenOrdersSub: intl.formatMessage(messages.emptyOpenOrdersSub),
     emptyCompletedOrders: intl.formatMessage(messages.emptyCompletedOrders),
     warning: intl.formatMessage(messages.warning),
+    missingCollateral: intl.formatMessage(errorMessages.missingCollateral.title),
   }
 }
 
@@ -555,6 +557,10 @@ export const messages = defineMessages({
     id: 'components.send.confirmscreen.noActiveCollateral',
     defaultMessage: "!!!You don't have an active collateral utxo",
   },
+  collateralTxPending: {
+    id: 'components.send.confirmscreen.collateralTxPending',
+    defaultMessage: '!!!Collateral transaction is pending. Try again later',
+  },
   failedTxTitle: {
     id: 'components.send.sendscreen.failedTxTitle',
     defaultMessage: '!!!Transaction failed',

apps/wallet-mobile/src/features/Swap/useCases/StartSwapScreen/ListOrders/OpenOrders.tsx

@@ -132,6 +132,11 @@ export const OpenOrders = () => {
   }
 
   const showCollateralNotFoundAlert = () => {
+    if (isCollateralUtxoPending()) {
+      Alert.alert(strings.collateralNotFound, strings.collateralTxPending)
+      return
+    }
+
     Alert.alert(
       strings.collateralNotFound,
       strings.noActiveCollateral,
@@ -140,6 +145,11 @@ export const OpenOrders = () => {
     )
   }
 
+  const isCollateralUtxoPending = () => {
+    const info = wallet.getCollateralInfo()
+    return !info.isConfirmed && info.collateralId.length > 0
+  }
+
   const hasCollateralUtxo = () => {
     return !!wallet.getCollateralInfo().utxo
   }

apps/wallet-mobile/src/i18n/global-messages.ts

@@ -253,6 +253,12 @@ export const errorMessages = {
       defaultMessage: '!!!PINs do not match.',
     },
   }),
+  missingCollateral: defineMessages({
+    title: {
+      id: 'global.actions.dialogs.insufficientColleateral.message',
+      defaultMessage: '!!!Collateral amount is insufficient. Please assign collateral.',
+    },
+  }),
   incorrectPin: defineMessages({
     title: {
       id: 'global.actions.dialogs.incorrectPin.title',

apps/wallet-mobile/src/i18n/locales/en-US.json

@@ -246,6 +246,7 @@
   "components.send.confirmscreen.confirmButton": "Confirm",
   "components.send.confirmscreen.fees": "Fees",
   "components.send.confirmscreen.noActiveCollateral": "You don't have an active collateral utxo",
+  "components.send.confirmscreen.collateralTxPending": "Collateral transaction is pending. Try again later",
   "components.send.confirmscreen.password": "Spending password",
   "components.send.confirmscreen.receiver": "Receiver address, ADA Handle or domains",
   "components.send.confirmscreen.sendingModalTitle": "Submitting transaction",
@@ -607,6 +608,7 @@
   "global.actions.dialogs.walletSynchronizing": "Wallet is synchronizing",
   "global.actions.dialogs.wrongPinError.message": "PIN is incorrect.",
   "global.actions.dialogs.wrongPinError.title": "Invalid PIN",
+  "global.actions.dialogs.insufficientColleateral.message": "Collateral amount is insufficient. Please go back and assign collateral.",
   "global.all": "All",
   "global.apply": "Apply",
   "global.assets.assetLabel": "Asset",

apps/wallet-mobile/src/yoroi-wallets/cardano/byron/ByronWallet.ts

@@ -1149,15 +1149,20 @@ export class ByronWallet implements YoroiWallet {
     return this._collateralId
   }
 
-  getCollateralInfo(): {utxo: RawUtxo | undefined; amount: Balance.Amount; collateralId: string} {
+  getCollateralInfo() {
     const utxos = utxosMaker(this._utxos)
-    const collateralUtxo = utxos.findById(this.collateralId)
+    const collateralId = this.collateralId
+    const collateralUtxo = utxos.findById(collateralId)
     const quantity = collateralUtxo?.amount !== undefined ? asQuantity(collateralUtxo?.amount) : Quantities.zero
+    const txInfos = this.transactions
+    const collateralTxId = collateralId ? collateralId.split(':')[0] : null
+    const isConfirmed = !!collateralTxId && Object.values(txInfos).some((tx) => tx.id === collateralTxId)
 
     return {
       utxo: collateralUtxo,
       amount: {quantity, tokenId: this.primaryTokenInfo.id},
-      collateralId: this.collateralId,
+      collateralId,
+      isConfirmed,
     }
   }
 

apps/wallet-mobile/src/yoroi-wallets/cardano/shelley/ShelleyWallet.ts

@@ -1061,15 +1061,20 @@ export const makeShelleyWallet = (constants: typeof MAINNET | typeof TESTNET | t
       return this._collateralId
     }
 
-    getCollateralInfo(): {utxo: RawUtxo | undefined; amount: Balance.Amount; collateralId: string} {
+    getCollateralInfo() {
       const utxos = utxosMaker(this._utxos)
-      const collateralUtxo = utxos.findById(this.collateralId)
+      const collateralId = this.collateralId
+      const collateralUtxo = utxos.findById(collateralId)
       const quantity = collateralUtxo?.amount !== undefined ? asQuantity(collateralUtxo?.amount) : Quantities.zero
+      const txInfos = this.transactions
+      const collateralTxId = collateralId ? collateralId.split(':')[0] : null
+      const isConfirmed = !!collateralTxId && Object.values(txInfos).some((tx) => tx.id === collateralTxId)
 
       return {
         utxo: collateralUtxo,
         amount: {quantity, tokenId: this.primaryTokenInfo.id},
-        collateralId: this.collateralId,
+        collateralId,
+        isConfirmed,
       }
     }
 

apps/wallet-mobile/src/yoroi-wallets/cardano/types.ts

@@ -173,7 +173,12 @@ export type YoroiWallet = {
   utxos: Array<RawUtxo>
   allUtxos: Array<RawUtxo>
   get collateralId(): string
-  getCollateralInfo(): {utxo: RawUtxo | undefined; amount: Balance.Amount; collateralId: RawUtxo['utxo_id']}
+  getCollateralInfo(): {
+    utxo: RawUtxo | undefined
+    amount: Balance.Amount
+    collateralId: RawUtxo['utxo_id']
+    isConfirmed: boolean
+  }
   setCollateralId(collateralId: RawUtxo['utxo_id']): Promise<void>
 
   // Fiat

apps/wallet-mobile/src/yoroi-wallets/mocks/wallet.ts

@@ -88,6 +88,7 @@ const wallet: YoroiWallet = {
       },
       amount: {quantity: '5449549', tokenId: ''},
       collateralId: '22d391c7a97559cb4784bd975214919618acce75cde573a7150a176700e76181:2',
+      isConfirmed: true,
     }
   },
   signSwapCancellationWithLedger: async () => {