Add account analytics

apps/block_scout_web/assets/js/pages/layout.js

@@ -1,5 +1,195 @@
 import $ from 'jquery'
 import { addChainToMM } from '../lib/add_chain_to_mm'
+import mixpanel from 'mixpanel-browser'
+import { init as amplitudeInit, track as amplitudeTrack } from '@amplitude/analytics-browser'
+
+const mixpanelToken = process.env.MIXPANEL_TOKEN
+const amplitudeApiKey = process.env.AMPLITUDE_API_KEY
+const mixpanelUrl = process.env.MIXPANEL_URL
+const amplitudeUrl = process.env.AMPLITUDE_URL
+
+if (mixpanelToken) {
+  if (mixpanelUrl) {
+    mixpanel.init(mixpanelToken, { api_host: mixpanelUrl })
+  } else {
+    mixpanel.init(mixpanelToken)
+  }
+}
+
+if (amplitudeApiKey) {
+  if (amplitudeUrl) {
+    amplitudeInit(amplitudeApiKey, { serverUrl: amplitudeUrl })
+  } else {
+    amplitudeInit(amplitudeApiKey)
+  }
+}
+
+const simpleEvents = {
+  '.profile-button': 'Profile click',
+  '.watchlist-button': 'Watch list click',
+  '.address-tags-button': 'Address tags click',
+  '.transaction-tags-button': 'Transaction tags click',
+  '.api-keys-button': 'API keys click',
+  '.custom-abi-button': 'Custom ABI click',
+  '.public-tags-button': 'Public tags click',
+  '.sign-out-button': 'Sign out click',
+  '.sign-in-button': 'Sign in click',
+  '.add-address-button': 'Add address to watch list click',
+  '.add-address-tag-button': 'Add address tag click',
+  '.add-transaction-tag-button': 'Add transaction tag click',
+  '.add-api-key-button': 'Add API key click',
+  '.add-custom-abi-button': 'Add custom ABI click',
+  '.add-public-tag-button': 'Request to add public tag click'
+}
+
+if (mixpanelToken || amplitudeApiKey) {
+  for (const elementClass in simpleEvents) {
+    $(elementClass).click((_event) => {
+      if (mixpanelToken) {
+        mixpanel.track(simpleEvents[elementClass])
+      }
+
+      if (amplitudeApiKey) {
+        amplitudeTrack(simpleEvents[elementClass])
+      }
+    })
+  }
+}
+
+$('.save-address-button').click((_event) => {
+  const eventProperties = {
+    address_hash: $('#watchlist_address_address_hash').val(),
+    private_tag: $('#watchlist_address_name').val(),
+    eth_incoming: $('#watchlist_address_watch_coin_input').prop('checked'),
+    eth_outgoing: $('#watchlist_address_watch_coin_output').prop('checked'),
+    erc_20_incoming: $('#watchlist_address_watch_erc_20_input').prop('checked'),
+    erc_20_outgoing: $('#watchlist_address_watch_erc_20_output').prop('checked'),
+    erc_721_1155_incoming: $('#watchlist_address_watch_erc_721_input').prop('checked'),
+    erc_721_1155_outgoing: $('#watchlist_address_watch_erc_721_output').prop('checked'),
+    email_notifications: $('#watchlist_address_notify_email').prop('checked')
+  }
+  const eventName = 'New address to watchlist completed'
+
+  if (mixpanelToken) {
+    mixpanel.track(eventName, eventProperties)
+  }
+
+  if (amplitudeApiKey) {
+    amplitudeTrack(eventName, eventProperties)
+  }
+})
+
+$('.save-address-tag-button').click((_event) => {
+  const eventProperties = {
+    address_hash: $('#tag_address_address_hash').val(),
+    private_tag: $('#tag_address_name').val()
+  }
+  const eventName = 'Add address tag completed'
+
+  if (mixpanelToken) {
+    mixpanel.track(eventName, eventProperties)
+  }
+
+  if (amplitudeApiKey) {
+    amplitudeTrack(eventName, eventProperties)
+  }
+})
+
+$('.save-transaction-tag-button').click((_event) => {
+  const eventProperties = {
+    address_hash: $('#tag_transaction_tx_hash').val(),
+    private_tag: $('#tag_transaction_name').val()
+  }
+  const eventName = 'Add transaction tag completed'
+
+  if (mixpanelToken) {
+    mixpanel.track(eventName, eventProperties)
+  }
+
+  if (amplitudeApiKey) {
+    amplitudeTrack(eventName, eventProperties)
+  }
+})
+
+$('.save-api-key-button').click((_event) => {
+  const eventProperties = {
+    application_name: $('#key_name').val()
+  }
+  const eventName = 'Generate API key completed'
+
+  if (mixpanelToken) {
+    mixpanel.track(eventName, eventProperties)
+  }
+
+  if (amplitudeApiKey) {
+    amplitudeTrack(eventName, eventProperties)
+  }
+})
+
+$('.save-custom-abi-button').click((_event) => {
+  const eventProperties = {
+    smart_contract_address: $('#custom_abi_address_hash').val(),
+    project_name: $('#custom_abi_name').val(),
+    custom_abi: $('#custom_abi_abi').val()
+  }
+  const eventName = 'Custom ABI completed'
+
+  if (mixpanelToken) {
+    mixpanel.track(eventName, eventProperties)
+  }
+
+  if (amplitudeApiKey) {
+    amplitudeTrack(eventName, eventProperties)
+  }
+})
+
+$('.send-public-tag-request-button').click((_event) => {
+  const eventProperties = {
+    name: $('#public_tags_request_full_name').val(),
+    email: $('#public_tags_request_email').val(),
+    company_name: $('#public_tags_request_company').val(),
+    company_website: $('#public_tags_request_website').val(),
+    goal: $('#public_tags_request_is_owner_true').prop('checked') ? 'Add tags' : 'Incorrect public tag',
+    public_tag: $('#public_tags_request_tags').val(),
+    smart_contracts: $('*[id=public_tags_request_addresses]').map((_i, el) => {
+        return el.value
+      }).get(),
+    reason: $('#public_tags_request_additional_comment').val()
+  }
+  const eventName = 'Request a public tag completed'
+
+  if (mixpanelToken) {
+    mixpanel.track(eventName, eventProperties)
+  }
+
+  if (amplitudeApiKey) {
+    amplitudeTrack(eventName, eventProperties)
+  }
+})
+
+$('#public_tags_request_additional_comment').click((_event) => {
+  const eventProperties = {
+    name: $('#public_tags_request_full_name').val(),
+    email: $('#public_tags_request_email').val(),
+    company_name: $('#public_tags_request_company').val(),
+    company_website: $('#public_tags_request_website').val(),
+    goal: $('#public_tags_request_is_owner_true').prop('checked') ? 'Add tags' : 'Incorrect public tag',
+    public_tag: $('#public_tags_request_tags').val(),
+    smart_contracts: $('*[id=public_tags_request_addresses]').map((_i, el) => {
+        return el.value
+      }).get(),
+    reason: $('#public_tags_request_additional_comment').val()
+  }
+  const eventName = 'Request a public tag completed'
+
+  if (mixpanelToken) {
+    mixpanel.track(eventName, eventProperties)
+  }
+
+  if (amplitudeApiKey) {
+    amplitudeTrack(eventName, eventProperties)
+  }
+})
 
 $(document).click(function (event) {
   const clickover = $(event.target)

apps/block_scout_web/assets/package-lock.json

@@ -7,6 +7,7 @@
       "name": "blockscout",
       "license": "GPL-3.0",
       "dependencies": {
+        "@amplitude/analytics-browser": "^1.6.1",
         "@fortawesome/fontawesome-free": "^6.2.1",
         "@tarekraafat/autocomplete.js": "^10.2.7",
         "@walletconnect/web3-provider": "^1.8.0",
@@ -44,6 +45,7 @@
         "lodash.rangeright": "^4.2.0",
         "lodash.reduce": "^4.6.0",
         "luxon": "^3.1.1",
+        "mixpanel-browser": "^2.45.0",
         "moment": "^2.29.4",
         "nanomorph": "^5.4.0",
         "numeral": "^2.0.6",
@@ -103,6 +105,84 @@
     "../../../deps/phoenix_html": {
       "version": "0.0.1"
     },
+    "node_modules/@amplitude/analytics-browser": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/@amplitude/analytics-browser/-/analytics-browser-1.6.1.tgz",
+      "integrity": "sha512-i9Mt3p6ikZm7zu6QRMIziSzNwWW3F2zEIKoOoBbMxy97hSliM93/VoLBLOzwMhusHK3Xy5OwcIgYVUHdXbmigw==",
+      "dependencies": {
+        "@amplitude/analytics-client-common": "^0.4.0",
+        "@amplitude/analytics-core": "^0.10.0",
+        "@amplitude/analytics-types": "^0.12.0",
+        "@amplitude/ua-parser-js": "^0.7.31",
+        "tslib": "^2.3.1"
+      }
+    },
+    "node_modules/@amplitude/analytics-browser/node_modules/tslib": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz",
+      "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA=="
+    },
+    "node_modules/@amplitude/analytics-client-common": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@amplitude/analytics-client-common/-/analytics-client-common-0.4.0.tgz",
+      "integrity": "sha512-I3cy6AYCiVUqXAD6yU+tm3qBZdEyrdruDaUS/vVPoi+MvHIkZIXw7xaQjmkBRURWCgdcxu5LioU8r1ld1widtA==",
+      "dependencies": {
+        "@amplitude/analytics-connector": "^1.4.5",
+        "@amplitude/analytics-core": "^0.10.0",
+        "@amplitude/analytics-types": "^0.12.0",
+        "tslib": "^2.3.1"
+      }
+    },
+    "node_modules/@amplitude/analytics-client-common/node_modules/tslib": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz",
+      "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA=="
+    },
+    "node_modules/@amplitude/analytics-connector": {
+      "version": "1.4.6",
+      "resolved": "https://registry.npmjs.org/@amplitude/analytics-connector/-/analytics-connector-1.4.6.tgz",
+      "integrity": "sha512-6jD2pOosRD4y8DT8StUCz7yTd5ZDkdOU9/AWnlWKM5qk90Mz7sdZrdZ9H7sA/L3yOJEpQOYZgQplQdWWUzyWug==",
+      "dependencies": {
+        "@amplitude/ua-parser-js": "0.7.31"
+      }
+    },
+    "node_modules/@amplitude/analytics-core": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/@amplitude/analytics-core/-/analytics-core-0.10.0.tgz",
+      "integrity": "sha512-D/6U9SzyDmcNWnT/lFnBKfYl4ASicLlwD1tqu4RZoYS3SwHd/PNST+LbnL3yBTEIJIY//qjth9lLBh/RRzePfg==",
+      "dependencies": {
+        "@amplitude/analytics-types": "^0.12.0",
+        "tslib": "^2.3.1"
+      }
+    },
+    "node_modules/@amplitude/analytics-core/node_modules/tslib": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz",
+      "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA=="
+    },
+    "node_modules/@amplitude/analytics-types": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/@amplitude/analytics-types/-/analytics-types-0.12.0.tgz",
+      "integrity": "sha512-XwySEhnCdU8fNWUNaB38JS7bwOt4GOUG8OqgzuXtR8HvGnpCvuT7C6H+BIGA7MfctNQBAzR+6IBgDD+8r1/OEQ=="
+    },
+    "node_modules/@amplitude/ua-parser-js": {
+      "version": "0.7.31",
+      "resolved": "https://registry.npmjs.org/@amplitude/ua-parser-js/-/ua-parser-js-0.7.31.tgz",
+      "integrity": "sha512-+z8UGRaj13Pt5NDzOnkTBy49HE2CX64jeL0ArB86HAtilpnfkPB7oqkigN7Lf2LxscMg4QhFD7mmCfedh3rqTg==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/ua-parser-js"
+        },
+        {
+          "type": "paypal",
+          "url": "https://paypal.me/faisalman"
+        }
+      ],
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/@ampproject/remapping": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.0.tgz",
@@ -12292,6 +12372,11 @@
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
       "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q=="
     },
+    "node_modules/mixpanel-browser": {
+      "version": "2.45.0",
+      "resolved": "https://registry.npmjs.org/mixpanel-browser/-/mixpanel-browser-2.45.0.tgz",
+      "integrity": "sha512-PQ1DaTk68yyYtLA0iejmzPA9iNDhT4uIZpqZjRTw7HWpYfl123fydHb2laKanaKjm8YDmrGGz3+xZ4Q6joogyg=="
+    },
     "node_modules/mkdirp": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
@@ -16985,6 +17070,77 @@
     }
   },
   "dependencies": {
+    "@amplitude/analytics-browser": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/@amplitude/analytics-browser/-/analytics-browser-1.6.1.tgz",
+      "integrity": "sha512-i9Mt3p6ikZm7zu6QRMIziSzNwWW3F2zEIKoOoBbMxy97hSliM93/VoLBLOzwMhusHK3Xy5OwcIgYVUHdXbmigw==",
+      "requires": {
+        "@amplitude/analytics-client-common": "^0.4.0",
+        "@amplitude/analytics-core": "^0.10.0",
+        "@amplitude/analytics-types": "^0.12.0",
+        "@amplitude/ua-parser-js": "^0.7.31",
+        "tslib": "^2.3.1"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.4.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz",
+          "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA=="
+        }
+      }
+    },
+    "@amplitude/analytics-client-common": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@amplitude/analytics-client-common/-/analytics-client-common-0.4.0.tgz",
+      "integrity": "sha512-I3cy6AYCiVUqXAD6yU+tm3qBZdEyrdruDaUS/vVPoi+MvHIkZIXw7xaQjmkBRURWCgdcxu5LioU8r1ld1widtA==",
+      "requires": {
+        "@amplitude/analytics-connector": "^1.4.5",
+        "@amplitude/analytics-core": "^0.10.0",
+        "@amplitude/analytics-types": "^0.12.0",
+        "tslib": "^2.3.1"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.4.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz",
+          "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA=="
+        }
+      }
+    },
+    "@amplitude/analytics-connector": {
+      "version": "1.4.6",
+      "resolved": "https://registry.npmjs.org/@amplitude/analytics-connector/-/analytics-connector-1.4.6.tgz",
+      "integrity": "sha512-6jD2pOosRD4y8DT8StUCz7yTd5ZDkdOU9/AWnlWKM5qk90Mz7sdZrdZ9H7sA/L3yOJEpQOYZgQplQdWWUzyWug==",
+      "requires": {
+        "@amplitude/ua-parser-js": "0.7.31"
+      }
+    },
+    "@amplitude/analytics-core": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/@amplitude/analytics-core/-/analytics-core-0.10.0.tgz",
+      "integrity": "sha512-D/6U9SzyDmcNWnT/lFnBKfYl4ASicLlwD1tqu4RZoYS3SwHd/PNST+LbnL3yBTEIJIY//qjth9lLBh/RRzePfg==",
+      "requires": {
+        "@amplitude/analytics-types": "^0.12.0",
+        "tslib": "^2.3.1"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.4.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz",
+          "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA=="
+        }
+      }
+    },
+    "@amplitude/analytics-types": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/@amplitude/analytics-types/-/analytics-types-0.12.0.tgz",
+      "integrity": "sha512-XwySEhnCdU8fNWUNaB38JS7bwOt4GOUG8OqgzuXtR8HvGnpCvuT7C6H+BIGA7MfctNQBAzR+6IBgDD+8r1/OEQ=="
+    },
+    "@amplitude/ua-parser-js": {
+      "version": "0.7.31",
+      "resolved": "https://registry.npmjs.org/@amplitude/ua-parser-js/-/ua-parser-js-0.7.31.tgz",
+      "integrity": "sha512-+z8UGRaj13Pt5NDzOnkTBy49HE2CX64jeL0ArB86HAtilpnfkPB7oqkigN7Lf2LxscMg4QhFD7mmCfedh3rqTg=="
+    },
     "@ampproject/remapping": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.0.tgz",
@@ -26264,6 +26420,11 @@
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
       "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q=="
     },
+    "mixpanel-browser": {
+      "version": "2.45.0",
+      "resolved": "https://registry.npmjs.org/mixpanel-browser/-/mixpanel-browser-2.45.0.tgz",
+      "integrity": "sha512-PQ1DaTk68yyYtLA0iejmzPA9iNDhT4uIZpqZjRTw7HWpYfl123fydHb2laKanaKjm8YDmrGGz3+xZ4Q6joogyg=="
+    },
     "mkdirp": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",

apps/block_scout_web/assets/package.json

@@ -20,6 +20,7 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.2.1",
+    "@amplitude/analytics-browser": "^1.6.1",
     "@tarekraafat/autocomplete.js": "^10.2.7",
     "@walletconnect/web3-provider": "^1.8.0",
     "assert": "^2.0.0",
@@ -56,6 +57,7 @@
     "lodash.rangeright": "^4.2.0",
     "lodash.reduce": "^4.6.0",
     "luxon": "^3.1.1",
+    "mixpanel-browser": "^2.45.0",
     "moment": "^2.29.4",
     "nanomorph": "^5.4.0",
     "numeral": "^2.0.6",

apps/block_scout_web/assets/webpack.config.js

@@ -164,7 +164,11 @@ const appJs =
       new ContextReplacementPlugin(/moment[\/\\]locale$/, /en/),
       new webpack.DefinePlugin({
         'process.env.SOCKET_ROOT': JSON.stringify(process.env.SOCKET_ROOT),
-        'process.env.NETWORK_PATH': JSON.stringify(process.env.NETWORK_PATH)
+        'process.env.NETWORK_PATH': JSON.stringify(process.env.NETWORK_PATH),
+        'process.env.MIXPANEL_TOKEN': JSON.stringify(process.env.MIXPANEL_TOKEN),
+        'process.env.MIXPANEL_URL': JSON.stringify(process.env.MIXPANEL_URL),
+        'process.env.AMPLITUDE_API_KEY': JSON.stringify(process.env.AMPLITUDE_API_KEY),
+        'process.env.AMPLITUDE_URL': JSON.stringify(process.env.AMPLITUDE_URL)
       }),
       new webpack.ProvidePlugin({
         process: 'process/browser',

apps/block_scout_web/config/config.exs

@@ -99,6 +99,10 @@ config :block_scout_web, BlockScoutWeb.ApiRouter,
 
 config :block_scout_web, BlockScoutWeb.WebRouter, enabled: System.get_env("DISABLE_WEBAPP") != "true"
 
+config :block_scout_web, BlockScoutWeb.CSPHeader,
+  mixpanel_url: System.get_env("MIXPANEL_URL", "https://api-js.mixpanel.com"),
+  amplitude_url: System.get_env("AMPLITUDE_URL", "https://api2.amplitude.com/2/httpapi")
+
 # Configures Ueberauth local settings
 config :ueberauth, Ueberauth,
   providers: [

apps/block_scout_web/lib/block_scout_web/csp_header.ex

@@ -9,9 +9,11 @@ defmodule BlockScoutWeb.CSPHeader do
   def init(opts), do: opts
 
   def call(conn, _opts) do
+    config = Application.get_env(:block_scout_web, __MODULE__)
+
     Controller.put_secure_browser_headers(conn, %{
       "content-security-policy" => "\
-        connect-src 'self' #{websocket_endpoints(conn)} wss://*.bridge.walletconnect.org/ https://request-global.czilladx.com/ https://raw.githubusercontent.com/trustwallet/assets/ https://registry.walletconnect.org/data/wallets.json https://*.poa.network;\
+        connect-src 'self' #{config[:mixpanel_url]} #{config[:amplitude_url]} #{websocket_endpoints(conn)} wss://*.bridge.walletconnect.org/ https://request-global.czilladx.com/ https://raw.githubusercontent.com/trustwallet/assets/ https://registry.walletconnect.org/data/wallets.json https://*.poa.network;\
         default-src 'self';\
         script-src 'self' 'unsafe-inline' 'unsafe-eval' https://coinzillatag.com https://www.google.com https://www.gstatic.com;\
         style-src 'self' 'unsafe-inline' 'unsafe-eval' https://fonts.googleapis.com;\

apps/block_scout_web/lib/block_scout_web/templates/account/api_key/form.html.eex

@@ -23,7 +23,7 @@
               <br>
               <div class="form-group float-right form-input">
                 <a class="btn btn-line"  href="<%= api_key_path(@conn, :index) %>"><%= gettext "Back to API keys (Cancel)"%></a>
-                <%= submit gettext("Save"), class: "button button-primary button-sm ml-3" %>
+                <%= submit gettext("Save"), class: "save-api-key-button button button-primary button-sm ml-3" %>
               </div>
             <% end %>
           </div>

apps/block_scout_web/lib/block_scout_web/templates/account/api_key/index.html.eex

@@ -41,11 +41,11 @@
             </div>
           </div>
           <%= if Enum.count(@api_keys) < Key.get_max_api_keys_count() do %>
-            <a class="button button-primary button-sm" href="<%= api_key_path(@conn, :new) %>"><%= gettext "Add API key" %></a>
+            <a class="add-api-key-button button button-primary button-sm" href="<%= api_key_path(@conn, :new) %>"><%= gettext "Add API key" %></a>
           <% end %>
         </div>
       </div>
     </div>
   </div>
   <script defer data-cfasync="false" src="<%= static_path(@conn, "/js/delete-item-handler.js") %>"></script>
-</section>
+</section>

apps/block_scout_web/lib/block_scout_web/templates/account/common/_nav.html.eex

@@ -1,25 +1,25 @@
 <div class="col-2 mb-3 navbar-account">
   <ul class="nav account flex-column nav-pills">
     <li class="nav-item account">
-      <a class="<%= nav_class(@active_item, :profile) %>" aria-current="page" href="<%= auth_path(@conn, :profile) %>"><%= gettext "Profile" %></a>
+      <a class="profile-button <%= nav_class(@active_item, :profile) %>" aria-current="page" href="<%= auth_path(@conn, :profile) %>"><%= gettext "Profile" %></a>
     </li>
     <li class="nav-item account">
-      <a class="<%= nav_class(@active_item, :watchlist) %>" href="<%= watchlist_path(@conn, :show) %>"><%= gettext "Watch list" %></a>
+      <a class="watchlist-button <%= nav_class(@active_item, :watchlist) %>" href="<%= watchlist_path(@conn, :show) %>"><%= gettext "Watch list" %></a>
     </li>
     <li class="nav-item account">
-      <a class="<%= nav_class(@active_item, :address_tags) %>" href="<%= tag_address_path(@conn, :index) %>"><%= gettext "Address Tags" %></a>
+      <a class="address-tags-button <%= nav_class(@active_item, :address_tags) %>" href="<%= tag_address_path(@conn, :index) %>"><%= gettext "Address Tags" %></a>
     </li>
     <li class="nav-item account">
-      <a class="<%= nav_class(@active_item, :transaction_tags) %>" href="<%= tag_transaction_path(@conn, :index) %>"><%= gettext "Transaction Tags" %></a>
+      <a class="transaction-tags-button <%= nav_class(@active_item, :transaction_tags) %>" href="<%= tag_transaction_path(@conn, :index) %>"><%= gettext "Transaction Tags" %></a>
     </li>
     <li class="nav-item account">
-      <a class="<%= nav_class(@active_item, :api_keys) %>" href="<%= api_key_path(@conn, :index) %>"><%= gettext "API keys" %></a>
+      <a class="api-keys-button <%= nav_class(@active_item, :api_keys) %>" href="<%= api_key_path(@conn, :index) %>"><%= gettext "API keys" %></a>
     </li>
     <li class="nav-item account">
-      <a class="<%= nav_class(@active_item, :custom_abis) %>" href="<%= custom_abi_path(@conn, :index) %>"><%= gettext "Custom ABI" %></a>
+      <a class="custom-abi-button <%= nav_class(@active_item, :custom_abis) %>" href="<%= custom_abi_path(@conn, :index) %>"><%= gettext "Custom ABI" %></a>
     </li>
     <li class="nav-item account">
-      <a class="<%= nav_class(@active_item, :public_tags) %>" href="<%= public_tags_request_path(@conn, :index) %>"><%= gettext "Public tags" %></a>
+      <a class="public-tags-button <%= nav_class(@active_item, :public_tags) %>" href="<%= public_tags_request_path(@conn, :index) %>"><%= gettext "Public tags" %></a>
     </li>
   </ul>
 </div>

apps/block_scout_web/lib/block_scout_web/templates/account/custom_abi/form.html.eex

@@ -28,7 +28,7 @@
               <br>
               <div class="form-group float-right form-input">
                 <a class="btn btn-line" href="<%= custom_abi_path(@conn, :index) %>"><%= gettext "Back to Custom ABI (Cancel)"%></a>
-                <%= submit gettext("Save"), class: "button button-primary button-sm ml-3" %>
+                <%= submit gettext("Save"), class: "save-custom-abi-button button button-primary button-sm ml-3" %>
               </div>
             <% end %>
           </div>

apps/block_scout_web/lib/block_scout_web/templates/account/custom_abi/index.html.eex

@@ -41,11 +41,11 @@
             </div>
           </div>
           <%= if Enum.count(@custom_abis) < CustomABI.get_max_custom_abis_count() do %>
-            <a class="button button-primary button-sm" href="<%= custom_abi_path(@conn, :new) %>"><%= gettext "Add Custom ABI" %></a>
+            <a class="add-custom-abi-button button button-primary button-sm" href="<%= custom_abi_path(@conn, :new) %>"><%= gettext "Add Custom ABI" %></a>
           <% end %>
         </div>
       </div>
     </div>
   </div>
   <script defer data-cfasync="false" src="<%= static_path(@conn, "/js/delete-item-handler.js") %>"></script>
-</section>
+</section>

apps/block_scout_web/lib/block_scout_web/templates/account/public_tags_request/form.html.eex

@@ -60,7 +60,7 @@
               <br>
               <div class="form-group float-left form-input">
                 <a class="btn btn-line" href="<%= public_tags_request_path(@conn, :index) %>"><%= gettext "Cancel"%></a>
-                <%= submit gettext("Send request"), class: "button button-primary button-sm ml-3" %>
+                <%= submit gettext("Send request"), class: "send-public-tag-request-button button button-primary button-sm ml-3" %>
               </div>
             <% end %>
           </div>
@@ -69,4 +69,4 @@
     </div>
   </div>
   <script defer data-cfasync="false" src="<%= static_path(@conn, "/js/public-tags-request-form.js") %>"></script>
-</section>
+</section>

apps/block_scout_web/lib/block_scout_web/templates/account/public_tags_request/index.html.eex

@@ -34,11 +34,11 @@
             </div>
           </div>
           <%= if Enum.count(@public_tags_requests) < PublicTagsRequest.get_max_public_tags_request_count() do %>
-            <a class="button button-primary button-sm" href="<%= public_tags_request_path(@conn, :new) %>"><%= gettext "Request to add public tag" %></a>
+            <a class="add-public-tag-button button button-primary button-sm" href="<%= public_tags_request_path(@conn, :new) %>"><%= gettext "Request to add public tag" %></a>
           <% end %>
         </div>
       </div>
     </div>
   </div>
   <script defer data-cfasync="false" src="<%= static_path(@conn, "/js/delete-item-handler.js") %>"></script>
-</section>
+</section>

apps/block_scout_web/lib/block_scout_web/templates/account/tag_address/form.html.eex

@@ -22,7 +22,7 @@
 
               <div class="form-group float-right form-input">
                 <a class="btn btn-line" href="<%= tag_address_path(@conn, :index) %>"><%= gettext "Back to Address Tags (Cancel)"%></a>
-                <%= submit gettext("Save"), class: "button button-primary button-sm ml-3" %>
+                <%= submit gettext("Save"), class: "save-address-tag-button button button-primary button-sm ml-3" %>
               </div>
             <% end %>
           </div>

apps/block_scout_web/lib/block_scout_web/templates/account/tag_address/index.html.eex

@@ -34,7 +34,7 @@
             </div>
           </div>
           <%= if Enum.count(@address_tags) < TagAddress.get_max_tags_count() do %>
-            <a class="button button-primary button-sm" href="<%= tag_address_path(@conn, :new) %>"><%= gettext "Add address tag" %></a>
+            <a class="add-address-tag-button button button-primary button-sm" href="<%= tag_address_path(@conn, :new) %>"><%= gettext "Add address tag" %></a>
           <% end %>
         </div>
       </div>

apps/block_scout_web/lib/block_scout_web/templates/account/tag_transaction/form.html.eex

@@ -22,7 +22,7 @@
 
               <div class="form-group float-right form-input">
                 <a class="btn btn-line"  href="<%= tag_transaction_path(@conn, :index) %>"><%= gettext "Back to Transaction Tags (Cancel)"%></a>
-                <%= submit gettext("Save"), class: "button button-primary button-sm ml-3" %>
+                <%= submit gettext("Save"), class: "save-transaction-tag-button button button-primary button-sm ml-3" %>
               </div>
             <% end %>
           </div>

apps/block_scout_web/lib/block_scout_web/templates/account/tag_transaction/index.html.eex

@@ -34,7 +34,7 @@
             </div>
           </div>
           <%= if Enum.count(@tx_tags) < TagTransaction.get_max_tags_count() do %>
-            <a class="button button-primary button-sm" href="<%= tag_transaction_path(@conn, :new) %>"><%= gettext "Add transaction tag" %></a>
+            <a class="add-transaction-tag-button button button-primary button-sm" href="<%= tag_transaction_path(@conn, :new) %>"><%= gettext "Add transaction tag" %></a>
           <% end %>
         </div>
       </div>

apps/block_scout_web/lib/block_scout_web/templates/account/watchlist/show.html.eex

@@ -35,7 +35,7 @@
             </div>
           </div>
           <%= if Enum.count(@watchlist.watchlist_addresses) < WatchlistAddress.get_max_watchlist_addresses_count() do %>
-            <a class="button button-primary button-sm" href="<%= watchlist_address_path(@conn, :new) %>"><%= gettext "Add address" %></a>
+            <a class="add-address-button button button-primary button-sm" href="<%= watchlist_address_path(@conn, :new) %>"><%= gettext "Add address" %></a>
           <% end %>
         </div>
       </div>

apps/block_scout_web/lib/block_scout_web/templates/account/watchlist_address/form.html.eex

@@ -80,7 +80,7 @@
                 <a class="btn btn-line"  href="<%= watchlist_path(@conn, :show) %>">
                   <%= gettext "Back to Watch list (Cancel)" %>
                 </a>
-                <%= submit gettext("Save"), class: "button button-primary button-sm ml-3" %>
+                <%= submit gettext("Save"), class: "#{if @method == :create, do: "save-address-button "}button button-primary button-sm ml-3" %>
               </div>
             <% end %>
           </div>

apps/block_scout_web/lib/block_scout_web/templates/layout/_account_menu_item.html.eex

@@ -8,26 +8,26 @@
         </a>
         <div class="dropdown-menu" aria-labelledby="navbarBlocksDropdown">
             <div class="header dropdown-item">
-            <%= "Signed in as " <> Plug.Conn.get_session(@conn, :current_user)[:nickname] %>
+            <%= gettext("Signed in as ") <> Plug.Conn.get_session(@conn, :current_user)[:nickname] %>
             </div>
-            <a href="<%= auth_path(@conn, :profile) %>" class= "dropdown-item"><%= gettext "Profile" %></a>
+            <a href="<%= auth_path(@conn, :profile) %>" class= "profile-button dropdown-item"><%= gettext "Profile" %></a>
-            <a href="<%= watchlist_path(@conn, :show) %>" class= "dropdown-item"><%= gettext "Watch list" %></a>
+            <a href="<%= watchlist_path(@conn, :show) %>" class= "watchlist-button dropdown-item"><%= gettext "Watch list" %></a>
-            <a href="<%= tag_address_path(@conn, :index) %>" class= "dropdown-item"><%= gettext "Address Tags" %></a>
+            <a href="<%= tag_address_path(@conn, :index) %>" class= "address-tags-button dropdown-item"><%= gettext "Address Tags" %></a>
-            <a href="<%= tag_transaction_path(@conn, :index) %>" class= "dropdown-item"><%= gettext "Transaction Tags" %></a>
+            <a href="<%= tag_transaction_path(@conn, :index) %>" class= "transaction-tags-button dropdown-item"><%= gettext "Transaction Tags" %></a>
-            <a href="<%= api_key_path(@conn, :index) %>" class= "dropdown-item"><%= gettext "API keys" %></a>
+            <a href="<%= api_key_path(@conn, :index) %>" class= "api-keys-button dropdown-item"><%= gettext "API keys" %></a>
-            <a href="<%= custom_abi_path(@conn, :index) %>" class= "dropdown-item"><%= gettext "Custom ABI" %></a>
+            <a href="<%= custom_abi_path(@conn, :index) %>" class= "custom-abi-button dropdown-item"><%= gettext "Custom ABI" %></a>
-            <a href="<%= public_tags_request_path(@conn, :index) %>" class= "dropdown-item"><%= gettext "Public Tags" %></a>
+            <a href="<%= public_tags_request_path(@conn, :index) %>" class= "public-tags-button dropdown-item"><%= gettext "Public Tags" %></a>
-            <a href="<%= BlockScoutWeb.LayoutView.sign_out_link %>" class= "dropdown-item"><%= gettext "Sign out" %></a>
+            <a href="<%= BlockScoutWeb.LayoutView.sign_out_link %>" class= "sign-out-button dropdown-item"><%= gettext "Sign out" %></a>
         </div>
         </li>
     <% else %>
         <li>
-        <a class="nav-link topnav-nav-link" href="<%= BlockScoutWeb.LayoutView.sign_in_link %>" id="navbarBlocksDropdown" role="button" aria-haspopup="true">
+        <a class="sign-in-button nav-link topnav-nav-link" href="<%= BlockScoutWeb.LayoutView.sign_in_link %>" id="navbarBlocksDropdown" role="button" aria-haspopup="true">
             <span class="nav-link-icon">
             <%= render BlockScoutWeb.IconsView, "_accounts_icon.html" %>
             </span>
-            Sign in
+            <%= gettext "Sign in" %>
         </a>
         </li>
     <% end %>
-<% end %>
+<% end %>