Claim Verifiable Credentials flow (#28)

* prepare req details after email verification, parse and build form fields for fill request form * update invite member form and request helpers * refactored org & credentials api, update types and methods * add inputs for fill request body * fix fill request form, to be able to use error messages * add user did to fill request * fix navbar active route * credentials route * context for credentials page, routing between credentials pages * update imports * add claim and fill components for credentials requests page
rarimo · Jan 30, 2024 · f0ffe34 · f0ffe34
1 parent cd50d67
commit f0ffe34
Show file tree

Hide file tree

Showing 61 changed files with 522 additions and 63 deletions.
diff --git a/src/api/index.ts b/src/api/index.ts
diff --git a/src/api/modules/auth/helpers/authorize.ts b/src/api/modules/auth/helpers/authorize.ts
@@ -1,7 +1,8 @@
 import type { ZKProof } from '@rarimo/rarime-connector'
 
-import { api, OrgUserRoles } from '@/api'
+import { api } from '@/api/clients'
 import { AuthTokensGroup, FillRequestDetails, InvitationDetails } from '@/api/modules/auth'
+import { OrgUserRoles } from '@/api/modules/orgs'
 import { ApiServicePaths } from '@/enums/api'
 
 export const authorizeUser = async ({

diff --git a/src/api/modules/index.ts b/src/api/modules/index.ts
@@ -1,2 +1 @@
 export * from './link'
-export * from './orgs'
diff --git a/src/api/modules/link/helpers/proofs.ts b/src/api/modules/link/helpers/proofs.ts
@@ -1,4 +1,5 @@
-import { api, type Proof, type ProofLink } from '@/api'
+import { api } from '@/api/clients'
+import { type Proof, type ProofLink } from '@/api/modules/link'
 import { ApiServicePaths } from '@/enums/api'
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars

diff --git a/src/api/modules/link/hooks/link-proofs.ts b/src/api/modules/link/hooks/link-proofs.ts
@@ -1,6 +1,6 @@
 import { useCallback } from 'react'
 
-import { getProofsByLinkId } from '@/api'
+import { getProofsByLinkId } from '@/api/modules/link'
 import { useLoading } from '@/hooks'
 
 export const useLinkProofs = (id: string) => {

diff --git a/src/api/modules/orgs/helpers/org-groups-requests.ts b/src/api/modules/orgs/helpers/org-groups-requests.ts
@@ -1,14 +1,15 @@
+import { api } from '@/api/clients'
 import {
-  api,
   CredentialRequest,
   OrgGroupCreatedRequest,
   OrgGroupRequest,
+  OrgGroupRequestClaim,
   OrgGroupRequestFilters,
   OrgGroupRequestPublishing,
   OrgGroupRequestQueryParams,
   OrgGroupVCsMetadata,
   OrgUserRoles,
-} from '@/api'
+} from '@/api/modules/orgs'
 import { DUMMY_ORG_GROUP_REQUESTS } from '@/api/modules/orgs/mocks'
 import { getTargetProperty, loadAndParseCredentialSchema } from '@/api/modules/zkp'
 import { ApiServicePaths } from '@/enums/api'
@@ -260,3 +261,19 @@ export const buildCredentialRequest = async (
     signature_proof: true,
   }
 }
+
+export const getOrgGroupRequestClaims = async ({
+  orgId,
+  groupId,
+  reqId,
+}: {
+  orgId: string
+  groupId: string
+  reqId: string
+}): Promise<OrgGroupRequestClaim[]> => {
+  const { data } = await api.get<OrgGroupRequestClaim[]>(
+    `${ApiServicePaths.Orgs}/v1/orgs/${orgId}/groups/${groupId}/requests/${reqId}/publishing`,
+  )
+
+  return data
+}
diff --git a/src/api/modules/orgs/helpers/org-groups.ts b/src/api/modules/orgs/helpers/org-groups.ts
@@ -1,4 +1,10 @@
-import { api, OrgGroup, OrgGroupCreate, OrgGroupQueryParams, OrgGroupRequestStatuses } from '@/api'
+import { api } from '@/api/clients'
+import {
+  OrgGroup,
+  OrgGroupCreate,
+  OrgGroupQueryParams,
+  OrgGroupRequestStatuses,
+} from '@/api/modules/orgs'
 import { ApiServicePaths } from '@/enums/api'
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars

diff --git a/src/api/modules/orgs/helpers/orgs.ts b/src/api/modules/orgs/helpers/orgs.ts
@@ -1,12 +1,12 @@
+import { api } from '@/api/clients'
 import {
-  api,
   type Organization,
   type OrganizationCreate,
   type OrgsRequestQueryParams,
   OrgsStatuses,
   type OrgUser,
   type OrgVerificationCode,
-} from '@/api'
+} from '@/api/modules/orgs'
 import { ApiServicePaths } from '@/enums/api'
 
 export const DUMMY_ORGS: Organization[] = [

diff --git a/src/api/modules/orgs/hooks/org-groups.ts b/src/api/modules/orgs/hooks/org-groups.ts
@@ -1,6 +1,6 @@
 import { useCallback } from 'react'
 
-import { loadOrgGroups } from '@/api'
+import { loadOrgGroups } from '@/api/modules/orgs'
 import { useLoading } from '@/hooks'
 
 /**

diff --git a/src/api/modules/orgs/hooks/org.ts b/src/api/modules/orgs/hooks/org.ts
@@ -1,6 +1,6 @@
 import { useCallback, useMemo } from 'react'
 
-import { loadOrgById, OrgsIncludes } from '@/api'
+import { loadOrgById, OrgsIncludes } from '@/api/modules/orgs'
 import { useLoading, useMetamaskZkpSnapContext } from '@/hooks'
 
 export const useOrg = (id: string) => {

diff --git a/src/api/modules/orgs/mocks.ts b/src/api/modules/orgs/mocks.ts
@@ -4,15 +4,15 @@ import {
   OrgGroupRequest,
   OrgGroupRequestStatuses,
   OrgsStatuses,
-} from '@/api'
+} from '@/api/modules/orgs'
 
 export const DUMMY_ORG_GROUP_REQUESTS: OrgGroupRequest[] = [
   {
     id: '9d6a5063-684e-4ab4-b49a-82cdceadf63f',
     type: 'requests',
     org_id: '3a798290-caf1-496a-a7e5-4db32551b13d',
     group_id: '6c8c1a69-177e-4754-a4e1-d4a7dbf561e8',
-    user_did: 'did:iden3:tP2Yx51N98d7E5M84SGnyzmaGWqRz4oUcHQSGAgyg',
+    user_did: 'did:iden3:readonly:tKRuUKu3feUEktA38mxN2jdEkbgSAHjq8fVqAGmkw',
     credential_requests: [
       {
         credential_schema:
@@ -61,7 +61,7 @@ export const DUMMY_ORG_GROUP_REQUESTS: OrgGroupRequest[] = [
     type: 'requests',
     org_id: '3a798290-caf1-496a-a7e5-4db32551b13d',
     group_id: '6c8c1a69-177e-4754-a4e1-d4a7dbf561e8',
-    user_did: 'did:iden3:tP2Yx51N98d7E5M84SGnyzmaGWqRz4oUcHQSGAgyg',
+    user_did: 'did:iden3:readonly:tKRuUKu3feUEktA38mxN2jdEkbgSAHjq8fVqAGmkw',
     credential_requests: [
       {
         credential_schema:
@@ -110,7 +110,7 @@ export const DUMMY_ORG_GROUP_REQUESTS: OrgGroupRequest[] = [
     type: 'requests',
     org_id: '3a798290-caf1-496a-a7e5-4db32551b13d',
     group_id: '6c8c1a69-177e-4754-a4e1-d4a7dbf561e8',
-    user_did: 'did:iden3:tP2Yx51N98d7E5M84SGnyzmaGWqRz4oUcHQSGAgyg',
+    user_did: 'did:iden3:readonly:tKRuUKu3feUEktA38mxN2jdEkbgSAHjq8fVqAGmkw',
     credential_requests: [
       {
         credential_schema:
@@ -159,7 +159,7 @@ export const DUMMY_ORG_GROUP_REQUESTS: OrgGroupRequest[] = [
     type: 'requests',
     org_id: '3a798290-caf1-496a-a7e5-4db32551b13d',
     group_id: '6c8c1a69-177e-4754-a4e1-d4a7dbf561e8',
-    user_did: 'did:iden3:tP2Yx51N98d7E5M84SGnyzmaGWqRz4oUcHQSGAgyg',
+    user_did: 'did:iden3:readonly:tKRuUKu3feUEktA38mxN2jdEkbgSAHjq8fVqAGmkw',
     credential_requests: [
       {
         credential_schema:
@@ -208,7 +208,7 @@ export const DUMMY_ORG_GROUP_REQUESTS: OrgGroupRequest[] = [
     type: 'requests',
     org_id: '3a798290-caf1-496a-a7e5-4db32551b13d',
     group_id: '6c8c1a69-177e-4754-a4e1-d4a7dbf561e8',
-    user_did: 'did:iden3:tP2Yx51N98d7E5M84SGnyzmaGWqRz4oUcHQSGAgyg',
+    user_did: 'did:iden3:readonly:tKRuUKu3feUEktA38mxN2jdEkbgSAHjq8fVqAGmkw',
     credential_requests: [
       {
         credential_schema:
@@ -257,7 +257,7 @@ export const DUMMY_ORG_GROUP_REQUESTS: OrgGroupRequest[] = [
     type: 'requests',
     org_id: '3a798290-caf1-496a-a7e5-4db32551b13d',
     group_id: '6c8c1a69-177e-4754-a4e1-d4a7dbf561e8',
-    user_did: 'did:iden3:tP2Yx51N98d7E5M84SGnyzmaGWqRz4oUcHQSGAgyg',
+    user_did: 'did:iden3:readonly:tKRuUKu3feUEktA38mxN2jdEkbgSAHjq8fVqAGmkw',
     credential_requests: [
       {
         credential_schema:
@@ -306,7 +306,7 @@ export const DUMMY_ORG_GROUP_REQUESTS: OrgGroupRequest[] = [
     type: 'requests',
     org_id: '3a798290-caf1-496a-a7e5-4db32551b13d',
     group_id: '6c8c1a69-177e-4754-a4e1-d4a7dbf561e8',
-    user_did: 'did:iden3:tP2Yx51N98d7E5M84SGnyzmaGWqRz4oUcHQSGAgyg',
+    user_did: 'did:iden3:readonly:tKRuUKu3feUEktA38mxN2jdEkbgSAHjq8fVqAGmkw',
     credential_requests: [
       {
         credential_schema:
@@ -355,7 +355,7 @@ export const DUMMY_ORG_GROUP_REQUESTS: OrgGroupRequest[] = [
     type: 'requests',
     org_id: '3a798290-caf1-496a-a7e5-4db32551b13d',
     group_id: '6c8c1a69-177e-4754-a4e1-d4a7dbf561e8',
-    user_did: 'did:iden3:tP2Yx51N98d7E5M84SGnyzmaGWqRz4oUcHQSGAgyg',
+    user_did: 'did:iden3:readonly:tKRuUKu3feUEktA38mxN2jdEkbgSAHjq8fVqAGmkw',
     credential_requests: [
       {
         credential_schema:

diff --git a/src/api/modules/orgs/types/org-groups.ts b/src/api/modules/orgs/types/org-groups.ts
@@ -1,4 +1,4 @@
-import { OrgGroupIncludes } from '@/api'
+import { OrgGroupIncludes } from '@/api/modules/orgs'
 
 export type OrgGroupMetadata = {
   name: string

diff --git a/src/api/modules/orgs/types/orgs.ts b/src/api/modules/orgs/types/orgs.ts
@@ -1,4 +1,4 @@
-import type { OrgsIncludes, OrgsRequestFilters, OrgsStatuses } from '@/api'
+import type { OrgsIncludes, OrgsRequestFilters, OrgsStatuses } from '@/api/modules/orgs'
 
 export type OrgMetadataLink = {
   title: string

diff --git a/src/api/modules/orgs/types/requests.ts b/src/api/modules/orgs/types/requests.ts
@@ -5,7 +5,7 @@ import {
   OrgGroupRequestIncludes,
   OrgGroupRequestPublishingStatuses,
   OrgGroupRequestStatuses,
-} from '@/api'
+} from '@/api/modules/orgs'
 import { CredentialSubject } from '@/api/modules/zkp'
 
 export type CredentialRequest = {
@@ -47,8 +47,8 @@ export type OrgGroupCreatedRequest = {
 }
 
 export type OrgGroupRequestFiltersMap = {
-  [OrgGroupRequestFilters.UserDid]: string
-  [OrgGroupRequestFilters.Status]: OrgGroupRequestStatuses[]
+  [OrgGroupRequestFilters.UserDid]?: string
+  [OrgGroupRequestFilters.Status]?: OrgGroupRequestStatuses[]
 }
 
 export type OrgGroupRequestQueryParams = {
@@ -66,3 +66,15 @@ export type OrgGroupRequestPublishing = {
   schema_url: string
   status: OrgGroupRequestPublishingStatuses
 }
+
+export type OrgGroupRequestClaim = {
+  id: string
+  type: 'claims'
+  claim_id: string
+  request_id: string
+  schema_url: string
+  status: string
+  created_at: string
+  updated_at: string
+  organization?: Organization
+}
diff --git a/src/api/modules/zkp/helpers/builders.ts b/src/api/modules/zkp/helpers/builders.ts
@@ -1,6 +1,6 @@
 import { CreateProofRequestParams } from '@rarimo/rarime-connector/dist/types'
 
-import { OrgUserRoles } from '@/api'
+import { OrgUserRoles } from '@/api/modules/orgs'
 import { QueryOperators } from '@/api/modules/zkp'
 
 export const buildAuthorizeRequest = ({

diff --git a/src/api/modules/zkp/helpers/credentials.ts b/src/api/modules/zkp/helpers/credentials.ts
@@ -2,7 +2,7 @@ import { fetcher } from '@distributedlab/fetcher'
 import type { SaveCredentialsRequestParams } from '@rarimo/rarime-connector'
 import omit from 'lodash/omit'
 
-import { api } from '@/api'
+import { api } from '@/api/clients'
 import {
   CredentialSubject,
   JsonLdSchema,

diff --git a/src/common/AppNavbar.tsx b/src/common/AppNavbar.tsx
@@ -20,7 +20,8 @@ const NavbarLink = ({ children, to }: NavbarLinkProps) => {
 
   const isRouteActive = useMemo(() => {
     const locationRoot = location.pathname.split('/')[1]
-    return to.includes(locationRoot)
+
+    return to.split('/').includes(locationRoot)
   }, [location.pathname, to])
 
   return (
@@ -55,6 +56,10 @@ const AppNavbar = () => {
     () => [
       { route: RoutePaths.Profiles, iconComponent: <UiIcon name={Icons.Wallet} size={5} /> },
       { route: RoutePaths.Orgs, iconComponent: <UiIcon componentName={'work'} size={5} /> },
+      {
+        route: RoutePaths.Credentials,
+        iconComponent: <UiIcon componentName={'layers'} size={6} />,
+      },
       { route: RoutePaths.UiKit, iconComponent: <UiIcon componentName={'info'} size={5} /> },
     ],
     [],

diff --git a/...illRequest/components/FillRequestForm.tsx → src/common/FillRequestForm.tsx b/...illRequest/components/FillRequestForm.tsx → src/common/FillRequestForm.tsx
diff --git a/src/common/VCGroupOverviewCard.tsx b/src/common/VCGroupOverviewCard.tsx
@@ -1,7 +1,7 @@
 import { Avatar, Stack, StackProps, Typography } from '@mui/material'
 import { useMemo } from 'react'
 
-import { Organization } from '@/api'
+import { Organization } from '@/api/modules/orgs'
 
 interface Props extends StackProps {
   title: string

diff --git a/src/common/index.ts b/src/common/index.ts
@@ -1,4 +1,5 @@
 export { default as AppNavbar } from './AppNavbar'
+export { default as FillRequestForm } from './FillRequestForm'
 export { default as PageListFilters } from './PageListFilters'
 export { default as PageTitles } from './PageTitles'
 export { default as ProfileMenu } from './ProfileMenu'

diff --git a/src/enums/icons.ts b/src/enums/icons.ts
@@ -11,9 +11,11 @@ import { default as ErrorOutlineIcon } from '@mui/icons-material/ErrorOutline'
 import { default as InfoIcon } from '@mui/icons-material/Info'
 import { default as InfoOutlinedIcon } from '@mui/icons-material/InfoOutlined'
 import { default as KeyboardArrowDownOutlinedIcon } from '@mui/icons-material/KeyboardArrowDownOutlined'
+import { default as Layers } from '@mui/icons-material/Layers'
 import { default as LightModeOutlined } from '@mui/icons-material/LightModeOutlined'
 import { default as Link } from '@mui/icons-material/Link'
 import { default as Logout } from '@mui/icons-material/Logout'
+import { default as Notifications } from '@mui/icons-material/Notifications'
 import { default as OpenInNew } from '@mui/icons-material/OpenInNew'
 import { default as QrCode } from '@mui/icons-material/QrCode'
 import { default as Search } from '@mui/icons-material/Search'
@@ -56,4 +58,6 @@ export const ICON_COMPONENTS = {
   verified: Verified,
   warningAmber: WarningAmberIcon,
   work: Work,
+  layers: Layers,
+  notifications: Notifications,
 }
diff --git a/src/enums/routes.ts b/src/enums/routes.ts
@@ -23,4 +23,8 @@ export enum RoutePaths {
   AcceptInvitation = '/i',
   AcceptInvitationEmailVerification = '/i/verify-email',
   AcceptInvitationFillRequest = '/i/fill-request',
+
+  Credentials = '/credentials',
+  CredentialsList = '/credentials/list',
+  CredentialsRequests = '/credentials/requests',
 }
diff --git a/src/hooks/auth.ts b/src/hooks/auth.ts
@@ -1,8 +1,8 @@
 import { PROVIDERS } from '@distributedlab/w3p'
 import { useCallback, useMemo } from 'react'
 
-import { OrgUserRoles } from '@/api'
 import { authorizeUser } from '@/api/modules/auth'
+import { OrgUserRoles } from '@/api/modules/orgs'
 import { buildAuthorizeRequest, getClaimOffer } from '@/api/modules/zkp'
 import { useMetamaskZkpSnapContext } from '@/hooks/metamask-zkp-snap'
 import { useWeb3Context } from '@/hooks/web3'

diff --git a/src/pages/AcceptInvitation/pages/EmailVerification.tsx b/src/pages/AcceptInvitation/pages/EmailVerification.tsx
@@ -1,8 +1,8 @@
 import { useCallback, useMemo } from 'react'
 import { Navigate, useSearchParams } from 'react-router-dom'
 
-import { acceptInvitation, OrgUserRoles } from '@/api'
 import { buildFillRequestDetailsSearchParams, getInvitationDetails } from '@/api/modules/auth'
+import { acceptInvitation, OrgUserRoles } from '@/api/modules/orgs'
 import { RoutePaths } from '@/enums'
 import { sleep } from '@/helpers'
 import { useAuth, useLoading, useMetamaskZkpSnapContext } from '@/hooks'

diff --git a/src/pages/AcceptInvitation/pages/FillRequest/components/index.ts b/src/pages/AcceptInvitation/pages/FillRequest/components/index.ts
diff --git a/src/pages/AcceptInvitation/pages/FillRequest/index.tsx b/src/pages/AcceptInvitation/pages/FillRequest/index.tsx
@@ -1,19 +1,18 @@
 import { useCallback, useMemo } from 'react'
 import { useNavigate, useSearchParams } from 'react-router-dom'
 
-import { loadOrgGroupRequestById, OrgGroupRequest } from '@/api'
 import { parseFillRequestDetailsSearchParams } from '@/api/modules/auth'
+import { loadOrgGroupRequestById, OrgGroupRequest } from '@/api/modules/orgs'
 import {
   getTargetProperty,
   loadAndParseCredentialSchema,
   ParsedCredentialSchemaProperty,
 } from '@/api/modules/zkp'
+import { FillRequestForm } from '@/common'
 import { BusEvents, RoutePaths } from '@/enums'
 import { bus } from '@/helpers'
 import { useLoading } from '@/hooks'
 
-import { FillRequestForm } from './components'
-
 export default function FillRequest() {
   const navigate = useNavigate()
   const [searchParams] = useSearchParams()