From a88fb8cd61bc96af336b9ea0a1b1ad7893811937 Mon Sep 17 00:00:00 2001 From: Samuel Holmes Date: Fri, 26 Jan 2024 11:47:38 -0800 Subject: [PATCH 1/7] Fix margin on HomeSceneUi4 --- src/components/ui4/scenes/HomeSceneUi4.tsx | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/src/components/ui4/scenes/HomeSceneUi4.tsx b/src/components/ui4/scenes/HomeSceneUi4.tsx index bf601061493..2a33a93803f 100644 --- a/src/components/ui4/scenes/HomeSceneUi4.tsx +++ b/src/components/ui4/scenes/HomeSceneUi4.tsx @@ -85,8 +85,8 @@ export const HomeSceneUi4 = (props: Props) => { {({ insetStyle, undoInsetStyle }) => ( <> - - + + <> @@ -192,12 +192,5 @@ const getStyles = cacheStyles((theme: Theme) => ({ justifyContent: 'space-evenly', alignContent: 'center', alignItems: 'stretch' - }, - - // We plan to remove dividers that extend all the way to the right in the - // future. In the interim, setting a margin instead of a SceneWrapper padding - // lets us do that. - tempMargin: { - margin: theme.rem(TEMP_PADDING_REM) } })) From ee4fb286784ffaafaae3d20dbc970ed4eafeca58 Mon Sep 17 00:00:00 2001 From: Samuel Holmes Date: Fri, 26 Jan 2024 12:05:11 -0800 Subject: [PATCH 2/7] Include safeAreaInset bottom to HomeSceneUi4 It looks like the SceneWrapper is incorrectly applying padding to scenes with tabs, but rather than fixing the SceneWrapper which is high-risk, just apply the padding manually. --- src/components/ui4/scenes/HomeSceneUi4.tsx | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/src/components/ui4/scenes/HomeSceneUi4.tsx b/src/components/ui4/scenes/HomeSceneUi4.tsx index 2a33a93803f..b074cbfa0ff 100644 --- a/src/components/ui4/scenes/HomeSceneUi4.tsx +++ b/src/components/ui4/scenes/HomeSceneUi4.tsx @@ -3,7 +3,7 @@ import * as React from 'react' import { ListRenderItem, View } from 'react-native' import FastImage from 'react-native-fast-image' import Animated from 'react-native-reanimated' -import { useSafeAreaFrame } from 'react-native-safe-area-context' +import { useSafeAreaFrame, useSafeAreaInsets } from 'react-native-safe-area-context' import { showBackupForTransferModal } from '../../../actions/BackupModalActions' import { useHandler } from '../../../hooks/useHandler' @@ -39,12 +39,19 @@ export const HomeSceneUi4 = (props: Props) => { const { width: screenWidth } = useSafeAreaFrame() + // TODO: Include this fix in the SceneWrapper component + const safeAreaInsets = useSafeAreaInsets() + // Evenly distribute the home cards into 4 quadrants: const cardSize = screenWidth / 2 - theme.rem(TEMP_PADDING_REM) const account = useSelector(state => state.core.account) const isLightAccount = account.username == null + // + // Handlers + // + const handleBuyPress = useHandler(() => { if (isLightAccount) { showBackupForTransferModal(() => navigation.navigate('upgradeUsername', {})) @@ -85,7 +92,11 @@ export const HomeSceneUi4 = (props: Props) => { {({ insetStyle, undoInsetStyle }) => ( <> - + <> From 2ef6efcbdd016401fd4f6b28c7acf53405a05497 Mon Sep 17 00:00:00 2001 From: Samuel Holmes Date: Fri, 26 Jan 2024 11:49:26 -0800 Subject: [PATCH 3/7] Add proper padding to WalletListScene --- src/components/scenes/WalletListScene.tsx | 2 +- src/components/themed/WalletListSwipeable.tsx | 18 ++++++++++++++++-- 2 files changed, 17 insertions(+), 3 deletions(-) diff --git a/src/components/scenes/WalletListScene.tsx b/src/components/scenes/WalletListScene.tsx index 10be267b976..7777f3c93bd 100644 --- a/src/components/scenes/WalletListScene.tsx +++ b/src/components/scenes/WalletListScene.tsx @@ -99,7 +99,7 @@ export function WalletListScene(props: Props) { ) return ( - + {({ insetStyle, undoInsetStyle }) => ( <> diff --git a/src/components/themed/WalletListSwipeable.tsx b/src/components/themed/WalletListSwipeable.tsx index f7b41348444..d47321ddc24 100644 --- a/src/components/themed/WalletListSwipeable.tsx +++ b/src/components/themed/WalletListSwipeable.tsx @@ -1,7 +1,9 @@ import { EdgeTokenId } from 'edge-core-js' import * as React from 'react' +import { useMemo } from 'react' import { FlatList, RefreshControl } from 'react-native' import Animated from 'react-native-reanimated' +import { useSafeAreaInsets } from 'react-native-safe-area-context' import { selectWalletToken } from '../../actions/WalletActions' import { useHandler } from '../../hooks/useHandler' @@ -24,7 +26,7 @@ interface Props { navigation: NavigationProp<'walletList'> searching: boolean searchText: string - insetStyle?: InsetStyle + insetStyle: InsetStyle // Callbacks: onRefresh?: () => void @@ -121,9 +123,21 @@ function WalletListSwipeableComponent(props: Props) { const handleScroll = useSceneScrollHandler() + // TODO: Include this fix in the SceneWrapper component + const safeAreaInsets = useSafeAreaInsets() + + const contentContainerStyle = useMemo(() => { + return { + paddingTop: insetStyle.paddingTop + theme.rem(0.5), + paddingBottom: insetStyle.paddingBottom + theme.rem(0.5) + safeAreaInsets.bottom, + paddingLeft: insetStyle.paddingLeft + theme.rem(0.5), + paddingRight: insetStyle.paddingRight + theme.rem(0.5) + } + }, [insetStyle.paddingBottom, insetStyle.paddingLeft, insetStyle.paddingRight, insetStyle.paddingTop, safeAreaInsets.bottom, theme]) + return ( Date: Tue, 23 Jan 2024 15:11:36 -0800 Subject: [PATCH 4/7] Fix "done footer" render for sorting mode on WalletListScene --- src/components/scenes/WalletListScene.tsx | 35 ++++++++++++++++------- 1 file changed, 25 insertions(+), 10 deletions(-) diff --git a/src/components/scenes/WalletListScene.tsx b/src/components/scenes/WalletListScene.tsx index 7777f3c93bd..0b19239d7f5 100644 --- a/src/components/scenes/WalletListScene.tsx +++ b/src/components/scenes/WalletListScene.tsx @@ -4,7 +4,7 @@ import { View } from 'react-native' import { updateWalletsSort } from '../../actions/WalletListActions' import { useHandler } from '../../hooks/useHandler' import { lstrings } from '../../locales/strings' -import { useSceneFooterRender } from '../../state/SceneFooterState' +import { useSceneFooterRender, useSceneFooterState } from '../../state/SceneFooterState' import { useDispatch, useSelector } from '../../types/reactRedux' import { EdgeSceneProps } from '../../types/routerTypes' import { CrossFade } from '../common/CrossFade' @@ -12,13 +12,13 @@ import { SceneWrapper } from '../common/SceneWrapper' import { SortOption, WalletListSortModal } from '../modals/WalletListSortModal' import { Airship, showError } from '../services/AirshipInstance' import { cacheStyles, Theme, useTheme } from '../services/ThemeContext' -import { MainButton } from '../themed/MainButton' import { SceneFooterWrapper } from '../themed/SceneFooterWrapper' import { SearchFooter } from '../themed/SearchFooter' import { WalletListHeader } from '../themed/WalletListHeader' import { WalletListSortable } from '../themed/WalletListSortable' import { WalletListSwipeable } from '../themed/WalletListSwipeable' import { WiredProgressBar } from '../themed/WiredProgressBar' +import { ButtonUi4 } from '../ui4/ButtonUi4' interface Props extends EdgeSceneProps<'walletList'> {} @@ -34,12 +34,21 @@ export function WalletListScene(props: Props) { const sortOption = useSelector(state => state.ui.settings.walletsSort) + const { setKeepOpen } = useSceneFooterState() + + // + // Handlers + // + const handleSort = useHandler(() => { Airship.show(bridge => ) .then(sort => { if (sort == null) return if (sort !== sortOption) dispatch(updateWalletsSort(sort)) - if (sort === 'manual') setSorting(true) + if (sort === 'manual') { + setKeepOpen(true) + setSorting(true) + } }) .catch(showError) }) @@ -66,20 +75,25 @@ export function WalletListScene(props: Props) { setSearchText(value) }) - // rendering ------------------------------------------------------------- + const handlePressDone = useHandler(() => { + setKeepOpen(true) + setSorting(false) + }) - const header = React.useMemo(() => { + // + // Renders + // + + const renderHeader = React.useMemo(() => { return }, [handleSort, navigation, isSearching, sorting]) - const handlePressDone = useHandler(() => setSorting(false)) - useSceneFooterRender( sceneWrapperInfo => { return sorting ? ( - + - + ) : ( @@ -107,7 +121,7 @@ export function WalletListScene(props: Props) { ({ sortFooterContainer: { + padding: theme.rem(0.5), flexDirection: 'column', alignItems: 'center' }, From 81a045f79816856f1bb730468a3bc550c7c72648 Mon Sep 17 00:00:00 2001 From: Jon Tzeng Date: Fri, 26 Jan 2024 15:50:39 -0800 Subject: [PATCH 5/7] Fully remove legacy PromoCard --- src/__tests__/components/PromoCard.test.tsx | 41 ---- .../__snapshots__/PromoCard.test.tsx.snap | 215 ------------------ src/components/cards/PromoCard.tsx | 58 ----- src/components/themed/WalletListHeader.tsx | 7 - 4 files changed, 321 deletions(-) delete mode 100644 src/__tests__/components/PromoCard.test.tsx delete mode 100644 src/__tests__/components/__snapshots__/PromoCard.test.tsx.snap delete mode 100644 src/components/cards/PromoCard.tsx diff --git a/src/__tests__/components/PromoCard.test.tsx b/src/__tests__/components/PromoCard.test.tsx deleted file mode 100644 index ed5e7d13935..00000000000 --- a/src/__tests__/components/PromoCard.test.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import { describe, expect, it } from '@jest/globals' -import * as React from 'react' -import renderer from 'react-test-renderer' - -import { PromoCard } from '../../components/cards/PromoCard' -import { MessageTweak } from '../../types/TweakTypes' -import { FakeProviders, FakeState } from '../../util/fake/FakeProviders' -import { fakeNavigation } from '../../util/fake/fakeSceneProps' - -describe('PromoCard', () => { - const fakeMessage: MessageTweak = { - message: 'Show me', - iconUri: 'https://edge.app/favicon.ico', - durationDays: 1 - } - - const mockState: FakeState = { - account: { - accountReferral: { - installerId: 'string', - currencyCodes: ['BTC'], - promotions: [], - ignoreAccountSwap: true, - hiddenAccountMessages: { messageId: true } - }, - referralCache: { - accountMessages: [fakeMessage] - } - } - } - - it('should render', () => { - const actual = renderer.create( - - - - ) - - expect(actual).toMatchSnapshot() - }) -}) diff --git a/src/__tests__/components/__snapshots__/PromoCard.test.tsx.snap b/src/__tests__/components/__snapshots__/PromoCard.test.tsx.snap deleted file mode 100644 index ed92e5f057b..00000000000 --- a/src/__tests__/components/__snapshots__/PromoCard.test.tsx.snap +++ /dev/null @@ -1,215 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`PromoCard should render 1`] = ` - - - - - - - - - - Show me - - - - -  - - - - - -`; diff --git a/src/components/cards/PromoCard.tsx b/src/components/cards/PromoCard.tsx deleted file mode 100644 index 7d2b18a130b..00000000000 --- a/src/components/cards/PromoCard.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import * as React from 'react' -import FastImage from 'react-native-fast-image' - -import { hideMessageTweak } from '../../actions/AccountReferralActions' -import { linkReferralWithCurrencies } from '../../actions/WalletListActions' -import { useHandler } from '../../hooks/useHandler' -import { useDispatch, useSelector } from '../../types/reactRedux' -import { NavigationBase } from '../../types/routerTypes' -import { bestOfMessages } from '../../util/ReferralHelpers' -import { showError } from '../services/AirshipInstance' -import { cacheStyles, Theme, useTheme } from '../services/ThemeContext' -import { IconMessageCard } from './IconMessageCard' - -interface Props { - navigation: NavigationBase -} - -export function PromoCard(props: Props) { - const { navigation } = props - const theme = useTheme() - const styles = getStyles(theme) - const dispatch = useDispatch() - - const accountMessages = useSelector(state => state.account.referralCache.accountMessages) - const accountReferral = useSelector(state => state.account.accountReferral) - const messageSummary = bestOfMessages(accountMessages, accountReferral) - - const handlePress = useHandler(() => { - const uri = messageSummary?.message.uri - if (uri != null) dispatch(linkReferralWithCurrencies(navigation, uri)).catch(err => showError(err)) - }) - - const handleClose = useHandler(() => { - if (messageSummary != null) { - dispatch(hideMessageTweak(messageSummary.messageId, messageSummary.messageSource)).catch(err => showError(err)) - } - }) - - if (messageSummary == null) return null - const { message } = messageSummary - return ( - : null} - onPress={handlePress} - onClose={handleClose} - /> - ) -} - -const getStyles = cacheStyles((theme: Theme) => ({ - icon: { - width: theme.rem(2), - height: theme.rem(2), - marginHorizontal: theme.rem(0.5) - } -})) diff --git a/src/components/themed/WalletListHeader.tsx b/src/components/themed/WalletListHeader.tsx index f1936e92524..274ad6c45ba 100644 --- a/src/components/themed/WalletListHeader.tsx +++ b/src/components/themed/WalletListHeader.tsx @@ -5,7 +5,6 @@ import Ionicon from 'react-native-vector-icons/Ionicons' import { Fontello } from '../../assets/vector/index' import { lstrings } from '../../locales/strings' import { NavigationBase } from '../../types/routerTypes' -import { PromoCard } from '../cards/PromoCard' import { EdgeAnim } from '../common/EdgeAnim' import { cacheStyles, Theme, ThemeProps, withTheme } from '../services/ThemeContext' import { BalanceCardUi4 } from '../ui4/BalanceCardUi4' @@ -48,12 +47,6 @@ export class WalletListHeaderComponent extends React.PureComponent { )} - - {searching ? null : ( - - - - )} ) } From cd3b281f6be4dac424f9db7c7fbdd43089579a51 Mon Sep 17 00:00:00 2001 From: Jon Tzeng Date: Fri, 26 Jan 2024 15:53:12 -0800 Subject: [PATCH 6/7] Fix the transaction name margins in the TransactionListRow --- .../__snapshots__/TransactionListRow.test.tsx.snap | 7 +++---- src/components/themed/TransactionListRow.tsx | 10 ++++++++-- 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/src/__tests__/components/__snapshots__/TransactionListRow.test.tsx.snap b/src/__tests__/components/__snapshots__/TransactionListRow.test.tsx.snap index 744530451f5..a32617fa0a2 100644 --- a/src/__tests__/components/__snapshots__/TransactionListRow.test.tsx.snap +++ b/src/__tests__/components/__snapshots__/TransactionListRow.test.tsx.snap @@ -179,7 +179,7 @@ exports[`TransactionListRow should render with loading props 1`] = ` "alignSelf": "center", "flexShrink": 1, "fontFamily": "Quicksand-Medium", - "maxWidth": "60%", + "marginRight": 22, }, null, ] @@ -201,9 +201,8 @@ exports[`TransactionListRow should render with loading props 1`] = ` }, { "alignSelf": "center", - "flexShrink": 1, - "fontFamily": "Quicksand-Medium", - "maxWidth": "60%", + "flexShrink": 0, + "textAlign": "right", }, null, ] diff --git a/src/components/themed/TransactionListRow.tsx b/src/components/themed/TransactionListRow.tsx index 0fe1b27047e..df9d2dd1665 100644 --- a/src/components/themed/TransactionListRow.tsx +++ b/src/components/themed/TransactionListRow.tsx @@ -188,13 +188,14 @@ export function TransactionListRow(props: Props) { Share.open(shareOptions).catch(e => showError(e)) }) + // HACK: Handle 100% of the margins because of SceneHeader usage on this scene return ( <> {name} - {cryptoAmountString} + {cryptoAmountString} {unconfirmedOrTimeText} @@ -276,7 +277,12 @@ const getStyles = cacheStyles((theme: Theme) => ({ alignSelf: 'center', fontFamily: theme.fontFaceMedium, flexShrink: 1, - maxWidth: '60%' + marginRight: theme.rem(1) + }, + cryptoText: { + alignSelf: 'center', + textAlign: 'right', + flexShrink: 0 }, fiatAmount: { fontSize: theme.rem(0.75), From dcf83db4881170c9b3adf14a18660a58eb405ed2 Mon Sep 17 00:00:00 2001 From: Jon Tzeng Date: Fri, 26 Jan 2024 15:22:14 -0800 Subject: [PATCH 7/7] Fix transaction list margins We use the `overflow: 'visible'` rule on this scene to achieve the right margins without losing the ability for the SceneHeader to extend outside of the margins as necessary. --- .../TransactionListTop.test.tsx.snap | 270 ++++++++++-------- src/components/cards/VisaCardCard.tsx | 2 +- .../scenes/TransactionListScene.tsx | 22 +- src/components/themed/TransactionListTop.tsx | 18 +- 4 files changed, 179 insertions(+), 133 deletions(-) diff --git a/src/__tests__/components/__snapshots__/TransactionListTop.test.tsx.snap b/src/__tests__/components/__snapshots__/TransactionListTop.test.tsx.snap index d106104fffb..6c7b59d79e9 100644 --- a/src/__tests__/components/__snapshots__/TransactionListTop.test.tsx.snap +++ b/src/__tests__/components/__snapshots__/TransactionListTop.test.tsx.snap @@ -10,7 +10,7 @@ exports[`TransactionListTop should render (with ENABLE_VISA_PROGRAM) 1`] = ` "borderRadius": 16, }, { - "marginBottom": 22, + "marginBottom": 11, "marginLeft": 11, "marginRight": 11, "marginTop": 11, @@ -576,10 +576,10 @@ exports[`TransactionListTop should render (with ENABLE_VISA_PROGRAM) 1`] = ` "borderRadius": 16, }, { - "marginBottom": -11, + "marginBottom": 11, "marginLeft": 11, "marginRight": 11, - "marginTop": 22, + "marginTop": 11, }, { "paddingBottom": 0, @@ -699,83 +699,92 @@ exports[`TransactionListTop should render (with ENABLE_VISA_PROGRAM) 1`] = ` , + + + Transactions + + + - - Transactions - + /> , - , ] `; @@ -789,7 +798,7 @@ exports[`TransactionListTop should render 1`] = ` "borderRadius": 16, }, { - "marginBottom": 22, + "marginBottom": 11, "marginLeft": 11, "marginRight": 11, "marginTop": 11, @@ -1349,82 +1358,91 @@ exports[`TransactionListTop should render 1`] = ` , + + + Transactions + + + - - Transactions - + /> , - , ] `; diff --git a/src/components/cards/VisaCardCard.tsx b/src/components/cards/VisaCardCard.tsx index ab8a850fe61..1fc103ccae7 100644 --- a/src/components/cards/VisaCardCard.tsx +++ b/src/components/cards/VisaCardCard.tsx @@ -52,7 +52,7 @@ export const VisaCardCard = (props: Props) => { return ( <> {ioniaPluginIds.includes(pluginId) && tokenId == null && ( - + diff --git a/src/components/scenes/TransactionListScene.tsx b/src/components/scenes/TransactionListScene.tsx index 7b9e2460bd0..e2a0b32203f 100644 --- a/src/components/scenes/TransactionListScene.tsx +++ b/src/components/scenes/TransactionListScene.tsx @@ -6,6 +6,7 @@ import * as React from 'react' import { ListRenderItemInfo, RefreshControl, View } from 'react-native' import { getVersion } from 'react-native-device-info' import Animated from 'react-native-reanimated' +import { useSafeAreaInsets } from 'react-native-safe-area-context' import { SPECIAL_CURRENCY_INFO } from '../../constants/WalletAndCurrencyConstants' import { useHandler } from '../../hooks/useHandler' @@ -25,7 +26,7 @@ import { AssetStatusCard } from '../cards/AssetStatusCard' import { EdgeAnim, MAX_LIST_ITEMS_ANIM } from '../common/EdgeAnim' import { SceneWrapper } from '../common/SceneWrapper' import { withWallet } from '../hoc/withWallet' -import { useTheme } from '../services/ThemeContext' +import { cacheStyles, useTheme } from '../services/ThemeContext' import { BuyCrypto } from '../themed/BuyCrypto' import { ExplorerCard } from '../themed/ExplorerCard' import { SearchFooter } from '../themed/SearchFooter' @@ -47,6 +48,7 @@ interface Props extends EdgeSceneProps<'transactionList'> { function TransactionListComponent(props: Props) { const { navigation, route, wallet } = props const theme = useTheme() + const styles = getStyles(theme) const tokenId = checkToken(route.params.tokenId, wallet.currencyConfig.allTokens) const { pluginId } = wallet.currencyInfo @@ -275,6 +277,9 @@ function TransactionListComponent(props: Props) { backgroundColors[0] = scaledColor } + // TODO: Include this fix in the SceneWrapper component + const safeAreaInsets = useSafeAreaInsets() + return ( ( ({ + flatList: { + overflow: 'visible', + flexShrink: 0 + } +})) diff --git a/src/components/themed/TransactionListTop.tsx b/src/components/themed/TransactionListTop.tsx index 4830c802cd6..d47bfef1bdf 100644 --- a/src/components/themed/TransactionListTop.tsx +++ b/src/components/themed/TransactionListTop.tsx @@ -375,7 +375,7 @@ export class TransactionListTopComponent extends React.PureComponent {searching ? null : ( - + {this.renderBalanceBox()} {isStakingAvailable && this.renderStakedBalance()} @@ -404,9 +404,11 @@ export class TransactionListTopComponent extends React.PureComponent} {isEmpty || searching ? null : ( - - {lstrings.fragment_transaction_list_transaction} - + + + {lstrings.fragment_transaction_list_transaction} + + )} ) @@ -499,6 +501,14 @@ const getStyles = cacheStyles((theme: Theme) => ({ justifyContent: 'center', alignItems: 'center', paddingRight: theme.rem(1) + }, + + // TODO: Fix SceneHeader to be UI4 compatible + // This negative margin will cause the SceneHeader's divider-line to touch + // the right edge of the screen. This is design roll-off from UI3. + tempSceneHeader: { + marginRight: -theme.rem(0.5), + overflow: 'visible' } }))