diff --git a/packages/mobile/locales/en-US/exchangeFlow9.json b/packages/mobile/locales/en-US/exchangeFlow9.json index ab30c5cfded..d0bb74a1967 100644 --- a/packages/mobile/locales/en-US/exchangeFlow9.json +++ b/packages/mobile/locales/en-US/exchangeFlow9.json @@ -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", diff --git a/packages/mobile/locales/es-419/exchangeFlow9.json b/packages/mobile/locales/es-419/exchangeFlow9.json index a89575b02b2..43032ced7f5 100755 --- a/packages/mobile/locales/es-419/exchangeFlow9.json +++ b/packages/mobile/locales/es-419/exchangeFlow9.json @@ -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", diff --git a/packages/mobile/src/exchange/ExchangeHomeScreen.tsx b/packages/mobile/src/exchange/ExchangeHomeScreen.tsx index e6290cf3198..f801774bbf3 100644 --- a/packages/mobile/src/exchange/ExchangeHomeScreen.tsx +++ b/packages/mobile/src/exchange/ExchangeHomeScreen.tsx @@ -68,7 +68,7 @@ export class ExchangeHomeScreen extends React.Component { /> - + diff --git a/packages/mobile/src/transactions/ExchangeFeedItem.test.tsx b/packages/mobile/src/transactions/ExchangeFeedItem.test.tsx index 9ee0f9749be..b31364a7cb2 100644 --- a/packages/mobile/src/transactions/ExchangeFeedItem.test.tsx +++ b/packages/mobile/src/transactions/ExchangeFeedItem.test.tsx @@ -36,7 +36,7 @@ describe('ExchangeFeedItem', () => { outSymbol={CURRENCY_ENUM.GOLD} inSymbol={CURRENCY_ENUM.DOLLAR} timestamp={1} - showImage={false} + showGoldAmount={true} {...getMockI18nProps()} /> diff --git a/packages/mobile/src/transactions/ExchangeFeedItem.tsx b/packages/mobile/src/transactions/ExchangeFeedItem.tsx index af872965560..36b32f57609 100644 --- a/packages/mobile/src/transactions/ExchangeFeedItem.tsx +++ b/packages/mobile/src/transactions/ExchangeFeedItem.tsx @@ -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 + +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, { @@ -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 ( - {showImage && ( - - - - )} - + + + + {t('exchange')} - {dollarDirection} - {getMoneyDisplayValue(dollarAmount)} + {amountDirection} + {getMoneyDisplayValue(amount)} @@ -148,8 +176,6 @@ const styles = StyleSheet.create({ }, contentContainer: { flex: 1, - }, - contentContainerWithImage: { marginLeft: variables.contentPadding, }, titleContainer: { diff --git a/packages/mobile/src/transactions/TransactionFeed.tsx b/packages/mobile/src/transactions/TransactionFeed.tsx index 20077fb534a..76ff42a28fa 100644 --- a/packages/mobile/src/transactions/TransactionFeed.tsx +++ b/packages/mobile/src/transactions/TransactionFeed.tsx @@ -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' @@ -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 { // TODO(cmcewen): Clean this up. Standby txs should have the same data shape renderItem = (commentKeyBuffer: Buffer | null) => ({ @@ -79,6 +94,7 @@ export class TransactionFeed extends React.PureComponent { addressToE164Number={addressToE164Number} recipientCache={recipientCache} commentKey={commentKeyBuffer} + showLocalCurrency={kind === FeedType.HOME} {...tx} /> ) @@ -87,14 +103,14 @@ export class TransactionFeed extends React.PureComponent { return ( // @ts-ignore ) } else if (tx.type && tx.type === TransactionTypes.EXCHANGE) { // @ts-ignore - return + return } else if (tx.type) { return ( // @ts-ignore @@ -103,6 +119,7 @@ export class TransactionFeed extends React.PureComponent { addressToE164Number={addressToE164Number} invitees={invitees} commentKey={commentKeyBuffer} + showLocalCurrency={kind === FeedType.HOME} {...tx} /> ) @@ -115,6 +132,14 @@ export class TransactionFeed extends React.PureComponent { return item.hash + item.timestamp.toString() } + getQueryFilter = () => { + if (this.props.kind === FeedType.EXCHANGE) { + return exchangeFilter + } else { + return defaultFilter + } + } + render() { const { kind, @@ -144,9 +169,8 @@ export class TransactionFeed extends React.PureComponent { } // 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) { diff --git a/packages/mobile/src/transactions/TransferFeedItem.test.tsx b/packages/mobile/src/transactions/TransferFeedItem.test.tsx index b298d52a12a..962af648973 100644 --- a/packages/mobile/src/transactions/TransferFeedItem.test.tsx +++ b/packages/mobile/src/transactions/TransferFeedItem.test.tsx @@ -43,6 +43,7 @@ describe('transfer feed item renders correctly', () => { commentKey={null} addressToE164Number={{}} recipientCache={{}} + showLocalCurrency={true} {...getMockI18nProps()} /> @@ -65,6 +66,7 @@ describe('transfer feed item renders correctly', () => { commentKey={mockPrivateDEK} addressToE164Number={{}} recipientCache={{}} + showLocalCurrency={true} {...getMockI18nProps()} /> @@ -87,6 +89,7 @@ describe('transfer feed item renders correctly', () => { commentKey={mockPrivateDEK2} addressToE164Number={{}} recipientCache={{}} + showLocalCurrency={true} {...getMockI18nProps()} /> @@ -109,6 +112,7 @@ describe('transfer feed item renders correctly', () => { commentKey={null} addressToE164Number={{}} recipientCache={{}} + showLocalCurrency={true} {...getMockI18nProps()} /> @@ -131,6 +135,7 @@ describe('transfer feed item renders correctly', () => { commentKey={null} addressToE164Number={{}} recipientCache={{}} + showLocalCurrency={true} {...getMockI18nProps()} /> @@ -153,6 +158,7 @@ describe('transfer feed item renders correctly', () => { commentKey={null} addressToE164Number={{}} recipientCache={{}} + showLocalCurrency={true} {...getMockI18nProps()} /> @@ -175,6 +181,7 @@ describe('transfer feed item renders correctly', () => { commentKey={null} addressToE164Number={{}} recipientCache={{}} + showLocalCurrency={true} {...getMockI18nProps()} /> @@ -197,6 +204,7 @@ describe('transfer feed item renders correctly', () => { commentKey={null} addressToE164Number={{}} recipientCache={{}} + showLocalCurrency={true} {...getMockI18nProps()} /> @@ -219,6 +227,7 @@ describe('transfer feed item renders correctly', () => { commentKey={null} addressToE164Number={{}} recipientCache={{}} + showLocalCurrency={true} {...getMockI18nProps()} /> @@ -241,6 +250,7 @@ describe('transfer feed item renders correctly', () => { commentKey={null} addressToE164Number={mockAddressToE164Number} recipientCache={mockRecipientCache} + showLocalCurrency={true} {...getMockI18nProps()} /> @@ -263,6 +273,7 @@ describe('transfer feed item renders correctly', () => { commentKey={null} addressToE164Number={{}} recipientCache={{}} + showLocalCurrency={true} {...getMockI18nProps()} /> @@ -285,6 +296,7 @@ describe('transfer feed item renders correctly', () => { commentKey={null} addressToE164Number={mockAddressToE164Number} recipientCache={mockRecipientCache} + showLocalCurrency={true} {...getMockI18nProps()} /> diff --git a/packages/mobile/src/transactions/TransferFeedItem.tsx b/packages/mobile/src/transactions/TransferFeedItem.tsx index 7a8b184d207..236334e1706 100644 --- a/packages/mobile/src/transactions/TransferFeedItem.tsx +++ b/packages/mobile/src/transactions/TransferFeedItem.tsx @@ -42,6 +42,7 @@ type Props = (HomeTransferFragment | TransferStandby) & addressToE164Number: AddressToE164NumberType recipientCache: NumberToRecipient commentKey: Buffer | null + showLocalCurrency: boolean } interface CurrencySymbolProps { @@ -156,13 +157,15 @@ export function TransferFeedItem(props: Props) { invitees, addressToE164Number, recipientCache, + showLocalCurrency, } = props const localValue = useLocalAmount(value) let info = decryptComment(comment, commentKey, type) const timeFormatted = formatFeedTime(timestamp, i18n) const dateTimeFormatted = getDatetimeDisplayString(timestamp, t, i18n) - const currencyStyle = getCurrencyStyles(resolveCurrency(symbol), type) + const currency = resolveCurrency(symbol) + const currencyStyle = getCurrencyStyles(currency, type) const isPending = status === TransactionStatus.Pending let icon, title @@ -236,7 +239,10 @@ export function TransferFeedItem(props: Props) { style={[ currencyStyle.direction === '-' ? fontStyles.activityCurrencySent - : fontStyles.activityCurrencyReceived, + : { + ...fontStyles.activityCurrencyReceived, + color: currency === CURRENCY_ENUM.GOLD ? colors.celoGold : colors.celoGreen, + }, styles.amount, ]} > @@ -265,7 +271,8 @@ export function TransferFeedItem(props: Props) { {' ' + timeFormatted} )} - {LOCAL_CURRENCY_SYMBOL && + {showLocalCurrency && + LOCAL_CURRENCY_SYMBOL && localValue && ( {t('localCurrencyValue', { diff --git a/packages/mobile/src/transactions/__snapshots__/ExchangeFeedItem.test.tsx.snap b/packages/mobile/src/transactions/__snapshots__/ExchangeFeedItem.test.tsx.snap index 979a1a4d2a6..b8a0d674fed 100644 --- a/packages/mobile/src/transactions/__snapshots__/ExchangeFeedItem.test.tsx.snap +++ b/packages/mobile/src/transactions/__snapshots__/ExchangeFeedItem.test.tsx.snap @@ -28,12 +28,35 @@ exports[`ExchangeFeedItem renders correctly 1`] = ` > + + + - - - 1.00 + + 10.00