Skip to content

Commit

Permalink
refactor common components for confirm page (#586)
Browse files Browse the repository at this point in the history 
* refactor common components for confirm page

* failing tests
  • Loading branch information
@thedoublejay
thedoublejay authored Aug 14, 2021
1 parent bf00cc9 commit 609d33b
Show file tree
Hide file tree
Showing 10 changed files with 209 additions and 263 deletions.
135 changes: 135 additions & 0 deletions app/components/ConfirmComponents/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,135 @@
import BigNumber from 'bignumber.js'
import React from 'react'
import { View } from 'react-native'
import NumberFormat from 'react-number-format'
import { tailwind } from '../../tailwind'
import { translate } from '../../translations'
import { Button } from '../Button'
import { getTokenIcon } from '../icons/tokens/_index'
import { Text } from '../Text'

interface ConfirmTitleItems {
title: string
amount: BigNumber
suffix: string
testID: string
}

export function ConfirmTitle ({ title, amount, suffix, testID }: ConfirmTitleItems): JSX.Element {
return (
<View style={tailwind('flex-col bg-white px-4 py-8 mb-4 justify-center items-center border-b border-gray-300')}>
<Text testID='confirm_title' style={tailwind('text-xs text-gray-500')}>
{title}
</Text>
<NumberFormat
value={amount.toFixed(8)} decimalScale={8} thousandSeparator displayType='text' suffix={suffix}
renderText={(value) => (
<Text
testID={testID}
style={tailwind('text-2xl font-bold flex-wrap')}
>{value}
</Text>
)}
/>
</View>
)
}

export function TextRow (props: { lhs: string, rhs: { value: string, testID: string } }): JSX.Element {
return (
<View style={tailwind('bg-white p-4 border-b border-gray-200 flex-row items-start w-full')}>
<View style={tailwind('flex-1')}>
<Text style={tailwind('font-medium')}>{props.lhs}</Text>
</View>
<View style={tailwind('flex-1')}>
<Text
testID={props.rhs.testID}
style={tailwind('font-medium text-right text-gray-500')}
>{props.rhs.value}
</Text>
</View>
</View>
)
}

export function NumberRow (props: { lhs: string, rhs: { value: string | number, suffix?: string, testID: string } }): JSX.Element {
return (
<View style={tailwind('bg-white p-4 border-b border-gray-200 flex-row items-start w-full')}>
<View style={tailwind('flex-1')}>
<Text style={tailwind('font-medium')}>{props.lhs}</Text>
</View>
<View style={tailwind('flex-1')}>
<NumberFormat
value={props.rhs.value} decimalScale={8} thousandSeparator displayType='text'
suffix={props.rhs.suffix}
renderText={(val: string) => (
<Text
testID={props.rhs.testID}
style={tailwind('flex-wrap font-medium text-right text-gray-500')}
>{val}
</Text>
)}
/>
</View>
</View>
)
}

export function TokenBalanceRow (props: { lhs: string, rhs: { value: string | number, testID: string }, iconType: string }): JSX.Element {
const TokenIcon = getTokenIcon(props.iconType)
return (
<View style={tailwind('bg-white p-4 border-b border-gray-200 flex-row items-start w-full')}>
<View style={tailwind('flex-1 flex-row')}>
<TokenIcon width={24} height={24} style={tailwind('mr-2')} />
<Text style={tailwind('font-medium')} testID={`${props.rhs.testID}_unit`}>{props.lhs}</Text>
</View>
<View style={tailwind('flex-1')}>
<NumberFormat
value={props.rhs.value} decimalScale={8} thousandSeparator displayType='text'
renderText={(val: string) => (
<Text
testID={props.rhs.testID}
style={tailwind('flex-wrap font-medium text-right text-gray-500')}
>{val}
</Text>
)}
/>
</View>
</View>
)
}

interface SubmitButtonGroupItems {
isDisabled: boolean
title: string
label: string
onSubmit: () => Promise<void>
onCancel: () => void
}

export function SubmitButtonGroup ({
isDisabled,
title,
label,
onSubmit,
onCancel
}: SubmitButtonGroupItems): JSX.Element {
return (
<View>
<Button
testID={`button_confirm_${title}`}
disabled={isDisabled}
label={label}
title={title} onPress={onSubmit}
/>
<Button
testID={`button_cancel_${title}`}
disabled={isDisabled}
label={translate('screens/common', 'CANCEL')}
title='cancel' onPress={onCancel}
fill='flat'
margin='m-4 mt-0'
/>
</View>
)
}
104 changes: 19 additions & 85 deletions app/screens/AppNavigator/screens/Balances/screens/ConvertConfirmationScreen.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,15 @@ import { StackActions, useNavigation } from '@react-navigation/native'
import { StackScreenProps } from '@react-navigation/stack'
import BigNumber from 'bignumber.js'
import React, { Dispatch, useEffect, useState } from 'react'
import { ScrollView, View } from 'react-native'
import NumberFormat from 'react-number-format'
import { ScrollView } from 'react-native'
import { useDispatch, useSelector } from 'react-redux'
import { Logging } from '../../../../../api'
import { Text } from '../../../../../components'
import { Button } from '../../../../../components/Button'
import { getTokenIcon } from '../../../../../components/icons/tokens/_index'
import {
ConfirmTitle,
NumberRow,
SubmitButtonGroup,
TokenBalanceRow
} from '../../../../../components/ConfirmComponents'
import { SectionTitle } from '../../../../../components/SectionTitle'
import { RootState } from '../../../../../store'
import { hasTxQueued, transactionQueue } from '../../../../../store/transaction_queue'
Expand Down Expand Up @@ -58,106 +60,38 @@ export function ConvertConfirmationScreen ({ route }: Props): JSX.Element {

return (
<ScrollView style={tailwind('bg-gray-100 pb-4')}>
<View style={tailwind('flex-col bg-white px-4 py-8 mb-4 justify-center items-center border-b border-gray-300')}>
<Text style={tailwind('text-xs text-gray-500')}>
{translate('screens/ConvertConfirmationScreen', 'YOU ARE CONVERTING')}
</Text>
<NumberFormat
value={amount.toFixed(8)} decimalScale={8} thousandSeparator displayType='text'
suffix={` ${mode === 'utxosToAccount' ? 'DFI (UTXO)' : 'DFI (Token)'}`}
renderText={(value) => (
<Text
testID='text_convert_amount'
style={tailwind('text-2xl font-bold flex-wrap text-center')}
>{value}
</Text>
)}
/>
</View>
<ConfirmTitle
title={translate('screens/ConvertConfirmationScreen', 'YOU ARE CONVERTING')}
testID='text_convert_amount' amount={amount}
suffix={` ${mode === 'utxosToAccount' ? 'DFI (UTXO)' : 'DFI (Token)'}`}
/>
<SectionTitle
text={translate('screens/ConvertConfirmationScreen', 'AFTER CONVERSION, YOU WILL HAVE:')}
testID='title_conversion_detail'
/>
<DFIBalanceRow
unit={sourceUnit}
<TokenBalanceRow
iconType={sourceUnit === 'UTXO' ? '_UTXO' : 'DFI'}
lhs={translate('screens/ConvertConfirmationScreen', sourceUnit)}
rhs={{ value: sourceBalance.toFixed(8), testID: 'source_amount' }}
/>
<DFIBalanceRow
unit={targetUnit}
<TokenBalanceRow
iconType={targetUnit === 'UTXO' ? '_UTXO' : 'DFI'}
lhs={translate('screens/ConvertConfirmationScreen', targetUnit)}
rhs={{ value: targetBalance.toFixed(8), testID: 'target_amount' }}
/>
<NumberRow
lhs={translate('screens/ConvertConfirmationScreen', 'Estimated fee')}
rhs={{ value: fee.toFixed(8), suffix: ' DFI (UTXO)', testID: 'text_fee' }}
/>
<Button
testID='button_confirm_convert'
disabled={isSubmitting || hasPendingJob}
<SubmitButtonGroup
onSubmit={onSubmit} onCancel={onCancel} title='convert'
label={translate('screens/SendConfirmationScreen', 'CONVERT')}
title='CONVERT' onPress={onSubmit}
/>
<Button
testID='button_cancel_convert'
disabled={isSubmitting || hasPendingJob}
label={translate('screens/SendConfirmationScreen', 'CANCEL')}
title='CANCEL' onPress={onCancel}
fill='flat'
margin='m-4 mt-0'
isDisabled={isSubmitting || hasPendingJob}
/>
</ScrollView>
)
}

function NumberRow (props: { lhs: string, rhs: { value: string | number, suffix?: string, testID: string } }): JSX.Element {
return (
<View style={tailwind('bg-white p-4 border-b border-gray-200 flex-row items-start w-full')}>
<View style={tailwind('flex-1')}>
<Text style={tailwind('font-medium')}>{props.lhs}</Text>
</View>
<View style={tailwind('flex-1')}>
<NumberFormat
value={props.rhs.value} decimalScale={8} thousandSeparator displayType='text'
suffix={props.rhs.suffix}
renderText={(val: string) => (
<Text
testID={props.rhs.testID}
style={tailwind('flex-wrap font-medium text-right text-gray-500')}
>{val}
</Text>
)}
/>
</View>
</View>
)
}

function DFIBalanceRow (props: { lhs: string, rhs: { value: string | number, testID: string }, unit: string }): JSX.Element {
const iconType = props.unit === 'UTXO' ? '_UTXO' : 'DFI'
const DFIIcon = getTokenIcon(iconType)
return (
<View style={tailwind('bg-white p-4 border-b border-gray-200 flex-row items-start w-full')}>
<View style={tailwind('flex-1 flex-row')}>
<DFIIcon width={24} height={24} style={tailwind('mr-2')} />
<Text style={tailwind('font-medium')} testID={`${props.rhs.testID}_unit`}>{props.lhs}</Text>
</View>
<View style={tailwind('flex-1')}>
<NumberFormat
value={props.rhs.value} decimalScale={8} thousandSeparator displayType='text'
renderText={(val: string) => (
<Text
testID={props.rhs.testID}
style={tailwind('flex-wrap font-medium text-right text-gray-500')}
>{val}
</Text>
)}
/>
</View>
</View>
)
}

async function constructSignedConversionAndSend ({
mode,
amount
Expand Down
76 changes: 9 additions & 67 deletions app/screens/AppNavigator/screens/Balances/screens/SendConfirmationScreen.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,10 @@ import { StackActions, useNavigation } from '@react-navigation/native'
import { StackScreenProps } from '@react-navigation/stack'
import BigNumber from 'bignumber.js'
import React, { Dispatch, useEffect, useState } from 'react'
import { ScrollView, View } from 'react-native'
import NumberFormat from 'react-number-format'
import { ScrollView } from 'react-native'
import { useDispatch, useSelector } from 'react-redux'
import { Logging } from '../../../../../api'
import { Text } from '../../../../../components'
import { Button } from '../../../../../components/Button'
import { ConfirmTitle, NumberRow, SubmitButtonGroup, TextRow } from '../../../../../components/ConfirmComponents'
import { SectionTitle } from '../../../../../components/SectionTitle'
import { useNetworkContext } from '../../../../../contexts/NetworkContext'
import { useTokensAPI } from '../../../../../hooks/wallet/TokensAPI'
Expand Down Expand Up @@ -76,21 +74,10 @@ export function SendConfirmationScreen ({ route }: Props): JSX.Element {

return (
<ScrollView style={tailwind('bg-gray-100 pb-4')}>
<View style={tailwind('flex-col bg-white px-4 py-8 mb-4 justify-center items-center border-b border-gray-300')}>
<Text style={tailwind('text-xs text-gray-500')}>
{translate('screens/SendConfirmationScreen', 'YOU ARE SENDING')}
</Text>
<NumberFormat
value={amount.toFixed(8)} decimalScale={8} thousandSeparator displayType='text' suffix={` ${token.symbol}`}
renderText={(value) => (
<Text
testID='text_send_amount'
style={tailwind('text-2xl font-bold flex-wrap')}
>{value}
</Text>
)}
/>
</View>
<ConfirmTitle
title={translate('screens/SendConfirmationScreen', 'YOU ARE SENDING')} testID='text_send_amount'
amount={amount} suffix={` ${token.symbol}`}
/>
<SectionTitle
text={translate('screens/SendConfirmationScreen', 'TRANSACTION DETAILS')}
testID='title_transaction_detail'
Expand Down Expand Up @@ -119,60 +106,15 @@ export function SendConfirmationScreen ({ route }: Props): JSX.Element {
testID: 'text_balance'
}}
/>
<Button
testID='button_confirm_send'
disabled={isSubmitting || hasPendingJob}
<SubmitButtonGroup
onSubmit={onSubmit} onCancel={onCancel} title='send'
label={translate('screens/SendConfirmationScreen', 'SEND')}
title='Send' onPress={onSubmit}
/>
<Button
testID='button_cancel_send'
disabled={isSubmitting || hasPendingJob}
label={translate('screens/SendConfirmationScreen', 'CANCEL')}
title='CANCEL' onPress={onCancel}
fill='flat'
margin='m-4 mt-0'
isDisabled={isSubmitting || hasPendingJob}
/>
</ScrollView>
)
}

function TextRow (props: { lhs: string, rhs: { value: string, testID: string } }): JSX.Element {
return (
<View style={tailwind('bg-white p-4 border-b border-gray-200 flex-row items-start w-full')}>
<View style={tailwind('flex-1')}>
<Text style={tailwind('font-medium')}>{props.lhs}</Text>
</View>
<View style={tailwind('flex-1')}>
<Text testID={props.rhs.testID} style={tailwind('font-medium text-right text-gray-500')}>{props.rhs.value}</Text>
</View>
</View>
)
}

function NumberRow (props: { lhs: string, rhs: { value: string | number, suffix?: string, testID: string } }): JSX.Element {
return (
<View style={tailwind('bg-white p-4 border-b border-gray-200 flex-row items-start w-full')}>
<View style={tailwind('flex-1')}>
<Text style={tailwind('font-medium')}>{props.lhs}</Text>
</View>
<View style={tailwind('flex-1')}>
<NumberFormat
value={props.rhs.value} decimalScale={8} thousandSeparator displayType='text'
suffix={props.rhs.suffix}
renderText={(val: string) => (
<Text
testID={props.rhs.testID}
style={tailwind('flex-wrap font-medium text-right text-gray-500')}
>{val}
</Text>
)}
/>
</View>
</View>
)
}

interface SendForm {
amount: BigNumber
address: string
Expand Down
Loading

0 comments on commit 609d33b

Please sign in to comment.