From 41901ee72661be7a39f9bd4259b5d1a9348c21c4 Mon Sep 17 00:00:00 2001 From: Pedro Pablo Aste Kompen Date: Wed, 29 Jun 2022 14:36:30 -0500 Subject: [PATCH 1/2] Add pull to refresh and new design to Fiat Order Details view --- .../Views/OrderDetails.tsx | 73 +- .../components/Account.tsx | 28 +- .../components/OrderDetails.tsx | 623 ++++++++++-------- .../hooks/useAnalytics.ts | 33 +- app/components/UI/FiatOrders/index.js | 56 +- .../Views/FiatOrdersView/OrderListItem.js | 8 +- app/reducers/fiatOrders/index.js | 3 + locales/languages/en.json | 4 +- 8 files changed, 463 insertions(+), 365 deletions(-) diff --git a/app/components/UI/FiatOnRampAggregator/Views/OrderDetails.tsx b/app/components/UI/FiatOnRampAggregator/Views/OrderDetails.tsx index c060ba8e233..263973d25cd 100644 --- a/app/components/UI/FiatOnRampAggregator/Views/OrderDetails.tsx +++ b/app/components/UI/FiatOnRampAggregator/Views/OrderDetails.tsx @@ -1,26 +1,23 @@ -import React, { useCallback, useEffect } from 'react'; -import { View, StyleSheet } from 'react-native'; +import React, { useCallback, useEffect, useState } from 'react'; +import { RefreshControl } from 'react-native'; import ScreenLayout from '../components/ScreenLayout'; import StyledButton from '../../StyledButton'; import { useNavigation, useRoute } from '@react-navigation/native'; import OrderDetail from '../components/OrderDetails'; -import Account from '../components/Account'; import { strings } from '../../../../../locales/i18n'; -import { makeOrderIdSelector } from '../../../../reducers/fiatOrders'; -import { useSelector } from 'react-redux'; +import { + makeOrderIdSelector, + updateFiatOrder, +} from '../../../../reducers/fiatOrders'; +import { useDispatch, useSelector } from 'react-redux'; import { getFiatOnRampAggNavbar } from '../../Navbar'; import { useTheme } from '../../../../util/theme'; import { ScrollView } from 'react-native-gesture-handler'; import Routes from '../../../../constants/navigation/Routes'; -import { FiatOrder } from '../../FiatOrders'; +import { FiatOrder, processFiatOrder } from '../../FiatOrders'; import useAnalytics from '../hooks/useAnalytics'; import { Order } from '@consensys/on-ramp-sdk'; - -const styles = StyleSheet.create({ - screenLayout: { - paddingTop: 0, - }, -}); +import Logger from '../../../../util/Logger'; const OrderDetails = () => { const trackEvent = useAnalytics(); @@ -38,6 +35,9 @@ const OrderDetails = () => { ); const { colors } = useTheme(); const navigation = useNavigation(); + const dispatch = useDispatch(); + + const [isRefreshing, setIsRefreshing] = useState(false); useEffect(() => { navigation.setOptions( @@ -65,6 +65,27 @@ const OrderDetails = () => { // eslint-disable-next-line react-hooks/exhaustive-deps }, [trackEvent]); + const dispatchUpdateFiatOrder = useCallback( + (updatedOrder) => { + dispatch(updateFiatOrder(updatedOrder)); + }, + [dispatch], + ); + + const handleOnRefresh = useCallback(async () => { + try { + setIsRefreshing(true); + await processFiatOrder(order, dispatchUpdateFiatOrder); + } catch (error) { + Logger.error(error as Error, { + message: 'FiatOrders::OrderDetails error while processing order', + order, + }); + } finally { + setIsRefreshing(false); + } + }, [dispatchUpdateFiatOrder, order]); + const handleMakeAnotherPurchase = useCallback(() => { navigation.goBack(); navigation.navigate(Routes.FIAT_ON_RAMP_AGGREGATOR.ID); @@ -76,12 +97,18 @@ const OrderDetails = () => { return ( - - - - + + } + > - + { - - - {strings( - 'fiat_on_ramp_aggregator.order_details.another_purchase', - )} - - + + {strings( + 'fiat_on_ramp_aggregator.order_details.another_purchase', + )} + diff --git a/app/components/UI/FiatOnRampAggregator/components/Account.tsx b/app/components/UI/FiatOnRampAggregator/components/Account.tsx index d0116275336..bd6002286dc 100644 --- a/app/components/UI/FiatOnRampAggregator/components/Account.tsx +++ b/app/components/UI/FiatOnRampAggregator/components/Account.tsx @@ -6,16 +6,13 @@ import BaseText from '../../../Base/Text'; import { View, StyleSheet } from 'react-native'; import { useTheme } from '../../../../util/theme'; import { Colors } from '../../../../util/theme/models'; - +import { colors as importedColors } from '../../../../styles/common'; // TODO: Convert into typescript and correctly type const Text = BaseText as any; const Identicon = JSIdenticon as any; const createStyles = (colors: Colors) => StyleSheet.create({ - selector: { - flexShrink: 1, - }, accountText: { flexShrink: 1, marginVertical: 3, @@ -31,9 +28,20 @@ const createStyles = (colors: Colors) => justifyContent: 'center', flexShrink: 1, }, + transparentContainer: { + backgroundColor: importedColors.transparent, + paddingVertical: 0, + paddingHorizontal: 0, + }, }); -const Account = () => { +const Account = ({ + address, + transparent = false, +}: { + address?: string; + transparent?: boolean; +}) => { const { colors } = useTheme(); const styles = createStyles(colors); const selectedAddress = useSelector( @@ -45,11 +53,13 @@ const Account = () => { state.engine.backgroundState.PreferencesController.identities, ); return ( - - + + - {identities[selectedAddress]?.name} ( - ) + {identities[address || selectedAddress]?.name} ( + ) ); diff --git a/app/components/UI/FiatOnRampAggregator/components/OrderDetails.tsx b/app/components/UI/FiatOnRampAggregator/components/OrderDetails.tsx index 52888ad0b22..a0c93768ad5 100644 --- a/app/components/UI/FiatOnRampAggregator/components/OrderDetails.tsx +++ b/app/components/UI/FiatOnRampAggregator/components/OrderDetails.tsx @@ -25,8 +25,11 @@ import Spinner from '../../AnimatedSpinner'; import useAnalytics from '../hooks/useAnalytics'; import { FiatOrder } from '../../FiatOrders'; import { PROVIDER_LINKS } from '../types'; -/* eslint-disable import/no-commonjs, @typescript-eslint/no-var-requires, @typescript-eslint/no-require-imports */ +import Account from './Account'; + +/* eslint-disable-next-line import/no-commonjs, @typescript-eslint/no-var-requires, @typescript-eslint/no-require-imports */ const failedIcon = require('./images/TransactionIcon_Failed.png'); + // TODO: Convert into typescript and correctly type optionals const Text = CustomText as any; const ListItem = BaseListItem as any; @@ -36,56 +39,30 @@ const createStyles = (colors: any) => stage: { alignItems: 'center', }, - provider: { - alignSelf: 'flex-end', - marginTop: 0, - }, - listItems: { - paddingVertical: 4, - }, seperationBottom: { paddingVertical: 4, paddingBottom: 18, }, - seperationTop: { - paddingVertical: 4, - paddingTop: 18, - }, transactionIdFlex: { flex: 1, }, - transactionTitle: { - marginBottom: 8, - }, line: { backgroundColor: colors.border.muted, height: 1, marginVertical: 12, }, - link: { - paddingTop: 10, - }, - fiatColor: { - paddingBottom: 12, - }, tokenAmount: { fontSize: 24, }, - stageDescription: { - paddingBottom: 5, - paddingTop: 10, - }, - stageMessage: { - paddingBottom: 4, - }, - contactDesc: { - flexDirection: 'row', - alignSelf: 'center', - paddingTop: 15, - }, flexZero: { flex: 0, }, + row: { + marginVertical: 4, + }, + group: { + marginVertical: 8, + }, }); interface PropsStage { @@ -95,6 +72,17 @@ interface PropsStage { providerName?: string; } +const Row: React.FC = (props) => { + const { colors } = useTheme(); + const styles = createStyles(colors); + return ; +}; +const Group: React.FC = (props) => { + const { colors } = useTheme(); + const styles = createStyles(colors); + return ; +}; + const Stage: React.FC = ({ stage, paymentType, @@ -106,74 +94,82 @@ const Stage: React.FC = ({ switch (stage) { case OrderStatusEnum.Completed: { return ( - <> + - - {strings('fiat_on_ramp_aggregator.order_details.successful')} - - - {strings('fiat_on_ramp_aggregator.order_details.your')}{' '} - {cryptocurrency || - strings('fiat_on_ramp_aggregator.order_details.crypto')}{' '} - {strings( - 'fiat_on_ramp_aggregator.order_details.available_in_account', - )} - - + + + {strings('fiat_on_ramp_aggregator.order_details.successful')} + + + {strings('fiat_on_ramp_aggregator.order_details.your')}{' '} + {cryptocurrency || + strings('fiat_on_ramp_aggregator.order_details.crypto')}{' '} + {strings( + 'fiat_on_ramp_aggregator.order_details.available_in_account', + )} + + + ); } case OrderStatusEnum.Cancelled: case OrderStatusEnum.Failed: { return ( - <> + - - {stage === 'FAILED' - ? strings('fiat_on_ramp_aggregator.order_details.failed') - : 'fiat_on_ramp.cancelled'} - - - {strings( - 'fiat_on_ramp_aggregator.order_details.failed_description', - { - provider: - providerName || - strings('fiat_on_ramp_aggregator.order_details.the_provider'), - }, - )} - - + + + {stage === 'FAILED' + ? strings('fiat_on_ramp_aggregator.order_details.failed') + : strings('fiat_on_ramp_aggregator.order_details.cancelled')} + + + {strings( + 'fiat_on_ramp_aggregator.order_details.failed_description', + { + provider: + providerName || + strings( + 'fiat_on_ramp_aggregator.order_details.the_provider', + ), + }, + )} + + + ); } case OrderStatusEnum.Pending: case OrderStatusEnum.Unknown: default: { return ( - <> + - - {stage === 'PENDING' - ? strings('fiat_on_ramp_aggregator.order_details.processing') - : strings('transaction.submitted')} - - {!paymentType?.includes('Credit') ? ( - - {strings( - 'fiat_on_ramp_aggregator.order_details.processing_bank_description', - )} + + + {stage === 'PENDING' + ? strings('fiat_on_ramp_aggregator.order_details.processing') + : strings('transaction.submitted')} - ) : ( - - {strings( - 'fiat_on_ramp_aggregator.order_details.processing_card_description', - )} - - )} - + {!paymentType?.includes('Credit') ? ( + + {strings( + 'fiat_on_ramp_aggregator.order_details.processing_bank_description', + )} + + ) : ( + + {strings( + 'fiat_on_ramp_aggregator.order_details.processing_card_description', + )} + + )} + + ); } } @@ -215,7 +211,7 @@ const OrderDetails: React.FC = ({ const trackEvent = useAnalytics(); const explorer = useBlockExplorer(provider, frequentRpcList); const styles = createStyles(colors); - const date = toDateFormat(createdAt); + const date = createdAt && toDateFormat(createdAt); const amountOut = Number(amount) - Number(cryptoFee); const exchangeRate = Number(amountOut) / Number(cryptoAmount); const providerName = getProviderName(order.provider, data); @@ -249,73 +245,104 @@ const OrderDetails: React.FC = ({ const supportLinkUrl = orderData?.provider?.links?.find( (link) => link.name === PROVIDER_LINKS.SUPPORT, )?.url; + const orderLink = orderData?.providerOrderLink; return ( - + - - - {orderData?.cryptoCurrency?.decimals && - cryptoAmount && - cryptoAmount !== 0 && - cryptocurrency ? ( - renderFromTokenMinimalUnit( - toTokenMinimalUnit( - cryptoAmount, - orderData?.cryptoCurrency?.decimals, - ).toString(), - orderData?.cryptoCurrency?.decimals, - ) - ) : ( - ... - )}{' '} - {cryptocurrency} - - {orderData?.fiatCurrency?.decimals && currencySymbol ? ( - - {currencySymbol} - {renderFiat(amountOut, currency, orderData?.fiatCurrency?.decimals)} - - ) : ( - ... - )} - - - {strings('fiat_on_ramp_aggregator.order_details.details')} - - - - - - {strings('fiat_on_ramp_aggregator.order_details.id')} - - - - - {orderData?.providerOrderId} - - - - - - - {strings('fiat_on_ramp_aggregator.order_details.date_and_time')} - - - - - {date} + + + {orderData?.cryptoCurrency?.decimals && + cryptoAmount && + cryptocurrency ? ( + renderFromTokenMinimalUnit( + toTokenMinimalUnit( + cryptoAmount, + orderData?.cryptoCurrency?.decimals, + ).toString(), + orderData?.cryptoCurrency?.decimals, + ) + ) : ( + ... + )}{' '} + {cryptocurrency} + + {orderData?.fiatCurrency?.decimals && currencySymbol ? ( + + {currencySymbol} + {renderFiat( + amountOut, + currency, + orderData?.fiatCurrency?.decimals, + )} + + ) : ( + + ... + + )} + + + {orderLink && ( + + handleProviderLinkPress(orderLink as string)} + > + + {strings( + 'fiat_on_ramp_aggregator.order_details.view_order_status', + { provider: providerName }, + )} - - - {orderData?.paymentMethod?.name && ( - + + + )} + + + + + + + + + + + {strings('fiat_on_ramp_aggregator.order_details.id')} + + + + + {orderData?.providerOrderId} + + + + + {Boolean(date) && ( + + + + + {strings( + 'fiat_on_ramp_aggregator.order_details.date_and_time', + )} + + + + + {date} + + + + + )} + {Boolean(orderData?.paymentMethod?.name) && ( + {strings( @@ -330,164 +357,184 @@ const OrderDetails: React.FC = ({ )} - {order.provider && orderData?.paymentMethod?.name && ( - - {strings('fiat_on_ramp_aggregator.order_details.via')}{' '} + {Boolean(order.provider && orderData?.paymentMethod?.name) && ( + {providerName} + {supportLinkUrl ? ( + <> + {' '} + •{' '} + + handleExplorerLinkPress(supportLinkUrl as string) + } + > + {strings( + 'fiat_on_ramp_aggregator.order_details.contact_support', + )} + + + ) : null} )} - - - - {strings('fiat_on_ramp_aggregator.order_details.token_amount')} - - - - {cryptoAmount && orderData?.cryptoCurrency?.decimals ? ( - - {renderFromTokenMinimalUnit( - toTokenMinimalUnit( - cryptoAmount, - orderData?.cryptoCurrency?.decimals, - ).toString(), - orderData?.cryptoCurrency?.decimals, - )}{' '} - {cryptocurrency} - - ) : ( - ... - )} - - - - - - {strings('fiat_on_ramp_aggregator.order_details.exchange_rate')} - - - - {order.cryptocurrency && - isFinite(exchangeRate) && - currency && - orderData?.fiatCurrency?.decimals ? ( - - 1 {order.cryptocurrency} @{' '} - {renderFiat( - exchangeRate, - currency, - orderData?.fiatCurrency?.decimals, + + + + + {strings( + 'fiat_on_ramp_aggregator.order_details.token_amount', )} - ) : ( - ... - )} - - - - - - - {currency}{' '} - {strings('fiat_on_ramp_aggregator.order_details.amount')} - - - - {orderData?.fiatCurrency?.decimals && amountOut && currency ? ( - - {currencySymbol} - {renderFiat( - amountOut, - currency, - orderData?.fiatCurrency?.decimals, + + + {cryptoAmount && orderData?.cryptoCurrency?.decimals ? ( + + {renderFromTokenMinimalUnit( + toTokenMinimalUnit( + cryptoAmount, + orderData?.cryptoCurrency?.decimals, + ).toString(), + orderData?.cryptoCurrency?.decimals, + )}{' '} + {cryptocurrency} + + ) : ( + ... + )} + + + + + + + + + {strings( + 'fiat_on_ramp_aggregator.order_details.exchange_rate', + )} + + + + {order.cryptocurrency && + isFinite(exchangeRate) && + currency && + orderData?.fiatCurrency?.decimals ? ( + + 1 {order.cryptocurrency} @{' '} + {renderFiat( + exchangeRate, + currency, + orderData?.fiatCurrency?.decimals, + )} + + ) : ( + ... )} - - ) : ( - ... - )} - - - - - - {strings('fiat_on_ramp_aggregator.order_details.total_fees')} - - - - {cryptoFee && currency && orderData?.fiatCurrency?.decimals ? ( - - {currencySymbol} - {renderFiat( - cryptoFee as number, - currency, - orderData?.fiatCurrency?.decimals, + + + + + + + + {currency}{' '} + {strings('fiat_on_ramp_aggregator.order_details.amount')} + + + + {orderData?.fiatCurrency?.decimals && + amountOut && + currency ? ( + + {currencySymbol} + {renderFiat( + amountOut, + currency, + orderData?.fiatCurrency?.decimals, + )} + + ) : ( + ... )} + + + + + + + + + {strings('fiat_on_ramp_aggregator.order_details.total_fees')} - ) : ( - ... - )} - - - - - - - - - - {strings('fiat_on_ramp_aggregator.order_details.purchase_amount')} - - - - {currencySymbol && - amount && - currency && - orderData?.fiatCurrency?.decimals ? ( - - {currencySymbol} - {renderFiat( - amount as number, - currency, - orderData?.fiatCurrency?.decimals, + + + {cryptoFee && currency && orderData?.fiatCurrency?.decimals ? ( + + {currencySymbol} + {renderFiat( + cryptoFee as number, + currency, + orderData?.fiatCurrency?.decimals, + )} + + ) : ( + ... )} - - ) : ( - ... - )} - - - {order.state === OrderStatusEnum.Completed && txHash && ( - handleExplorerLinkPress(explorer.tx(txHash))} - > - - {strings('fiat_on_ramp_aggregator.order_details.etherscan')}{' '} - {explorer.isValid - ? explorer.name - : strings( - 'fiat_on_ramp_aggregator.order_details.a_block_explorer', + + + + + + + + + + {strings( + 'fiat_on_ramp_aggregator.order_details.purchase_amount', )} - - - )} - - {Boolean(supportLinkUrl) && ( - - - {strings('fiat_on_ramp_aggregator.order_details.questions')}{' '} - - handleProviderLinkPress(supportLinkUrl as string)} - > - {order.provider && data && ( - - {strings('fiat_on_ramp_aggregator.order_details.contact')}{' '} - {providerName}{' '} - {strings('fiat_on_ramp_aggregator.order_details.support')} - - )} - - - )} + + + + {currencySymbol && + amount && + currency && + orderData?.fiatCurrency?.decimals ? ( + + {currencySymbol} + {renderFiat( + amount as number, + currency, + orderData?.fiatCurrency?.decimals, + )} + + ) : ( + ... + )} + + + + {Boolean(order.state === OrderStatusEnum.Completed && txHash) && ( + + handleExplorerLinkPress(explorer.tx(txHash))} + > + + {strings('fiat_on_ramp_aggregator.order_details.etherscan')}{' '} + {explorer.isValid + ? explorer.name + : strings( + 'fiat_on_ramp_aggregator.order_details.a_block_explorer', + )} + + + + )} + + ); }; diff --git a/app/components/UI/FiatOnRampAggregator/hooks/useAnalytics.ts b/app/components/UI/FiatOnRampAggregator/hooks/useAnalytics.ts index 0ee6a3bf1c1..ac4c7bf706d 100644 --- a/app/components/UI/FiatOnRampAggregator/hooks/useAnalytics.ts +++ b/app/components/UI/FiatOnRampAggregator/hooks/useAnalytics.ts @@ -16,28 +16,35 @@ const AnonymousEvents: (keyof AnalyticsEvents)[] = [ 'ONRAMP_QUOTE_ERROR', ]; +export function trackEvent( + eventType: T, + params: AnalyticsEvents[T], +) { + const event = ANALYTICS_EVENTS_V2[eventType]; + const anonymous = AnonymousEvents.includes(eventType); + + InteractionManager.runAfterInteractions(() => { + if (anonymous) { + Analytics.trackEventWithParameters(event, {}); + Analytics.trackEventWithParameters(event, params, true); + } else { + Analytics.trackEventWithParameters(event, params); + } + }); +} + function useAnalytics() { - const trackEvent = useCallback( + const trackEventHook = useCallback( ( eventType: T, params: AnalyticsEvents[T], ) => { - const event = ANALYTICS_EVENTS_V2[eventType]; - const anonymous = AnonymousEvents.includes(eventType); - - InteractionManager.runAfterInteractions(() => { - if (anonymous) { - Analytics.trackEventWithParameters(event, {}); - Analytics.trackEventWithParameters(event, params, true); - } else { - Analytics.trackEventWithParameters(event, params); - } - }); + trackEvent(eventType, params); }, [], ); - return trackEvent; + return trackEventHook; } export default useAnalytics; diff --git a/app/components/UI/FiatOrders/index.js b/app/components/UI/FiatOrders/index.js index 1a0d26b428a..1d834f1beae 100644 --- a/app/components/UI/FiatOrders/index.js +++ b/app/components/UI/FiatOrders/index.js @@ -17,7 +17,7 @@ import { } from '../../../reducers/fiatOrders'; import useInterval from '../../hooks/useInterval'; import processOrder from '../FiatOnRampAggregator/orderProcessor'; -import useAnalytics from '../FiatOnRampAggregator/hooks/useAnalytics'; +import { trackEvent } from '../FiatOnRampAggregator/hooks/useAnalytics'; /** * @typedef {import('../../../reducers/fiatOrders').FiatOrder} FiatOrder @@ -179,37 +179,37 @@ export const getNotificationDetails = (fiatOrder) => { } }; +export async function processFiatOrder(order, updateFiatOrder) { + const updatedOrder = await processOrder(order); + updateFiatOrder(updatedOrder); + if (updatedOrder.state !== order.state) { + if (updatedOrder.provider === FIAT_ORDER_PROVIDERS.AGGREGATOR) { + const [event, params] = getAggregatorAnalyticsPayload(updatedOrder); + if (event) { + trackEvent(event, params); + } + } else { + InteractionManager.runAfterInteractions(() => { + const [analyticsEvent, analyticsPayload] = + getAnalyticsPayload(updatedOrder); + if (analyticsEvent) { + AnalyticsV2.trackEvent(analyticsEvent, analyticsPayload); + } + }); + } + InteractionManager.runAfterInteractions(() => { + NotificationManager.showSimpleNotification( + getNotificationDetails(updatedOrder), + ); + }); + } +} + function FiatOrders({ pendingOrders, updateFiatOrder }) { - const trackEvent = useAnalytics(); useInterval( async () => { await Promise.all( - pendingOrders.map(async (order) => { - const updatedOrder = await processOrder(order); - updateFiatOrder(updatedOrder); - if (updatedOrder.state !== order.state) { - if (updatedOrder.provider === FIAT_ORDER_PROVIDERS.AGGREGATOR) { - const [event, params] = - getAggregatorAnalyticsPayload(updatedOrder); - if (event) { - trackEvent(event, params); - } - } else { - InteractionManager.runAfterInteractions(() => { - const [analyticsEvent, analyticsPayload] = - getAnalyticsPayload(updatedOrder); - if (analyticsEvent) { - AnalyticsV2.trackEvent(analyticsEvent, analyticsPayload); - } - }); - } - InteractionManager.runAfterInteractions(() => { - NotificationManager.showSimpleNotification( - getNotificationDetails(updatedOrder), - ); - }); - } - }), + pendingOrders.map((order) => processFiatOrder(order, updateFiatOrder)), ); }, pendingOrders.length ? POLLING_FREQUENCY : null, diff --git a/app/components/Views/FiatOrdersView/OrderListItem.js b/app/components/Views/FiatOrdersView/OrderListItem.js index f0484f980b4..196664684c6 100644 --- a/app/components/Views/FiatOrdersView/OrderListItem.js +++ b/app/components/Views/FiatOrdersView/OrderListItem.js @@ -4,7 +4,11 @@ import { Image, StyleSheet } from 'react-native'; import ListItem from '../../Base/ListItem'; import { strings } from '../../../../locales/i18n'; import { toDateFormat } from '../../../util/date'; -import { renderNumber, addCurrencySymbol } from '../../../util/number'; +import { + renderNumber, + addCurrencySymbol, + renderFiat, +} from '../../../util/number'; import { getProviderName } from '../../../reducers/fiatOrders'; import StatusText from '../../Base/StatusText'; /** @@ -58,7 +62,7 @@ function OrderListItem({ order }) { {order.cryptocurrency} - {addCurrencySymbol(order.amount, order.currency)} + {addCurrencySymbol(renderFiat(order.amount, ''), order.currency)} diff --git a/app/reducers/fiatOrders/index.js b/app/reducers/fiatOrders/index.js index 168b3ef76f9..8f463ae4d1a 100644 --- a/app/reducers/fiatOrders/index.js +++ b/app/reducers/fiatOrders/index.js @@ -180,6 +180,9 @@ const fiatOrderReducer = (state = initialState, action) => { const orders = state.orders; const order = action.payload; const index = findOrderIndex(order.provider, order.id, orders); + if (index === -1) { + return state; + } return { ...state, orders: [ diff --git a/locales/languages/en.json b/locales/languages/en.json index 672ce5c335d..4e91c9175a3 100644 --- a/locales/languages/en.json +++ b/locales/languages/en.json @@ -1670,6 +1670,7 @@ "available_in_account": "is now available in your account", "crypto": "crypto", "failed": "Order Failed", + "cancelled": "Order Canceled", "failed_description": "Something went wrong, and {{provider}} was unable to complete your order. Please try again or with another provider.", "the_provider": "the provider", "processing": "Processing Order", @@ -1681,8 +1682,9 @@ "etherscan": "View full details on", "another_purchase": "Make another purchase", "questions": "Questions?", - "contact": "Contact", + "contact_support": "Contact support", "support": "Support", + "view_order_status": "View order status on {{provider}}", "id": "Order ID", "date_and_time": "Date and Time", "payment_method": "Payment Method", From 9dddc2529b8167b17cd6766c6deac48dc2ba8ecd Mon Sep 17 00:00:00 2001 From: Pedro Pablo Aste Kompen Date: Thu, 7 Jul 2022 11:19:18 -0500 Subject: [PATCH 2/2] Fix decimals comparison and remove unneeed chain operators --- .../components/OrderDetails.tsx | 43 +++++++++---------- 1 file changed, 21 insertions(+), 22 deletions(-) diff --git a/app/components/UI/FiatOnRampAggregator/components/OrderDetails.tsx b/app/components/UI/FiatOnRampAggregator/components/OrderDetails.tsx index a0c93768ad5..bfecf6c6218 100644 --- a/app/components/UI/FiatOnRampAggregator/components/OrderDetails.tsx +++ b/app/components/UI/FiatOnRampAggregator/components/OrderDetails.tsx @@ -258,29 +258,25 @@ const OrderDetails: React.FC = ({ /> - {orderData?.cryptoCurrency?.decimals && + {orderData?.cryptoCurrency?.decimals !== undefined && cryptoAmount && cryptocurrency ? ( renderFromTokenMinimalUnit( toTokenMinimalUnit( cryptoAmount, - orderData?.cryptoCurrency?.decimals, + orderData.cryptoCurrency.decimals, ).toString(), - orderData?.cryptoCurrency?.decimals, + orderData.cryptoCurrency.decimals, ) ) : ( ... )}{' '} {cryptocurrency} - {orderData?.fiatCurrency?.decimals && currencySymbol ? ( + {orderData?.fiatCurrency?.decimals !== undefined && currencySymbol ? ( {currencySymbol} - {renderFiat( - amountOut, - currency, - orderData?.fiatCurrency?.decimals, - )} + {renderFiat(amountOut, currency, orderData.fiatCurrency.decimals)} ) : ( @@ -352,12 +348,12 @@ const OrderDetails: React.FC = ({ - {orderData?.paymentMethod?.name} + {orderData.paymentMethod.name} )} - {Boolean(order.provider && orderData?.paymentMethod?.name) && ( + {Boolean(order.provider) && ( {providerName} {supportLinkUrl ? ( @@ -391,14 +387,15 @@ const OrderDetails: React.FC = ({ - {cryptoAmount && orderData?.cryptoCurrency?.decimals ? ( + {cryptoAmount && + orderData?.cryptoCurrency?.decimals !== undefined ? ( {renderFromTokenMinimalUnit( toTokenMinimalUnit( cryptoAmount, - orderData?.cryptoCurrency?.decimals, + orderData.cryptoCurrency.decimals, ).toString(), - orderData?.cryptoCurrency?.decimals, + orderData.cryptoCurrency.decimals, )}{' '} {cryptocurrency} @@ -422,13 +419,13 @@ const OrderDetails: React.FC = ({ {order.cryptocurrency && isFinite(exchangeRate) && currency && - orderData?.fiatCurrency?.decimals ? ( + orderData?.fiatCurrency?.decimals !== undefined ? ( 1 {order.cryptocurrency} @{' '} {renderFiat( exchangeRate, currency, - orderData?.fiatCurrency?.decimals, + orderData.fiatCurrency.decimals, )} ) : ( @@ -446,7 +443,7 @@ const OrderDetails: React.FC = ({ - {orderData?.fiatCurrency?.decimals && + {orderData?.fiatCurrency?.decimals !== undefined && amountOut && currency ? ( @@ -454,7 +451,7 @@ const OrderDetails: React.FC = ({ {renderFiat( amountOut, currency, - orderData?.fiatCurrency?.decimals, + orderData.fiatCurrency.decimals, )} ) : ( @@ -472,13 +469,15 @@ const OrderDetails: React.FC = ({ - {cryptoFee && currency && orderData?.fiatCurrency?.decimals ? ( + {cryptoFee && + currency && + orderData?.fiatCurrency?.decimals !== undefined ? ( {currencySymbol} {renderFiat( cryptoFee as number, currency, - orderData?.fiatCurrency?.decimals, + orderData.fiatCurrency.decimals, )} ) : ( @@ -502,13 +501,13 @@ const OrderDetails: React.FC = ({ {currencySymbol && amount && currency && - orderData?.fiatCurrency?.decimals ? ( + orderData?.fiatCurrency?.decimals !== undefined ? ( {currencySymbol} {renderFiat( amount as number, currency, - orderData?.fiatCurrency?.decimals, + orderData.fiatCurrency.decimals, )} ) : (