Merge branch 'develop' into wallet-sync

src/Send/AssetSelectorScreen/AssetSelectorScreen.tsx

@@ -1,22 +1,17 @@
 import {useNavigation} from '@react-navigation/native'
-import BigNumber from 'bignumber.js'
 import React from 'react'
 import {defineMessages, useIntl} from 'react-intl'
 import {FlatList, LayoutAnimation, TouchableOpacity, View} from 'react-native'
-import {Avatar} from 'react-native-paper'
 import {SafeAreaView} from 'react-native-safe-area-context'
 
-import AdaImage from '../../assets/img/asset_ada.png'
-import NoImage from '../../assets/img/asset_no_image.png'
 import {Boundary, Button, Spacer, Text, TextInput} from '../../components'
-import {useBalance, useBalances, useTokenInfos} from '../../hooks'
+import {AssetItem, AssetItemProps} from '../../components/AssetItem'
+import {useBalances, useTokenInfos} from '../../hooks'
 import globalMessages, {txLabels} from '../../i18n/global-messages'
-import {formatTokenAmount} from '../../legacy/format'
 import {TxHistoryRouteNavigation} from '../../navigation'
 import {useSelectedWallet} from '../../SelectedWallet'
 import {COLORS} from '../../theme'
 import {sortTokenInfos} from '../../utils'
-import {toToken, YoroiWallet} from '../../yoroi-wallets'
 import {TokenInfo} from '../../yoroi-wallets/types'
 import {Amounts} from '../../yoroi-wallets/utils'
 import {useSend} from '../Context/SendContext'
@@ -32,6 +27,7 @@ export const AssetSelectorScreen = () => {
     wallet,
     tokenIds: Amounts.toArray(balances).map(({tokenId}) => tokenId),
   })
+  const assets = sortTokenInfos({wallet, tokenInfos}).filter((tokenInfo) => matches(tokenInfo, matcher))
 
   const onChangeMatcher = (matcher: string) => {
     LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
@@ -55,17 +51,16 @@ export const AssetSelectorScreen = () => {
       </View>
 
       <FlatList
-        data={sortTokenInfos({wallet, tokenInfos})}
+        data={assets}
         renderItem={({item: tokenInfo}: {item: TokenInfo}) => (
           <Boundary>
-            <AssetSelectorItem
-              wallet={wallet}
+            <SelectableAssetItem
               tokenInfo={tokenInfo}
               onSelect={() => {
                 tokenSelected(tokenInfo.id)
                 navigation.navigate('send')
               }}
-              matcher={matcher}
+              balance={balances[tokenInfo.id]}
             />
           </Boundary>
         )}
@@ -90,61 +85,19 @@ export const AssetSelectorScreen = () => {
   )
 }
 
-type AssetSelectorItemProps = {
-  wallet: YoroiWallet
-  tokenInfo: TokenInfo
-  onSelect: () => void
-  matcher: string
+type SelectableAssetItemProps = AssetItemProps & {
+  onSelect(): void
 }
-
-const AssetSelectorItem = ({wallet, tokenInfo, onSelect, matcher}: AssetSelectorItemProps) => {
-  const quantity = useBalance({wallet, tokenId: tokenInfo.id})
-  const isPrimary = tokenInfo.id === wallet.primaryTokenInfo.id
-
-  // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
-  if (!matches(tokenInfo, matcher)) return null
-
+const SelectableAssetItem = ({tokenInfo, balance, onSelect}: SelectableAssetItemProps) => {
   return (
     <TouchableOpacity style={{paddingVertical: 16}} onPress={onSelect} testID="assetSelectorItem">
-      <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
-        <View style={{padding: 4}}>
-          <Icon source={isPrimary ? AdaImage : NoImage} />
-        </View>
-
-        <View style={{flex: 1, padding: 4}}>
-          <Text numberOfLines={1} ellipsizeMode="middle" style={{color: COLORS.BLUE_LIGHTER}} testID="tokenInfoText">
-            {tokenInfo.ticker ?? tokenInfo.name ?? '-'}
-          </Text>
-
-          <Text
-            numberOfLines={1}
-            ellipsizeMode="middle"
-            style={{color: COLORS.TEXT_INPUT}}
-            testID="tokenFingerprintText"
-          >
-            {isPrimary ? '' : tokenInfo.fingerprint}
-          </Text>
-        </View>
-
-        <View style={{flex: 1, alignItems: 'flex-end', padding: 4}} testID="tokenAmountText">
-          <Text style={{color: COLORS.DARK_TEXT}}>
-            {formatTokenAmount(new BigNumber(quantity), toToken({wallet, tokenInfo}))}
-          </Text>
-        </View>
-      </View>
+      <AssetItem tokenInfo={tokenInfo} balance={balance} />
     </TouchableOpacity>
   )
 }
 
 const HR = (props) => <View {...props} style={{height: 1, backgroundColor: COLORS.GRAY}} />
 
-const Icon = (props) => (
-  <Avatar.Image
-    {...props}
-    size={32}
-    style={{alignItems: 'center', justifyContent: 'center', backgroundColor: 'transparent'}}
-  />
-)
 const Actions = (props) => <View {...props} style={{padding: 16}} />
 
 const SearchInput = (props) => {

src/TxHistory/AssetList/AssetList.tsx

@@ -1,18 +1,18 @@
 import React from 'react'
 import {defineMessages} from 'react-intl'
 import {useIntl} from 'react-intl'
-import {Alert, FlatList, FlatListProps, StyleSheet, View} from 'react-native'
+import {Alert, FlatList, FlatListProps, Linking, StyleSheet, TouchableOpacity, View} from 'react-native'
 
-import {Boundary} from '../../components'
+import {AssetItem, AssetItemProps} from '../../components/AssetItem'
 import {Spacer} from '../../components/Spacer'
 import {useBalances, useTokenInfos} from '../../hooks'
 import globalMessages, {actionMessages} from '../../i18n/global-messages'
+import {getNetworkConfigById} from '../../legacy/networks'
 import {useSelectedWallet} from '../../SelectedWallet'
 import {sortTokenInfos} from '../../utils'
 import {TokenInfo} from '../../yoroi-wallets/types'
 import {Amounts} from '../../yoroi-wallets/utils'
 import {ActionsBanner} from './ActionsBanner'
-import {AssetItem} from './AssetItem'
 
 type ListProps = FlatListProps<TokenInfo>
 type Props = Partial<ListProps> & {
@@ -29,6 +29,8 @@ export const AssetList = (props: Props) => {
   const handleOnPressTokens = () => Alert.alert(strings.soon, strings.soon)
   const handleSearch = () => Alert.alert(strings.soon, strings.soon)
 
+  const config = getNetworkConfigById(wallet.networkId)
+
   const tokenInfos = useTokenInfos({
     wallet,
     tokenIds: Amounts.toArray(balances).map(({tokenId}) => tokenId),
@@ -48,9 +50,11 @@ export const AssetList = (props: Props) => {
         {...props}
         data={sortTokenInfos({wallet, tokenInfos})}
         renderItem={({item: tokenInfo}) => (
-          <Boundary loading={{size: 'small'}} error={{size: 'inline'}}>
-            <AssetItem tokenInfo={tokenInfo} />
-          </Boundary>
+          <ExplorableAssetItem
+            tokenInfo={tokenInfo}
+            balance={balances[tokenInfo.id]}
+            onPress={() => Linking.openURL(config.EXPLORER_URL_FOR_TOKEN(tokenInfo.id))}
+          />
         )}
         ItemSeparatorComponent={() => <Spacer height={16} />}
         contentContainerStyle={{paddingTop: 16, paddingHorizontal: 16, paddingBottom: 8}}
@@ -60,8 +64,30 @@ export const AssetList = (props: Props) => {
   )
 }
 
+type ExplorableAssetItemProps = AssetItemProps & {
+  onPress(): void
+}
+const ExplorableAssetItem = ({tokenInfo, balance, onPress}: ExplorableAssetItemProps) => {
+  return (
+    <TouchableOpacity style={styles.button} onPress={onPress} testID="assetSelectorItem">
+      <AssetItem tokenInfo={tokenInfo} balance={balance} />
+    </TouchableOpacity>
+  )
+}
+
 const styles = StyleSheet.create({
   assetList: {flex: 1},
+  button: {
+    backgroundColor: '#fff',
+    shadowColor: '#181a1e',
+    borderRadius: 8,
+    elevation: 2,
+    shadowOffset: {width: 0, height: -2},
+    shadowRadius: 10,
+    shadowOpacity: 0.08,
+    paddingHorizontal: 12,
+    paddingVertical: 12,
+  },
 })
 
 const messages = defineMessages({

src/components/AssetItem/AssetItem.stories.tsx

@@ -0,0 +1,40 @@
+import {storiesOf} from '@storybook/react-native'
+import React from 'react'
+import {Text, View} from 'react-native'
+
+import {mocks, QueryProvider} from '../../../storybook'
+import {SelectedWalletProvider} from '../../SelectedWallet'
+import {Spacer} from '..'
+import {AssetItem} from './AssetItem'
+
+const primaryTokenInfo = mocks.wallet.primaryTokenInfo
+const primaryBalance = mocks.balances[primaryTokenInfo.id]
+
+const tokenInfo = mocks.tokenInfos['698a6ea0ca99f315034072af31eaac6ec11fe8558d3f48e9775aab9d.7444524950']
+const tokenBalance = mocks.balances['698a6ea0ca99f315034072af31eaac6ec11fe8558d3f48e9775aab9d.7444524950']
+
+storiesOf('Components/AssetItem', module).add('Gallery', () => (
+  <QueryProvider>
+    <SelectedWalletProvider wallet={mocks.wallet}>
+      <View style={{flex: 1, justifyContent: 'center', padding: 16}}>
+        <Text>Fungible primary token</Text>
+
+        <AssetItem
+          tokenInfo={primaryTokenInfo}
+          balance={primaryBalance}
+          style={{backgroundColor: 'white', padding: 16, borderRadius: 8}}
+        />
+
+        <Spacer height={40} />
+
+        <Text>Fungible non-primary token</Text>
+
+        <AssetItem
+          tokenInfo={tokenInfo}
+          balance={tokenBalance}
+          style={{backgroundColor: 'white', padding: 16, borderRadius: 8}}
+        />
+      </View>
+    </SelectedWalletProvider>
+  </QueryProvider>
+))