Vite

.env.template

@@ -1,23 +1,23 @@
 HOST='0.0.0.0'
 PORT=3000
-REACT_APP_WS_URL=ws://wallet-backend-server:8002
-REACT_APP_WALLET_BACKEND_URL=http://wallet-backend-server:8002
-REACT_APP_LOGIN_WITH_PASSWORD=false
-REACT_APP_FIREBASE_ENABLED=false
-REACT_APP_FIREBASE_VAPIDKEY=<Your_Vapid_Key>
-REACT_APP_FIREBASE_API_KEY=<Your_Firebase_API_Key>
-REACT_APP_FIREBASE_AUTH_DOMAIN=<Your_Firebase_Auth_Domain>
-REACT_APP_FIREBASE_PROJECT_ID=<Your_Firebase_Project_ID>
-REACT_APP_FIREBASE_STORAGE_BUCKET=<Your_Firebase_Storage_Bucket>
-REACT_APP_FIREBASE_MESSAGING_SENDER_ID=<Your_Firebase_Messaging_Sender_ID>
-REACT_APP_FIREBASE_APP_ID=<Your_Firebase_App_ID>
-REACT_APP_FIREBASE_MEASUREMENT_ID=<Your_Firebase_Measurement_ID>
-REACT_APP_DID_KEY_VERSION=jwk_jcs-pub
-REACT_APP_VERSION=$npm_package_version
+VITE_WS_URL=ws://wallet-backend-server:8002
+VITE_WALLET_BACKEND_URL=http://wallet-backend-server:8002
+VITE_LOGIN_WITH_PASSWORD=false
+VITE_FIREBASE_ENABLED=false
+VITE_FIREBASE_VAPIDKEY=<Your_Vapid_Key>
+VITE_FIREBASE_API_KEY=<Your_Firebase_API_Key>
+VITE_FIREBASE_AUTH_DOMAIN=<Your_Firebase_Auth_Domain>
+VITE_FIREBASE_PROJECT_ID=<Your_Firebase_Project_ID>
+VITE_FIREBASE_STORAGE_BUCKET=<Your_Firebase_Storage_Bucket>
+VITE_FIREBASE_MESSAGING_SENDER_ID=<Your_Firebase_Messaging_Sender_ID>
+VITE_FIREBASE_APP_ID=<Your_Firebase_App_ID>
+VITE_FIREBASE_MEASUREMENT_ID=<Your_Firebase_Measurement_ID>
+VITE_DID_KEY_VERSION=jwk_jcs-pub
+VITE_VERSION=$npm_package_version
 GENERATE_SOURCEMAP=false
-REACT_APP_DISPLAY_CONSOLE=true
-REACT_APP_WEBAUTHN_RPID=localhost
-REACT_APP_OPENID4VCI_REDIRECT_URI=http://localhost:3000/
-REACT_APP_OPENID4VP_SAN_DNS_CHECK=false
-REACT_APP_OPENID4VP_SAN_DNS_CHECK_SSL_CERTS=false
-REACT_APP_VALIDATE_CREDENTIALS_WITH_TRUST_ANCHORS=true
+VITE_DISPLAY_CONSOLE=true
+VITE_WEBAUTHN_RPID=localhost
+VITE_OPENID4VCI_REDIRECT_URI=http://localhost:3000/
+VITE_OPENID4VP_SAN_DNS_CHECK=false
+VITE_OPENID4VP_SAN_DNS_CHECK_SSL_CERTS=false
+VITE_VALIDATE_CREDENTIALS_WITH_TRUST_ANCHORS=true

README.md

@@ -2,8 +2,8 @@
 
 Welcome to wwWallet Frontend repository! This application is a user-friendly web wallet that empowers users to manage their digital credentials effortlessly. With a seamless interface and powerful features, users can view their credentials, obtain new ones from issuers, present credentials to verifiers, and access their presentation history.
 
-
 ## Table of Contents
+
 - ✨ [Features](#features)
 - 🔍 [Prerequisites](#prerequisites)
 - 📦 [Installation](#installation)
@@ -30,61 +30,67 @@ Our Web Wallet provides a range of features tailored to enhance the credential m
 - Node.js
 - npm/yarn
 
-
 ## 📦Installation
 
- - Clone the repository:
+- Clone the repository:
 
- - **Option 1: Using HTTPS**
-     ```bash
-     git clone https://github.com/your-username/wallet-frontend.git
-     ```
+- **Option 1: Using HTTPS**
 
- - **Option 2: Using SSH**
-     ```bash
-     git clone git@github.com:your-username/wallet-frontend.git
-     ```
+  ```bash
+  git clone https://github.com/your-username/wallet-frontend.git
+  ```
 
- - Navigate to the project folder:
+- **Option 2: Using SSH**
 
+  ```bash
+  git clone git@github.com:your-username/wallet-frontend.git
+  ```
+
+- Navigate to the project folder:
+
+  ```bash
+  cd wallet-frontend
+  ```
+
+- Configure Environment Variables:
+  The project uses environment variables to manage different configurations. A `.env` file is used to keep all these variables. There is a `.env.template` file in the repository. Copy it and rename it to `.env`.
+
+  ```bash
+  cp .env.template .env
+  ```
+
+  Now, open the .env file and fill in the variables according to your own configuration. Below is an explanation for each variable:
+
+  - HOST: The IP address where your app will be running (default is '0.0.0.0').
+  - PORT: The port on which your app will run (default is 3000).
+  - VAPIDKEY: Your Vapid key (public key for cloud messaging firebase) for push notifications.
+  - VITE_WS_URL: The URL of the websocket service.
+  - VITE_WALLET_BACKEND_URL: The URL of your backend service.
+  - VITE_LOGIN_WITH_PASSWORD: A Boolean value which show/hide the classic login/signup.
+  - VITE_FIREBASE_API_KEY: Your API key for Firebase.
+  - VITE_FIREBASE_AUTH_DOMAIN: Your Firebase authentication domain.
+  - VITE_FIREBASE_PROJECT_ID: Your Firebase project ID.
+  - VITE_FIREBASE_STORAGE_BUCKET: Your Firebase storage bucket.
+  - VITE_FIREBASE_MESSAGING_SENDER_ID: Your Firebase Messaging Sender ID.
+  - VITE_FIREBASE_APP_ID: Your Firebase App ID.
+  - VITE_FIREBASE_MEASUREMENT_ID: Your Firebase Measurement ID.
+  - VITE_DISPLAY_CONSOLE: Handle console logs (`true` or `false`). If left empty, it will be handled as `true`.
+  - VITE_INACTIVE_LOGOUT_SECONDS: Session will time out after approximately this time in seconds since the last user activity (default is 15 minutes).
+  - VITE_WEBAUTHN_RPID: WebAuthn relying party ID (when running locally, set to `localhost`). This must match the `config.webauthn.rp.id` setting in `wallet-backend-server`.
+  - VITE_OPENID4VP_SAN_DNS_CHECK: Verify at the OID4VP incoming authorization request that the SAN contained in the certificate is the same with the response_uri
+
+4. Install dependencies:
    ```bash
-   cd wallet-frontend
-   ```
- - Configure Environment Variables:
-The project uses environment variables to manage different configurations. A `.env` file is used to keep all these variables. There is a `.env.template` file in the repository. Copy it and rename it to `.env`.
-   ```bash
-   cp .env.template .env
+   yarn install
    ```
-   Now, open the .env file and fill in the variables according to your own configuration. Below is an explanation for each variable:
-
-	 - HOST: The IP address where your app will be running (default is '0.0.0.0').
-	 - PORT: The port on which your app will run (default is 3000).
-	 - VAPIDKEY: Your Vapid key (public key for cloud messaging firebase) for push notifications.
-	 - REACT_APP_WS_URL: The URL of the websocket service.
-	 - REACT_APP_WALLET_BACKEND_URL: The URL of your backend service.
-	 - REACT_APP_LOGIN_WITH_PASSWORD: A Boolean value which show/hide the classic login/signup.
-	 - REACT_APP_FIREBASE_API_KEY: Your API key for Firebase.
-	 - REACT_APP_FIREBASE_AUTH_DOMAIN: Your Firebase authentication domain.
-	 - REACT_APP_FIREBASE_PROJECT_ID: Your Firebase project ID.
-	 - REACT_APP_FIREBASE_STORAGE_BUCKET: Your Firebase storage bucket.
-	 - REACT_APP_FIREBASE_MESSAGING_SENDER_ID: Your Firebase Messaging Sender ID.
-	 - REACT_APP_FIREBASE_APP_ID: Your Firebase App ID.
-	 - REACT_APP_FIREBASE_MEASUREMENT_ID: Your Firebase Measurement ID.
-	 - REACT_APP_DISPLAY_CONSOLE: Handle console logs (`true` or `false`). If left empty, it will be handled as `true`.
-	 - REACT_APP_INACTIVE_LOGOUT_SECONDS: Session will time out after approximately this time in seconds since the last user activity (default is 15 minutes).
-	 - REACT_APP_WEBAUTHN_RPID: WebAuthn relying party ID (when running locally, set to `localhost`). This must match the `config.webauthn.rp.id` setting in `wallet-backend-server`.
-   - REACT_APP_OPENID4VP_SAN_DNS_CHECK: Verify at the OID4VP incoming authorization request that the SAN contained in the certificate is the same with the response_uri
-4. Install dependencies:
-	```bash
-	yarn install
-	```
 5. Start the development server:
 
    ```bash
    yarn start
    ```
 
 ## 🚀Usage
+
 Once the development server is running, you can access the app by visiting http://localhost:3000 in your web browser. The app provides various pages and components that you can interact with. Explore the features and enjoy using the Wallet Frontend!
 
 ## 🔐PRF Compatibility
@@ -274,20 +280,22 @@ The PRF (Pseudo Random Function) extension in WebAuthn enables the evaluation of
 
 <sup>[1]</sup> **Note on Android with FIDO Security Keys over USB:** It's essential to have **Google Play Services (GPS) version 24.08.12 or later**.
 
-***Notes:**
+**\*Notes:**
+
 - In this table, we use the term "FIDO Security Key" to refer to compatible security keys. It's important to understand that any security key should work with the hmac-secret extension, provided it supports this feature.
-For a detailed list of security key models that support hmac-secret, you can refer to the [FIDO MDS Explorer](https://opotonniee.github.io/fido-mds-explorer/), where hmac-secret support is listed under metadataStatement > authenticatorGetInfo > extensions.*
+  For a detailed list of security key models that support hmac-secret, you can refer to the [FIDO MDS Explorer](https://opotonniee.github.io/fido-mds-explorer/), where hmac-secret support is listed under metadataStatement > authenticatorGetInfo > extensions.\*
 - The **PRF extension is supported in Mozilla Firefox on iOS only in internal cases** because Firefox generally uses the Gecko engine, but on iOS, it is required for all browsers to run on WebKit.
 - iOS supports PRF extension starting with the **iOS 18** release.
 
 The wwWallet is committed to delivering a secure and adaptable authentication experience with an emphasis on PRF extension compatibility.
 
 ## 🔥Firebase
+
 This application uses Firebase for authentication and messaging features. To integrate Firebase into your project, follow these steps:
 
 1. **Firebase Configuration (`src/firebase.js`):**
 
-	The `firebase.js` file in the `src` directory and provide your Firebase configuration details. This file initializes the Firebase app and sets up the messaging service.
+   The `firebase.js` file in the `src` directory and provide your Firebase configuration details. This file initializes the Firebase app and sets up the messaging service.
 
 2. **Firebase Messaging Service Worker (`public/firebase-messaging-sw.js`):**
 
@@ -304,38 +312,43 @@ To apply styles using Tailwind CSS, you can directly add utility classes to your
 ```html
 <div class="p-4 m-2 text-blue-500">Styled with Tailwind CSS</div>
 ```
+
 ### Customization
+
 Tailwind CSS provides an extensive set of default styles, but you can also customize them to match your project's design. The **tailwind.config.js** file in the project's root directory allows you to customize colors, fonts, spacing, breakpoints, and more.
 
 ### Learn More
+
 Explore the [Tailwind CSS documentation](https://tailwindcss.com/docs/installation) to learn about all the utility classes, configuration options, and techniques for building beautiful UIs efficiently.
 
 ## 💡Contributing
 
 We welcome contributions from the community to help improve the wwWallet Frontend repository. If you'd like to contribute, follow these steps:
 
-1.	**Create a New Branch:**
-	Create a new branch for your feature or bug fix
-	```bash
-	git checkout -b my-feature
-	```
-	Replace my-feature with a descriptive name.
-
-2.	**Make Changes:**
-	Make the necessary changes in your code editor.
-
-3.	**Commit Changes:**
-	Commit your changes with a descriptive commit message:
-	```bash
-	git commit -m "Add new feature"
-	```
-4.	**Push Changes:**
-	Push your changes to your new branrch:
-	```bash
-	git push --set-upstream origin my-feature
-	```
-5.	**Create a Pull Request:**
-	Open a pull request on the original repository. Provide a detailed description of your changes and their purpose.
-
-6.	**Review and Merge:**
-	Your pull request will be reviewed by the maintainers. Make any requested changes and address feedback. Once approved, your changes will be merged into master branch of the project.
+1. **Create a New Branch:**
+   Create a new branch for your feature or bug fix
+
+   ```bash
+   git checkout -b my-feature
+   ```
+
+   Replace my-feature with a descriptive name.
+
+2. **Make Changes:**
+   Make the necessary changes in your code editor.
+
+3. **Commit Changes:**
+   Commit your changes with a descriptive commit message:
+   ```bash
+   git commit -m "Add new feature"
+   ```
+4. **Push Changes:**
+   Push your changes to your new branrch:
+   ```bash
+   git push --set-upstream origin my-feature
+   ```
+5. **Create a Pull Request:**
+   Open a pull request on the original repository. Provide a detailed description of your changes and their purpose.
+
+6. **Review and Merge:**
+   Your pull request will be reviewed by the maintainers. Make any requested changes and address feedback. Once approved, your changes will be merged into master branch of the project.

public/index.html → index.html

@@ -3,12 +3,12 @@
 
 <head>
 	<meta charset="utf-8" />
-	<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+	<link rel="icon" href="/favicon.ico" />
 	<meta name="viewport" content="width=device-width, initial-scale=1" />
 	<meta name="theme-color" content="#003476" />
 	<meta name="description" content="wwWallet" />
-  <link rel="apple-touch-icon" href="%PUBLIC_URL%/wallet_192.png">
-	<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+  <link rel="apple-touch-icon" href="/wallet_192.png">
+	<link rel="manifest" href="/manifest.json" />
 
 	<title>wwWallet</title>
 	<meta name="description" content="wwWallet is a secure web wallet for storing and managing verifiable credentials.">
@@ -29,6 +29,7 @@
 
 <body>
 	<div id="root"></div>
+	<script type="module" src="/src/index.jsx"></script>
 </body>
 
 </html>

package.json

@@ -51,20 +51,22 @@
     "@babel/plugin-proposal-private-property-in-object": "^7.21.0",
     "@types/jest": "^29.5.3",
     "@types/js-cookie": "^3.0.3",
-    "@types/node": "^20.5.0",
-    "@types/react": "^18.2.20",
-    "@types/react-dom": "^18.2.7",
+    "@types/node": "^22.8.7",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
     "@types/ua-parser-js": "^0.7.38",
     "@types/uuid": "^9.0.2",
     "@types/web": "^0.0.143",
+    "@vitejs/plugin-react": "^4.3.3",
+    "vite": "^5.4.10",
+    "vite-plugin-svgr": "^4.3.0",
     "vitest": "^1.5.0"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "start-docker": "npx react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
+    "start": "vite",
+    "start-docker": "npx vite",
+    "build": "vite build",
+    "test": "VITE_CJS_IGNORE_WARNING=true vitest run",
     "vitest": "VITE_CJS_IGNORE_WARNING=true vitest run",
     "vitest-start": "VITE_CJS_IGNORE_WARNING=true vitest"
   },

src/assets/images/verifier_icon.tsx

@@ -0,0 +1,7 @@
+export const VerifierIcon = () => {
+	return (
+		<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 24 24">
+			<path d="m23.854,23.146l-3.274-3.274c.886-1.046,1.421-2.398,1.421-3.872,0-3.309-2.691-6-6-6s-6,2.691-6,6,2.691,6,6,6c1.475,0,2.827-.535,3.872-1.421l3.274,3.274c.098.098.226.146.354.146s.256-.049.354-.146c.195-.195.195-.512,0-.707Zm-7.854-2.146c-2.757,0-5-2.243-5-5s2.243-5,5-5,5,2.243,5,5-2.243,5-5,5Zm-4.5,2h-7c-1.93,0-3.5-1.57-3.5-3.5V4.5c0-1.93,1.57-3.5,3.5-3.5h5.515c.334,0,.664.03.985.087v5.413c0,1.378,1.122,2.5,2.5,2.5h5.813c.154,0,.3-.071.395-.193s.127-.281.089-.431c-.289-1.13-.877-2.163-1.702-2.987l-3.485-3.485c-1.228-1.228-2.86-1.904-4.596-1.904h-5.515C2.019,0,0,2.019,0,4.5v15c0,2.481,2.019,4.5,4.5,4.5h7c.276,0,.5-.224.5-.5s-.224-.5-.5-.5Zm.5-21.632c.706.272,1.353.692,1.904,1.243l3.485,3.485c.542.542.964,1.192,1.24,1.904h-5.129c-.827,0-1.5-.673-1.5-1.5V1.368Zm-2.5,9.632h-5c-.276,0-.5-.224-.5-.5s.224-.5.5-.5h5c.276,0,.5.224.5.5s-.224.5-.5.5Zm-5.5,3.5c0-.276.224-.5.5-.5h3c.276,0,.5.224.5.5s-.224.5-.5.5h-3c-.276,0-.5-.224-.5-.5Zm0,4c0-.276.224-.5.5-.5h3.5c.276,0,.5.224.5.5s-.224.5-.5.5h-3.5c-.276,0-.5-.224-.5-.5Zm15.35-3.857c.192.199.187.515-.012.707l-2.703,2.614c-.36.355-.835.534-1.311.534s-.949-.177-1.312-.532l-1.364-1.345c-.197-.194-.199-.51-.005-.707.194-.197.512-.198.707-.005l1.363,1.344c.337.33.885.329,1.223-.004l2.706-2.617c.199-.192.516-.186.707.012Z"/>
+		</svg>
+	);
+}