fix: wallet ui improvements (#88)

Signed-off-by: Jan <[email protected]>
animo · Feb 22, 2024 · 055d14e · 055d14e
1 parent 3f7e684
commit 055d14e
Show file tree

Hide file tree

Showing 16 changed files with 95 additions and 43 deletions.
diff --git a/apps/expo/app/_layout.tsx b/apps/expo/app/_layout.tsx
@@ -185,6 +185,11 @@ export default function HomeLayout() {
                     headerShadowVisible: false,
                     headerTintColor: config.tokens.color['primary-500'].val,
                     headerTitle: 'Inbox',
+                    headerTitleAlign: 'center',
+                    headerTitleStyle: {
+                      fontWeight: isAndroid() ? '700' : '500', // Match font weight on android to native back button style
+                      fontSize: 18,
+                    },
                   }}
                   name="notifications/inbox"
                 />

diff --git a/packages/app/components/CredentialCard.tsx b/packages/app/components/CredentialCard.tsx
@@ -6,7 +6,6 @@ import {
   Image,
   Paragraph,
   Heading,
-  Spacer,
   FileBadge,
   darken,
   getTextColorBasedOnBg,
@@ -61,6 +60,7 @@ export default function CredentialCard({
         pressStyle={{
           backgroundColor: onPress && darken(bgColor ?? '$grey-900', 0.05),
         }}
+        h="$16"
         borderWidth={0.5}
         borderColor="$borderTranslucent"
         onPress={onPress}
@@ -69,7 +69,7 @@ export default function CredentialCard({
           <XStack jc="space-between">
             <XStack pr="$4">{icon}</XStack>
             <YStack f={1}>
-              <Heading variant="h3" size="$4" textAlign="right" color={textColor} numberOfLines={1}>
+              <Heading variant="h3" size="$4" textAlign="right" color={textColor} numberOfLines={2}>
                 {name}
               </Heading>
               <Paragraph
@@ -84,14 +84,13 @@ export default function CredentialCard({
             </YStack>
           </XStack>
         </Card.Header>
-        <Spacer size="$11" />
         <Card.Footer>
           <XStack>
             <YStack>
               <Paragraph variant="annotation" opacity={0.8} color={textColor}>
                 Issuer
               </Paragraph>
-              <Paragraph variant="sub" color={textColor}>
+              <Paragraph variant="sub" color={textColor} numberOfLines={2}>
                 {issuerName}
               </Paragraph>
             </YStack>

diff --git a/packages/app/components/CredentialRowCard.tsx b/packages/app/components/CredentialRowCard.tsx
@@ -6,6 +6,7 @@ interface CredentialRowCardProps {
   onPress?(): void
   bgColor?: string
   hideBorder?: boolean
+  showFullText?: boolean
 }
 
 export default function CredentialRowCard({
@@ -14,6 +15,7 @@ export default function CredentialRowCard({
   bgColor,
   onPress,
   hideBorder = false,
+  showFullText = false,
 }: CredentialRowCardProps) {
   return (
     <YStack>
@@ -24,13 +26,13 @@ export default function CredentialRowCard({
         pressStyle={{ backgroundColor: onPress && '$grey-100' }}
         overflow="hidden"
       >
-        <XStack bg={bgColor ?? '$grey-700'} h="$4.5" w="24%" br="$2" />
-        <YStack jc={issuer ? 'space-between' : 'center'}>
-          <Heading variant="h3" numberOfLines={1}>
+        <XStack border bg={bgColor ?? '$grey-700'} h="$4.5" w="24%" br="$2" />
+        <YStack flex={1} jc={issuer ? 'space-between' : 'center'}>
+          <Heading variant="h3" numberOfLines={showFullText ? 2 : 1}>
             {name}
           </Heading>
           {issuer && (
-            <Paragraph variant="sub" secondary>
+            <Paragraph variant="sub" secondary numberOfLines={showFullText ? 3 : 1}>
               {issuer}
             </Paragraph>
           )}

diff --git a/packages/app/components/DualResponseButtons.tsx b/packages/app/components/DualResponseButtons.tsx
@@ -0,0 +1,24 @@
+import { YStack, Button, Spinner } from '@internal/ui'
+
+interface DualResponseButtonProps {
+  isAccepting?: boolean
+  onAccept: () => void
+  onDecline: () => void
+}
+
+export default function DualResponseButtons({
+  onAccept,
+  onDecline,
+  isAccepting,
+}: DualResponseButtonProps) {
+  return (
+    <YStack gap="$2" py="$2">
+      <Button.Solid disabled={isAccepting} onPress={onAccept}>
+        {isAccepting ? <Spinner variant="dark" /> : 'Accept'}
+      </Button.Solid>
+      <Button.Outline disabled={isAccepting} onPress={onDecline}>
+        Decline
+      </Button.Outline>
+    </YStack>
+  )
+}
diff --git a/packages/app/components/InboxNotificationRowCard.tsx b/packages/app/components/InboxNotificationRowCard.tsx
@@ -21,7 +21,7 @@ export default function InboxNotificationRowCard({
         overflow="hidden"
       >
         <XStack bg="$grey-700" h="$5" w="$5" br="$2" />
-        <YStack jc="space-between">
+        <YStack flex={1} jc="space-between">
           <Paragraph variant="sub" numberOfLines={1} opacity={0.8}>
             {description}
           </Paragraph>

diff --git a/packages/app/features/notifications/components/CredentialNotificationScreen.tsx b/packages/app/features/notifications/components/CredentialNotificationScreen.tsx
@@ -1,10 +1,12 @@
 import type { CredentialDisplay } from '@internal/agent'
 
-import { YStack, Heading, Button, Spacer, ScrollView, Spinner } from '@internal/ui'
+import { YStack, Heading, ScrollView } from '@internal/ui'
 import React from 'react'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
 import CredentialAttributes from 'app/components/CredentialAttributes'
 import CredentialCard from 'app/components/CredentialCard'
+import DualResponseButtons from 'app/components/DualResponseButtons'
 
 interface CredentialNotificationScreenProps {
   display: CredentialDisplay
@@ -22,8 +24,9 @@ export function CredentialNotificationScreen({
   onAccept,
   onDecline,
 }: CredentialNotificationScreenProps) {
+  const { bottom } = useSafeAreaInsets()
   return (
-    <ScrollView bg="$grey-200">
+    <ScrollView bg="$grey-200" safeAreaBottom={bottom}>
       <YStack g="3xl" jc="space-between" pad="lg" py="$6">
         <YStack g="2xl">
           <Heading variant="h2" ta="center" px="$4">
@@ -41,16 +44,8 @@ export function CredentialNotificationScreen({
           />
           <CredentialAttributes subject={attributes} />
         </YStack>
-        <YStack gap="$2">
-          <Button.Solid disabled={isAccepting} onPress={onAccept}>
-            {isAccepting ? <Spinner variant="dark" /> : 'Accept'}
-          </Button.Solid>
-          <Button.Outline disabled={isAccepting} onPress={onDecline}>
-            Decline
-          </Button.Outline>
-        </YStack>
+        <DualResponseButtons onAccept={onAccept} onDecline={onDecline} isAccepting={isAccepting} />
       </YStack>
-      <Spacer />
     </ScrollView>
   )
 }
diff --git a/packages/app/features/notifications/components/PresentationNotificationScreen.tsx b/packages/app/features/notifications/components/PresentationNotificationScreen.tsx
@@ -1,10 +1,12 @@
 import type { FormattedSubmission } from '@internal/agent'
 
-import { YStack, Heading, Button, ScrollView, Spinner, Paragraph } from '@internal/ui'
+import { YStack, Heading, Button, ScrollView, Paragraph } from '@internal/ui'
 import { sanitizeString } from '@internal/utils'
 import React from 'react'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
 import CredentialRowCard from 'app/components/CredentialRowCard'
+import DualResponseButtons from 'app/components/DualResponseButtons'
 
 interface PresentationNotificationScreenProps {
   submission: FormattedSubmission
@@ -21,14 +23,14 @@ export function PresentationNotificationScreen({
   submission,
   verifierName,
 }: PresentationNotificationScreenProps) {
+  const { bottom } = useSafeAreaInsets()
   return (
     <ScrollView
       bg="$grey-200"
-      fullscreen
-      space
       contentContainerStyle={{
         minHeight: '100%',
       }}
+      safeAreaBottom={bottom}
     >
       <YStack g="3xl" jc="space-between" pad="lg" py="$6" height="100%" bg="$grey-200">
         <YStack g="xl">
@@ -56,8 +58,9 @@ export function PresentationNotificationScreen({
                     <CredentialRowCard
                       issuer={s.issuerName}
                       name={s.credentialName}
-                      hideBorder={true}
                       bgColor={s.backgroundColor}
+                      hideBorder
+                      showFullText
                     />
                     {s.description && (
                       <Paragraph secondary px="$3" variant="text">
@@ -66,13 +69,13 @@ export function PresentationNotificationScreen({
                     )}
                   </YStack>
                   {s.isSatisfied && s.requestedAttributes ? (
-                    <YStack pad="md" gap="$2">
+                    <YStack px="$3" pb="$3" gap="$2">
                       <Paragraph variant="sub">
                         The following information will be presented:
                       </Paragraph>
                       <YStack flexDirection="row" flexWrap="wrap">
                         {s.requestedAttributes.map((a) => (
-                          <Paragraph flexBasis="50%" key={a} variant="annotation" secondary>
+                          <Paragraph key={a} variant="annotation" secondary>
                             • {sanitizeString(a)}
                           </Paragraph>
                         ))}
@@ -89,12 +92,11 @@ export function PresentationNotificationScreen({
           </YStack>
         </YStack>
         {submission.areAllSatisfied ? (
-          <YStack gap="$2">
-            <Button.Solid disabled={isAccepting} onPress={onAccept}>
-              {isAccepting ? <Spinner variant="dark" /> : 'Accept'}
-            </Button.Solid>
-            <Button.Outline onPress={onDecline}>Decline</Button.Outline>
-          </YStack>
+          <DualResponseButtons
+            onAccept={onAccept}
+            onDecline={onDecline}
+            isAccepting={isAccepting}
+          />
         ) : (
           <YStack gap="$4">
             <Paragraph variant="sub" ta="center">

diff --git a/packages/app/features/wallet/WalletScreen.tsx b/packages/app/features/wallet/WalletScreen.tsx
@@ -17,6 +17,7 @@ import {
   YStack,
   ZStack,
 } from '@internal/ui'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useRouter } from 'solito/router'
 
 import CredentialCard from 'app/components/CredentialCard'
@@ -32,7 +33,7 @@ export function WalletScreen() {
   const firstThreeRecords = credentials.slice(0, 3)
   const { handleScroll, isScrolledByOffset, scrollEventThrottle } =
     useScrollViewPosition(HEADER_TITLE_TEXT_HEIGHT)
-
+  const { bottom } = useSafeAreaInsets()
   const navigateToCredentialDetail = (id: string) => push(`/credentials/${id}`)
   const navigateToScanner = useNetworkCallback(() => push('/scan'))
 
@@ -51,7 +52,7 @@ export function WalletScreen() {
           zIndex="$5"
           position="absolute"
           right="$6"
-          bottom="$6"
+          bottom={bottom ?? '$6'}
           bg="$grey-900"
           br="$12"
           p="$4"

diff --git a/packages/app/provider/index.tsx b/packages/app/provider/index.tsx
@@ -20,7 +20,7 @@ export function Provider({ children, ...rest }: Omit<TamaguiProviderProps, 'conf
       {...rest}
     >
       <ToastProvider
-        swipeDirection="horizontal"
+        swipeDirection="up"
         duration={6000}
         native={
           [

diff --git a/packages/ui/src/base/ScrollView.tsx b/packages/ui/src/base/ScrollView.tsx
@@ -0,0 +1,16 @@
+import type { ScrollViewProps as TScrollViewProps } from 'tamagui'
+
+import { Spacer, ScrollView as TScrollView } from 'tamagui'
+
+interface ScrollViewProps extends TScrollViewProps {
+  safeAreaBottom?: number
+}
+
+export const ScrollView = ({ safeAreaBottom, children, ...props }: ScrollViewProps) => {
+  return (
+    <TScrollView {...props}>
+      {children}
+      <Spacer height={safeAreaBottom} />
+    </TScrollView>
+  )
+}
diff --git a/packages/ui/src/base/index.ts b/packages/ui/src/base/index.ts
@@ -3,3 +3,4 @@ export * from './Headings'
 export * from './Paragraph'
 export * from './Stacks'
 export * from './Page'
+export * from './ScrollView'
diff --git a/packages/ui/src/constants.ts b/packages/ui/src/constants.ts
@@ -1,5 +1,4 @@
-export const HEADER_STATUS_BAR_HEIGHT = 56
-export const BASE_CREDENTIAL_CARD_HEIGHT = 196
+export const BASE_CREDENTIAL_CARD_HEIGHT = 212
 export const CREDENTIAL_TOP_INFO_OFFSET = 56
 export const CREDENTIAL_TOP_INFO_HEIGHT = 64
 export const HEADER_TITLE_TEXT_HEIGHT = 38
diff --git a/packages/ui/src/content/Icon.tsx b/packages/ui/src/content/Icon.tsx
@@ -7,4 +7,5 @@ export {
   CornerDownRight,
   AlertOctagon,
   Inbox,
+  X,
 } from '@tamagui/lucide-icons'
diff --git a/packages/ui/src/index.tsx b/packages/ui/src/index.tsx
@@ -1,6 +1,6 @@
 export { tokens, config, absoluteFill, Colors } from './config/tamagui.config'
 export * from './constants'
-export { TamaguiProviderProps, TamaguiProvider, ScrollView, Spacer, AnimatePresence } from 'tamagui'
+export { TamaguiProviderProps, TamaguiProvider, Spacer, AnimatePresence } from 'tamagui'
 export { ToastProvider, useToastController, ToastViewport, useToastState } from '@tamagui/toast'
 export * from './panels'
 export * from './base'

diff --git a/packages/ui/src/panels/ToastContainer.tsx b/packages/ui/src/panels/ToastContainer.tsx
@@ -1,13 +1,17 @@
-import { Paragraph, YStack } from '../base'
+import { useToastController } from '@tamagui/toast'
+
+import { Paragraph, XStack } from '../base'
+import { X } from '../content'
 
 interface ToastContainerProps {
   title: string
   safeAreaMargin?: boolean
 }
 
 export const ToastContainer = ({ title, safeAreaMargin = false }: ToastContainerProps) => {
+  const toast = useToastController()
   return (
-    <YStack
+    <XStack
       enterStyle={{ opacity: 0, scale: 0.5, y: -25 }}
       exitStyle={{ opacity: 0, scale: 1, y: -20 }}
       y={0}
@@ -18,8 +22,11 @@ export const ToastContainer = ({ title, safeAreaMargin = false }: ToastContainer
       margin={safeAreaMargin ? '$4' : 0}
       padding="$3"
       borderRadius="$4"
+      jc="space-between"
+      ai="center"
     >
-      <Paragraph>{title}</Paragraph>
-    </YStack>
+      <Paragraph w="90%">{title}</Paragraph>
+      <X size="$1" onPress={() => toast.hide()} color="$grey-600" />
+    </XStack>
   )
 }
diff --git a/packages/utils/src/format.ts b/packages/utils/src/format.ts
@@ -14,7 +14,7 @@ export function sanitizeString(str: string) {
   const result = str.replace(/([a-z0-9])([A-Z])/g, '$1 $2')
   let words = result.split(' ')
   words = words.map((word, index) => {
-    if (index === 0) {
+    if (index === 0 || word.toUpperCase() === word) {
       return word.charAt(0).toUpperCase() + word.slice(1)
     } else {
       return word.charAt(0).toLowerCase() + word.slice(1)