feat: New Onboarding

Updated onboarding and new account experience

Still a number of files to delete but there will be a bunch of conflicts so trying to avoid that for now

Author: alexrisch

components/Avatar.tsx

@@ -2,7 +2,7 @@ import { Center } from "@/design-system/Center";
 import { Icon } from "@/design-system/Icon/Icon";
 import { Text } from "@/design-system/Text";
 import { useAppTheme } from "@/theme/useAppTheme";
-import { getFirstLetterForAvatar } from "@utils/getFirstLetterForAvatar";
+import { getCapitalizedLettersForAvatar } from "@/utils/getCapitalizedLettersForAvatar";
 import { Image } from "expo-image";
 import React, { memo, useCallback, useState } from "react";
 import { Platform, StyleProp, ViewStyle } from "react-native";
@@ -22,7 +22,7 @@ export const Avatar = memo(function Avatar({
 }: IAvatarProps) {
   const { theme } = useAppTheme();
   const avatarSize = size ?? theme.avatarSize.md;
-  const firstLetter = getFirstLetterForAvatar(name ?? "");
+  const firstLetter = getCapitalizedLettersForAvatar(name ?? "");
   const [didError, setDidError] = useState(false);
 
   const handleImageError = useCallback(() => {

design-system/Icon/Icon.android.tsx

@@ -69,6 +69,8 @@ export const iconRegistry: Record<
   "shield.fill": "shield",
   "new-account-card": "person",
   settings: "settings",
+  biometric: "fingerprint",
+  camera: "camera",
 };
 
 export function Icon(props: IIconProps) {
@@ -89,8 +91,8 @@ export function Icon(props: IIconProps) {
   const iconName = icon
     ? iconRegistry[icon]
     : picto
-      ? iconRegistry[picto]
-      : null;
+    ? iconRegistry[picto]
+    : null;
 
   if (!iconName) {
     logger.warn(`Invalid icon name ${icon || picto}`);

design-system/Icon/Icon.tsx

@@ -66,6 +66,8 @@ export const iconRegistry: Record<IIconName, string> = {
   "shield.fill": "shield.fill",
   "new-account-card": "person.text.rectangle",
   settings: "gearshape",
+  biometric: "faceid",
+  camera: "camera.fill",
 };
 
 export function Icon(props: IIconProps) {
@@ -98,8 +100,8 @@ export function Icon(props: IIconProps) {
   const iconName = icon
     ? iconRegistry[icon]
     : picto
-      ? iconRegistry[picto]
-      : null;
+    ? iconRegistry[picto]
+    : null;
 
   if (!iconName) {
     logger.warn(

design-system/Icon/Icon.types.ts

@@ -62,7 +62,9 @@ export type IIconName =
   | "shield"
   | "shield.fill"
   | "new-account-card"
-  | "settings";
+  | "settings"
+  | "biometric"
+  | "camera";
 
 /**
  * Props for the Icon component.

design-system/IconButton/IconButton.props.ts

@@ -7,7 +7,7 @@ import {
 } from "react-native";
 
 export type IIconButtonVariant = "outline" | "subtle" | "fill" | "ghost";
-export type IIconButtonSize = "sm" | "md" | "lg";
+export type IIconButtonSize = "sm" | "md" | "lg" | "xl";
 export type IIconButtonAction = "primary" | "danger";
 
 export type IIconButtonProps = {

design-system/IconButton/IconButton.styles.ts

@@ -48,6 +48,10 @@ export const getIconButtonViewStyle =
         width: spacing.xxl,
         height: spacing.xxl,
       },
+      xl: {
+        width: 56,
+        height: 56,
+      },
     };
 
     Object.assign(style, sizeStyles[size]);
@@ -131,6 +135,9 @@ export const getIconStyle =
       lg: {
         fontSize: spacing.xl,
       },
+      xl: {
+        fontSize: spacing.lg,
+      },
     };
 
     Object.assign(style, sizeStyles[size]);
@@ -172,46 +179,46 @@ export const getIconProps =
     pressed = false,
     disabled = false,
   }: IconButtonStyleProps) =>
-  (theme: Theme) =>
-    // TODO: fix once we fixed IconProps
-    // : Partial<IIconProps>
-    {
-      const { colors, spacing } = theme;
-
-      const props: any =
-        // :Partial<IIconProps>
-        {};
-
-      // Set icon size
-      const sizeMap = {
-        sm: spacing.xs,
-        md: spacing.sm,
-        lg: spacing.lg,
-      };
-
-      props.size = sizeMap[size];
-
-      if (disabled && variant !== "fill") {
-        props.color = colors.text.tertiary;
-        return props;
-      }
+  (theme: Theme) => // TODO: fix once we fixed IconProps
+  // : Partial<IIconProps>
+  {
+    const { colors, spacing } = theme;
 
-      if (action === "primary") {
-        switch (variant) {
-          case "fill":
-            props.color = colors.text.inverted.primary;
-            break;
-
-          case "outline":
-          case "subtle":
-          case "ghost":
-            props.color = colors.text.primary;
-            break;
-
-          default:
-            break;
-        }
-      }
+    const props: any =
+      // :Partial<IIconProps>
+      {};
 
-      return props;
+    // Set icon size
+    const sizeMap = {
+      sm: spacing.xs,
+      md: spacing.sm,
+      lg: spacing.lg,
+      xl: spacing.lg,
     };
+
+    props.size = sizeMap[size];
+
+    if (disabled && variant !== "fill") {
+      props.color = colors.text.tertiary;
+      return props;
+    }
+
+    if (action === "primary") {
+      switch (variant) {
+        case "fill":
+          props.color = colors.text.inverted.primary;
+          break;
+
+        case "outline":
+        case "subtle":
+        case "ghost":
+          props.color = colors.text.primary;
+          break;
+
+        default:
+          break;
+      }
+    }
+
+    return props;
+  };

design-system/IconButton/IconButton.tsx

@@ -4,7 +4,6 @@ import {
   PressableStateCallbackType,
   StyleProp,
   TextStyle,
-  View,
   ViewStyle,
 } from "react-native";
 import { useAppTheme } from "../../theme/useAppTheme";
@@ -18,7 +17,10 @@ import {
 } from "./IconButton.styles";
 import { Haptics } from "@utils/haptics";
 
-export function IconButton(props: IIconButtonProps) {
+export const IconButton = React.forwardRef(function IconButton(
+  props: IIconButtonProps,
+  ref
+) {
   const {
     icon,
     iconName,
@@ -120,6 +122,7 @@ export function IconButton(props: IIconButtonProps) {
         if (iconName) {
           return (
             <Icon
+              ref={ref}
               picto={iconName}
               style={iconStyle({ pressed, hovered })}
               {...iconProps({ pressed, hovered })}
@@ -131,4 +134,4 @@ export function IconButton(props: IIconButtonProps) {
       }}
     </Pressable>
   );
-}
+});

design-system/IconButton/animated-icon-button.tsx

@@ -0,0 +1,8 @@
+import Animated, { AnimatedProps } from "react-native-reanimated";
+
+import { IconButton } from "./IconButton";
+import { IIconButtonProps } from "./IconButton.props";
+
+export type IAnimatedIconButtonProps = AnimatedProps<IIconButtonProps>;
+
+export const AnimatedIconButton = Animated.createAnimatedComponent(IconButton);

design-system/Text/Text.styles.ts

@@ -4,7 +4,8 @@ import { Theme, ThemedStyle } from "@theme/useAppTheme";
 import { IInvertedTextColors, ITextColors, IWeights } from "./Text.props";
 
 export const textSizeStyles = {
-  xxl: { fontSize: 48, lineHeight: 60 } satisfies TextStyle,
+  ["3xl"]: { fontSize: 48, lineHeight: 60 } satisfies TextStyle,
+  xxl: { fontSize: 40, lineHeight: 44 } satisfies TextStyle,
   xl: { fontSize: 32, lineHeight: 36 } satisfies TextStyle, // Made up, need to confirm with Andrew once we have the design
   lg: { fontSize: 24, lineHeight: 28 } satisfies TextStyle, // Made up, need to confirm with Andrew once we have the design
   md: { fontSize: 20, lineHeight: 20 } satisfies TextStyle,

features/conversation-list/conversation-list.screen-header.tsx

@@ -10,6 +10,7 @@ import { HeaderAction } from "@/design-system/Header/HeaderAction";
 import { Icon, iconRegistry } from "@/design-system/Icon/Icon";
 import { Pressable } from "@/design-system/Pressable";
 import { Text } from "@/design-system/Text";
+import { usePreferredAvatarUri } from "@/hooks/usePreferredAvatarUri";
 import { usePreferredName } from "@/hooks/usePreferredName";
 import { translate } from "@/i18n";
 import { useHeader } from "@/navigation/use-header";
@@ -33,7 +34,7 @@ export function useHeaderWrapper() {
   const accounts = useAccountsList();
   const accountsProfiles = useAccountsProfiles();
   const setCurrentAccount = useAccountsStore((s) => s.setCurrentAccount);
-
+  const avatarUri = usePreferredAvatarUri(currentAccount!);
   useHeader(
     {
       safeAreaEdges: ["top"],
@@ -81,7 +82,11 @@ export function useHeaderWrapper() {
                 padding: theme.spacing.xxs,
               }}
             >
-              <Avatar size={theme.avatarSize.sm} />
+              <Avatar
+                name={preferredName}
+                uri={avatarUri}
+                size={theme.avatarSize.sm}
+              />
             </Center>
           </Pressable>
           <ContextMenuButton

features/conversation/conversation-message/conversation-message-content-types/conversation-message-simple-text.tsx

@@ -33,7 +33,7 @@ export const MessageSimpleText = memo(function MessageSimpleText(props: {
           alignItems: fromMe ? "flex-end" : "flex-start",
         }}
       >
-        <Text style={textSizeStyles.xxl}>{textContent}</Text>
+        <Text style={textSizeStyles["3xl"]}>{textContent}</Text>
       </VStack>
     );
   }

screens/Onboarding/Onboarding.utils.ts renamed to features/onboarding/Onboarding.utils.ts

@@ -0,0 +1,27 @@
+import { useThemeProvider } from "@/theme/useAppTheme";
+import { memo } from "react";
+
+/**
+ * The Onboarding Contact Card will use inverted colors.
+ * Rather than passing a bunch of inverted props around, just creating a mini theme provider for it specifically
+ */
+export const OnboardingContactCardThemeProvider = memo(
+  function OnboardingContactCardThemeProvider({
+    children,
+  }: {
+    children: React.ReactNode;
+  }) {
+    const { themeScheme, setThemeContextOverride, ThemeProvider } =
+      useThemeProvider();
+
+    const invertedTheme = themeScheme === "light" ? "dark" : "light";
+
+    return (
+      <ThemeProvider
+        value={{ themeScheme: invertedTheme, setThemeContextOverride }}
+      >
+        {children}
+      </ThemeProvider>
+    );
+  }
+);