diff --git a/src/navigation/Routes.ios.tsx b/src/navigation/Routes.ios.tsx index ab5a1975dbd..6e2f536649a 100644 --- a/src/navigation/Routes.ios.tsx +++ b/src/navigation/Routes.ios.tsx @@ -70,6 +70,7 @@ import { positionSheetConfig, appIconUnlockSheetConfig, swapConfig, + recieveModalSheetConfig, } from './config'; import { addCashSheet, emojiPreset, emojiPresetWallet, overlayExpandedPreset, sheetPreset } from './effects'; import { InitialRouteContext } from './initialRoute'; @@ -161,15 +162,7 @@ function NativeStackNavigator() { - + ({ + ...buildCoolModalConfig({ + ...params, + backgroundOpacity: 1, + scrollEnabled: false, + springDamping: 1, + }), + }), +}; + export const qrScannerConfig: PartialNavigatorConfigOptions = { options: ({ route: { params = {} } }) => ({ ...buildCoolModalConfig({ diff --git a/src/screens/ReceiveModal.js b/src/screens/ReceiveModal.js index f943a2d47ae..dbdee78ed01 100644 --- a/src/screens/ReceiveModal.js +++ b/src/screens/ReceiveModal.js @@ -3,21 +3,23 @@ import { toLower } from 'lodash'; import React, { useCallback, useState } from 'react'; import { useSelector } from 'react-redux'; import { createSelector } from 'reselect'; -import TouchableBackdrop from '../components/TouchableBackdrop'; import { CopyFloatingEmojis } from '../components/floating-emojis'; -import { Centered, Column, ColumnWithMargins } from '../components/layout'; +import { Column, ColumnWithMargins } from '../components/layout'; import QRCode from '../components/qr-code/QRCode'; import ShareButton from '../components/qr-code/ShareButton'; -import { SheetHandle } from '../components/sheet'; import { Text, TruncatedAddress } from '../components/text'; import { CopyToast, ToastPositionContainer } from '../components/toasts'; -import { useNavigation } from '../navigation/Navigation'; -import { abbreviations, deviceUtils } from '../utils'; -import { useAccountProfile } from '@/hooks'; +import { abbreviations, deviceUtils, safeAreaInsetValues } from '../utils'; +import { useAccountProfile, useDimensions } from '@/hooks'; import styled from '@/styled-thing'; import { padding, shadow } from '@/styles'; +import { SimpleSheet } from '@/components/sheet/SimpleSheet'; +import { useSafeAreaInsets } from 'react-native-safe-area-context'; +import { sharedCoolModalTopOffset } from '@/navigation/config'; +import { IS_ANDROID, IS_IOS } from '@/env'; +import { Box } from '@/design-system'; -const QRCodeSize = ios ? 250 : Math.min(230, deviceUtils.dimensions.width - 20); +const QRCodeSize = IS_IOS ? 250 : Math.min(230, deviceUtils.dimensions.width - 20); const AddressText = styled(TruncatedAddress).attrs(({ theme: { colors } }) => ({ align: 'center', @@ -30,24 +32,12 @@ const AddressText = styled(TruncatedAddress).attrs(({ theme: { colors } }) => ({ width: '100%', }); -const Container = styled(Centered).attrs({ - direction: 'column', -})({ - bottom: 0, - flex: 1, -}); - -const Handle = styled(SheetHandle).attrs(({ theme: { colors } }) => ({ - color: colors.whiteLabel, -}))({ - marginBottom: 19, -}); - const QRWrapper = styled(Column).attrs({ align: 'center' })(({ theme: { colors } }) => ({ ...shadow.buildAsObject(0, 10, 50, colors.shadowBlack, 0.6), ...padding.object(24), backgroundColor: colors.whiteLabel, borderRadius: 39, + margin: 24, })); const NameText = styled(Text).attrs(({ theme: { colors } }) => ({ @@ -62,7 +52,6 @@ const accountAddressSelector = state => state.settings.accountAddress; const lowercaseAccountAddressSelector = createSelector(accountAddressSelector, toLower); export default function ReceiveModal() { - const { goBack } = useNavigation(); const accountAddress = useSelector(lowercaseAccountAddressSelector); const { accountName } = useAccountProfile(); @@ -74,12 +63,18 @@ export default function ReceiveModal() { }, []); const checksummedAddress = useMemo(() => toChecksumAddress(accountAddress), [accountAddress]); + const { height: deviceHeight } = useDimensions(); + const { top } = useSafeAreaInsets(); return ( - - - - + + @@ -90,10 +85,10 @@ export default function ReceiveModal() { - - - - - + + + + + ); }