Check for updates

.gitignore

@@ -22,4 +22,7 @@ yarn-error.log*
 
 .prettierrc
 
-.vscode
+.vscode
+
+# commit hash used for update detection
+public/commit_hash

package.json

@@ -7,8 +7,8 @@
   "version": "7.3.2",
   "license": "MIT",
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
+    "start": "echo \"$CF_PAGES_COMMIT_SHA\" > public/commit_hash && react-scripts start",
+    "build": "echo \"$CF_PAGES_COMMIT_SHA\" > public/commit_hash && react-scripts build",
     "test": "react-scripts test",
     "prepare": "husky install",
     "pre-commit": "lint-staged",

src/app/App.tsx

@@ -34,6 +34,7 @@ import Wallet from "pages/wallet/Wallet"
 import NavButton from "./sections/NavButton"
 import NetworkStatus from "components/display/NetworkStatus"
 import EnableCoinType from "./sections/EnableCoinType"
+import UpdateNotification from "./update/UpdateNotification"
 
 const App = () => {
   const { element: routes } = useNav()
@@ -81,6 +82,7 @@ const App = () => {
           </ErrorBoundary>
         </Content>
       </Layout>
+      <UpdateNotification />
     </InitBankBalance>
   )
 }

src/app/update/UpdateNotification.module.scss

@@ -0,0 +1,26 @@
+@import "mixins";
+
+.notification {
+  z-index: 1000;
+  position: absolute;
+  bottom: 1.2rem;
+  left: 50%;
+  transform: translate(-50%, 0);
+  background-color: var(--bg);
+  padding: 0.5rem 1.4rem;
+  border-radius: 1rem;
+  //font-size: var(--font-size-small);
+  white-space: nowrap;
+  // same shadow as send/receive/buy buttons
+  box-shadow: inset 0px 1.5px 0px 0px rgb(255 255 255 / 8%),
+    0px 4px 24px 0px rgb(36 36 40 / 30%);
+
+  button {
+    color: var(--button-primary-bg);
+    margin-left: 1rem;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}

src/app/update/UpdateNotification.tsx

@@ -0,0 +1,38 @@
+import { RefetchOptions } from "data/query"
+import { useQuery } from "react-query"
+import styles from "./UpdateNotification.module.scss"
+import { useTranslation } from "react-i18next"
+import axios from "axios"
+
+const useIsUpdateAvailable = () => {
+  return useQuery(
+    [],
+    async () => {
+      // fetch commit_hash file created at build time
+      const { data: commit_hash } = await axios.get("/commit_hash")
+      // compare the latest commit_hash (just fetched) with the current commit_hash
+      // if they are different there is an update available
+      console.log("fetched:" + commit_hash)
+      console.log("current:" + process.env.CF_PAGES_COMMIT_SHA)
+      return commit_hash !== process.env.CF_PAGES_COMMIT_SHA
+    },
+    { ...RefetchOptions.DEFAULT }
+  )
+}
+
+export default function UpdateNotification() {
+  const { t } = useTranslation()
+  const { data } = useIsUpdateAvailable()
+
+  // no update available or request still in progress
+  // (comment out next line to test)
+  if (!data) return null
+
+  // update available
+  return (
+    <div className={styles.notification}>
+      {t("There is a new version available")}
+      <button onClick={() => window.location.reload()}>{t("Reload")}</button>
+    </div>
+  )
+}