diff --git a/.gitignore b/.gitignore
index 36e0c100e..5e91e7087 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,4 +22,7 @@ yarn-error.log*
.prettierrc
-.vscode
\ No newline at end of file
+.vscode
+
+# commit hash used for update detection
+public/commit_hash
\ No newline at end of file
diff --git a/package.json b/package.json
index ecfaed7ae..9c6820b2d 100644
--- a/package.json
+++ b/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",
diff --git a/src/app/App.tsx b/src/app/App.tsx
index 9b2d589d2..1c9c27668 100644
--- a/src/app/App.tsx
+++ b/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 = () => {
+
)
}
diff --git a/src/app/update/UpdateNotification.module.scss b/src/app/update/UpdateNotification.module.scss
new file mode 100644
index 000000000..1c549e132
--- /dev/null
+++ b/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;
+ }
+ }
+}
diff --git a/src/app/update/UpdateNotification.tsx b/src/app/update/UpdateNotification.tsx
new file mode 100644
index 000000000..44a124b84
--- /dev/null
+++ b/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 (
+
+ {t("There is a new version available")}
+
+
+ )
+}