[wip] Tx stories v2

legacy/config/config.d.ts

@@ -1,6 +1,7 @@
 // @flow
 
 export var isHaskellShelley: (walletImplementationId: number) => boolean
+export var isByron: (walletImplementationId: number) => boolean
 
 // prettier-ignore
 export var CONFIG: {

legacy/selectors.d.ts

@@ -1,5 +1,6 @@
 // @flow
 
+import {Token, TransactionInfo} from '../src/components/TxHistory/types'
 import type {State, WalletMeta} from './state'
 
 export var walletMetaSelector: (state: State) => WalletMeta
@@ -10,3 +11,15 @@ export var isAuthenticatedSelector: (state: State) => boolean
 export var isAppSetupCompleteSelector: (state: State) => boolean
 export var installationIdSelector: (state: State) => boolean
 export var isMaintenanceSelector: (state: State) => boolean
+export var isOnlineSelector: (state: State) => boolean
+export var isSynchronizingHistorySelector: (state: State) => boolean
+export var lastHistorySyncErrorSelector: (state: State) => boolean
+export var transactionsInfoSelector: (state: State) => Record<string, TransactionInfo>
+export var walletIsInitializedSelector: (state: State) => boolean
+export var availableAssetsSelector: (state: State) => Record<string, Token>
+
+interface PartialMultiToken {
+  getDefaultId: () => string,
+  getDefault: () => Token
+}
+export var tokenBalanceSelector: (state: State) => PartialMultiToken

src/components/TxHistory/TxHistory.stories.tsx

@@ -7,7 +7,7 @@ import {COLORS} from '../../../legacy/styles/config'
 import {MockAppStateWrapper, mockV2NavigatorOptions} from '../../../legacy/utils/mocks'
 import TxHistoryScreen from './TxHistory'
 
-storiesOf('@Revamp/TxHistory', module).add('Default', () => {
+storiesOf('V2/TxHistory', module).add('No transactions', () => {
   const Stack = createStackNavigator()
   const walletName = 'Wallet-1'
   return (

src/components/TxHistory/TxHistory.tsx

@@ -101,7 +101,6 @@ const TxHistory = () => {
                     <TxHistoryList
                       refreshing={isSyncing}
                       onRefresh={() => dispatch(updateHistory())}
-                      navigation={navigation}
                       transactions={transactionsInfo}
                     />
                   )}

src/components/TxHistory/TxHistoryList.tsx

@@ -14,7 +14,7 @@ import features from '../../features'
 import {TransactionInfo} from './types'
 
 type Props = {
-  transactions: Dict<TransactionInfo>
+  transactions: Record<string, TransactionInfo>
   refreshing: boolean
   onRefresh: () => void
 }
@@ -82,12 +82,12 @@ const DayHeader = ({ts}: DayHeaderProps) => {
   )
 }
 
-const getTransactionsByDate = (transactions: Dict<TransactionInfo>) =>
+const getTransactionsByDate = (transactions: Record<string, TransactionInfo>) =>
   _(transactions)
     .filter((t) => t.submittedAt != null)
     .sortBy((t) => t.submittedAt)
     .reverse()
-    .groupBy((t) => t.submittedAt.substring(0, '2001-01-01'.length))
+    .groupBy((t) => t.submittedAt?.substring(0, '2001-01-01'.length))
     .values()
     .map((data) => ({data}))
     .value()

src/components/TxHistory/types.ts

@@ -1,3 +1,5 @@
+import BigNumber from 'bignumber.js'
+
 export type TransactionDirection = 'SENT' | 'RECEIVED' | 'SELF' | 'MULTI'
 export type TransactionStatus = 'SUCCESSFUL' | 'PENDING' | 'FAILED'
 export type TransactionAssurance = 'PENDING' | 'FAILED' | 'LOW' | 'MEDIUM' | 'HIGH'
@@ -41,7 +43,36 @@ export type TransactionInfo = {
   lastUpdatedAt: string
   status: TransactionStatus
   assurance: TransactionAssurance
-  tokens: Dict<Token>
+  tokens: Record<string, Token>
+}
+
+export type CommonMetadata = {
+  numberOfDecimals: number
+  ticker: null | string
+  longName: null | string
+  maxSupply: null | string
+}
+
+export type TokenMetadata = CommonMetadata & {
+  type: 'Cardano'
+  // empty string for ADA
+  policyId: string
+  // empty string for ADA
+  assetName: string
+}
+
+// equivalent to TokenRow in the yoroi extension
+export type Token = {
+  networkId: number
+  isDefault: boolean
+  /**
+   * For Ergo, this is the tokenId (box id of first input in tx)
+   * for Cardano, this is policyId || assetName
+   * Note: we don't use null for the primary token of the chain
+   * As some blockchains have multiple primary tokens
+   */
+  identifier: string
+  metadata: TokenMetadata
 }
 
 // export type BaseAsset = RemoteAsset
@@ -70,23 +101,6 @@ export type TransactionInfo = {
 //   +collateralInputs?: Array<{address: string, amount: string, assets: Array<BaseAsset>}>,
 // |}
 
-// export type CommonMetadata = {|
-//   +numberOfDecimals: number,
-//   +ticker: null | string,
-//   +longName: null | string,
-//   +maxSupply: null | string,
-// |}
-
-// // recall: this is an union type in general
-// export type TokenMetadata = {|
-//   +type: 'Cardano',
-//   // empty string for ADA
-//   +policyId: string,
-//   // empty string for ADA
-//   +assetName: string,
-//   ...$ReadOnly<CommonMetadata>,
-// |}
-
 // // Same as TokenMetadata but with non-nullable ticker
 // export type DefaultAssetMetadata = {|
 //   +type: 'Cardano',
@@ -98,22 +112,6 @@ export type TransactionInfo = {
 //   +ticker: string,
 // |}
 
-// // equivalent to TokenRow in the yoroi extension
-// export type Token = {|
-//   // tokenId: number
-//   /** different blockchains can support native multi-asset */
-//   +networkId: number,
-//   +isDefault: boolean,
-//   /**
-//    * For Ergo, this is the tokenId (box id of first input in tx)
-//    * for Cardano, this is policyId || assetName
-//    * Note: we don't use null for the primary token of the chain
-//    * As some blockchains have multiple primary tokens
-//    */
-//   +identifier: string,
-//   +metadata: $ReadOnly<TokenMetadata>,
-// |}
-
 // export type DefaultAsset = {|
 //   ...Token,
 //   metadata: DefaultAssetMetadata,

src/components/WalletHero/ActionsBanner.tsx

@@ -1,7 +1,7 @@
 import {useNavigation} from '@react-navigation/native'
 import React, {memo, useCallback} from 'react'
 import {useIntl} from 'react-intl'
-import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'
+import {Alert, StyleSheet, Text, TouchableOpacity, View} from 'react-native'
 import {useSelector} from 'react-redux'
 
 import {actionMessages} from '../../../legacy/i18n/global-messages'
@@ -126,7 +126,7 @@ const useNavigations = () => {
   return {
     onSend: useCallback(() => navigation.navigate(WALLET_ROUTES.SEND), [navigation]),
     onReceive: useCallback(() => navigation.navigate(WALLET_ROUTES.RECEIVE), [navigation]),
-    onBuy: useCallback(() => alert(strings.messageBuy), [strings.messageBuy]),
+    onBuy: useCallback(() => Alert.alert(strings.messageBuy, strings.messageBuy), [strings.messageBuy]),
   }
 }