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")} + +
+ ) +}