From cad3df3ba4ba8ba4451725aa1d3c25d311fd1c0e Mon Sep 17 00:00:00 2001 From: Pedro Pablo Aste Kompen Date: Wed, 20 Mar 2024 10:50:23 -0300 Subject: [PATCH 1/5] chore(ramp): upgrade sdk to 1.26.8 --- package.json | 2 +- yarn.lock | 39 +++++++-------------------------------- 2 files changed, 8 insertions(+), 33 deletions(-) diff --git a/package.json b/package.json index d189113bebd..ee4ea0671eb 100644 --- a/package.json +++ b/package.json @@ -127,7 +127,7 @@ }, "dependencies": { "@consensys/ledgerhq-metamask-keyring": "0.0.9", - "@consensys/on-ramp-sdk": "1.26.2", + "@consensys/on-ramp-sdk": "1.26.8", "@eth-optimism/contracts": "0.0.0-2021919175625", "@ethereumjs/common": "^2.3.1", "@ethereumjs/tx": "^3.2.1", diff --git a/yarn.lock b/yarn.lock index e8f56f4002f..335d1cd95bd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1298,10 +1298,10 @@ buffer "^6.0.3" ethereumjs-util "^7.1.5" -"@consensys/on-ramp-sdk@1.26.2": - version "1.26.2" - resolved "https://registry.yarnpkg.com/@consensys/on-ramp-sdk/-/on-ramp-sdk-1.26.2.tgz#89e9c70aff0d76d5ef6313dfb14e69bf63009109" - integrity sha512-TOnh9pw537tc241ihTWN+y7VDkKf9Y7TGXjz4tcgEZhwGRZNKKyrky25EzMJk8yAZh8S+jwavsDk6DCwavkxeA== +"@consensys/on-ramp-sdk@1.26.8": + version "1.26.8" + resolved "https://registry.yarnpkg.com/@consensys/on-ramp-sdk/-/on-ramp-sdk-1.26.8.tgz#87344f42e6bced535dee9c0f7440954a6bd6955e" + integrity sha512-MfTJpYjXEnUc4FIN920vGHe4BzwBTuzKMaavuRYu5E2MyVEa30YUQDhAkgUQtHj/qcH3FAXiISqkGN3/PVzB8A== dependencies: async "^3.2.3" axios "^0.27.0" @@ -26069,7 +26069,7 @@ string-range@~1.2, string-range@~1.2.1: resolved "https://registry.yarnpkg.com/string-range/-/string-range-1.2.2.tgz#a893ed347e72299bc83befbbf2a692a8d239d5dd" integrity sha1-qJPtNH5yKZvIO++78qaSqNI51d0= -"string-width-cjs@npm:string-width@^4.2.0": +"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: version "4.2.3" resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== @@ -26087,15 +26087,6 @@ string-width@^1.0.1, string-width@^1.0.2: is-fullwidth-code-point "^1.0.0" strip-ansi "^3.0.0" -"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: - version "4.2.3" - resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" - integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== - dependencies: - emoji-regex "^8.0.0" - is-fullwidth-code-point "^3.0.0" - strip-ansi "^6.0.1" - string-width@^2.0.0, string-width@^2.1.1: version "2.1.1" resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.1.1.tgz#ab93f27a8dc13d28cac815c462143a6d9012ae9e" @@ -26210,14 +26201,7 @@ stringify-object@^3.3.0: is-obj "^1.0.1" is-regexp "^1.0.0" -"strip-ansi-cjs@npm:strip-ansi@^6.0.1": - version "6.0.1" - resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" - integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== - dependencies: - ansi-regex "^5.0.1" - -strip-ansi@6.0.1, strip-ansi@^6.0.0, strip-ansi@^6.0.1: +"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@6.0.1, strip-ansi@^6.0.0, strip-ansi@^6.0.1: version "6.0.1" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== @@ -28109,7 +28093,7 @@ wordwrap@^1.0.0: resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb" integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q== -"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0": +"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0: version "7.0.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== @@ -28144,15 +28128,6 @@ wrap-ansi@^6.2.0: string-width "^4.1.0" strip-ansi "^6.0.0" -wrap-ansi@^7.0.0: - version "7.0.0" - resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" - integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== - dependencies: - ansi-styles "^4.0.0" - string-width "^4.1.0" - strip-ansi "^6.0.0" - wrap-ansi@^8.1.0: version "8.1.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214" From cd9c8bab4bb15da5e76568b280e2bf748b01cf6d Mon Sep 17 00:00:00 2001 From: Pedro Pablo Aste Kompen Date: Wed, 20 Mar 2024 12:15:12 -0300 Subject: [PATCH 2/5] chore(ramp): deduplicate output --- yarn.lock | 1 + 1 file changed, 1 insertion(+) diff --git a/yarn.lock b/yarn.lock index 335d1cd95bd..760147e1171 100644 --- a/yarn.lock +++ b/yarn.lock @@ -28094,6 +28094,7 @@ wordwrap@^1.0.0: integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q== "wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0: + name wrap-ansi-cjs version "7.0.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== From 2ca8575da4f49ca952e2686ca684dcd8736eaf5e Mon Sep 17 00:00:00 2001 From: Pedro Pablo Aste Kompen Date: Wed, 20 Mar 2024 12:26:22 -0300 Subject: [PATCH 3/5] chore(ramp): deduplicate output with upgraded yarn --- yarn.lock | 32 ++++++++++++++++++++++++++++---- 1 file changed, 28 insertions(+), 4 deletions(-) diff --git a/yarn.lock b/yarn.lock index 760147e1171..769a35483d5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -26069,7 +26069,7 @@ string-range@~1.2, string-range@~1.2.1: resolved "https://registry.yarnpkg.com/string-range/-/string-range-1.2.2.tgz#a893ed347e72299bc83befbbf2a692a8d239d5dd" integrity sha1-qJPtNH5yKZvIO++78qaSqNI51d0= -"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: +"string-width-cjs@npm:string-width@^4.2.0": version "4.2.3" resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== @@ -26087,6 +26087,15 @@ string-width@^1.0.1, string-width@^1.0.2: is-fullwidth-code-point "^1.0.0" strip-ansi "^3.0.0" +"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: + version "4.2.3" + resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" + integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== + dependencies: + emoji-regex "^8.0.0" + is-fullwidth-code-point "^3.0.0" + strip-ansi "^6.0.1" + string-width@^2.0.0, string-width@^2.1.1: version "2.1.1" resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.1.1.tgz#ab93f27a8dc13d28cac815c462143a6d9012ae9e" @@ -26201,7 +26210,14 @@ stringify-object@^3.3.0: is-obj "^1.0.1" is-regexp "^1.0.0" -"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@6.0.1, strip-ansi@^6.0.0, strip-ansi@^6.0.1: +"strip-ansi-cjs@npm:strip-ansi@^6.0.1": + version "6.0.1" + resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" + integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== + dependencies: + ansi-regex "^5.0.1" + +strip-ansi@6.0.1, strip-ansi@^6.0.0, strip-ansi@^6.0.1: version "6.0.1" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== @@ -28093,8 +28109,7 @@ wordwrap@^1.0.0: resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb" integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q== -"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0: - name wrap-ansi-cjs +"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0": version "7.0.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== @@ -28129,6 +28144,15 @@ wrap-ansi@^6.2.0: string-width "^4.1.0" strip-ansi "^6.0.0" +wrap-ansi@^7.0.0: + version "7.0.0" + resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" + integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== + dependencies: + ansi-styles "^4.0.0" + string-width "^4.1.0" + strip-ansi "^6.0.0" + wrap-ansi@^8.1.0: version "8.1.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214" From d911c58a3118a761cdc83bef20f31a27e71bd96c Mon Sep 17 00:00:00 2001 From: Pedro Pablo Aste Kompen Date: Wed, 20 Mar 2024 11:30:50 -0300 Subject: [PATCH 4/5] refactor(ramp): order details providerConfig, networkConfigations selectors --- .../Ramp/Views/OrderDetails/OrderDetails.tsx | 12 +-------- .../UI/Ramp/components/OrderDetails.tsx | 26 +++++++------------ 2 files changed, 11 insertions(+), 27 deletions(-) diff --git a/app/components/UI/Ramp/Views/OrderDetails/OrderDetails.tsx b/app/components/UI/Ramp/Views/OrderDetails/OrderDetails.tsx index 821a48705b4..3abbef70b23 100644 --- a/app/components/UI/Ramp/Views/OrderDetails/OrderDetails.tsx +++ b/app/components/UI/Ramp/Views/OrderDetails/OrderDetails.tsx @@ -25,10 +25,6 @@ import { } from '../../../../../util/navigation/navUtils'; import { useTheme } from '../../../../../util/theme'; import Logger from '../../../../../util/Logger'; -import { - selectNetworkConfigurations, - selectProviderConfig, -} from '../../../../../selectors/networkController'; import { RootState } from '../../../../../reducers'; import { FIAT_ORDER_STATES } from '../../../../../constants/on-ramp'; import ErrorView from '../../components/ErrorView'; @@ -45,8 +41,6 @@ export const createOrderDetailsNavDetails = const OrderDetails = () => { const trackEvent = useAnalytics(); - const providerConfig = useSelector(selectProviderConfig); - const networkConfigurations = useSelector(selectNetworkConfigurations); const params = useParams(); const order = useSelector((state: RootState) => getOrderById(state, params.orderId), @@ -244,11 +238,7 @@ const OrderDetails = () => { > - + diff --git a/app/components/UI/Ramp/components/OrderDetails.tsx b/app/components/UI/Ramp/components/OrderDetails.tsx index e31fb75862e..3786a28700c 100644 --- a/app/components/UI/Ramp/components/OrderDetails.tsx +++ b/app/components/UI/Ramp/components/OrderDetails.tsx @@ -6,9 +6,10 @@ import { TouchableOpacity, View, } from 'react-native'; -import Feather from 'react-native-vector-icons/Feather'; +import { useSelector } from 'react-redux'; import { Order, OrderStatusEnum } from '@consensys/on-ramp-sdk'; -import type { NetworkState } from '@metamask/network-controller'; +import { OrderOrderTypeEnum } from '@consensys/on-ramp-sdk/dist/API'; +import Feather from 'react-native-vector-icons/Feather'; import Box from './Box'; import Text from '../../../Base/Text'; import BaseListItem from '../../../Base/ListItem'; @@ -28,7 +29,10 @@ import { PROVIDER_LINKS } from '../types'; import Account from './Account'; import { FIAT_ORDER_STATES } from '../../../../constants/on-ramp'; import { getOrderAmount } from '../utils'; -import { OrderOrderTypeEnum } from '@consensys/on-ramp-sdk/dist/API'; +import { + selectNetworkConfigurations, + selectProviderConfig, +} from '../../../../selectors/networkController'; /* eslint-disable-next-line import/no-commonjs, @typescript-eslint/no-var-requires, @typescript-eslint/no-require-imports */ const failedIcon = require('./images/TransactionIcon_Failed.png'); @@ -215,21 +219,9 @@ interface Props { * Object that represents the current route info like params passed to it */ order: FiatOrder; - /** - * Current network provider configuration - */ - providerConfig: NetworkState['providerConfig']; - /** - * Network configurations - */ - networkConfigurations: NetworkState['networkConfigurations']; } -const OrderDetails: React.FC = ({ - order, - providerConfig, - networkConfigurations, -}: Props) => { +const OrderDetails: React.FC = ({ order }: Props) => { const { data, state, @@ -244,6 +236,8 @@ const OrderDetails: React.FC = ({ } = order; const { colors } = useTheme(); const trackEvent = useAnalytics(); + const providerConfig = useSelector(selectProviderConfig); + const networkConfigurations = useSelector(selectNetworkConfigurations); const explorer = useBlockExplorer(providerConfig, networkConfigurations); const styles = createStyles(colors); const date = createdAt && toDateFormat(createdAt); From b3b0ab77da04c7dd6d8be555e64f323c940a7071 Mon Sep 17 00:00:00 2001 From: Pedro Pablo Aste Kompen Date: Wed, 20 Mar 2024 14:49:48 -0300 Subject: [PATCH 5/5] feat(ramp): use statusDescription field in order details --- .../Views/OrderDetails/OrderDetails.test.tsx | 20 +++++ .../__snapshots__/OrderDetails.test.tsx.snap | 12 +-- .../UI/Ramp/components/OrderDetails.tsx | 90 ++++++------------- 3 files changed, 48 insertions(+), 74 deletions(-) diff --git a/app/components/UI/Ramp/Views/OrderDetails/OrderDetails.test.tsx b/app/components/UI/Ramp/Views/OrderDetails/OrderDetails.test.tsx index a1217cdabe8..9428c8de8f9 100644 --- a/app/components/UI/Ramp/Views/OrderDetails/OrderDetails.test.tsx +++ b/app/components/UI/Ramp/Views/OrderDetails/OrderDetails.test.tsx @@ -198,6 +198,10 @@ describe('OrderDetails', () => { const completedOrder = { ...mockOrder, state: FIAT_ORDER_STATES.COMPLETED, + data: { + ...mockOrder.data, + statusDescription: 'Your ETH is now available in your account', + }, }; render(OrderDetails, [completedOrder]); expect(screen.toJSON()).toMatchSnapshot(); @@ -207,6 +211,11 @@ describe('OrderDetails', () => { const cancelledOrder = { ...mockOrder, state: FIAT_ORDER_STATES.CANCELLED, + data: { + ...mockOrder.data, + statusDescription: + 'Something went wrong, and Test Provider was unable to complete your order. Please try again or with another provider.', + }, }; render(OrderDetails, [cancelledOrder]); expect(screen.toJSON()).toMatchSnapshot(); @@ -216,6 +225,11 @@ describe('OrderDetails', () => { const failedOrder = { ...mockOrder, state: FIAT_ORDER_STATES.FAILED, + data: { + ...mockOrder.data, + statusDescription: + 'Something went wrong, and Test Provider was unable to complete your order. Please try again or with another provider.', + }, }; render(OrderDetails, [failedOrder]); expect(screen.toJSON()).toMatchSnapshot(); @@ -365,6 +379,11 @@ describe('OrderDetails', () => { orderType: OrderOrderTypeEnum.Sell, state: FIAT_ORDER_STATES.CREATED, sellTxHash: undefined, + data: { + ...mockOrder.data, + statusDescription: + "To continue your order, you'll need to select the button at the bottom of this page.", + }, }; await waitFor(() => render(OrderDetails, [createdOrder])); expect(screen.toJSON()).toMatchSnapshot(); @@ -424,6 +443,7 @@ describe('OrderDetails', () => { state: FIAT_ORDER_STATES.COMPLETED, data: { ...mockOrder.data, + statusDescription: 'Your ETH is now available in your account', provider: { name: 'Test Provider', links: [ diff --git a/app/components/UI/Ramp/Views/OrderDetails/__snapshots__/OrderDetails.test.tsx.snap b/app/components/UI/Ramp/Views/OrderDetails/__snapshots__/OrderDetails.test.tsx.snap index 4353204b25e..234e1e779cc 100644 --- a/app/components/UI/Ramp/Views/OrderDetails/__snapshots__/OrderDetails.test.tsx.snap +++ b/app/components/UI/Ramp/Views/OrderDetails/__snapshots__/OrderDetails.test.tsx.snap @@ -2538,11 +2538,7 @@ exports[`OrderDetails renders a completed order 1`] = ` ] } > - Your - - ETH - - is now available in your account + Your ETH is now available in your account @@ -13307,11 +13303,7 @@ exports[`OrderDetails renders the support links if the provider has them 1`] = ` ] } > - Your - - ETH - - is now available in your account + Your ETH is now available in your account diff --git a/app/components/UI/Ramp/components/OrderDetails.tsx b/app/components/UI/Ramp/components/OrderDetails.tsx index 3786a28700c..53dd7cec030 100644 --- a/app/components/UI/Ramp/components/OrderDetails.tsx +++ b/app/components/UI/Ramp/components/OrderDetails.tsx @@ -72,11 +72,7 @@ const createStyles = (colors: any) => }); interface PropsStage { - stage: FiatOrder['state']; - pendingDescription?: string; - cryptocurrency?: string; - providerName?: string; - orderType?: OrderOrderTypeEnum; + order: FiatOrder; isTransacted: boolean; } @@ -91,17 +87,12 @@ const Group: React.FC = (props) => { return ; }; -const Stage: React.FC = ({ - stage, - pendingDescription, - cryptocurrency, - providerName, - orderType, - isTransacted, -}: PropsStage) => { +const Stage: React.FC = ({ order, isTransacted }: PropsStage) => { const { colors } = useTheme(); const styles = createStyles(colors); - switch (stage) { + const orderData = order.data as Order; + + switch (order.state) { case FIAT_ORDER_STATES.COMPLETED: { return ( @@ -114,22 +105,11 @@ const Stage: React.FC = ({ {strings('fiat_on_ramp_aggregator.order_details.successful')} - {orderType === OrderOrderTypeEnum.Buy ? ( + {orderData.statusDescription ? ( - {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', - )} + {orderData.statusDescription} - ) : ( - - {strings( - 'fiat_on_ramp_aggregator.order_details.delayed_bank_transfer', - )} - - )} + ) : null} ); @@ -141,22 +121,15 @@ const Stage: React.FC = ({ - {stage === 'FAILED' + {order.state === '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', - ), - }, - )} - + {orderData.statusDescription ? ( + + {orderData.statusDescription} + + ) : null} ); @@ -173,19 +146,16 @@ const Stage: React.FC = ({ : 'fiat_on_ramp_aggregator.order_details.pending', )} - {isTransacted ? ( - pendingDescription ? ( - - {pendingDescription} - - ) : null - ) : ( + {isTransacted && Boolean(orderData.timeDescriptionPending) ? ( - {strings( - 'fiat_on_ramp_aggregator.order_details.continue_order_description', - )} + {orderData.timeDescriptionPending} - )} + ) : null} + {!isTransacted && Boolean(orderData.statusDescription) ? ( + + {orderData.statusDescription} + + ) : null} ); @@ -197,14 +167,14 @@ const Stage: React.FC = ({ - {stage === FIAT_ORDER_STATES.PENDING + {order.state === FIAT_ORDER_STATES.PENDING ? strings('fiat_on_ramp_aggregator.order_details.processing') : strings('transaction.submitted')} - {pendingDescription ? ( + {orderData.statusDescription ? ( - {pendingDescription} + {orderData.statusDescription} ) : null} @@ -224,7 +194,6 @@ interface Props { const OrderDetails: React.FC = ({ order }: Props) => { const { data, - state, createdAt, amount, cryptoFee, @@ -283,14 +252,7 @@ const OrderDetails: React.FC = ({ order }: Props) => { return ( - + {renderAmount} {cryptocurrency}