CP-9316: Buttons and Glasses (#2033)

packages/core-mobile/AppSwitcher.tsx

@@ -12,6 +12,8 @@ const isInternalBuild =
   bundleId === 'org.avalabs.avaxwallet.internal' ||
   bundleId === 'com.avaxwallet.internal'
 
+const APP_SWITCH_NUMBER_OF_TOUCHES = 2
+
 export const AppSwitcher = (): React.JSX.Element => {
   const [isNewApp, setIsNewApp] = useState(
     commonStorage.getBoolean(StorageKey.K2_ALPINE)
@@ -27,7 +29,14 @@ export const AppSwitcher = (): React.JSX.Element => {
     () =>
       PanResponder.create({
         onStartShouldSetPanResponder: (evt, gestureState) => {
-          if (gestureState.numberActiveTouches === 2) {
+          return (
+            gestureState.numberActiveTouches === APP_SWITCH_NUMBER_OF_TOUCHES
+          )
+        },
+        onPanResponderGrant: (evt, gestureState) => {
+          if (
+            gestureState.numberActiveTouches === APP_SWITCH_NUMBER_OF_TOUCHES
+          ) {
             Alert.alert('Switch App Experience?', '', [
               {
                 text: 'Cancel',
@@ -44,7 +53,7 @@ export const AppSwitcher = (): React.JSX.Element => {
   )
 
   // only allow switching to new app on internal builds
-  if (!isInternalBuild) return <OldApp />
+  if (!isInternalBuild && !__DEV__) return <OldApp />
 
   return (
     <View style={{ flex: 1 }} {...panResponder.panHandlers}>

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

@@ -1,11 +1,15 @@
 import React from 'react'
-import { View, Text } from '@avalabs/k2-alpine'
+import { Icons, View, useTheme } from '@avalabs/k2-alpine'
 
 const BackBarButton = (): JSX.Element => {
+  const { theme } = useTheme()
+
   return (
-    // todo: use k2-alpine icon
-    <View style={{ paddingLeft: 18, backgroundColor: 'transparent' }}>
-      <Text>{'<<'}</Text>
+    <View sx={{ padding: 16 }}>
+      {/* todo: please remove the ts-expect-error comments after we address this issue
+        https://ava-labs.atlassian.net/browse/CP-9297
+        @ts-expect-error */}
+      <Icons.Custom.BackArrowCustom color={theme.colors.$textPrimary} />
     </View>
   )
 }

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

@@ -0,0 +1,16 @@
+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'}
+    />
+  )
+}
+
+export default BlurredBackgroundView

packages/core-mobile/app/new/routes/(signedIn)/(modals)/settings/account.tsx

@@ -1,14 +1,16 @@
 import { Link } from 'expo-router'
 import React from 'react'
-import { View, Text } from '@avalabs/k2-alpine'
+import { View, Text, Button } from '@avalabs/k2-alpine'
 
 const AccountScreen = (): JSX.Element => {
   return (
     <View
       sx={{ flex: 1, alignItems: 'center', justifyContent: 'center', gap: 16 }}>
       <Text variant="heading3">Account Settings</Text>
-      <Link href="">
-        <Text>Delete Wallet</Text>
+      <Link href="/" asChild>
+        <Button size="medium" type="tertiary">
+          Delete Wallet
+        </Button>
       </Link>
     </View>
   )

packages/core-mobile/app/new/routes/(signedIn)/(modals)/settings/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Text, View } from '@avalabs/k2-alpine'
+import { Button, Text, View } from '@avalabs/k2-alpine'
 import { Link } from 'expo-router'
 
 const SettingsScreen = (): JSX.Element => {
@@ -12,8 +12,10 @@ const SettingsScreen = (): JSX.Element => {
         gap: 16
       }}>
       <Text variant="heading3">Settings</Text>
-      <Link href="/settings/account">
-        <Text>Go to Account Setting</Text>
+      <Link href="/settings/account" asChild>
+        <Button type="secondary" size="medium">
+          Go to Account Setting
+        </Button>
       </Link>
     </View>
   )

packages/core-mobile/app/new/routes/(signedIn)/(tabs)/_layout.tsx

@@ -1,9 +1,9 @@
-import TabBarBackground from 'new/components/navigation/TabBarBackground'
 import { Tabs } from 'expo-router'
 import React, { useCallback } from 'react'
+import BlurredBackgroundView from 'new/components/navigation/BlurredBackgroundView'
 
 export default function TabLayout(): JSX.Element {
-  const tabBarBackground = useCallback(() => <TabBarBackground />, [])
+  const tabBarBackground = useCallback(() => <BlurredBackgroundView />, [])
 
   return (
     <Tabs

packages/core-mobile/app/new/routes/(signedIn)/(tabs)/portfolio/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Text, ScrollView, View } from '@avalabs/k2-alpine'
+import { Text, ScrollView, View, Button } from '@avalabs/k2-alpine'
 import { Link } from 'expo-router'
 import BlurredBarsContentLayout from 'new/components/navigation/BlurredBarsContentLayout'
 
@@ -11,14 +11,17 @@ const PortfolioHomeScreen = (): JSX.Element => {
           paddingTop: 16,
           paddingBottom: 16,
           alignItems: 'center',
+          paddingHorizontal: 16,
           gap: 16
         }}>
         <View sx={{ height: 100, width: 200, backgroundColor: 'orange' }} />
         <Text variant="heading3">Portfolio</Text>
-        <Link href="/portfolio/assets">
-          <Text>Go to Portfolio Assets</Text>
+        <Link href="/portfolio/assets" asChild>
+          <Button type="primary" size="medium">
+            Go to Portfolio Assets
+          </Button>
         </Link>
-        <View sx={{ height: 800, width: 200, backgroundColor: 'blue' }} />
+        <View sx={{ height: 800, width: 200, backgroundColor: 'orange' }} />
         <View />
       </ScrollView>
     </BlurredBarsContentLayout>

packages/core-mobile/app/new/routes/index.tsx

@@ -1,5 +1,5 @@
 import { Link } from 'expo-router'
-import { View, Text } from '@avalabs/k2-alpine'
+import { View, Button } from '@avalabs/k2-alpine'
 import React from 'react'
 
 export default function Index(): JSX.Element {
@@ -11,11 +11,15 @@ export default function Index(): JSX.Element {
         justifyContent: 'center',
         gap: 16
       }}>
-      <Link href="/portfolio/">
-        <Text>Sign in</Text>
+      <Link href="/portfolio/" asChild>
+        <Button type="primary" size="medium">
+          Sign in
+        </Button>
       </Link>
-      <Link href="/signup/">
-        <Text>Sign up</Text>
+      <Link href="/signup/" asChild>
+        <Button type="primary" size="medium">
+          Sign up
+        </Button>
       </Link>
     </View>
   )

packages/core-mobile/app/new/routes/signup/index.tsx

@@ -1,11 +1,16 @@
 import { Link } from 'expo-router'
 import { View } from 'react-native'
 import React from 'react'
+import { Button } from '@avalabs/k2-alpine'
 
 const SignUpScreen = (): JSX.Element => {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-      <Link href="/portfolio/">Sign up</Link>
+      <Link href="/portfolio/" asChild>
+        <Button type="primary" size="medium">
+          Sign up
+        </Button>
+      </Link>
     </View>
   )
 }

packages/core-mobile/app/new/utils/navigation/screenOptions.tsx

@@ -8,7 +8,7 @@ import {
 import { Animated } from 'react-native'
 import Grabber from 'new/components/navigation/Grabber'
 import BackBarButton from 'new/components/navigation/BackBarButton'
-import HeaderBackground from 'new/components/navigation/HeaderBackground'
+import BlurredBackgroundView from 'new/components/navigation/BlurredBackgroundView'
 import { Text, View } from '@avalabs/k2-alpine'
 import { Link } from 'expo-router'
 
@@ -24,7 +24,7 @@ const commonNavigatorScreenOptions: StackNavigationOptions = {
 export const stackNavigatorScreenOptions: StackNavigationOptions = {
   ...commonNavigatorScreenOptions,
   headerTransparent: true,
-  headerBackground: () => <HeaderBackground />
+  headerBackground: () => <BlurredBackgroundView />
 }
 
 export const modalStackNavigatorScreenOptions: StackNavigationOptions = {

packages/core-mobile/ios/Podfile.lock

@@ -45,6 +45,8 @@ PODS:
     - ExpoModulesCore
     - GoogleSignIn (~> 7.1)
     - React-Core
+  - ExpoBlur (12.9.2):
+    - ExpoModulesCore
   - ExpoFileSystem (16.0.9):
     - ExpoModulesCore
   - ExpoHead (3.4.10):
@@ -1352,6 +1354,7 @@ DEPENDENCIES:
   - EXFont (from `../node_modules/expo-font/ios`)
   - Expo (from `../node_modules/expo`)
   - "ExpoAdapterGoogleSignIn (from `../node_modules/@react-native-google-signin/google-signin/expo/ios`)"
+  - ExpoBlur (from `../node_modules/expo-blur/ios`)
   - ExpoFileSystem (from `../node_modules/expo-file-system/ios`)
   - ExpoHead (from `../node_modules/expo-router/ios`)
   - ExpoKeepAwake (from `../node_modules/expo-keep-awake/ios`)
@@ -1511,6 +1514,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/expo"
   ExpoAdapterGoogleSignIn:
     :path: "../node_modules/@react-native-google-signin/google-signin/expo/ios"
+  ExpoBlur:
+    :path: "../node_modules/expo-blur/ios"
   ExpoFileSystem:
     :path: "../node_modules/expo-file-system/ios"
   ExpoHead:
@@ -1730,6 +1735,7 @@ SPEC CHECKSUMS:
   EXFont: f20669cb266ef48b004f1eb1f2b20db96cd1df9f
   Expo: 7b9976a9b2be116a701b233d6655b229a3c9316e
   ExpoAdapterGoogleSignIn: da10ae7e7c1d73a10c2facebcdfe5ebea8e073ce
+  ExpoBlur: e832d874bd94afc0645daddbd3162ec1ce172080
   ExpoFileSystem: 74cc0fae916f9f044248433971dcfc8c3befd057
   ExpoHead: 89ffd324e60520751c2c285233fe45e875c91874
   ExpoKeepAwake: 0f5cad99603a3268e50af9a6eb8b76d0d9ac956c

packages/core-mobile/package.json

@@ -104,6 +104,7 @@
     "ethers": "6.8.1",
     "events": "3.3.0",
     "expo": "50.0.21",
+    "expo-blur": "12.9.2",
     "expo-constants": "15.4.6",
     "expo-linking": "6.2.2",
     "expo-router": "3.4.10",

packages/k2-alpine/declarations.d.ts

@@ -0,0 +1,6 @@
+declare module '*.svg' {
+  import React from 'react'
+  import { SvgProps } from 'react-native-svg'
+  const content: React.FC<SvgProps>
+  export default content
+}

packages/k2-alpine/metro.config.js

@@ -0,0 +1,15 @@
+const { getDefaultConfig } = require('expo/metro-config')
+
+module.exports = (() => {
+  const config = getDefaultConfig(__dirname)
+
+  config.transformer.babelTransformerPath = require.resolve(
+    'react-native-svg-transformer'
+  )
+  config.resolver.assetExts = config.resolver.assetExts.filter(
+    ext => ext !== 'svg'
+  )
+  config.resolver.sourceExts = [...config.resolver.sourceExts, 'svg']
+
+  return config
+})()

packages/k2-alpine/package.json

@@ -19,12 +19,15 @@
   "dependencies": {
     "dripsy": "4.3.7",
     "expo": "50.0.21",
+    "expo-blur": "12.9.2",
     "expo-font": "11.10.3",
+    "expo-linear-gradient": "12.7.2",
     "expo-splash-screen": "0.27.6",
     "expo-status-bar": "1.12.1",
     "react": "18.3.1",
     "react-native": "0.73.7",
-    "react-native-reanimated": "3.8.0"
+    "react-native-reanimated": "3.8.0",
+    "react-native-svg": "15.7.1"
   },
   "peerDependencies": {
     "react": "18.3.1",
@@ -52,6 +55,7 @@
     "patch-package": "8.0.0",
     "react-dom": "18.3.1",
     "react-native-safe-area-context": "4.11.0",
+    "react-native-svg-transformer": "1.5.0",
     "tinycolor2": "1.6.0",
     "typescript": "5.6.3"
   },