Fix conflicts after merge master

.buildignore

@@ -3,4 +3,4 @@ tsconfig.json
 yarn.lock
 README.md
 .gitignore
-*.tar.gz
+*.tar.gz

.editorconfig

@@ -0,0 +1,13 @@
+# EditorConfig: https://EditorConfig.org
+
+[*]
+charset = utf-8
+insert_final_newline = true # Type of newline is managed by git in .gitattributes
+trim_trailing_whitespace = true
+
+[{*.{Dockerfile,css,js,jsx,ts,tsx},Dockerfile}]
+indent_style = tab
+
+[*.{yml,yaml}] # YAML does not allow tab indentation
+indent_style = space
+indent_size = 2

.env.template

@@ -11,5 +11,6 @@ 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
-REACT_APP_DEV_CONSOLE_TYPES=info,warn,error
+REACT_APP_DISPLAY_CONSOLE=true

.github/workflows/code-formatting.yml

@@ -0,0 +1,26 @@
+# This name is shown in status badges
+name: code-formatting
+
+on:
+  push:
+    branches-ignore:
+      - 'tmp**'
+  pull_request:
+    branches-ignore:
+      - 'tmp**'
+
+jobs:
+  editorconfig:
+    name: Check EditorConfig compliance
+
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Check out code
+      uses: actions/checkout@v3
+
+    - name: Set up editorconfig-checker
+      uses: editorconfig-checker/action-editorconfig-checker@v2
+
+    - name: Check code formatting
+      run: editorconfig-checker

.gitignore

@@ -44,4 +44,4 @@ src/config/config.dev.ts
 src/config/config.prod.js
 ssl_keys/*
 *.tar.gz
-.npmrc
+.npmrc

.htaccess

@@ -1,4 +1,4 @@
 Options -MultiViews
 RewriteEngine On
 RewriteCond %{REQUEST_FILENAME} !-f
-RewriteRule ^ index.html [QSA,L]
+RewriteRule ^ index.html [QSA,L]

.vscode/settings.json

@@ -2,4 +2,4 @@
     "editor.tabSize": 2,
     "editor.detectIndentation": false,
     "editor.insertSpaces": false
-}
+}

Dockerfile

@@ -4,7 +4,7 @@ WORKDIR /home/node/app
 COPY . .
 
 RUN --mount=type=secret,id=npmrc,required=true,target=./.npmrc,uid=1000 \
-    yarn cache clean -f && yarn install && yarn build
+	yarn cache clean -f && yarn install && yarn build
 
 
 FROM nginx:alpine as deploy
@@ -17,4 +17,4 @@ COPY --from=builder /home/node/app/build/ .
 
 EXPOSE 80
 
-CMD ["nginx", "-g", "daemon off;"]
+CMD ["nginx", "-g", "daemon off;"]

README.md

@@ -39,7 +39,7 @@ Our Web Wallet provides a range of features tailored to enhance the credential m
      ```bash
      git clone https://github.com/your-username/wallet-frontend.git
      ```
-  
+
  - **Option 2: Using SSH**
      ```bash
      git clone [email protected]:your-username/wallet-frontend.git
@@ -63,14 +63,14 @@ The project uses environment variables to manage different configurations. A `.e
 	 - 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_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_APP_ID: Your Firebase App ID.
 	 - REACT_APP_FIREBASE_MEASUREMENT_ID: Your Firebase Measurement ID.
-	 - REACT_APP_DEV_CONSOLE_TYPES: Enable console logs (info, warn, error) separated by commas or leave empty for none.
+	 - REACT_APP_DISPLAY_CONSOLE: Handle console logs (`true` or `false`). If left empty, it will be handled as `true`.
 
 4. Install dependencies:
 	```bash
@@ -101,7 +101,7 @@ The PRF (Pseudo Random Function) extension in WebAuthn enables the evaluation of
 | Windows          | ✔ 							| ✔    | ❌      | ✔      |        | ✔      |
 | MacOS            | ✔ 				      | ✔    | ❌      | ✔      | ❌     | ✔       |
 | Android          | ✔ 							| ✔    | ❌      | ✔      |        | ✔      |
-| iOS              | ❌          	 | ❌    | ❌      | ❌     | ❌     | ❌      | 
+| iOS              | ❌          	 | ❌    | ❌      | ❌     | ❌     | ❌      |
 
 ### PRF Compatibility Scenarios
 
@@ -123,7 +123,7 @@ The PRF (Pseudo Random Function) extension in WebAuthn enables the evaluation of
 | iOS              | FIDO Security Key 	  | NFC           | ❌                  |
 
 
-***Note:** 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. 
+***Note:** 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.*
 
 The wwWallet is committed to delivering a secure and adaptable authentication experience with an emphasis on PRF extension compatibility.
@@ -162,7 +162,7 @@ We welcome contributions from the community to help improve the wwWallet Fronten
 
 1.	**Create a New Branch:**
 	Create a new branch for your feature or bug fix
-	```bash 
+	```bash
 	git checkout -b my-feature
 	```
 	Replace my-feature with a descriptive name.
@@ -172,14 +172,14 @@ We welcome contributions from the community to help improve the wwWallet Fronten
 
 3.	**Commit Changes:**
 	Commit your changes with a descriptive commit message:
-	```bash 
+	```bash
 	git commit -m "Add new feature"
 	```
 4.	**Push Changes:**
 	Push your changes to your new branrch:
-	```bash 
+	```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.
 

development.Dockerfile

@@ -5,7 +5,7 @@ WORKDIR /dependencies
 # Install dependencies first so rebuild of these layers is only needed when dependencies change
 COPY package.json yarn.lock .
 RUN --mount=type=secret,id=npmrc,required=true,target=./.npmrc,uid=1000 \
-  yarn install && yarn cache clean -f
+	yarn install && yarn cache clean -f
 
 
 FROM node:16-bullseye-slim as development

nginx/nginx.conf

@@ -8,4 +8,4 @@ server {
     }
 
     # Add any additional Nginx configuration here as needed
-}
+}

package.json

@@ -4,17 +4,21 @@
   "private": true,
   "dependencies": {
     "@cef-ebsi/key-did-resolver": "^1.1.0",
+    "@sd-jwt/core": "^0.2.1",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "@wwwallet/ssi-sdk": "^1.0.7",
     "autoprefixer": "^10.4.14",
     "axios": "^1.4.0",
+    "did-resolver": "^4.1.0",
     "firebase": "^10.1.0",
     "i18next": "^23.2.11",
     "jose": "^4.14.4",
     "js-cookie": "^3.0.5",
     "jsqr": "^1.4.0",
+    "key-did-resolver": "^3.0.0",
+    "multiformats": "^12.1.3",
     "postcss": "^8.4.25",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -26,6 +30,7 @@
     "react-scripts": "5.0.1",
     "react-slick": "^0.29.0",
     "react-snowfall": "^1.2.1",
+    "react-transition-group": "^4.4.5",
     "react-webcam": "^7.2.0",
     "reactour": "^1.19.2",
     "slick-carousel": "^1.8.1",

postcss.config.js

@@ -3,4 +3,4 @@ module.exports = {
 		require('tailwindcss'),
 		require('autoprefixer'),
 	],
-};
+};

public/index.html

@@ -4,26 +4,10 @@
 		<meta charset="utf-8" />
 		<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		<meta name="theme-color" content="#000000" />
-		<meta
-			name="description"
-			content="wwWallet"
-		/>
-		<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo.png" />
-		<!--
-			manifest.json provides metadata used when your web app is installed on a
-			user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-		-->
+		<meta name="description" content="Secure storage and management of verifiable credentials" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/wallet_192.png">
+    <meta name="theme-color" content="#003476" />
 		<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-		<!--
-			Notice the use of %PUBLIC_URL% in the tags above.
-			It will be replaced with the URL of the `public` folder during the build.
-			Only files inside the `public` folder can be referenced from the HTML.
-
-			Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-			work correctly both with client-side routing and a non-root public URL.
-			Learn how to configure a non-root public URL by running `npm run build`.
-		-->
 		<title>wwWallet</title>
 	</head>
 	<body>

public/manifest.json

@@ -1,17 +1,12 @@
 {
-	"short_name": "ediplomas DW",
+	"short_name": "wwWallet",
 	"name": "wwWallet",
 	"icons": [
 		{
 			"src": "wallet_16.png",
 			"sizes": "16x16",
 			"type": "image/png"
 		},
-		{
-			"src": "wallet_24.png",
-			"sizes": "24x24",
-			"type": "image/png"
-		},
 		{
 			"src": "wallet_32.png",
 			"sizes": "32x32",
@@ -26,7 +21,6 @@
 			"src": "wallet_192.png",
 			"sizes": "192x192",
 			"type": "image/png"
-
 		},
 		{
 			"src": "wallet_512.png",
@@ -36,6 +30,11 @@
 	],
 	"start_url": ".",
 	"display": "standalone",
-	"theme_color": "#000000",
-	"background_color": "#ffffff"
+	"orientation": "any",
+	"theme_color": "#003476",
+	"description": "wwWallet enables secure storage and management of verifiable credentials.",
+	"background_color": "#ffffff",
+	"scope": "/",
+	"dir": "ltr",
+	"lang": "en"
 }

src/App.js

@@ -11,17 +11,19 @@ import handleServerMessagesGuard from './hoc/handleServerMessagesGuard';
 import HandlerNotification from './components/HandlerNotification';
 import Snowfalling from './components/ChistmasAnimation/Snowfalling'
 
-const Settings = React.lazy(() => import('./pages/Settings/Settings'));
+import Home from './pages/Home/Home';
+import History from './pages/History/History';
+import Settings from './pages/Settings/Settings';
+import AddCredentials from './pages/AddCredentials/AddCredentials';
+import SendCredentials from './pages/SendCredentials/SendCredentials';
+
 const Login = React.lazy(() => import('./pages/Login/Login'));
-const Home = React.lazy(() => import('./pages/Home/Home'));
-const AddCredentials = React.lazy(() => import('./pages/AddCredentials/AddCredentials'));
-const SendCredentials = React.lazy(() => import('./pages/SendCredentials/SendCredentials'));
-const History = React.lazy(() => import('./pages/History/History'));
 const NotFound = React.lazy(() => import('./pages/NotFound/NotFound'));
 const PrivateRoute = React.lazy(() => import('./components/PrivateRoute'));
 const CredentialDetail = React.lazy(() => import('./pages/Home/CredentialDetail'));
-const Popup = React.lazy(() => import('./components/Popup'));
-const PinInputPopup = React.lazy(() => import('./components/PinInputPopup'));
+const SelectCredentialsPopup = React.lazy(() => import('./components/Popups/SelectCredentials'));
+const PinInputPopup = React.lazy(() => import('./components/Popups/PinInput'));
+const MessagePopup = React.lazy(() => import('./components/Popups/MessagePopup'));
 const VerificationResult = React.lazy(() => import('./pages/VerificationResult/VerificationResult'));
 
 
@@ -44,13 +46,17 @@ function App() {
 
 	const url = window.location.href;
 	const {
-		isValidURL,
-		showPopup,
-		setShowPopup,
+		showSelectCredentialsPopup,
+		setShowSelectCredentialsPopup,
 		setSelectionMap,
 		conformantCredentialsMap,
-		showPinPopup,
-		setShowPinPopup,
+		showPinInputPopup,
+		setShowPinInputPopup,
+		verifierDomainName,
+		showMessagePopup,
+		setMessagePopup,
+		textMessagePopup,
+		typeMessagePopup,
 	} = useCheckURL(url);
 
 	useEffect(() => {
@@ -92,11 +98,14 @@ function App() {
 							<Route path="/cb" element={<PrivateRoute><Home /></PrivateRoute>} />
 							<Route path="*" element={<NotFound />} />
 						</Routes>
-						{showPopup &&
-							<Popup showPopup={showPopup} setShowPopup={setShowPopup} setSelectionMap={setSelectionMap} conformantCredentialsMap={conformantCredentialsMap} />
+						{showSelectCredentialsPopup &&
+							<SelectCredentialsPopup showPopup={showSelectCredentialsPopup} setShowPopup={setShowSelectCredentialsPopup} setSelectionMap={setSelectionMap} conformantCredentialsMap={conformantCredentialsMap} verifierDomainName={verifierDomainName} />
+						}
+						{showPinInputPopup &&
+							<PinInputPopup showPopup={showPinInputPopup} setShowPopup={setShowPinInputPopup} />
 						}
-						{showPinPopup &&
-							<PinInputPopup showPinPopup={showPinPopup} setShowPinPopup={setShowPinPopup} />
+						{showMessagePopup &&
+							<MessagePopup type={typeMessagePopup} message={textMessagePopup} onClose={() => setMessagePopup(false)} />
 						}
 					</HandlerNotification>
 				</Suspense>