From c68a69ff9e0c16b7bb2f191e41d151321054dd9d Mon Sep 17 00:00:00 2001
From: Derek Sonnenberg <derek@ardrive.io>
Date: Thu, 7 Dec 2023 12:16:25 -0600
Subject: [PATCH] feat: add version footer and fix router PE-5161

---
 src/App.tsx                   |  4 ++--
 src/components/RouterPage.css | 18 ++++++++++++++++++
 src/components/RouterPage.tsx |  2 ++
 3 files changed, 22 insertions(+), 2 deletions(-)
 create mode 100644 src/components/RouterPage.css

diff --git a/src/App.tsx b/src/App.tsx
index 0b2407e..eb4da6a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3,13 +3,13 @@ import { GiftForm } from "./GiftForm";
 import { RouterPage } from "./components/RouterPage";
 import { useErrorMessage } from "./hooks/useErrorMessage";
 
-import { HashRouter as Router, Route, Routes } from "react-router-dom";
+import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
 
 function App() {
   const [errorMessage, setErrorMessage] = useErrorMessage();
 
   const router = (
-    <Router basename="/turbo-app">
+    <Router basename={`${import.meta.env.BASE_URL}`}>
       <Routes>
         <Route
           path="/gift"
diff --git a/src/components/RouterPage.css b/src/components/RouterPage.css
new file mode 100644
index 0000000..619ad27
--- /dev/null
+++ b/src/components/RouterPage.css
@@ -0,0 +1,18 @@
+#version-footer {
+  font-family: "Wavehaus-Bold";
+  font-size: 14px;
+  letter-spacing: 0.82px;
+  padding-top: 4rem;
+
+  @media (min-width: 800px) {
+    font-size: 16px;
+  }
+
+  @media (min-width: 1200px) {
+    font-size: 18px;
+  }
+
+  justify-self: flex-end;
+  align-self: flex-end;
+  text-align: right;
+}
diff --git a/src/components/RouterPage.tsx b/src/components/RouterPage.tsx
index 7c164fb..bbac546 100644
--- a/src/components/RouterPage.tsx
+++ b/src/components/RouterPage.tsx
@@ -1,4 +1,5 @@
 import { LogoHeader } from "./LogoHeader";
+import "./RouterPage.css";
 
 interface RouterPageProps {
   page: JSX.Element;
@@ -10,6 +11,7 @@ export function RouterPage({ page, errorMessage }: RouterPageProps) {
     <>
       <LogoHeader errorMessage={errorMessage} />
       {page}
+      <span id="version-footer">v{import.meta.env.PACKAGE_VERSION}</span>
     </>
   );
 }