https://github.com/docknetwork/dock-bank-demo

https://github.com/docknetwork/dock-bank-demo

Last synced: about 1 year ago
JSON representation

• Host: GitHub
• URL: https://github.com/docknetwork/dock-bank-demo
• Owner: docknetwork
• License: mit
• Created: 2023-06-26T13:05:30.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2025-03-20T20:09:49.000Z (over 1 year ago)
• Last Synced: 2025-03-29T15:01:38.191Z (about 1 year ago)
• Language: JavaScript
• Homepage: https://bank-demo.dock.io/
• Size: 23.6 MB
• Stars: 5
• Watchers: 5
• Forks: 2
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Truvera Sales Demo

## Overview

The Truvera Sales Demo showcases the integration of KYC, biometric services, and verifiable credentials to demonstrate the capabilities of Truvera's API and wallet. It simulates a customer journey through KYC verification, credential issuance, and verification across various scenarios, emphasizing integration ease and user experience.

## Quotient Wallet

This demo is designed to work with the demo Quotient Credit Union wallet app. Please install it for [iOS](https://apps.apple.com/ca/app/quotient-wallet/id6473549219) or [Android](https://play.google.com/store/apps/details?id=labs.dock.quotient).

### Workflow Steps

1. 🚀 User initiates the KYC process.

2. 🔒 Biometric verification is conducted by scanning a QR code.

3. ✅ Upon successful verification, the user is issued verifiable credentials.

4. 🔍 The user presents the credentials for verification.

## 🎮 Running the Project

### 📓Prerequisites

- Node.js and npm installed.

- Truvera Workspace account with API access.

### 🔑 Configuration

### 🛠️ Installation

1. Clone the repo: `git clone `

2. Install dependencies: `npm install` or `yarn`

### Configuring Truvera Dependencies

Running this project depends on having an ecosystem, organizational profiles, and proof request templates configured properly in Truvera Workspace. You can set these up automatically by using the [setup-certs](./scripts/setup-certs.mjs) command. To run it, follow these steps:

1. Configure the `.env` file by setting the following variables

    * DOCK_API_KEY - sign into the [Truvera Workspace](https://truvera.io/) and generate a test environment key from `Developer -> API Keys`

    * DOCK_API_URL=DOCK_API_URL="https://api-testnet.truvera.io"

2. Run `yarn setup-certs`

3. This will generate a `.env.new` file populated with the environment variables you need to run the project. Copy this over the `.env` file

For reference the details about the ecosystem and some sample JSON request bodies can be found in the [data/ecosystem-requests](./data/ecosystem-requests/) folder.

## 🧪 Testing the Project Workflow

Before starting, remember to get the Truvera Wallet mobile app, with the biometric service plugin enabled, is required. The Truvera Wallet app is available on PlayStore or AppStore.

The demo workflow consists of going through the KYC process filling the formularies and scanning each QR code to get authenticated and test the organizations ecosystems.

It's based on an ecosystem called, "Clarity Partners". The ecosystem contains the following organizations:

**Quotient Credit Union:** Create BankId and Credit Score credentials and Apply for an auto loan.

**Equinet:** Create and revoke Credit Score credential and issue a new one.

**Urbanscape:** Apply for an apartment providing your BankId and Credit Score credentials.

**1. Create a Bank account:** On the main page organizations click on “New Bank Account” from Quotient.

Fill the formulary required data and click on “Submit Application”. This will take you to the first QR code we need to scan with the Truvera Wallet app using the option “Scan”. This QR code will trigger the biometric verification process on the mobile to get the Biometric credential.

Once QR code verification is successful, you will receive 2 credentials in your Truvera Wallet, “Credit Score credential” and “BankId credential”.

**2. Obtain Auto Loan:** On the main page click on “Obtain Auto Loan” from Quotient.

Identify yourself scanning the QR code using your Truvera Wallet app and select the required credentials: Biometric, BankId, and Credit Score.

On verification success will automatically fill the fields “First Name, Last Name, Street Address”, from your BankId credential details, then click on “Submit Application” to continue.

On the success page, you will find a second QR code to scan with the Truvera Wallet to proof your Credit Score from your credential.

**3. Revoke & Reissue Credit Score:** On the main page click on “Visit Site” from Equinet. This page is the representation of a Credit Score credential history. You can revoke the actual Credit Score credential and issue another with one action. Click on “Revoke and Issue New credential” to test the functionality. Note: you need to complete previous steps to own this credential and revoke it.

**4. Apply for an apartment:** On the main page click on “Visit Site” from Urbanscape. Identify yourself scanning the QR code using your Truvera Wallet app and select the required credentials: Biometric, BankId, and Credit Score. 

On verification success will automatically fill the fields “First Name, Last Name, Street Address”, from your BankId credential details, then click on “Submit Application” to continue.

On the success page, you will find a second QR code to scan and proof your Credit Score from your credential.

With this, we finish the workflow from the application where we can have an overview of some usage of the decentralized identity and credentials management.

## Resources

- [Truvera](https://www.truvera.io/)

- [Truvera API Documentation](https://docs.truvera.io/truvera-api)

- [Next.js](https://nextjs.org/)

# Developer Documentation

## Technologies Used 

- Next.js 12.2.3

- Truvera API for decentralized identity and credential management.

- Integration with biometric verification services on the mobile app.

##  📚 Libraries and Dependencies

Our project, "bank-demo," incorporates a variety of technologies for optimal performance, state management, and UI aesthetics:

- **Next.js:** The core framework provides server-side rendering and static site generation.

- **React:** Enables building our UI with a component-based approach.

- **Tailwind CSS:** Allows for efficient styling within JSX, promoting rapid UI development.

- **Axios:** Facilitates promise-based HTTP requests for external API communication.

- **React Hook Form:** Optimizes form handling with minimal re-renders.

- **Lucide-react:** Enhances UI design with customizable vector icons.

- **Zustand:** Simplifies global state management with a minimalistic store.

- **Date-fns:** Offers comprehensive JavaScript date manipulation tools.

- **Radix UI & TanStack React Table:** Provides low-level UI primitives and a lightweight table component for creating accessible, custom designs.

- **PostCSS & Autoprefixer:** Transforms CSS with JS for future-proofing and cross-browser compatibility.

- **ESLint:** Maintains code quality and consistency.

- **Shadcn-ui/ui:** A UI component library from [shadcn-ui/ui on GitHub](https://github.com/shadcn-ui/ui), enhancing our application with a set of pre-designed, customizable UI components for a consistent and modern interface.

Each library and dependency has been carefully selected for its performance, reliability, and the support it offers to our development process.

## 📁 Folder Structure

- `/pages/api` - Server side API integration and communication with Truvera.

- `/pages/org` - Organization pages for testing functionality.

- `/components/ui` - Interface components from ShadCn library.

- `/_credentials` - Credential Schemas used for issuing credentials.

- `/hooks` - Handle QR generation and verification and revoke credentials. 

- `/store` - State management for user information and Qr code Status.

- `/utils` - Utility functions for API and server side communication for credentials and qr code.

Note: Most of the functions are documented inside of each file.

## Main Functions & Methods

### State management 

The Qr code state is handle by `/store/qrCodeStore.js` folder, using the Zustand library, for updating the proof template Id and verification state.

Qr code track this states: 

    proofTemplateId -> Truvera Verification template id

    qrCodeUrl -> Generated url from generateQR() function

    proofID -> Unique Id for each Qr code generated

    isLoading -> Boolean for loading code generation 

    verified -> Is verified by user, default to false

    verificationError -> Boolean state for error handling

    retrievedData -> Credential data retrieved when is verified

Each value also contain setter function.

### Main Functions

Under folder `/utils` are the files that handle all the communication with Truvera API service.

`createRegistry(policyDid, type)` -> Creates Registry for a new credential.

`createCredential(registryId, credential)` -> Create new credential from registryId & credential schema.

`issueRevokableCredential = async (credential, setRevokableCredential)` -> Entire process that carrie all previews functions.

revokeCredential = async (registryId, credentialId) -> Revoke credit score credential with a given registry and credential ids.

    

### Methods

There is 3 important methods under `/hooks` folder wich make the application workflow:

`useQrCode = ({ proofTemplateId })` -> 

The useQrCode hook orchestrates the generation of QR codes associated with proof requests. It leverages state management through qrCodeStore, handling loading states, verification flags, and potential errors. Upon calling handleGenerateQR, it sets up the necessary parameters, initiates QR code creation via handleCreateQr, and updates relevant states accordingly.

`useVerifyProof = ()` -> 

This React hook, useVerifyProof, facilitates verifying proof requests tied to a QR code. It utilizes intervals to periodically check the verification status. Upon successful verification, it updates relevant states, such as user DID, verification status, and retrieved data. In case of errors, it handles retries and sets a verification error flag.

### Main Component

`QrCodeAuthentication`

Hooks methods are use in single component `components/qrcode/qr-auth.jsx` with two responsabilities, generate and verify a Qr code using the previews hooks `useQrCode` & `useVerifyProof`.

The `QrCodeAuthentication` component manages QR code authentication flow. It renders UI elements conditionally based on whether the QR code is verified or not. If not verified, it displays QR code verification UI provided by VerifyQrCode component along with optional descriptive texts before and after. Upon verification, it shows a refresh icon to allow users to retry the authentication process. Additionally, it lists required credentials using CredentialCards component.