diff --git a/documentation/docs/mock-apps/common/http-headers.md b/documentation/docs/mock-apps/common/http-headers.md
new file mode 100644
index 00000000..ee7f5f9f
--- /dev/null
+++ b/documentation/docs/mock-apps/common/http-headers.md
@@ -0,0 +1,21 @@
+---
+sidebar_position: 57
+title: HTTP Headers
+---
+
+import Disclaimer from '../.././\_disclaimer.mdx';
+
+
+
+## Description
+
+The `Http Headers` object contains configuration details for the HTTP headers that is used to make requests. The headers content follow the [HTTP headers specification](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers).
+
+## Example
+
+```json
+{
+ "Authorization": "Bearer test",
+ "Content-Type": "application/json"
+}
+```
diff --git a/documentation/docs/mock-apps/common/payload-type.md b/documentation/docs/mock-apps/common/payload-type.md
new file mode 100644
index 00000000..eb1e2204
--- /dev/null
+++ b/documentation/docs/mock-apps/common/payload-type.md
@@ -0,0 +1,56 @@
+---
+sidebar_position: 58
+title: Payload Type
+---
+
+import Disclaimer from '../../\_disclaimer.mdx';
+
+
+
+## Description
+
+The `type` property of the `props` object in a [component](/docs/mock-apps/configuration/component-config) configuration defines the kind of data that component is responsible for handling.
+
+## Usage
+
+The `type` property of the `props` object is required for component receiving data such as [import-button](/docs/mock-apps/components/import-button), [qr-code-scanner-dialog-button](/docs/mock-apps/components/qr-code-scanner-dialog-button), etc. The component will use the `type` to determine how to handle the data it receives.
+
+## Types
+
+### JSON
+
+When a component has the `JSON` type, it will suppose receive any JSON object as its payload and will not transform it in any way.
+
+### VerifiableCredential
+
+When a component has the `VerifiableCredential` type, it will suppose receive a [Verifiable Credential](/docs/mock-apps/common/verifiable-credentials) as its payload and will verify the credential before using it.
+
+## Examples
+
+```json
+{
+ "name": "ImportButton",
+ "type": "EntryData",
+ "props": {
+ "label": "Import JSON",
+ "type": "JSON",
+ "style": {}
+ }
+}
+```
+
+In this example, the `ImportButton` component is of type `EntryData` and expects any JSON object as its payload.
+
+```json
+{
+ "name": "ImportButton",
+ "type": "EntryData",
+ "props": {
+ "label": "Import JSON",
+ "type": "VerifiableCredential",
+ "style": {}
+ }
+}
+```
+
+In this example, the `ImportButton` component is of type `EntryData` and expects a Verifiable Credential as its payload.
diff --git a/documentation/docs/mock-apps/components/import-button.md b/documentation/docs/mock-apps/components/import-button.md
index 7d4ae25c..4a296c58 100644
--- a/documentation/docs/mock-apps/components/import-button.md
+++ b/documentation/docs/mock-apps/components/import-button.md
@@ -6,11 +6,12 @@ title: Import Button
import Disclaimer from '../../\_disclaimer.mdx';
+
## Description
The ImportButton component is responsible for rendering a button that allows the user to import data. The component will return the data that is imported by the user.
-## Example
+## Example app-config
```json
{
@@ -23,6 +24,30 @@ The ImportButton component is responsible for rendering a button that allows the
}
```
+## Diagram
+
+```mermaid
+sequenceDiagram
+ participant U as User
+ participant MA as Mock App
+ participant V as VCKit
+
+ U->>MA: Import file
+ alt is verifiable credential
+ MA->>V: Verify VC
+ V-->>MA: Return verified result
+ alt is verified
+ alt is enveloped verifiable credential
+ MA->>MA: Decode enveloped VC
+ else is embedded verifiable credential
+ MA->>U: Return data
+ end
+ end
+ else is JSON
+ MA->>U: Return data
+ end
+```
+
## Definitions
| Property | Required | Description | Type |
@@ -33,17 +58,130 @@ The ImportButton component is responsible for rendering a button that allows the
### Props
-| Property | Required | Description | Type |
-| --------- | -------- | ----------------------------------------------------------------------------------------------------- | ------ |
-| label | Yes | The label for the import button | String |
-| style | No | The style for the component | Object |
-| type | No | The type of data (should be 'VerifiableCredential' and 'JSON'), the default is 'VerifiableCredential' | String |
-| vcOptions | No | The options for the VC data processing | Object |
+| Property | Required | Description | Type |
+| --------- | -------- | ----------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- |
+| label | Yes | The label for the import button | String |
+| style | No | The style for the component | [Style](/docs/mock-apps/common/style) |
+| type | No | The type of data (should be 'VerifiableCredential' and 'JSON'), the default is 'VerifiableCredential' | [PayloadType](/docs/mock-apps/common/payload-type) |
+| vcOptions | No | The options for the VC data processing | [VC component configuration](/docs/mock-apps/configuration/vc-component-config) |
+
+## Data structure
+
+The file extension should be JSON and the data structure can be any JSON object. The component will return data that will be an array of objects, each object has key as the file name and value as the data that is imported.
+In case the data is a verifiable credential (VC) or contains a VC, the component will use the vcOptions to verify and decode the VC. The decoded enveloped VC will be set as the same level as the original VC.
+
+### Example data structure
+
+- When import a file that contains a JSON object:
+
+ ```json
+ // imported JSON file
+ {
+ "name": "Alice",
+ "age": 25
+ }
+ ```
+
+ The return data will be:
+
+ ```json
+ // return data
+ [
+ {
+ "data.json": {
+ "name": "Alice",
+ "age": 25
+ }
+ }
+ ]
+ ```
+
+- When import a file that contains a VC and the vcOptions is set as below:
+
+ ```json
+ // vcOptions
+ {
+ "credentialPath": "/",
+ "vckitAPIUrl": "https://vckit-api.com",
+ "headers": { "Authorization": "Bearer test" }
+ }
+ ```
+
+ ```json
+ // imported VC file
+ {
+ "@context": ["https://www.w3.org/ns/credentials/v2"],
+ "type": ["VerifiableCredential"],
+ "credentialSubject": {
+ "id": "did:example:123",
+ "name": "Alice"
+ }
+ }
+ ```
+
+ The return data will be:
+
+ ```json
+ // return data
+ [
+ {
+ "VC1.json": {
+ "@context": ["https://www.w3.org/ns/credentials/v2"],
+ "type": ["VerifiableCredential"],
+ "credentialSubject": {
+ "id": "did:example:123",
+ "name": "Alice"
+ }
+ }
+ }
+ ]
+ ```
+
+ The imported data will be verified and return the original VC.
+
+- When import a file that contains a enveloped VC and the vcOptions is set as below:
+
+ ```json
+ // vcOptions
+ {
+ "credentialPath": "/",
+ "vckitAPIUrl": "https://vckit-api.com",
+ "headers": { "Authorization": "Bearer test123" }
+ }
+ ```
+
+ ```json
+ // imported VC file
+ {
+ "@context": ["https://www.w3.org/ns/credentials/v2"],
+ "id": "data:application/vc-ld+jwt,jwt",
+ "type": "EnvelopedVerifiableCredential"
+ }
+ ```
+
+ The return data will be:
-#### vcOptions
+ ```json
+ // return data
+ [
+ {
+ "VC1.json": {
+ "vc": {
+ "@context": ["https://www.w3.org/ns/credentials/v2"],
+ "id": "data:application/vc-ld+jwt,jwt",
+ "type": "EnvelopedVerifiableCredential"
+ },
+ "decodedEnvelopedVC": {
+ "@context": ["https://www.w3.org/ns/credentials/v2"],
+ "type": ["VerifiableCredential"],
+ "credentialSubject": {
+ "id": "did:example:123",
+ "name": "Alice"
+ }
+ }
+ }
+ }
+ ]
+ ```
-| Property | Required | Description | Type |
-| -------------- | -------- | ---------------------------------------------------------------------------- | ------ |
-| credentialPath | Yes | The path for the credential data | String |
-| vckitAPIUrl | No | The URL for the vckit API | String |
-| headers | No | The headers for the vckit API, example: \{ Authorization: "Bearer test123"\} | Object |
+ Based on the above example, the imported data will be verified and transformed to an object that contains the original VC and the decoded VC.
diff --git a/documentation/docs/mock-apps/components/qr-code-scanner-dialog-button.md b/documentation/docs/mock-apps/components/qr-code-scanner-dialog-button.md
index 42bea432..f054f223 100644
--- a/documentation/docs/mock-apps/components/qr-code-scanner-dialog-button.md
+++ b/documentation/docs/mock-apps/components/qr-code-scanner-dialog-button.md
@@ -11,7 +11,7 @@ import Disclaimer from '../../\_disclaimer.mdx';
The QRCodeScannerDialogButton component is responsible for rendering a button that allows the user to scan a QR code. The component will return the data that is scanned by the user.
-## Example
+## Example app-config
```json
{
@@ -23,6 +23,31 @@ The QRCodeScannerDialogButton component is responsible for rendering a button th
}
```
+## Diagram
+
+```mermaid
+sequenceDiagram
+ participant U as User
+ participant MA as Mock App
+ participant V as VCKit
+
+ U->>MA: Scan QRCode
+ MA->>MA: Fetch data from QRCode URL
+ alt is verifiable credential
+ MA->>V: Verify VC
+ V-->>MA: Return verified result
+ alt is verified
+ alt is enveloped verifiable credential
+ MA->>MA: Decode enveloped VC
+ else is embedded verifiable credential
+ MA->>U: Return data
+ end
+ end
+ else is JSON
+ MA->>U: Return data
+ end
+```
+
## Definitions
| Property | Required | Description | Type |
@@ -33,16 +58,129 @@ The QRCodeScannerDialogButton component is responsible for rendering a button th
### Props
-| Property | Required | Description | Type |
-| --------- | -------- | ----------------------------------------------------------------------------------------------------- | ------ |
-| style | No | The style for the component | Object |
-| type | No | The type of data (should be 'VerifiableCredential' and 'JSON'), the default is 'VerifiableCredential' | String |
-| vcOptions | No | The options for the VC data processing | Object |
+| Property | Required | Description | Type |
+| --------- | -------- | ----------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- |
+| style | No | The style for the component | [Style](/docs/mock-apps/common/style) |
+| type | No | The type of data (should be 'VerifiableCredential' and 'JSON'), the default is 'VerifiableCredential' | [PayloadType](/docs/mock-apps/common/payload-type) |
+| vcOptions | No | The options for the VC data processing | [VC component configuration](/docs/mock-apps/configuration/vc-component-config) |
+
+## Data Structure
+
+The data payload of the QR code URL will should be any JSON object. The component will fetch the data from the URL and return the data to the user. The returned data will be an array with one object that has the key as the URL of the QR code and the value as the data that is fetched from the URL.
+In the case of a verifiable credential, the data will be verified based on the `vcOptions` provided in the component. When the data is enveloped VC, the component will decode the enveloped VC and return as the same level path as the original VC.
+
+### Example data structure
+
+- When import a file that contains a JSON object:
+
+ ```json
+ // imported JSON file
+ {
+ "name": "Alice",
+ "age": 25
+ }
+ ```
+
+ The return data will be:
+
+ ```json
+ // return data
+ [
+ {
+ "data.json": {
+ "name": "Alice",
+ "age": 25
+ }
+ }
+ ]
+ ```
+
+- When import a file that contains a VC and the vcOptions is set as below:
+
+ ```json
+ // vcOptions
+ {
+ "credentialPath": "/",
+ "vckitAPIUrl": "https://vckit-api.com",
+ "headers": { "Authorization": "Bearer test" }
+ }
+ ```
+
+ ```json
+ // imported VC file
+ {
+ "@context": ["https://www.w3.org/ns/credentials/v2"],
+ "type": ["VerifiableCredential"],
+ "credentialSubject": {
+ "id": "did:example:123",
+ "name": "Alice"
+ }
+ }
+ ```
+
+ The return data will be:
+
+ ```json
+ // return data
+ [
+ {
+ "VC1.json": {
+ "@context": ["https://www.w3.org/ns/credentials/v2"],
+ "type": ["VerifiableCredential"],
+ "credentialSubject": {
+ "id": "did:example:123",
+ "name": "Alice"
+ }
+ }
+ }
+ ]
+ ```
+
+ The imported data will be verified and return the original VC.
+
+- When import a file that contains a enveloped VC and the vcOptions is set as below:
+
+ ```json
+ // vcOptions
+ {
+ "credentialPath": "/",
+ "vckitAPIUrl": "https://vckit-api.com",
+ "headers": { "Authorization": "Bearer test123" }
+ }
+ ```
+
+ ```json
+ // imported VC file
+ {
+ "@context": ["https://www.w3.org/ns/credentials/v2"],
+ "id": "data:application/vc-ld+jwt,jwt",
+ "type": "EnvelopedVerifiableCredential"
+ }
+ ```
+
+ The return data will be:
-#### vcOptions
+ ```json
+ // return data
+ [
+ {
+ "VC1.json": {
+ "vc": {
+ "@context": ["https://www.w3.org/ns/credentials/v2"],
+ "id": "data:application/vc-ld+jwt,jwt",
+ "type": "EnvelopedVerifiableCredential"
+ },
+ "decodedEnvelopedVC": {
+ "@context": ["https://www.w3.org/ns/credentials/v2"],
+ "type": ["VerifiableCredential"],
+ "credentialSubject": {
+ "id": "did:example:123",
+ "name": "Alice"
+ }
+ }
+ }
+ }
+ ]
+ ```
-| Property | Required | Description | Type |
-| -------------- | -------- | ---------------------------------------------------------------------------- | ------ |
-| credentialPath | Yes | The path for the credential data that is fetched from the QR code URL | String |
-| vckitAPIUrl | No | The URL for the vckit API | String |
-| headers | No | The headers for the vckit API, example: \{ Authorization: "Bearer test123"\} | Object |
+ Based on the above example, the imported data will be verified and transformed to an object that contains the original VC and the decoded VC.
diff --git a/documentation/docs/mock-apps/components/render-check-list.md b/documentation/docs/mock-apps/components/render-check-list.md
index 3d4212d4..a1c04ed9 100644
--- a/documentation/docs/mock-apps/components/render-check-list.md
+++ b/documentation/docs/mock-apps/components/render-check-list.md
@@ -47,11 +47,11 @@ The RenderCheckList component is responsible for rendering a list of items with
### Props
-| Property | Required | Description | Type |
-| ----------------- | -------- | ---------------------------------------------------------- | ------------------------------------------ |String |
-| nestedComponents | Yes | An array of components to be rendered with the loaded data | [Component](/docs/mock-apps/components/)[] |
-| checkBoxLabel | Yes | The label for the checkbox list | String |
-| style | No | The style for the component | Object |
+| Property | Required | Description | Type |
+| ---------------- | -------- | ---------------------------------------------------------- | ------------------------------------------ |
+| nestedComponents | Yes | An array of components to be rendered with the loaded data | [Component](/docs/mock-apps/components/)[] |
+| checkBoxLabel | Yes | The label for the checkbox list | String |
+| style | No | The style for the component | Object |
## Response Data
diff --git a/documentation/docs/mock-apps/configuration/vc-component-config.md b/documentation/docs/mock-apps/configuration/vc-component-config.md
new file mode 100644
index 00000000..a5c5518f
--- /dev/null
+++ b/documentation/docs/mock-apps/configuration/vc-component-config.md
@@ -0,0 +1,42 @@
+---
+sidebar_position: 59
+title: VC Component Configuration
+---
+
+import Disclaimer from '../.././\_disclaimer.mdx';
+
+
+
+## Description
+
+The VC Component Configuration object contains the configuration details for the components to use VC services such as verifying a VC, issuing a VC, etc inside the component.
+
+## Definitions
+
+| Property | Required | Description | Type |
+| -------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------- |
+| credentialPath | Yes | The path for the credential in the data. In some case, the credential can be the whole data or just be contained in the data | String |
+| vckitAPIUrl | Yes | The URL for the vckit API | String |
+| headers | No | The headers for the vckit API, example: \{ Authorization: "Bearer test123"\} | [HTTP Headers](/docs/mock-apps/common/http-headers) |
+
+## Example
+
+```json
+{
+ "credentialPath": "/",
+ "vckitAPIUrl": "https://vckit-api.com",
+ "headers": { "Authorization": "Bearer test" }
+}
+```
+
+This example shows the credential path is the root of the data, it means the whole data is the credential.
+
+```json
+{
+ "credentialPath": "/credential",
+ "vckitAPIUrl": "https://vckit-api.com",
+ "headers": { "Authorization": "Bearer test" }
+}
+```
+
+This example shows the credential path is `/credential`, it means the credential is inside the data at the path `/credential`.