Fix smooth avatar loading. Run prettier

frontend/src/components/App.js

@@ -69,12 +69,14 @@ export default class App extends Component {
               onClose={() => this.setState({ openLearn: false })}
             />
             <IconButton
+              color='inherit'
               sx={{ position: 'fixed', right: '34px' }}
               onClick={() => this.setState({ openLearn: true })}
             >
               <SchoolIcon />
             </IconButton>
             <IconButton
+              color='inherit'
               sx={{ position: 'fixed', right: '0px' }}
               onClick={() => this.setState({ dark: !this.state.dark })}
             >

frontend/src/components/BottomBar.js

@@ -173,8 +173,11 @@ class BottomBar extends Component {
   bottomBarDesktop = () => {
     const { t } = this.props;
     const hasRewards = this.props.earnedRewards > 0;
-    const hasOrder =
-      !!((this.props.activeOrderId > 0) & !this.state.profileShown & this.props.avatarLoaded);
+    const hasOrder = !!(
+      (this.props.activeOrderId > 0) &
+      !this.state.profileShown &
+      this.props.avatarLoaded
+    );
     const fontSize = this.props.theme.typography.fontSize;
     const fontSizeFactor = fontSize / 14; // default fontSize is 14
     const typographyProps = {
@@ -482,8 +485,11 @@ class BottomBar extends Component {
   bottomBarPhone = () => {
     const { t } = this.props;
     const hasRewards = this.props.earnedRewards > 0;
-    const hasOrder =
-      !!((this.state.active_order_id > 0) & !this.state.profileShown & this.props.avatarLoaded);
+    const hasOrder = !!(
+      (this.state.active_order_id > 0) &
+      !this.state.profileShown &
+      this.props.avatarLoaded
+    );
     return (
       <Paper elevation={6} style={{ height: 40 }}>
         <Grid container>

frontend/src/components/MakerPage.js

@@ -445,9 +445,11 @@ class MakerPage extends Component {
                 disabled={this.state.enableAmountRange}
                 variant={this.state.enableAmountRange ? 'filled' : 'outlined'}
                 error={
-                  !!((this.state.amount < this.getMinAmount() ||
-                    this.state.amount > this.getMaxAmount()) &
-                  (this.state.amount != ''))
+                  !!(
+                    (this.state.amount < this.getMinAmount() ||
+                      this.state.amount > this.getMaxAmount()) &
+                    (this.state.amount != '')
+                  )
                 }
                 helperText={
                   (this.state.amount < this.getMinAmount()) & (this.state.amount != '')
@@ -615,8 +617,8 @@ class MakerPage extends Component {
 
   handleChangePublicDuration = (date) => {
     const d = new Date(date);
-      const hours = d.getHours();
-      const minutes = d.getMinutes();
+    const hours = d.getHours();
+    const minutes = d.getMinutes();
 
     const total_secs = hours * 60 * 60 + minutes * 60;
 
@@ -628,8 +630,8 @@ class MakerPage extends Component {
 
   handleChangeEscrowDuration = (date) => {
     const d = new Date(date);
-      const hours = d.getHours();
-      const minutes = d.getMinutes();
+    const hours = d.getHours();
+    const minutes = d.getMinutes();
 
     const total_secs = hours * 60 * 60 + minutes * 60;
 

frontend/src/components/UserGenPage.js

@@ -202,7 +202,7 @@ class UserGenPage extends Component {
           align='center'
           sx={{ width: 370 * fontSizeFactor, height: 260 * fontSizeFactor }}
         >
-          {!this.state.loadingRobot && this.state.avatarUrl ? (
+          {this.props.avatarLoaded && this.state.avatarUrl ? (
             <div>
               <Grid item xs={12} align='center'>
                 <Typography component='h5' variant='h5'>

frontend/src/utils/match.ts

@@ -1,6 +1,6 @@
 export const median = (arr: number[]) => {
   const mid = Math.floor(arr.length / 2);
-    const nums = [...arr].sort((a, b) => a - b);
+  const nums = [...arr].sort((a, b) => a - b);
   return arr.length % 2 !== 0 ? nums[mid] : (nums[mid - 1] + nums[mid]) / 2;
 };
 

frontend/src/utils/prettyNumbers.test.ts

@@ -1,45 +1,45 @@
-import { pn, amountToString } from "./prettyNumbers";
+import { pn, amountToString } from './prettyNumbers';
 
-describe("prettyNumbers", () => {
-  test("pn()", () => {
+describe('prettyNumbers', () => {
+  test('pn()', () => {
     [
-      {input: null, output: undefined},
-      {input: undefined, output: undefined},
-      {input: 0, output: "0"},
-      {input: 1, output: "1"},
-      {input: 2, output: "2"},
-      {input: 10, output: "10"},
-      {input: 11, output: "11"},
-      {input: 11.0, output: "11"},
-      {input: 12.0, output: "12"},
-      {input: 100.50, output: "100.5"},
-      {input: 224.56, output: "224.56"},
-      {input: 1567, output: "1,567"},
-      {input: 15678, output: "15,678"},
-      {input: 2984.99, output: "2,984.99"},
-      {input: 100000.00, output: "100,000"},
+      { input: null, output: undefined },
+      { input: undefined, output: undefined },
+      { input: 0, output: '0' },
+      { input: 1, output: '1' },
+      { input: 2, output: '2' },
+      { input: 10, output: '10' },
+      { input: 11, output: '11' },
+      { input: 11.0, output: '11' },
+      { input: 12.0, output: '12' },
+      { input: 100.5, output: '100.5' },
+      { input: 224.56, output: '224.56' },
+      { input: 1567, output: '1,567' },
+      { input: 15678, output: '15,678' },
+      { input: 2984.99, output: '2,984.99' },
+      { input: 100000.0, output: '100,000' },
     ].forEach((it) => {
       const response = pn(it.input);
       expect(response).toBe(it.output);
     });
   });
-})
+});
 
-describe("amountToString", () => {
-  test("pn()", () => {
+describe('amountToString', () => {
+  test('pn()', () => {
     [
-      {input: null, output: "NaN"},
-      {input: undefined, output: "NaN"},
-      {input: ["", false, 50, 150] , output: "0"},
-      {input: ["100.00", false, 50, 150] , output: "100"},
-      {input: ["100.00", true, undefined, undefined] , output: "NaN-NaN"},
-      {input: ["100.00", true, undefined, 150] , output: "NaN-150"},
-      {input: ["100.00", true, 50, undefined] , output: "50-NaN"},
-      {input: ["100.00", true, 50, 150] , output: "50-150"},
+      { input: null, output: 'NaN' },
+      { input: undefined, output: 'NaN' },
+      { input: ['', false, 50, 150], output: '0' },
+      { input: ['100.00', false, 50, 150], output: '100' },
+      { input: ['100.00', true, undefined, undefined], output: 'NaN-NaN' },
+      { input: ['100.00', true, undefined, 150], output: 'NaN-150' },
+      { input: ['100.00', true, 50, undefined], output: '50-NaN' },
+      { input: ['100.00', true, 50, 150], output: '50-150' },
     ].forEach((it) => {
-      const params: any[] = it.input || []
-      const response = amountToString(params[0],params[1],params[2],params[3]);
+      const params: any[] = it.input || [];
+      const response = amountToString(params[0], params[1], params[2], params[3]);
       expect(response).toBe(it.output);
     });
   });
-})
+});