feat: enhance OTP request flow in the app

jest.setup.js

@@ -17,8 +17,6 @@ jest.mock('react-native-reanimated', () => {
   return Reanimated
 })
 
-jest.useFakeTimers()
-
 // This is mocked to silence the warning: Animated: `useNativeDriver` is not supported
 jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper')
 
@@ -29,6 +27,10 @@ jest.mock('@expo-google-fonts/didact-gothic', () => ({
   useFonts: jest.fn().mockReturnValue([true]),
 }))
 
+jest.mock('@expo-google-fonts/roboto-mono', () => ({
+  useFonts: jest.fn().mockReturnValue([true]),
+}))
+
 jest.mock('expo-auth-session/providers/google')
 jest.mock('expo-constants', () => ({
   manifest: { extra: { apiUrl: 'http://dummy.com/api' } },

package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "@expo-google-fonts/didact-gothic": "^0.2.0",
     "@expo-google-fonts/poppins": "^0.2.0",
+    "@expo-google-fonts/roboto-mono": "^0.2.0",
     "@otplib/core": "^12.0.1",
     "@otplib/plugin-base32-enc-dec": "^12.0.1",
     "@otplib/plugin-crypto-js": "^12.0.1",
@@ -64,7 +65,7 @@
     "@react-native-community/eslint-config": "^3.0.1",
     "@testing-library/jest-native": "^4.0.4",
     "@testing-library/react-hooks": "^7.0.2",
-    "@testing-library/react-native": "^7.2.0",
+    "@testing-library/react-native": "^8.0.0",
     "@types/aes-js": "^3.1.1",
     "@types/jest": "^27.0.3",
     "@types/node": "^16.11.10",

src/Main.tsx

@@ -9,7 +9,12 @@ import {
   useFonts as useDidactGothic,
   DidactGothic_400Regular,
 } from '@expo-google-fonts/didact-gothic'
+import {
+  useFonts as useRobotoMono,
+  RobotoMono_400Regular,
+} from '@expo-google-fonts/roboto-mono'
 import AppLoading from 'expo-app-loading'
+import { NativeStackScreenProps } from 'react-native-screens/native-stack'
 
 import theme from './lib/theme'
 import { useAuth } from './context/AuthContext'
@@ -19,13 +24,33 @@ import { ScanScreen } from './screens/ScanScreen'
 import { AuthScreen } from './screens/AuthScreen'
 import HomeHeaderRight from './components/HomeHeaderRight'
 import DefaultHeaderLeft from './components/DefaultHeaderLeft'
+import { TokenScreen } from './screens/TokenScreen'
+import { OtpRequestScreen } from './screens/OtpRequestScreen'
+import { TokensListScreen } from './screens/TokensListScreen'
+import { CreateTokenScreen } from './screens/CreateTokenScreen'
 
 const MainStack = createStackNavigator()
 
 export type MainStackParamList = {
   Home: undefined
   Scan: undefined
   Type: undefined
+  CreateToken: {
+    secretId: string
+  }
+  Token: {
+    secretId: string
+    token: string
+  }
+  TokensList: {
+    secretId: string
+    issuer: string
+  }
+  OtpRequest: {
+    secretId: string
+    token: string
+    uniqueId: string
+  }
 }
 
 export default function Main() {
@@ -37,9 +62,13 @@ export default function Main() {
     DidactGothic_400Regular,
   })
 
+  const [hasRobotoMonoLoaded] = useRobotoMono({
+    RobotoMono_400Regular,
+  })
+
   const { user } = useAuth()
 
-  if (!hasPoppinsLoaded || !hasDidactLoaded) {
+  if (!hasPoppinsLoaded || !hasDidactLoaded || !hasRobotoMonoLoaded) {
     return <AppLoading />
   }
 
@@ -65,6 +94,33 @@ export default function Main() {
           component={HomeScreen}
           options={{ title: 'Your Tokens', headerRight: HomeHeaderRight }}
         />
+        <MainStack.Screen
+          name="TokensList"
+          component={TokensListScreen}
+          options={({
+            route: {
+              params: { issuer },
+            },
+          }: NativeStackScreenProps<MainStackParamList, 'TokensList'>) => ({
+            title: issuer,
+            headerLeft: DefaultHeaderLeft,
+          })}
+        />
+        <MainStack.Screen
+          name="CreateToken"
+          component={CreateTokenScreen}
+          options={{ title: 'Create token', headerLeft: DefaultHeaderLeft }}
+        />
+        <MainStack.Screen
+          name="Token"
+          component={TokenScreen}
+          options={{ title: 'Token', headerLeft: DefaultHeaderLeft }}
+        />
+        <MainStack.Screen
+          name="OtpRequest"
+          component={OtpRequestScreen}
+          options={{ title: 'OTP Request', headerLeft: DefaultHeaderLeft }}
+        />
         <MainStack.Screen
           name="Scan"
           component={ScanScreen}

src/components/SecretCard/ContextMenu.tsx

@@ -1,19 +1,15 @@
 import React from 'react'
-import { Divider, Menu, IconButton } from 'react-native-paper'
+import { Menu, IconButton } from 'react-native-paper'
 
 type ContextMenuProps = {
   open: boolean
   onToggle: () => void
-  onRefresh?: () => void
-  onRevoke?: () => void
   onDelete: () => void
 }
 
 export const ContextMenu: React.FC<ContextMenuProps> = ({
   open,
   onToggle,
-  onRefresh,
-  onRevoke,
   onDelete,
 }) => {
   return (
@@ -29,19 +25,6 @@ export const ContextMenu: React.FC<ContextMenuProps> = ({
         />
       }
     >
-      <Menu.Item
-        onPress={onRefresh}
-        title="Refresh token"
-        icon="refresh"
-        disabled={!onRefresh}
-      />
-      <Divider />
-      <Menu.Item
-        onPress={onRevoke}
-        title="Revoke token"
-        icon="minus"
-        disabled={!onRevoke}
-      />
       <Menu.Item onPress={onDelete} title="Delete secret" icon="delete" />
     </Menu>
   )

src/components/SecretCard/CopyableInfo.tsx

@@ -1,34 +1,39 @@
 import React from 'react'
 import { IconButton } from 'react-native-paper'
-import { StyleSheet, View, Text, StyleProp, TextStyle } from 'react-native'
+import { StyleSheet, View } from 'react-native'
 import * as Clipboard from 'expo-clipboard'
 import Toast from 'react-native-root-toast'
 
+import { TypographyVariant } from '../../lib/theme'
+import { Typography } from '../Typography'
+
 const styles = StyleSheet.create({
   row: {
     flexDirection: 'row',
     alignItems: 'center',
   },
-  iconButton: {
-    padding: 0,
-    marginTop: -10,
+  textContainer: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
   },
 })
 
 type CopyableInfoProps = {
   children: string
-  textStyle: StyleProp<TextStyle>
+  typographyVariant: TypographyVariant
 }
 
 export const CopyableInfo: React.FC<CopyableInfoProps> = ({
   children,
-  textStyle,
+  typographyVariant,
 }) => {
   return (
     <View style={styles.row}>
-      <Text style={textStyle}>{children}</Text>
+      <View style={styles.textContainer}>
+        <Typography variant={typographyVariant}>{children}</Typography>
+      </View>
       <IconButton
-        style={styles.iconButton}
         icon="content-copy"
         accessibilityLabel="copy-otp"
         size={20}

src/components/SecretCard/OTP.tsx

@@ -4,6 +4,7 @@ import { CountdownCircleTimer } from 'react-native-countdown-circle-timer'
 
 import otpLib from '../../lib/otp'
 import theme from '../../lib/theme'
+import { Typography } from '../Typography'
 
 import { CopyableInfo } from './CopyableInfo'
 
@@ -18,24 +19,15 @@ const styles = StyleSheet.create({
     marginRight: theme.spacing(1),
     fontSize: 10,
   },
-  value: {
-    fontFamily: 'monospace',
-    fontSize: 24,
-    color: theme.colors.text,
-    marginBottom: theme.spacing(2),
-  },
   otpRow: {
     flexDirection: 'row',
     justifyContent: 'space-between',
+    marginBottom: theme.spacing(2),
   },
   otpData: {
     flexDirection: 'row',
     alignItems: 'center',
   },
-  iconButton: {
-    padding: 0,
-    marginTop: -10,
-  },
   otp: { fontSize: 12 },
 })
 
@@ -48,7 +40,7 @@ export const OTP: React.FC<OTPProps> = ({ value }) => {
     <View style={styles.row}>
       <Text style={styles.label}>OTP</Text>
       <View style={styles.otpRow}>
-        <CopyableInfo textStyle={styles.value}>{value}</CopyableInfo>
+        <CopyableInfo typographyVariant="code">{value}</CopyableInfo>
         <CountdownCircleTimer
           key={value}
           size={30}
@@ -59,7 +51,9 @@ export const OTP: React.FC<OTPProps> = ({ value }) => {
           colors="#EB829C"
         >
           {({ remainingTime }) => (
-            <Text style={styles.otp}>{remainingTime}</Text>
+            <Typography style={styles.otp} variant="code">
+              {remainingTime}
+            </Typography>
           )}
         </CountdownCircleTimer>
       </View>