DEMO-ACME-FRUTAS-FRONT

This project is an example of a single-page application (SPA) developed with Angular. Its primary purpose is to demonstrate two independent flows related to the issuance and exchange of verifiable credentials using standards such as OpenID4VCI and SIOPv2. The application displays two configurable QR codes that initiate these flows and can be scanned using the KayWallet application.

General Description

The frontend consists of two main components:

1. Melon University (melon-university):
   This component generates a QR code that initiates the flow for issuing a verifiable credential using OpenID4VCI. The QR code uses the value configured in the environment file under the key melon_openid4vci_deeplink.

2. Mango Corp (mango-corp):
   This component generates a QR code that initiates the flow for exchanging verifiable credentials using SIOPv2. The QR code uses the value configured in the environment file under the key openid_url. This value can contain the placeholder <current_uri>, which will be dynamically replaced with the current frontend URL when running in the browser.

Both components use a shared subcomponent called SectionQrComponent, which is responsible for generating and displaying the QR codes.

KayWallet Application

The QR codes generated by this application are designed to be scanned using KayWallet, an application that enables the management of self-sovereign digital identities and verifiable credentials. You can download KayWallet and learn more at https://kaytrust.id.

Related Repository

This project has a complementary backend repository called demo-acme-frutas-back, which implements the APIs necessary to support the issuance and exchange flows of verifiable credentials. You can find the backend repository at demo-acme-frutas-back.

QR Code Configuration

Melon University QR Code

• Purpose: Initiates the flow for issuing verifiable credentials.
• Configuration:
  In the environment.ts or environment.development.ts file, configure the key melon_openid4vci_deeplink with the deeplink pointing to the credential offer endpoint.
  Example:

  melon_openid4vci_deeplink: 'openid-credential-offer://?credential_offer_uri=https://example.com/issuer/credential-offer',

Mango Corp QR Code

• Purpose: Initiates the flow for exchanging verifiable credentials.
• Configuration:
  In the environment.ts or environment.development.ts file, configure the key openid_url with the deeplink pointing to the credential exchange endpoint. This value can include <current_uri>, which will be replaced by the current frontend URL.
  Example:

  openid_url: 'openid://?state=12345&redirect_uri=<current_uri>%2Foauth2%2Fcb%2FvpToken&response_mode=query&response_type=vp_token&client_id=<current_uri>%2Foauth&scope=openid',

Prerequisites

• Node.js (version 16 or higher).
• Yarn as the package manager.

Installation

1. Clone this repository:

   git clone https://github.com/KayTrust/demo-acme-frutas-front.git
   cd demo-acme-frutas-front

2. Install the dependencies:

   yarn install

Configuration

1. Open the file src/environments/environment.ts or src/environments/environment.development.ts and configure the values for melon_openid4vci_deeplink and openid_url according to your needs.

2. If you are running the project in a local environment, ensure that environment.development.ts has the base URL of the local backend configured. For example:

   api_host: 'http://localhost:3000',

Execution

Development Server

To start the development server, run:

yarn start

This will start the server at http://localhost:4200/. The application will automatically reload when changes are made to the source files.

Production Build

To generate an optimized production build, run:

yarn build

The generated files will be in the dist/demo-acme-frutas directory.

Usage

1. Access the main page of the application (http://localhost:4200/ or the URL where it is deployed).
2. You will see two main sections:
   • Melon University: Contains a QR code that initiates the flow for issuing verifiable credentials.
   • Mango Corp: Contains a QR code that initiates the flow for exchanging verifiable credentials.
3. Scan the corresponding QR code with the KayWallet application to start the flow.

Project Structure

• src/app/pages/melon-university: Contains the MelonUniversityComponent that generates the QR code for the issuance flow.
• src/app/pages/mango-corp: Contains the MangoCorpComponent that generates the QR code for the exchange flow.
• src/app/components/section-qr: Reusable subcomponent that generates and displays the QR codes.
• src/environments: Contains the environment configuration files.

Customization

• Styles: Global styles are located in src/styles.css. This project uses TailwindCSS and DaisyUI for styling.
• Themes: You can customize themes in the tailwind.config.js file.

Technologies Used

• Framework: Angular 18.2.0
• State Management: Angular Signals.
• Styles: TailwindCSS and DaisyUI.
• QR Code Generation: qrcode library.

Contributions

This project is open source. If you want to contribute, follow these steps:

1. Fork the repository.
2. Create a branch for your feature or bug fix:

   git checkout -b feature/new-feature

3. Make your changes and commit them:

   git commit -m "Add new feature"

4. Push your changes to your fork:

   git push origin feature/new-feature

5. Create a Pull Request in the main repository.

License

This project is licensed under the MIT License. See the LICENSE file for more details.