feat: change frontend.yml file, added: eslint, prettier, sass, vite.c…

…onfig #4

.github/workflows/frontend.yml

@@ -26,14 +26,24 @@ jobs:
         working-directory: ${{ github.workspace }}/frontend
         run: yarn install --frozen-lockfile
 
+      - name: Load environment variables
+        run: |
+          echo "${{ secrets.ENV_VARIABLES }}" > .env
+          echo VITE_REACT_APP_GIT_TAG=${{  github.ref_name }} >> .env
+          echo VITE_REACT_APP_GIT_DATE="$(git log -1 --format=%cd)" >> .env
+
+      - name: ESlint check
+        working-directory: ${{ github.workspace }}/frontend
+        run: yarn lint
+
       - name: Build with Vite
         working-directory: ${{ github.workspace }}/frontend
         run: yarn build
 
       - name: Put Git tag and time to .env file
         run: |
           echo VITE_REACT_APP_GIT_TAG=${{  github.ref_name }} > ${{ github.workspace }}/frontend/dist/.env
-          echo VITE_REACT_APP_GIT_DATE="$(date +'%Y-%m-%d')" >> ${{ github.workspace }}/frontend/dist/.env        
+          echo VITE_REACT_APP_GIT_DATE="$(date +'%Y-%m-%d')" >> ${{ github.workspace }}/frontend/dist/.env
 
       - name: Upload Artifacts
         uses: actions/upload-artifact@v3

frontend/.eslintrc.cjs

@@ -5,14 +5,25 @@ module.exports = {
     'eslint:recommended',
     'plugin:@typescript-eslint/recommended',
     'plugin:react-hooks/recommended',
+    "prettier",
+    "plugin:prettier/recommended"
   ],
   ignorePatterns: ['dist', '.eslintrc.cjs'],
   parser: '@typescript-eslint/parser',
-  plugins: ['react-refresh'],
+  plugins: ['react-refresh', "prettier"],
   rules: {
     'react-refresh/only-export-components': [
       'warn',
       { allowConstantExport: true },
     ],
+    "@typescript-eslint/no-unused-vars": ["warn"],
+    "react/no-unused-prop-types": "off",
+    "eslintreact/require-default-props": "off",
+    "react/destructuring-assignment": "off",
+    "react/require-default-props": "off",
+    "import/prefer-default-export": "off",
+    "prettier/prettier": ["warn", {
+      "endOfLine": "auto"
+    }]
   },
 }

frontend/.prettierrc.json

@@ -0,0 +1,13 @@
+{
+  "semi": true,
+  "trailingComma": "es5",
+  "singleQuote": true,
+  "useTabs": false,
+  "endOfLine": "auto",
+  "printWidth": 100,
+  "tabWidth": 2,
+  "bracketSameLine": false,
+  "bracketSpacing": true,
+  "arrowParens": "always",
+  "jsxSingleQuote": true
+}

frontend/package.json

@@ -7,7 +7,15 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "lint:fix": "eslint --fix ./src",
+    "preview": "vite preview",
+    "format:fix": "prettier --write ./src",
+    "format": "npx prettier src --check"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
   },
   "dependencies": {
     "@rainbow-me/rainbowkit": "^1.1.1",
@@ -18,14 +26,21 @@
     "wagmi": "^1.4.3"
   },
   "devDependencies": {
+    "@types/babel__core": "^7.20.2",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
     "@vitejs/plugin-react": "^4.0.3",
     "eslint": "^8.45.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
+    "lint-staged": "^14.0.1",
+    "prettier": "^3.0.3",
+    "prettier-eslint": "^15.0.1",
+    "sass": "^1.69.1",
     "typescript": "^5.0.2",
     "vite": "^4.4.5"
   }

frontend/src/App.css

@@ -1,11 +1,16 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
+.appBox {
+  height: 100vh;
+  gap: 15px 0;
+}
+.logoBox,
+.appBox {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 }
-
 .logo {
+  width: auto;
   height: 6em;
   padding: 1.5em;
   will-change: filter;

frontend/src/App.tsx

@@ -1,38 +1,54 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
-import './App.css'
-import '@rainbow-me/rainbowkit/styles.css'
-import { ConnectButton } from '@rainbow-me/rainbowkit'
+import { useState } from 'react';
+import reactLogo from './assets/react.svg';
+import viteLogo from '/vite.svg';
+import './index.scss';
+import './App.css';
+import '@rainbow-me/rainbowkit/styles.css';
+import { ConnectButton } from '@rainbow-me/rainbowkit';
+import DevModeToggle from './components/devModeToggle/DevModeToggle';
 
 function App() {
-  const [count, setCount] = useState(0)
+  const [count, setCount] = useState(0);
+  const [devModeState, setDevModeState] = useState(false);
+  const versionDeploy = import.meta.env.VITE_REACT_APP_GIT_TAG;
+  const dateDeploy = import.meta.env.VITE_REACT_APP_GIT_DATE;
+
+  const handleToggleDevMode = (value: boolean) => {
+    setDevModeState(value);
+  };
 
   return (
-    <>
-      <div>
-        <a href="https://vitejs.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
+    <div className='app appBox'>
+      {versionDeploy && dateDeploy && (
+        <div>
+          <DevModeToggle isDevMode={devModeState} handleToggleDevMode={handleToggleDevMode} />
+          {devModeState && (
+            <div>
+              <p>Version: {versionDeploy}</p>
+              <p>Date: {dateDeploy}</p>
+            </div>
+          )}
+        </div>
+      )}
+      <div className='logoBox'>
+        <a href='https://vitejs.dev' target='_blank' rel='noreferrer'>
+          <img src={viteLogo} className='logo' alt='Vite logo' />
         </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
+        <a href='https://react.dev' target='_blank' rel='noreferrer'>
+          <img src={reactLogo} className='logo react' alt='React logo' />
         </a>
       </div>
       <h1>New</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
+      <div className='card'>
+        <button onClick={() => setCount((count) => count + 1)}>count is {count}</button>
         <p>
           Edit <code>src/App.tsx</code> and save to test HMR
         </p>
       </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
+      <p className='read-the-docs'>Click on the Vite and React logos to learn more</p>
       <ConnectButton />
-    </>
-  )
+    </div>
+  );
 }
 
-export default App
+export default App;

frontend/src/components/devModeToggle/DevModeToggle.module.scss

@@ -0,0 +1,14 @@
+.devModeToggle {
+  border: none;
+  outline: none;
+  cursor: pointer;
+  padding: 5px 10px;
+  min-width: 80px;
+  display: block;
+  border-radius: 10px;
+  font-size: 12px;
+  background-color: var(--blue);
+  position: absolute;
+  top: 0;
+  left: 0;
+}

frontend/src/components/devModeToggle/DevModeToggle.tsx

@@ -0,0 +1,22 @@
+import styles from './DevModeToggle.module.scss';
+
+interface IDevModeToggle {
+  isDevMode: boolean;
+  handleToggleDevMode: (value: boolean) => void;
+}
+
+function DevModeToggle(props: IDevModeToggle) {
+  const { isDevMode = false, handleToggleDevMode } = props;
+
+  const handleClick = () => {
+    handleToggleDevMode(!isDevMode);
+  };
+
+  return (
+    <button className={styles.devModeToggle} onClick={handleClick}>
+      {isDevMode ? 'DEV ON' : 'DEV OFF'}
+    </button>
+  );
+}
+
+export default DevModeToggle;

frontend/src/constants/constants.ts

@@ -0,0 +1 @@
+export const PROJECT_ID = 'f5f4ef3634a6aa0af5a1d5516608377a';

frontend/src/index.scss

@@ -0,0 +1,43 @@
+@import './scss/reset';
+@import './scss/vars';
+
+b {
+  display: inline-block;
+  font-weight: 700;
+  font-size: 1.25rem;
+  line-height: 1;
+  margin-top: 1.25rem;
+}
+
+ul,
+ol {
+  margin-top: 1rem;
+  padding-left: 25px;
+}
+
+html {
+  font-size: 16px;
+  height: 100%;
+}
+
+body {
+  height: 100%;
+  scroll-behavior: smooth;
+  text-rendering: optimizeSpeed;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-weight: 400;
+  line-height: 1.25;
+  font-size: 16px;
+}
+
+#root {
+  width: 100%;
+  height: 100%;
+}
+
+.app {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+}

frontend/src/main.tsx

@@ -1,11 +1,10 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
-import './index.css'
-import {WagmiConfig} from "wagmi";
-import {chains, wagmiConfig} from './wagmiConfig.ts';
-import {RainbowKitProvider} from "@rainbow-me/rainbowkit";
-
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App.tsx';
+import './index.css';
+import { WagmiConfig } from 'wagmi';
+import { chains, wagmiConfig } from './wagmiConfig.ts';
+import { RainbowKitProvider } from '@rainbow-me/rainbowkit';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
@@ -14,5 +13,5 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
         <App />
       </RainbowKitProvider>
     </WagmiConfig>
-  </React.StrictMode>,
-)
+  </React.StrictMode>
+);

frontend/src/scss/_mixins.scss

@@ -0,0 +1,6 @@
+@mixin fontStyle($fontSizePx, $lineHeightPx: 0) {
+  font-size: $fontSizePx + px;
+  @if $lineHeightPx != 0 {
+    line-height: calc($lineHeightPx / $fontSizePx);
+  }
+}

frontend/src/scss/_reset.scss

@@ -0,0 +1,48 @@
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+ul,
+ol {
+  margin: 0;
+  padding: 0;
+}
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+ul[class],
+ol[class],
+li,
+figure,
+figcaption,
+blockquote,
+dl,
+dd {
+  margin: 0;
+}
+a {
+  text-decoration: none;
+  color: inherit;
+}
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+}
+img {
+  max-width: 100%;
+  display: block;
+}
+article > * + * {
+  margin-top: 1em;
+}
+input,
+button,
+textarea,
+select {
+  padding: 0;
+  font: inherit;
+}
+button:focus {outline:0;}

frontend/src/scss/_vars.scss

@@ -0,0 +1,3 @@
+:root {
+  --blue: #7dcfd3;
+}