Merge branch 'app-version'

jadzeidan · Oct 25, 2022 · 7268244 · 7268244
2 parents c147a51 + 9107a09
commit 7268244
Show file tree

Hide file tree

Showing 9 changed files with 101 additions and 21 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,6 +12,7 @@
 - Display trailing zeroes for BTC/LTC amount formatting
 - Fix broken links on Android 11+
 - Add 'sat' unit for Bitcoin accounts, available in Settings view
+- Add version number and available updates check in settings
 
 ## 4.34.0
 - Bundle BitBox02 firmware version v9.12.0

diff --git a/frontends/web/src/api/version.ts b/frontends/web/src/api/version.ts
@@ -16,6 +16,19 @@
 
 import { apiGet } from '../utils/request';
 
+/**
+ * Describes the file that is loaded from 'https://shiftcrypto.ch/updates/desktop.json'.
+ */
+export type TUpdateFile = {
+    current: string;
+    version: string;
+    description: string;
+}
+
 export const getVersion = (): Promise<string> => {
   return apiGet('version');
 };
+
+export const getUpdate = (): Promise<TUpdateFile | null> => {
+  return apiGet('update');
+};
diff --git a/frontends/web/src/components/icon/assets/icons/red-dot.svg b/frontends/web/src/components/icon/assets/icons/red-dot.svg
diff --git a/frontends/web/src/components/icon/icon.tsx b/frontends/web/src/components/icon/icon.tsx
@@ -26,6 +26,7 @@ import arrowCircleRightActiveSVG from './assets/icons/arrow-circle-right-active.
 import checkedSmallSVG from './assets/icons/checked-small.svg';
 import checkSVG from './assets/icons/check.svg';
 import cancelSVG from './assets/icons/cancel.svg';
+import redDotSVG from './assets/icons/red-dot.svg';
 import copySVG from './assets/icons/copy.svg';
 import closeSVG from './assets/icons/close.svg';
 import closeXWhiteSVG from './assets/icons/close-x-white.svg';
@@ -113,6 +114,7 @@ export const Checked = (props: ImgProps) => (<img src={checkedSmallSVG} draggabl
 // simple check for copy component
 export const Check = (props: ImgProps) => (<img src={checkSVG} draggable={false} {...props} />);
 export const Cancel = (props: ImgProps) => (<img src={cancelSVG} draggable={false} {...props} />);
+export const RedDot = (props: ImgProps) => (<img src={redDotSVG} draggable={false} {...props} />);
 export const Copy = (props: ImgProps) => (<img src={copySVG} draggable={false} {...props} />);
 export const Close = (props: ImgProps) => (<img src={closeSVG} draggable={false} {...props} />);
 export const CloseXWhite = (props: ImgProps) => (<img src={closeXWhiteSVG} draggable={false} {...props} />);

diff --git a/frontends/web/src/components/settingsButton/settingsButton.module.css b/frontends/web/src/components/settingsButton/settingsButton.module.css
@@ -1,6 +1,6 @@
 .container {
     width: 100%;
-    min-width: 200px;
+    min-width: 230px;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
@@ -45,13 +45,21 @@
 
 .secondaryText {
     color: var(--color-secondary);
-    display: block;
     font-size: var(--size-small);
     margin-top: 4px;
     overflow: hidden;
     text-overflow: ellipsis;
 }
 
+.primaryText {
+    display: block;
+}
+
+.icon img {
+    margin-left: 8px;
+    margin-bottom: -4px;
+}
+
 .disabled {
     opacity: 0.5;
     cursor: default;

diff --git a/frontends/web/src/components/settingsButton/settingsButton.tsx b/frontends/web/src/components/settingsButton/settingsButton.tsx
@@ -5,8 +5,9 @@ interface SettingsButtonProps {
     onClick?: () => void;
     danger?: boolean;
     optionalText?: string;
-    secondaryText?: string;
+    secondaryText?: string | JSX.Element;
     disabled?: boolean;
+    optionalIcon?: JSX.Element;
 }
 
 const SettingsButton: FunctionComponent<SettingsButtonProps> = ({
@@ -16,21 +17,30 @@ const SettingsButton: FunctionComponent<SettingsButtonProps> = ({
   secondaryText,
   disabled,
   children,
+  optionalIcon,
 }) => {
   return (
-    <button className={[style.container, danger ? style.danger : '', disabled ? style.disabled : ''].join(' ')} onClick={!disabled ? onClick : undefined}>
+    <button
+      className={
+        [style.container, danger ? style.danger : '',
+          disabled === true ? style.disabled : '']
+          .join(' ')}
+      onClick={!disabled ? onClick : undefined}>
       <span className={style.children}>
-        {children}
+        <span className={style.primaryText}>{children}</span>
         { secondaryText ? (
           <span className={style.secondaryText}>{secondaryText}</span>
         ) : null }
       </span>
       { optionalText ? (
         <span className={style.optionalText}>{optionalText}</span>
       ) : null }
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-        <polyline points="9 18 15 12 9 6"></polyline>
-      </svg>
+      { optionalIcon ? (
+        <span className={style.icon}>{optionalIcon}</span>
+      ) : (
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <polyline points="9 18 15 12 9 6"></polyline>
+        </svg>) }
     </button>
   );
 };

diff --git a/frontends/web/src/components/update/update.tsx b/frontends/web/src/components/update/update.tsx
@@ -19,25 +19,19 @@ import { FunctionComponent } from 'react';
 import { useTranslation } from 'react-i18next';
 import { load } from '../../decorators/load';
 import { runningInAndroid } from '../../utils/env';
+import { TUpdateFile } from '../../api/version';
 import A from '../anchor/anchor';
 import Status from '../status/status';
 
-/**
- * Describes the file that is loaded from 'https://shiftcrypto.ch/updates/desktop.json'.
- */
-interface File {
-    current: string;
-    version: string;
-    description: string;
-}
-
 interface Props {
-    file: File | null;
+    file: TUpdateFile | null;
 }
 
+export const updatePath: string = 'https://shiftcrypto.ch/download/?source=bitboxapp';
+
 const Update: FunctionComponent<Props> = ({ file }) => {
   const { t } = useTranslation();
-  const downloadElement = <A href="https://shiftcrypto.ch/download/?source=bitboxapp">{t('button.download')}</A>;
+  const downloadElement = <A href={updatePath}>{t('button.download')}</A>;
 
   return file && (
     <Status dismissable={`update-${file.version}`} type="info">

diff --git a/frontends/web/src/locales/en/app.json b/frontends/web/src/locales/en/app.json
@@ -1246,6 +1246,12 @@
     "header": {
       "home": "Home"
     },
+    "info": {
+      "out-of-date": "New udate available",
+      "title": "Info",
+      "up-to-date": "Your app is up to date",
+      "version": "App Version"
+    },
     "restart": "Please re-start the BitBoxApp for the changes to take effect.",
     "services": {
       "title": "Services"

diff --git a/frontends/web/src/routes/settings/settings.tsx b/frontends/web/src/routes/settings/settings.tsx
@@ -20,6 +20,8 @@ import { Link } from 'react-router-dom';
 import { route } from '../../utils/route';
 import { alertUser } from '../../components/alert/Alert';
 import { Badge } from '../../components/badge/badge';
+import { Skeleton } from '../../components/skeleton/skeleton';
+import { updatePath } from '../../components/update/update';
 import { Dialog, DialogButtons } from '../../components/dialog/dialog';
 import { Button, Input } from '../../components/forms';
 import { Entry } from '../../components/guide/entry';
@@ -29,11 +31,14 @@ import { SwissMadeOpenSource } from '../../components/icon/logo';
 import InlineMessage from '../../components/inlineMessage/InlineMessage';
 import { Footer, Header } from '../../components/layout';
 import { SettingsButton } from '../../components/settingsButton/settingsButton';
+import { SettingsItem } from '../../components/settingsButton/settingsItem';
 import { Toggle } from '../../components/toggle/toggle';
+import { Checked, RedDot } from '../../components/icon/icon';
 import { translate, TranslateProps } from '../../decorators/translate';
 import { setConfig } from '../../utils/config';
 import { apiGet, apiPost } from '../../utils/request';
 import { setBtcUnit, BtcUnit } from '../../api/coins';
+import { TUpdateFile, getVersion, getUpdate } from '../../api/version';
 import { FiatSelection } from './components/fiat/fiat';
 import style from './settings.module.css';
 
@@ -49,6 +54,8 @@ interface State {
     config: any;
     proxyAddress?: string;
     activeProxyDialog: boolean;
+    version?: string;
+    update?: TUpdateFile | null;
 }
 
 class Settings extends Component<Props, State> {
@@ -59,13 +66,17 @@ class Settings extends Component<Props, State> {
       config: null,
       proxyAddress: undefined,
       activeProxyDialog: false,
+      version: undefined,
+      update: undefined
     };
   }
 
   public componentDidMount() {
     apiGet('config').then(config => {
       this.setState({ config, proxyAddress: config.backend.proxy.proxyAddress });
     });
+    getVersion().then(version => this.setState({ version }));
+    getUpdate().then(update => this.setState({ update }));
   }
 
   public componentDidUpdate(prevProps: Props) {
@@ -180,7 +191,9 @@ class Settings extends Component<Props, State> {
       config,
       restart,
       proxyAddress,
-      activeProxyDialog
+      activeProxyDialog,
+      version,
+      update
     } = this.state;
     if (proxyAddress === undefined) {
       return null;
@@ -221,6 +234,36 @@ class Settings extends Component<Props, State> {
                           <FiatSelection />
                         </div>
                         <div className="column column-2-3">
+                          <div>
+                            <h3 className="subTitle">{t('settings.info.title')}</h3>
+                            <div className="box slim divide m-bottom-large">
+                              { version !== undefined && update !== undefined ? (
+                                <div>
+                                  { update ? (
+                                    <SettingsButton
+                                      optionalText={version}
+                                      secondaryText={
+                                        <>
+                                          {t('settings.info.out-of-date')}
+                                          {' '}
+                                          <RedDot />
+                                        </>
+                                      }
+                                      disabled={false}
+                                      onClick={() => update && apiPost('open', updatePath)}>
+                                      {t('settings.info.version')}
+                                    </SettingsButton>) : (
+                                    <SettingsItem
+                                      optionalText={version}
+                                      optionalIcon={<Checked/>}>
+                                      {t('settings.info.up-to-date')}
+                                    </SettingsItem>
+                                  )
+                                  }
+                                </div>
+                              ) : <Skeleton />}
+                            </div>
+                          </div>
                           { manageAccountsLen ? (
                             <div>
                               <h3 className="subTitle">Accounts</h3>
@@ -235,7 +278,7 @@ class Settings extends Component<Props, State> {
                             </div>
                           ) : null}
                           <h3 className="subTitle">{t('settings.expert.title')}</h3>
-                          <div className="box slim divide">
+                          <div className="box slim divide m-bottom-large">
                             <div className={style.setting}>
                               <div>
                                 <p className="m-none">{t('settings.expert.fee')}</p>