Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor(ramp): use statusDescription in order details #9011

Merged
merged 11 commits into from
Apr 26, 2024
Merged

refactor(ramp): use statusDescription in order details #9011

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
cad3df3
chore(ramp): upgrade sdk to 1.26.8
wachunei Mar 20, 2024
cd9c8ba
chore(ramp): deduplicate output
wachunei Mar 20, 2024
2ca8575
chore(ramp): deduplicate output with upgraded yarn
wachunei Mar 20, 2024
d911c58
refactor(ramp): order details providerConfig, networkConfigations sel…
wachunei Mar 20, 2024
b3b0ab7
feat(ramp): use statusDescription field in order details
wachunei Mar 20, 2024
f6cb927
Merge branch 'main' into feat/ramp-order-status-descriptions
wachunei Mar 21, 2024
4369022
Merge branch 'main' into feat/ramp-order-status-descriptions
wachunei Mar 26, 2024
930e7ac
Merge branch 'main' into feat/ramp-order-status-descriptions
wachunei Apr 5, 2024
d27e78f
Merge branch 'main' into feat/ramp-order-status-descriptions
wachunei Apr 11, 2024
d3d3880
Merge branch 'main' into feat/ramp-order-status-descriptions
wachunei Apr 17, 2024
c0d8a6b
Merge branch 'main' into feat/ramp-order-status-descriptions
wachunei Apr 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions app/components/UI/Ramp/Views/OrderDetails/OrderDetails.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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();
Expand All @@ -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();
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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: [
Expand Down
12 changes: 1 addition & 11 deletions app/components/UI/Ramp/Views/OrderDetails/OrderDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -45,8 +41,6 @@ export const createOrderDetailsNavDetails =

const OrderDetails = () => {
const trackEvent = useAnalytics();
const providerConfig = useSelector(selectProviderConfig);
const networkConfigurations = useSelector(selectNetworkConfigurations);
const params = useParams<OrderDetailsParams>();
const order = useSelector((state: RootState) =>
getOrderById(state, params.orderId),
Expand Down Expand Up @@ -244,11 +238,7 @@ const OrderDetails = () => {
>
<ScreenLayout.Body>
<ScreenLayout.Content>
<OrderDetail
order={order}
providerConfig={providerConfig}
networkConfigurations={networkConfigurations}
/>
<OrderDetail order={order} />
</ScreenLayout.Content>
</ScreenLayout.Body>
<ScreenLayout.Footer>
Expand Down
12 changes: 2 additions & 10 deletions app/components/UI/Ramp/Views/OrderDetails/__snapshots__/OrderDetails.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2550,11 +2550,7 @@ exports[`OrderDetails renders a completed order 1`] = `
]
}
>
Your

ETH

is now available in your account
Your ETH is now available in your account
</Text>
</View>
</View>
Expand Down Expand Up @@ -13361,11 +13357,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
</Text>
</View>
</View>
Expand Down
116 changes: 36 additions & 80 deletions app/components/UI/Ramp/components/OrderDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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');
Expand Down Expand Up @@ -68,11 +72,7 @@ const createStyles = (colors: any) =>
});

interface PropsStage {
stage: FiatOrder['state'];
pendingDescription?: string;
cryptocurrency?: string;
providerName?: string;
orderType?: OrderOrderTypeEnum;
order: FiatOrder;
isTransacted: boolean;
}

Expand All @@ -87,17 +87,12 @@ const Group: React.FC = (props) => {
return <View style={styles.group} {...props} />;
};

const Stage: React.FC<PropsStage> = ({
stage,
pendingDescription,
cryptocurrency,
providerName,
orderType,
isTransacted,
}: PropsStage) => {
const Stage: React.FC<PropsStage> = ({ 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 (
<View style={styles.stage}>
Expand All @@ -110,22 +105,11 @@ const Stage: React.FC<PropsStage> = ({
<Text bold big primary centered>
{strings('fiat_on_ramp_aggregator.order_details.successful')}
</Text>
{orderType === OrderOrderTypeEnum.Buy ? (
<Text small centered grey>
{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',
)}
</Text>
) : (
{orderData.statusDescription ? (
<Text small centered grey>
{strings(
'fiat_on_ramp_aggregator.order_details.delayed_bank_transfer',
)}
{orderData.statusDescription}
</Text>
)}
) : null}
</Group>
</View>
);
Expand All @@ -137,22 +121,15 @@ const Stage: React.FC<PropsStage> = ({
<Image source={failedIcon} />
<Group>
<Text bold big primary centered>
{stage === 'FAILED'
{order.state === 'FAILED'
? strings('fiat_on_ramp_aggregator.order_details.failed')
: strings('fiat_on_ramp_aggregator.order_details.cancelled')}
</Text>
<Text small centered grey>
{strings(
'fiat_on_ramp_aggregator.order_details.failed_description',
{
provider:
providerName ||
strings(
'fiat_on_ramp_aggregator.order_details.the_provider',
),
},
)}
</Text>
{orderData.statusDescription ? (
<Text small centered grey>
{orderData.statusDescription}
</Text>
) : null}
</Group>
</View>
);
Expand All @@ -169,19 +146,16 @@ const Stage: React.FC<PropsStage> = ({
: 'fiat_on_ramp_aggregator.order_details.pending',
)}
</Text>
{isTransacted ? (
pendingDescription ? (
<Text small centered grey>
{pendingDescription}
</Text>
) : null
) : (
{isTransacted && Boolean(orderData.timeDescriptionPending) ? (
<Text small centered grey>
{strings(
'fiat_on_ramp_aggregator.order_details.continue_order_description',
)}
{orderData.timeDescriptionPending}
</Text>
)}
) : null}
{!isTransacted && Boolean(orderData.statusDescription) ? (
<Text small centered grey>
{orderData.statusDescription}
</Text>
) : null}
</Group>
</View>
);
Expand All @@ -193,14 +167,14 @@ const Stage: React.FC<PropsStage> = ({
<Spinner />
<Group>
<Text bold big primary centered>
{stage === FIAT_ORDER_STATES.PENDING
{order.state === FIAT_ORDER_STATES.PENDING
? strings('fiat_on_ramp_aggregator.order_details.processing')
: strings('transaction.submitted')}
</Text>

{pendingDescription ? (
{orderData.statusDescription ? (
<Text small centered grey>
{pendingDescription}
{orderData.statusDescription}
</Text>
) : null}
</Group>
Expand All @@ -215,24 +189,11 @@ 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<Props> = ({
order,
providerConfig,
networkConfigurations,
}: Props) => {
const OrderDetails: React.FC<Props> = ({ order }: Props) => {
const {
data,
state,
createdAt,
amount,
cryptoFee,
Expand All @@ -244,6 +205,8 @@ const OrderDetails: React.FC<Props> = ({
} = 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);
Expand Down Expand Up @@ -289,14 +252,7 @@ const OrderDetails: React.FC<Props> = ({
return (
<View>
<Group>
<Stage
stage={state}
pendingDescription={orderData?.timeDescriptionPending}
cryptocurrency={cryptocurrency}
providerName={providerName}
orderType={order.orderType}
isTransacted={Boolean(order.sellTxHash)}
/>
<Stage order={order} isTransacted={Boolean(order.sellTxHash)} />
<Group>
<Text bold centered primary style={styles.tokenAmount}>
{renderAmount} {cryptocurrency}
Expand Down
Loading