Add git commit id to app for #362 (#380)

* Add git commit id to app for #362

* Shorten visible commit id, add prefix,  add condition to hide nodes when not present for #362

* Update styling and text for #362

* Fix broken classes

config/webpack.config.js

@@ -24,6 +24,7 @@ const ForkTsCheckerWebpackPlugin = require('react-dev-utils/ForkTsCheckerWebpack
 const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
 const SentryWebpackPlugin = require('@sentry/webpack-plugin');
 const SriPlugin = require('webpack-subresource-integrity');
+const GitRevisionPlugin = require('git-revision-webpack-plugin');
 
 const postcssNormalize = require('postcss-normalize');
 
@@ -54,6 +55,8 @@ const cssModuleRegex = /\.module\.css$/;
 const sassRegex = /\.(scss|sass)$/;
 const sassModuleRegex = /\.module\.(scss|sass)$/;
 
+const gitRevisionPlugin = new GitRevisionPlugin();
+
 // This is the production and development configuration.
 // It is focused on developer experience, fast rebuilds, and a minimal bundle.
 module.exports = function (webpackEnv) {
@@ -674,6 +677,11 @@ module.exports = function (webpackEnv) {
         new SriPlugin({
           hashFuncNames: ['sha256', 'sha384'],
         }),
+      new webpack.DefinePlugin({
+        'process.env.REACT_APP_GIT_COMMIT_ID': JSON.stringify(
+          gitRevisionPlugin.commithash(),
+        ),
+      }),
     ].filter(Boolean),
     // Some libraries import Node modules but don't use them in the browser.
     // Tell webpack to provide empty mocks for them so importing them works.

package.json

@@ -270,6 +270,7 @@
     "@sentry/webpack-plugin": "1.13.0",
     "@types/mathjs": "6.0.5",
     "@types/socket.io-client": "1.4.34",
+    "git-revision-webpack-plugin": "3.0.6",
     "node-sass": "4.14.1",
     "webpack-subresource-integrity": "1.5.2"
   },

public/index.html

@@ -26,6 +26,10 @@
       type="text/javascript"
       src="https://s3.tradingview.com/tv.js"
     ></script>
+    <script type="text/javascript">
+      console.log('Sovryn-frontend commit:');
+      console.log('<%= process.env.REACT_APP_GIT_COMMIT_ID %>');
+    </script>
 
     <title>Sovryn</title>
 

src/app/components/Footer/index.tsx

@@ -6,9 +6,12 @@
 import React, { useEffect, useState } from 'react';
 import { Trans } from 'react-i18next';
 import { translations } from 'locales/i18n';
+import { useTranslation } from 'react-i18next';
 
 export function Footer() {
+  const { t } = useTranslation();
   const [hasMatomo, setHasMatomo] = useState(false);
+  const commitHash = process.env.REACT_APP_GIT_COMMIT_ID || '';
 
   useEffect(() => {
     setHasMatomo(window.hasOwnProperty('Matomo'));
@@ -63,6 +66,19 @@ export function Footer() {
             </p>
           </div>
         </div>
+        {commitHash && (
+          <div className="small text-white font-family-montserrat">
+            {t(translations.footer.buildID)}:{' '}
+            <a
+              href={`https://github.com/DistributedCollective/Sovryn-frontend/commit/${commitHash}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="font-weight-normal"
+            >
+              {commitHash.substr(0, 7)}
+            </a>
+          </div>
+        )}
         {hasMatomo && (
           <div className="d-flex flex-row justify-content-between align-items-center text-lightGrey mt-5">
             <iframe

src/locales/en/translation.json

@@ -145,7 +145,8 @@
     "notice_1": "Only you control and have access to your wealth, any actions you take could cause a potential loss of funds.",
     "notice_2": "Particularly please be sure to check all transaction fee prices before proceeding as third party wallets may automatically present high fees.",
     "notice_3": "Please visit our <0>FAQ</0> if you have any questions.",
-    "notice_4": "If you’re new to DeFi, here is the <0>tutorial</0> on how to use SOVRYN."
+    "notice_4": "If you’re new to DeFi, here is the <0>tutorial</0> on how to use SOVRYN.",
+    "buildID": "Build ID"
   },
   "mainMenu": {
     "trade": "Trade",

src/locales/es/translation.json

@@ -129,7 +129,12 @@
     "title": "Consejos Sovryn"
   },
   "footer": {
-    "title": "Promovido por <0>Bitcoin</0>"
+    "title": "Promovido por <0>Bitcoin</0>",
+    "notice_1": "Only you control and have access to your wealth, any actions you take could cause a potential loss of funds.",
+    "notice_2": "Particularly please be sure to check all transaction fee prices before proceeding as third party wallets may automatically present high fees.",
+    "notice_3": "Please visit our <0>FAQ</0> if you have any questions.",
+    "notice_4": "If you’re new to DeFi, here is the <0>tutorial</0> on how to use SOVRYN.",
+    "buildID": "Build ID"
   },
   "mainMenu": {
     "trade": "Comercio",

src/locales/pt_br/translation.json

@@ -145,7 +145,8 @@
     "notice_1": "Esteja ciente de que somente você possui controle e acesso ao seus ativos, qualquer ação que você realizar pode causar uma perda considerável de fundos.",
     "notice_2": "Sempre verifique as taxas de transação antes de realizar operações na SOVRYN. Algumas carteiras podem configurar automaticamente taxas muito altas.",
     "notice_3": "Visite nosso <0>FAQ</0> se tiver dúvidas.",
-    "notice_4": "Se você é um usuário novato, veja o <0>tutorial</0> e aprenda a usar a SOVRYN."
+    "notice_4": "Se você é um usuário novato, veja o <0>tutorial</0> e aprenda a usar a SOVRYN.",
+    "buildID": "Build ID"
   },
   "mainMenu": {
     "trade": "Operar",

yarn.lock

@@ -8334,6 +8334,11 @@ getpass@^0.1.1:
   dependencies:
     assert-plus "^1.0.0"
 
+[email protected]:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/git-revision-webpack-plugin/-/git-revision-webpack-plugin-3.0.6.tgz#5dd6c6829fae05b405059dea6195b23875d69d4d"
+  integrity sha512-vW/9dBahGbpKPcccy3xKkHgdWoH/cAPPc3lQw+3edl7b4j29JfNGVrja0a1d8ZoRe4nTN8GCPrF9aBErDnzx5Q==
+
 glob-parent@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-3.1.0.tgz#9e6af6299d8d3bd2bd40430832bd113df906c5ae"