Merge branch 'develop' into notifications

apps/wallet-mobile/src/WalletNavigator.tsx

@@ -24,6 +24,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'
@@ -258,6 +259,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}}
@@ -296,7 +299,7 @@ const useStyles = () => {
     divider: color.gray_200,
   }
 
-  return {colors, styles}
+  return {colors, styles} as const
 }
 
 const messages = defineMessages({

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/Info/Info.tsx

@@ -0,0 +1,47 @@
+import {useTheme} from '@yoroi/theme'
+import React, {ReactNode} from 'react'
+import {StyleSheet, Text, View} from 'react-native'
+
+import {Icon} from '../Icon'
+import {Space} from '../Space/Space'
+
+type Props = {
+  content: ReactNode
+  iconSize?: number
+}
+
+export const Info = ({content, iconSize = 30}: Props) => {
+  const {styles, colors} = useStyles()
+
+  return (
+    <View style={styles.notice}>
+      <Icon.Info size={iconSize} color={colors.blue} />
+
+      <Space height="sm" />
+
+      <Text style={styles.text}>{content}</Text>
+    </View>
+  )
+}
+
+const useStyles = () => {
+  const {color, atoms} = useTheme()
+  const styles = StyleSheet.create({
+    notice: {
+      backgroundColor: color.sys_cyan_100,
+      ...atoms.p_md,
+      ...atoms.rounded_sm,
+    },
+    text: {
+      ...atoms.body_2_md_regular,
+      color: color.text_gray_max,
+    },
+  })
+
+  const colors = {
+    yellow: color.sys_orange_500,
+    blue: color.primary_500,
+  }
+
+  return {colors, styles} as const
+}

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

@@ -5,7 +5,10 @@ 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
+}
 
 export const Warning = ({content, iconSize = 30}: Props) => {
   const {styles, colors} = useStyles()
@@ -26,8 +29,8 @@ const useStyles = () => {
   const styles = StyleSheet.create({
     notice: {
       backgroundColor: color.sys_yellow_100,
-      padding: 12,
-      borderRadius: 8,
+      ...atoms.p_md,
+      ...atoms.rounded_sm,
     },
     text: {
       ...atoms.body_2_md_regular,
@@ -39,5 +42,5 @@ const useStyles = () => {
     yellow: color.sys_orange_500,
   }
 
-  return {colors, styles}
+  return {colors, styles} as const
 }

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,73 @@
+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.justify_between,
+    },
+    addressText: {
+      ...atoms.flex_1,
+      ...atoms.body_2_md_regular,
+      color: color.text_gray_medium,
+    },
+    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.text_gray_medium,
+    },
+    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
+}