refactor delegation screens

src/components/Delegation/DelegationConfirmation.js

@@ -11,6 +11,7 @@ import {
   easyConfirmationSelector,
   isHWSelector,
   hwDeviceInfoSelector,
+  defaultNetworkAssetSelector,
 } from '../../selectors'
 import {
   showErrorDialog,
@@ -33,7 +34,7 @@ import globalMessages, {
   errorMessages,
   txLabels,
 } from '../../i18n/global-messages'
-import {formatAdaWithText, formatAda} from '../../utils/format'
+import {formatTokenWithText, formatTokenAmount} from '../../utils/format'
 import {ignoreConcurrentAsyncHandler} from '../../utils/utils'
 import {
   SEND_ROUTES,
@@ -49,6 +50,7 @@ import LedgerTransportSwitchModal from '../Ledger/LedgerTransportSwitchModal'
 import LedgerConnect from '../Ledger/LedgerConnect'
 import HWInstructions from '../Ledger/HWInstructions'
 import LocalizableError from '../../i18n/LocalizableError'
+import {MultiToken} from '../../crypto/MultiToken'
 
 import styles from './styles/DelegationConfirmation.style'
 
@@ -245,6 +247,7 @@ const DelegationConfirmation = ({
   processingTx,
   doNothing,
   isHW,
+  defaultAsset,
   ledgerDialogStep,
   closeLedgerDialog,
   useUSB,
@@ -260,9 +263,9 @@ const DelegationConfirmation = ({
   const poolName = route.params.poolName
   const delegationTxData: CreateDelegationTxResponse =
     route.params.transactionData
-  const amountToDelegate = delegationTxData.totalAmountToDelegate
-  const transactionFee = route.params.transactionFee
-  const reward = approximateReward(amountToDelegate)
+  const amountToDelegate: MultiToken = delegationTxData.totalAmountToDelegate
+  const transactionFee: MultiToken = route.params.transactionFee
+  const reward = approximateReward(amountToDelegate.getDefault())
 
   const isConfirmationDisabled =
     (!isEasyConfirmationEnabled && !password && !isHW) || processingTx
@@ -286,14 +289,17 @@ const DelegationConfirmation = ({
         <View style={styles.input}>
           <Text small style={styles.fees}>
             {'+ '}
-            {formatAda(transactionFee)}
+            {formatTokenAmount(transactionFee.getDefault(), defaultAsset)}
             {` ${intl.formatMessage(messages.ofFees)}`}
           </Text>
           {/* requires a handler so we pass on a dummy function */}
           <ValidatedTextInput
             onChangeText={doNothing}
             editable={false}
-            value={formatAda(amountToDelegate)}
+            value={formatTokenAmount(
+              amountToDelegate.getDefault(),
+              defaultAsset,
+            )}
             label={intl.formatMessage(txLabels.amount)}
           />
         </View>
@@ -315,7 +321,9 @@ const DelegationConfirmation = ({
           <Text style={styles.itemTitle}>
             {intl.formatMessage(messages.rewardsExplanation)}
           </Text>
-          <Text style={styles.rewards}>{formatAdaWithText(reward)}</Text>
+          <Text style={styles.rewards}>
+            {formatTokenWithText(reward, defaultAsset)}
+          </Text>
         </View>
         {isHW && <HWInstructions useUSB={useUSB} addMargin />}
       </ScrollView>
@@ -387,6 +395,7 @@ export default injectIntl(
         isEasyConfirmationEnabled: easyConfirmationSelector(state),
         isHW: isHWSelector(state),
         hwDeviceInfo: hwDeviceInfoSelector(state),
+        defaultAsset: defaultNetworkAssetSelector(state),
       }),
       {
         submitDelegationTx,

src/components/Delegation/StakeByIdScreen.js

@@ -20,6 +20,7 @@ import {
   isOnlineSelector,
   utxosSelector,
   accountBalanceSelector,
+  defaultNetworkAssetSelector,
 } from '../../selectors'
 import UtxoAutoRefresher from '../Send/UtxoAutoRefresher'
 import AccountAutoRefresher from './AccountAutoRefresher'
@@ -126,6 +127,7 @@ export default injectIntl(
       utxos: utxosSelector(state),
       accountBalance: accountBalanceSelector(state),
       isOnline: isOnlineSelector(state),
+      defaultAsset: defaultNetworkAssetSelector(state),
     })),
     withStateHandlers(
       {
@@ -144,14 +146,16 @@ export default injectIntl(
         accountBalance,
         utxos,
         intl,
+        defaultAsset,
       }) => async (selectedPool) => {
         try {
           const transactionData = await walletManager.createDelegationTx(
             poolId,
             accountBalance,
             utxos,
+            defaultAsset,
           )
-          const transactionFee = await transactionData.signTxRequest.fee(false)
+          const transactionFee = await transactionData.signTxRequest.fee()
 
           navigation.navigate(STAKING_CENTER_ROUTES.DELEGATION_CONFIRM, {
             poolName: selectedPool.poolName,

src/components/Delegation/StakingCenter.js

@@ -21,6 +21,7 @@ import {
   isOnlineSelector,
   utxosSelector,
   accountBalanceSelector,
+  defaultNetworkAssetSelector,
 } from '../../selectors'
 import UtxoAutoRefresher from '../Send/UtxoAutoRefresher'
 import AccountAutoRefresher from './AccountAutoRefresher'
@@ -131,6 +132,7 @@ export default injectIntl(
       utxos: utxosSelector(state),
       accountBalance: accountBalanceSelector(state),
       isOnline: isOnlineSelector(state),
+      defaultAsset: defaultNetworkAssetSelector(state),
     })),
     withStateHandlers(
       {
@@ -164,15 +166,17 @@ export default injectIntl(
         accountBalance,
         utxos,
         intl,
+        defaultAsset,
       }) => async (selectedPools: Array<SelectedPool>) => {
         try {
           const selectedPool = selectedPools[0]
           const transactionData = await walletManager.createDelegationTx(
             selectedPool.poolHash,
             accountBalance,
             utxos,
+            defaultAsset,
           )
-          const transactionFee = await transactionData.signTxRequest.fee(false)
+          const transactionFee = await transactionData.signTxRequest.fee()
           navigation.navigate(STAKING_CENTER_ROUTES.DELEGATION_CONFIRM, {
             poolName: selectedPool.poolName,
             poolHash: selectedPool.poolHash,

src/components/Delegation/StakingDashboard.js

@@ -37,6 +37,7 @@ import {
   isReadOnlySelector,
   easyConfirmationSelector,
   hwDeviceInfoSelector,
+  defaultNetworkAssetSelector,
 } from '../../selectors'
 import DelegationNavigationButtons from './DelegationNavigationButtons'
 import UtxoAutoRefresher from '../Send/UtxoAutoRefresher'
@@ -74,10 +75,12 @@ import {CONFIG, getCardanoBaseConfig} from '../../config/config'
 import {WITHDRAWAL_DIALOG_STEPS, type WithdrawalDialogSteps} from './types'
 import {HaskellShelleyTxSignRequest} from '../../crypto/shelley/HaskellShelleyTxSignRequest'
 import KeyStore from '../../crypto/KeyStore'
+import {MultiToken} from '../../crypto/MultiToken'
 
 import styles from './styles/DelegationSummary.style'
 
 import type {Navigation} from '../../types/navigation'
+import type {DefaultAsset} from '../../types/HistoryTransaction'
 import type {RemotePoolMetaSuccess, RawUtxo} from '../../api/types'
 import type {
   HWDeviceInfo,
@@ -125,6 +128,7 @@ type Props = {|
   hwDeviceInfo: HWDeviceInfo,
   submitDelegationTx: <T>(string, BaseSignRequest<T>) => Promise<void>,
   submitSignedTx: (string) => Promise<void>,
+  defaultAsset: DefaultAsset,
 |}
 
 type State = {|
@@ -134,11 +138,11 @@ type State = {|
   signTxRequest: ?HaskellShelleyTxSignRequest,
   withdrawals: ?Array<{|
     address: string,
-    amount: BigNumber,
+    amount: MultiToken,
   |}>,
   deregistrations: ?Array<{|
     rewardAddress: string,
-    refund: BigNumber,
+    refund: MultiToken,
   |}>,
   balance: BigNumber,
   finalBalance: BigNumber,
@@ -277,7 +281,7 @@ class StakingDashboard extends React.Component<Props, State> {
 
   /* create withdrawal tx and move to confirm */
   createWithdrawalTx: () => Promise<void> = async () => {
-    const {intl, utxos} = this.props
+    const {intl, utxos, defaultAsset} = this.props
     try {
       if (utxos == null) throw new Error('cannot get utxos') // should never happen
       this.setState({withdrawalDialogStep: WITHDRAWAL_DIALOG_STEPS.WAITING})
@@ -289,26 +293,33 @@ class StakingDashboard extends React.Component<Props, State> {
         const withdrawals = await signTxRequest.withdrawals()
         const deregistrations = await signTxRequest.keyDeregistrations()
         const balance = withdrawals.reduce(
-          (sum, curr) => (curr.amount == null ? sum : sum.plus(curr.amount)),
-          new BigNumber(0),
+          (sum, curr) =>
+            curr.amount == null ? sum : sum.joinAddCopy(curr.amount),
+          new MultiToken([], {
+            defaultNetworkId: defaultAsset.networkId,
+            defaultIdentifier: defaultAsset.identifier,
+          }),
         )
-        const fees = await signTxRequest.fee() // TODO(multi-asset)
+        const fees = await signTxRequest.fee()
         const finalBalance = balance
-          .plus(
+          .joinAddMutable(
             deregistrations.reduce(
               (sum, curr) =>
-                curr.refund == null ? sum : sum.plus(curr.refund),
-              new BigNumber(0),
+                curr.refund == null ? sum : sum.joinAddCopy(curr.refund),
+              new MultiToken([], {
+                defaultNetworkId: defaultAsset.networkId,
+                defaultIdentifier: defaultAsset.identifier,
+              }),
             ),
           )
-          .minus(fees)
+          .joinSubtractMutable(fees)
         this.setState({
           signTxRequest,
           withdrawals,
           deregistrations,
-          balance,
-          finalBalance,
-          fees,
+          balance: balance.getDefault(),
+          finalBalance: finalBalance.getDefault(),
+          fees: fees.getDefault(),
           withdrawalDialogStep: WITHDRAWAL_DIALOG_STEPS.CONFIRM,
         })
       } else {
@@ -722,6 +733,7 @@ export default injectIntl(
         isHW: isHWSelector(state),
         isReadOnly: isReadOnlySelector(state),
         hwDeviceInfo: hwDeviceInfoSelector(state),
+        defaultAsset: defaultNetworkAssetSelector(state),
       }),
       {
         fetchPoolInfo,

src/components/Delegation/WithdrawalDialog.js

@@ -12,6 +12,7 @@ import TransferSummary from '../Transfer/TransferSummary'
 import {LedgerTransportSwitch} from '../Ledger/LedgerTransportSwitchModal'
 import LedgerConnect from '../Ledger/LedgerConnect'
 import globalMessages, {ledgerMessages} from '../../i18n/global-messages'
+import {MultiToken} from '../../crypto/MultiToken'
 import {WITHDRAWAL_DIALOG_STEPS, type WithdrawalDialogSteps} from './types'
 
 import styles from './styles/WithdrawalDialog.style'
@@ -80,7 +81,7 @@ type Props = {|
   +onConnectUSB: () => any,
   +withdrawals?: ?Array<{|
     +address: string,
-    +amount: BigNumber,
+    +amount: MultiToken,
   |}>,
   +deregistrations?: ?Array<{|
     +rewardAddress: string,

src/components/Send/ConfirmScreen.js

@@ -1,6 +1,7 @@
 // @flow
 
 import React from 'react'
+import {BigNumber} from 'bignumber.js'
 import {compose} from 'redux'
 import {connect} from 'react-redux'
 import {ScrollView, View, Platform} from 'react-native'
@@ -23,6 +24,7 @@ import {
   easyConfirmationSelector,
   isHWSelector,
   hwDeviceInfoSelector,
+  defaultNetworkAssetSelector,
 } from '../../selectors'
 import globalMessages, {
   errorMessages,
@@ -36,7 +38,7 @@ import KeyStore from '../../crypto/KeyStore'
 import {showErrorDialog, submitTransaction, submitSignedTx} from '../../actions'
 import {setLedgerDeviceId, setLedgerDeviceObj} from '../../actions/hwWallet'
 import {withNavigationTitle} from '../../utils/renderUtils'
-import {formatAdaWithSymbol, formatAdaWithText} from '../../utils/format'
+import {formatTokenWithSymbol, formatTokenWithText} from '../../utils/format'
 import {NetworkError, ApiError} from '../../api/errors'
 import {WrongPassword} from '../../crypto/errors'
 import {ignoreConcurrentAsyncHandler} from '../../utils/utils'
@@ -208,6 +210,7 @@ const ConfirmScreen = ({
   setPassword,
   isEasyConfirmationEnabled,
   isHW,
+  defaultAsset,
   sendingTransaction,
   buttonDisabled,
   ledgerDialogStep,
@@ -246,17 +249,18 @@ const ConfirmScreen = ({
         <OfflineBanner />
         <Banner
           label={intl.formatMessage(globalMessages.availableFunds)}
-          text={formatAdaWithText(availableAmount)}
+          text={formatTokenWithText(availableAmount, defaultAsset)}
           boldText
         />
 
         <ScrollView style={styles.container}>
           <Text small>
-            {intl.formatMessage(txLabels.fees)}: {formatAdaWithSymbol(fee)}
+            {intl.formatMessage(txLabels.fees)}:{' '}
+            {formatTokenWithSymbol(fee, defaultAsset)}
           </Text>
           <Text small>
             {intl.formatMessage(txLabels.balanceAfterTx)}:{' '}
-            {formatAdaWithSymbol(balanceAfterTx)}
+            {formatTokenWithSymbol(balanceAfterTx, defaultAsset)}
           </Text>
 
           <Text style={styles.heading} small>
@@ -266,7 +270,7 @@ const ConfirmScreen = ({
           <Text style={styles.heading} small>
             {intl.formatMessage(txLabels.amount)}
           </Text>
-          <Text>{formatAdaWithSymbol(amount)}</Text>
+          <Text>{formatTokenWithSymbol(amount, defaultAsset)}</Text>
 
           {/* eslint-disable indent */
           !isEasyConfirmationEnabled &&
@@ -347,6 +351,7 @@ export default injectIntl(
         isEasyConfirmationEnabled: easyConfirmationSelector(state),
         isHW: isHWSelector(state),
         hwDeviceInfo: hwDeviceInfoSelector(state),
+        defaultAsset: defaultNetworkAssetSelector(state),
       }),
       {
         submitTransaction,