Merge branch 'develop' into yomo-1938

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

@@ -15,6 +15,7 @@ import {ErrorBoundary} from './components/ErrorBoundary/ErrorBoundary'
 import {AuthProvider} from './features/Auth/AuthProvider'
 import {BrowserProvider} from './features/Discover/common/BrowserProvider'
 import {PortfolioTokenActivityProvider} from './features/Portfolio/common/PortfolioTokenActivityProvider'
+import {ReviewTxProvider} from './features/ReviewTx/common/ReviewTxProvider'
 import {CurrencyProvider} from './features/Settings/Currency/CurrencyContext'
 import {AutomaticWalletOpenerProvider} from './features/WalletManager/context/AutomaticWalletOpeningProvider'
 import {WalletManagerProvider} from './features/WalletManager/context/WalletManagerProvider'
@@ -65,7 +66,9 @@ const Yoroi = () => {
                                 <PoolTransitionProvider>
                                   <BrowserProvider>
                                     <AutomaticWalletOpenerProvider>
-                                      <InitApp />
+                                      <ReviewTxProvider>
+                                        <InitApp />
+                                      </ReviewTxProvider>
                                     </AutomaticWalletOpenerProvider>
                                   </BrowserProvider>
                                 </PoolTransitionProvider>

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'
@@ -9,15 +9,19 @@ import {Transaction} from '../Icon/Transaction'
 import {MultiParty} from './MultiParty'
 import {IconProps} from './type'
 
-export const Direction = ({transaction, size = defaultSize}: IconProps & {transaction: TransactionInfo}) => {
+export const Direction = ({
+  transaction,
+  size = defaultSize,
+  containerStyle,
+}: IconProps & {transaction: TransactionInfo; containerStyle?: ViewStyle}) => {
   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/features/Portfolio/common/MediaPreview/MediaPreview.tsx → apps/wallet-mobile/src/components/MediaPreview/MediaPreview.tsx

@@ -5,9 +5,9 @@ import React from 'react'
 import {ImageStyle, StyleSheet, View} from 'react-native'
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder'
 
-import placeholderLight from '../../../../assets/img/nft-placeholder.png'
-import placeholderDark from '../../../../assets/img/nft-placeholder-dark.png'
-import {useSelectedWallet} from '../../../WalletManager/common/hooks/useSelectedWallet'
+import placeholderLight from '../../assets/img/nft-placeholder.png'
+import placeholderDark from '../../assets/img/nft-placeholder-dark.png'
+import {useSelectedWallet} from '../../features/WalletManager/common/hooks/useSelectedWallet'
 
 type MediaPreviewProps = {
   info: Portfolio.Token.Info

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

@@ -0,0 +1,26 @@
+import {action} from '@storybook/addon-actions'
+import {storiesOf} from '@storybook/react-native'
+import * as React from 'react'
+import {View} from 'react-native'
+
+import {SimpleTab} from './SimpleTab'
+
+storiesOf('SimpleTab', module)
+  .add('Active', () => <Active />)
+  .add('Inactive', () => <Inactive />)
+
+const Active = () => {
+  return (
+    <View style={{flexDirection: 'row'}}>
+      <SimpleTab name="Active" isActive={true} onPress={action('onPress')} />
+    </View>
+  )
+}
+
+const Inactive = () => {
+  return (
+    <View style={{flexDirection: 'row'}}>
+      <SimpleTab name="Inactive" isActive={false} onPress={action('onPress')} />
+    </View>
+  )
+}

apps/wallet-mobile/src/features/Discover/useCases/SelectDappFromList/DAppExplorerTabItem/DAppExplorerTabItem.tsx → apps/wallet-mobile/src/components/SimpleTab/SimpleTab.tsx

@@ -8,7 +8,7 @@ type Props = {
   onPress: () => void
 }
 
-export const DAppExplorerTabItem = ({name, onPress, isActive}: Props) => {
+export const SimpleTab = ({name, onPress, isActive}: Props) => {
   const {styles} = useStyles()
   return (
     <TouchableOpacity onPress={onPress} style={[styles.container, isActive && styles.containerActive]}>
@@ -34,5 +34,5 @@ const useStyles = () => {
     },
   })
 
-  return {styles}
+  return {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/Discover/useCases/SelectDappFromList/SelectDappFromListScreen.tsx

@@ -3,6 +3,7 @@ import {useTheme} from '@yoroi/theme'
 import * as React from 'react'
 import {FlatList, StyleSheet, View} from 'react-native'
 
+import {SimpleTab} from '../../../../components/SimpleTab/SimpleTab'
 import {Spacer} from '../../../../components/Spacer/Spacer'
 import {useMetrics} from '../../../../kernel/metrics/metricsManager'
 import {useSearch, useSearchOnNavBar} from '../../../Search/SearchContext'
@@ -13,7 +14,6 @@ import {useDAppsConnected} from '../../common/useDAppsConnected'
 import {useStrings} from '../../common/useStrings'
 import {CountDAppsAvailable} from './CountDAppsAvailable/CountDAppsAvailable'
 import {CountDAppsConnected} from './CountDAppsConnected/CountDAppsConnected'
-import {DAppExplorerTabItem} from './DAppExplorerTabItem/DAppExplorerTabItem'
 import {DAppListItem} from './DAppListItem/DAppListItem'
 import {DAppTypes} from './DAppTypes/DAppTypes'
 import {WelcomeDAppModal} from './WelcomeDAppModal'
@@ -153,13 +153,13 @@ const HeaderControl = ({
     <>
       {hasConnectedDapps && (
         <View style={styles.tabsContainer}>
-          <DAppExplorerTabItem
+          <SimpleTab
             name={strings.connected}
             isActive={currentTab === DAppTabs.connected}
             onPress={() => onTabChange(DAppTabs.connected)}
           />
 
-          <DAppExplorerTabItem
+          <SimpleTab
             name={strings.recommended}
             isActive={currentTab === DAppTabs.recommended}
             onPress={() => onTabChange(DAppTabs.recommended)}

apps/wallet-mobile/src/features/Portfolio/common/MediaDetailsScreen/MediaDetailsScreen.tsx

@@ -20,6 +20,7 @@ import {Boundary} from '../../../../components/Boundary/Boundary'
 import {CopyButton} from '../../../../components/CopyButton'
 import {FadeIn} from '../../../../components/FadeIn'
 import {Hr} from '../../../../components/Hr/Hr'
+import {MediaPreview} from '../../../../components/MediaPreview/MediaPreview'
 import {Spacer} from '../../../../components/Spacer/Spacer'
 import {Tab, TabPanel, TabPanels, Tabs} from '../../../../components/Tabs/Tabs'
 import {Text} from '../../../../components/Text'
@@ -28,7 +29,6 @@ import {useMetrics} from '../../../../kernel/metrics/metricsManager'
 import {NftRoutes} from '../../../../kernel/navigation'
 import {useSelectedWallet} from '../../../WalletManager/common/hooks/useSelectedWallet'
 import {usePortfolioImageInvalidate} from '../hooks/usePortfolioImage'
-import {MediaPreview} from '../MediaPreview/MediaPreview'
 import {useNavigateTo} from '../navigation'
 
 export const MediaDetailsScreen = () => {

apps/wallet-mobile/src/features/Portfolio/common/MediaGallery/MediaGallery.tsx

@@ -4,8 +4,8 @@ import {Balance, Portfolio} from '@yoroi/types'
 import * as React from 'react'
 import {StyleSheet, Text, TouchableOpacity, useWindowDimensions, View} from 'react-native'
 
+import {MediaPreview} from '../../../../components/MediaPreview/MediaPreview'
 import {Spacer} from '../../../../components/Spacer/Spacer'
-import {MediaPreview} from '../MediaPreview/MediaPreview'
 
 type Props = {
   amounts: ReadonlyArray<Portfolio.Token.Amount>

apps/wallet-mobile/src/features/Portfolio/useCases/PortfolioDashboard/DashboardNFTsList/DashboardNFTsList.tsx

@@ -5,12 +5,12 @@ import {FlatList, Image, StyleSheet, Text, TouchableOpacity, useWindowDimensions
 import placeholderLight from '../../../../../assets/img/nft-placeholder.png'
 import placeholderDark from '../../../../../assets/img/nft-placeholder-dark.png'
 import {Icon} from '../../../../../components/Icon'
+import {MediaPreview} from '../../../../../components/MediaPreview/MediaPreview'
 import {Spacer} from '../../../../../components/Spacer/Spacer'
 import {useSelectedWallet} from '../../../../WalletManager/common/hooks/useSelectedWallet'
 import {useNavigateTo} from '../../../common/hooks/useNavigateTo'
 import {usePortfolioBalances} from '../../../common/hooks/usePortfolioBalances'
 import {useStrings} from '../../../common/hooks/useStrings'
-import {MediaPreview} from '../../../common/MediaPreview/MediaPreview'
 
 export const DashboardNFTsList = () => {
   const {styles, cardItemWidth} = useStyles()

apps/wallet-mobile/src/features/Portfolio/useCases/PortfolioTokensList/PortfolioWalletTokenList/ListMediaGalleryScreen/ZoomMediaImageScreen.tsx

@@ -6,11 +6,11 @@ import {StyleSheet, useWindowDimensions, View} from 'react-native'
 import ViewTransformer from 'react-native-easy-view-transformer'
 
 import {FadeIn} from '../../../../../../components/FadeIn'
+import {MediaPreview} from '../../../../../../components/MediaPreview/MediaPreview'
 import {useMetrics} from '../../../../../../kernel/metrics/metricsManager'
 import {NftRoutes, useParams} from '../../../../../../kernel/navigation'
 import {isEmptyString} from '../../../../../../kernel/utils'
 import {useSelectedWallet} from '../../../../../WalletManager/common/hooks/useSelectedWallet'
-import {MediaPreview} from '../../../../common/MediaPreview/MediaPreview'
 
 type Params = NftRoutes['nft-details']
 

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,
+})