From 6e8c722fa0627678423da6e7e6eb1626970ecee4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Paczy=C5=84ski?= <michal.paczynski@thesis.co>
Date: Fri, 20 Oct 2023 15:16:54 +0200
Subject: [PATCH 1/3] Display version and commit hash

---
 src/index.tsx                     |  2 ++
 src/shared/components/Version.tsx | 25 +++++++++++++++++++++++++
 webpack.config.ts                 | 10 ++++++++++
 3 files changed, 37 insertions(+)
 create mode 100644 src/shared/components/Version.tsx

diff --git a/src/index.tsx b/src/index.tsx
index eb61470f1..3346affb2 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -32,6 +32,7 @@ import { ROUTES } from "shared/constants"
 import Onboarding from "ui/Onboarding"
 import FullPageLoader from "shared/components/FullPageLoader"
 import MobileScreen from "ui/MobileScreen"
+import Version from "shared/components/Version"
 import reduxStore from "./redux-state"
 
 function DApp() {
@@ -53,6 +54,7 @@ function DApp() {
     <>
       <GlobalStyles />
       <MobileScreen />
+      <Version />
       <Router>
         {(!walletOnboarded || !isConnected) && <Onboarding />}
         {walletOnboarded && isConnected && (
diff --git a/src/shared/components/Version.tsx b/src/shared/components/Version.tsx
new file mode 100644
index 000000000..d828f1010
--- /dev/null
+++ b/src/shared/components/Version.tsx
@@ -0,0 +1,25 @@
+import React from "react"
+import Portal from "./Portal"
+
+export default function Version() {
+  return (
+    <>
+      <Portal>
+        <p className="version">
+          {process.env.VERSION}
+          {process.env.COMMIT_HASH}
+        </p>
+      </Portal>
+      <style jsx>{`
+        .version {
+          color: #0b3a37;
+          font-size: 12px;
+          right: 27px;
+          bottom: 4px;
+          position: absolute;
+          z-index: var(--z-assistant-icon);
+        }
+      `}</style>
+    </>
+  )
+}
diff --git a/webpack.config.ts b/webpack.config.ts
index da0cb4601..2d57ffa50 100644
--- a/webpack.config.ts
+++ b/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: {

From 50a49cc2c3f31b6c80002f20dbf2228e0fa7936d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Paczy=C5=84ski?= <michal.paczynski@thesis.co>
Date: Fri, 20 Oct 2023 15:59:05 +0200
Subject: [PATCH 2/3] Color change

---
 src/shared/components/Version.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/shared/components/Version.tsx b/src/shared/components/Version.tsx
index d828f1010..edd793f93 100644
--- a/src/shared/components/Version.tsx
+++ b/src/shared/components/Version.tsx
@@ -12,9 +12,9 @@ export default function Version() {
       </Portal>
       <style jsx>{`
         .version {
-          color: #0b3a37;
+          color: var(--secondary-s1-40);
           font-size: 12px;
-          right: 27px;
+          right: 24px;
           bottom: 4px;
           position: absolute;
           z-index: var(--z-assistant-icon);

From 6b6c88fdc23e6195b54dc26550fde6c7ca63d764 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Paczy=C5=84ski?= <michal.paczynski@thesis.co>
Date: Mon, 23 Oct 2023 09:17:28 +0200
Subject: [PATCH 3/3] Adjust position

---
 src/index.tsx                     |  2 --
 src/shared/components/Version.tsx | 15 ++++-----------
 src/ui/Footer/index.tsx           |  2 ++
 src/ui/Onboarding/index.tsx       |  4 ++++
 4 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/src/index.tsx b/src/index.tsx
index 3346affb2..eb61470f1 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -32,7 +32,6 @@ import { ROUTES } from "shared/constants"
 import Onboarding from "ui/Onboarding"
 import FullPageLoader from "shared/components/FullPageLoader"
 import MobileScreen from "ui/MobileScreen"
-import Version from "shared/components/Version"
 import reduxStore from "./redux-state"
 
 function DApp() {
@@ -54,7 +53,6 @@ function DApp() {
     <>
       <GlobalStyles />
       <MobileScreen />
-      <Version />
       <Router>
         {(!walletOnboarded || !isConnected) && <Onboarding />}
         {walletOnboarded && isConnected && (
diff --git a/src/shared/components/Version.tsx b/src/shared/components/Version.tsx
index edd793f93..e3a47339e 100644
--- a/src/shared/components/Version.tsx
+++ b/src/shared/components/Version.tsx
@@ -1,23 +1,16 @@
 import React from "react"
-import Portal from "./Portal"
 
 export default function Version() {
   return (
     <>
-      <Portal>
-        <p className="version">
-          {process.env.VERSION}
-          {process.env.COMMIT_HASH}
-        </p>
-      </Portal>
+      <p className="version">
+        v{process.env.VERSION}
+        {process.env.COMMIT_HASH}
+      </p>
       <style jsx>{`
         .version {
           color: var(--secondary-s1-40);
           font-size: 12px;
-          right: 24px;
-          bottom: 4px;
-          position: absolute;
-          z-index: var(--z-assistant-icon);
         }
       `}</style>
     </>
diff --git a/src/ui/Footer/index.tsx b/src/ui/Footer/index.tsx
index b739a232d..2962c749b 100644
--- a/src/ui/Footer/index.tsx
+++ b/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 {
diff --git a/src/ui/Onboarding/index.tsx b/src/ui/Onboarding/index.tsx
index 0227fb3b2..e9e2fcbee 100644
--- a/src/ui/Onboarding/index.tsx
+++ b/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>{`