feature(wallet-mobile): token details dialog for new tx review (#3672)

Author: banklesss

apps/wallet-mobile/.storybook/storybook.requires.js

@@ -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/features/Portfolio/common/MediaPreview/MediaPreview.tsx apps/wallet-mobile/src/components/MediaPreview/MediaPreview.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/components/SimpleTab/SimpleTab.stories.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/DAppExplorerTabItem/DAppExplorerTabItem.tsx apps/wallet-mobile/src/components/SimpleTab/SimpleTab.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/Discover/useCases/SelectDappFromList/DAppExplorerTabItem/DAppExplorerTabItem.stories.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/Discover/useCases/SelectDappFromList/SelectDappFromListScreen.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/common/MediaDetailsScreen/MediaDetailsScreen.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/common/MediaGallery/MediaGallery.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/Portfolio/useCases/PortfolioDashboard/DashboardNFTsList/DashboardNFTsList.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/Portfolio/useCases/PortfolioTokensList/PortfolioWalletTokenList/ListMediaGalleryScreen/ZoomMediaImageScreen.tsx

@@ -0,0 +1,37 @@
+import {useTheme} from '@yoroi/theme'
+import * as React from 'react'
+import {StyleSheet, TouchableOpacity, View} from 'react-native'
+
+import {Icon} from '../../../components/Icon'
+import {useCopy} from '../../../hooks/useCopy'
+
+export const CopiableText = ({children, textToCopy}: {children: React.ReactNode; textToCopy: string}) => {
+  const {styles, colors} = useStyles()
+  const [, copy] = useCopy()
+
+  return (
+    <View style={styles.text}>
+      {children}
+
+      <TouchableOpacity onPress={() => copy(textToCopy)} activeOpacity={0.5}>
+        <Icon.Copy size={24} color={colors.copy} />
+      </TouchableOpacity>
+    </View>
+  )
+}
+
+const useStyles = () => {
+  const {atoms, color} = useTheme()
+  const styles = StyleSheet.create({
+    text: {
+      ...atoms.flex_row,
+      ...atoms.justify_between,
+    },
+  })
+
+  const colors = {
+    copy: color.gray_900,
+  }
+
+  return {styles, colors} as const
+}