Merge pull request #14 from gnosischain/improvements/validator-match-ui

Shutter App Improvements

.commitlintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["@commitlint/config-conventional"]
+}

.eslintrc.cjs

@@ -5,15 +5,22 @@ module.exports = {
     'eslint:recommended',
     'plugin:@typescript-eslint/recommended',
     'plugin:react-hooks/recommended',
+    'prettier',
   ],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  ignorePatterns: ['dist', '.eslintrc.cjs', 'thegraph', 'public'],
   parser: '@typescript-eslint/parser',
-  plugins: ['react-refresh'],
+  plugins: [
+    'react-refresh',
+    'react',
+    '@typescript-eslint',
+    'prettier'
+  ],
   rules: {
     'react-refresh/only-export-components': [
       'warn',
       { allowConstantExport: true },
     ],
     '@typescript-eslint/no-explicit-any': 'off',
+    "prettier/prettier": ["error"],
   },
 }

.gitignore

@@ -25,4 +25,7 @@ dist-ssr
 .env
 .vite
 .firebaserc
-.firebase
+.firebase
+
+--fix
+tsconfig.tsbuildinfo

.husky/pre-commit

@@ -0,0 +1 @@
+npx lint-staged

.nvmrc

@@ -0,0 +1 @@
+22.3.0

.prettierignore

@@ -0,0 +1,41 @@
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+/dist
+
+# misc
+.DS_Store
+*.d.ts
+.eslintrc.js
+.eslintignore
+.prettierrc.js
+.prettierignore
+tsconfig.json
+next.config.js
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Files generated by next-on-netlify command
+/out_publish/
+/out_functions/

.prettierrc.js

@@ -0,0 +1,7 @@
+export default {
+  bracketSpacing: true,
+  printWidth: 100,
+  semi: true,
+  singleQuote: true,
+  trailingComma: 'all',
+}

README.md

@@ -1,30 +1,69 @@
-# React + TypeScript + Vite
+# Gnosis Shutter App
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+## Overview
 
-Currently, two official plugins are available:
+Gnosis Shutter enhances transaction privacy and security on the Gnosis Chain. It allows users to encrypt their transactions to prevent frontrunning and censorship, with decryption and execution only occurring when they are ready to be included in a blockchain block.
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+## Features
 
-## Expanding the ESLint configuration
+- **Encryption of Transactions**: Users can encrypt transactions using a public 'eon key' before submission.
+- **Decentralized Decryption**: Managed by a group of nodes called keypers, who ensure secure transaction decryption.
+- **Enhanced Security**: Transactions are decrypted only when they are ready to be included in a block, enhancing security and privacy.
+- **Opt-in System**: Users can choose between sending encrypted transactions or using the standard plaintext format.
+- **Shutter Timer**: Track when next shutter validator will include transactions from sequencer to the block. 
 
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+![img.png](./public/shutter-architecture.png)
 
-- Configure the top-level `parserOptions` property like this:
+![img.png](public/app-screenshot.png)
 
-```js
-export default {
-  // other rules...
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: ['./tsconfig.json', './tsconfig.node.json'],
-    tsconfigRootDir: __dirname,
-  },
-}
+## Getting Started
+
+### Prerequisites
+
+- Node.js (version 22.3.0)
+- A compatible wallet (e.g., Brave Wallet)
+
+### Installation
+
+1. Clone the repository:
+   ```bash
+   git clone https://github.com/yourusername/gnosis-shutter.git
+   cd gnosis-shutter
+   ```
+
+2. Install dependencies:
+   ```bash
+    npm install
+    ```
+
+3. Configure environment variables:
+    ```bash
+    cp .env.example .env
+    ```
+
+Running the Application
+To start the application, run the following command:
+```bash
+npm run dev
 ```
 
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
+## Usage
+To submit an encrypted transaction:
+
+1. Connect your Brave Wallet.
+2. Select the Gnosis Chain or Chiado.
+3. Choose transfer tokens or advanced transaction (you need to copy build transaction from metamask)
+4. Sign transaction.
+5. Submit transaction to shutter sequencer contract.
+
+Transactions will be encrypted client-side and sent to the Sequencer Contract for processing.
+
+## Documentation
+For more detailed information about the Gnosis Shutter system and its components, visit the following links:
+* [Shutter Network](https://www.shutter.network/).
+* [Shutterized Gnosis Chain -- High Level Overview](https://github.com/gnosischain/specs/blob/master/shutter/high-level.md)
+* [Shutterized Gnosis Chain -- Low Level Specification](https://github.com/gnosischain/specs/blob/master/shutter/low-level.md)
+
+## Support
+
+If you need help or have any questions, please file an issue [here](https://github.com/gnosischain/shutter-encryption/issues).

index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/gnosis.svg" />
+    <link rel="icon" type="image/svg+xml" href="/gnosisGreen.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Gnosis Shutter</title>
   </head>