CP-9398: Sign up and Sign back in Flow

packages/core-mobile/android/app/build.gradle

@@ -1,6 +1,7 @@
 apply plugin: "com.android.application"
 apply plugin: "org.jetbrains.kotlin.android"
 apply plugin: "com.facebook.react"
+apply plugin: 'kotlin-kapt'
 
 /**
  * This is the configuration block to customize your React Native Android app.
@@ -144,6 +145,9 @@ dependencies {
     implementation fileTree(dir: "libs", include: ["*.jar"])
     implementation 'com.google.firebase:firebase-messaging:24.0.1'
 
+    implementation 'com.github.bumptech.glide:glide:4.12.0'
+    kapt 'com.github.bumptech.glide:compiler:4.12.0'
+
     // The version of react-native is set by the React Native Gradle Plugin
     implementation("com.facebook.react:react-android")
 

packages/core-mobile/android/app/proguard-rules.pro

@@ -30,16 +30,9 @@
   @org.greenrobot.eventbus.Subscribe <methods>;
 }
 
-# react-native-fast-image
--keep enum org.greenrobot.eventbus.ThreadMode { *; }
--keep public class com.dylanvann.fastimage.* {*;}
--keep public class com.dylanvann.fastimage.** {*;}
--keep public class * implements com.bumptech.glide.module.GlideModule
--keep public class * extends com.bumptech.glide.module.AppGlideModule
--keep public enum com.bumptech.glide.load.ImageHeaderParser$** {
-  **[] $VALUES;
-  public *;
-}
+# expo-image
+-keep public class com.bumptech.glide.** { *; }
+-keep @com.bumptech.glide.annotation.GlideModule class *
 
 # react-native-skia
 -keep class com.shopify.reactnative.skia.** { *; }

packages/core-mobile/android/app/src/main/java/com/avaxwallet/CustomGlideModule.kt

@@ -0,0 +1,7 @@
+package com.avaxwallet
+
+import com.bumptech.glide.annotation.GlideModule
+import com.bumptech.glide.module.AppGlideModule
+
+@GlideModule
+class CustomGlideModule : AppGlideModule() {}

packages/core-mobile/app/components/Avatar.tsx

@@ -5,7 +5,7 @@ import BitcoinSVG from 'components/svg/BitcoinSVG'
 import { TokenSymbol } from 'store/network'
 import { SvgUri } from 'react-native-svg'
 import { formatUriImageToPng, isContentfulImageUri } from 'utils/Contentful'
-import FastImage from 'react-native-fast-image'
+import { Image } from 'expo-image'
 import { Text, useTheme, View } from '@avalabs/k2-mobile'
 import { useGetInitials } from 'hooks/useGetInitials'
 import { SuggestedSiteName } from 'store/browser/const'
@@ -104,11 +104,7 @@ const AvatarBase: FC<AvatarBaseProps> = ({
       testID="avatar__logo_avatar"
     />
   ) : (
-    <FastImage
-      // TODO: remove this workaround when we have a proper solution
-      // workaround for images not appearing
-      // https://github.com/DylanVann/react-native-fast-image/issues/974
-      fallback={true}
+    <Image
       style={{
         borderRadius: size,
         width: size,

packages/core-mobile/app/components/GlobalOwlLoader.tsx

@@ -1,30 +1,10 @@
 import React from 'react'
 import { StyleSheet, View, Dimensions } from 'react-native'
-import RootSiblingsManager from 'react-native-root-siblings'
 import CoreOwlSVG from 'components/svg/CoreOwlSVG'
-import Logger from 'utils/Logger'
+import { hideModal, showModal } from 'utils/modal'
 
 const { height: screenHeight } = Dimensions.get('window')
 
-let rootNode: RootSiblingsManager | null = null
-
-const showModal = (element: JSX.Element): void => {
-  // if there is already a modal shown, hide it first
-  if (rootNode !== null) {
-    Logger.warn(
-      'duplicate owl modal',
-      'there is already a modal shown, you should hide it first'
-    )
-    return
-  }
-  rootNode = new RootSiblingsManager(element)
-}
-
-const hideModal = (): void => {
-  rootNode?.destroy()
-  rootNode = null
-}
-
 const GlobalOwlLoader = (): JSX.Element => {
   return (
     <View

packages/core-mobile/app/new/components/LogoModal.tsx

@@ -0,0 +1,38 @@
+import {
+  K2AlpineThemeProvider,
+  Logos,
+  View,
+  useTheme
+} from '@avalabs/k2-alpine'
+import React from 'react'
+import { hideModal, showModal } from 'utils/modal'
+
+export const LogoModal = (): JSX.Element => {
+  const { theme } = useTheme()
+
+  return (
+    <View
+      style={{
+        width: '100%',
+        height: '100%',
+        backgroundColor: theme.colors.$surfacePrimary,
+        alignItems: 'center',
+        justifyContent: 'center',
+        position: 'absolute'
+      }}>
+      <Logos.Core color={theme.colors.$textPrimary} />
+    </View>
+  )
+}
+
+export const showLogoModal = (): void => {
+  showModal(
+    <K2AlpineThemeProvider>
+      <LogoModal />
+    </K2AlpineThemeProvider>
+  )
+}
+
+export const hideLogoModal = (): void => {
+  hideModal()
+}

packages/core-mobile/app/new/components/SlideToConfirm.tsx

@@ -0,0 +1,106 @@
+import React, { useRef } from 'react'
+import { PanResponder, Animated, Dimensions } from 'react-native'
+import { useTheme, View, Icons } from '@avalabs/k2-alpine'
+
+const { width } = Dimensions.get('window')
+const _sliderWidth = 64
+const _sliderHeight = 64
+
+const SlideToConfirm = ({
+  text,
+  onConfirm
+}: {
+  text: string
+  onConfirm: () => void
+}): JSX.Element => {
+  const { theme } = useTheme()
+  const slideWidth = width - 40 // Space for the slider to move
+  const unlockThreshold = slideWidth - _sliderWidth // Set unlock point near the end
+  const sliderWidth = useRef(new Animated.Value(_sliderWidth)).current
+
+  const textColorAnim = sliderWidth.interpolate({
+    inputRange: [0, unlockThreshold],
+    outputRange: [theme.colors.$textPrimary, theme.colors.$surfacePrimary],
+    extrapolate: 'clamp'
+  })
+  const iconOpacityAnim = sliderWidth.interpolate({
+    inputRange: [_sliderWidth, unlockThreshold / 2],
+    outputRange: [1, 0],
+    extrapolate: 'clamp'
+  })
+
+  // PanResponder for gesture handling
+  const panResponder = PanResponder.create({
+    onStartShouldSetPanResponder: () => true,
+    onPanResponderMove: (_, gestureState) => {
+      // Limit the slider to the width of the container
+      if (gestureState.dx >= 0 && gestureState.dx <= unlockThreshold) {
+        sliderWidth.setValue(_sliderWidth + gestureState.dx)
+      }
+    },
+    onPanResponderRelease: (_, gestureState) => {
+      if (gestureState.dx > unlockThreshold) {
+        onConfirm()
+        Animated.spring(sliderWidth, {
+          toValue: slideWidth,
+          useNativeDriver: false
+        }).start()
+      } else {
+        // Reset if not unlocked
+        Animated.spring(sliderWidth, {
+          toValue: _sliderWidth,
+          useNativeDriver: false
+        }).start()
+      }
+    }
+  })
+
+  return (
+    <View
+      sx={{
+        alignItems: 'center'
+      }}>
+      <View
+        sx={{
+          width: width - 40, // Full width
+          height: _sliderHeight,
+          borderRadius: 32,
+          backgroundColor: '#A1A1AA40',
+          justifyContent: 'center',
+          position: 'relative'
+        }}>
+        <Animated.View
+          {...panResponder.panHandlers}
+          style={{
+            height: _sliderHeight,
+            borderRadius: 32,
+            justifyContent: 'center',
+            alignItems: 'center',
+            position: 'absolute',
+            left: 0,
+            width: sliderWidth,
+            backgroundColor: theme.colors.$textPrimary
+          }}>
+          <Animated.View testID="slide" style={{ opacity: iconOpacityAnim }}>
+            <Icons.Navigation.ArrowForwardIOS
+              color={theme.colors.$surfacePrimary}
+            />
+          </Animated.View>
+        </Animated.View>
+        <Animated.Text
+          style={[
+            {
+              fontSize: 15,
+              fontWeight: '600',
+              color: textColorAnim,
+              alignSelf: 'center'
+            }
+          ]}>
+          {text}
+        </Animated.Text>
+      </View>
+    </View>
+  )
+}
+
+export default SlideToConfirm

packages/core-mobile/app/new/components/navigation/BackBarButton.tsx

@@ -1,11 +1,17 @@
 import React from 'react'
 import { Icons, View, useTheme } from '@avalabs/k2-alpine'
+import { Platform } from 'react-native'
 
 const BackBarButton = (): JSX.Element => {
   const { theme } = useTheme()
 
   return (
-    <View sx={{ padding: 16 }}>
+    <View
+      sx={{
+        paddingLeft: Platform.OS === 'ios' ? 16 : 6,
+        paddingRight: 16,
+        paddingVertical: 16
+      }}>
       <Icons.Custom.BackArrowCustom color={theme.colors.$textPrimary} />
     </View>
   )

packages/core-mobile/app/new/components/navigation/BlurredBackgroundView.tsx

@@ -1,16 +1,8 @@
 import React from 'react'
-import { useColorScheme } from 'react-native'
 import { GlassView } from '@avalabs/k2-alpine'
 
 const BlurredBackgroundView = (): JSX.Element => {
-  const colorScheme = useColorScheme()
-
-  return (
-    <GlassView
-      style={{ flex: 1 }}
-      glassType={colorScheme === 'dark' ? 'dark' : 'light'}
-    />
-  )
+  return <GlassView style={{ flex: 1 }} />
 }
 
 export default BlurredBackgroundView

packages/core-mobile/app/new/components/navigation/BlurredBarsContentLayout.tsx

@@ -1,13 +1,13 @@
-import React, { PropsWithChildren, ReactElement } from 'react'
+import React, { PropsWithChildren, ReactElement, useContext } from 'react'
 import { View } from '@avalabs/k2-alpine'
 import { useHeaderHeight } from '@react-navigation/elements'
-import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs'
+import { BottomTabBarHeightContext } from '@react-navigation/bottom-tabs'
 
 const BlurredBarsContentLayout: React.FC<PropsWithChildren> = ({
   children
 }): JSX.Element => {
   const headerHeight = useHeaderHeight()
-  const bottomTabBarHeight = useBottomTabBarHeight()
+  const bottomTabBarHeight = useContext(BottomTabBarHeightContext)
 
   const styledChildren = React.Children.map(children, child => {
     if (React.isValidElement(child)) {