feat(wallet-mobile): new tx review success/failed tx screens (#3747)

Signed-off-by: Juliano Lazzarotto <30806844+stackchain@users.noreply.github.com>
Co-authored-by: Juliano Lazzarotto <30806844+stackchain@users.noreply.github.com>

apps/wallet-mobile/src/features/ReviewTx/common/hooks/useOnConfirm.tsx

@@ -30,11 +30,17 @@ export const useOnConfirm = ({
   const navigateTo = useNavigateTo()
 
   const handleOnSuccess = (signedTx: YoroiSignedTx) => {
-    onSuccess?.(signedTx)
+    if (onSuccess) {
+      onSuccess(signedTx)
+      return
+    }
     navigateTo.showSubmittedTxScreen()
   }
   const handleOnError = () => {
-    onError?.()
+    if (onError) {
+      onError()
+      return
+    }
     navigateTo.showFailedTxScreen()
   }
 

apps/wallet-mobile/src/features/Send/common/navigation.ts

@@ -15,6 +15,8 @@ export const useNavigateTo = () => {
     startTx: () => navigation.navigate('send-start-tx'),
     editAmount: () => navigation.navigate('send-edit-amount'),
     reader: () => navigation.navigate('scan-start', {insideFeature: 'send'}),
+    submittedTx: () => navigation.navigate('send-submitted-tx'),
+    failedTx: () => navigation.navigate('send-failed-tx'),
     startTxAfterReset: () =>
       navigation.reset({
         index: 0,

apps/wallet-mobile/src/features/Send/common/strings.tsx

@@ -253,15 +253,15 @@ const messages = defineMessages({
   },
   submittedTxTitle: {
     id: 'components.send.sendscreen.submittedTxTitle',
-    defaultMessage: '!!!Transaction submitted',
+    defaultMessage: '!!!Transaction signed',
   },
   submittedTxText: {
     id: 'components.send.sendscreen.submittedTxText',
     defaultMessage: '!!!Check this transaction in the list of wallet transactions',
   },
   submittedTxButton: {
     id: 'components.send.sendscreen.submittedTxButton',
-    defaultMessage: '!!!Go to transactions',
+    defaultMessage: '!!!Close',
   },
   failedTxTitle: {
     id: 'components.send.sendscreen.failedTxTitle',

apps/wallet-mobile/src/features/Send/useCases/ListAmountsToSend/ListAmountsToSendScreen.tsx

@@ -87,10 +87,13 @@ export const ListAmountsToSendScreen = () => {
     if (memo.length > 0) {
       saveMemo({txId: signedTx.signedTx.id, memo: memo.trim()})
     }
+
+    navigateTo.submittedTx()
   }
 
   const onError = () => {
     track.sendSummarySubmitted(sendProperties)
+    navigateTo.failedTx()
   }
 
   const onNext = () => {

apps/wallet-mobile/src/features/Send/useCases/ShowFailedTxScreen/FailedTxScreen.tsx

@@ -0,0 +1,77 @@
+import {useTheme} from '@yoroi/theme'
+import * as React from 'react'
+import {StyleSheet, Text, View} from 'react-native'
+
+import {Button} from '../../../../components/Button/Button'
+import {SafeArea} from '../../../../components/SafeArea'
+import {Space} from '../../../../components/Space/Space'
+import {Spacer} from '../../../../components/Spacer/Spacer'
+import {useBlockGoBack, useWalletNavigation} from '../../../../kernel/navigation'
+import {FailedTxIcon} from '../../../ReviewTx/illustrations/FailedTxIcon'
+import {useStrings} from '../../common/strings'
+
+export const FailedTxScreen = () => {
+  useBlockGoBack()
+  const strings = useStrings()
+  const {styles} = useStyles()
+  const {resetToStartTransfer} = useWalletNavigation()
+
+  return (
+    <SafeArea style={styles.root}>
+      <Spacer height={144} />
+
+      <FailedTxIcon />
+
+      <Space height="_2xl" />
+
+      <Space height="lg" />
+
+      <Text style={styles.title}>{strings.failedTxTitle}</Text>
+
+      <Text style={styles.text}>{strings.failedTxText}</Text>
+
+      <Space fill />
+
+      <Actions>
+        <Button onPress={resetToStartTransfer} title={strings.failedTxButton} style={styles.button} />
+      </Actions>
+    </SafeArea>
+  )
+}
+
+const Actions = ({children}: {children: React.ReactNode}) => {
+  const {styles} = useStyles()
+
+  return <View style={styles.actions}>{children}</View>
+}
+
+const useStyles = () => {
+  const {atoms, color} = useTheme()
+  const styles = StyleSheet.create({
+    root: {
+      backgroundColor: color.bg_color_max,
+      ...atoms.p_lg,
+      ...atoms.flex_1,
+      ...atoms.align_center,
+      ...atoms.justify_center,
+    },
+    title: {
+      color: color.gray_max,
+      ...atoms.heading_3_medium,
+      ...atoms.px_sm,
+      ...atoms.text_center,
+    },
+    text: {
+      color: color.gray_600,
+      ...atoms.body_1_lg_regular,
+      ...atoms.text_center,
+    },
+    button: {
+      ...atoms.px_lg,
+    },
+    actions: {
+      alignSelf: 'stretch',
+    },
+  })
+  return {styles} as const
+}

apps/wallet-mobile/src/features/Send/useCases/ShowSubmittedTxScreen/SubmittedTxScreen.tsx

@@ -0,0 +1,78 @@
+import {useTheme} from '@yoroi/theme'
+import * as React from 'react'
+import {StyleSheet, Text, View} from 'react-native'
+
+import {Button} from '../../../../components/Button/Button'
+import {SafeArea} from '../../../../components/SafeArea'
+import {Space} from '../../../../components/Space/Space'
+import {Spacer} from '../../../../components/Spacer/Spacer'
+import {useBlockGoBack, useWalletNavigation} from '../../../../kernel/navigation'
+import {SuccessfulTxIcon} from '../../../ReviewTx/illustrations/SuccessfulTxIcon'
+import {useStrings} from '../../common/strings'
+
+export const SubmittedTxScreen = () => {
+  useBlockGoBack()
+  const strings = useStrings()
+  const {styles} = useStyles()
+  const {resetToTxHistory} = useWalletNavigation()
+
+  return (
+    <SafeArea style={styles.root}>
+      <Spacer height={144} />
+
+      <SuccessfulTxIcon />
+
+      <Space height="_2xl" />
+
+      <Space height="lg" />
+
+      <Text style={styles.title}>{strings.submittedTxTitle}</Text>
+
+      <Text style={styles.text}>{strings.submittedTxText}</Text>
+
+      <Space fill />
+
+      <Actions>
+        <Button onPress={resetToTxHistory} title={strings.submittedTxButton} style={styles.button} />
+      </Actions>
+    </SafeArea>
+  )
+}
+
+const Actions = ({children}: {children: React.ReactNode}) => {
+  const {styles} = useStyles()
+
+  return <View style={styles.actions}>{children}</View>
+}
+
+const useStyles = () => {
+  const {atoms, color} = useTheme()
+  const styles = StyleSheet.create({
+    root: {
+      backgroundColor: color.bg_color_max,
+      ...atoms.p_lg,
+      ...atoms.flex_1,
+      ...atoms.align_center,
+      ...atoms.justify_center,
+    },
+    title: {
+      color: color.gray_max,
+      ...atoms.heading_3_medium,
+      ...atoms.px_sm,
+      ...atoms.text_center,
+    },
+    text: {
+      color: color.gray_600,
+      ...atoms.body_1_lg_regular,
+      ...atoms.text_center,
+      maxWidth: 330,
+    },
+    button: {
+      ...atoms.px_lg,
+    },
+    actions: {
+      alignSelf: 'stretch',
+    },
+  })
+  return {styles} as const
+}

apps/wallet-mobile/src/features/Staking/Governance/GovernanceNavigator.tsx

@@ -12,6 +12,8 @@ import {ChangeVoteScreen} from './useCases/ChangeVote/ChangeVoteScreen'
 import {HomeScreen} from './useCases/Home/HomeScreen'
 import {NoFundsScreen} from './useCases/NoFunds/NoFundsScreen'
 import {NotSupportedCardanoAppVersion} from './useCases/NotSupportedCardanoAppVersion/NotSupportedCardanoAppVersion'
+import {FailedTxScreen} from './useCases/ShowFailedTxScreen/FailedTxScreen'
+import {SubmittedTxScreen} from './useCases/ShowSubmittedTxScreen/SubmittedTxScreen'
 
 const Stack = NavigationStack
 
@@ -52,6 +54,10 @@ export const GovernanceNavigator = () => {
             component={NoFundsScreen}
             options={{title: strings.governanceCentreTitle}}
           />
+
+          <Stack.Screen name="staking-gov-submitted-tx" component={SubmittedTxScreen} options={{headerShown: false}} />
+
+          <Stack.Screen name="staking-gov-failed-tx" component={FailedTxScreen} options={{headerShown: false}} />
         </Stack.Navigator>
       </SafeArea>
     </GovernanceProvider>

apps/wallet-mobile/src/features/Staking/Governance/common/helpers.tsx

@@ -82,7 +82,9 @@ export const useGovernanceActions = () => {
     navigateToTxReview({
       onSuccess: (signedTx) => {
         updateLatestGovernanceAction({kind: 'delegate-to-drep', drepID, txID: signedTx.signedTx.id})
+        navigateTo.submittedTx()
       },
+      onError: navigateTo.failedTx,
       onNotSupportedCIP1694: navigateTo.notSupportedVersion,
     })
   }
@@ -93,7 +95,9 @@ export const useGovernanceActions = () => {
     navigateToTxReview({
       onSuccess: (signedTx) => {
         updateLatestGovernanceAction({kind: 'vote', vote: 'abstain', txID: signedTx.signedTx.id})
+        navigateTo.submittedTx()
       },
+      onError: navigateTo.failedTx,
       onNotSupportedCIP1694: navigateTo.notSupportedVersion,
     })
   }
@@ -104,7 +108,9 @@ export const useGovernanceActions = () => {
     navigateToTxReview({
       onSuccess: (signedTx) => {
         updateLatestGovernanceAction({kind: 'vote', vote: 'no-confidence', txID: signedTx.signedTx.id})
+        navigateTo.submittedTx()
       },
+      onError: navigateTo.failedTx,
       onNotSupportedCIP1694: navigateTo.notSupportedVersion,
     })
   }

apps/wallet-mobile/src/features/Staking/Governance/common/navigation.ts

@@ -7,6 +7,8 @@ export type Routes = {
   'staking-gov-change-vote': undefined
   'staking-gov-not-supported-version': undefined
   'staking-gov-no-funds': undefined
+  'staking-gov-submitted-tx': undefined
+  'staking-gov-failed-tx': undefined
 }
 
 export const NavigationStack = createStackNavigator<Routes>()
@@ -18,5 +20,7 @@ export const useNavigateTo = () => {
     changeVote: () => navigation.navigate('staking-gov-change-vote'),
     notSupportedVersion: () => navigation.navigate('staking-gov-not-supported-version'),
     noFunds: () => navigation.navigate('staking-gov-no-funds'),
+    submittedTx: () => navigation.navigate('staking-gov-submitted-tx'),
+    failedTx: () => navigation.navigate('staking-gov-failed-tx'),
   }).current
 }

apps/wallet-mobile/src/features/Staking/Governance/common/strings.ts

@@ -67,6 +67,12 @@ export const useStrings = () => {
     readyToCollectRewards: intl.formatMessage(messages.readyToCollectRewards),
     notSupportedVersionButton: intl.formatMessage(messages.notSupportedVersionButton),
     scriptNotSupported: intl.formatMessage(messages.scriptNotSupported),
+    submittedTxButton: intl.formatMessage(messages.submittedTxButton),
+    submittedTxText: intl.formatMessage(messages.submittedTxText),
+    submittedTxTitle: intl.formatMessage(messages.submittedTxTitle),
+    failedTxButton: intl.formatMessage(messages.failedTxButton),
+    failedTxText: intl.formatMessage(messages.failedTxText),
+    failedTxTitle: intl.formatMessage(messages.failedTxTitle),
   }
 }
 
@@ -285,4 +291,29 @@ const messages = defineMessages({
     id: 'components.governance.scriptNotSupported',
     defaultMessage: '!!!Script DReps ids will be supported soon.',
   },
+  submittedTxTitle: {
+    id: 'components.governance.submittedTxTitle',
+    defaultMessage: '!!!Transaction signed',
+  },
+  submittedTxText: {
+    id: 'components.governance.submittedTxText',
+    defaultMessage:
+      '!!!This transaction can take a while!\n\nParticipating in the Cardano Governance gives you the opportunity to participate in the voting as well as withdraw your staking rewards.',
+  },
+  submittedTxButton: {
+    id: 'components.governance.submittedTxButton',
+    defaultMessage: '!!!Close',
+  },
+  failedTxTitle: {
+    id: 'components.governance.failedTxTitle',
+    defaultMessage: '!!!Transaction failed',
+  },
+  failedTxText: {
+    id: 'components.governance.failedTxText',
+    defaultMessage: '!!!Your transaction has not been processed properly due to technical issues',
+  },
+  failedTxButton: {
+    id: 'components.governance.failedTxButton',
+    defaultMessage: '!!!Try again',
+  },
 })