Merge branch 'main' into qa/fix-1219

packages/k2-alpine/src/components/RecoveryMethodList/RecoveryMethodList.tsx → packages/core-mobile/app/new/components/RecoveryMethodList.tsx

@@ -1,33 +1,40 @@
-import { Pressable, SxProp, View } from 'dripsy'
-import React, { useState } from 'react'
-import { useDripsyTheme as useTheme } from 'dripsy'
-import { FlatList, Text } from '../Primitives'
-import Check from '../../assets/icons/check.svg'
-import { Card } from '../../components/Card/Card'
-import { Separator } from '../Separator/Separator'
-import { RecoveryMethod, RecoveryMethodData } from './types'
+import React from 'react'
+import {
+  Card,
+  FlatList,
+  Pressable,
+  SxProp,
+  Text,
+  useTheme,
+  View,
+  Icons,
+  Separator
+} from '@avalabs/k2-alpine'
+import {
+  RecoveryMethod,
+  RecoveryMethods
+} from 'new/hooks/useAvailableRecoveryMethods'
 
 export const RecoveryMethodList = ({
+  selectedMethod,
   data,
   sx,
   onPress
 }: {
-  data: RecoveryMethodData[]
+  selectedMethod?: RecoveryMethods
+  data: RecoveryMethod[]
   sx?: SxProp
-  onPress: (type: RecoveryMethod) => void
-}): React.JSX.Element => {
+  onPress: (type: RecoveryMethods) => void
+}): React.JSX.Element | undefined => {
   const {
     theme: { colors }
   } = useTheme()
-  const [selectedId, setSelectedId] = useState<string>()
-
-  const renderItem = (item: RecoveryMethodData): React.JSX.Element => {
-    const isSelected = selectedId === item.type
+  const renderItem = (item: RecoveryMethod): React.JSX.Element => {
+    const isSelected = selectedMethod === item.type
     const isLastItem = data.indexOf(item) === data.length - 1
     const Icon = item.icon
 
     const handleOnPress = (): void => {
-      setSelectedId(item.type)
       onPress(item.type)
     }
 
@@ -73,7 +80,7 @@ export const RecoveryMethodList = ({
               <Text
                 sx={{
                   fontSize: 12,
-                  fontWeight: '500',
+                  fontWeight: '400',
                   lineHeight: 15,
                   color: colors.$textSecondary,
                   marginTop: 3
@@ -82,7 +89,7 @@ export const RecoveryMethodList = ({
               </Text>
             </View>
             {isSelected ? (
-              <Check width={15} color={colors.$textPrimary} />
+              <Icons.Navigation.Check width={15} color={colors.$textPrimary} />
             ) : (
               <View sx={{ width: 15 }} />
             )}
@@ -97,13 +104,18 @@ export const RecoveryMethodList = ({
     )
   }
 
+  if (data.length === 0) {
+    return undefined
+  }
+
   return (
     <Card sx={{ paddingRight: 0, ...sx }}>
       <FlatList
+        scrollEnabled={false}
         sx={{ width: '100%', backgroundColor: '$surfaceSecondary' }}
         data={data}
-        renderItem={item => renderItem(item.item as RecoveryMethodData)}
-        keyExtractor={item => (item as RecoveryMethodData).type}
+        renderItem={item => renderItem(item.item as RecoveryMethod)}
+        keyExtractor={item => (item as RecoveryMethod).type}
       />
     </Card>
   )

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

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

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

@@ -1,11 +1,11 @@
 import React, { PropsWithChildren, ReactElement, useContext } from 'react'
-import { View } from '@avalabs/k2-alpine'
+import { SxProp, View } from '@avalabs/k2-alpine'
 import { useHeaderHeight } from '@react-navigation/elements'
 import { BottomTabBarHeightContext } from '@react-navigation/bottom-tabs'
 
-const BlurredBarsContentLayout: React.FC<PropsWithChildren> = ({
-  children
-}): JSX.Element => {
+const BlurredBarsContentLayout: React.FC<
+  PropsWithChildren & { sx?: SxProp }
+> = ({ children, sx }): JSX.Element => {
   const headerHeight = useHeaderHeight()
   const bottomTabBarHeight = useContext(BottomTabBarHeightContext)
 
@@ -23,7 +23,8 @@ const BlurredBarsContentLayout: React.FC<PropsWithChildren> = ({
       sx={{
         flex: 1,
         paddingTop: headerHeight,
-        paddingBottom: bottomTabBarHeight
+        paddingBottom: bottomTabBarHeight,
+        ...sx
       }}>
       {styledChildren}
     </View>

packages/core-mobile/app/new/components/totp/AuthenticatorSetup.tsx

@@ -0,0 +1,143 @@
+import BlurredBarsContentLayout from 'new/components/navigation/BlurredBarsContentLayout'
+import React from 'react'
+import {
+  View,
+  Text,
+  Button,
+  Card,
+  Icons,
+  useTheme,
+  Separator,
+  TouchableOpacity,
+  ActivityIndicator
+} from '@avalabs/k2-alpine'
+
+export const AuthenticatorSetup = ({
+  totpKey,
+  onScanQrCode,
+  onCopyCode,
+  onVerifyCode
+}: {
+  totpKey: string
+  onScanQrCode: () => void
+  onCopyCode: () => void
+  onVerifyCode: () => void
+}): JSX.Element => {
+  const {
+    theme: { colors }
+  } = useTheme()
+
+  return (
+    <BlurredBarsContentLayout>
+      <View
+        sx={{
+          flex: 1,
+          paddingTop: 25,
+          paddingHorizontal: 16,
+          justifyContent: 'space-between'
+        }}>
+        <View>
+          <Text variant="heading2" sx={{ marginRight: 37 }}>
+            Authenticator setup
+          </Text>
+          <Text variant="body1" sx={{ marginTop: 8, marginRight: 8 }}>
+            Open any authenticator app and use it to enter the code found below
+          </Text>
+          <Card sx={{ paddingRight: 0, marginTop: 34 }}>
+            <TouchableOpacity
+              onPress={onCopyCode}
+              sx={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 16,
+                width: '100%'
+              }}>
+              <View sx={{ width: 18, marginTop: -16, alignItems: 'center' }}>
+                <Icons.RecoveryMethod.Copy color={colors.$textPrimary} />
+              </View>
+              <View sx={{ flex: 1 }}>
+                <View sx={{ gap: 4 }}>
+                  <Text
+                    sx={{
+                      fontSize: 16,
+                      fontWeight: '500',
+                      lineHeight: 16,
+                      color: colors.$textPrimary
+                    }}>
+                    Copy code
+                  </Text>
+                  <View
+                    sx={{ marginTop: 3, marginRight: 39, marginBottom: 16 }}>
+                    {totpKey ? (
+                      <Text
+                        sx={{
+                          fontSize: 12,
+                          fontWeight: '400',
+                          lineHeight: 15,
+                          color: colors.$textSecondary
+                        }}>
+                        {totpKey}
+                      </Text>
+                    ) : (
+                      <ActivityIndicator
+                        size={16}
+                        color={colors.$textPrimary}
+                        sx={{
+                          alignSelf: 'flex-start'
+                        }}
+                      />
+                    )}
+                  </View>
+                </View>
+                <Separator />
+              </View>
+            </TouchableOpacity>
+
+            <TouchableOpacity
+              onPress={onScanQrCode}
+              sx={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 16,
+                width: '100%',
+                marginTop: 16
+              }}>
+              <View sx={{ width: 18, alignItems: 'center' }}>
+                <Icons.RecoveryMethod.QrCode color={colors.$textPrimary} />
+              </View>
+              <View sx={{ flex: 1 }}>
+                <View sx={{ gap: 4 }}>
+                  <Text
+                    sx={{
+                      fontSize: 16,
+                      fontWeight: '500',
+                      lineHeight: 16,
+                      color: colors.$textPrimary
+                    }}>
+                    Scan QR code
+                  </Text>
+                  <Text
+                    sx={{
+                      fontSize: 12,
+                      fontWeight: '400',
+                      lineHeight: 15,
+                      color: colors.$textSecondary,
+                      marginTop: 3,
+                      marginRight: 39
+                    }}>
+                    View QR code to scan with your authenticator app
+                  </Text>
+                </View>
+              </View>
+            </TouchableOpacity>
+          </Card>
+        </View>
+        <View sx={{ marginBottom: 36 }}>
+          <Button type="primary" size="large" onPress={onVerifyCode}>
+            Next
+          </Button>
+        </View>
+      </View>
+    </BlurredBarsContentLayout>
+  )
+}