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

apps/wallet-mobile/src/YoroiApp.tsx

@@ -2,6 +2,7 @@ import {AsyncStorageProvider} from '@yoroi/common'
 import {LinksProvider} from '@yoroi/links'
 import {SetupWalletProvider} from '@yoroi/setup-wallet'
 import {ThemeProvider} from '@yoroi/theme'
+import {TransferProvider} from '@yoroi/transfer'
 import React from 'react'
 import {LogBox, StyleSheet} from 'react-native'
 import * as RNP from 'react-native-paper'
@@ -14,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'
@@ -58,17 +60,21 @@ const Yoroi = () => {
                     <LoadingBoundary style={StyleSheet.absoluteFill}>
                       <LanguageProvider>
                         <AuthProvider>
-                          <LinksProvider>
-                            <SetupWalletProvider>
-                              <PoolTransitionProvider>
-                                <BrowserProvider>
-                                  <AutomaticWalletOpenerProvider>
-                                    <InitApp />
-                                  </AutomaticWalletOpenerProvider>
-                                </BrowserProvider>
-                              </PoolTransitionProvider>
-                            </SetupWalletProvider>
-                          </LinksProvider>
+                          <TransferProvider>
+                            <LinksProvider>
+                              <SetupWalletProvider>
+                                <PoolTransitionProvider>
+                                  <BrowserProvider>
+                                    <AutomaticWalletOpenerProvider>
+                                      <ReviewTxProvider>
+                                        <InitApp />
+                                      </ReviewTxProvider>
+                                    </AutomaticWalletOpenerProvider>
+                                  </BrowserProvider>
+                                </PoolTransitionProvider>
+                              </SetupWalletProvider>
+                            </LinksProvider>
+                          </TransferProvider>
                         </AuthProvider>
                       </LanguageProvider>
                     </LoadingBoundary>

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/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/common/CollapsibleSection.tsx → apps/wallet-mobile/src/features/ReviewTx/common/Accordion.tsx

@@ -4,7 +4,7 @@ import {Animated, LayoutAnimation, StyleSheet, Text, TouchableOpacity, View} fro
 
 import {Icon} from '../../../components/Icon'
 
-export const CollapsibleSection = ({label, children}: {label: string; children: React.ReactNode}) => {
+export const Accordion = ({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
@@ -20,14 +20,12 @@ export const CollapsibleSection = ({label, children}: {label: string; children:
   }
 
   return (
-    <>
-      <View style={styles.sectionHeader}>
+    <View>
+      <TouchableOpacity activeOpacity={0.5} onPress={toggleSection} 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>
+        <Icon.Chevron direction={isOpen ? 'up' : 'down'} size={28} color={colors.chevron} />
+      </TouchableOpacity>
 
       <Animated.View
         style={[
@@ -43,7 +41,7 @@ export const CollapsibleSection = ({label, children}: {label: string; children:
       >
         {children}
       </Animated.View>
-    </>
+    </View>
   )
 }
 

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

@@ -1,46 +1,51 @@
 import {useTheme} from '@yoroi/theme'
 import * as React from 'react'
-import {StyleSheet, Text, TextStyle, TouchableOpacity, View} from 'react-native'
+import {StyleSheet, Text, TextProps, 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,
+export const CopiableText = ({
+  text,
   index,
   textStyle,
   multiline = false,
+  addressProps,
 }: {
-  address: string
+  text: string
   index?: number
   textStyle?: TextStyle
   multiline?: boolean
+  addressProps?: TextProps
 }) => {
   const {styles, colors} = useStyles()
   const [, copy] = useCopy()
 
   return (
-    <View style={styles.address}>
+    <View style={styles.text}>
       <Text
         style={[styles.addressText, textStyle]}
         numberOfLines={!multiline ? 1 : undefined}
         ellipsizeMode={!multiline ? 'middle' : undefined}
+        {...addressProps}
       >
-        {address}
+        {text}
       </Text>
 
-      {index !== undefined && (
+      {index !== undefined ? (
         <>
           <Space width="sm" />
 
           <Text style={styles.index}>{`#${index}`}</Text>
 
           <Space width="sm" />
         </>
+      ) : (
+        <Space width="xs" />
       )}
 
-      <TouchableOpacity onPress={() => copy(address)} activeOpacity={0.5}>
+      <TouchableOpacity onPress={() => copy(text)} activeOpacity={0.5}>
         <Icon.Copy size={24} color={colors.copy} />
       </TouchableOpacity>
     </View>
@@ -50,7 +55,7 @@ export const Address = ({
 const useStyles = () => {
   const {atoms, color} = useTheme()
   const styles = StyleSheet.create({
-    address: {
+    text: {
       ...atoms.flex_row,
       ...atoms.justify_between,
     },