Merge branch 'develop' into collateral-tx-support

src/components/Common/MultiAsset/AssetList.js

@@ -1,18 +1,13 @@
 // @flow
 
 import React from 'react'
-import {type IntlShape, injectIntl} from 'react-intl'
+import {defineMessages, useIntl} from 'react-intl'
 import {FlatList, Text, TouchableOpacity, View} from 'react-native'
 
 import type {TokenEntry} from '../../../crypto/MultiToken'
 import globalMessages, {txLabels} from '../../../i18n/global-messages'
 import type {Token} from '../../../types/HistoryTransaction'
-import {
-  ASSET_DENOMINATION,
-  formatTokenAmount,
-  getAssetDenomination,
-  getAssetDenominationOrUnknown,
-} from '../../../utils/format'
+import {formatTokenAmount, getName, getTicker, getTokenFingerprint} from '../../../utils/format'
 import assetListSendStyle from './styles/AssetListSend.style'
 import assetListTransactionStyle from './styles/AssetListTransaction.style'
 import baseStyle from './styles/Base.style'
@@ -25,21 +20,23 @@ type AssetRowProps = {|
   assetMetadata: Token,
   backColor: {|backgroundColor: string|},
   onSelect?: (TokenEntry) => any,
-  intl: IntlShape,
 |}
-const AssetRow = ({styles, asset, assetMetadata, backColor, onSelect, intl}: AssetRowProps) => {
+const AssetRow = ({styles, asset, assetMetadata, backColor, onSelect}: AssetRowProps) => {
+  const intl = useIntl()
   const item = (
     <>
       <View style={styles.tokenMetaView}>
         <Text style={styles.assetName}>
           {assetMetadata.isDefault
-            ? getAssetDenominationOrUnknown(assetMetadata, ASSET_DENOMINATION.TICKER, intl)
-            : getAssetDenominationOrUnknown(assetMetadata, ASSET_DENOMINATION.NAME, intl)}
+            ? getTicker(assetMetadata) || intl.formatMessage(messages.unknownAssetName)
+            : getName(assetMetadata) || intl.formatMessage(messages.unknownAssetName)}
         </Text>
+
         <Text style={styles.assetMeta} ellipsizeMode="middle" numberOfLines={1}>
-          {assetMetadata.isDefault ? '' : getAssetDenomination(assetMetadata, ASSET_DENOMINATION.FINGERPRINT)}
+          {assetMetadata.isDefault ? '' : getTokenFingerprint(assetMetadata)}
         </Text>
       </View>
+
       <View style={styles.assetBalanceView}>
         <Text style={styles.assetBalance}>{formatTokenAmount(asset.amount, assetMetadata, 15)}</Text>
       </View>
@@ -62,10 +59,9 @@ type AssetListProps = {
   assetsMetadata: Dict<Token>,
   styles: NodeStyle,
   onSelect?: (TokenEntry) => any,
-  intl: IntlShape,
 }
-
-const AssetList = ({assets, assetsMetadata, styles, onSelect, intl}: AssetListProps) => {
+const AssetList = ({assets, assetsMetadata, styles, onSelect}: AssetListProps) => {
+  const intl = useIntl()
   const colors = [styles.rowColor1, styles.rowColor2]
 
   return (
@@ -74,23 +70,30 @@ const AssetList = ({assets, assetsMetadata, styles, onSelect, intl}: AssetListPr
         <Text style={styles.assetHeading}>{intl.formatMessage(globalMessages.assetsLabel)}</Text>
         <Text style={styles.assetHeading}>{intl.formatMessage(txLabels.amount)}</Text>
       </View>
+
       <View>
         <FlatList
-          data={assets}
-          keyExtractor={(item, index) => index.toString()}
+          data={assets.sort((a) => (assetsMetadata[a.identifier].isDefault ? -1 : 1))}
+          keyExtractor={(item) => item.identifier}
           renderItem={({item, index}) => (
             <AssetRow
               asset={item}
               assetMetadata={assetsMetadata[item.identifier]}
               styles={styles}
               backColor={colors[index % colors.length]}
               onSelect={onSelect}
-              intl={intl}
             />
           )}
         />
       </View>
     </View>
   )
 }
-export default injectIntl(AssetList)
+export default AssetList
+
+const messages = defineMessages({
+  unknownAssetName: {
+    id: 'utils.format.unknownAssetName',
+    defaultMessage: '!!![Unknown asset name]',
+  },
+})

src/components/Common/MultiAsset/AssetList.stories.js

@@ -0,0 +1,177 @@
+// @flow
+
+import {action} from '@storybook/addon-actions'
+import {storiesOf} from '@storybook/react-native'
+import {BigNumber} from 'bignumber.js'
+import React from 'react'
+
+import type {TokenEntry} from '../../../crypto/MultiToken'
+import {type Token} from '../../../types/HistoryTransaction'
+import AssetList from './AssetList'
+import sendStyle from './styles/AssetListSend.style'
+import baseStyle from './styles/Base.style'
+
+storiesOf('AssetList', module)
+  .add('baseStyle', () => (
+    <AssetList assets={assetTokens} assetsMetadata={assetTokenInfos} styles={baseStyle} onSelect={action('onSelect')} />
+  ))
+  .add('sendStyle', () => (
+    <AssetList assets={assetTokens} assetsMetadata={assetTokenInfos} styles={sendStyle} onSelect={action('onSelect')} />
+  ))
+
+const assetTokens: Array<TokenEntry> = [
+  {
+    networkId: 123,
+    identifier: 'policyId123assetName123',
+    amount: new BigNumber(12344.00234523),
+  },
+  {
+    networkId: 456,
+    identifier: 'policyId456assetName456',
+    amount: new BigNumber(10),
+  },
+  {
+    networkId: 789,
+    identifier: 'policyId789assetName789',
+    amount: new BigNumber(0.00001),
+  },
+  {
+    networkId: 111,
+    identifier: 'policyId111assetName111',
+    amount: new BigNumber(0.00001),
+  },
+  {
+    networkId: 222,
+    identifier: 'policyId222assetName222',
+    amount: new BigNumber(0.00001),
+  },
+  {
+    networkId: 333,
+    identifier: 'policyId333assetName333',
+    amount: new BigNumber(0.00001),
+  },
+  {
+    networkId: 444,
+    identifier: 'policyId444assetName444',
+    amount: new BigNumber(0.00001),
+  },
+  {
+    networkId: 555,
+    identifier: 'policyId555assetName555',
+    amount: new BigNumber(0.00001),
+  },
+]
+const assetTokenInfos: Dict<Token> = {
+  policyId123assetName123: {
+    networkId: 123,
+    isDefault: false,
+    identifier: 'policyId123assetName123',
+    metadata: {
+      assetName: 'assetName123',
+      longName: 'longName123',
+      maxSupply: 'maxSupply123',
+      numberOfDecimals: 10,
+      policyId: 'policyId1233',
+      ticker: 'ticker123',
+      type: 'Cardano',
+    },
+  },
+  policyId456assetName456: {
+    networkId: 456,
+    isDefault: true,
+    identifier: 'policyId456assetName456',
+    metadata: {
+      assetName: 'assetName456',
+      longName: 'longName456',
+      maxSupply: 'maxSupply456',
+      numberOfDecimals: 10,
+      policyId: 'policyId4566',
+      ticker: 'ticker456',
+      type: 'Cardano',
+    },
+  },
+  policyId789assetName789: {
+    networkId: 789,
+    isDefault: false,
+    identifier: 'policyId789assetName789',
+    metadata: {
+      assetName: 'assetName789',
+      longName: 'longName789',
+      maxSupply: 'maxSupply789',
+      numberOfDecimals: 10,
+      policyId: 'policyId7899',
+      ticker: 'ticker789',
+      type: 'Cardano',
+    },
+  },
+  policyId111assetName111: {
+    networkId: 111,
+    isDefault: false,
+    identifier: 'policyId111assetName111',
+    metadata: {
+      assetName: 'assetName111',
+      longName: 'longName111',
+      maxSupply: 'maxSupply111',
+      numberOfDecimals: 10,
+      policyId: 'policyId1119',
+      ticker: 'ticker111',
+      type: 'Cardano',
+    },
+  },
+  policyId222assetName222: {
+    networkId: 222,
+    isDefault: false,
+    identifier: 'policyId222assetName222',
+    metadata: {
+      assetName: 'assetName222',
+      longName: 'longName222',
+      maxSupply: 'maxSupply222',
+      numberOfDecimals: 10,
+      policyId: 'policyId2229',
+      ticker: 'ticker222',
+      type: 'Cardano',
+    },
+  },
+  policyId333assetName333: {
+    networkId: 333,
+    isDefault: false,
+    identifier: 'policyId333assetName333',
+    metadata: {
+      assetName: 'assetName333',
+      longName: 'longName333',
+      maxSupply: 'maxSupply333',
+      numberOfDecimals: 10,
+      policyId: 'policyId3339',
+      ticker: 'ticker333',
+      type: 'Cardano',
+    },
+  },
+  policyId444assetName444: {
+    networkId: 444,
+    isDefault: false,
+    identifier: 'policyId444assetName444',
+    metadata: {
+      assetName: 'assetName444',
+      longName: 'longName444',
+      maxSupply: 'maxSupply444',
+      numberOfDecimals: 10,
+      policyId: 'policyId4449',
+      ticker: 'ticker444',
+      type: 'Cardano',
+    },
+  },
+  policyId555assetName555: {
+    networkId: 555,
+    isDefault: false,
+    identifier: 'policyId555assetName555',
+    metadata: {
+      assetName: 'assetName555',
+      longName: 'longName555',
+      maxSupply: 'maxSupply555',
+      numberOfDecimals: 10,
+      policyId: 'policyId5559',
+      ticker: 'ticker555',
+      type: 'Cardano',
+    },
+  },
+}

src/components/Send/AmountField.js

@@ -3,7 +3,7 @@
 import React from 'react'
 import {defineMessages, useIntl} from 'react-intl'
 
-import {ValidatedTextInput} from '../UiKit'
+import {TextInput} from '../UiKit'
 import {editedFormatter, pastedFormatter} from './amountUtils'
 
 export const messages = defineMessages({
@@ -34,13 +34,13 @@ const AmountField = ({amount, error, editable, setAmount}: Props) => {
   }
 
   return (
-    <ValidatedTextInput
+    <TextInput
       returnKeyType="done"
       keyboardType="numeric"
       label={intl.formatMessage(messages.label)}
       value={amount}
       onChangeText={handleSetAmount}
-      error={error}
+      errorText={error || undefined}
       editable={editable != null ? editable : true}
     />
   )