Sc 169993 move from webpacker to jsbundling in

.github/workflows/test_suite.yml

@@ -96,6 +96,9 @@ jobs:
           bundle config path vendor/bundle
           bundle install --jobs 4 --retry 3
 
+      - name: Build JavaScript assets
+        run: bin/rails javascript:build
+
       - name: Create DB
         env:
           RAILS_ENV: test

.gitignore

@@ -51,3 +51,6 @@ solana_cli_update_instruction.md
 data_center_override_instruction.md
 database_instructions.md
 deployment_instructions.md
+
+/app/assets/builds/*
+!/app/assets/builds/.keep

Gemfile

@@ -33,8 +33,8 @@ gem 'mysql2', '>= 0.5.6'
 # Use SCSS for stylesheets
 gem 'sass-rails', '>= 6'
 
-# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
-gem 'webpacker', '~> 5.4.4'
+# Bundle and transpile JavaScript. Read more: https://github.com/rails/jsbundling-rails
+gem 'jsbundling-rails', '~> 1.3'
 
 # Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
 gem 'turbolinks', '~> 5'

Gemfile.lock

@@ -224,6 +224,8 @@ GEM
       actionview (>= 5.0.0)
       activesupport (>= 5.0.0)
     jmespath (1.6.2)
+    jsbundling-rails (1.3.1)
+      railties (>= 6.0.0)
     json (2.9.1)
     kaminari (1.2.2)
       activesupport (>= 4.1.0)
@@ -360,8 +362,6 @@ GEM
       rack (>= 1.0, < 3)
     rack-cors (1.1.1)
       rack (>= 2.0.0)
-    rack-proxy (0.7.7)
-      rack
     rack-test (2.2.0)
       rack (>= 1.3)
     rails (6.1.7.10)
@@ -462,7 +462,6 @@ GEM
       rexml (~> 3.2, >= 3.2.5)
       rubyzip (>= 1.2.2, < 3.0)
       websocket (~> 1.0)
-    semantic_range (3.1.0)
     sexp_processor (4.17.3)
     sidekiq (7.3.9)
       base64
@@ -529,11 +528,6 @@ GEM
       addressable (>= 2.8.0)
       crack (>= 0.3.2)
       hashdiff (>= 0.4.0, < 2.0.0)
-    webpacker (5.4.4)
-      activesupport (>= 5.2)
-      rack-proxy (>= 0.6.1)
-      railties (>= 5.2)
-      semantic_range (>= 2.3.0)
     webrick (1.9.1)
     webrobots (0.1.2)
     websocket (1.2.11)
@@ -588,6 +582,7 @@ DEPENDENCIES
   hcaptcha (~> 7.1)
   image_processing (~> 1.14)
   jbuilder (~> 2.11)
+  jsbundling-rails (~> 1.3)
   json (~> 2.9.1)
   kaminari (~> 1.2.2)
   letter_opener_web
@@ -625,7 +620,6 @@ DEPENDENCIES
   web-console (>= 4.2.1)
   webdrivers
   webmock
-  webpacker (~> 5.4.4)
   websocket-extensions (>= 0.1.5)
   whenever
   wicked_pdf (~> 2.8, >= 2.8.2)

Procfile.dev

@@ -1,3 +1,4 @@
 web: bin/rails server -p 3000
 sidekiq: bundle exec sidekiq --config config/sidekiq.yml
 sidekiq_blockchain: bundle exec sidekiq --config config/sidekiq_blockchain.yml
+js: npm run build:dev

app/assets/config/manifest.js

@@ -1,2 +1,3 @@
 //= link_tree ../images
 //= link_directory ../stylesheets .css
+//= link_tree ../builds

app/assets/stylesheets/application.scss

@@ -14,6 +14,7 @@
 
 
 @import "@fortawesome/fontawesome-free/css/all.css";
+@import "bootstrap/scss/bootstrap";
 @import "variables";
 @import "typography";
 @import "buttons";

app/assets/stylesheets/cards.scss

@@ -31,4 +31,8 @@
     position: absolute;
     margin-top: -20px;
   }
+
+  [class*=table-responsive-] {
+    margin-bottom: 0;
+}
 }

app/assets/stylesheets/forms.scss

@@ -9,12 +9,17 @@
   height: 36px;
   padding-left: 18px;
   color: $background-color;
+  background-color: white;
   transition: .1s ease;
+  &::placeholder {
+    color: darken($base-color, 30%);
+  }
   &:focus {
     outline: none;
     border-color: transparent;
     box-shadow: 0 0 0 3px $green-transparent;
     color: $background-color;
+    background-color: white;
     transition: .1s ease;
   }
 }
@@ -44,7 +49,6 @@ input[type=submit] {
 }
 
 .field_with_errors {
-  label {}
   .form-control {
     box-shadow: 0 0 0 3px $red-transparent;
   }

app/helpers/application_helper.rb

@@ -58,4 +58,56 @@ def set_speedometer_needle_position(value:, single_range_size:)
     return value_in_percents unless (value < 0)
     100 - value_in_percents
   end
+
+  def frontend_config
+    {
+      api_authorization: Rails.application.credentials.api_authorization,
+      google_maps_api_key: Rails.application.credentials.google_maps_api_key,
+      assets: asset_paths_config
+    }
+  end
+
+  private
+
+  def asset_paths_config
+    {
+      'default-avatar.png' => asset_path('default-avatar.png'),
+      'agave.svg' => asset_path('agave.svg'),
+      'firedancer.svg' => asset_path('firedancer.svg'),
+      'loading.gif' => asset_path('loading.gif'),
+      'doublezero.svg' => asset_path('doublezero.svg'),
+      'doublezero_legacy.svg' => asset_path('doublezero_legacy.svg'),
+      'marinade-logo.svg' => asset_path('marinade-logo.svg'),
+      'marinade.png' => asset_path('marinade.png'),
+      'jpool-logo.svg' => asset_path('jpool-logo.svg'),
+      'jpool.png' => asset_path('jpool.png'),
+      'daopool-logo.png' => asset_path('daopool-logo.png'),
+      'daopool.png' => asset_path('daopool.png'),
+      'blazestake-logo.png' => asset_path('blazestake-logo.png'),
+      'blazestake.png' => asset_path('blazestake.png'),
+      'jito-logo.svg' => asset_path('jito-logo.svg'),
+      'jito.svg' => asset_path('jito.svg'),
+      'jito.png' => asset_path('jito.png'),
+      'edgevana-logo.svg' => asset_path('edgevana-logo.svg'),
+      'edgevana.png' => asset_path('edgevana.png'),
+      'aero-logo.svg' => asset_path('aero-logo.svg'),
+      'aero.png' => asset_path('aero.png'),
+      'shinobi-logo.png' => asset_path('shinobi-logo.png'),
+      'shinobi.png' => asset_path('shinobi.png'),
+      'vault-logo.png' => asset_path('vault-logo.png'),
+      'vault.png' => asset_path('vault.png'),
+      'jagpool-logo.png' => asset_path('jagpool-logo.png'),
+      'jagpool.png' => asset_path('jagpool.png'),
+      'dynosol-logo.png' => asset_path('dynosol-logo.png'),
+      'dynosol.png' => asset_path('dynosol.png'),
+      'definsol-logo.png' => asset_path('definsol-logo.png'),
+      'definsol.png' => asset_path('definsol.png'),
+      'lido-logo.svg' => asset_path('lido-logo.svg'),
+      'lido.png' => asset_path('lido.png'),
+      'socean-logo.svg' => asset_path('socean-logo.svg'),
+      'socean.png' => asset_path('socean.png'),
+      'zippystake-logo.svg' => asset_path('zippystake-logo.svg'),
+      'zippystake.png' => asset_path('zippystake.png')
+    }
+  end
 end

app/helpers/stake_pools_helper.rb

@@ -4,15 +4,15 @@ module StakePoolsHelper
   def stake_pool_logos(stake_pools)
     stake_pools.map do |stake_pool|
       MAINNET_STAKE_POOLS[stake_pool.downcase.to_sym] ? {
-        image: MAINNET_STAKE_POOLS[stake_pool.downcase.to_sym][:small_logo],
+        image: ActionController::Base.helpers.asset_path(MAINNET_STAKE_POOLS[stake_pool.downcase.to_sym][:small_logo]),
         name: stake_pool
       } : nil
     end.compact
   end
 
   def shuffle_logos
     MAINNET_STAKE_POOLS.map do |pool_key, pool_data|
-      pool_data[:deleted] ? nil : [pool_data[:url], pool_data[:large_logo]]
+      pool_data[:deleted] ? nil : [pool_data[:url], ActionController::Base.helpers.asset_path(pool_data[:large_logo])]
     end.compact.shuffle
   end
 end

app/javascript/application.js

@@ -0,0 +1,59 @@
+// Entry point for the build script in your package.json
+// This replaces app/javascript/packs/application.js
+
+import $ from 'jquery'
+window.$ = window.jQuery = $
+
+import 'bootstrap'
+import AppConfig from './packs/shared/app_config'
+
+const configElement = document.getElementById('app-config-data');
+if (configElement) {
+  try {
+    const configData = JSON.parse(configElement.textContent);
+
+    // Initialize AppConfig with the data from Rails
+    AppConfig.init(configData);
+
+  } catch (error) {
+    console.error('Failed to parse app configuration:', error);
+  }
+}
+
+import Turbolinks from "turbolinks"
+if (!window.Turbolinks) {
+  Turbolinks.start()
+}
+
+import Rails from "@rails/ujs"
+Rails.start()
+
+import * as ActiveStorage from "@rails/activestorage"
+ActiveStorage.start()
+
+const ActionCable = require('@rails/actioncable')
+if (!window.ActionCableConnection) {
+  window.ActionCableConnection = ActionCable.createConsumer('/cable')
+}
+
+import Vue from 'vue/dist/vue.esm'
+import Vuex from 'vuex'
+import store from "./packs/stores/main_store.js"
+import configuredAxios from "./packs/shared/configured_axios"
+
+window.axios = configuredAxios
+
+Vue.use(Vuex)
+window.globalStore = store
+
+// Import channels (if they exist)
+// import "./channels"
+
+// Import moment
+// import moment from "moment"
+
+// Import src files
+import './src/sol_prices_charts'
+import './src/watch_buttons' 
+import './src/chart_links'
+import './src/score_modal_trigger'

app/javascript/packs/account_authority_histories/index_template.vue

@@ -74,14 +74,7 @@
 </template>
 
 <script>
-  import axios from 'axios'
   import { mapGetters } from 'vuex'
-  import loadingImage from 'loading.gif'
-  import '../mixins/dates_mixins'
-  import '../mixins/arrays_mixins'
-  import '../mixins/validators_mixins'
-
-  axios.defaults.headers.get["Authorization"] = window.api_authorization
 
   const PER_SIZE = 20
 
@@ -102,7 +95,7 @@
       return {
         histories: [],
         is_loading: true,
-        loading_image: loadingImage,
+        loading_image: window.loading_gif_url || '/assets/loading.gif',
         page: 1,
         total_count: 0
       }
@@ -148,7 +141,7 @@
 
       send_request() {
         const ctx = this
-        axios.get(ctx.account_authorities_path())
+        window.axios.get(ctx.account_authorities_path())
              .then(response => {
                ctx.histories = response.data.authority_changes
                ctx.total_count = response.data.total_count

app/javascript/packs/clusters/cluster_numbers_component.js

@@ -1,16 +1,9 @@
-import Vue from 'vue/dist/vue.esm'
-import ClusterNumbersTemplate from './cluster_numbers_component'
+import Vue from '../shared/vue_setup'
+import ClusterNumbersTemplate from './cluster_numbers_component.vue'
 import TurbolinksAdapter from 'vue-turbolinks';
 import store from "../stores/main_store.js";
-import ActionCableVue from "actioncable-vue";
 
 Vue.use(TurbolinksAdapter);
-Vue.use(ActionCableVue, {
-  debug: true,
-  debugLevel: "error",
-  connectionUrl: "/cable",
-  connectImmediately: true,
-});
 
 document.addEventListener('turbolinks:load', () => {
   const chindex = new Vue({