feat: send package info when requesting OTP

package.json

@@ -4,7 +4,7 @@
   "version": "1.3.10",
   "versionCode": 21,
   "scripts": {
-    "start": "expo start --dev-client",
+    "start": "expo start",
     "start:native": "expo start --dev-client",
     "android": "expo run:android",
     "ios": "expo run:ios",
@@ -117,4 +117,4 @@
       "prettier --write"
     ]
   }
-}
+}

src/Main.tsx

@@ -55,6 +55,10 @@ export type MainStackParamList = {
     secretId: string
     token: string
     uniqueId: string
+    packageInfo?: {
+      name?: string
+      version?: string
+    }
   }
   Notifications: undefined
   ExportFileSecret: undefined

src/components/NotificationCard.tsx

@@ -16,6 +16,7 @@ import { useSecretSelector } from '../hooks/use-secret-selector'
 import { useTokenDataSelector } from '../hooks/use-token-data-selector'
 
 import { Typography } from './Typography'
+import { PackageInfo } from './PackageInfo'
 
 const OTP_REQUEST_TIMEOUT = 60001 // See https://github.com/nearform/optic/blob/master/server/lib/routes/otp.js#L5
 
@@ -37,7 +38,7 @@ const styles = StyleSheet.create({
   tokenDescriptionRow: {
     flexDirection: 'row',
     justifyContent: 'space-between',
-    marginBottom: theme.spacing(2),
+    marginBottom: theme.spacing(1),
   },
   button: {
     marginTop: theme.spacing(2),
@@ -77,8 +78,6 @@ const TokenInfo: React.FC<TokenInfoProps> = ({ token, description }) => {
         <View style={styles.tokenDescriptionRow}>
           <Typography variant="code">{token}</Typography>
         </View>
-      </View>
-      <View style={styles.cardRow}>
         <View style={styles.tokenDescriptionRow}>
           <Typography variant="body1">{description}</Typography>
         </View>
@@ -140,6 +139,8 @@ export const NotificationCard: React.FC<NotificationCardProps> = ({
     [data.uniqueId, removeNotification]
   )
 
+  const packageInfo = notification.request.content.data.packageInfo
+
   return (
     <>
       <View style={styles.container}>
@@ -151,6 +152,11 @@ export const NotificationCard: React.FC<NotificationCardProps> = ({
           />
           <Card.Content>
             <TokenInfo token={token.token} description={token.description} />
+            {packageInfo && (
+              <View style={styles.cardRow}>
+                <PackageInfo packageInfo={packageInfo} />
+              </View>
+            )}
             <View style={styles.cardRow}>
               <TimeAgo
                 date={new Date(notification.date)}

src/components/PackageInfo.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+
+import theme from '../lib/theme'
+
+import { Typography } from './Typography'
+
+const styles = StyleSheet.create({
+  packageInfo: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: theme.spacing(2),
+  },
+})
+
+type PackageInfoProps = {
+  packageInfo: {
+    version?: string
+    name?: string
+  }
+}
+
+export const PackageInfo: React.FC<PackageInfoProps> = ({
+  packageInfo: { version, name } = {},
+}) => {
+  return (
+    <View style={styles.packageInfo}>
+      {name && (
+        <View>
+          <Typography variant="overline">Package</Typography>
+          <Typography variant="body1">{name}</Typography>
+        </View>
+      )}
+      {version && (
+        <View>
+          <Typography variant="overline">Version</Typography>
+          <Typography variant="body1">{version}</Typography>
+        </View>
+      )}
+    </View>
+  )
+}

src/screens/HomeScreen.tsx

@@ -91,7 +91,7 @@ export const HomeScreen: React.FC<HomeScreenProps> = ({ navigation }) => {
     async (res: NotificationResponse) => {
       const data = res.notification.request.content.data as NotificationData
 
-      const { secretId, uniqueId, token } = data
+      const { secretId, uniqueId, token, packageInfo } = data
 
       const secret = secrets.find(({ _id }) => _id === secretId)
 
@@ -104,6 +104,7 @@ export const HomeScreen: React.FC<HomeScreenProps> = ({ navigation }) => {
         token,
         secretId,
         uniqueId,
+        packageInfo,
       })
     },
     [navigation, secrets]

src/screens/OtpRequestScreen.tsx

@@ -16,6 +16,7 @@ import { useSecretSelector } from '../hooks/use-secret-selector'
 import { LoadingSpinnerOverlay } from '../components/LoadingSpinnerOverlay'
 import { usePrefs } from '../context/PrefsContext'
 import { useCanUseLocalAuth } from '../hooks/use-can-use-local-auth'
+import { PackageInfo } from '../components/PackageInfo'
 
 const styles = StyleSheet.create({
   container: {
@@ -52,7 +53,7 @@ export const OtpRequestScreen = ({ route, navigation }: Props) => {
   const canUseLocalAuth = useCanUseLocalAuth()
 
   const api = useMemo(() => apiFactory({ idToken: user.idToken }), [user])
-  const { token, secretId, uniqueId } = route.params
+  const { token, secretId, uniqueId, packageInfo } = route.params
   const secret = useSecretSelector(secretId)
   const tokenData = useTokenDataSelector(secretId, token)
   const description = tokenData ? tokenData.description : ''
@@ -134,6 +135,7 @@ export const OtpRequestScreen = ({ route, navigation }: Props) => {
           </Typography>
           <Typography variant="body1">{description}</Typography>
         </View>
+        {packageInfo && <PackageInfo packageInfo={packageInfo} />}
         <View>
           <Button style={styles.button} mode="outlined" onPress={handleReject}>
             Reject

src/types.ts

@@ -30,6 +30,10 @@ export type NotificationData = {
   secretId: string
   uniqueId: string
   token: string
+  packageInfo?: {
+    name?: string
+    version?: string
+  }
 }
 
 export type OpticNotification = Notification & {