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

fix(send): multiple dialogs #1192

Merged
merged 2 commits into from
Aug 10, 2023
Merged

fix(send): multiple dialogs #1192

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
590884c
fix(send): multiple dialogs
pwltr Aug 8, 2023
13c28bf
test(send): add e2e test
pwltr Aug 8, 2023
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
23 changes: 20 additions & 3 deletions e2e/onchain.e2e.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ d('Onchain', () => {
// - shows correct total balance
// - can send total balance and tag the tx
// - no exceeding availableAmount
// - shows a warning for sending over 50% of total
// - shows warnings for sending over 100$ or 50% of total
// - avoid creating dust output
// - TODO: coin selectiom

Expand Down Expand Up @@ -125,7 +125,7 @@ d('Onchain', () => {
await element(by.id('GRAB')).swipe('right'); // Swipe to confirm

await sleep(1000); // animation
await waitFor(element(by.id('DialogSend50'))) // sending over 50% of balance warning
await waitFor(element(by.id('SendDialog2'))) // sending over 50% of balance warning
.toBeVisible()
.withTimeout(10000);
await sleep(1000); // animation
Expand Down Expand Up @@ -251,6 +251,13 @@ d('Onchain', () => {
await sleep(1000); // animation

const coreAddress = await rpc.getNewAddress();

// enable warning for sending over 100$ to test multiple warning dialogs
await element(by.id('Settings')).tap();
await element(by.id('SecuritySettings')).tap();
await element(by.id('SendAmountWarning')).tap();
await element(by.id('NavigationClose')).tap();

await element(by.id('Send')).tap();
await sleep(1000); // animation
await element(by.id('RecipientInput')).replaceText(coreAddress);
Expand All @@ -275,12 +282,22 @@ d('Onchain', () => {

// TODO: check correct fee

// sending over 50% of balance warning
await sleep(1000); // animation
await waitFor(element(by.id('DialogSend50'))) // sending over 50% of balance warning
await waitFor(element(by.id('SendDialog2')))
.toBeVisible()
.withTimeout(10000);
await sleep(1000); // animation
await element(by.id('DialogConfirm')).tap();

// sending over 100$ warning
await sleep(1000); // animation
await waitFor(element(by.id('SendDialog1')))
.toBeVisible()
.withTimeout(10000);
await sleep(1000); // animation
await element(by.id('DialogConfirm')).tap();

await waitFor(element(by.id('SendSuccess')))
.toBeVisible()
.withTimeout(10000);
Expand Down
88 changes: 38 additions & 50 deletions src/components/Dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,17 @@
import React, { memo, ReactElement } from 'react';
import {
Modal,
ModalProps,
StyleSheet,
Text,
View,
Platform,
TouchableOpacity,
} from 'react-native';
import Modal from 'react-native-modal';
import { useTranslation } from 'react-i18next';

import colors from '../styles/colors';

type DialogProps = ModalProps & {
type DialogProps = {
visible: boolean;
title: string;
description: string;
Expand All @@ -21,6 +20,7 @@ type DialogProps = ModalProps & {
visibleTestID?: string;
onCancel?: () => void;
onConfirm?: () => void;
onHide?: () => void;
};

const Dialog = ({
Expand All @@ -32,7 +32,7 @@ const Dialog = ({
visibleTestID,
onCancel,
onConfirm,
onRequestClose,
onHide,
}: DialogProps): ReactElement => {
const { t } = useTranslation('common');

Expand All @@ -44,58 +44,46 @@ const Dialog = ({
}

return (
<>
{visible && (
<View>
<Modal
animationType="fade"
transparent={true}
visible={visible}
onRequestClose={onRequestClose}>
<View style={styles.centeredView}>
<View style={styles.view}>
<View style={styles.text}>
<Text style={styles.title}>{title}</Text>
<Text style={styles.description}>{description}</Text>
</View>
<View
style={styles.buttons}
testID={visible ? visibleTestID : undefined}>
{onCancel && (
<TouchableOpacity
style={[styles.button, styles.buttonLeft]}
onPress={onCancel}
testID="DialogCancel">
<Text style={styles.buttonText}>{cancelText}</Text>
</TouchableOpacity>
)}
{onConfirm && (
<TouchableOpacity
style={styles.button}
onPress={onConfirm}
testID="DialogConfirm">
<Text style={styles.buttonText}>{confirmText}</Text>
</TouchableOpacity>
)}
</View>
</View>
</View>
</Modal>
<Modal
isVisible={visible}
animationIn="fadeIn"
animationOut="fadeOut"
useNativeDriverForBackdrop={true}
onModalHide={onHide}>
<View style={styles.content}>
<View style={styles.text}>
<Text style={styles.title}>{title}</Text>
<Text style={styles.description}>{description}</Text>
</View>
)}
</>
<View
style={styles.buttons}
testID={visible ? visibleTestID : undefined}>
{onCancel && (
<TouchableOpacity
style={[styles.button, styles.buttonLeft]}
onPress={onCancel}
testID="DialogCancel">
<Text style={styles.buttonText}>{cancelText}</Text>
</TouchableOpacity>
)}
{onConfirm && (
<TouchableOpacity
style={styles.button}
onPress={onConfirm}
testID="DialogConfirm">
<Text style={styles.buttonText}>{confirmText}</Text>
</TouchableOpacity>
)}
</View>
</View>
</Modal>
);
};

const styles = StyleSheet.create({
centeredView: {
backgroundColor: 'rgba(0, 0, 0, 0.6)',
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
view: {
content: {
backgroundColor: 'rgba(49, 49, 49, 1)',
alignSelf: 'center',
alignItems: 'center',
color: colors.white,
shadowColor: colors.black,
Expand Down
2 changes: 2 additions & 0 deletions src/screens/Settings/Security/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ const SecuritySettings = ({
title: t('security.clipboard'),
type: EItemType.switch,
enabled: enableAutoReadClipboard,
testID: 'AutoReadClipboard',
onPress: (): void => {
updateSettings({
enableAutoReadClipboard: !enableAutoReadClipboard,
Expand All @@ -68,6 +69,7 @@ const SecuritySettings = ({
title: t('security.warn_100'),
type: EItemType.switch,
enabled: enableSendAmountWarning,
testID: 'SendAmountWarning',
onPress: (): void => {
updateSettings({
enableSendAmountWarning: !enableSendAmountWarning,
Expand Down
44 changes: 19 additions & 25 deletions src/screens/Wallets/Send/ReviewAndSend.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -727,61 +727,56 @@ const ReviewAndSend = ({
title={t('are_you_sure')}
description={t('send_dialog1')}
confirmText={t('send_yes')}
onCancel={async (): Promise<void> => {
visibleTestID="SendDialog1"
onHide={(): void => confirmPayment(dialogWarnings)}
onConfirm={(): void => setShowDialog1(false)}
onCancel={(): void => {
setShowDialog1(false);
setIsLoading(false);
setTimeout(() => navigation.goBack(), 300);
}}
onConfirm={(): void => {
setShowDialog1(false);
confirmPayment(dialogWarnings);
}}
/>
<Dialog
visible={showDialog2}
title={t('are_you_sure')}
description={t('send_dialog2')}
confirmText={t('send_yes')}
onCancel={async (): Promise<void> => {
visibleTestID="SendDialog2"
onHide={(): void => confirmPayment(dialogWarnings)}
onConfirm={(): void => setShowDialog2(false)}
onCancel={(): void => {
setShowDialog2(false);
setIsLoading(false);
setTimeout(() => navigation.goBack(), 300);
}}
onConfirm={(): void => {
setShowDialog2(false);
confirmPayment(dialogWarnings);
}}
visibleTestID="DialogSend50"
/>
<Dialog
visible={showDialog3}
title={t('are_you_sure')}
description={t('send_dialog3')}
confirmText={t('send_yes')}
onCancel={async (): Promise<void> => {
visibleTestID="SendDialog3"
onHide={(): void => confirmPayment(dialogWarnings)}
onConfirm={(): void => setShowDialog3(false)}
onCancel={(): void => {
setShowDialog3(false);
setIsLoading(false);
setTimeout(() => navigation.goBack(), 300);
}}
onConfirm={(): void => {
setShowDialog3(false);
confirmPayment(dialogWarnings);
}}
/>
<Dialog
visible={showDialog4}
title={t('are_you_sure')}
description={t('send_dialog4')}
confirmText={t('send_yes')}
onCancel={async (): Promise<void> => {
visibleTestID="SendDialog4"
onHide={(): void => confirmPayment(dialogWarnings)}
onConfirm={(): void => setShowDialog4(false)}
onCancel={(): void => {
setShowDialog4(false);
setIsLoading(false);
setTimeout(() => navigation.goBack(), 300);
}}
onConfirm={(): void => {
setShowDialog4(false);
confirmPayment(dialogWarnings);
}}
/>
<Dialog
visible={showDialog5}
Expand All @@ -790,15 +785,14 @@ const ReviewAndSend = ({
minimumFee: feeEstimates.minimum,
})}
confirmText={t('continue')}
visibleTestID="SendDialog5"
onHide={(): void => confirmPayment(dialogWarnings)}
onConfirm={(): void => setShowDialog5(false)}
onCancel={(): void => {
setShowDialog5(false);
setIsLoading(false);
setTimeout(() => navigation.goBack(), 300);
}}
onConfirm={async (): Promise<void> => {
setShowDialog5(false);
confirmPayment(dialogWarnings);
}}
/>
<SafeAreaInset type="bottom" minPadding={16} />
</GradientView>
Expand Down
Loading