Display version and commit hash (#456)

Resolves #450 

Display commit hash to distinguish dapp version

src/shared/components/Version.tsx

@@ -0,0 +1,18 @@
+import React from "react"
+
+export default function Version() {
+  return (
+    <>
+      <p className="version">
+        v{process.env.VERSION}
+        {process.env.COMMIT_HASH}
+      </p>
+      <style jsx>{`
+        .version {
+          color: var(--secondary-s1-40);
+          font-size: 12px;
+        }
+      `}</style>
+    </>
+  )
+}

src/ui/Footer/index.tsx

@@ -6,6 +6,7 @@ import twitterIcon from "shared/assets/icons/twitter.svg"
 import githubIcon from "shared/assets/icons/github.svg"
 // import ClaimProgressBar from "./ClaimProgressBar" // not used at the moment
 import { LINKS } from "shared/constants"
+import Version from "shared/components/Version"
 import RealmsBar from "./RealmBar"
 
 const ICON_SIZE = "18px"
@@ -34,6 +35,7 @@ export default function Footer() {
         />
       </div>
       <Link to={LINKS.RULEBOOK}>Rulebook</Link>
+      <Version />
       <RealmsBar />
       <style jsx>{`
         footer {

src/ui/Onboarding/index.tsx

@@ -8,6 +8,7 @@ import {
 import FullPageLoader from "shared/components/FullPageLoader"
 import Nav from "ui/Nav"
 import portalBackground from "shared/assets/portal-background.mp4"
+import Version from "shared/components/Version"
 import ConnectWallet from "./ConnectWallet"
 import JoinWaitlist from "./JoinWaitlist"
 import EnterPortal from "./EnterPortal"
@@ -49,6 +50,9 @@ export default function Onboarding() {
         <video className="onboarding_video" autoPlay muted loop playsInline>
           <source src={portalBackground} />
         </video>
+        <div style={{ position: "absolute", right: 27, bottom: 4 }}>
+          <Version />
+        </div>
       </div>
       <Nav />
       <style jsx>{`

webpack.config.ts

@@ -9,6 +9,8 @@ import CopyPlugin from "copy-webpack-plugin"
 import "dotenv-defaults/config"
 import path from "path"
 import fs from "fs/promises"
+import child_proces from "child_process"
+import packageJson from "./package.json"
 
 const config: Configuration = {
   entry: ["./src/index.tsx"],
@@ -81,6 +83,14 @@ const config: Configuration = {
     new CopyPlugin({
       patterns: [{ from: "src/data/", to: "assets/" }],
     }),
+    new DefinePlugin({
+      "process.env.VERSION": JSON.stringify(packageJson.version),
+    }),
+    new DefinePlugin({
+      "process.env.COMMIT_HASH": JSON.stringify(
+        child_proces.execSync("git rev-parse --short HEAD").toString().trim()
+      ),
+    }),
   ],
   devServer: {
     static: {