From 190c8983dbbbe9c9635b99476b7ec227fde3a9b0 Mon Sep 17 00:00:00 2001 From: William Swanson Date: Tue, 19 Dec 2023 14:34:07 -0800 Subject: [PATCH 1/3] Fix react-native-gesture-handler Jest mocking --- jestSetup.js | 8 +--- .../CryptoExchangeQuoteScene.test.tsx.snap | 5 +++ .../__snapshots__/SendScene2.ui.test.tsx.snap | 45 +++++++++++++++++++ 3 files changed, 52 insertions(+), 6 deletions(-) diff --git a/jestSetup.js b/jestSetup.js index ff0869d2d54..9aa10d2717d 100644 --- a/jestSetup.js +++ b/jestSetup.js @@ -1,3 +1,5 @@ +import './node_modules/react-native-gesture-handler/jestSetup.js' + import { jest } from '@jest/globals' import mockSafeAreaContext from 'react-native-safe-area-context/jest/mock' @@ -46,12 +48,6 @@ jest.mock('@react-navigation/elements', () => ({ getDefaultHeaderHeight: () => 44 })) -jest.mock('react-native-gesture-handler', () => ({ - PanGestureHandler({ children }) { - return children - } -})) - jest.mock('rn-qr-generator', () => ({ detect() { return Promise.resolve() diff --git a/src/__tests__/scenes/__snapshots__/CryptoExchangeQuoteScene.test.tsx.snap b/src/__tests__/scenes/__snapshots__/CryptoExchangeQuoteScene.test.tsx.snap index c2e9a18dd45..6c9b48fdd66 100644 --- a/src/__tests__/scenes/__snapshots__/CryptoExchangeQuoteScene.test.tsx.snap +++ b/src/__tests__/scenes/__snapshots__/CryptoExchangeQuoteScene.test.tsx.snap @@ -1704,6 +1704,11 @@ exports[`CryptoExchangeQuoteScreenComponent should render with loading props 1`] } /> Date: Thu, 11 Jan 2024 19:36:53 -0800 Subject: [PATCH 2/3] Add a UI4 modal --- src/components/modals/TextInputModal.tsx | 6 +- src/components/ui4/ModalUi4.tsx | 203 +++++++++++++++++++++++ src/theme/variables/edgeDark.ts | 2 + src/theme/variables/edgeLight.ts | 2 + src/theme/variables/testDark.ts | 2 + src/theme/variables/testLight.ts | 2 + src/types/Theme.ts | 2 + 7 files changed, 216 insertions(+), 3 deletions(-) create mode 100644 src/components/ui4/ModalUi4.tsx diff --git a/src/components/modals/TextInputModal.tsx b/src/components/modals/TextInputModal.tsx index b433b4b3dc4..8e4ec275a4d 100644 --- a/src/components/modals/TextInputModal.tsx +++ b/src/components/modals/TextInputModal.tsx @@ -8,7 +8,7 @@ import { Alert } from '../themed/Alert' import { FilledTextInput } from '../themed/FilledTextInput' import { MainButton } from '../themed/MainButton' import { ModalMessage, ModalTitle } from '../themed/ModalParts' -import { ThemedModal } from '../themed/ThemedModal' +import { ModalUi4 } from '../ui4/ModalUi4' interface Props { // Resolves to the entered string, or void if cancelled. @@ -91,7 +91,7 @@ export function TextInputModal(props: Props) { } return ( - bridge.resolve(undefined)}> + bridge.resolve(undefined)}> {title != null ? {title} : null} {typeof message === 'string' ? {message} : <>{message}} {warningMessage != null ? : null} @@ -126,6 +126,6 @@ export function TextInputModal(props: Props) { ) : ( )} - + ) } diff --git a/src/components/ui4/ModalUi4.tsx b/src/components/ui4/ModalUi4.tsx new file mode 100644 index 00000000000..0eefe82fba1 --- /dev/null +++ b/src/components/ui4/ModalUi4.tsx @@ -0,0 +1,203 @@ +import * as React from 'react' +import { BackHandler, Dimensions, StyleSheet, TouchableOpacity, TouchableWithoutFeedback, View } from 'react-native' +import { AirshipBridge } from 'react-native-airship' +import { Gesture, GestureDetector, ScrollView } from 'react-native-gesture-handler' +import { cacheStyles } from 'react-native-patina' +import Animated, { runOnJS, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated' +import AntDesignIcon from 'react-native-vector-icons/AntDesign' +import { BlurView } from 'rn-id-blurview' + +import { useHandler } from '../../hooks/useHandler' +import { fixSides, mapSides, sidesToMargin } from '../../util/sides' +import { maybeComponent } from '../hoc/maybeComponent' +import { Theme, useTheme } from '../services/ThemeContext' + +export interface ModalPropsUi4 { + bridge: AirshipBridge + children?: React.ReactNode + + // Internal padding to place inside the component. + paddingRem?: number[] | number + + // Include a scroll area: + scroll?: boolean + + // Gives the box a border: + warning?: boolean + + // Called when the user taps outside the modal or clicks the back button. + // If this is missing, the modal will not be closable. + onCancel?: () => void +} + +const safeAreaGap = 64 // Overkill to avoid bottom of screen +const duration = 300 + +/** + * A modal that slides a modal up from the bottom of the screen + * and dims the rest of the app. + */ +export function ModalUi4(props: ModalPropsUi4): JSX.Element { + const { bridge, children, paddingRem, scroll = false, warning = false, onCancel } = props + const theme = useTheme() + const styles = getStyles(theme) + + // Use margin instead of padding to give children the ability to bypass the + // default "padding," if necessary + const childrenMargin = sidesToMargin(mapSides(fixSides(paddingRem, 0.5), theme.rem)) + const closeThreshold = theme.rem(6) + const dragSlop = theme.rem(1) + + // + // Shared state + // + + const opacity = useSharedValue(0) + const offset = useSharedValue(Dimensions.get('window').height) + + const handleCancel = useHandler(() => { + if (onCancel != null) onCancel() + }) + + // + // Effects + // + + React.useEffect(() => bridge.on('clear', handleCancel), [bridge, handleCancel]) + + React.useEffect(() => { + // Animate in: + opacity.value = withTiming(1, { duration }) + offset.value = withTiming(0, { duration }) + + // Animate out: + bridge.on('result', () => { + opacity.value = withTiming(0, { duration }) + offset.value = withTiming(Dimensions.get('window').height, { duration }, () => runOnJS(bridge.remove)()) + }) + }, [bridge, opacity, offset]) + + React.useEffect(() => { + const backHandler = BackHandler.addEventListener('hardwareBackPress', () => { + handleCancel() + return true + }) + return () => backHandler.remove() + }, [handleCancel]) + + const gesture = Gesture.Pan() + .onUpdate(e => { + offset.value = e.translationY + }) + .onEnd(() => { + if (offset.value > closeThreshold) { + runOnJS(handleCancel)() + } + offset.value = withTiming(0, { duration }) + }) + + // + // Dynamic styles + // + + const underlayStyle = useAnimatedStyle(() => ({ + opacity: opacity.value + })) + + const bodyStyle = useAnimatedStyle(() => ({ + transform: [{ translateY: Math.max(-dragSlop, offset.value) }] + })) + + const bodyLayout = { + borderColor: warning ? theme.warningText : theme.modalBorderColor, + borderWidth: warning ? 4 : theme.modalBorderWidth, + marginBottom: -safeAreaGap - dragSlop, + paddingBottom: safeAreaGap + dragSlop + } + + return ( + <> + + + + + + {/* Need another Biew here because BlurView doesn't accept rounded corners in its styling */} + + + + + + + + {scroll ? ( + + {children} + + ) : ( + {children} + )} + + {onCancel == null ? null : ( + + + + )} + + + + ) +} + +const getStyles = cacheStyles((theme: Theme) => ({ + underlay: { + bottom: 0, + left: 0, + position: 'absolute', + right: 0, + top: 0 + }, + body: { + alignSelf: 'flex-end', + backgroundColor: theme.modalBackgroundUi4, + borderTopLeftRadius: theme.rem(1), + borderTopRightRadius: theme.rem(1), + flexShrink: 1, + width: theme.rem(30) // This works as a maxWidth because flexShrink is set + }, + + blurContainer: { + position: 'absolute', + width: '100%', + height: '100%', + borderTopLeftRadius: theme.rem(1), + borderTopRightRadius: theme.rem(1), + overflow: 'hidden' + }, + dragBarContainer: { + alignItems: 'center', + left: 0, + position: 'absolute', + right: 0, + top: 0 + }, + dragBar: { + // TODO: Replace this color we have a proper design: + backgroundColor: theme.deactivatedText, + borderRadius: theme.rem(0.125), + height: theme.rem(0.25), + marginTop: theme.rem(0.5), + width: theme.rem(3) + }, + closeIcon: { + alignItems: 'center', + height: theme.rem(2), + justifyContent: 'center', + position: 'absolute', + right: 0, + top: 0, + width: theme.rem(2) + } +})) + +const MaybeScrollView = maybeComponent(ScrollView) diff --git a/src/theme/variables/edgeDark.ts b/src/theme/variables/edgeDark.ts index 2e086074b45..a0f7d693717 100644 --- a/src/theme/variables/edgeDark.ts +++ b/src/theme/variables/edgeDark.ts @@ -550,6 +550,8 @@ export const edgeDark: Theme = { start: { x: 1, y: 0 } }, + modalBackgroundUi4: 'rgba(255, 255, 255, 0.376)', + txDirBgReceiveUi4: palette.greenOp60, txDirBgSendUi4: palette.redOp60, txDirBgSwapUi4: palette.grayOp70, diff --git a/src/theme/variables/edgeLight.ts b/src/theme/variables/edgeLight.ts index 591304d5f8f..44a03901cc7 100644 --- a/src/theme/variables/edgeLight.ts +++ b/src/theme/variables/edgeLight.ts @@ -519,6 +519,8 @@ export const edgeLight: Theme = { start: { x: 1, y: 0 } }, + modalBackgroundUi4: '#ffffff80', + txDirBgReceiveUi4: palette.greenOp60, txDirBgSendUi4: palette.redOp60, txDirBgSwapUi4: palette.grayOp70, diff --git a/src/theme/variables/testDark.ts b/src/theme/variables/testDark.ts index 07e4c3a896a..fc5c69cedcd 100644 --- a/src/theme/variables/testDark.ts +++ b/src/theme/variables/testDark.ts @@ -550,6 +550,8 @@ export const testDark: Theme = { start: { x: 1, y: 0 } }, + modalBackgroundUi4: '#00000080', + txDirBgReceiveUi4: palette.greenOp60, txDirBgSendUi4: palette.redOp60, txDirBgSwapUi4: palette.grayOp70, diff --git a/src/theme/variables/testLight.ts b/src/theme/variables/testLight.ts index 32b666db638..79c4159916f 100644 --- a/src/theme/variables/testLight.ts +++ b/src/theme/variables/testLight.ts @@ -519,6 +519,8 @@ export const testLight: Theme = { start: { x: 1, y: 0 } }, + modalBackgroundUi4: '#ffffff80', + txDirBgReceiveUi4: palette.greenOp60, txDirBgSendUi4: palette.redOp60, txDirBgSwapUi4: palette.grayOp70, diff --git a/src/types/Theme.ts b/src/types/Theme.ts index 5afc844cfb7..96dc5320e2a 100644 --- a/src/types/Theme.ts +++ b/src/types/Theme.ts @@ -454,6 +454,8 @@ export interface Theme { fioCardGradientUi4: ThemeGradientParams swapCardGradientUi4: ThemeGradientParams + modalBackgroundUi4: string + txDirBgReceiveUi4: string txDirBgSendUi4: string txDirBgSwapUi4: string From 91f1a7a724525a8286d2768ec21084848734b23c Mon Sep 17 00:00:00 2001 From: Jon Tzeng Date: Thu, 11 Jan 2024 19:41:07 -0800 Subject: [PATCH 3/3] Integrate ModalUi4 into most places --- .../AccelerateTxModal.test.tsx.snap | 4 +- .../__snapshots__/AddressModal.test.tsx.snap | 4 +- .../AutoLogoutModal.test.tsx.snap | 4 +- .../__snapshots__/CategoryModal.test.tsx.snap | 3644 ++++++++++------- .../__snapshots__/HelpModal.test.tsx.snap | 1635 ++++---- .../PasswordReminderModal.test.tsx.snap | 4 +- src/components/FioAddress/DomainListModal.tsx | 16 +- src/components/modals/AccelerateTxModal.tsx | 6 +- src/components/modals/AddressModal.tsx | 6 +- src/components/modals/AutoLogoutModal.tsx | 6 +- src/components/modals/ButtonsModal.tsx | 16 +- src/components/modals/CategoryModal.tsx | 18 +- .../modals/ConfirmContinueModal.tsx | 6 +- .../modals/FioCreateHandleModal.tsx | 6 +- src/components/modals/FioExpiredModal.tsx | 6 +- src/components/modals/FlipInputModal2.tsx | 6 +- src/components/modals/HelpModal.tsx | 6 +- .../modals/InsufficientFeesModal.tsx | 6 +- src/components/modals/ListModal.tsx | 17 +- src/components/modals/LogsModal.tsx | 6 +- .../modals/PasswordReminderModal.tsx | 6 +- .../modals/PermissionsSettingModal.tsx | 6 +- src/components/modals/RawTextModal.tsx | 6 +- .../modals/SwapVerifyTermsModal.tsx | 6 +- src/components/modals/TransferModal.tsx | 19 +- src/components/modals/UpdateModal.tsx | 6 +- src/components/modals/WalletListMenuModal.tsx | 6 +- .../modals/WcSmartContractModal.tsx | 10 +- src/components/modals/WebViewModal.tsx | 6 +- .../scenes/CryptoExchangeQuoteScene.tsx | 6 +- .../scenes/Fio/FioStakingChangeScene.tsx | 6 +- 31 files changed, 3049 insertions(+), 2456 deletions(-) diff --git a/src/__tests__/modals/__snapshots__/AccelerateTxModal.test.tsx.snap b/src/__tests__/modals/__snapshots__/AccelerateTxModal.test.tsx.snap index b4399674cd3..b54f8101607 100644 --- a/src/__tests__/modals/__snapshots__/AccelerateTxModal.test.tsx.snap +++ b/src/__tests__/modals/__snapshots__/AccelerateTxModal.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`AccelerateTxModalComponent should render with loading props 1`] = ` - - + `; diff --git a/src/__tests__/modals/__snapshots__/AddressModal.test.tsx.snap b/src/__tests__/modals/__snapshots__/AddressModal.test.tsx.snap index 7b234322731..42b9fa44851 100644 --- a/src/__tests__/modals/__snapshots__/AddressModal.test.tsx.snap +++ b/src/__tests__/modals/__snapshots__/AddressModal.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`AddressModalComponent should render with loaded props 1`] = ` - - + `; diff --git a/src/__tests__/modals/__snapshots__/AutoLogoutModal.test.tsx.snap b/src/__tests__/modals/__snapshots__/AutoLogoutModal.test.tsx.snap index 5403c445ee4..56cd5560983 100644 --- a/src/__tests__/modals/__snapshots__/AutoLogoutModal.test.tsx.snap +++ b/src/__tests__/modals/__snapshots__/AutoLogoutModal.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`AutoLogoutModal should render with loading props 1`] = ` - - + `; diff --git a/src/__tests__/modals/__snapshots__/CategoryModal.test.tsx.snap b/src/__tests__/modals/__snapshots__/CategoryModal.test.tsx.snap index b026c839963..d737c15bbb0 100644 --- a/src/__tests__/modals/__snapshots__/CategoryModal.test.tsx.snap +++ b/src/__tests__/modals/__snapshots__/CategoryModal.test.tsx.snap @@ -13,7 +13,6 @@ exports[`CategoryModal should render with a subcategory 1`] = ` } } accessible={true} - collapsable={false} focusable={true} onClick={[Function]} onResponderGrant={[Function]} @@ -23,320 +22,424 @@ exports[`CategoryModal should render with a subcategory 1`] = ` onResponderTerminationRequest={[Function]} onStartShouldSetResponder={[Function]} style={ - { - "backgroundColor": "transparent", - "bottom": 0, - "left": 0, - "opacity": 0, - "position": "absolute", - "right": 0, - "top": 0, - } - } - > - - , + }, + { + "opacity": 0, + }, + ] + } + />, - - Choose a Category - + /> + + + - Income + Choose a Category - - Expense - - - + Income + + + - + + Expense + + + - Transfer - + + Transfer + + + + + Exchange + + - - Exchange - - - - - - + /> - + + Sub-category + + + - Sub-category - + testID="undefined.textInput" + textAlignVertical="top" + value="Paycheck" + /> - - - - - -  - + +  + + - - + + + + + Income:Paycheck + + + + + + + + + + + + + - + + + + Exchange:Paycheck + + + + + + + + + + + + + + + + + + Expense:Paycheck + + + + + + + + + + + + + + + > + + + + Transfer:Paycheck + + + + + + + + + + + - - - - - , + }, + { + "opacity": 0, + }, + ] + } + />, - - Choose a Category - + /> + + + - Income + Choose a Category - - Expense - - - + Income + + + - + + Expense + + + - Transfer - + + Transfer + + + + + Exchange + + - - Exchange - - - - - - + + + - + Sub-category + + + - Sub-category - + testID="undefined.textInput" + textAlignVertical="top" + value="" + /> - - - - - -  - + +  + + - - + + + + + Exchange:Buy Bitcoin + + + + + + + + + + + + Exchange:Sell Bitcoin + + + + + + + + + + + + Expense:Air Travel + + + + + + + - + > + + + + Expense:Alcohol & Bars + + + + + - - - - - , + }, + { + "opacity": 0, + }, + ] + } + />, - - + /> + + + + + + + + - + Thanks for using Edge! + + + + + + + } + > - Thanks for using Edge! +  - - - - - -  - - - + - - Knowledge Base - - - Commonly asked questions and FAQ - - + Commonly asked questions and FAQ + - + + + + > + +  + + - - -  - - - + - - Submit a Support Ticket - - - Troubleshooting and technical support - - + Troubleshooting and technical support + - + + + + > + +  + + - - -  - - - + - - Call for Assistance - - - Get in touch by phone - - + Get in touch by phone + - + + + + > + +  + + - - -  - - - + - - Visit the Edge site - - - More info on Edge - - + More info on Edge + - + + + + > + +  + + - - -  - - - + - - Terms of Service - - - Understand your obligations and risks associated with our platform - - + Understand your obligations and risks associated with our platform + - - - Version 1.2.3 - - - Build 2019010101 - - - - - + + Version 1.2.3 + + + > + Build 2019010101 + + - + - + `; diff --git a/src/components/FioAddress/DomainListModal.tsx b/src/components/FioAddress/DomainListModal.tsx index 82f646d0ec9..8d919f4cdbf 100644 --- a/src/components/FioAddress/DomainListModal.tsx +++ b/src/components/FioAddress/DomainListModal.tsx @@ -1,7 +1,7 @@ -import { FlashList } from '@shopify/flash-list' import * as React from 'react' import { TouchableOpacity, View } from 'react-native' import { AirshipBridge } from 'react-native-airship' +import { FlatList } from 'react-native-gesture-handler' import { Fontello } from '../../assets/vector' import { FIO_ADDRESS_DELIMITER, FIO_DOMAIN_DEFAULT } from '../../constants/WalletAndCurrencyConstants' @@ -13,9 +13,9 @@ import { SearchIconAnimated } from '../icons/ThemedIcons' import { cacheStyles, Theme, ThemeProps, withTheme } from '../services/ThemeContext' import { ClickableText } from '../themed/ClickableText' import { EdgeText } from '../themed/EdgeText' -import { ModalFooter, ModalFooterFade, ModalTitle } from '../themed/ModalParts' +import { ModalFooter, ModalTitle } from '../themed/ModalParts' import { SimpleTextInput } from '../themed/SimpleTextInput' -import { ThemedModal } from '../themed/ThemedModal' +import { ModalUi4 } from '../ui4/ModalUi4' interface Item { label: string @@ -154,7 +154,7 @@ class DomainListModalComponent extends React.Component { const styles = getStyles(theme) return ( - bridge.resolve(undefined)} paddingRem={[1, 0]}> + bridge.resolve(undefined)} paddingRem={[1, 0]}> {lstrings.fio_address_choose_domain_label} @@ -169,16 +169,16 @@ class DomainListModalComponent extends React.Component { value={input} iconComponent={SearchIconAnimated} /> - - - + {/* */} + ) } } diff --git a/src/components/modals/AccelerateTxModal.tsx b/src/components/modals/AccelerateTxModal.tsx index 3c1b8d05046..46d0bca2686 100644 --- a/src/components/modals/AccelerateTxModal.tsx +++ b/src/components/modals/AccelerateTxModal.tsx @@ -13,7 +13,7 @@ import { WarningCard } from '../cards/WarningCard' import { cacheStyles, Theme, ThemeProps, withTheme } from '../services/ThemeContext' import { ModalMessage, ModalTitle } from '../themed/ModalParts' import { Slider } from '../themed/Slider' -import { ThemedModal } from '../themed/ThemedModal' +import { ModalUi4 } from '../ui4/ModalUi4' import { RowUi4 } from '../ui4/RowUi4' interface OwnProps { @@ -111,7 +111,7 @@ export class AccelerateTxModalComponent extends PureComponent { const isSending = status === 'sending' return ( - + {lstrings.transaction_details_accelerate_transaction_header} {lstrings.transaction_details_accelerate_transaction_instructional} @@ -140,7 +140,7 @@ export class AccelerateTxModalComponent extends PureComponent { disabledText={lstrings.transaction_details_accelerate_transaction_slider_disabled} /> - + ) } } diff --git a/src/components/modals/AddressModal.tsx b/src/components/modals/AddressModal.tsx index 15ec36ff6c0..7c1d0b4caa6 100644 --- a/src/components/modals/AddressModal.tsx +++ b/src/components/modals/AddressModal.tsx @@ -20,7 +20,7 @@ import { cacheStyles, Theme, ThemeProps, withTheme } from '../services/ThemeCont import { FilledTextInput } from '../themed/FilledTextInput' import { MainButton } from '../themed/MainButton' import { ModalTitle } from '../themed/ModalParts' -import { ThemedModal } from '../themed/ThemedModal' +import { ModalUi4 } from '../ui4/ModalUi4' interface OwnProps { bridge: AirshipBridge @@ -304,7 +304,7 @@ export class AddressModalComponent extends React.Component { const styles = getStyles(theme) return ( - + {title || lstrings.address_modal_default_header} @@ -338,7 +338,7 @@ export class AddressModalComponent extends React.Component { {/* TODO: Style ButtonsViewUi4 for Modals */} - + ) } } diff --git a/src/components/modals/AutoLogoutModal.tsx b/src/components/modals/AutoLogoutModal.tsx index f40644c998e..796bbefd2aa 100644 --- a/src/components/modals/AutoLogoutModal.tsx +++ b/src/components/modals/AutoLogoutModal.tsx @@ -10,8 +10,8 @@ import { DisplayTime, displayToSeconds, secondsToDisplay } from '../../util/disp import { cacheStyles, Theme, useTheme } from '../services/ThemeContext' import { EdgeText } from '../themed/EdgeText' import { ModalTitle } from '../themed/ModalParts' -import { ThemedModal } from '../themed/ThemedModal' import { ButtonsViewUi4 } from '../ui4/ButtonsViewUi4' +import { ModalUi4 } from '../ui4/ModalUi4' interface Props { bridge: AirshipBridge @@ -76,7 +76,7 @@ export const AutoLogoutModal = (props: Props) => { }, []) return ( - + {lstrings.dialog_title} {isAndroid ? ( @@ -116,7 +116,7 @@ export const AutoLogoutModal = (props: Props) => { )} - + ) } diff --git a/src/components/modals/ButtonsModal.tsx b/src/components/modals/ButtonsModal.tsx index ff122d4def9..09078fe496a 100644 --- a/src/components/modals/ButtonsModal.tsx +++ b/src/components/modals/ButtonsModal.tsx @@ -2,11 +2,12 @@ import * as React from 'react' import { View, ViewStyle } from 'react-native' import { AirshipBridge } from 'react-native-airship' +import { useHandler } from '../../hooks/useHandler' import { showError } from '../services/AirshipInstance' import { useTheme } from '../services/ThemeContext' import { MainButton } from '../themed/MainButton' import { ModalMessage, ModalTitle } from '../themed/ModalParts' -import { ThemedModal } from '../themed/ThemedModal' +import { ModalUi4 } from '../ui4/ModalUi4' export interface ButtonInfo { label: string @@ -26,12 +27,15 @@ export interface ButtonModalProps { message?: string children?: React.ReactNode buttons: Buttons - closeArrow?: boolean disableCancel?: boolean fullScreen?: boolean // Adds a border: warning?: boolean + + /** @deprecated. Does nothing. */ + // eslint-disable-next-line react/no-unused-prop-types + closeArrow?: boolean } /** @@ -46,10 +50,10 @@ export interface ButtonModalProps { * or other interactive elements. */ export function ButtonsModal(props: ButtonModalProps) { - const { bridge, title, message, children, buttons, closeArrow = false, disableCancel = false, fullScreen = false, warning } = props + const { bridge, title, message, children, buttons, disableCancel = false, fullScreen = false, warning } = props const theme = useTheme() - const handleCancel = disableCancel ? () => {} : () => bridge.resolve(undefined) + const handleCancel = useHandler(() => bridge.resolve(undefined)) const containerStyle: ViewStyle = { flex: fullScreen ? 1 : 0 @@ -62,7 +66,7 @@ export function ButtonsModal(prop } return ( - + {title != null ? {title} : null} @@ -96,6 +100,6 @@ export function ButtonsModal(prop return })} - + ) } diff --git a/src/components/modals/CategoryModal.tsx b/src/components/modals/CategoryModal.tsx index db5258a68e6..1037d2ae643 100644 --- a/src/components/modals/CategoryModal.tsx +++ b/src/components/modals/CategoryModal.tsx @@ -1,7 +1,7 @@ -import { FlashList, ListRenderItem } from '@shopify/flash-list' import * as React from 'react' -import { TouchableHighlight, View } from 'react-native' +import { ListRenderItem, TouchableHighlight, View } from 'react-native' import { AirshipBridge } from 'react-native-airship' +import { FlatList } from 'react-native-gesture-handler' import { Category, displayCategories, formatCategory, getSubcategories, joinCategory, setNewSubcategory, splitCategory } from '../../actions/CategoriesActions' import { useAsyncEffect } from '../../hooks/useAsyncEffect' @@ -14,8 +14,8 @@ import { cacheStyles, Theme, useTheme } from '../services/ThemeContext' import { DividerLine } from '../themed/DividerLine' import { EdgeText } from '../themed/EdgeText' import { FilledTextInput } from '../themed/FilledTextInput' -import { ModalFooter, ModalFooterFade, ModalTitle } from '../themed/ModalParts' -import { ThemedModal } from '../themed/ThemedModal' +import { ModalFooter, ModalTitle } from '../themed/ModalParts' +import { ModalUi4 } from '../ui4/ModalUi4' interface Props { bridge: AirshipBridge @@ -133,7 +133,7 @@ export function CategoryModal(props: Props) { )) return ( - + {lstrings.category_modal_title} {categoryOrder.map(item => ( @@ -150,17 +150,17 @@ export function CategoryModal(props: Props) { value={subcategory} /> - - + {/* */} - + ) } diff --git a/src/components/modals/ConfirmContinueModal.tsx b/src/components/modals/ConfirmContinueModal.tsx index a52b775c5d8..b1fbfa94c7b 100644 --- a/src/components/modals/ConfirmContinueModal.tsx +++ b/src/components/modals/ConfirmContinueModal.tsx @@ -10,7 +10,7 @@ import { EdgeText } from '../themed/EdgeText' import { Fade } from '../themed/Fade' import { MainButton } from '../themed/MainButton' import { ModalMessage, ModalTitle } from '../themed/ModalParts' -import { ThemedModal } from '../themed/ThemedModal' +import { ModalUi4 } from '../ui4/ModalUi4' interface Props { bridge: AirshipBridge @@ -48,7 +48,7 @@ export function ConfirmContinueModal(props: Props) { } return ( - + {title != null && ( @@ -71,7 +71,7 @@ export function ConfirmContinueModal(props: Props) { - + ) } diff --git a/src/components/modals/FioCreateHandleModal.tsx b/src/components/modals/FioCreateHandleModal.tsx index 89abee0f385..932c9f92609 100644 --- a/src/components/modals/FioCreateHandleModal.tsx +++ b/src/components/modals/FioCreateHandleModal.tsx @@ -10,8 +10,8 @@ import { parseMarkedText } from '../../util/parseMarkedText' import { styled } from '../hoc/styled' import { cacheStyles, Theme, useTheme } from '../services/ThemeContext' import { EdgeText } from '../themed/EdgeText' -import { ThemedModal } from '../themed/ThemedModal' import { ButtonsViewUi4 } from '../ui4/ButtonsViewUi4' +import { ModalUi4 } from '../ui4/ModalUi4' interface Props { bridge: AirshipBridge @@ -38,7 +38,7 @@ export const FioCreateHandleModal = (props: Props) => { }) return ( - + @@ -58,7 +58,7 @@ export const FioCreateHandleModal = (props: Props) => { secondary={{ label: lstrings.not_now_button, onPress: handleCancel }} layout="column" /> - + ) } diff --git a/src/components/modals/FioExpiredModal.tsx b/src/components/modals/FioExpiredModal.tsx index 665fc5aa09f..c16abbf1ef2 100644 --- a/src/components/modals/FioExpiredModal.tsx +++ b/src/components/modals/FioExpiredModal.tsx @@ -4,18 +4,18 @@ import { AirshipBridge } from 'react-native-airship' import { lstrings } from '../../locales/strings' import { MainButton } from '../themed/MainButton' import { ModalMessage, ModalTitle } from '../themed/ModalParts' -import { ThemedModal } from '../themed/ThemedModal' +import { ModalUi4 } from '../ui4/ModalUi4' export function FioExpiredModal(props: { bridge: AirshipBridge; fioName: string }) { const { bridge, fioName } = props const title = `${lstrings.fio_address_confirm_screen_fio_label} ${lstrings.string_expiration}` return ( - bridge.resolve(false)}> + bridge.resolve(false)}> {title} {lstrings.fio_domain_details_expired_soon} {fioName} bridge.resolve(true)} /> - + ) } diff --git a/src/components/modals/FlipInputModal2.tsx b/src/components/modals/FlipInputModal2.tsx index a291b591368..7106a76e18e 100644 --- a/src/components/modals/FlipInputModal2.tsx +++ b/src/components/modals/FlipInputModal2.tsx @@ -22,8 +22,8 @@ import { FiatText } from '../text/FiatText' import { EdgeText } from '../themed/EdgeText' import { ExchangedFlipInput2, ExchangedFlipInputAmounts, ExchangedFlipInputRef, ExchangeFlipInputFields } from '../themed/ExchangedFlipInput2' import { MiniButton } from '../themed/MiniButton' -import { ThemedModal } from '../themed/ThemedModal' import { CardUi4 } from '../ui4/CardUi4' +import { ModalUi4 } from '../ui4/ModalUi4' export interface FlipInputModalResult { nativeAmount: string @@ -219,7 +219,7 @@ const FlipInputModal2Component = React.forwardRef((pro })) return ( - + {/* Extra view needed here to fullscreen the modal on small devices */} {renderFlipInput()} @@ -232,7 +232,7 @@ const FlipInputModal2Component = React.forwardRef((pro - + ) }) diff --git a/src/components/modals/HelpModal.tsx b/src/components/modals/HelpModal.tsx index 105b769c07a..c5ece07b33f 100644 --- a/src/components/modals/HelpModal.tsx +++ b/src/components/modals/HelpModal.tsx @@ -17,7 +17,7 @@ import { cacheStyles, Theme, useTheme } from '../services/ThemeContext' import { EdgeText } from '../themed/EdgeText' import { ModalTitle } from '../themed/ModalParts' import { SelectableRow } from '../themed/SelectableRow' -import { ThemedModal } from '../themed/ThemedModal' +import { ModalUi4 } from '../ui4/ModalUi4' const buildNumber = getBuildNumber() const versionNumber = getVersion() @@ -61,7 +61,7 @@ export const HelpModal = (props: Props) => { const helpSiteMoreInfoText = sprintf(lstrings.help_site_more_info_text, config.appName) return ( - + @@ -106,7 +106,7 @@ export const HelpModal = (props: Props) => { {versionText} {buildText} - + ) } diff --git a/src/components/modals/InsufficientFeesModal.tsx b/src/components/modals/InsufficientFeesModal.tsx index 2de550c6cb4..a19040ca3c3 100644 --- a/src/components/modals/InsufficientFeesModal.tsx +++ b/src/components/modals/InsufficientFeesModal.tsx @@ -13,7 +13,7 @@ import { getCurrencyCode } from '../../util/CurrencyInfoHelpers' import { roundedFee } from '../../util/utils' import { MainButton } from '../themed/MainButton' import { ModalMessage, ModalTitle } from '../themed/ModalParts' -import { ThemedModal } from '../themed/ThemedModal' +import { ModalUi4 } from '../ui4/ModalUi4' interface Props { bridge: AirshipBridge @@ -54,12 +54,12 @@ export function InsufficientFeesModal(props: Props) { }) return ( - + {lstrings.buy_crypto_modal_title} {sprintf(lstrings.buy_parent_crypto_modal_message_2s, amountString, name)} - + ) } diff --git a/src/components/modals/ListModal.tsx b/src/components/modals/ListModal.tsx index fa3f108ed89..cc377f461cc 100644 --- a/src/components/modals/ListModal.tsx +++ b/src/components/modals/ListModal.tsx @@ -1,13 +1,13 @@ -import { FlashList, ListRenderItem } from '@shopify/flash-list' import * as React from 'react' -import { Keyboard, ViewStyle, ViewToken } from 'react-native' +import { Keyboard, ListRenderItem, ViewStyle, ViewToken } from 'react-native' import { AirshipBridge } from 'react-native-airship' +import { FlatList } from 'react-native-gesture-handler' import { useFilter } from '../../hooks/useFilter' import { useTheme } from '../services/ThemeContext' import { FilledTextInput } from '../themed/FilledTextInput' import { ModalFooter, ModalMessage, ModalTitle } from '../themed/ModalParts' -import { ThemedModal } from '../themed/ThemedModal' +import { ModalUi4 } from '../ui4/ModalUi4' interface Props { bridge: AirshipBridge @@ -36,8 +36,6 @@ interface Props { rowComponent?: (props: T) => React.ReactElement rowDataFilter?: (filterText: string, data: T, index: number) => boolean onViewableItemsChanged?: (info: { viewableItems: ViewToken[]; changed: ViewToken[] }) => void - // Footer Props - closeArrow?: boolean // Defaults to 'true' } export function ListModal({ @@ -50,7 +48,6 @@ export function ListModal({ fullScreen = true, rowComponent, rowDataFilter, - closeArrow = true, onSubmitEditing, onViewableItemsChanged, label: placeholder, @@ -73,7 +70,7 @@ export function ListModal({ }, [theme]) return ( - + {title == null ? null : {title}} {message == null ? null : {message}} {textInput == null ? null : ( @@ -95,16 +92,16 @@ export function ListModal({ {...textProps} /> )} - `${i}`} renderItem={renderItem} onScroll={() => Keyboard.dismiss()} onViewableItemsChanged={onViewableItemsChanged} /> - + ) } diff --git a/src/components/modals/LogsModal.tsx b/src/components/modals/LogsModal.tsx index 3f1c30d386e..11ae5ee5af0 100644 --- a/src/components/modals/LogsModal.tsx +++ b/src/components/modals/LogsModal.tsx @@ -11,7 +11,7 @@ import { showToast } from '../services/AirshipInstance' import { FilledTextInput } from '../themed/FilledTextInput' import { MainButton } from '../themed/MainButton' import { ModalMessage, ModalTitle } from '../themed/ModalParts' -import { ThemedModal } from '../themed/ThemedModal' +import { ModalUi4 } from '../ui4/ModalUi4' interface Props { bridge: AirshipBridge logs: MultiLogOutput @@ -71,7 +71,7 @@ export const LogsModal = (props: Props) => { } return ( - + {lstrings.settings_button_export_logs} {!isDangerous ? null : } {isDangerous ? null : {lstrings.settings_modal_export_logs_message}} @@ -89,6 +89,6 @@ export const LogsModal = (props: Props) => { )} - + ) } diff --git a/src/components/modals/PasswordReminderModal.tsx b/src/components/modals/PasswordReminderModal.tsx index 280e0d3246a..5b75d0b492d 100644 --- a/src/components/modals/PasswordReminderModal.tsx +++ b/src/components/modals/PasswordReminderModal.tsx @@ -10,8 +10,8 @@ import { showError, showToast } from '../services/AirshipInstance' import { ThemeProps, withTheme } from '../services/ThemeContext' import { FilledTextInput } from '../themed/FilledTextInput' import { ModalMessage, ModalTitle } from '../themed/ModalParts' -import { ThemedModal } from '../themed/ThemedModal' import { ButtonsViewUi4 } from '../ui4/ButtonsViewUi4' +import { ModalUi4 } from '../ui4/ModalUi4' interface OwnProps { bridge: AirshipBridge @@ -79,7 +79,7 @@ export class PasswordReminderModalComponent extends React.PureComponent + {lstrings.password_reminder_remember_your_password} {lstrings.password_reminder_you_will_need_your_password} @@ -107,7 +107,7 @@ export class PasswordReminderModalComponent extends React.PureComponent - + ) } } diff --git a/src/components/modals/PermissionsSettingModal.tsx b/src/components/modals/PermissionsSettingModal.tsx index 8d6fe4bf704..96f669df730 100644 --- a/src/components/modals/PermissionsSettingModal.tsx +++ b/src/components/modals/PermissionsSettingModal.tsx @@ -11,7 +11,7 @@ import { showError } from '../services/AirshipInstance' import { checkIfDenied } from '../services/PermissionsManager' import { MainButton } from '../themed/MainButton' import { ModalMessage } from '../themed/ModalParts' -import { ThemedModal } from '../themed/ThemedModal' +import { ModalUi4 } from '../ui4/ModalUi4' export function PermissionsSettingModal(props: { bridge: AirshipBridge // returns true if mandatory and denied @@ -45,9 +45,9 @@ export function PermissionsSettingModal(props: { const handleClose = () => bridge.resolve(mandatory) return ( - + {message} - + ) } diff --git a/src/components/modals/RawTextModal.tsx b/src/components/modals/RawTextModal.tsx index 67c92f09840..afd88aa8704 100644 --- a/src/components/modals/RawTextModal.tsx +++ b/src/components/modals/RawTextModal.tsx @@ -7,7 +7,7 @@ import { lstrings } from '../../locales/strings' import { showToast } from '../services/AirshipInstance' import { MainButton } from '../themed/MainButton' import { ModalMessage, ModalTitle } from '../themed/ModalParts' -import { ThemedModal } from '../themed/ThemedModal' +import { ModalUi4 } from '../ui4/ModalUi4' interface Props { bridge: AirshipBridge @@ -27,7 +27,7 @@ export function RawTextModal(props: Props) { } return ( - + {title != null ? {title} : null} {body} @@ -35,6 +35,6 @@ export function RawTextModal(props: Props) { {disableCopy ? null : ( )} - + ) } diff --git a/src/components/modals/SwapVerifyTermsModal.tsx b/src/components/modals/SwapVerifyTermsModal.tsx index dfc20ac99ea..bbcde81449d 100644 --- a/src/components/modals/SwapVerifyTermsModal.tsx +++ b/src/components/modals/SwapVerifyTermsModal.tsx @@ -10,7 +10,7 @@ import { Airship } from '../services/AirshipInstance' import { cacheStyles, Theme, useTheme } from '../services/ThemeContext' import { MainButton } from '../themed/MainButton' import { ModalMessage, ModalTitle } from '../themed/ModalParts' -import { ThemedModal } from '../themed/ThemedModal' +import { ModalUi4 } from '../ui4/ModalUi4' interface TermsUri { termsUri?: string @@ -59,7 +59,7 @@ function SwapVerifyTermsModal(props: Props) { const styles = getStyles(theme) return ( - bridge.resolve(false)}> + bridge.resolve(false)}> {displayName} @@ -84,7 +84,7 @@ function SwapVerifyTermsModal(props: Props) { )} - + ) } diff --git a/src/components/modals/TransferModal.tsx b/src/components/modals/TransferModal.tsx index 7e3b9464e65..74d24ec1968 100644 --- a/src/components/modals/TransferModal.tsx +++ b/src/components/modals/TransferModal.tsx @@ -17,7 +17,7 @@ import { Airship } from '../services/AirshipInstance' import { Theme, useTheme } from '../services/ThemeContext' import { ModalTitle } from '../themed/ModalParts' import { SelectableRow } from '../themed/SelectableRow' -import { ThemedModal } from '../themed/ThemedModal' +import { ModalUi4 } from '../ui4/ModalUi4' import { WalletListModal, WalletListResult } from './WalletListModal' interface Props { @@ -152,24 +152,13 @@ export const TransferModal = ({ account, bridge, depositOrSend, navigation }: Pr const options = depositOrSend === 'deposit' ? depositOptions : sendOptions return ( - + {depositOrSend === 'deposit' ? lstrings.loan_fragment_deposit : lstrings.fragment_send_subtitle} {options.map((option, index) => { const { title, icon, onPress } = option - return ( - {icon}} - // HACK: ThemedModal has 1 rem padding all around, making it - // impossible to use components expecting split 0.5rem - // margin/padding. - marginRem={[0.5, -0.5]} - /> - ) + return {icon}} /> })} - + ) } diff --git a/src/components/modals/UpdateModal.tsx b/src/components/modals/UpdateModal.tsx index 7235bac22f6..de22198517d 100644 --- a/src/components/modals/UpdateModal.tsx +++ b/src/components/modals/UpdateModal.tsx @@ -9,7 +9,7 @@ import { config } from '../../theme/appConfig' import { cacheStyles, Theme, useTheme } from '../services/ThemeContext' import { MainButton } from '../themed/MainButton' import { ModalMessage, ModalTitle } from '../themed/ModalParts' -import { ThemedModal } from '../themed/ThemedModal' +import { ModalUi4 } from '../ui4/ModalUi4' interface Props { bridge: AirshipBridge @@ -31,7 +31,7 @@ export function UpdateModal(props: Props) { const message = sprintf(lstrings.update_fresh_new_version, config.appName) return ( - + {lstrings.update_header} @@ -39,7 +39,7 @@ export function UpdateModal(props: Props) { {message} - + ) } diff --git a/src/components/modals/WalletListMenuModal.tsx b/src/components/modals/WalletListMenuModal.tsx index 85717531dd6..d0c7033eba4 100644 --- a/src/components/modals/WalletListMenuModal.tsx +++ b/src/components/modals/WalletListMenuModal.tsx @@ -18,8 +18,8 @@ import { getWalletName } from '../../util/CurrencyWalletHelpers' import { showError } from '../services/AirshipInstance' import { cacheStyles, Theme, useTheme } from '../services/ThemeContext' import { ModalScrollArea, ModalTitle } from '../themed/ModalParts' -import { ThemedModal } from '../themed/ThemedModal' import { CryptoIconUi4 } from '../ui4/CryptoIconUi4' +import { ModalUi4 } from '../ui4/ModalUi4' interface Option { value: WalletListMenuKey @@ -212,7 +212,7 @@ export function WalletListMenuModal(props: Props) { ) return ( - + {wallet != null && ( {getWalletName(wallet)} @@ -238,7 +238,7 @@ export function WalletListMenuModal(props: Props) { ))} - + ) } diff --git a/src/components/modals/WcSmartContractModal.tsx b/src/components/modals/WcSmartContractModal.tsx index 51a08fccc98..ebef8e51ecf 100644 --- a/src/components/modals/WcSmartContractModal.tsx +++ b/src/components/modals/WcSmartContractModal.tsx @@ -19,12 +19,12 @@ import { zeroString } from '../../util/utils' import { Airship, showError } from '../services/AirshipInstance' import { cacheStyles, Theme, useTheme } from '../services/ThemeContext' import { Alert } from '../themed/Alert' -import { ModalFooter, ModalFooterFade, ModalTitle } from '../themed/ModalParts' +import { ModalFooter, ModalTitle } from '../themed/ModalParts' import { SafeSlider } from '../themed/SafeSlider' -import { ThemedModal } from '../themed/ThemedModal' import { CryptoFiatAmountTile } from '../tiles/CryptoFiatAmountTile' import { FiatAmountTile } from '../tiles/FiatAmountTile' import { CardUi4 } from '../ui4/CardUi4' +import { ModalUi4 } from '../ui4/ModalUi4' import { RowUi4 } from '../ui4/RowUi4' interface Props extends WcSmartContractModalProps { @@ -141,7 +141,7 @@ export const WcSmartContractModal = (props: Props) => { ) return ( - + {lstrings.wc_smartcontract_title} @@ -177,8 +177,8 @@ export const WcSmartContractModal = (props: Props) => { )} {slider} - - + {/* */} + ) } diff --git a/src/components/modals/WebViewModal.tsx b/src/components/modals/WebViewModal.tsx index 16971d48b2a..2516dd9000b 100644 --- a/src/components/modals/WebViewModal.tsx +++ b/src/components/modals/WebViewModal.tsx @@ -4,7 +4,7 @@ import { WebView } from 'react-native-webview' import { Airship } from '../services/AirshipInstance' import { ModalTitle } from '../themed/ModalParts' -import { ThemedModal } from '../themed/ThemedModal' +import { ModalUi4 } from '../ui4/ModalUi4' export async function showWebViewModal(title: string, uri: string): Promise { await Airship.show(bridge => ) @@ -25,11 +25,11 @@ export const WebViewModal = (props: Props) => { } return ( - + {title} - + ) } diff --git a/src/components/scenes/CryptoExchangeQuoteScene.tsx b/src/components/scenes/CryptoExchangeQuoteScene.tsx index fc69f383b1f..d16a314adea 100644 --- a/src/components/scenes/CryptoExchangeQuoteScene.tsx +++ b/src/components/scenes/CryptoExchangeQuoteScene.tsx @@ -25,9 +25,9 @@ import { LineTextDivider } from '../themed/LineTextDivider' import { ModalFooter, ModalTitle } from '../themed/ModalParts' import { SceneHeader } from '../themed/SceneHeader' import { Slider } from '../themed/Slider' -import { ThemedModal } from '../themed/ThemedModal' import { WalletListSectionHeader } from '../themed/WalletListSectionHeader' import { AlertCardUi4 } from '../ui4/AlertCardUi4' +import { ModalUi4 } from '../ui4/ModalUi4' export interface CryptoExchangeQuoteParams { selectedQuote: EdgeSwapQuote @@ -140,7 +140,7 @@ export const CryptoExchangeQuoteScene = (props: Props) => { const handlePoweredByTap = useHandler(async () => { await Airship.show(bridge => ( - bridge.resolve()}> + bridge.resolve()}> {lstrings.quote_swap_provider} { renderSectionHeader={renderSectionHeader} sections={sectionList} /> - + )) }) diff --git a/src/components/scenes/Fio/FioStakingChangeScene.tsx b/src/components/scenes/Fio/FioStakingChangeScene.tsx index 1123596a788..d55a289ca87 100644 --- a/src/components/scenes/Fio/FioStakingChangeScene.tsx +++ b/src/components/scenes/Fio/FioStakingChangeScene.tsx @@ -28,7 +28,7 @@ import { ExchangedFlipInputAmounts } from '../../themed/ExchangedFlipInput2' import { ModalMessage, ModalTitle } from '../../themed/ModalParts' import { SceneHeader } from '../../themed/SceneHeader' import { Slider } from '../../themed/Slider' -import { ThemedModal } from '../../themed/ThemedModal' +import { ModalUi4 } from '../../ui4/ModalUi4' import { RowUi4 } from '../../ui4/RowUi4' interface Props extends EdgeSceneProps<'fioStakingChange'> { @@ -185,13 +185,13 @@ export const FioStakingChangeScene = withWallet((props: Props) => { const handleUnlockDate = async () => { await Airship.show(bridge => { return ( - + }> {lstrings.staking_change_unlock_explainer_title} {lstrings.staking_change_unlock_explainer1} {lstrings.staking_change_unlock_explainer2} - + ) }) }