Skip to content

Commit

Permalink
[Wallet] Differentiate dollars and gold transactions (#1021)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jeanregisser @ashishb
jeanregisser authored and ashishb committed Sep 17, 2019
1 parent 789d576 commit e79c0e0
Show file tree
Hide file tree
Showing 11 changed files with 179 additions and 105 deletions.
1 change: 1 addition & 0 deletions packages/mobile/locales/en-US/exchangeFlow9.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
"whatIsGold": "Gold is where you can choose to store {{CeloDollars}} you have",
"manageCelo": "Manage {{CeloDollars}}",
"activity": "Activity",
"goldActivity": "Gold Activity",
"exchangeRate": "Estimated Exchange Rate",
"history": "History",
"exchange": "Exchange",
Expand Down
1 change: 1 addition & 0 deletions packages/mobile/locales/es-419/exchangeFlow9.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
"whatIsGold": "Puede elegir guardar sus {{CeloDollars}} en Celo Oro",
"manageCelo": "Administrar {{CeloDollars}}",
"activity": "Actividad",
"goldActivity": "Actividad de Oro",
"exchangeRate": "Estimada tasa de cambio",
"history": "Historial",
"exchange": "Cambio",
Expand Down
2 changes: 1 addition & 1 deletion packages/mobile/src/exchange/ExchangeHomeScreen.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ export class ExchangeHomeScreen extends React.Component<Props> {
/>
</View>
</View>
<SectionHeadNew text={t('activity')} />
<SectionHeadNew text={t('goldActivity')} />
<View style={styles.activity}>
<Activity />
</View>
Expand Down
2 changes: 1 addition & 1 deletion packages/mobile/src/transactions/ExchangeFeedItem.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ describe('ExchangeFeedItem', () => {
outSymbol={CURRENCY_ENUM.GOLD}
inSymbol={CURRENCY_ENUM.DOLLAR}
timestamp={1}
showImage={false}
showGoldAmount={true}
{...getMockI18nProps()}
/>
</Provider>
Expand Down
106 changes: 66 additions & 40 deletions packages/mobile/src/transactions/ExchangeFeedItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,54 @@ import { formatFeedTime, getDatetimeDisplayString } from 'src/utils/time'

type Props = (HomeExchangeFragment | ExchangeStandby) &
WithNamespaces & {
showImage: boolean
status?: TransactionStatus
showGoldAmount: boolean
}

type ExchangeProps = ReturnType<typeof getDollarExchangeProps>

function getDollarExchangeProps({ inValue, outValue }: Props) {
return {
icon: require('src/transactions/ExchangeGreenGold.png'),
dollarAmount: inValue,
dollarDirection: '-',
goldAmount: outValue,
goldDirection: '',
inColor: colors.celoGreen,
outColor: colors.celoGold,
}
}

function getGoldExchangeProps({ inValue, outValue }: Props) {
return {
icon: require('src/transactions/ExchangeGoldGreen.png'),
dollarAmount: outValue,
dollarDirection: '',
goldAmount: inValue,
goldDirection: '-',
inColor: colors.celoGold,
outColor: colors.celoGreen,
}
}

function getGoldAmountProps({ goldAmount, goldDirection }: ExchangeProps) {
return {
amount: goldAmount,
amountDirection: goldDirection,
amountColor: colors.celoGold,
}
}

function getDollarAmountProps({ dollarAmount, dollarDirection }: ExchangeProps) {
return {
amount: dollarAmount,
amountDirection: dollarDirection,
amountColor: colors.celoGreen,
}
}

export function ExchangeFeedItem(props: Props) {
const { showImage, t, inSymbol, inValue, status, outValue, outSymbol, timestamp, i18n } = props
const { showGoldAmount, inSymbol, inValue, outValue, status, timestamp, t, i18n } = props

const onPress = () => {
navigateToExchangeReview(timestamp, {
Expand All @@ -33,58 +75,44 @@ export function ExchangeFeedItem(props: Props) {
}

const inCurrency = resolveCurrency(inSymbol)
const outCurrency = resolveCurrency(outSymbol)
const dollarAmount = inCurrency === CURRENCY_ENUM.DOLLAR ? inValue : outValue
const dollarDirection = inCurrency === CURRENCY_ENUM.DOLLAR ? '-' : ''
const exchangeProps =
inCurrency === CURRENCY_ENUM.DOLLAR
? getDollarExchangeProps(props)
: getGoldExchangeProps(props)
const { amount, amountDirection, amountColor } = showGoldAmount
? getGoldAmountProps(exchangeProps)
: getDollarAmountProps(exchangeProps)

const timeFormatted = formatFeedTime(timestamp, i18n)
const dateTimeFormatted = getDatetimeDisplayString(timestamp, t, i18n)
const isPending = status === TransactionStatus.Pending

const inStyle = {
color: isPending
? colors.gray
: inCurrency === CURRENCY_ENUM.DOLLAR
? colors.celoGreen
: colors.celoGold,
}

const outStyle = {
color: isPending
? colors.gray
: outCurrency === CURRENCY_ENUM.DOLLAR
? colors.celoGreen
: colors.celoGold,
}
const { inColor, outColor, icon } = exchangeProps
const inStyle = { color: isPending ? colors.gray : inColor }
const outStyle = { color: isPending ? colors.gray : outColor }

return (
<Touchable onPress={onPress}>
<View style={styles.container}>
{showImage && (
<View style={styles.imageContainer}>
<Image
source={
inCurrency === CURRENCY_ENUM.DOLLAR
? require(`src/transactions/ExchangeGreenGold.png`)
: require(`src/transactions/ExchangeGoldGreen.png`)
}
style={styles.image}
resizeMode="contain"
/>
</View>
)}
<View style={[styles.contentContainer, showImage && styles.contentContainerWithImage]}>
<View style={styles.imageContainer}>
<Image source={icon} style={styles.image} resizeMode="contain" />
</View>
<View style={styles.contentContainer}>
<View style={styles.titleContainer}>
<Text style={fontStyles.bodySmallSemiBold}>{t('exchange')}</Text>
<Text
style={[
dollarDirection === '-'
amountDirection === '-'
? fontStyles.activityCurrencySent
: fontStyles.activityCurrencyReceived,
: {
...fontStyles.activityCurrencyReceived,
color: amountColor,
},
styles.amount,
]}
>
{dollarDirection}
{getMoneyDisplayValue(dollarAmount)}
{amountDirection}
{getMoneyDisplayValue(amount)}
</Text>
</View>
<View style={styles.exchangeContainer}>
Expand Down Expand Up @@ -148,8 +176,6 @@ const styles = StyleSheet.create({
},
contentContainer: {
flex: 1,
},
contentContainerWithImage: {
marginLeft: variables.contentPadding,
},
titleContainer: {
Expand Down
34 changes: 29 additions & 5 deletions packages/mobile/src/transactions/TransactionFeed.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import * as React from 'react'
import { FlatList } from 'react-native'
import { connect } from 'react-redux'
import { Event, EventTypeNames, UserTransactionsData } from 'src/apollo/types'
import { CURRENCY_ENUM, resolveCurrency } from 'src/geth/consts'
import { AddressToE164NumberType } from 'src/identity/reducer'
import { Invitees, SENTINEL_INVITE_COMMENT } from 'src/invite/actions'
import { NumberToRecipient } from 'src/recipients/recipient'
Expand Down Expand Up @@ -48,6 +49,20 @@ const mapStateToProps = (state: RootState): StateProps => ({
recipientCache: recipientCacheSelector(state),
})

function exchangeFilter(tx: Event) {
return (
tx !== null &&
(tx.__typename === EventTypeNames.Exchange || resolveCurrency(tx.symbol) === CURRENCY_ENUM.GOLD)
)
}

function defaultFilter(tx: Event) {
return (
tx !== null &&
(tx.__typename === EventTypeNames.Exchange || resolveCurrency(tx.symbol) !== CURRENCY_ENUM.GOLD)
)
}

export class TransactionFeed extends React.PureComponent<Props> {
// TODO(cmcewen): Clean this up. Standby txs should have the same data shape
renderItem = (commentKeyBuffer: Buffer | null) => ({
Expand Down Expand Up @@ -79,6 +94,7 @@ export class TransactionFeed extends React.PureComponent<Props> {
addressToE164Number={addressToE164Number}
recipientCache={recipientCache}
commentKey={commentKeyBuffer}
showLocalCurrency={kind === FeedType.HOME}
{...tx}
/>
)
Expand All @@ -87,14 +103,14 @@ export class TransactionFeed extends React.PureComponent<Props> {
return (
// @ts-ignore
<ExchangeFeedItem
showImage={kind === FeedType.HOME}
status={TransactionStatus.Complete}
showGoldAmount={kind === FeedType.EXCHANGE}
{...tx}
/>
)
} else if (tx.type && tx.type === TransactionTypes.EXCHANGE) {
// @ts-ignore
return <ExchangeFeedItem showImage={kind === FeedType.HOME} {...tx} />
return <ExchangeFeedItem showGoldAmount={kind === FeedType.EXCHANGE} {...tx} />
} else if (tx.type) {
return (
// @ts-ignore
Expand All @@ -103,6 +119,7 @@ export class TransactionFeed extends React.PureComponent<Props> {
addressToE164Number={addressToE164Number}
invitees={invitees}
commentKey={commentKeyBuffer}
showLocalCurrency={kind === FeedType.HOME}
{...tx}
/>
)
Expand All @@ -115,6 +132,14 @@ export class TransactionFeed extends React.PureComponent<Props> {
return item.hash + item.timestamp.toString()
}

getQueryFilter = () => {
if (this.props.kind === FeedType.EXCHANGE) {
return exchangeFilter
} else {
return defaultFilter
}
}

render() {
const {
kind,
Expand Down Expand Up @@ -144,9 +169,8 @@ export class TransactionFeed extends React.PureComponent<Props> {
}

// TODO move filter to gql
const exchangeFilter = (tx: Event) =>
tx !== null && (kind === FeedType.EXCHANGE ? tx.__typename === EventTypeNames.Exchange : true)
const filteredQueryTxs = events.filter(exchangeFilter)
const queryFilter = this.getQueryFilter()
const filteredQueryTxs = events.filter(queryFilter)
const txData = [...filteredStandbyTxs, ...filteredQueryTxs]

if (txData.length > 0) {
Expand Down
12 changes: 12 additions & 0 deletions packages/mobile/src/transactions/TransferFeedItem.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ describe('transfer feed item renders correctly', () => {
commentKey={null}
addressToE164Number={{}}
recipientCache={{}}
showLocalCurrency={true}
{...getMockI18nProps()}
/>
</Provider>
Expand All @@ -65,6 +66,7 @@ describe('transfer feed item renders correctly', () => {
commentKey={mockPrivateDEK}
addressToE164Number={{}}
recipientCache={{}}
showLocalCurrency={true}
{...getMockI18nProps()}
/>
</Provider>
Expand All @@ -87,6 +89,7 @@ describe('transfer feed item renders correctly', () => {
commentKey={mockPrivateDEK2}
addressToE164Number={{}}
recipientCache={{}}
showLocalCurrency={true}
{...getMockI18nProps()}
/>
</Provider>
Expand All @@ -109,6 +112,7 @@ describe('transfer feed item renders correctly', () => {
commentKey={null}
addressToE164Number={{}}
recipientCache={{}}
showLocalCurrency={true}
{...getMockI18nProps()}
/>
</Provider>
Expand All @@ -131,6 +135,7 @@ describe('transfer feed item renders correctly', () => {
commentKey={null}
addressToE164Number={{}}
recipientCache={{}}
showLocalCurrency={true}
{...getMockI18nProps()}
/>
</Provider>
Expand All @@ -153,6 +158,7 @@ describe('transfer feed item renders correctly', () => {
commentKey={null}
addressToE164Number={{}}
recipientCache={{}}
showLocalCurrency={true}
{...getMockI18nProps()}
/>
</Provider>
Expand All @@ -175,6 +181,7 @@ describe('transfer feed item renders correctly', () => {
commentKey={null}
addressToE164Number={{}}
recipientCache={{}}
showLocalCurrency={true}
{...getMockI18nProps()}
/>
</Provider>
Expand All @@ -197,6 +204,7 @@ describe('transfer feed item renders correctly', () => {
commentKey={null}
addressToE164Number={{}}
recipientCache={{}}
showLocalCurrency={true}
{...getMockI18nProps()}
/>
</Provider>
Expand All @@ -219,6 +227,7 @@ describe('transfer feed item renders correctly', () => {
commentKey={null}
addressToE164Number={{}}
recipientCache={{}}
showLocalCurrency={true}
{...getMockI18nProps()}
/>
</Provider>
Expand All @@ -241,6 +250,7 @@ describe('transfer feed item renders correctly', () => {
commentKey={null}
addressToE164Number={mockAddressToE164Number}
recipientCache={mockRecipientCache}
showLocalCurrency={true}
{...getMockI18nProps()}
/>
</Provider>
Expand All @@ -263,6 +273,7 @@ describe('transfer feed item renders correctly', () => {
commentKey={null}
addressToE164Number={{}}
recipientCache={{}}
showLocalCurrency={true}
{...getMockI18nProps()}
/>
</Provider>
Expand All @@ -285,6 +296,7 @@ describe('transfer feed item renders correctly', () => {
commentKey={null}
addressToE164Number={mockAddressToE164Number}
recipientCache={mockRecipientCache}
showLocalCurrency={true}
{...getMockI18nProps()}
/>
</Provider>
Expand Down
Loading

0 comments on commit e79c0e0

Please sign in to comment.