{"id":26233645,"url":"https://github.com/docknetwork/dock-bank-demo","last_synced_at":"2025-04-22T12:11:09.050Z","repository":{"id":217912483,"uuid":"658770106","full_name":"docknetwork/dock-bank-demo","owner":"docknetwork","description":null,"archived":false,"fork":false,"pushed_at":"2025-03-20T20:09:49.000Z","size":24730,"stargazers_count":5,"open_issues_count":2,"forks_count":2,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-03-29T15:01:38.191Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://bank-demo.dock.io/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/docknetwork.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-06-26T13:05:30.000Z","updated_at":"2025-03-20T20:09:52.000Z","dependencies_parsed_at":"2024-01-18T19:22:16.281Z","dependency_job_id":"48c7ea2d-512d-4bd5-a51f-7c6ae5784b0f","html_url":"https://github.com/docknetwork/dock-bank-demo","commit_stats":null,"previous_names":["docknetwork/dock-bank-demo"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/docknetwork%2Fdock-bank-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/docknetwork%2Fdock-bank-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/docknetwork%2Fdock-bank-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/docknetwork%2Fdock-bank-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/docknetwork","download_url":"https://codeload.github.com/docknetwork/dock-bank-demo/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250237832,"owners_count":21397401,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-03-13T01:16:57.593Z","updated_at":"2025-04-22T12:11:09.001Z","avatar_url":"https://github.com/docknetwork.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Truvera Sales Demo\n\n## Overview\n\nThe 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.\n\n## Quotient Wallet\n\nThis 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).\n\n### Workflow Steps\n\n1. 🚀 User initiates the KYC process.\n2. 🔒 Biometric verification is conducted by scanning a QR code.\n3. ✅ Upon successful verification, the user is issued verifiable credentials.\n4. 🔍 The user presents the credentials for verification.\n\n\n## 🎮 Running the Project\n\n### 📓Prerequisites\n\n- Node.js and npm installed.\n- Truvera Workspace account with API access.\n\n### 🔑 Configuration\n\n### 🛠️ Installation\n\n1. Clone the repo: `git clone \u003crepo_url\u003e`\n2. Install dependencies: `npm install` or `yarn`\n\n### Configuring Truvera Dependencies\n\nRunning 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:\n\n1. Configure the `.env` file by setting the following variables\n    * DOCK_API_KEY - sign into the [Truvera Workspace](https://truvera.io/) and generate a test environment key from `Developer -\u003e API Keys`\n    * DOCK_API_URL=DOCK_API_URL=\"https://api-testnet.truvera.io\"\n2. Run `yarn setup-certs`\n3. This will generate a `.env.new` file populated with the environment variables you need to run the project. Copy this over the `.env` file\n\nFor reference the details about the ecosystem and some sample JSON request bodies can be found in the [data/ecosystem-requests](./data/ecosystem-requests/) folder.\n\n## 🧪 Testing the Project Workflow\n\nBefore 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.\n\nThe 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.\n\nIt's based on an ecosystem called, \"Clarity Partners\". The ecosystem contains the following organizations:\n\n**Quotient Credit Union:** Create BankId and Credit Score credentials and Apply for an auto loan.\n\n**Equinet:** Create and revoke Credit Score credential and issue a new one.\n\n**Urbanscape:** Apply for an apartment providing your BankId and Credit Score credentials.\n\n**1. Create a Bank account:** On the main page organizations click on “New Bank Account” from Quotient.\n\nFill 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.\n\nOnce QR code verification is successful, you will receive 2 credentials in your Truvera Wallet, “Credit Score credential” and “BankId credential”.\n\n**2. Obtain Auto Loan:** On the main page click on “Obtain Auto Loan” from Quotient.\n\nIdentify yourself scanning the QR code using your Truvera Wallet app and select the required credentials: Biometric, BankId, and Credit Score.\n\nOn 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.\n\nOn the success page, you will find a second QR code to scan with the Truvera Wallet to proof your Credit Score from your credential.\n\n**3. Revoke \u0026 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.\n\n**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. \n\nOn 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.\n\nOn the success page, you will find a second QR code to scan and proof your Credit Score from your credential.\n\nWith this, we finish the workflow from the application where we can have an overview of some usage of the decentralized identity and credentials management.\n\n## Resources\n\n- [Truvera](https://www.truvera.io/)\n- [Truvera API Documentation](https://docs.truvera.io/truvera-api)\n- [Next.js](https://nextjs.org/)\n\n# Developer Documentation\n\n## Technologies Used \n\n- Next.js 12.2.3\n- Truvera API for decentralized identity and credential management.\n- Integration with biometric verification services on the mobile app.\n\n##  📚 Libraries and Dependencies\n\nOur project, \"bank-demo,\" incorporates a variety of technologies for optimal performance, state management, and UI aesthetics:\n\n- **Next.js:** The core framework provides server-side rendering and static site generation.\n- **React:** Enables building our UI with a component-based approach.\n- **Tailwind CSS:** Allows for efficient styling within JSX, promoting rapid UI development.\n- **Axios:** Facilitates promise-based HTTP requests for external API communication.\n- **React Hook Form:** Optimizes form handling with minimal re-renders.\n- **Lucide-react:** Enhances UI design with customizable vector icons.\n- **Zustand:** Simplifies global state management with a minimalistic store.\n- **Date-fns:** Offers comprehensive JavaScript date manipulation tools.\n- **Radix UI \u0026 TanStack React Table:** Provides low-level UI primitives and a lightweight table component for creating accessible, custom designs.\n- **PostCSS \u0026 Autoprefixer:** Transforms CSS with JS for future-proofing and cross-browser compatibility.\n- **ESLint:** Maintains code quality and consistency.\n- **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.\n\nEach library and dependency has been carefully selected for its performance, reliability, and the support it offers to our development process.\n\n## 📁 Folder Structure\n\n- `/pages/api` - Server side API integration and communication with Truvera.\n- `/pages/org` - Organization pages for testing functionality.\n- `/components/ui` - Interface components from ShadCn library.\n- `/_credentials` - Credential Schemas used for issuing credentials.\n- `/hooks` - Handle QR generation and verification and revoke credentials. \n- `/store` - State management for user information and Qr code Status.\n- `/utils` - Utility functions for API and server side communication for credentials and qr code.\n\nNote: Most of the functions are documented inside of each file.\n\n## Main Functions \u0026 Methods\n\n### State management \n\nThe Qr code state is handle by `/store/qrCodeStore.js` folder, using the Zustand library, for updating the proof template Id and verification state.\nQr code track this states: \n\n    proofTemplateId -\u003e Truvera Verification template id\n\n    qrCodeUrl -\u003e Generated url from generateQR() function\n\n    proofID -\u003e Unique Id for each Qr code generated\n\n    isLoading -\u003e Boolean for loading code generation \n\n    verified -\u003e Is verified by user, default to false\n\n    verificationError -\u003e Boolean state for error handling\n\n    retrievedData -\u003e Credential data retrieved when is verified\n\nEach value also contain setter function.\n\n### Main Functions\n\nUnder folder `/utils` are the files that handle all the communication with Truvera API service.\n\n`createRegistry(policyDid, type)` -\u003e Creates Registry for a new credential.\n\n`createCredential(registryId, credential)` -\u003e Create new credential from registryId \u0026 credential schema.\n\n`issueRevokableCredential = async (credential, setRevokableCredential)` -\u003e Entire process that carrie all previews functions.\nrevokeCredential = async (registryId, credentialId) -\u003e Revoke credit score credential with a given registry and credential ids.\n    \n\n### Methods\n\nThere is 3 important methods under `/hooks` folder wich make the application workflow:\n\n`useQrCode = ({ proofTemplateId })` -\u003e \nThe 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.\n\n`useVerifyProof = ()` -\u003e \nThis 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.\n\n### Main Component\n\n`QrCodeAuthentication`\n\nHooks 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` \u0026 `useVerifyProof`.\n\nThe `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.\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdocknetwork%2Fdock-bank-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdocknetwork%2Fdock-bank-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdocknetwork%2Fdock-bank-demo/lists"}