WIP UI

src/screens/Profile/Vouches/Create/index.tsx

@@ -1,9 +1,21 @@
-import {Trans} from '@lingui/macro'
+import React from 'react'
+import {View} from 'react-native'
+import {Trans, msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+import {ZodError} from 'zod'
 
 import * as Layout from '#/components/Layout'
-import {Text} from '#/components/Typography'
+import {atoms as a, useGutters} from '#/alf'
+import {Button, ButtonText, ButtonIcon} from '#/components/Button'
+import * as TextField from '#/components/forms/TextField'
+import {useCreateVouch} from '#/state/queries/vouches/useCreateVouch'
+import {Loader} from '#/components/Loader'
+import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus'
+import {Admonition} from '#/components/Admonition'
 
 export function Screen() {
+  const baseGutters = useGutters(['base'])
+
   return (
     <Layout.Screen>
       <Layout.Header.Outer>
@@ -17,8 +29,77 @@ export function Screen() {
       </Layout.Header.Outer>
 
       <Layout.Content>
-        <Text>Create</Text>
+        <View style={[baseGutters]}>
+          <Form />
+        </View>
       </Layout.Content>
     </Layout.Screen>
   )
 }
+
+function Form() {
+  const {_} = useLingui()
+  const [subject, setSubject] = React.useState('')
+  const [relationship, setRelationship] = React.useState('')
+  const [errors, setErrors] = React.useState<string[]>([])
+
+  const {mutateAsync: createVouch, isPending} = useCreateVouch()
+
+  const onSubmit = async () => {
+    setErrors([])
+    try {
+      await createVouch({subject, relationship})
+    } catch (e: any) {
+      if (e instanceof ZodError) {
+        setErrors(e.errors.map(err => err.message))
+      } else {
+        setErrors([e.message])
+      }
+    }
+  }
+
+  return (
+    <View style={[a.gap_md]}>
+      <View style={[]}>
+        <TextField.LabelText>
+          <Trans>User DID</Trans>
+        </TextField.LabelText>
+        <TextField.Input label={_(msg`Subject`)} onChangeText={setSubject} />
+      </View>
+      <View style={[]}>
+        <TextField.LabelText>
+          <Trans>User DID</Trans>
+        </TextField.LabelText>
+        <TextField.Input
+          label={_(msg`Relationship`)}
+          onChangeText={setRelationship}
+        />
+      </View>
+
+      <View style={[a.align_end, a.pt_sm]}>
+        <Button
+          label={_(msg`Create Vouch`)}
+          size="large"
+          color="primary"
+          variant="solid"
+          onPress={onSubmit}>
+          <ButtonText>
+            <Trans>Create</Trans>
+          </ButtonText>
+          <ButtonIcon icon={isPending ? Loader : Plus} />
+        </Button>
+      </View>
+
+      {!!errors.length && (
+        <View style={[a.gap_sm]}>
+          {errors.map((error, i) => (
+            <Admonition key={i} type="error">
+              {' '}
+              {error}{' '}
+            </Admonition>
+          ))}
+        </View>
+      )}
+    </View>
+  )
+}

src/screens/Profile/Vouches/Issued/index.tsx

@@ -1,9 +1,22 @@
-import {Trans} from '@lingui/macro'
+import React from 'react'
+import {View} from 'react-native'
+import {Trans, msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+import {ZodError} from 'zod'
 
 import * as Layout from '#/components/Layout'
+import {atoms as a, useGutters} from '#/alf'
+import {Button, ButtonText, ButtonIcon} from '#/components/Button'
+import * as TextField from '#/components/forms/TextField'
+import {useCreateVouch} from '#/state/queries/vouches/useCreateVouch'
+import {Loader} from '#/components/Loader'
+import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus'
+import {Admonition} from '#/components/Admonition'
+import {useVouchesIssued} from '#/state/queries/vouches/useVouchesIssued'
 import {Text} from '#/components/Typography'
 
 export function Screen() {
+  const baseGutters = useGutters(['base'])
   return (
     <Layout.Screen>
       <Layout.Header.Outer>
@@ -17,8 +30,38 @@ export function Screen() {
       </Layout.Header.Outer>
 
       <Layout.Content>
-        <Text>Create</Text>
+        <View style={[baseGutters]}>
+          <Inner />
+        </View>
       </Layout.Content>
     </Layout.Screen>
   )
 }
+
+export function Inner() {
+  const {data: vouches, isLoading, error} = useVouchesIssued()
+
+  return (
+    <View style={[]}>
+      <View style={[a.gap_sm]}>
+        {isLoading ? (
+          <Loader />
+        ) : error || !vouches ? (
+          <></>
+        ) : vouches.length ? (
+          <>
+            {vouches.map(v => (
+              <View>
+                <Text>{v.record.subject}</Text>
+              </View>
+            ))}
+          </>
+        ) : (
+          <>
+            <Text>No vouches</Text>
+          </>
+        )}
+      </View>
+    </View>
+  )
+}

src/screens/Profile/Vouches/index.tsx

@@ -1,9 +1,26 @@
-import {Trans} from '@lingui/macro'
+import {View, ScrollView} from 'react-native'
+import {Trans, msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
 
+import {Loader} from '#/components/Loader'
 import * as Layout from '#/components/Layout'
 import {Text} from '#/components/Typography'
+import {atoms as a, useTheme, useGutters} from '#/alf'
+import {Link} from '#/components/Link'
+import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron'
+import {useSession} from '#/state/session'
+import {useVouchesIssued} from '#/state/queries/vouches/useVouchesIssued'
+import {Button, ButtonText, ButtonIcon} from '#/components/Button'
+import {UserAvatar} from '#/view/com/util/UserAvatar'
+import {Divider} from '#/components/Divider'
 
 export function Screen() {
+  const t = useTheme()
+  const {_} = useLingui()
+  const {currentAccount} = useSession()
+  const baseGutters = useGutters(['base'])
+  const compactGutters = useGutters(['compact'])
+
   return (
     <Layout.Screen>
       <Layout.Header.Outer>
@@ -17,8 +34,111 @@ export function Screen() {
       </Layout.Header.Outer>
 
       <Layout.Content>
-        <Text>Vouches</Text>
+        <View style={[a.gap_lg]}>
+          <View style={[baseGutters, a.gap_lg]}>
+            <Link
+              label={_(msg`Create a new vouch`)}
+              to={{
+                screen: 'ProfileVouchesCreate',
+                params: {name: currentAccount!.handle},
+              }}>
+              {({hovered}) => (
+                <View
+                  style={[
+                    a.flex_1,
+                    a.flex_row,
+                    a.align_center,
+                    a.rounded_md,
+                    compactGutters,
+                    t.atoms.bg_contrast_25,
+                    hovered && [t.atoms.bg_contrast_50],
+                  ]}>
+                  <View style={[a.flex_1]}>
+                    <Text style={[a.text_lg, a.font_heavy]}>Create vouch</Text>
+                  </View>
+
+                  <ChevronRight />
+                </View>
+              )}
+            </Link>
+          </View>
+        </View>
+
+        <VouchesIssued />
       </Layout.Content>
     </Layout.Screen>
   )
 }
+
+export function VouchesIssued() {
+  const t = useTheme()
+  const {_} = useLingui()
+  const {currentAccount} = useSession()
+  const {data: vouches, isLoading, error} = useVouchesIssued()
+  const baseGutters = useGutters([0, 'base'])
+
+  return (
+    <View style={[]}>
+      <View style={[a.flex_row, a.align_center, a.justify_between, baseGutters]}>
+        <Text style={[a.text_md, a.font_bold, t.atoms.text_contrast_medium]}>
+          <Trans>Vouches Issued</Trans>
+        </Text>
+
+        <Link
+          label={_(msg`View All`)}
+          to={{
+            screen: 'ProfileVouchesIssued',
+            params: {name: currentAccount!.handle},
+          }}
+          size="small"
+          variant="ghost"
+          color="secondary"
+          shape="round"
+          style={[a.flex_row, a.align_center, a.justify_center]}>
+          <ButtonIcon icon={ChevronRight} />
+        </Link>
+      </View>
+
+      <View style={[a.gap_sm]}>
+        {isLoading ? (
+          <Loader />
+        ) : error || !vouches ? (
+          <>
+            {error ? (
+              <Text>{error.toString()}</Text>
+            ) : (
+              <Text>
+                <Trans>Somthing went wrong</Trans>
+              </Text>
+            )}
+          </>
+        ) : vouches.length ? (
+          <ScrollView horizontal style={[baseGutters]}>
+            {vouches.map(v => (
+              <View style={[a.p_sm, a.rounded_md, a.flex_1, a.gap_sm, t.atoms.bg_contrast_25, {
+                maxWidth: 300,
+              }]}>
+                <View style={[a.flex_row, a.align_start, a.gap_sm]}>
+                  <UserAvatar size={32} avatar={v.subject?.avatar} />
+                  <View style={[a.gap_2xs]}>
+                    <Text style={[a.text_md, a.font_bold, a.leading_tight]}>@{v.subject?.handle}</Text>
+                    <Text style={[a.leading_tight, t.atoms.text_contrast_medium]}>{v.record.relationship}</Text>
+                  </View>
+                </View>
+                <Divider />
+                <View style={[a.flex_row, a.align_start, a.gap_xl]}>
+                  <Text style={[a.font_bold, a.leading_tight]}>{v.accept ? 'Accepted' : 'Pending'}</Text>
+                  <Text style={[a.leading_tight]}>{v.record.createdAt}</Text>
+                </View>
+              </View>
+            ))}
+          </ScrollView>
+        ) : (
+          <>
+            <Text>No vouches</Text>
+          </>
+        )}
+      </View>
+    </View>
+  )
+}

src/state/queries/vouches/useCreateVouch.ts

@@ -0,0 +1,31 @@
+import {AppBskyGraphVouch} from '@atproto/api'
+import {useMutation} from '@tanstack/react-query'
+
+import {useSession, useAgent} from '#/state/session'
+import {useVouchRecordSchema} from '#/state/queries/vouches/util'
+
+export type CreateVouchProps = {
+  subject: string
+  relationship: AppBskyGraphVouch.Record['relationship']
+}
+
+export function useCreateVouch() {
+  const {currentAccount} = useSession()
+  const agent = useAgent()
+  const vouchRecordSchema = useVouchRecordSchema()
+
+  return useMutation({
+    mutationFn: async (props: CreateVouchProps) => {
+      const record: AppBskyGraphVouch.Record = {
+        subject: props.subject,
+        relationship: props.relationship,
+        createdAt: new Date().toISOString(),
+      }
+      vouchRecordSchema.parse(record)
+      return agent.app.bsky.graph.vouch.create(
+        { repo: currentAccount!.did },
+        record,
+      )
+    }
+  })
+}

src/state/queries/vouches/useVouchesIssued.ts

@@ -0,0 +1,21 @@
+import {useQuery} from '@tanstack/react-query'
+
+import {useSession, useAgent} from '#/state/session'
+
+export const vouchesIssuedQueryKey = ['vouches-issued']
+
+export function useVouchesIssued() {
+  const {currentAccount} = useSession()
+  const agent = useAgent()
+
+  return useQuery({
+    queryKey: vouchesIssuedQueryKey,
+    queryFn: async () => {
+      const {data} = await agent.app.bsky.graph.getVouchesGiven({
+        actor: currentAccount!.did,
+        includeUnaccepted: true,
+      })
+      return data.vouches
+    }
+  })
+}

src/state/queries/vouches/util.ts

@@ -0,0 +1,16 @@
+import {useMemo} from 'react'
+import zod from 'zod'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+export function useVouchRecordSchema() {
+  const {_} = useLingui()
+
+  return useMemo(() => {
+    return zod.object({
+      subject: zod.string().startsWith('did:', { message: _(msg`Must be a valid DID`) }),
+      relationship: zod.enum(['verifiedBy', 'employeeOf']),
+      createdAt: zod.string().datetime(),
+    })
+  }, [_])
+}