Add linter

.erb-lint.yml

@@ -0,0 +1,24 @@
+linters:
+  RuboCop:
+    enabled: true
+    rubocop_config: '.rubocop.yml'
+  AltText:
+    enabled: true
+  ClosingErbTagIndentation:
+    enabled: true
+  ExtraNewline:
+    enabled: true
+  FinalNewline:
+    enabled: true
+  LeftoverWhitespace:
+    enabled: true
+  ParserErrors:
+    enabled: true
+  RightTrim:
+    enabled: true
+  SpaceAroundErbTag:
+    enabled: true
+  SpaceIndentation:
+    enabled: true
+  TrailingWhitespace:
+    enabled: true

.github/workflows/ci.yml

@@ -32,7 +32,7 @@ jobs:
       - name: Install Node.js
         uses: actions/setup-node@v2
         with:
-          node-version: "14"
+          node-version: '14'
 
       - name: Install JavaScript dependencies
         run: npm install --legacy-peer-deps

.prettierignore

@@ -0,0 +1,2 @@
+app/views/layouts/application.html.erb
+app/views/campaigns/index.html.erb

.prettierrc

@@ -0,0 +1,21 @@
+{
+  "semi": true,
+  "trailingComma": "es5",
+  "singleQuote": true,
+  "printWidth": 80,
+  "tabWidth": 2,
+  "overrides": [
+    {
+      "files": "*.html",
+      "options": {
+        "parser": "html"
+      }
+    },
+    {
+      "files": "*.erb",
+      "options": {
+        "parser": "html"
+      }
+    }
+  ]
+}

.rubocop.yml

@@ -1 +1,22 @@
-inherit_from: .rubocop_todo.yml
+inherit_from:
+  - .rubocop_todo.yml
+
+AllCops:
+  TargetRubyVersion: 2.7
+  Exclude:
+    - 'db/schema.rb'
+    - 'node_modules/**/*'
+    - 'bin/*'
+    - 'config/**/*'
+    - 'vendor/**/*'
+    - 'spec/fixtures/**/*'
+
+Metrics/BlockLength:
+  Exclude:
+    - 'spec/**/*'
+
+Style/FrozenStringLiteralComment:
+  Enabled: false
+
+Layout/LineLength:
+  Max: 100

.vscode/settings.json

@@ -0,0 +1,21 @@
+{
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true
+  },
+  "[html]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true
+  },
+  "[erb]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true
+  },
+  "prettier.requireConfig": true
+}

Gemfile

@@ -74,6 +74,7 @@ group :development, :test do
   # Call 'byebug' or 'binding.pry' anywhere in the code to stop execution and get a debugger console
   # gem "pry-byebug" #does not play well with 'pry-remote'
   gem 'dotenv'
+  gem 'erb_lint', require: false
   gem 'factory_bot_rails'
   gem 'faker'
   gem 'faraday-retry'

Gemfile.lock

@@ -86,6 +86,13 @@ GEM
     ast (2.4.2)
     base64 (0.2.0)
     bcrypt (3.1.20)
+    better_html (2.1.1)
+      actionview (>= 6.0)
+      activesupport (>= 6.0)
+      ast (~> 2.0)
+      erubi (~> 1.4)
+      parser (>= 2.4)
+      smart_properties
     bigdecimal (3.1.8)
     bindex (0.8.1)
     bootsnap (1.18.3)
@@ -123,6 +130,13 @@ GEM
     domain_name (0.6.20240107)
     dotenv (3.1.2)
     drb (2.2.1)
+    erb_lint (0.5.0)
+      activesupport
+      better_html (>= 2.0.1)
+      parser (>= 2.7.1.4)
+      rainbow
+      rubocop
+      smart_properties
     erubi (1.13.0)
     factory_bot (6.4.6)
       activesupport (>= 5.0.0)
@@ -357,6 +371,7 @@ GEM
       rubyzip (>= 1.2.2, < 3.0)
       websocket (~> 1.0)
     slop (3.6.0)
+    smart_properties (1.17.0)
     snaky_hash (2.0.1)
       hashie
       version_gem (~> 1.1, >= 1.1.1)
@@ -421,6 +436,7 @@ DEPENDENCIES
   capybara (>= 3.39.2)
   devise
   dotenv
+  erb_lint
   factory_bot_rails
   faker
   faraday-retry

README.md

@@ -5,20 +5,20 @@ application up and running.
 
 Things you may want to cover:
 
-* Ruby version
+- Ruby version
 
-* System dependencies
+- System dependencies
 
-* Configuration
+- Configuration
 
-* Database creation
+- Database creation
 
-* Database initialization
+- Database initialization
 
-* How to run the test suite
+- How to run the test suite
 
-* Services (job queues, cache servers, search engines, etc.)
+- Services (job queues, cache servers, search engines, etc.)
 
-* Deployment instructions
+- Deployment instructions
 
-* ...
+- ...

app/javascript/application.js

@@ -1,4 +1,4 @@
 // Entry point for the build script in your package.json
-import "@hotwired/turbo-rails"
-import "./controllers"
-import "../assets/stylesheets/application.tailwind.css";
+import '@hotwired/turbo-rails';
+import './controllers';
+import '../assets/stylesheets/application.tailwind.css';

app/javascript/channels/consumer.js

@@ -1,6 +1,6 @@
 // Action Cable provides the framework to deal with WebSockets in Rails.
 // You can generate new channels where WebSocket features live using the `bin/rails generate channel` command.
 
-import { createConsumer } from "@rails/actioncable"
+import { createConsumer } from '@rails/actioncable';
 
-export default createConsumer()
+export default createConsumer();

app/javascript/channels/index.js

@@ -1,5 +1,5 @@
 // Load all the channels within this directory and all subdirectories.
 // Channel files must be named *_channel.js.
 
-const channels = require.context('.', true, /_channel\.js$/)
-channels.keys().forEach(channels)
+const channels = require.context('.', true, /_channel\.js$/);
+channels.keys().forEach(channels);

app/javascript/controllers/application.js

@@ -1,9 +1,9 @@
-import { Application } from "@hotwired/stimulus"
+import { Application } from '@hotwired/stimulus';
 
-const application = Application.start()
+const application = Application.start();
 
 // Configure Stimulus development experience
-application.debug = false
-window.Stimulus   = application
+application.debug = false;
+window.Stimulus = application;
 
-export { application }
+export { application };

app/javascript/controllers/contribution_controller.js

@@ -1,14 +1,14 @@
-import { Controller } from "@hotwired/stimulus"
+import { Controller } from '@hotwired/stimulus';
 
 export default class extends Controller {
   static targets = [
-    "amountButton",
-    "currencyButton",
-    "walletAddress",
-    "contributeButton",
-    "customAmountModal",
-    "customAmountInput"
-  ]
+    'amountButton',
+    'currencyButton',
+    'walletAddress',
+    'contributeButton',
+    'customAmountModal',
+    'customAmountInput',
+  ];
 
   connect() {
     this.selectedAmount = 25;
@@ -35,7 +35,7 @@ export default class extends Controller {
     if (customAmount > 0) {
       this.hideCustomAmountModal();
     } else {
-      alert("Invalid custom amount. Please enter a number greater than 0.");
+      alert('Invalid custom amount. Please enter a number greater than 0.');
     }
   }
 
@@ -47,17 +47,19 @@ export default class extends Controller {
     const selectedAmount = event.currentTarget.dataset.contributionValue;
     this.selectedAmount = selectedAmount;
     this.highlightSelectedAmountButton(selectedAmount);
-    this.updateCustomAmountVisibility(); 
+    this.updateCustomAmountVisibility();
   }
 
-
   highlightSelectedAmountButton(selectedAmount) {
-    this.amountButtonTargets.forEach(button => {
-      const isSelected = button.dataset.contributionValue === selectedAmount || (selectedAmount === 'Custom' && button.dataset.contributionValue === 'Custom');
-      button.classList.toggle("bg-blue-500", isSelected);
-      button.classList.toggle("text-white", isSelected);
-      button.classList.toggle("bg-white", !isSelected);
-      button.classList.toggle("text-black", !isSelected);
+    this.amountButtonTargets.forEach((button) => {
+      const isSelected =
+        button.dataset.contributionValue === selectedAmount ||
+        (selectedAmount === 'Custom' &&
+          button.dataset.contributionValue === 'Custom');
+      button.classList.toggle('bg-blue-500', isSelected);
+      button.classList.toggle('text-white', isSelected);
+      button.classList.toggle('bg-white', !isSelected);
+      button.classList.toggle('text-black', !isSelected);
     });
   }
 
@@ -71,23 +73,28 @@ export default class extends Controller {
 
   selectCurrency(event) {
     const selectedCurrency = event.currentTarget.dataset.contributionValue;
-    this.currencyButtonTargets.forEach(button => {
+    this.currencyButtonTargets.forEach((button) => {
       const isSelected = button.dataset.contributionValue === selectedCurrency;
-      button.classList.toggle("bg-blue-500", isSelected);
-      button.classList.toggle("text-white", isSelected);
-      button.classList.toggle("bg-white", !isSelected);
-      button.classList.toggle("text-black", !isSelected);
+      button.classList.toggle('bg-blue-500', isSelected);
+      button.classList.toggle('text-white', isSelected);
+      button.classList.toggle('bg-white', !isSelected);
+      button.classList.toggle('text-black', !isSelected);
     });
   }
 
   contribute() {
-    const amountValue = this.selectedAmount === 'Custom' ? parseFloat(this.customAmountInputTarget.value) : this.selectedAmount;
+    const amountValue =
+      this.selectedAmount === 'Custom'
+        ? parseFloat(this.customAmountInputTarget.value)
+        : this.selectedAmount;
     let formattedAmount;
-    // code provided by library(web3.js/ethereum.js etc to transfer funds) 
-    
+    // code provided by library(web3.js/ethereum.js etc to transfer funds)
+
     if (!isNaN(amountValue) && amountValue > 0) {
       formattedAmount = `$${amountValue}`;
-      alert(`Thank you for your support of ${formattedAmount} in ${this.selectedCurrency} currency!`);
+      alert(
+        `Thank you for your support of ${formattedAmount} in ${this.selectedCurrency} currency!`
+      );
     }
   }
-}
+}

app/javascript/controllers/currency_controller.js

@@ -1,12 +1,12 @@
-import { Controller } from "@hotwired/stimulus"
+import { Controller } from '@hotwired/stimulus';
 
 export default class extends Controller {
   static targets = [
-    "currencyButton",
-    "selectAll",
-    "acceptedCurrencies",
-    "form"
-  ]
+    'currencyButton',
+    'selectAll',
+    'acceptedCurrencies',
+    'form',
+  ];
 
   connect() {
     this.selectedCurrencies = [];
@@ -19,10 +19,10 @@ export default class extends Controller {
     const currency = event.currentTarget.dataset.currencyValue;
     const button = event.currentTarget;
 
-    button.classList.toggle("bg-blue-500");
-    button.classList.toggle("text-white");
+    button.classList.toggle('bg-blue-500');
+    button.classList.toggle('text-white');
 
-    const isSelected = button.classList.contains("bg-blue-500");
+    const isSelected = button.classList.contains('bg-blue-500');
     if (isSelected) {
       if (!this.selectedCurrencies.includes(currency)) {
         this.selectedCurrencies.push(currency);
@@ -40,10 +40,10 @@ export default class extends Controller {
 
   selectAll(event) {
     const isChecked = this.selectAllTarget.checked;
-    const label = document.getElementById("select-all-label");
-    label.textContent = isChecked ? "Unselect All" : "Select All";
+    const label = document.getElementById('select-all-label');
+    label.textContent = isChecked ? 'Unselect All' : 'Select All';
 
-    this.currencyButtonTargets.forEach(button => {
+    this.currencyButtonTargets.forEach((button) => {
       button.classList.toggle('bg-blue-500', isChecked);
       button.classList.toggle('text-white', isChecked);
       const currency = button.dataset.currencyValue;
@@ -65,14 +65,14 @@ export default class extends Controller {
   }
 
   updateSelectAllState() {
-    const allSelected = this.currencyButtonTargets.every(button =>
-      button.classList.contains("bg-blue-500")
+    const allSelected = this.currencyButtonTargets.every((button) =>
+      button.classList.contains('bg-blue-500')
     );
 
     this.selectAllTarget.checked = allSelected;
 
-    const label = document.getElementById("select-all-label");
-    label.textContent = allSelected ? "Unselect All" : "Select All";
+    const label = document.getElementById('select-all-label');
+    label.textContent = allSelected ? 'Unselect All' : 'Select All';
   }
 
   handleSubmit(event) {