Add EditorConfig

.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

@@ -13,4 +13,4 @@ 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_CONSOLE_TYPES=info,warn,error
+REACT_APP_CONSOLE_TYPES=info,warn,error

.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,12 +63,12 @@ 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_CONSOLE_TYPES: Enable console logs (info, warn, error) separated by commas or leave empty for none.
 
@@ -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
-}
+}

postcss.config.js

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

src/ConsoleBehavior.js

@@ -13,30 +13,30 @@ function isMethodAllowed(method) {
 }
 
 function ConsoleBehavior() {
-  const originalConsole = { ...console };
-
-  const originalPrepareStackTrace = Error.prepareStackTrace;
-
-  Object.keys(console).forEach(method => {
-    if (typeof console[method] === 'function') {
-      console[method] = (...args) => {
-        if (isMethodAllowed(method)) {
-          Error.prepareStackTrace = (_, stack) => stack;
-          const stack = new Error().stack;
-          Error.prepareStackTrace = originalPrepareStackTrace;
-
-          const callSite = stack[1];
-          if (callSite) {
-            const fileName = callSite.getFileName();
-            const lineNumber = callSite.getLineNumber();
-            args.push(`(at ${fileName}:${lineNumber})`);
-          }
-
-          originalConsole[method].apply(console, args);
-        }
-      };
-    }
-  });
+	const originalConsole = { ...console };
+
+	const originalPrepareStackTrace = Error.prepareStackTrace;
+
+	Object.keys(console).forEach(method => {
+		if (typeof console[method] === 'function') {
+			console[method] = (...args) => {
+				if (isMethodAllowed(method)) {
+					Error.prepareStackTrace = (_, stack) => stack;
+					const stack = new Error().stack;
+					Error.prepareStackTrace = originalPrepareStackTrace;
+
+					const callSite = stack[1];
+					if (callSite) {
+						const fileName = callSite.getFileName();
+						const lineNumber = callSite.getLineNumber();
+						args.push(`(at ${fileName}:${lineNumber})`);
+					}
+
+					originalConsole[method].apply(console, args);
+				}
+			};
+		}
+	});
 }
 
-export default ConsoleBehavior;
+export default ConsoleBehavior;

src/components/ChistmasAnimation/Snowfalling.js

@@ -2,27 +2,27 @@ import React, { useEffect, useState } from 'react';
 import Snowfall from 'react-snowfall';
 
 const Snowfalling = () => {
-  const [isChristmasSeason, setIsChristmasSeason] = useState(false);
+	const [isChristmasSeason, setIsChristmasSeason] = useState(false);
 
-  useEffect(() => {
-    const checkSeason = () => {
-      const today = new Date();
-      const currentYear = today.getFullYear();
-
-      const start = new Date(currentYear, 11, 20);
-      const end = new Date(currentYear + 1, 0, 6);
-
-      return today >= start && today <= end;
-    };
+	useEffect(() => {
+		const checkSeason = () => {
+			const today = new Date();
+			const currentYear = today.getFullYear();
 
-    setIsChristmasSeason(checkSeason());
-  }, []);
+			const start = new Date(currentYear, 11, 20);
+			const end = new Date(currentYear + 1, 0, 6);
 
-  return (
-    <>
-      {isChristmasSeason && <Snowfall snowflakeCount={200}/>}
-    </>
-  );
+			return today >= start && today <= end;
+		};
+
+		setIsChristmasSeason(checkSeason());
+	}, []);
+
+	return (
+		<>
+			{isChristmasSeason && <Snowfall snowflakeCount={200} />}
+		</>
+	);
 }
 
 export default Snowfalling;

src/components/Credentials/ApiFetchCredential.ts

@@ -4,42 +4,42 @@ import { BackendApi } from '../../api';
 import parseJwt from '../../functions/ParseJwt';
 
 export async function fetchCredentialData(api: BackendApi, id = null) {
-  try {
-    const response = await api.get('/storage/vc');
+	try {
+		const response = await api.get('/storage/vc');
 
-    if (id) {
-      const targetImage = response.data.vc_list.find((img) => img.id.toString() === id);
-      const newImages = targetImage
-        ? [targetImage].map((item) => ({
-            id: item.id,
-						credentialIdentifier:item.credentialIdentifier,
-            src: item.logoURL,
-            alt: item.issuerFriendlyName,
-            data: parseJwt(item.credential)["vc"]['credentialSubject'],
-            type: parseJwt(item.credential)['vc']["type"]["2"],
-            expdate: parseJwt(item.credential)['vc']["expirationDate"],
-						json:JSON.stringify(parseJwt(item.credential)["vc"], null, 2)
+		if (id) {
+			const targetImage = response.data.vc_list.find((img) => img.id.toString() === id);
+			const newImages = targetImage
+				? [targetImage].map((item) => ({
+					id: item.id,
+					credentialIdentifier: item.credentialIdentifier,
+					src: item.logoURL,
+					alt: item.issuerFriendlyName,
+					data: parseJwt(item.credential)["vc"]['credentialSubject'],
+					type: parseJwt(item.credential)['vc']["type"]["2"],
+					expdate: parseJwt(item.credential)['vc']["expirationDate"],
+					json: JSON.stringify(parseJwt(item.credential)["vc"], null, 2)
 
-          }))
-        : [];
+				}))
+				: [];
 
-      return newImages[0];
-    } else {
-      const newImages = response.data.vc_list.map((item) => ({
-        id: item.id,
-				credentialIdentifier:item.credentialIdentifier,
-        src: item.logoURL,
-        alt: item.issuerFriendlyName,
-        data: parseJwt(item.credential)["vc"]['credentialSubject'],
-        type: parseJwt(item.credential)['vc']["type"]["2"],
-        expdate: parseJwt(item.credential)['vc']["expirationDate"],
-				json:JSON.stringify(parseJwt(item.credential)["vc"], null, 2)
-      }));
+			return newImages[0];
+		} else {
+			const newImages = response.data.vc_list.map((item) => ({
+				id: item.id,
+				credentialIdentifier: item.credentialIdentifier,
+				src: item.logoURL,
+				alt: item.issuerFriendlyName,
+				data: parseJwt(item.credential)["vc"]['credentialSubject'],
+				type: parseJwt(item.credential)['vc']["type"]["2"],
+				expdate: parseJwt(item.credential)['vc']["expirationDate"],
+				json: JSON.stringify(parseJwt(item.credential)["vc"], null, 2)
+			}));
 
-      return newImages;
-    }
-  } catch (error) {
-    console.error('Failed to fetch data', error);
-    return null;
-  }
+			return newImages;
+		}
+	} catch (error) {
+		console.error('Failed to fetch data', error);
+		return null;
+	}
 }

src/components/Credentials/CredentialDeleteButton.js

@@ -5,11 +5,11 @@ import { useTranslation } from 'react-i18next';
 const CredentialDeleteButton = ({ onDelete }) => {
 	const { t } = useTranslation();
 
-  const handleClick = () => {
-    onDelete();
-  };
+	const handleClick = () => {
+		onDelete();
+	};
 
-  return (
+	return (
 		<div className=" lg:p-0 p-2 w-full">
 			<button
 				className="lg:mt-5 mt-2 text-white cursor-pointer flex items-center bg-red-600 hover:bg-red-800 font-medium rounded-lg text-sm px-4 py-2 text-center"
@@ -18,7 +18,7 @@ const CredentialDeleteButton = ({ onDelete }) => {
 				<MdDelete size={20} /> {t('common.delete')}
 			</button>
 		</div>
-  );
+	);
 };
 
 export default CredentialDeleteButton;