Skip to content

Commit

Permalink
Merge pull request #2534 from fioprotocol/feature/ui2-create-wallet-c…
Browse files Browse the repository at this point in the history 
…onfirmation

Create wallet confirmation UI2 design.
  • Loading branch information
@thehobbit85
thehobbit85 authored Apr 23, 2021
2 parents 4f8a050 + dd016d0 commit a447578
Show file tree
Hide file tree
Showing 3 changed files with 66 additions and 109 deletions.
3 changes: 1 addition & 2 deletions src/components/Main.ui.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -233,8 +233,7 @@ export class MainComponent extends React.Component<Props> {
key={Constants.CREATE_WALLET_REVIEW}
navTransparent
component={ifLoggedIn(CreateWalletReviewScene)}
renderTitle={<HeaderTitle title={s.strings.title_create_wallet} />}
renderLeftButton={<BackButton withArrow onPress={this.handleBack} label={s.strings.title_back} />}
renderLeftButton={<BackButton withArrow onPress={this.handleBack} />}
renderRightButton={this.renderEmptyButton()}
/>

Expand Down
159 changes: 57 additions & 102 deletions src/components/scenes/CreateWalletReviewScene.js
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,24 @@
// @flow

import * as React from 'react'
import { ActivityIndicator, Image, Keyboard, StyleSheet, View } from 'react-native'
import { ActivityIndicator, Image, Keyboard, View } from 'react-native'
import { Actions } from 'react-native-router-flux'
import { connect } from 'react-redux'

import { createCurrencyWallet } from '../../actions/CreateWalletActions.js'
import CheckIcon from '../../assets/images/createWallet/check_icon_lg.png'
import { WALLET_LIST_SCENE } from '../../constants/indexConstants.js'
import s from '../../locales/strings.js'
import { PrimaryButton } from '../../modules/UI/components/Buttons/PrimaryButton.ui.js'
import { SecondaryButton } from '../../modules/UI/components/Buttons/SecondaryButton.ui.js'
import Text from '../../modules/UI/components/FormattedText/FormattedText.ui.js'
import Gradient from '../../modules/UI/components/Gradient/Gradient.ui'
import SafeAreaView from '../../modules/UI/components/SafeAreaView/SafeAreaView.ui.js'
import { THEME } from '../../theme/variables/airbitz.js'
import { PLATFORM } from '../../theme/variables/platform.js'
import { type Dispatch, type RootState } from '../../types/reduxTypes.js'
import type { CreateWalletType, GuiFiatType } from '../../types/types.js'
import { scale } from '../../util/scaling.js'
import { fixFiatCurrencyCode } from '../../util/utils'
import { FullScreenTransitionComponent } from '../common/FullScreenTransition.js'
import { SceneWrapper } from '../common/SceneWrapper'
import { type Theme, type ThemeProps, cacheStyles, withTheme } from '../services/ThemeContext.js'
import { EdgeText } from '../themed/EdgeText'
import { SceneHeader } from '../themed/SceneHeader'
import { SecondaryButton } from '../themed/ThemedButtons'
import { Tile } from '../themed/Tile'

type OwnProps = {
walletName: string,
Expand All @@ -34,7 +32,7 @@ type StateProps = {
type DispatchProps = {
createCurrencyWallet(walletName: string, walletType: string, fiatCurrencyCode: string, cleanedPrivateKey?: string): void
}
type Props = OwnProps & StateProps & DispatchProps
type Props = OwnProps & StateProps & DispatchProps & ThemeProps

type State = {
isAnimationVisible: boolean
Expand All @@ -52,6 +50,8 @@ class CreateWalletReviewComponent extends React.Component<Props, State> {
Keyboard.dismiss()
}

goToWalletList = () => Actions.popTo(WALLET_LIST_SCENE)

onSubmit = async () => {
const { walletName, selectedWalletType, selectedFiat, cleanedPrivateKey, createCurrencyWallet } = this.props
const createdWallet = await createCurrencyWallet(walletName, selectedWalletType.walletType, fixFiatCurrencyCode(selectedFiat.value), cleanedPrivateKey)
Expand All @@ -63,127 +63,82 @@ class CreateWalletReviewComponent extends React.Component<Props, State> {
}
}

onBack = () => {
Actions.pop()
}

render() {
const { isCreatingWallet } = this.props
const { isCreatingWallet, theme } = this.props
const { isAnimationVisible } = this.state
const styles = getStyles(theme)

return (
<SafeAreaView>
<SceneWrapper background="theme">
{!isAnimationVisible ? (
<View style={styles.scene}>
<Gradient style={styles.gradient} />

<View style={styles.view}>
<View style={styles.instructionalArea}>
<Text style={styles.instructionalText}>{s.strings.create_wallet_top_instructions}</Text>
</View>
<View style={styles.reviewArea}>
<Text style={styles.reviewAreaText}>
{s.strings.create_wallet_crypto_type_label} {this.props.selectedWalletType.currencyName} - {this.props.selectedWalletType.currencyCode}
</Text>
<Text style={styles.reviewAreaText}>
{s.strings.create_wallet_fiat_type_label} {this.props.selectedFiat.label}
</Text>
<Text style={styles.reviewAreaText}>
{s.strings.create_wallet_name_label} {this.props.walletName}
</Text>
</View>

<View style={styles.buttons}>
<SecondaryButton style={styles.cancel} onPress={this.onBack}>
<SecondaryButton.Text>{s.strings.title_back}</SecondaryButton.Text>
</SecondaryButton>
<View style={styles.view}>
<SceneHeader withTopMargin title={s.strings.title_create_wallet} />
<EdgeText style={styles.instructionalText} numberOfLines={2}>
{s.strings.create_wallet_top_instructions}
</EdgeText>
<Tile
type="static"
title={s.strings.create_wallet_crypto_type_label}
body={`${this.props.selectedWalletType.currencyName} - ${this.props.selectedWalletType.currencyCode}`}
contentPadding={false}
/>
<Tile type="static" title={s.strings.create_wallet_fiat_type_label} body={this.props.selectedFiat.label} contentPadding={false} />
<Tile type="static" title={s.strings.create_wallet_name_label} body={this.props.walletName} contentPadding={false} />

<PrimaryButton style={styles.create} onPress={this.onSubmit} disabled={isCreatingWallet}>
{isCreatingWallet ? (
<ActivityIndicator color={THEME.COLORS.ACCENT_MINT} />
) : (
<PrimaryButton.Text>{s.strings.fragment_create_wallet_create_wallet}</PrimaryButton.Text>
)}
</PrimaryButton>
</View>
</View>
<SecondaryButton style={styles.create} onPress={this.onSubmit} disabled={isCreatingWallet} marginRem={[2, 5, 1]}>
{isCreatingWallet ? (
<ActivityIndicator color={theme.iconTappable} />
) : (
<EdgeText style={styles.createWalletBtnText}>{s.strings.fragment_create_wallet_create_wallet}</EdgeText>
)}
</SecondaryButton>
</View>
) : (
<FullScreenTransitionComponent
onDone={() => Actions.popTo(WALLET_LIST_SCENE)}
image={<Image source={CheckIcon} style={[styles.currencyLogo, { marginBottom: 36 }]} resizeMode="cover" />}
text={<Text style={styles.createWalletImportTransitionText}>{s.strings.create_wallet_import_successful}</Text>}
onDone={this.goToWalletList}
image={<Image source={CheckIcon} style={styles.currencyLogo} resizeMode="cover" />}
text={<EdgeText style={styles.createWalletImportTransitionText}>{s.strings.create_wallet_import_successful}</EdgeText>}
/>
)}
</SafeAreaView>
</SceneWrapper>
)
}
}

const rawStyles = {
scene: {
flex: 1,
backgroundColor: THEME.COLORS.WHITE
},
gradient: {
height: THEME.HEADER,
width: '100%',
position: 'absolute'
},
const getStyles = cacheStyles((theme: Theme) => ({
view: {
position: 'relative',
top: THEME.HEADER,
paddingHorizontal: 20,
height: PLATFORM.usableHeight
flex: 1,
position: 'relative'
},
currencyLogo: {
alignSelf: 'center',
marginTop: scale(24),
height: scale(64),
width: scale(64)
},
instructionalArea: {
paddingVertical: scale(16),
paddingHorizontal: scale(20)
marginTop: theme.rem(1.5),
marginBottom: theme.rem(2.25),
height: theme.rem(4),
width: theme.rem(4)
},
instructionalText: {
fontSize: scale(16),
textAlign: 'center',
color: THEME.COLORS.GRAY_1
},
reviewArea: {
paddingVertical: scale(18)
},
reviewAreaText: {
fontSize: scale(16),
lineHeight: scale(24),
color: THEME.COLORS.BLACK
fontSize: theme.rem(1),
color: theme.primaryText,
paddingHorizontal: theme.rem(1),
marginTop: theme.rem(0.5),
marginBottom: theme.rem(2)
},
text: {
color: THEME.COLORS.WHITE
},
buttons: {
marginTop: scale(24),
flexDirection: 'row'
color: theme.primaryText
},
create: {
flex: 1
},
cancel: {
flex: 1,
marginRight: scale(2),
backgroundColor: THEME.COLORS.GRAY_2,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 3
},
createWalletImportTransitionText: {
fontSize: 24,
fontSize: theme.rem(1.5),
textAlign: 'center',
color: THEME.COLORS.SECONDARY
color: theme.secondaryText
},
createWalletBtnText: {
color: theme.secondaryButtonText
}
}
const styles: typeof rawStyles = StyleSheet.create(rawStyles)
}))

export const CreateWalletReviewScene = connect(
(state: RootState): StateProps => ({
Expand All @@ -194,4 +149,4 @@ export const CreateWalletReviewScene = connect(
dispatch(createCurrencyWallet(walletName, walletType, fiatCurrencyCode, true, false, importText))
}
})
)(CreateWalletReviewComponent)
)(withTheme(CreateWalletReviewComponent))
13 changes: 8 additions & 5 deletions src/components/themed/Tile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,8 @@ type OwnProps = {
error?: boolean,
onPress?: () => void,
title: string,
type: 'editable' | 'static' | 'touchable' | 'copy' | 'loading'
type: 'editable' | 'static' | 'touchable' | 'copy' | 'loading',
contentPadding?: boolean
}
type Props = OwnProps & ThemeProps

Expand All @@ -28,14 +29,14 @@ class TileComponent extends React.PureComponent<Props> {
}

render() {
const { body, title, children, theme, type, error } = this.props
const { body, title, contentPadding = true, children, theme, type, error } = this.props
const styles = getStyles(theme)
const onPress = type === 'copy' ? () => this.copy() : this.props.onPress
if (type === 'loading') {
return (
<View>
<View style={styles.container}>
<View style={styles.content}>
<View style={[styles.content, contentPadding ? styles.contentPadding : null]}>
<EdgeText style={styles.textHeader}>{title}</EdgeText>
<ActivityIndicator style={styles.loader} color={theme.primaryText} size="large" />
</View>
Expand All @@ -48,7 +49,7 @@ class TileComponent extends React.PureComponent<Props> {
<TouchableWithoutFeedback onPress={onPress} disabled={type === 'static'}>
<View>
<View style={styles.container}>
<View style={styles.content}>
<View style={[styles.content, contentPadding ? styles.contentPadding : null]}>
{type === 'editable' && <FontAwesomeIcon name="edit" style={styles.editIcon} />}
{type === 'copy' && <FontAwesomeIcon name="copy" style={styles.editIcon} />}
<EdgeText style={error ? styles.textHeaderError : styles.textHeader}>{title}</EdgeText>
Expand Down Expand Up @@ -82,7 +83,9 @@ const getStyles = cacheStyles((theme: Theme) => ({
alignItems: 'center'
},
content: {
flex: 1,
flex: 1
},
contentPadding: {
paddingLeft: theme.rem(0.25)
},
iconContainer: {
Expand Down

0 comments on commit a447578

Please sign in to comment.