[#115] Add ui for making a claim

Changelog: feature

Author: markharding

apps/polycentric/app/(tabs)/verifications.tsx

@@ -0,0 +1 @@
+export { default } from '@/src/features/verifications/VerificationsScreen';

apps/polycentric/app/(tabs)/verify.tsx

@@ -0,0 +1 @@
+export { default } from '@/src/features/verifications/VerificationsCreateClaimScreen';

apps/polycentric/app/verifications/claim.tsx

@@ -0,0 +1 @@
+export { default } from '@/src/features/verifications/VerificationsScreen';

apps/polycentric/app/verifications/index.tsx

@@ -25,7 +25,14 @@ export const IconsMap = {
   addOutline: defineIcon(Ionicons, 'add-circle-outline'),
   arrowBack: defineIcon(Ionicons, 'arrow-back'),
   ban: defineIcon(Ionicons, 'ban'),
+  bookOutline: defineIcon(MaterialCommunityIcons, 'book-open-outline'),
+  briefcaseOutline: defineIcon(MaterialCommunityIcons, 'briefcase-outline'),
   camera: defineIcon(Ionicons, 'camera-outline'),
+  cardOutline: defineIcon(
+    MaterialCommunityIcons,
+    'card-account-details-outline',
+  ),
+  certificateOutline: defineIcon(MaterialCommunityIcons, 'certificate-outline'),
   checkmark: defineIcon(Ionicons, 'checkmark'),
   checkmarkCircle: defineIcon(Ionicons, 'checkmark-circle'),
   checkmarkSharp: defineIcon(Ionicons, 'checkmark-sharp'),
@@ -38,6 +45,7 @@ export const IconsMap = {
   dotsVertical: defineIcon(MaterialCommunityIcons, 'dots-vertical'),
   emoji: defineIcon(MaterialIcons, 'emoji-emotions'),
   flag: defineIcon(Ionicons, 'flag-outline'),
+  form: defineIcon(MaterialCommunityIcons, 'form-select'),
   home: defineIcon(Ionicons, 'home-outline'),
   image: defineIcon(Ionicons, 'image-outline'),
   images: defineIcon(Ionicons, 'images-outline'),

apps/polycentric/src/common/components/Icon.tsx

@@ -36,6 +36,13 @@ export function VerticalNav({ style }: VerticalNavProps) {
         icon={<Icon name="notification" size={24} />}
         href="/notifications"
       />
+
+      <NavItem
+        label="Verifications"
+        icon={<Icon name="verify" size={24} />}
+        href="/verifications"
+      />
+
       {identity?.identityKey && (
         <NavItem
           label="Profile"

apps/polycentric/src/common/components/layout/nav/VerticalNav.tsx

@@ -22,6 +22,7 @@ import {
   ViewStyle,
 } from 'react-native';
 import { Text } from './Text';
+import Icon, { IconName } from '../Icon';
 
 type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'destructive';
 
@@ -38,8 +39,8 @@ interface ButtonProps extends Omit<PressableProps, 'style'> {
   title: string;
   variant?: ButtonVariant;
   size?: ButtonSize;
-  style?: StyleProp<ViewStyle>;
-  icon?: IconRenderFn;
+  style?: PressableProps['style'];
+  icon?: IconRenderFn | IconName;
   fullWidth?: boolean;
   disabled?: boolean;
 }
@@ -109,7 +110,7 @@ export function Button({
         onHoverOut={isDisabled ? undefined : onHoverOut}
         disabled={isDisabled}
         hitSlop={8}
-        style={[
+        style={(state) => [
           styles.base,
           fullWidth && Atoms.w_full,
           !fullWidth && styles.fitContent,
@@ -120,16 +121,17 @@ export function Button({
           },
           surfaceStyle,
           hoverStyle,
-          style,
+          typeof style === 'function' ? style(state) : style,
         ]}
         {...props}
       >
         <View style={[styles.content]}>
           {icon &&
-            icon({
-              size: sizeConfig.iconSize,
-              color: iconColor,
-            })}
+            (typeof icon === 'function' ? (
+              icon({ size: sizeConfig.iconSize, color: iconColor })
+            ) : (
+              <Icon name={icon} size={sizeConfig.iconSize} color={iconColor} />
+            ))}
           {!iconOnly && (
             <Text
               fontSize={size}

apps/polycentric/src/common/components/primitives/Button.tsx

@@ -0,0 +1,104 @@
+import { Button, Text, TextInput } from '@/src/common/components';
+import { Atoms, useTheme } from '@/src/common/theme';
+import { useMemo, useState } from 'react';
+import { View } from 'react-native';
+import { ClaimType, FormField } from './utils/forms';
+import useCreateClaim from './hooks/useCreateClaim';
+import { formToSchema } from './utils/schemas';
+
+// Renders the input form for a claim type, collects values, and publishes the
+// claim. `onSubmitted` fires once the claim is created. Remount (via a `key`
+// on the claim type) to reset between types.
+export function ClaimForm({
+  claimType,
+  onSubmitted,
+}: {
+  claimType: ClaimType;
+  onSubmitted: () => void;
+}) {
+  const { theme } = useTheme();
+  const { submit, isPending } = useCreateClaim();
+  const [values, setValues] = useState<Record<string, string>>({});
+  const [error, setError] = useState<string | null>(null);
+
+  const isValid = useMemo(
+    () =>
+      claimType.fields.every(
+        (f) => !f.required || (values[f.key]?.trim().length ?? 0) > 0,
+      ),
+    [claimType, values],
+  );
+
+  const onSubmit = async () => {
+    if (!isValid || isPending) return;
+    setError(null);
+    try {
+      await submit({ schema: formToSchema(claimType), values });
+      onSubmitted();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    }
+  };
+
+  return (
+    <View style={Atoms.gap_md}>
+      {claimType.fields.map((field) => (
+        <FieldInput
+          key={field.key}
+          field={field}
+          value={values[field.key] ?? ''}
+          onChange={(text) =>
+            setValues((prev) => ({ ...prev, [field.key]: text }))
+          }
+        />
+      ))}
+
+      {error && (
+        <Text variant="body" style={{ color: theme.palette.negative_600 }}>
+          {error}
+        </Text>
+      )}
+
+      <Button
+        title={isPending ? 'Submitting…' : 'Continue'}
+        variant="primary"
+        onPress={onSubmit}
+        disabled={!isValid || isPending}
+      />
+    </View>
+  );
+}
+
+function FieldInput({
+  field,
+  value,
+  onChange,
+}: {
+  field: FormField;
+  value: string;
+  onChange: (text: string) => void;
+}) {
+  const { theme } = useTheme();
+  const multiline = field.kind === 'multiline';
+  const isDate = field.kind === 'date';
+
+  return (
+    <View style={Atoms.gap_xs}>
+      <Text
+        variant="small"
+        style={theme.atoms.text_neutral_medium}
+        fontWeight="semibold"
+      >
+        {field.required ? `${field.label} *` : field.label}
+      </Text>
+      <TextInput
+        value={value}
+        onChangeText={onChange}
+        placeholder={isDate ? 'YYYY-MM-DD' : field.label}
+        autoCapitalize={isDate ? 'none' : 'sentences'}
+        multiline={multiline}
+        numberOfLines={multiline ? 4 : undefined}
+      />
+    </View>
+  );
+}

apps/polycentric/src/features/verifications/ClaimForm.tsx

@@ -0,0 +1,66 @@
+import { Text } from '@/src/common/components';
+import { Atoms, useTheme } from '@/src/common/theme';
+import { useMemo, useState } from 'react';
+import { View } from 'react-native';
+import { ClaimForm } from './ClaimForm';
+import { CLAIM_TYPES, ClaimType } from './utils/forms';
+import { PlatformPicker } from './PlatformPicker';
+import { SelectChip } from './SelectChip';
+
+export function CreateClaim({ onSubmitted }: { onSubmitted?: () => void }) {
+  const { theme } = useTheme();
+  const [selectedClaimType, setSelectedClaimType] =
+    useState<ClaimType['name']>();
+
+  const selected = useMemo(
+    () => CLAIM_TYPES.find((s) => s.name === selectedClaimType),
+    [selectedClaimType],
+  );
+
+  const onSelectClaimType = (name: ClaimType['name']) =>
+    setSelectedClaimType(name === selectedClaimType ? undefined : name);
+
+  const handleSubmitted = () => {
+    setSelectedClaimType(undefined);
+    onSubmitted?.();
+  };
+
+  return (
+    <View style={Atoms.gap_2xl}>
+      {/* Claim-type selector. */}
+      <View style={Atoms.gap_sm}>
+        <Text
+          variant="small"
+          style={theme.atoms.text_neutral_medium}
+          fontWeight="semibold"
+        >
+          Claim type
+        </Text>
+        <View style={[Atoms.flex_row, Atoms.gap_sm, Atoms.flex_wrap]}>
+          {CLAIM_TYPES.map((s) => (
+            <SelectChip
+              key={s.name}
+              title={s.name}
+              icon={s.icon}
+              color={s.color}
+              selected={selected?.name === s.name}
+              onPress={() => onSelectClaimType(s.name)}
+            />
+          ))}
+        </View>
+      </View>
+
+      {/* Platform claims pick a platform and link an account. */}
+      {selected?.platform && <PlatformPicker />}
+
+      {/* Everything else is a field form. Keyed so state resets per type. */}
+      {selected && !selected.platform && (
+        <ClaimForm
+          key={selected.name}
+          claimType={selected}
+          onSubmitted={handleSubmitted}
+        />
+      )}
+    </View>
+  );
+}