various updates (#4243)

Author: peterpme

packages/app-mobile/src/Images.ts

@@ -7,6 +7,8 @@ const Images = {
   logoEthereum: require("./images/logo-ethereum.png"),
   logoPolygon: require("./images/logo-polygon.png"),
   logoSolana: require("./images/logo-solana.png"),
+  walletListEthereum: require("./images/wallet-list-ethereum.png"),
+  walletListSolana: require("./images/wallet-list-solana.png"),
 };
 
 export default Images;

packages/app-mobile/src/components/BottomSheetViewOptions.tsx

@@ -31,10 +31,10 @@ export function BottomSheetViewOptions({
   return (
     <>
       <HeaderDropdownButton
+        tintColor={tintColor}
         onPress={() => {
           setIsVisible(!isVisible);
         }}
-        tintColor={tintColor}
       >
         {title}
       </HeaderDropdownButton>

packages/app-mobile/src/components/UserAvatar.tsx

@@ -26,9 +26,9 @@ export function UserAvatar({
   const [type, setType] = useState<string | undefined>(undefined);
   const width = size;
   const height = size;
-  const proxiedUri = proxyImageUrl(uri, size);
   // we do this bc fetching a 1x1 image is faster than fetching a 32x32 image, etc
   const smallUri = proxyImageUrl(uri, 1);
+  const proxiedUri = proxyImageUrl(uri, size);
 
   useEffect(() => {
     if (cache.has(smallUri)) {
@@ -52,7 +52,7 @@ export function UserAvatar({
   if (type === "image/svg+xml") {
     return (
       <View style={[styles.container, { width, height }]}>
-        <SvgUri width={width} height={height} uri={`${smallUri}.svg`} />
+        <SvgUri width={width} height={height} uri={`${proxiedUri}.svg`} />
       </View>
     );
   }
@@ -76,7 +76,7 @@ const styles = StyleSheet.create({
   container: {
     aspectRatio: 1,
     borderRadius: 100,
-    backgroundColor: "gray",
+    backgroundColor: "#FFF",
     overflow: "hidden",
   },
 });
@@ -89,22 +89,7 @@ export function Avatar({
   username?: string;
 }): JSX.Element {
   const avatarUrl = useAvatarUrl(size, username);
-  const theme = useTheme();
-  const outerSize = size + 6;
-
-  return (
-    <View
-      style={{
-        backgroundColor: theme.custom.colors.avatarIconBackground,
-        borderRadius: outerSize / 2,
-        padding: 3,
-        width: outerSize,
-        height: outerSize,
-      }}
-    >
-      <UserAvatar size={size} uri={avatarUrl} />
-    </View>
-  );
+  return <UserAvatar size={size} uri={avatarUrl} />;
 }
 
 export const CurrentUserAvatar = ({ size = 64 }: { size?: number }) => (

packages/app-mobile/src/components/WalletSwitcherButton.tsx

@@ -29,17 +29,26 @@ export function WalletSwitcherButton(): JSX.Element {
         }}
         style={{
           borderRadius: 32,
-          borderWidth: 2,
+          borderWidth: 1,
           backgroundColor: theme.nav.val,
           borderColor: theme.borderFull.val,
+
+          shadowColor: "rgba(0, 0, 0, 1)",
+          shadowOffset: {
+            width: 0,
+            height: 1,
+          },
+          shadowOpacity: 0.06,
+          shadowRadius: 1,
+          elevation: 2,
         }}
       >
-        <XStack space={8} ai="center" py={8} px={18}>
+        <XStack space={8} ai="center" py={8} pl={18} pr={12}>
           <BlockchainLogo blockchain={activeWallet!.blockchain} size={16} />
-          <StyledText fontSize="$base" color="$fontColor" mr={-6}>
+          <StyledText fontSize="$base" color="$baseTextMedEmphasis" mr={-6}>
             {activeWallet?.name}
           </StyledText>
-          <IconDropdown size={22} color="$fontColor" />
+          <IconDropdown size={22} color="#8E919F" />
         </XStack>
       </Pressable>
       <BetterBottomSheet

packages/app-mobile/src/images/logo-ethereum-wallet-list.png

@@ -18,6 +18,7 @@ import {
 } from "@coral-xyz/tamagui";
 import { MaterialIcons } from "@expo/vector-icons";
 import { DrawerItemList } from "@react-navigation/drawer";
+import { useNavigation } from "@react-navigation/native";
 import { FlatList } from "react-native-gesture-handler";
 
 import { UserAccountListItem } from "~components/ListItem";
@@ -41,6 +42,7 @@ function Header() {
 }
 
 function UserList() {
+  const navigation = useNavigation();
   const background = useBackgroundClient();
   const users = useAllUsers();
   const user = useUser();
@@ -66,6 +68,7 @@ function UserList() {
   };
 
   const handlePressAddAccount = () => {
+    navigation.navigate("OnboardScreen");
     setAppState("isAddingAccount");
   };
 

packages/app-mobile/src/images/logo-solana-wallet-list.png

@@ -299,26 +299,30 @@ function CreateOrRecoverAccountScreen({
 }: CreateOrRecoverAccountScreenProps) {
   const insets = useSafeAreaInsets();
   const { setOnboardingData } = useOnboarding();
+  const { appState } = useSession();
   const [isModalVisible, setIsModalVisible] = useState(false);
 
   const handlePresentModalPress = () => {
     setIsModalVisible((last) => !last);
   };
 
+  const isAddingAccount = appState === "isAddingAccount";
+
+  const insetStyles = {
+    marginTop: insets.top,
+    marginBottom: insets.bottom,
+    paddingLeft: insets.left,
+    paddingRight: insets.right,
+  };
+
   return (
     <>
       <Screen
-        style={[
-          styles.container,
-          {
-            marginTop: insets.top,
-            // marginBottom: insets.bottom,
-            paddingLeft: insets.left,
-            paddingRight: insets.right,
-          },
-        ]}
+        style={[styles.container, !isAddingAccount ? insetStyles : undefined]}
       >
-        <HelpModalMenuButton onPress={handlePresentModalPress} />
+        {isAddingAccount ? null : (
+          <HelpModalMenuButton onPress={handlePresentModalPress} />
+        )}
         <Box marginTop={48} marginBottom={24}>
           <WelcomeLogoHeader />
         </Box>
@@ -1192,11 +1196,17 @@ export function OnboardingNavigator({
     <OnboardingProvider>
       <Stack.Navigator
         initialRouteName="CreateOrRecoverAccount"
-        screenOptions={{ headerShown: false }}
+        screenOptions={{ headerShown: false, presentation: "modal" }}
       >
         <Stack.Screen
           name="CreateOrRecoverAccount"
           component={CreateOrRecoverAccountScreen}
+          options={{
+            presentation: "modal",
+            cardStyle: {
+              marginTop: 0,
+            },
+          }}
         />
         <Stack.Screen
           name="Biometrics"

packages/app-mobile/src/navigation/GlobalDrawerContent.tsx

@@ -100,9 +100,9 @@ function RootNavigator(): JSX.Element {
     setAppState("onboardingComplete");
   }, [setAppState]);
 
-  if (appState === "isAddingAccount") {
-    return <OnboardingNavigator onStart={console.log} />;
-  }
+  // if (appState === "isAddingAccount") {
+  //   return <OnboardingNavigator onStart={console.log} />;
+  // }
 
   switch (keyringStoreState) {
     case KeyringStoreState.NeedsOnboarding:

packages/app-mobile/src/navigation/OnboardingNavigator.tsx

@@ -32,6 +32,7 @@ import { TokenDetailScreen } from "~screens/TokenDetailScreen";
 import { TokenListScreen } from "~screens/TokenListScreen";
 import { SendCollectibleSendRecipientScreen } from "~screens/Unlocked/SendCollectibleSelectRecipientScreen";
 
+import { OnboardingNavigator } from "~src/navigation/OnboardingNavigator";
 import { SendNavigator } from "~src/navigation/SendNavigator";
 import {
   Direction,
@@ -40,25 +41,38 @@ import {
   SwapTokenListScreen,
 } from "~src/screens/Unlocked/SwapTokenScreen";
 
+function OnboardScreen() {
+  return <OnboardingNavigator onStart={console.log} />;
+}
+
 const TopTabs = createMaterialTopTabNavigator<TopTabsParamList>();
 function TopTabsNavigator(): JSX.Element {
-  const theme = useTheme();
   return (
     <TopTabs.Navigator
       initialLayout={{
         width: WINDOW_WIDTH,
       }}
       screenOptions={{
-        tabBarIndicatorStyle: {
-          backgroundColor: theme.custom.colors.fontColor,
+        tabBarStyle: {
+          marginTop: 12,
+          marginHorizontal: 24,
+          backgroundColor: "transparent",
         },
-        tabBarActiveTintColor: theme.custom.colors.fontColor,
         tabBarLabelStyle: {
           textTransform: "capitalize",
           fontSize: 15,
           fontFamily: "InterMedium",
-          color: theme.custom.colors.fontColor,
         },
+        tabBarIndicatorStyle: {
+          borderRadius: 12,
+          backgroundColor: "rgba(0, 87, 235, 0.15)",
+          alignSelf: "center",
+          height: 40,
+          marginBottom: 4,
+        },
+        tabBarActiveTintColor: "#0057EB",
+        tabBarInactiveTintColor: "#5D606F",
+        tabBarPressOpacity: 0.2,
       }}
     >
       <TopTabs.Screen
@@ -136,6 +150,9 @@ export function WalletsNavigator(): JSX.Element {
       initialRouteName="HomeWalletList"
       screenOptions={{
         headerTintColor: theme.fontColor.val,
+        headerStyle: {
+          backgroundColor: "transparent",
+        },
       }}
     >
       <Stack.Screen
@@ -146,6 +163,9 @@ export function WalletsNavigator(): JSX.Element {
             headerShown: true,
             headerBackTitleVisible: false,
             title: "Balances",
+            headerStyle: {
+              backgroundColor: "transparent",
+            },
             headerTitle: ({ tintColor, children }) => {
               return (
                 <BottomSheetViewOptions
@@ -163,8 +183,9 @@ export function WalletsNavigator(): JSX.Element {
             headerRight: (props) => (
               <HeaderButtonSpacer>
                 <HeaderButton
-                  name="notifications"
                   {...props}
+                  name="notifications-none"
+                  tintColor={theme.icon.val}
                   onPress={() => {
                     navigation.navigate("Notifications");
                   }}
@@ -181,6 +202,9 @@ export function WalletsNavigator(): JSX.Element {
         options={{
           headerShadowVisible: false,
           headerBackTitleVisible: false,
+          headerStyle: {
+            backgroundColor: "transparent",
+          },
           headerTitle: () => {
             return <WalletSwitcherButton />;
           },
@@ -233,6 +257,7 @@ export function WalletsNavigator(): JSX.Element {
         />
         <Stack.Group screenOptions={{ headerShown: false }}>
           <Stack.Screen name="SendSelectTokenModal" component={SendNavigator} />
+          <Stack.Screen name="OnboardScreen" component={OnboardScreen} />
           <Stack.Screen name="SwapModal" component={SwapNavigator} />
         </Stack.Group>
         <Stack.Screen