feat: Add package.json version to footer (#348)

Displays the software version in the footer, and replaces the hard-coded
link with the package.json homepage value

next.config.js

@@ -5,9 +5,11 @@ const withImages = require('next-images');
 const withPrefresh = require('@prefresh/next');
 const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
 const Dotenv = require('dotenv-webpack');
+const DefinePlugin = require('webpack').DefinePlugin;
 require('dotenv').config();
 
 const DEBUG = process.env.DEBUG;
+const packageJson = require('./package.json');
 const SUPPORTED_LOCALES = ['en', 'de', 'ja'];
 
 module.exports = withPlugins(
@@ -69,6 +71,14 @@ module.exports = withPlugins(
         })
       );
 
+      config.plugins.push(
+        new DefinePlugin({
+        'process.env': {
+          PACKAGE_HOMEPAGE: `"${packageJson.homepage}"`,
+          PACKAGE_VERSION: `"${packageJson.version}"`
+        }
+      }));
+
       // Support GraphQL literals
       config.module.rules.push({
         test: /\.(graphql|gql)$/,

package.json

@@ -27,6 +27,7 @@
     "storybook": "start-storybook -s ./source/public -p 6006",
     "storybook:build": "build-storybook -o build/storybook"
   },
+  "homepage": "https://github.com/input-output-hk/cardano-explorer-app",
   "husky": {
     "hooks": {
       "pre-commit": "yarn prettier:fix-staged"

source/environment.ts

@@ -22,6 +22,10 @@ export const environment = {
   GA_TRACKING_ID: process.env.GA_TRACKING_ID,
   IS_CLIENT: isNavigatorDefined,
   IS_SERVER: !isNavigatorDefined,
+  PACKAGE: {
+    HOMEPAGE: process.env.PACKAGE_HOMEPAGE,
+    VERSION: process.env.PACKAGE_VERSION
+  },
   POLLING_INTERVAL: Number(process.env.POLLING_INTERVAL) || 10000,
 };
 

source/widgets/layout/Footer.module.scss

@@ -29,21 +29,25 @@
       align-items: center;
       display: flex;
       justify-content: space-between;
-      max-width: 155px;
+      max-width: 200px;
       width: 100%;
 
       @media (max-width: 768px) {
         padding-bottom: 10px;
       }
 
-      .copyright {
+      p {
         @include footerText(var(--solid-text-color), ProximaNova, 12px, 300);
         letter-spacing: 1.2px;
         line-height: 1.5;
         opacity: 0.5;
         text-transform: uppercase;
       }
 
+      .copyright {
+        padding-right: 3px;
+      }
+
       .gitLink {
         display: initial;
 

source/widgets/layout/Footer.tsx

@@ -1,5 +1,6 @@
 import classnames from 'classnames';
 import React from 'react';
+import { environment } from '../../environment';
 import { useI18nFeature } from '../../features/i18n/context';
 import styles from './Footer.module.scss';
 
@@ -26,11 +27,14 @@ export const Footer = (props: IFooterProps) => {
               © IOHK 2015 - {new Date().getFullYear()}
             </p>
             <a
-              href="https://github.com/input-output-hk/cardano-explorer-app/"
+              href={environment.PACKAGE.HOMEPAGE}
               className={styles.gitLink}
             >
               <GitIcon className={styles.gitIcon} />
             </a>
+            <p>
+              {environment.PACKAGE.VERSION}
+            </p>
           </div>
           <div className={styles.logos}>
             <div className={styles.logoText}>