feature(wallet-mobile): new tx review for ctalyst

apps/wallet-mobile/src/features/RegisterCatalyst/CatalystNavigator.tsx

@@ -5,7 +5,6 @@ import {catalystApiMaker} from '@yoroi/staking/src'
 import {useTheme} from '@yoroi/theme'
 import React from 'react'
 import {useIntl} from 'react-intl'
-import {StyleSheet} from 'react-native'
 
 import {Boundary} from '../../components/Boundary/Boundary'
 import globalMessages from '../../kernel/i18n/global-messages'
@@ -18,7 +17,6 @@ import {
 } from '../../kernel/navigation'
 import {NetworkTag} from '../Settings/useCases/changeAppSettings/ChangeNetwork/NetworkTag'
 import {ConfirmPin} from './useCases/ConfirmPin/ConfirmPin'
-import {ConfirmVotingTx} from './useCases/ConfirmVotingTx/ConfirmVotingTx'
 import {DisplayPin} from './useCases/DisplayPin/DisplayPin'
 import {DownloadCatalystAppScreen} from './useCases/DownloadCatalystAppScreen/DownloadCatalystAppScreen'
 import {QrCode} from './useCases/ShowQrCode/ShowQrCode'
@@ -33,7 +31,6 @@ export const CatalystNavigator = () => {
   const {atoms, color} = useTheme()
   const strings = useStrings()
   const {track} = useMetrics()
-  const {styles} = useStyles()
 
   useFocusEffect(
     React.useCallback(() => {
@@ -68,14 +65,6 @@ export const CatalystNavigator = () => {
           {/* STEP 3 */}
           <Stack.Screen name="confirm-pin" component={ConfirmPin} />
 
-          <Stack.Screen name="confirm-tx">
-            {() => (
-              <Boundary loading={{size: 'full', style: styles.loadingBackground}} error={{size: 'full'}}>
-                <ConfirmVotingTx />
-              </Boundary>
-            )}
-          </Stack.Screen>
-
           {/* STEP 4 */}
           <Stack.Screen component={QrCode} name="qr-code" options={{...navigationOptions, headerLeft: () => null}} />
         </Stack.Group>
@@ -91,7 +80,6 @@ export const useNavigateTo = () => {
   return {
     displayPin: () => navigation.navigate('display-pin'),
     confirmPin: () => navigation.navigate('confirm-pin'),
-    confirmTx: () => navigation.navigate('confirm-tx'),
     qrCode: () => navigation.navigate('qr-code'),
     txHistory: () => resetToTxHistory(),
   }
@@ -104,14 +92,3 @@ const useStrings = () => {
     title: intl.formatMessage(globalMessages.votingTitle),
   }
 }
-
-const useStyles = () => {
-  const {color} = useTheme()
-  const styles = StyleSheet.create({
-    loadingBackground: {
-      backgroundColor: color.bg_color_max,
-    },
-  })
-
-  return {styles}
-}

apps/wallet-mobile/src/features/RegisterCatalyst/useCases/ConfirmPin/ConfirmPin.tsx

@@ -9,8 +9,11 @@ import {Button} from '../../../../components/Button/Button'
 import {BACKSPACE, NumericKeyboard} from '../../../../components/NumericKeyboard'
 import {Space} from '../../../../components/Space/Space'
 import {Spacer} from '../../../../components/Spacer/Spacer'
+import {useWalletNavigation} from '../../../../kernel/navigation'
 import {generatePrivateKeyForCatalyst} from '../../../../yoroi-wallets/cardano/catalyst'
 import {encryptWithPassword} from '../../../../yoroi-wallets/cardano/catalyst/catalystCipher'
+import {useReviewTx} from '../../../ReviewTx/common/ReviewTxProvider'
+import {useSelectedWallet} from '../../../WalletManager/common/hooks/useSelectedWallet'
 import {useNavigateTo} from '../../CatalystNavigator'
 import {Actions, Description, PinBox, Row, Stepper} from '../../common/components'
 import {useStrings} from '../../common/strings'
@@ -19,16 +22,31 @@ export const ConfirmPin = () => {
   const strings = useStrings()
   const {isDark} = useTheme()
   const styles = useStyles()
-  const {pin, votingKeyEncryptedChanged, catalystKeyHexChanged} = useCatalyst()
+  const {pin, votingKeyEncryptedChanged} = useCatalyst()
   const navigateTo = useNavigateTo()
   const [currentActivePin, setCurrentActivePin] = React.useState(1)
+  const {wallet, meta} = useSelectedWallet()
+  const {onCIP36SupportChangeChanged, unsignedTxChanged, onSuccessChanged} = useReviewTx()
+  const {navigateToTxReview} = useWalletNavigation()
 
   const {generateVotingKeys, isLoading} = useGenerateVotingKeys({
-    onSuccess: ({catalystKeyHex, votingKeyEncrypted}) => {
+    onSuccess: async ({catalystKeyHex, votingKeyEncrypted}) => {
       votingKeyEncryptedChanged(votingKeyEncrypted)
-      catalystKeyHexChanged(catalystKeyHex)
 
-      navigateTo.confirmTx()
+      let votingRegTx = await wallet.createVotingRegTx({
+        catalystKeyHex,
+        supportsCIP36: true,
+        addressMode: meta.addressMode,
+      })
+
+      unsignedTxChanged(votingRegTx.votingRegTx)
+      onCIP36SupportChangeChanged(async (supportsCIP36: boolean) => {
+        votingRegTx = await wallet.createVotingRegTx({catalystKeyHex, supportsCIP36, addressMode: meta.addressMode})
+        unsignedTxChanged(votingRegTx.votingRegTx)
+      })
+      onSuccessChanged(navigateTo.qrCode)
+
+      navigateToTxReview()
     },
   })