rework add wallet nav

rainbow-me · Sep 13, 2023 · b07cb65 · b07cb65
1 parent 0403ef7
commit b07cb65
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 90 deletions.
diff --git a/src/components/expanded-state/custom-gas/FeesPanelTabs.tsx b/src/components/expanded-state/custom-gas/FeesPanelTabs.tsx
@@ -1,4 +1,4 @@
-import { isEmpty, upperFirst } from 'lodash';
+import { isEmpty } from 'lodash';
 import React from 'react';
 import { ButtonPressAnimation } from '../../animations';
 import { useGas } from '@/hooks';
@@ -13,7 +13,7 @@ const { CUSTOM, URGENT, GasSpeedOrder } = gasUtils;
 type TabPillProps = {
  speed: string;
  isSelected: boolean;
- handleOnPressTabPill: (label: string) => void;
+ handleOnPressTabPill: (speed: string) => void;
  color: string;
  testID?: string;
 };

diff --git a/src/navigation/AddWalletNavigator.tsx b/src/navigation/AddWalletNavigator.tsx
@@ -7,12 +7,9 @@ import {
  ImportOrWatchWalletSheet,
  ImportOrWatchWalletSheetParams,
 } from '@/screens/ImportOrWatchWalletSheet';
-import { IS_ANDROID } from '@/env';
-import { SheetHandleFixedToTopHeight, SlackSheet } from '@/components/sheet';
 import { BackgroundProvider } from '@/design-system';
-import { ColorValue, StatusBar, View } from 'react-native';
 import { RouteProp, useRoute } from '@react-navigation/native';
-import { useDimensions } from '@/hooks';
+import { SimpleSheet } from '@/components/sheet/SimpleSheet';
 
 const Swipe = createMaterialTopTabNavigator();
 
@@ -21,64 +18,28 @@ type RouteParams = {
  ImportOrWatchWalletSheetParams;
 };
 
-type WrapConfig = {
- contentHeight: number;
- backgroundColor?: ColorValue;
- scrollEnabled: boolean;
-};
-
-function wrapWithSlackSheet({
- contentHeight,
- backgroundColor,
- scrollEnabled,
-}: WrapConfig) {
- return (Component: React.ComponentType) => {
- return function WrappedWithSlackSheet() {
- return (
- // @ts-expect-error js component
- <SlackSheet
- contentHeight={contentHeight}
- additionalTopPadding={IS_ANDROID ? StatusBar.currentHeight : false}
- backgroundColor={backgroundColor}
- height="100%"
- scrollEnabled={scrollEnabled}
- >
- <Component />
- </SlackSheet>
- );
- };
- };
-}
-
 export const AddWalletNavigator = () => {
  const {
  params: { isFirstWallet, type, userData },
  } = useRoute<RouteProp<RouteParams, 'AddWalletNavigatorParams'>>();
- const { height: deviceHeight } = useDimensions();
 
  const [scrollEnabled, setScrollEnabled] = useState(false);
 
  return (
- // wrapping in View prevents keyboard from pushing up sheet on android
- <View
- style={{
- height: deviceHeight + (IS_ANDROID ? StatusBar.currentHeight ?? 0 : 0),
- }}
- >
- <BackgroundProvider color="surfaceSecondary">
- {({ backgroundColor }) => (
+ <BackgroundProvider color="surfaceSecondary">
+ {({ backgroundColor }) => (
+ <SimpleSheet
+ backgroundColor={backgroundColor as string}
+ scrollEnabled={scrollEnabled}
+ >
  <Swipe.Navigator
  initialLayout={deviceUtils.dimensions}
  initialRouteName={Routes.ADD_WALLET_SHEET}
  screenOptions={{ swipeEnabled: false }}
  tabBar={() => null}
  >
  <Swipe.Screen
- component={wrapWithSlackSheet({
- contentHeight: deviceHeight - SheetHandleFixedToTopHeight,
- backgroundColor: backgroundColor,
- scrollEnabled: scrollEnabled,
- })(AddWalletSheet)}
+ component={AddWalletSheet}
  initialParams={{ isFirstWallet, userData }}
  name={Routes.ADD_WALLET_SHEET}
  listeners={{
@@ -88,11 +49,7 @@ export const AddWalletNavigator = () => {
  }}
  />
  <Swipe.Screen
- component={wrapWithSlackSheet({
- contentHeight: deviceHeight - SheetHandleFixedToTopHeight,
- backgroundColor: backgroundColor,
- scrollEnabled: scrollEnabled,
- })(ImportOrWatchWalletSheet)}
+ component={ImportOrWatchWalletSheet}
  initialParams={{ type }}
  name={Routes.IMPORT_OR_WATCH_WALLET_SHEET}
  listeners={{
@@ -102,8 +59,8 @@ export const AddWalletNavigator = () => {
  }}
  />
  </Swipe.Navigator>
- )}
- </BackgroundProvider>
- </View>
+ </SimpleSheet>
+ )}
+ </BackgroundProvider>
  );
 };
diff --git a/src/screens/AddWalletSheet.tsx b/src/screens/AddWalletSheet.tsx
@@ -7,7 +7,7 @@ import React, { useMemo, useRef } from 'react';
 import * as i18n from '@/languages';
 import { HARDWARE_WALLETS, PROFILES, useExperimentalFlag } from '@/config';
 import { analytics, analyticsV2 } from '@/analytics';
-import { InteractionManager } from 'react-native';
+import { InteractionManager, View } from 'react-native';
 import { createAccountForWallet, walletsLoadState } from '@/redux/wallets';
 import WalletBackupTypes from '@/helpers/walletBackupTypes';
 import { createWallet, RainbowWallet } from '@/model/wallet';
@@ -376,25 +376,41 @@ export const AddWalletSheet = () => {
  )}
  </Text>
  </Stack>
- <Box
- background="surfaceSecondaryElevated"
- borderRadius={18}
- shadow="12px"
- style={{ height: '100%' }}
+ <View
+ style={{
+ shadowColor: globalColors.grey100,
+ shadowOffset: { width: 0, height: 2 },
+ shadowOpacity: 0.02,
+ shadowRadius: 3,
+ }}
  >
- <Inset vertical="24px" horizontal="20px">
- <AddWalletList
- totalHorizontalInset={40}
- items={[
- ...(!isFirstWallet ? [create] : []),
- ...(cloudRestoreEnabled ? [restoreFromCloud] : []),
- restoreFromSeed,
- ...(hardwareWalletsEnabled ? [connectHardwareWallet] : []),
- watch,
- ]}
- />
- </Inset>
- </Box>
+ <View
+ style={{
+ shadowColor: globalColors.grey100,
+ shadowOffset: { width: 0, height: 4 },
+ shadowOpacity: 0.16,
+ shadowRadius: 6,
+ }}
+ >
+ <Box
+ paddingVertical="24px"
+ paddingHorizontal="20px"
+ background="surfaceSecondaryElevated"
+ borderRadius={18}
+ >
+ <AddWalletList
+ totalHorizontalInset={40}
+ items={[
+ ...(!isFirstWallet ? [create] : []),
+ ...(cloudRestoreEnabled ? [restoreFromCloud] : []),
+ restoreFromSeed,
+ ...(hardwareWalletsEnabled ? [connectHardwareWallet] : []),
+ watch,
+ ]}
+ />
+ </Box>
+ </View>
+ </View>
  </Stack>
  </Inset>
  </Box>

diff --git a/src/screens/ImportOrWatchWalletSheet.tsx b/src/screens/ImportOrWatchWalletSheet.tsx
@@ -11,16 +11,14 @@ import {
  useTextStyle,
 } from '@/design-system';
 import { IS_ANDROID } from '@/env';
-import { useDimensions, useImportingWallet, useKeyboardHeight } from '@/hooks';
+import { useImportingWallet, useKeyboardHeight } from '@/hooks';
 import { colors } from '@/styles';
 import React, { useCallback } from 'react';
 import * as i18n from '@/languages';
 import { ButtonPressAnimation } from '@/components/animations';
 import { RouteProp, useFocusEffect, useRoute } from '@react-navigation/native';
 import Clipboard from '@react-native-community/clipboard';
 import { LoadingOverlay } from '@/components/modal';
-import { StatusBar } from 'react-native';
-import { safeAreaInsetValues } from '@/utils';
 
 const TRANSLATIONS = i18n.l.wallet.new.import_or_watch_wallet_sheet;
 
@@ -47,7 +45,6 @@ export const ImportOrWatchWalletSheet = () => {
  seedPhrase,
  } = useImportingWallet();
  const keyboardHeight = useKeyboardHeight();
- const { height: deviceHeight } = useDimensions();
 
  const textStyle = useTextStyle({
  align: 'center',
@@ -60,19 +57,10 @@ export const ImportOrWatchWalletSheet = () => {
  useFocusEffect(useCallback(() => inputRef.current?.focus(), [inputRef]));
 
  const buttonDisabled = seedPhrase && !isSecretValid;
- const safeAreaTopPadding = IS_ANDROID
- ? StatusBar?.currentHeight ?? 0
- : safeAreaInsetValues.top;
 
  return (
  <>
- <Box
- height={{
- custom:
- deviceHeight - SheetHandleFixedToTopHeight - safeAreaTopPadding,
- }}
- background="surfaceSecondary"
- >
+ <Box height="full" background="surfaceSecondary">
  <Box
  alignItems="center"
  justifyContent="space-between"