(feature) App download section

public/locales/en/translations.json

@@ -94,6 +94,16 @@
   "averagewinloss": {
     "title": "Average Win/Loss"
   },
+  "download_app": {
+    "title": "Get the ultimate reporting experience with our desktop app",
+    "description": "Gain access to advanced features that will supercharge your data analysis.",
+    "risk": "Concentration Risk",
+    "win_loss": "Win/Loss Streaks",
+    "tax": "Tax Reports",
+    "snapshots": "Snapshots",
+    "more": "And more...",
+    "download_reports": "Download Bitfinex Reports"
+  },
   "candles": {
     "title": "Candles",
     "amount": "Amount",

src/components/AppDownload/AppDownload.helpers.js

@@ -0,0 +1,20 @@
+import config from 'var/electronVersion'
+import { getOS, PLATFORMS } from 'utils/getOS'
+
+const { getElectronReleaseLink } = config
+
+export const getDownloadLink = (version) => {
+  const platform = getOS()
+
+  switch (platform) {
+    case PLATFORMS.mac:
+      return getElectronReleaseLink({ version, platform, ext: 'zip' })
+    case PLATFORMS.windows:
+      return getElectronReleaseLink({ version, platform, ext: 'exe' })
+    case PLATFORMS.linux:
+    default:
+      return getElectronReleaseLink({ version, platform, ext: 'AppImage.zip' })
+  }
+}
+
+export default getDownloadLink

src/components/AppDownload/AppDownload.js

@@ -0,0 +1,64 @@
+import React, { useState, useEffect, useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Button, Intent } from '@blueprintjs/core'
+
+import config from 'var/electronVersion'
+
+import getDownloadLink from './AppDownload.helpers'
+
+const {
+  DEFAULT_ELECTRON_VERSION,
+  LATEST_ELECTRON_RELEASE_LINK,
+} = config
+
+const AppDownload = () => {
+  const { t } = useTranslation()
+  const [isLoading, setIsLoading] = useState(true)
+  const [latestAppVersion, setLatestAppVersion] = useState(DEFAULT_ELECTRON_VERSION)
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const data = await fetch(LATEST_ELECTRON_RELEASE_LINK)
+      const json = await data.json()
+      const latestVersion = json?.tag_name
+      if (latestVersion) {
+        setLatestAppVersion(latestVersion)
+      }
+      setIsLoading(false)
+    }
+    fetchData()
+  }, [])
+
+  const link = useMemo(
+    () => getDownloadLink(latestAppVersion),
+    [latestAppVersion],
+  )
+
+  return (
+    <div className='app-download'>
+      <h2 className='app-download--title'>
+        {t('download_app.title')}
+      </h2>
+      <h3 className='app-download--sub-title'>
+        {t('download_app.description')}
+      </h3>
+      <ul className='app-download--list'>
+        <li>{t('download_app.risk')}</li>
+        <li>{t('download_app.win_loss')}</li>
+        <li>{t('download_app.tax')}</li>
+        <li>{t('download_app.snapshots')}</li>
+        <li>{t('download_app.more')}</li>
+      </ul>
+      <Button
+        loading={isLoading}
+        intent={Intent.SUCCESS}
+        className='app-download--btn'
+        onClick={() => window.open(link)}
+      >
+        {t('download_app.download_reports')}
+      </Button>
+    </div>
+  )
+}
+
+export default AppDownload

src/components/AppDownload/_AppDownload.scss

@@ -0,0 +1,38 @@
+.app-download {
+  padding: 24px;
+
+  &--title {
+    margin: 0;
+    font-size: 16px;
+    max-width: 240px;
+    margin-bottom: 6px;
+  }
+
+  &--sub-title {
+    margin: 0;
+    font-size: 14px;
+    max-width: 240px;
+    color: var(--color2);
+    margin-bottom: 15px;
+  }
+
+  &--list {
+    padding-left: 20px;
+
+    li {
+      font-size: 14px;
+      color: var(--color2);
+      padding-bottom: 6px;
+    }
+  }
+
+  &--btn {
+    min-height: 40px;
+    padding: 5px 20px;
+
+    .bp3-button-text {
+      font-size: 15px;
+      font-weight: 700;
+    }
+  }
+}

src/components/AppDownload/index.js

@@ -0,0 +1 @@
+export { default } from './AppDownload'

src/components/Main/Main.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import { Route, Switch } from 'react-router-dom'
 import { Card } from '@blueprintjs/core'
 
+import AppDownload from 'components/AppDownload'
 import AccountBalance from 'components/AccountBalance'
 import AccountSummary from 'components/AccountSummary'
 import AffiliatesEarnings from 'components/AffiliatesEarnings'
@@ -148,9 +149,16 @@ class Main extends PureComponent {
 
     return authStatus && !authIsShown ? (
       <>
-        <Card className='nav-menu-card'>
-          <NavMenu className='bitfinex-nav-menu--main' />
-        </Card>
+        <div className='nav-menu'>
+          <Card className='nav-menu-card'>
+            <NavMenu className='bitfinex-nav-menu--main' />
+          </Card>
+          {!showFrameworkMode && (
+            <Card className='nav-menu-card app-download'>
+              <AppDownload />
+            </Card>
+          )}
+        </div>
         <div className='bitfinex-dataset'>
           <Switch>
             <Route

src/styles/index.scss

@@ -6,8 +6,9 @@
 @import './popover.scss';
 @import './radio.scss';
 
-@import "components/AccountSummary/_AccountSummary.scss";
 @import "components/Auth/_Auth.scss";
+@import "components/AccountSummary/_AccountSummary.scss";
+@import "components/AppDownload/_AppDownload.scss";
 @import "components/Candles/_Candles.scss";
 @import "components/ConcentrationRisk/_ConcentrationRisk.scss";
 @import "components/ErrorDialog/_ErrorDialog.scss";
@@ -73,12 +74,18 @@ html {
   }
 }
 
-.nav-menu-card {
-  padding: 0;
-  margin: 10px 10px 10px 20px;
-  background-color: var(--bgColor2);
-  border-radius: 10px;
-  overflow: hidden;
+.nav-menu {
+  display: flex;
+  flex-direction: column;
+
+  &-card {
+    padding: 0;
+    height: auto;
+    overflow: hidden;
+    border-radius: 10px;
+    margin: 10px 10px 10px 20px;
+    background-color: var(--bgColor2);
+  }
 }
 
 .bitfinex-dataset {

src/ui/NavMenu/_NavMenu.scss

@@ -1,6 +1,6 @@
 .bitfinex-nav-menu {
   display: inline-block;
-  width: 282px;
+  width: 290px;
   padding: 0;
   border-radius: 0;
   clip-path: inset(0 -1px 0 0);

src/utils/getOS.js

@@ -0,0 +1,29 @@
+import _includes from 'lodash/includes'
+import _isUndefined from 'lodash/isUndefined'
+
+export const PLATFORMS = {
+  mac: 'mac',
+  windows: 'win',
+  linux: 'linux',
+}
+
+export const getOS = () => {
+  if (_isUndefined(typeof window)) {
+    return null
+  }
+
+  const { userAgent } = window.navigator
+
+  if (_includes(userAgent, 'Win')) {
+    return PLATFORMS.windows
+  }
+  if (_includes(userAgent, 'Mac')) {
+    return PLATFORMS.mac
+  }
+  return PLATFORMS.linux
+}
+
+export default {
+  getOS,
+  PLATFORMS,
+}

src/var/electronVersion.js

@@ -0,0 +1,20 @@
+import _replace from 'lodash/replace'
+
+const DEFAULT_ELECTRON_VERSION = '3.0.1'
+
+const APP_RELEASES_URL = 'https://github.com/bitfinexcom/bfx-report-electron/releases/download/'
+
+const config = {
+  GITHUB_LINK: 'https://github.com/bitfinexcom/bfx-report-electron',
+  LATEST_ELECTRON_RELEASE_LINK: 'https://api.github.com/repos/bitfinexcom/bfx-report-electron/releases/latest',
+  DEFAULT_ELECTRON_VERSION,
+  getElectronReleaseLink: ({ version, platform, ext = 'zip' }) => {
+    const currExt = version === DEFAULT_ELECTRON_VERSION
+      ? 'zip'
+      : ext
+
+    return `${APP_RELEASES_URL}/${version}/BitfinexReport-${_replace(version, 'v', '')}-x64-${platform}.${currExt}`
+  },
+}
+
+export default config