-
-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Complete redesigns for approval flow (#1558)
* Confirm: Use TransactionReviewFeeCard, add primaryCurrency prop, add ETH transaction fee, move renderIfGasEstimationReady to TransactionReviewFeeCard, remove adjust transaction fee button, pass props to TransactionReviewFeeCard * CustomGas: Implement redesign. Still need to modify styling of individual gas selectors * snapshot update * Approve: Use Modal in place of Action Modal, use updated CustomGas * Confirm: fix, change props.transactionState to state.transaction (merge conflict recovery) * snapshot update * Approve: add in ActionModal styles, use ActionModal * Use ActionModal * Remove transaction direction * Add onRequestClose * Add host and network under website icon * Use TransactionHeader component * Use AccountInfoCard * Add black to text in AccountInfoCard * Remove up/down arrow icon * Update: styles * Update networkFee * Update: translation text * Update: sync up with PR and update translations * Add TransactionReivewDetailsCard * Include getMethodData * Rename onViewDetails -> toggleViewDetails * Adjust styles * Remove commented code * Update: tests * Update: TransactionReviewDetailsCard styles * Update: Move customGas and editPermission out from Modals * Update: remove now redundant infos * Remove comments * Remove padding * Fix eslint issues * Adjust location of KeyboardAwareScrollView for renderEditPermission * Fix transition when opening network fee * Update: Create translation for "Total" * Update: secureIcon * Update: remove padding * Update: Add ConnectHeader component * Update: Make ConnectHeader props isRequired * Update: move view into RenderCustomGas method * Add activeTabUrl so we get https and secure icon * Update: display network fee in fiat when selected * Update: Add save button to network fee * Update: Add Set button for editPermission * Update: tests * Fix hitTest issue with network fee * Update: Display currencySymbol * Update: round fiat price to two decimals * Update: fallback to just to be safe * Update: Add getActiveTabUrl method Co-authored-by: Etienne Dusseault <[email protected]>
- Loading branch information
1 parent
4c1258f
commit af69702
Showing
11 changed files
with
532 additions
and
452 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| import React, { Component } from 'react'; | ||
| import { View, StyleSheet, Text, TouchableOpacity } from 'react-native'; | ||
| import PropTypes from 'prop-types'; | ||
| import IonicIcon from 'react-native-vector-icons/Ionicons'; | ||
| import { colors, fontStyles } from '../../../styles/common'; | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| header: { | ||
| width: '100%', | ||
| position: 'relative', | ||
| paddingBottom: 20 | ||
| }, | ||
| title: { | ||
| ...fontStyles.bold, | ||
| color: colors.black, | ||
| fontSize: 14, | ||
| textAlign: 'center', | ||
| paddingVertical: 12 | ||
| }, | ||
| back: { | ||
| position: 'absolute', | ||
| zIndex: 1, | ||
| paddingVertical: 10, | ||
| paddingRight: 10 | ||
| } | ||
| }); | ||
|
|
||
| class ConnectHeader extends Component { | ||
| static propTypes = { | ||
| action: PropTypes.func.isRequired, | ||
| title: PropTypes.string.isRequired | ||
| }; | ||
|
|
||
| render() { | ||
| const { title, action } = this.props; | ||
| return ( | ||
| <View style={styles.header}> | ||
| <TouchableOpacity style={styles.back} onPress={action}> | ||
| <IonicIcon name={'ios-arrow-back'} size={24} color={colors.black} /> | ||
| </TouchableOpacity> | ||
| <Text style={styles.title}>{title}</Text> | ||
| </View> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default ConnectHeader; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
167 changes: 167 additions & 0 deletions
167
app/components/UI/TransactionReview/TransactionReivewDetailsCard/index.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,167 @@ | ||
| import React, { Component } from 'react'; | ||
|
|
||
| import { StyleSheet, Text, View, TouchableOpacity } from 'react-native'; | ||
| import { colors, fontStyles } from '../../../../styles/common'; | ||
| import PropTypes from 'prop-types'; | ||
| import IonicIcon from 'react-native-vector-icons/Ionicons'; | ||
| import { strings } from '../../../../../locales/i18n'; | ||
| import Feather from 'react-native-vector-icons/Feather'; | ||
| import ConnectHeader from '../../../UI/ConnectHeader'; | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| uppercase: { | ||
| textTransform: 'capitalize' | ||
| }, | ||
| viewData: { | ||
| borderWidth: 1, | ||
| borderColor: colors.grey200, | ||
| borderRadius: 10, | ||
| padding: 16, | ||
| marginTop: 20 | ||
| }, | ||
| viewDataRow: { | ||
| display: 'flex', | ||
| flexDirection: 'row', | ||
| flexWrap: 'wrap' | ||
| }, | ||
| viewDataTitle: { | ||
| ...fontStyles.bold, | ||
| color: colors.black, | ||
| fontSize: 14 | ||
| }, | ||
| viewDataText: { | ||
| marginTop: 20 | ||
| }, | ||
| viewDataArrow: { | ||
| marginLeft: 'auto' | ||
| }, | ||
| transactionDetails: { | ||
| borderWidth: 1, | ||
| borderColor: colors.grey200, | ||
| borderRadius: 10, | ||
| padding: 16 | ||
| }, | ||
| transactionDetailsRow: { | ||
| display: 'flex', | ||
| flexDirection: 'row', | ||
| flexWrap: 'wrap', | ||
| paddingVertical: 4 | ||
| }, | ||
| transactionDetailsTextLeft: { | ||
| ...fontStyles.thin, | ||
| color: colors.black, | ||
| fontSize: 14 | ||
| }, | ||
| transactionDetailsTextRight: { | ||
| ...fontStyles.bold, | ||
| color: colors.black, | ||
| fontSize: 14, | ||
| textAlign: 'right', | ||
| flexDirection: 'row', | ||
| marginLeft: 'auto' | ||
| }, | ||
| section: { | ||
| minWidth: '100%', | ||
| width: '100%' | ||
| }, | ||
| copyIcon: { | ||
| marginLeft: 1, | ||
| marginTop: 2 | ||
| }, | ||
| address: { | ||
| ...fontStyles.bold, | ||
| color: colors.blue | ||
| } | ||
| }); | ||
|
|
||
| export default class TransactionReviewDetailsCard extends Component { | ||
| static propTypes = { | ||
| toggleViewDetails: PropTypes.func, | ||
| copyContractAddress: PropTypes.func, | ||
| toggleViewData: PropTypes.func, | ||
| address: PropTypes.string, | ||
| host: PropTypes.string, | ||
| allowance: PropTypes.string, | ||
| tokenSymbol: PropTypes.string, | ||
| data: PropTypes.string, | ||
| displayViewData: PropTypes.bool, | ||
| method: PropTypes.string | ||
| }; | ||
|
|
||
| render() { | ||
| const { | ||
| toggleViewDetails, | ||
| toggleViewData, | ||
| copyContractAddress, | ||
| address, | ||
| host, | ||
| allowance, | ||
| tokenSymbol, | ||
| data, | ||
| method, | ||
| displayViewData | ||
| } = this.props; | ||
|
|
||
| return ( | ||
| <> | ||
| <View style={styles.section}> | ||
| <ConnectHeader | ||
| action={toggleViewDetails} | ||
| title={strings('spend_limit_edition.transaction_details')} | ||
| /> | ||
| <View style={styles.transactionDetails}> | ||
| <View style={styles.transactionDetailsRow}> | ||
| <Text style={styles.transactionDetailsTextLeft}> | ||
| {strings('spend_limit_edition.site_url')} | ||
| </Text> | ||
| <Text style={styles.transactionDetailsTextRight}>{host}</Text> | ||
| </View> | ||
| <View style={styles.transactionDetailsRow}> | ||
| <Text style={styles.transactionDetailsTextLeft}> | ||
| {strings('spend_limit_edition.contract_address')} | ||
| </Text> | ||
| <View style={styles.transactionDetailsTextRight}> | ||
| <Text style={styles.address}>{address}</Text> | ||
| <Feather | ||
| name="copy" | ||
| size={16} | ||
| color={colors.blue} | ||
| style={styles.copyIcon} | ||
| onPress={copyContractAddress} | ||
| /> | ||
| </View> | ||
| </View> | ||
| <View style={styles.transactionDetailsRow}> | ||
| <Text style={styles.transactionDetailsTextLeft}> | ||
| {strings('spend_limit_edition.allowance')} | ||
| </Text> | ||
| <Text style={styles.transactionDetailsTextRight}> | ||
| {allowance} {tokenSymbol} | ||
| </Text> | ||
| </View> | ||
| </View> | ||
| <View style={styles.viewData}> | ||
| <TouchableOpacity style={styles.viewDataRow} onPress={toggleViewData}> | ||
| <Text style={styles.viewDataTitle}>{strings('spend_limit_edition.view_data')}</Text> | ||
| <View style={styles.viewDataArrow}> | ||
| <IonicIcon | ||
| name={`ios-arrow-${displayViewData ? 'up' : 'down'}`} | ||
| size={16} | ||
| color={colors.grey500} | ||
| /> | ||
| </View> | ||
| </TouchableOpacity> | ||
| {displayViewData ? ( | ||
| <> | ||
| <Text style={[styles.viewDataText, styles.uppercase]}> | ||
| {strings('spend_limit_edition.function')}: {method} | ||
| </Text> | ||
| <Text style={styles.viewDataText}>{data}</Text> | ||
| </> | ||
| ) : null} | ||
| </View> | ||
| </View> | ||
| </> | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.