Merge pull request #26 from alecsloan/dev

v3.3.0
alecsloan · Apr 14, 2021 · b43f8e5 · b43f8e5
2 parents 9f4d56d + 73f9910
commit b43f8e5
Show file tree

Hide file tree

Showing 12 changed files with 363 additions and 154 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cryptolio",
-  "version": "3.2.1",
+  "version": "3.3.0",
   "private": true,
   "dependencies": {
     "@material-ui/core": "latest",

diff --git a/src/App.js b/src/App.js
@@ -41,7 +41,7 @@ function CardRow (props) {
   assets.forEach(asset => {
     cards.push(
       <Grid item xs={12} sm={6} md={4} key={asset.symbol}>
-        <AssetCard asset={asset} key={asset.symbol} removeCrypto={props.removeCrypto.bind(this)} settings={props.settings} setAssetUtilityShown={props.setAssetUtilityShown.bind(this)} renderStyle={props.renderStyle} updateHoldings={props.updateHoldings.bind(this)} />
+        <AssetCard asset={asset} key={asset.symbol} renderStyle={props.renderStyle} settings={props.settings} setAssetUtilityShown={props.setAssetUtilityShown.bind(this)} />
       </Grid>
     )
   })
@@ -58,13 +58,14 @@ class App extends Component {
       addDropdownHideable: false,
       assetUtilityShown: null,
       autoHideFetchNotification: 20000,
+      balanceChangeTimeframe: 'percent_change_24h',
       currency: 'USD',
       datasource: 'coinmarketcap',
       decimals2: 100,
       decimals3: 1,
       decimals4: null,
       fetchInterval: 300000,
-      renderStyle: 'card:classic',
+      renderStyle: (window.innerWidth <= 500) ? 'table' : 'card:classic',
       show1hChange: true,
       show24hChange: true,
       show7dChange: true,
@@ -110,15 +111,16 @@ class App extends Component {
 
   componentDidMount () {
     this.setFetchInterval()
+    this.fetchAssetData()
   }
 
   editSetting (settingName, value) {
     if (!settingName) { return }
 
     if (settingName === 'currency' && !value) {
       value = 'USD'
-    } else if (settingName === 'fetchInterval' && value < 6000) {
-      value = 6000
+    } else if (settingName === 'fetchInterval' && value < 60000) {
+      value = 60000
     } else if (settingName === 'theme') {
       if (value === 'light') {
         value = Theme.dark
@@ -137,6 +139,8 @@ class App extends Component {
 
     if (settingName === 'currency' || settingName === 'datasource') {
       this.fetchAssetData()
+    } else if (settingName === 'fetchInterval') {
+      this.setFetchInterval()
     }
 
     window.localStorage.setItem('settings', JSON.stringify(settings))
@@ -158,12 +162,14 @@ class App extends Component {
       data = await CoinMarketCap.getAssetData(currency, symbols, assets)
     }
 
-    this.storeData(data.assets)
+    if (data && data.assets) {
+      this.storeData(data.assets)
 
-    this.setState({
-      dataUpdated: true,
-      timestamp: data.timestamp
-    })
+      this.setState({
+        dataUpdated: true,
+        timestamp: data.timestamp
+      })
+    }
   }
 
   async fetchAvailableAssets () {
@@ -285,12 +291,12 @@ class App extends Component {
           <div className='content'>
             {
               (!this.state.settings.renderStyle || this.state.settings.renderStyle.includes('card'))
-                ? <CardRow assets={this.state.data.assets} removeCrypto={this.removeCrypto.bind(this)} renderStyle={this.state.settings.renderStyle} settings={this.state.settings} setAssetUtilityShown={this.setAssetUtilityShown.bind(this)} updateHoldings={this.updateHoldings.bind(this)} />
-                : <AssetTable assets={this.state.data.assets} removeCrypto={this.removeCrypto.bind(this)} settings={this.state.settings} setAssetUtilityShown={this.setAssetUtilityShown.bind(this)} updateHoldings={this.updateHoldings.bind(this)} />
+                ? <CardRow assets={this.state.data.assets} renderStyle={this.state.settings.renderStyle} settings={this.state.settings} setAssetUtilityShown={this.setAssetUtilityShown.bind(this)} />
+                : <AssetTable assets={this.state.data.assets} settings={this.state.settings} setAssetUtilityShown={this.setAssetUtilityShown.bind(this)} />
             }
           </div>
           <Settings data={this.state.data} editSetting={this.editSetting.bind(this)} settings={this.state.settings} showSettings={this.state.showSettings} theme={this.state.settings.theme} toggleShowSettings={this.toggleShowSettings.bind(this)} uploadData={this.uploadData.bind(this)} />
-          <AssetUtilities asset={this.state.assetUtilityShown} settings={this.state.settings} setAssetUtilityShown={this.setAssetUtilityShown.bind(this)} updateExitPlan={this.updateExitPlan.bind(this)} updateInterest={this.updateInterest.bind(this)} />
+          <AssetUtilities asset={this.state.assetUtilityShown} settings={this.state.settings} removeCrypto={this.removeCrypto.bind(this)} setAssetUtilityShown={this.setAssetUtilityShown.bind(this)} updateExitPlan={this.updateExitPlan.bind(this)} updateHoldings={this.updateHoldings.bind(this)} updateInterest={this.updateInterest.bind(this)} />
           <Hotkeys
             keyName='shift+/'
             onKeyDown={this.toggleShowSettings.bind(this)}

diff --git a/src/Components/AssetCard.js b/src/Components/AssetCard.js
@@ -1,29 +1,12 @@
 import React, { Component } from 'react'
 import 'bootstrap/dist/css/bootstrap.min.css'
 import '../styles/Card.css'
-import TextField from '@material-ui/core/TextField'
 import { Box, Card, CardContent, CardHeader, colors, Grid, IconButton, Typography } from '@material-ui/core'
-import { BarChart, Delete, Save, Settings as SettingsIcon } from '@material-ui/icons'
-import Button from '@material-ui/core/Button'
+import { Settings as SettingsIcon } from '@material-ui/icons'
 import * as Util from '../Util/index'
 import { Skeleton } from '@material-ui/lab'
 import abbreviate from 'number-abbreviate'
-
-function MyBalance (props) {
-  if (props.holdings > 0 && props.settings.showAssetBalances) {
-    return (
-      <Typography component='div'>
-        <Box fontSize={17} fontWeight='fontWeightBold'>
-          Balance: {Util.getLocalizedPrice(props.price * props.holdings, props.settings)}
-        </Box>
-      </Typography>
-    )
-  }
-
-  return (
-    <div />
-  )
-}
+import { MyBalance } from '../Util/index'
 
 function PercentChange (props) {
   let showPeriodChange = false
@@ -62,15 +45,10 @@ class AssetCard extends Component {
   constructor (props) {
     super(props)
     this.state = {
-      flip: false,
       settings: props.settings
     }
   }
 
-  toggleSettings () {
-    this.setState({ flip: !this.state.flip })
-  }
-
   render () {
     const renderStyle = this.props.renderStyle.replace('card:', '')
 
@@ -120,28 +98,18 @@ class AssetCard extends Component {
         : <Skeleton className='m-auto' height={28} width='50%' />
 
     return (
-      <Card className='card' onClick={(event) => (window.innerWidth <= 760 && event.target.tagName !== 'INPUT') ? this.toggleSettings() : null}>
-
+      <Card className='card' onClick={() => this.props.setAssetUtilityShown(this.props.asset)}>
         <CardHeader
           avatar={renderStyle === 'compact' ? assetImage : null}
           action={
-            this.state.flip
-              ? <IconButton
-                  aria-label={'save ' + this.props.asset.name}
-                  className='p-0 settings visible'
-                  color='inherit'
-                  onClick={() => this.toggleSettings()}
-                >
-                <Save />
-                </IconButton>
-              : <IconButton
-                  aria-label={this.props.asset.name + ' settings'}
-                  className='p-0 settings'
-                  color='inherit'
-                  onClick={() => this.toggleSettings()}
-                >
-                <SettingsIcon />
-                </IconButton>
+            <IconButton
+              aria-label={this.props.asset.name + ' settings'}
+              className='p-0 settings'
+              color='inherit'
+              onClick={() => this.props.setAssetUtilityShown(this.props.asset)}
+            >
+              <SettingsIcon />
+            </IconButton>
             }
           classes={
             renderStyle === 'compact'
@@ -166,49 +134,12 @@ class AssetCard extends Component {
             </CardContent>)
             : null
         }
-        <CardContent hidden={this.state.flip || renderStyle === 'compact'}>
+        <CardContent hidden={renderStyle === 'compact'}>
           <Grid container>
             <Grid item xs={6}>{percentChanges}</Grid>
             <Grid item xs={6}>{assetInfo}</Grid>
           </Grid>
         </CardContent>
-        <CardContent hidden={!this.state.flip}>
-          <TextField
-            label='My Holdings'
-            onChange={
-              event => {
-                this.props.updateHoldings(event.target.value, this.props.asset.symbol)
-              }
-            }
-            size='small'
-            value={Util.getLocalizedNumber(this.props.asset.holdings, this.props.settings)}
-            variant='outlined'
-          />
-
-          <MyBalance holdings={this.props.asset.holdings} price={price} settings={this.props.settings} />
-
-          <hr />
-
-          <Button
-            variant='contained'
-            className='mb-2'
-            color='primary'
-            startIcon={<BarChart />}
-            onClick={() => this.props.setAssetUtilityShown(this.props.asset)}
-          >
-            Simulation and more
-          </Button>
-
-          <Button
-            variant='contained'
-            className='mb-2'
-            color='secondary'
-            startIcon={<Delete />}
-            onClick={() => this.props.removeCrypto(this.props.asset.symbol)}
-          >
-            Remove Asset
-          </Button>
-        </CardContent>
       </Card>
     )
   }

diff --git a/src/Components/AssetTable.js b/src/Components/AssetTable.js
@@ -7,15 +7,20 @@ import abbreviate from 'number-abbreviate'
 import { DataGrid } from '@material-ui/data-grid'
 import { Delete } from '@material-ui/icons'
 import TextField from '@material-ui/core/TextField'
+import MobileAssetTable from './MobileAssetTable'
 
 function AssetTable (props) {
+  if (window.innerWidth <= 500) {
+    return <MobileAssetTable {...props} />
+  }
+
   let assets = props.assets
 
   const columns = [
     {
       field: 'imageURL',
       filterable: false,
-      headerName: ' ',
+      headerName: 'Image',
       renderCell: (params) => (
         <img alt="Logo" height={28} src={params.value} />
       ),
@@ -99,8 +104,22 @@ function AssetTable (props) {
         </Box>
       )
     },
-    { field: 'market_cap', headerName: 'Market Cap', width: 140 },
-    { field: 'volume_24h', headerName: 'Volume', width: 110 },
+    {
+      field: 'market_cap',
+      headerName: 'Market Cap',
+      width: 140,
+      renderCell: (params) => (
+        Util.getCurrencySymbol(props.settings.currency) + abbreviate(params.value, 2, ['K', 'M', 'B', 'T'])
+      )
+    },
+    {
+      field: 'volume_24h',
+      headerName: 'Volume',
+      width: 110,
+      renderCell: (params) => (
+        Util.getCurrencySymbol(props.settings.currency) + abbreviate(params.value, 2, ['K', 'M', 'B', 'T'])
+      )
+    },
     {
       description: "Calculated by (Circulating Supply / Max Supply). However if Max Supply is not specified it is replaced by Total Supply",
       field: 'supply',
@@ -131,7 +150,7 @@ function AssetTable (props) {
     {
       field: "removeSymbol",
       filterable: false,
-      headerName: ' ',
+      headerName: 'Remove Asset',
       renderCell: (params) => (
         <IconButton
           aria-label='close'
@@ -168,8 +187,8 @@ function AssetTable (props) {
         asset.percent_change_1h,
         asset.percent_change_24h,
         asset.percent_change_7d,
-        Util.getCurrencySymbol(props.settings.currency) + abbreviate(asset.market_cap, 2, ['K', 'M', 'B', 'T']),
-        Util.getCurrencySymbol(props.settings.currency) + abbreviate(asset.volume_24h, 2, ['K', 'M', 'B', 'T']),
+        asset.market_cap,
+        asset.volume_24h,
         (asset.circulating_supply / (asset.max_supply || asset.total_supply)),
         asset.symbol
       )

diff --git a/src/Components/AssetUtilities.js b/src/Components/AssetUtilities.js
@@ -9,11 +9,13 @@ import {
   InputAdornment,
   Slider
 } from '@material-ui/core'
-import { ArrowBack } from '@material-ui/icons'
+import { ArrowBack, Delete } from '@material-ui/icons'
 import TextField from '@material-ui/core/TextField'
 import ExitPlanningTable from './ExitPlanningTable'
 import * as Util from '../Util/index'
 import InterestCalculator from './InterestCalculator'
+import Button from '@material-ui/core/Button'
+import { MyBalance } from '../Util/index'
 
 class AssetUtilities extends Component {
   UNSAFE_componentWillReceiveProps (nextProps, nextContext) {
@@ -62,8 +64,44 @@ class AssetUtilities extends Component {
         >
           <ArrowBack />
         </IconButton>
-        <h2 className='settings-title'>{this.props.asset.name} ({this.props.asset.symbol})</h2>
+        <h2 className='settings-title'>
+          {this.props.asset.name} ({this.props.asset.symbol})
+          <MyBalance holdings={this.props.asset.holdings} price={price} settings={this.props.settings} />
+        </h2>
+
+        <hr />
+
         <div className='settings-panel'>
+          <Grid container>
+            <Grid item xs={12} md={6}>
+              <TextField
+                label='My Holdings'
+                onChange={
+                  event => {
+                    this.props.updateHoldings(event.target.value, this.props.asset.symbol)
+                  }
+                }
+                size='small'
+                value={Util.getLocalizedNumber(this.props.asset.holdings, this.props.settings)}
+                variant='outlined'
+              />
+            </Grid>
+
+            <Grid item xs={12} md={6}>
+              <Button
+                variant='contained'
+                className='mb-2'
+                color='secondary'
+                startIcon={<Delete />}
+                onClick={() => {
+                  this.props.removeCrypto(this.props.asset.symbol);
+                  this.props.setAssetUtilityShown(null);
+                }}
+              >
+                Remove Asset
+              </Button>
+            </Grid>
+          </Grid>
           <Grid container>
             <Grid item xs={12} md={6}>
               <h4>Simulation</h4>