From 91f1a7a724525a8286d2768ec21084848734b23c Mon Sep 17 00:00:00 2001 From: Jon Tzeng Date: Thu, 11 Jan 2024 19:41:07 -0800 Subject: [PATCH] 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} - + ) }) }