Merge pull request #84 from animo/feature/SID-123

feat: First implementation of the details screens

packages/siera-ui/src/components/Card.tsx

@@ -1,9 +1,14 @@
+import type { MantineNumberSize } from '@mantine/core'
+import type { TitleSize } from '@mantine/core/lib/Title/Title'
+
 import { Box, createStyles, Paper, Text, Title } from '@mantine/core'
 import React from 'react'
 
 interface CardProps {
   title?: string
+  titleSize?: TitleSize
   description?: string
+  descriptionSize?: MantineNumberSize
   children?: React.ReactNode
   withPadding?: boolean
 }
@@ -16,7 +21,14 @@ const useStyles = createStyles((theme) => ({
   },
 }))
 
-export const Card = ({ children, title, description, withPadding }: CardProps) => {
+export const Card = ({
+  children,
+  title,
+  description,
+  withPadding,
+  titleSize = 'h4',
+  descriptionSize = 'sm',
+}: CardProps) => {
   const { classes } = useStyles()
 
   const xPadding = 'md'
@@ -27,12 +39,12 @@ export const Card = ({ children, title, description, withPadding }: CardProps) =
   return (
     <Paper className={classes.card} pt="xs" pb={bottomPadding}>
       {title && (
-        <Title size="h4" weight={600} mb="xs" px={xPadding}>
+        <Title size={titleSize} weight={600} mb="xs" px={xPadding}>
           {title}
         </Title>
       )}
       {description && (
-        <Text color="dimmed" size="sm" mb="md" px={xPadding}>
+        <Text color="dimmed" size={descriptionSize} mb="md" px={xPadding}>
           {description}
         </Text>
       )}

packages/siera-ui/src/components/Loading.tsx

@@ -16,12 +16,15 @@ interface LoadingProps {
 
 export const Loading = ({ description }: LoadingProps) => {
   const { classes } = useStyles()
-  const { colors } = useMantineTheme()
+  const { colors, colorScheme } = useMantineTheme()
+
+  // The styling is a bit weird for the loader component
+  const strokeColor = colorScheme == 'dark' ? colors.primaryTwo[0] : undefined
 
   return (
     <Center className={classes.spinnerCentering}>
       <Flex direction="column" align="center" gap="sm">
-        <Loader size="xl" stroke={colors.primaryTwo[0]} />
+        <Loader size="xl" stroke={strokeColor} />
         {description && <Text align="center">{description}</Text>}
       </Flex>
     </Center>

packages/siera-ui/src/components/connections/ConnectionDetails.tsx

@@ -1,29 +1,54 @@
 import type { ConnectionRecord } from '@aries-framework/core'
 
 import { capitalize } from '@animo/siera-core'
-import { Title, Flex } from '@mantine/core'
-import { Prism } from '@mantine/prism'
+import { createStyles, Group, SimpleGrid, Title } from '@mantine/core'
 import React from 'react'
 
+import { Card } from '../Card'
+import { SmartAvatar } from '../SmartAvatar'
+import { AttributeValue } from '../generic/information/AttributeValue'
+import { RecordCodeBlock } from '../generic/information/RecordCodeBlock'
+
 interface ConnectionDetailsParams {
   connectionRecord: ConnectionRecord
 }
 
+const useStyles = createStyles(() => ({
+  attributeName: {
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+  },
+}))
+
 export const ConnectionDetails = ({ connectionRecord }: ConnectionDetailsParams) => {
+  const { classes } = useStyles()
   return (
-    <Flex direction="column" gap="md">
-      {Object.entries(connectionRecord).map(([key, value]) => (
-        <Flex direction="column" key={key} gap="xs">
-          <Title size="h5">{capitalize(key)}</Title>
-          {value ? (
-            <Prism language="json" noCopy>
-              {JSON.stringify(value, null, 2)}
-            </Prism>
-          ) : (
-            <Prism language="javascript">{value == null ? 'null' : 'undefined'}</Prism>
-          )}
-        </Flex>
-      ))}
-    </Flex>
+    <Card withPadding>
+      <Group spacing="xs" my="xs">
+        <SmartAvatar src={connectionRecord.imageUrl} size={32} radius="xl">
+          {connectionRecord.theirLabel}
+        </SmartAvatar>
+        <Title size="h3">{connectionRecord.theirLabel ?? 'No label'}</Title>
+      </Group>
+
+      <SimpleGrid cols={2} mt="md" mb="xl">
+        {Object.entries(connectionRecord)
+          .filter(([, value]) => typeof value !== 'object')
+          .map(([name, value]) => (
+            <Group key={name} noWrap>
+              <Title size="h6" className={classes.attributeName} w={160}>
+                {capitalize(name)}
+              </Title>
+              <AttributeValue value={value} />
+            </Group>
+          ))}
+      </SimpleGrid>
+
+      <Title size="h3" mb="xs">
+        Record
+      </Title>
+      <RecordCodeBlock record={connectionRecord} />
+    </Card>
   )
 }

packages/siera-ui/src/components/credentials/CredentialDetails.tsx

@@ -1,39 +1,48 @@
 import type { FormattedCredentialData } from '../../contexts/CredentialFormatDataProvider'
 
-import { capitalize } from '@animo/siera-core'
-import { Flex, Title } from '@mantine/core'
-import { Prism } from '@mantine/prism'
+import { formatSchemaName } from '@animo/siera-core'
+import { createStyles, Group, SimpleGrid, Title } from '@mantine/core'
 import React from 'react'
 
-import { InformationCollapse } from '../generic/information/InformationCollapse'
+import { Card } from '../Card'
+import { AttributeValue } from '../generic/information/AttributeValue'
+import { RecordCodeBlock } from '../generic/information/RecordCodeBlock'
 
 interface CredentialDetailsParams {
   credentialFormatted: FormattedCredentialData
 }
+
+const useStyles = createStyles(() => ({
+  attributeName: {
+    whiteSpace: 'nowrap',
+  },
+}))
+
 export const CredentialDetails = ({ credentialFormatted }: CredentialDetailsParams) => {
+  const { classes } = useStyles()
   if (credentialFormatted.offerAttributes == null) {
     return <div>There are no attributes</div>
   }
 
+  const credentialName = formatSchemaName(credentialFormatted.credential?.indy?.schema_id)
+
   return (
-    <Flex direction="column" gap="md">
-      {credentialFormatted.offerAttributes.map(({ name, value }) => (
-        <Flex direction="column" key={name} gap="xs">
-          <Title size="h5">{capitalize(name)}</Title>
-          {value ? (
-            <Prism language="json" noCopy>
-              {JSON.stringify(value, null, 2)}
-            </Prism>
-          ) : (
-            <Prism language="javascript">{value == null ? 'null' : 'undefined'}</Prism>
-          )}
-        </Flex>
-      ))}
-      <InformationCollapse title="Raw Credential">
-        <Prism language="json" noCopy>
-          {JSON.stringify(credentialFormatted, null, 2)}
-        </Prism>
-      </InformationCollapse>
-    </Flex>
+    <Card title={credentialName} titleSize="h2" withPadding>
+      <SimpleGrid cols={2} mt="md" mb="xl">
+        {credentialFormatted.offerAttributes.map(({ name, value }) => (
+          <Group key={name} noWrap>
+            <Title size="h6" className={classes.attributeName} w={120}>
+              {name}
+            </Title>
+            <AttributeValue value={value} />
+          </Group>
+        ))}
+      </SimpleGrid>
+
+      <Title size="h3" mb="xs">
+        Record
+      </Title>
+      <RecordCodeBlock record={credentialFormatted} />
+    </Card>
   )
 }

packages/siera-ui/src/components/generic/buttons/Buttons.tsx

@@ -1,7 +1,7 @@
 import type { ButtonProps } from '@mantine/core'
 
 import { Button, createStyles } from '@mantine/core'
-import { IconChevronLeft, IconPlus } from '@tabler/icons'
+import { IconArrowLeft, IconPlus } from '@tabler/icons'
 import React from 'react'
 
 import { useNavigation } from '../../../hooks/useNavigation'
@@ -32,8 +32,9 @@ const useStyles = createStyles((theme) => ({
 
   smallBackButton: {
     color: theme.colors.textOne[7],
+    fontSize: theme.fontSizes.md,
     '&:hover': {
-      backgroundColor: theme.fn.rgba(theme.colors.textOne[7], 0.1),
+      backgroundColor: 'transparent',
     },
   },
 }))
@@ -72,10 +73,10 @@ export const SmallBackButton = (props: ButtonProps & ClickAble) => {
       px="xs"
       onClick={props.onClick || goBack}
       {...props}
-      leftIcon={<IconChevronLeft />}
+      leftIcon={<IconArrowLeft />}
       className={cx(classes.smallBackButton, props.className)}
     >
-      Back
+      {props.children ?? 'Back'}
     </Button>
   )
 }

packages/siera-ui/src/components/generic/information/AttributeValue.tsx

@@ -0,0 +1,48 @@
+import { createStyles } from '@mantine/core'
+import { Prism } from '@mantine/prism'
+import React from 'react'
+
+const useStyles = createStyles((theme) => ({
+  code: {
+    borderRadius: theme.radius.md,
+    border: `1px solid ${theme.colors.backgroundOne[6]}`,
+    padding: theme.spacing.xs,
+  },
+  root: {
+    width: '100%',
+    maxWidth: '100%',
+    overflow: 'auto',
+  },
+  line: {
+    padding: 0,
+  },
+}))
+
+interface AttributeValueProps {
+  value: unknown
+}
+export const AttributeValue = ({ value }: AttributeValueProps) => {
+  const { classes } = useStyles()
+
+  if (value == null) {
+    return (
+      <Prism
+        language="javascript"
+        copyLabel="Copy value"
+        classNames={{ root: classes.root, code: classes.code, line: classes.line }}
+      >
+        {value == undefined ? 'undefined' : 'null'}
+      </Prism>
+    )
+  }
+
+  return (
+    <Prism
+      language="json"
+      copyLabel="Copy value"
+      classNames={{ root: classes.root, code: classes.code, line: classes.line }}
+    >
+      {JSON.stringify(value, null, 2)}
+    </Prism>
+  )
+}

packages/siera-ui/src/components/generic/information/RecordCodeBlock.tsx

@@ -0,0 +1,30 @@
+import { createStyles } from '@mantine/core'
+import { Prism } from '@mantine/prism'
+import React from 'react'
+
+const useStyles = createStyles((theme) => ({
+  code: {
+    borderRadius: theme.radius.md,
+    border: `1px solid ${theme.colors.backgroundOne[6]}`,
+    padding: theme.spacing.xs,
+  },
+  root: {
+    width: '100%',
+  },
+  line: {
+    padding: 0,
+  },
+}))
+
+interface RecordCodeBlockProps {
+  record: unknown
+}
+
+export const RecordCodeBlock = ({ record }: RecordCodeBlockProps) => {
+  const { classes } = useStyles()
+  return (
+    <Prism language="json" withLineNumbers classNames={{ root: classes.root, code: classes.code, line: classes.line }}>
+      {JSON.stringify(record, null, 2)}
+    </Prism>
+  )
+}