Merge pull request #25 from alecsloan/dev

v3.2.1
alecsloan · Apr 10, 2021 · 9f4d56d · 9f4d56d
2 parents df6926e + 36ab538
commit 9f4d56d
Show file tree

Hide file tree

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

diff --git a/src/Components/AssetCard.js b/src/Components/AssetCard.js
@@ -81,40 +81,44 @@ class AssetCard extends Component {
         ? (
           <img
             alt={this.props.asset.name + ' Logo'}
-            height={renderStyle === 'compact' ? 75 : 100}
+            height={renderStyle === 'compact' ? 70 : 100}
             src={this.props.asset.imageURL}
           />
           )
         : <Skeleton className='card-img-top m-auto' variant='circle' height={100} />
 
+    const percentChanges =
+      (
+        <Grid container>
+          <Grid item xs={renderStyle === 'compact' ? 4 : 12}><PercentChange period='1h' percentChange={this.props.asset.percent_change_1h} settings={this.props.settings} style={renderStyle} /></Grid>
+          <Grid item xs={renderStyle === 'compact' ? 4 : 12}><PercentChange period='24h' percentChange={this.props.asset.percent_change_24h} settings={this.props.settings} style={renderStyle} /></Grid>
+          <Grid item xs={renderStyle === 'compact' ? 4 : 12}><PercentChange period='7d' percentChange={this.props.asset.percent_change_7d} settings={this.props.settings} style={renderStyle} /></Grid>
+        </Grid>
+      )
+
     const assetInfo =
       price
         ? (
-          <Grid container>
-            {renderStyle === 'compact'
-              ? <Grid item xs={6}>{Util.getLocalizedPrice(price, this.props.settings)}</Grid>
-              : <Grid item xs={12}>Price: {Util.getLocalizedPrice(price, this.props.settings)}</Grid>}
-            {renderStyle === 'compact'
-              ? <Grid item xs={6}>{Util.getCurrencySymbol(this.props.settings.currency) + abbreviate(this.props.asset.market_cap, 2, ['K', 'M', 'B', 'T'])}</Grid>
-              : <Grid item xs={12}>Market Cap: {Util.getCurrencySymbol(this.props.settings.currency) + abbreviate(this.props.asset.market_cap, 2, ['K', 'M', 'B', 'T'])}</Grid>}
-            <Grid item xs={12}><MyBalance holdings={this.props.asset.holdings} price={price} settings={this.props.settings} /></Grid>
-          </Grid>
-          )
+          <div>
+            <Grid container>
+              {renderStyle === 'compact'
+                ? <Grid item xs={6}>{Util.getLocalizedPrice(price, this.props.settings)}</Grid>
+                : <Grid item xs={12}>Price: {Util.getLocalizedPrice(price, this.props.settings)}</Grid>}
+              {renderStyle === 'compact'
+                ? <Grid item xs={6}>{Util.getCurrencySymbol(this.props.settings.currency) + abbreviate(this.props.asset.market_cap, 2, ['K', 'M', 'B', 'T'])}</Grid>
+                : <Grid item xs={12}>Market Cap: {Util.getCurrencySymbol(this.props.settings.currency) + abbreviate(this.props.asset.market_cap, 2, ['K', 'M', 'B', 'T'])}</Grid>}
+              <Grid item xs={12}><MyBalance holdings={this.props.asset.holdings} price={price} settings={this.props.settings} /></Grid>
+            </Grid>
+            {renderStyle === 'compact' ? percentChanges : null}
+          </div>
+        )
         : <Skeleton className='m-auto' height={20} width='50%' />
 
     const assetName =
       (this.props.asset.name && this.props.asset.symbol)
         ? `${this.props.asset.name} (${this.props.asset.symbol})`
         : <Skeleton className='m-auto' height={28} width='50%' />
 
-    const percentChanges =
-      (
-        <div><PercentChange period='1h' percentChange={this.props.asset.percent_change_1h} settings={this.props.settings} style={renderStyle} />
-          <PercentChange period='24h' percentChange={this.props.asset.percent_change_24h} settings={this.props.settings} style={renderStyle} />
-          <PercentChange period='7d' percentChange={this.props.asset.percent_change_7d} settings={this.props.settings} style={renderStyle} />
-        </div>
-      )
-
     return (
       <Card className='card' onClick={(event) => (window.innerWidth <= 760 && event.target.tagName !== 'INPUT') ? this.toggleSettings() : null}>
 
@@ -140,15 +144,15 @@ class AssetCard extends Component {
                 </IconButton>
             }
           classes={
-              renderStyle === 'compact'
-                ? null
-                : {
-                    action: 'm-0 p-2',
-                    root: 'h-0 p-0'
-                  }
-}
+            renderStyle === 'compact'
+              ? null
+              : {
+                action: 'm-0 p-2',
+                root: 'h-0 p-0'
+              }
+          }
           subheader={renderStyle === 'compact' ? assetInfo : null}
-          title={renderStyle === 'compact' ? assetName : null}
+          title={renderStyle === 'compact' ? <Box component='h5'>{assetName}</Box> : null}
         />
         {
           renderStyle !== 'compact'
@@ -162,13 +166,11 @@ class AssetCard extends Component {
             </CardContent>)
             : null
         }
-        <CardContent hidden={this.state.flip}>
-          {renderStyle === 'compact'
-            ? percentChanges
-            : <Grid container>
-              <Grid item xs={6}>{percentChanges}</Grid>
-              <Grid item xs={6}>{assetInfo}</Grid>
-            </Grid>}
+        <CardContent hidden={this.state.flip || renderStyle === 'compact'}>
+          <Grid container>
+            <Grid item xs={6}>{percentChanges}</Grid>
+            <Grid item xs={6}>{assetInfo}</Grid>
+          </Grid>
         </CardContent>
         <CardContent hidden={!this.state.flip}>
           <TextField

diff --git a/src/Components/AssetTable.js b/src/Components/AssetTable.js
@@ -24,7 +24,15 @@ function AssetTable (props) {
     },
     { field: 'id', headerName: 'Symbol', disableColumnMenu: false, width: 110 },
     { field: 'name', headerName: 'Name', disableColumnMenu: false, width: 150 },
-    { field: 'balance', headerName: 'Balance', width: 150 },
+    {
+      field: 'balance',
+      headerName: 'Balance',
+      hide: !props.settings.showAssetBalances,
+      width: 150,
+      renderCell: (params) => (
+        Util.getLocalizedPrice(params.value, props.settings)
+      )
+    },
     {
       field: 'holdings',
       headerName: 'Holdings',
@@ -154,7 +162,7 @@ function AssetTable (props) {
         asset.symbol,
         asset.imageURL,
         asset.name,
-        Util.getLocalizedPrice(asset.holdings * asset.price, props.settings),
+        asset.holdings * asset.price,
         asset.holdings,
         asset.price,
         asset.percent_change_1h,
@@ -174,6 +182,7 @@ function AssetTable (props) {
     <DataGrid
       autoHeight
       columns={columns}
+      hideFooterSelectedRowCount={true}
       onCellClick = {(cell) => {
         if (cell.field === "holdings") {
           editHoldings = cell.row.id

diff --git a/src/styles/Card.css b/src/styles/Card.css
@@ -109,14 +109,6 @@
     height: 0 !important;
 }
 
-.MuiDataGrid-viewport .rendering-zone,
-.MuiDataGrid-root .Mui-even.MuiDataGrid-row,
-.MuiDataGrid-root .Mui-odd.MuiDataGrid-row,
-.MuiDataGrid-root .MuiDataGrid-viewport {
-    min-width: 100% !important;
-    width: 100% !important;
-}
-
 .pull-left {
   left: 0;
   position: relative !important;