feat(wallet-mobile): send feature new tx review

apps/wallet-mobile/src/WalletNavigator.tsx

@@ -25,6 +25,7 @@ import {useLinksShowActionResult} from './features/Links/common/useLinksShowActi
 import {MenuNavigator} from './features/Menu/Menu'
 import {PortfolioNavigator} from './features/Portfolio/PortfolioNavigator'
 import {CatalystNavigator} from './features/RegisterCatalyst/CatalystNavigator'
+import {ReviewTxNavigator} from './features/ReviewTx/ReviewTxNavigator'
 import {SearchProvider} from './features/Search/SearchContext'
 import {SettingsScreenNavigator} from './features/Settings'
 import {NetworkTag} from './features/Settings/ChangeNetwork/NetworkTag'
@@ -260,6 +261,8 @@ export const WalletNavigator = () => {
 
           <Stack.Screen name="settings" options={{headerShown: false}} component={SettingsScreenNavigator} />
 
+          <Stack.Screen name="review-tx-routes" options={{headerShown: false}} component={ReviewTxNavigator} />
+
           <Stack.Screen
             name="voting-registration"
             options={{headerShown: false}}

apps/wallet-mobile/src/components/Icon/Direction.tsx

@@ -1,6 +1,6 @@
 import {ThemedPalette, useTheme} from '@yoroi/theme'
 import React from 'react'
-import {StyleSheet, View} from 'react-native'
+import {StyleSheet, View, ViewStyle} from 'react-native'
 
 import {TransactionDirection, TransactionInfo} from '../../yoroi-wallets/types/other'
 import {Received} from '../Icon/Received'
@@ -11,17 +11,18 @@ import {MultiParty} from './MultiParty'
 type Props = {
   transaction: TransactionInfo
   size?: number
+  containerStyle?: ViewStyle
 }
 
-export const Direction = ({transaction, size = defaultSize}: Props) => {
+export const Direction = ({transaction, size = defaultSize, containerStyle}: Props) => {
   const {color} = useTheme()
   const {direction} = transaction
 
   const iconStyles = styleMap(color)[direction]
   const IconComponent = iconMap[direction]
 
   return (
-    <View style={[styles.icon, {backgroundColor: iconStyles?.background}]}>
+    <View style={[styles.icon, {backgroundColor: iconStyles?.background}, containerStyle]}>
       <IconComponent color={iconStyles?.icon} size={iconStyles.size ?? size} />
     </View>
   )

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

@@ -5,14 +5,18 @@ import {StyleSheet, Text, View} from 'react-native'
 import {Icon} from '../Icon'
 import {Space} from '../Space/Space'
 
-type Props = {content: ReactNode; iconSize?: number}
+type Props = {
+  content: ReactNode
+  iconSize?: number
+  blue?: boolean
+}
 
-export const Warning = ({content, iconSize = 30}: Props) => {
+export const Warning = ({content, iconSize = 30, blue = false}: Props) => {
   const {styles, colors} = useStyles()
 
   return (
-    <View style={styles.notice}>
-      <Icon.Info size={iconSize} color={colors.yellow} />
+    <View style={[styles.notice, blue && styles.blueNotice]}>
+      <Icon.Info size={iconSize} color={blue ? colors.blue : colors.yellow} />
 
       <Space height="sm" />
 
@@ -29,6 +33,9 @@ const useStyles = () => {
       padding: 12,
       borderRadius: 8,
     },
+    blueNotice: {
+      backgroundColor: color.sys_cyan_100,
+    },
     text: {
       ...atoms.body_2_md_regular,
       color: color.gray_max,
@@ -37,6 +44,7 @@ const useStyles = () => {
 
   const colors = {
     yellow: color.sys_orange_500,
+    blue: color.primary_500,
   }
 
   return {colors, styles}

apps/wallet-mobile/src/features/Discover/useCases/ReviewTransaction/ReviewTransaction.tsx

@@ -447,7 +447,7 @@ const useConnectorPromptRootKey = () => {
   }, [promptRootKey])
 }
 
-const useSignTxWithHW = () => {
+export const useSignTxWithHW = () => {
   const {confirmHWConnection, closeModal} = useConfirmHWConnectionModal()
   const {wallet, meta} = useSelectedWallet()
 

apps/wallet-mobile/src/features/ReviewTx/ReviewTxNavigator.tsx

@@ -0,0 +1,36 @@
+import {createStackNavigator} from '@react-navigation/stack'
+import {Atoms, ThemedPalette, useTheme} from '@yoroi/theme'
+import React from 'react'
+
+import {Boundary} from '../../components/Boundary/Boundary'
+import {defaultStackNavigationOptions, ReviewTxRoutes} from '../../kernel/navigation'
+import {useStrings} from './common/hooks/useStrings'
+import {ReviewTxScreen} from './useCases/ReviewTxScreen/ReviewTxScreen'
+
+export const Stack = createStackNavigator<ReviewTxRoutes>()
+
+export const ReviewTxNavigator = () => {
+  const {atoms, color} = useTheme()
+  const strings = useStrings()
+
+  return (
+    <Stack.Navigator
+      screenOptions={{
+        ...screenOptions(atoms, color),
+      }}
+    >
+      <Stack.Screen name="review-tx" options={{title: strings.title}}>
+        {() => (
+          <Boundary>
+            <ReviewTxScreen />
+          </Boundary>
+        )}
+      </Stack.Screen>
+    </Stack.Navigator>
+  )
+}
+
+const screenOptions = (atoms: Atoms, color: ThemedPalette) => ({
+  ...defaultStackNavigationOptions(atoms, color),
+  gestureEnabled: true,
+})

apps/wallet-mobile/src/features/ReviewTx/common/Address.tsx

@@ -0,0 +1,74 @@
+import {useTheme} from '@yoroi/theme'
+import * as React from 'react'
+import {StyleSheet, Text, TextStyle, TouchableOpacity, View} from 'react-native'
+
+import {Icon} from '../../../components/Icon'
+import {Space} from '../../../components/Space/Space'
+import {useCopy} from '../../../hooks/useCopy'
+
+export const Address = ({
+  address,
+  index,
+  textStyle,
+  multiline = false,
+}: {
+  address: string
+  index?: number
+  textStyle?: TextStyle
+  multiline?: boolean
+}) => {
+  const {styles, colors} = useStyles()
+  const [, copy] = useCopy()
+
+  return (
+    <View style={styles.address}>
+      <Text
+        style={[styles.addressText, textStyle]}
+        numberOfLines={!multiline ? 1 : undefined}
+        ellipsizeMode={!multiline ? 'middle' : undefined}
+      >
+        {address}
+      </Text>
+
+      {index !== undefined && (
+        <>
+          <Space width="sm" />
+
+          <Text style={styles.index}>{`#${index}`}</Text>
+
+          <Space width="sm" />
+        </>
+      )}
+
+      <TouchableOpacity onPress={() => copy(address)} activeOpacity={0.5}>
+        <Icon.Copy size={24} color={colors.copy} />
+      </TouchableOpacity>
+    </View>
+  )
+}
+
+const useStyles = () => {
+  const {atoms, color} = useTheme()
+  const styles = StyleSheet.create({
+    address: {
+      ...atoms.flex_row,
+      ...atoms.flex_row,
+      ...atoms.justify_between,
+    },
+    addressText: {
+      ...atoms.flex_1,
+      ...atoms.body_2_md_regular,
+      color: color.gray_900,
+    },
+    index: {
+      ...atoms.body_2_md_medium,
+      color: color.text_gray_medium,
+    },
+  })
+
+  const colors = {
+    copy: color.gray_900,
+  }
+
+  return {styles, colors} as const
+}

apps/wallet-mobile/src/features/ReviewTx/common/CollapsibleSection.tsx

@@ -0,0 +1,71 @@
+import {useTheme} from '@yoroi/theme'
+import * as React from 'react'
+import {Animated, LayoutAnimation, StyleSheet, Text, TouchableOpacity, View} from 'react-native'
+
+import {Icon} from '../../../components/Icon'
+
+export const CollapsibleSection = ({label, children}: {label: string; children: React.ReactNode}) => {
+  const {styles, colors} = useStyles()
+  const [isOpen, setIsOpen] = React.useState(false)
+  const animatedHeight = React.useRef(new Animated.Value(0)).current
+
+  const toggleSection = () => {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
+    setIsOpen(!isOpen)
+    Animated.timing(animatedHeight, {
+      toValue: isOpen ? 0 : 1,
+      duration: 300,
+      useNativeDriver: false,
+    }).start()
+  }
+
+  return (
+    <>
+      <View style={styles.sectionHeader}>
+        <Text style={styles.sectionHeaderText}>{label}</Text>
+
+        <TouchableOpacity activeOpacity={0.5} onPress={toggleSection}>
+          <Icon.Chevron direction={isOpen ? 'up' : 'down'} size={28} color={colors.chevron} />
+        </TouchableOpacity>
+      </View>
+
+      <Animated.View
+        style={[
+          styles.childrenContainer,
+          {
+            maxHeight: animatedHeight.interpolate({
+              inputRange: [0, 1],
+              outputRange: [0, 1000],
+            }),
+            opacity: animatedHeight,
+          },
+        ]}
+      >
+        {children}
+      </Animated.View>
+    </>
+  )
+}
+
+const useStyles = () => {
+  const {atoms, color} = useTheme()
+  const styles = StyleSheet.create({
+    sectionHeader: {
+      ...atoms.flex_row,
+      ...atoms.justify_between,
+    },
+    sectionHeaderText: {
+      ...atoms.body_1_lg_medium,
+      color: color.gray_900,
+    },
+    childrenContainer: {
+      overflow: 'hidden',
+    },
+  })
+
+  const colors = {
+    chevron: color.gray_900,
+  }
+
+  return {styles, colors} as const
+}

apps/wallet-mobile/src/features/ReviewTx/common/Divider.tsx

@@ -0,0 +1,31 @@
+import {SpacingSize, useTheme} from '@yoroi/theme'
+import * as React from 'react'
+import {StyleSheet, View} from 'react-native'
+
+import {Space} from '../../../components/Space/Space'
+
+export const Divider = ({verticalSpace = 'none'}: {verticalSpace?: SpacingSize}) => {
+  const {styles} = useStyles()
+  return (
+    <>
+      <Space height={verticalSpace} />
+
+      <View style={styles.divider} />
+
+      <Space height={verticalSpace} />
+    </>
+  )
+}
+
+const useStyles = () => {
+  const {atoms, color} = useTheme()
+  const styles = StyleSheet.create({
+    divider: {
+      height: 1,
+      ...atoms.align_stretch,
+      backgroundColor: color.gray_200,
+    },
+  })
+
+  return {styles} as const
+}

apps/wallet-mobile/src/features/ReviewTx/common/TokenItem.tsx

@@ -0,0 +1,76 @@
+import {useTheme} from '@yoroi/theme'
+import * as React from 'react'
+import {StyleSheet, Text, View} from 'react-native'
+
+export const TokenItem = ({
+  isPrimaryToken = true,
+  isSent = true,
+  label,
+}: {
+  isPrimaryToken?: boolean
+  isSent?: boolean
+  label: string
+}) => {
+  const {styles} = useStyles()
+
+  if (!isSent)
+    return (
+      <View style={[styles.receivedTokenItem, !isPrimaryToken && styles.notPrimaryReceivedTokenItem]}>
+        <Text style={[styles.tokenReceivedItemText, !isPrimaryToken && styles.notPrimaryReceivedTokenItemText]}>
+          {label}
+        </Text>
+      </View>
+    )
+
+  return (
+    <View style={[styles.sentTokenItem, !isPrimaryToken && styles.notPrimarySentTokenItem]}>
+      <Text style={[styles.tokenSentItemText, !isPrimaryToken && styles.notPrimarySentTokenItemText]}>{label}</Text>
+    </View>
+  )
+}
+
+const useStyles = () => {
+  const {atoms, color} = useTheme()
+  const styles = StyleSheet.create({
+    sentTokenItem: {
+      ...atoms.flex,
+      ...atoms.flex_row,
+      ...atoms.align_center,
+      ...atoms.py_xs,
+      ...atoms.px_md,
+      borderRadius: 8,
+      backgroundColor: color.primary_500,
+    },
+    receivedTokenItem: {
+      ...atoms.flex,
+      ...atoms.flex_row,
+      ...atoms.align_center,
+      ...atoms.py_xs,
+      ...atoms.px_md,
+      borderRadius: 8,
+      backgroundColor: color.secondary_300,
+    },
+    tokenSentItemText: {
+      ...atoms.body_2_md_regular,
+      color: color.white_static,
+    },
+    tokenReceivedItemText: {
+      ...atoms.body_2_md_regular,
+      color: color.text_gray_max,
+    },
+    notPrimarySentTokenItem: {
+      backgroundColor: color.primary_100,
+    },
+    notPrimaryReceivedTokenItem: {
+      backgroundColor: color.secondary_100,
+    },
+    notPrimarySentTokenItemText: {
+      color: color.text_primary_medium,
+    },
+    notPrimaryReceivedTokenItemText: {
+      color: color.secondary_700,
+    },
+  })
+
+  return {styles} as const
+}