diff --git a/src/components/templates/BottomSheetAddWalletToList/index.tsx b/src/components/templates/BottomSheetAddWalletToList/index.tsx index dd6d57ed6..8a4a2316c 100644 --- a/src/components/templates/BottomSheetAddWalletToList/index.tsx +++ b/src/components/templates/BottomSheetAddWalletToList/index.tsx @@ -12,12 +12,13 @@ import { AddWalletToList, AddWalletToListProps } from '../AddWalletToList'; interface BottomSheetAddWalletToListProps extends AddWalletToListProps { title: string; + onClose: () => void; } export const BottomSheetAddWalletToList = forwardRef< BottomSheetRef, BottomSheetAddWalletToListProps ->(({ title, ...addWalletToListProps }, ref) => { +>(({ title, onClose, ...addWalletToListProps }, ref) => { const { t } = useTranslation(); const createGroupRef = useRef(null); @@ -35,6 +36,7 @@ export const BottomSheetAddWalletToList = forwardRef< return ( void; account: ExplorerAccount; listInfoVisible?: boolean; nameVisible?: boolean; @@ -23,7 +24,10 @@ export const ExplorerAccountView = ({ account, listInfoVisible, nameVisible, - onToggleWatchlist + onToggleWatchlist, + setBottomStub = () => { + // do nothing + } }: ExplorerAccountProps): JSX.Element => { const { t } = useTranslation(); @@ -44,9 +48,13 @@ export const ExplorerAccountView = ({ const showAddToList = () => { addToListModal.current?.show(); + setTimeout(() => { + setBottomStub(true); + }, 450); }; const hideAddToList = () => { + setBottomStub(false); setTimeout(() => addToListModal.current?.dismiss(), 250); }; @@ -232,7 +240,9 @@ export const ExplorerAccountView = ({ + setBottomStub(false)} ref={addToListModal} title={t('address.add.to.group')} wallet={account} diff --git a/src/screens/Address/index.tsx b/src/screens/Address/index.tsx index c1ea6724d..3a653ef8f 100644 --- a/src/screens/Address/index.tsx +++ b/src/screens/Address/index.tsx @@ -1,4 +1,4 @@ -import React, { useRef } from 'react'; +import React, { useRef, useState } from 'react'; import { Platform, View } from 'react-native'; import { RouteProp, useRoute } from '@react-navigation/native'; import { useTranslation } from 'react-i18next'; @@ -22,7 +22,13 @@ import { useTransactionsOfAccount, useWatchlist } from '@hooks'; -import { StringUtils, NumberUtils, scale, verticalScale } from '@utils'; +import { + StringUtils, + NumberUtils, + scale, + verticalScale, + isAndroid +} from '@utils'; import { styles } from './styles'; const TRANSACTION_LIMIT = 50; @@ -54,6 +60,7 @@ export const AddressDetails = (): JSX.Element => { const { watchlist } = useWatchlist(); const editModal = useRef(null); const shareModal = useRef(null); + const [showBottomUnderModalStub, setBottomUnderModalStub] = useState(false); const walletInWatchlist = watchlist.find((w) => w.address === address); const finalAccount = walletInWatchlist || account; @@ -94,6 +101,12 @@ export const AddressDetails = (): JSX.Element => { // shareModal.current?.show(); // }; + const setShowStub = (value: boolean) => { + if (isAndroid) { + setBottomUnderModalStub(value); + } + }; + const onToggleWatchlist = (isOnWatchlist: boolean) => { Toast.hide(); const toastMessage = isOnWatchlist @@ -139,6 +152,7 @@ export const AddressDetails = (): JSX.Element => { } /> { last24HourChange={ambPrice?.percentChange24H || 0} timestamp={ambPrice?.timestamp || new Date()} /> + {isAndroid && showBottomUnderModalStub && } ); }; diff --git a/src/screens/Address/styles.ts b/src/screens/Address/styles.ts index 9641a3700..d443e3b7e 100644 --- a/src/screens/Address/styles.ts +++ b/src/screens/Address/styles.ts @@ -1,5 +1,6 @@ import { StyleSheet } from 'react-native'; import { COLORS } from '@constants/colors'; +import { DEVICE_HEIGHT } from '@constants/variables'; import { moderateScale, scale } from '@utils'; export const styles = StyleSheet.create({ @@ -23,5 +24,12 @@ export const styles = StyleSheet.create({ backgroundColor: COLORS.brand100, height: moderateScale(36), width: moderateScale(36) + }, + stub: { + width: '100%', + height: DEVICE_HEIGHT * 0.5, + backgroundColor: COLORS.neutral0, + position: 'absolute', + bottom: 0 } });