fix(collateral): Add collateral UX improvements

apps/wallet-mobile/src/components/ConfirmTxWithSpendingPasswordModal/ConfirmTxWithSpendingPasswordModal.stories.tsx

@@ -2,11 +2,16 @@ import {storiesOf} from '@storybook/react-native'
 import React from 'react'
 import {StyleSheet, View} from 'react-native'
 
+import {SelectedWalletProvider} from '../../SelectedWallet'
 import {mocks} from '../../yoroi-wallets/mocks'
 import {ConfirmTxWithSpendingPasswordModal} from './ConfirmTxWithSpendingPasswordModal'
 
 storiesOf('ConfirmTxWithSpendingPasswordModal', module)
-  .addDecorator((story) => <View style={styles.container}>{story()}</View>)
+  .addDecorator((story) => (
+    <SelectedWalletProvider wallet={mocks.wallet}>
+      <View style={styles.container}>{story()}</View>
+    </SelectedWalletProvider>
+  ))
   .add('Default', () => <ConfirmTxWithSpendingPasswordModal unsignedTx={mocks.yoroiUnsignedTx} />)
 
 const styles = StyleSheet.create({

apps/wallet-mobile/src/components/ConfirmTxWithSpendingPasswordModal/ConfirmTxWithSpendingPasswordModal.tsx

@@ -42,6 +42,9 @@ export const ConfirmTxWithSpendingPasswordModal = ({onSuccess, unsignedTx, onErr
 
   const error = signError || submitError
   const isLoading = signIsLoading || submitIsLoading
+
+  const errorMessage = error ? getErrorMessage(error, strings) : null
+
   return (
     <>
       <Text style={styles.modalText}>{strings.enterSpendingPassword}</Text>
@@ -57,12 +60,10 @@ export const ConfirmTxWithSpendingPasswordModal = ({onSuccess, unsignedTx, onErr
         right={isPasswordCorrect ? <Checkmark /> : null}
       />
 
-      {error != null && (
-        <View>
-          <Text style={styles.errorMessage} numberOfLines={3}>
-            {getErrorMessage(error, strings)}
-          </Text>
-        </View>
+      {errorMessage != null && (
+        <Text style={styles.errorMessage} numberOfLines={3}>
+          {errorMessage}
+        </Text>
       )}
 
       <Spacer fill />

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,7 +41,8 @@ export const ConfirmTxScreen = () => {
 
   const onSuccess = (signedTx: YoroiSignedTx) => {
     navigateTo.submittedTx()
-
+    const collateralId = `${signedTx.signedTx.id}:0`
+    setCollateralId(collateralId)
     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/ManageCollateral/ManageCollateralScreen.tsx

@@ -28,6 +28,7 @@ import {RawUtxo, YoroiEntry, YoroiUnsignedTx} from '../../../yoroi-wallets/types
 import {Amounts, Quantities} from '../../../yoroi-wallets/utils'
 import {useSend} from '../../Send/common/SendContext'
 import {usePrivacyMode} from '../PrivacyMode/PrivacyMode'
+import {createCollateralEntry} from './helpers'
 import {useNavigateTo} from './navigation'
 import {useStrings} from './strings'
 
@@ -51,12 +52,7 @@ export const ManageCollateralScreen = () => {
   const {refetch: createUnsignedTx, isFetching: isLoadingTx} = useSendTx(
     {
       wallet,
-      entry: {
-        address: wallet.externalAddresses[0],
-        amounts: {
-          [wallet.primaryTokenInfo.id]: collateralConfig.minLovelace,
-        },
-      },
+      entry: createCollateralEntry(wallet),
     },
     {
       onSuccess: (yoroiUnsignedTx) => yoroiUnsignedTxChanged(yoroiUnsignedTx),

apps/wallet-mobile/src/features/Settings/ManageCollateral/helpers.ts

@@ -0,0 +1,20 @@
+import {YoroiWallet} from '../../../yoroi-wallets/cardano/types'
+import {collateralConfig} from '../../../yoroi-wallets/cardano/utxoManager/utxos'
+import {YoroiEntry} from '../../../yoroi-wallets/types'
+
+const getCollateralAddress = (wallet: YoroiWallet) => {
+  return wallet.externalAddresses[0]
+}
+
+const getCollateralAmountInLovelace = () => {
+  return collateralConfig.minLovelace
+}
+
+export const createCollateralEntry = (wallet: YoroiWallet): YoroiEntry => {
+  return {
+    address: getCollateralAddress(wallet),
+    amounts: {
+      [wallet.primaryTokenInfo.id]: getCollateralAmountInLovelace(),
+    },
+  }
+}

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},
@@ -18,11 +21,13 @@ export const ConfirmRawTxWithOs = ({onConfirm}: {onConfirm?: (rootKey: string) =
     authWithOs()
   }, [wallet.isEasyConfirmationEnabled, authWithOs])
 
-  if (error) {
+  const errorMessage = error ? getErrorMessage(error, strings) : null
+
+  if (errorMessage != null) {
     return (
       <View style={styles.center}>
         <Text style={styles.errorMessage} numberOfLines={3}>
-          {error.message}
+          {errorMessage}
         </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
@@ -26,6 +26,8 @@ export const ConfirmWithSpendingPassword = ({onSubmit, isLoading, error, onPassw
   )
   const strings = useStrings()
 
+  const errorMessage = error ? getErrorMessage(error, strings) : null
+
   return (
     <>
       <Text style={styles.modalText}>{strings.enterSpendingPassword}</Text>
@@ -43,12 +45,10 @@ export const ConfirmWithSpendingPassword = ({onSubmit, isLoading, error, onPassw
         autoComplete="off"
       />
 
-      {error != null && (
-        <View>
-          <Text style={styles.errorMessage} numberOfLines={3}>
-            {getErrorMessage(error, strings)}
-          </Text>
-        </View>
+      {errorMessage != null && (
+        <Text style={styles.errorMessage} numberOfLines={3}>
+          {errorMessage}
+        </Text>
       )}
 
       <Spacer fill />
@@ -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,20 @@
+import {SubmitTxInsufficientCollateralError} from '../../../yoroi-wallets/cardano/api/errors'
+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 SubmitTxInsufficientCollateralError) {
+    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.insufficientCollateral.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",
@@ -608,6 +609,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.insufficientCollateral.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/api/api.ts

@@ -19,6 +19,7 @@ import type {
 } from '../../types'
 import {ApiError} from '../errors'
 import {ServerStatus} from '../types'
+import {handleError} from './errors'
 import fetchDefault from './fetch'
 
 type Addresses = Array<string>
@@ -56,8 +57,12 @@ export const filterUsedAddresses = async (addresses: Addresses, config: BackendC
   return copy.filter((addr) => used.includes(addr))
 }
 
-export const submitTransaction = (signedTx: string, config: BackendConfig) => {
-  return fetchDefault('txs/signed', {signedTx}, config)
+export const submitTransaction = async (signedTx: string, config: BackendConfig) => {
+  try {
+    await fetchDefault('txs/signed', {signedTx}, config)
+  } catch (e) {
+    throw e instanceof Error ? handleError(e) : e
+  }
 }
 
 export const getTransactions = async (

apps/wallet-mobile/src/yoroi-wallets/cardano/api/errors.ts

@@ -0,0 +1,10 @@
+import ExtendableError from 'es6-error'
+
+export class SubmitTxInsufficientCollateralError extends ExtendableError {}
+
+export const handleError = (e: Error) => {
+  if (e.message.includes('InsufficientCollateral')) {
+    return new SubmitTxInsufficientCollateralError(e.message)
+  }
+  return e
+}

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 quantity = collateralUtxo?.amount !== undefined ? asQuantity(collateralUtxo?.amount) : Quantities.zero
+    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,
     }
   }