From 5ff6e1e78de742b8338b74c8b4834f791625e5ab Mon Sep 17 00:00:00 2001
From: Fernando Porazzi <fernandoporazzi@gmail.com>
Date: Tue, 17 May 2022 22:27:12 +0200
Subject: [PATCH 1/4] Migrate ExchangeSummaryDialog to Dialogs folder

This commit migrates the ExchangeSummaryDialog component to the dialogs folder whilst converting it to Typescript
---
 frontend/src/components/BottomBar.js          | 127 ++-----------
 .../Dialogs/ExchangeSummaryDialog.tsx         | 169 ++++++++++++++++++
 frontend/src/components/Dialogs/index.ts      |   1 +
 3 files changed, 188 insertions(+), 109 deletions(-)
 create mode 100644 frontend/src/components/Dialogs/ExchangeSummaryDialog.tsx

diff --git a/frontend/src/components/BottomBar.js b/frontend/src/components/BottomBar.js
index d715e327..80c33e97 100644
--- a/frontend/src/components/BottomBar.js
+++ b/frontend/src/components/BottomBar.js
@@ -28,7 +28,7 @@ import EmojiEventsIcon from '@mui/icons-material/EmojiEvents';
 import FavoriteIcon from '@mui/icons-material/Favorite';
 import { AmbossIcon , BitcoinSignIcon} from "./Icons";
 
-import { CommunityDialog } from './Dialogs';
+import { CommunityDialog, ExchangeSummaryDialog } from './Dialogs';
 
 import { getCookie } from "../utils/cookies";
 import { pn } from "../utils/prettyNumbers";
@@ -73,7 +73,7 @@ class BottomBar extends Component {
         this.setState(null)
         fetch('/api/info/')
           .then((response) => response.json())
-          .then((data) => this.setState(data) 
+          .then((data) => this.setState(data)
           & this.setState({active_order_id: data.active_order_id ? data.active_order_id : null,
             last_order_id: data.last_order_id ? data.last_order_id : null})
           & this.props.setAppState({nickname:data.nickname, loading:false}));
@@ -419,14 +419,13 @@ bottomBarDesktop =()=>{
         <Paper elevation={6} style={{height:40}}>
                 {this.StatsDialog()}
                 {this.dialogProfile()}
-                {this.exchangeSummaryDialog()}
                 <Grid container>
 
                     <Grid item xs={1.9}>
                         <div style={{display: this.props.avatarLoaded ? '':'none'}}>
                         <ListItemButton onClick={this.handleClickOpenProfile} >
-                            <Tooltip 
-                                open={hasRewards || hasOrder} 
+                            <Tooltip
+                                open={hasRewards || hasOrder}
                                 title={(hasRewards ? t("You can claim satoshis!")+" ": "" )+
                                     (hasOrder ? t("You have an active order"):"")}
                                 >
@@ -576,108 +575,6 @@ bottomBarDesktop =()=>{
         this.setState({openExchangeSummary: false});
     };
 
-    exchangeSummaryDialog =() =>{
-        const { t } = this.props;
-        return(
-        <Dialog
-        open={this.state.openExchangeSummary}
-        onClose={this.handleClickCloseExchangeSummary}
-        aria-labelledby="exchange-summary-title"
-        aria-describedby="exchange-summary-description"
-        >
-        <DialogContent>
-            <Typography component="h5" variant="h5">{t("Exchange Summary")}</Typography>
-            <List dense>
-                <ListItem >
-                    <ListItemIcon size="small">
-                        <InventoryIcon/>
-                    </ListItemIcon>
-                    <ListItemText
-                        primaryTypographyProps={{fontSize: '14px'}}
-                        secondaryTypographyProps={{fontSize: '12px'}}
-                        primary={this.state.num_public_buy_orders}
-                        secondary={t("Public buy orders")} />
-                </ListItem>
-                <Divider/>
-
-                <ListItem >
-                    <ListItemIcon size="small">
-                        <SellIcon/>
-                    </ListItemIcon>
-                    <ListItemText
-                        primaryTypographyProps={{fontSize: '14px'}}
-                        secondaryTypographyProps={{fontSize: '12px'}}
-                        primary={this.state.num_public_sell_orders}
-                        secondary={t("Public sell orders")} />
-                </ListItem>
-                <Divider/>
-
-                <ListItem >
-                    <ListItemIcon size="small">
-                        <BookIcon/>
-                    </ListItemIcon>
-                    <ListItemText
-                        primaryTypographyProps={{fontSize: '14px'}}
-                        secondaryTypographyProps={{fontSize: '12px'}}
-                        primary={pn(this.state.book_liquidity)+" Sats"}
-                        secondary={t("Book liquidity")}/>
-                </ListItem>
-                <Divider/>
-
-                <ListItem >
-                    <ListItemIcon size="small">
-                        <SmartToyIcon/>
-                    </ListItemIcon>
-                    <ListItemText
-                        primaryTypographyProps={{fontSize: '14px'}}
-                        secondaryTypographyProps={{fontSize: '12px'}}
-                        primary={this.state.active_robots_today}
-                        secondary={t("Today active robots")} />
-                </ListItem>
-                <Divider/>
-
-                <ListItem >
-                    <ListItemIcon size="small">
-                        <PriceChangeIcon/>
-                    </ListItemIcon>
-                    <ListItemText
-                        primaryTypographyProps={{fontSize: '14px'}}
-                        secondaryTypographyProps={{fontSize: '12px'}}
-                        primary={this.state.last_day_nonkyc_btc_premium+"%"}
-                        secondary={t("24h non-KYC bitcoin premium")} />
-                </ListItem>
-                <Divider/>
-
-                <ListItem >
-                    <ListItemIcon size="small">
-                        <PercentIcon/>
-                    </ListItemIcon>
-                    <Grid container >
-                        <Grid item xs={6}>
-                            <ListItemText
-                                primaryTypographyProps={{fontSize: '14px'}}
-                                secondaryTypographyProps={{fontSize: '12px'}}
-                                secondary={t("Maker fee")}>
-                                {(this.state.maker_fee*100).toFixed(3)}%
-                            </ListItemText>
-                        </Grid>
-                        <Grid item xs={6}>
-                            <ListItemText
-                                primaryTypographyProps={{fontSize: '14px'}}
-                                secondaryTypographyProps={{fontSize: '12px'}}
-                                secondary={t("Taker fee")}>
-                                {(this.state.taker_fee*100).toFixed(3)}%
-                            </ListItemText>
-                        </Grid>
-                    </Grid>
-                </ListItem>
-                </List>
-
-            </DialogContent>
-        </Dialog>
-    )
-    }
-
 bottomBarPhone =()=>{
     const { t } = this.props;
     var hasRewards = this.state.earned_rewards > 0 ? true: false;
@@ -685,13 +582,12 @@ bottomBarPhone =()=>{
     return(
         <Paper elevation={6} style={{height:40}}>
                 {this.StatsDialog()}
-                {this.exchangeSummaryDialog()}
                 {this.dialogProfile()}
                 <Grid container>
 
                     <Grid item xs={1.6}>
                     <div style={{display: this.props.avatarLoaded ? '':'none'}}>
-                    <Tooltip open={hasRewards || hasOrder} 
+                    <Tooltip open={hasRewards || hasOrder}
                             title={(hasRewards ? t("You can claim satoshis!")+" ": "" )+
                                 (hasOrder ? t("You have an active order"):"")}>
                         <IconButton onClick={this.handleClickOpenProfile} sx={{margin: 0, bottom: 17, right: 8}} >
@@ -787,6 +683,19 @@ bottomBarPhone =()=>{
                     isOpen={this.state.openCommuniy}
                     handleClickCloseCommunity={this.handleClickCloseCommunity}
                 />
+
+                <ExchangeSummaryDialog
+                    isOpen={this.state.openExchangeSummary}
+                    handleClickCloseExchangeSummary={this.handleClickCloseExchangeSummary}
+                    numPublicBuyOrders={this.state.num_public_buy_orders}
+                    numPublicSellOrders={this.state.num_public_sell_orders}
+                    bookLiquidity={this.state.book_liquidity}
+                    activeRobotsToday={this.state.active_robots_today}
+                    lastDayNonkycBtcPremium={this.state.last_day_nonkyc_btc_premium}
+                    makerFee={this.state.maker_fee}
+                    takerFee={this.state.taker_fee}
+                />
+
                 <MediaQuery minWidth={1200}>
                     {this.bottomBarDesktop()}
                 </MediaQuery>
diff --git a/frontend/src/components/Dialogs/ExchangeSummaryDialog.tsx b/frontend/src/components/Dialogs/ExchangeSummaryDialog.tsx
new file mode 100644
index 00000000..3b759ec9
--- /dev/null
+++ b/frontend/src/components/Dialogs/ExchangeSummaryDialog.tsx
@@ -0,0 +1,169 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+import {
+  Dialog,
+  DialogContent,
+  Divider,
+  Grid,
+  List,
+  ListItemText,
+  ListItem,
+  ListItemIcon,
+  Typography,
+} from "@mui/material";
+
+import InventoryIcon from '@mui/icons-material/Inventory';
+import SellIcon from '@mui/icons-material/Sell';
+import SmartToyIcon from '@mui/icons-material/SmartToy';
+import PercentIcon from '@mui/icons-material/Percent';
+import PriceChangeIcon from '@mui/icons-material/PriceChange';
+import BookIcon from '@mui/icons-material/Book';
+
+import { pn } from "../../utils/prettyNumbers";
+
+type Props = {
+  isOpen: boolean;
+  handleClickCloseExchangeSummary: () => void;
+  numPublicBuyOrders: number;
+  numPublicSellOrders: number;
+  bookLiquidity: number;
+  activeRobotsToday: number;
+  lastDayNonkycBtcPremium: number;
+  makerFee: number;
+  takerFee: number;
+}
+
+const ExchangeSummaryDialog = ({
+  isOpen,
+  handleClickCloseExchangeSummary,
+  numPublicBuyOrders,
+  numPublicSellOrders,
+  bookLiquidity,
+  activeRobotsToday,
+  lastDayNonkycBtcPremium,
+  makerFee,
+  takerFee,
+}: Props): JSX.Element => {
+  const { t } = useTranslation();
+
+  return (
+    <Dialog
+      open={isOpen}
+      onClose={handleClickCloseExchangeSummary}
+      aria-labelledby="exchange-summary-title"
+      aria-describedby="exchange-summary-description"
+    >
+      <DialogContent>
+        <Typography component="h5" variant="h5">{t("Exchange Summary")}</Typography>
+
+        <List dense>
+          <ListItem >
+            <ListItemIcon>
+              <InventoryIcon />
+            </ListItemIcon>
+
+            <ListItemText
+              primaryTypographyProps={{fontSize: '14px'}}
+              secondaryTypographyProps={{fontSize: '12px'}}
+              primary={numPublicBuyOrders}
+              secondary={t("Public buy orders")}
+            />
+          </ListItem>
+
+          <Divider />
+
+          <ListItem >
+            <ListItemIcon>
+              <SellIcon />
+            </ListItemIcon>
+
+            <ListItemText
+              primaryTypographyProps={{fontSize: '14px'}}
+              secondaryTypographyProps={{fontSize: '12px'}}
+              primary={numPublicSellOrders}
+              secondary={t("Public sell orders")}
+            />
+          </ListItem>
+
+          <Divider/>
+
+          <ListItem >
+            <ListItemIcon>
+              <BookIcon />
+            </ListItemIcon>
+
+            <ListItemText
+              primaryTypographyProps={{fontSize: '14px'}}
+              secondaryTypographyProps={{fontSize: '12px'}}
+              primary={`${pn(bookLiquidity)} Sats`}
+              secondary={t("Book liquidity")}
+            />
+          </ListItem>
+
+          <Divider/>
+
+          <ListItem >
+            <ListItemIcon>
+              <SmartToyIcon />
+            </ListItemIcon>
+
+            <ListItemText
+              primaryTypographyProps={{fontSize: '14px'}}
+              secondaryTypographyProps={{fontSize: '12px'}}
+              primary={activeRobotsToday}
+              secondary={t("Today active robots")}
+            />
+          </ListItem>
+
+          <Divider/>
+
+          <ListItem >
+            <ListItemIcon>
+              <PriceChangeIcon />
+            </ListItemIcon>
+
+            <ListItemText
+              primaryTypographyProps={{fontSize: '14px'}}
+              secondaryTypographyProps={{fontSize: '12px'}}
+              primary={`${lastDayNonkycBtcPremium}%`}
+              secondary={t("24h non-KYC bitcoin premium")}
+            />
+          </ListItem>
+
+          <Divider/>
+
+          <ListItem >
+            <ListItemIcon>
+              <PercentIcon />
+            </ListItemIcon>
+
+            <Grid container >
+              <Grid item xs={6}>
+                <ListItemText
+                  primaryTypographyProps={{fontSize: '14px'}}
+                  secondaryTypographyProps={{fontSize: '12px'}}
+                  secondary={t("Maker fee")}
+                >
+                  {(makerFee * 100).toFixed(3)}%
+                </ListItemText>
+              </Grid>
+
+              <Grid item xs={6}>
+                <ListItemText
+                  primaryTypographyProps={{fontSize: '14px'}}
+                  secondaryTypographyProps={{fontSize: '12px'}}
+                  secondary={t("Taker fee")}
+                >
+                  {(takerFee * 100).toFixed(3)}%
+                </ListItemText>
+              </Grid>
+            </Grid>
+          </ListItem>
+        </List>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default ExchangeSummaryDialog;
diff --git a/frontend/src/components/Dialogs/index.ts b/frontend/src/components/Dialogs/index.ts
index 518f5c9e..96597467 100644
--- a/frontend/src/components/Dialogs/index.ts
+++ b/frontend/src/components/Dialogs/index.ts
@@ -3,4 +3,5 @@ export { default as InfoDialog } from "./Info";
 export { default as LearnDialog } from "./Learn";
 export { default as NoRobotDialog } from "./NoRobot";
 export { default as StoreTokenDialog } from "./StoreToken";
+export { default as ExchangeSummaryDialog } from "./ExchangeSummaryDialog";
 

From 04e13d50fda99586e33915bcd33f1d6a9f3d9681 Mon Sep 17 00:00:00 2001
From: Fernando Porazzi <fernandoporazzi@gmail.com>
Date: Wed, 18 May 2022 11:17:25 +0200
Subject: [PATCH 2/4] Migrate ProfileDialog to Dialogs folder

Convert ProfileDialog component to Typescript and co-locate it inside the dialogs folder
---
 frontend/src/components/BottomBar.js          | 209 ++---------
 .../src/components/Dialogs/ProfileDialog.tsx  | 328 ++++++++++++++++++
 frontend/src/components/Dialogs/index.ts      |   1 +
 3 files changed, 352 insertions(+), 186 deletions(-)
 create mode 100644 frontend/src/components/Dialogs/ProfileDialog.tsx

diff --git a/frontend/src/components/BottomBar.js b/frontend/src/components/BottomBar.js
index 80c33e97..4a6f0bd5 100644
--- a/frontend/src/components/BottomBar.js
+++ b/frontend/src/components/BottomBar.js
@@ -22,13 +22,16 @@ import PasswordIcon from '@mui/icons-material/Password';
 import ContentCopy from "@mui/icons-material/ContentCopy";
 import DnsIcon from '@mui/icons-material/Dns';
 import WebIcon from '@mui/icons-material/Web';
-import BookIcon from '@mui/icons-material/Book';
 import PersonAddAltIcon from '@mui/icons-material/PersonAddAlt';
 import EmojiEventsIcon from '@mui/icons-material/EmojiEvents';
 import FavoriteIcon from '@mui/icons-material/Favorite';
 import { AmbossIcon , BitcoinSignIcon} from "./Icons";
 
-import { CommunityDialog, ExchangeSummaryDialog } from './Dialogs';
+import {
+    CommunityDialog,
+    ExchangeSummaryDialog,
+    ProfileDialog,
+} from './Dialogs';
 
 import { getCookie } from "../utils/cookies";
 import { pn } from "../utils/prettyNumbers";
@@ -201,7 +204,7 @@ class BottomBar extends Component {
         this.setState({openProfile: false});
     };
 
-    handleSubmitInvoiceClicked=()=>{
+    handleSubmitInvoiceClicked=(rewardInvoice)=>{
         this.setState({
             badInvoice:false,
             showRewardsSpinner: true,
@@ -211,7 +214,7 @@ class BottomBar extends Component {
             method: 'POST',
             headers: {'Content-Type':'application/json', 'X-CSRFToken': getCookie('csrftoken'),},
             body: JSON.stringify({
-              'invoice': this.state.rewardInvoice,
+              'invoice': rewardInvoice,
             }),
         };
         fetch('/api/reward/', requestOptions)
@@ -230,186 +233,6 @@ class BottomBar extends Component {
         return url.split('/')[2]
       }
 
-    dialogProfile =() =>{
-        const { t } = this.props;
-        return(
-        <Dialog
-        open={this.state.openProfile}
-        onClose={this.handleClickCloseProfile}
-        aria-labelledby="profile-title"
-        aria-describedby="profile-description"
-        >
-            <DialogContent>
-            <Typography component="h5" variant="h5">{t("Your Profile")}</Typography>
-            <List>
-                <Divider/>
-                <ListItem className="profileNickname">
-                    <ListItemText secondary={t("Your robot")}>
-                    <Typography component="h6" variant="h6">
-                    {this.props.nickname ?
-                    <div style={{position:'relative',left:'-7px'}}>
-                    <div style={{display:'flex', alignItems:'center', justifyContent:'left', flexWrap:'wrap', width:300}}>
-                        <BoltIcon sx={{ color: "#fcba03", height: '28px',width: '24px'}}/><a>{this.props.nickname}</a><BoltIcon sx={{ color: "#fcba03", height: '28px',width: '24px'}}/>
-                    </div>
-                    </div>
-                    : ""}
-                    </Typography>
-                    </ListItemText>
-                    <ListItemAvatar>
-                    <Avatar className='profileAvatar'
-                        sx={{ width: 65, height:65 }}
-                        alt={this.props.nickname}
-                        src={this.props.nickname ? window.location.origin +'/static/assets/avatars/' + this.props.nickname + '.png' : null}
-                        />
-                    </ListItemAvatar>
-                </ListItem>
-
-                <Divider/>
-
-                {this.state.active_order_id ?
-                <ListItemButton onClick={this.handleClickCloseProfile} to={'/order/'+this.state.active_order_id} component={LinkRouter}>
-                    <ListItemIcon>
-                        <Badge badgeContent="" color="primary">
-                            <NumbersIcon color="primary"/>
-                        </Badge>
-                    </ListItemIcon>
-                    <ListItemText primary={t("One active order #{{orderID}}",{orderID: this.state.active_order_id})} secondary={t("Your current order")}/>
-                </ListItemButton>
-                :
-
-                this.state.last_order_id ?
-                    <ListItemButton onClick={this.handleClickCloseProfile} to={'/order/'+this.state.last_order_id} component={LinkRouter}>
-                        <ListItemIcon>
-                            <NumbersIcon color="primary"/>
-                        </ListItemIcon>
-                    <ListItemText primary={t("Your last order #{{orderID}}",{orderID: this.state.last_order_id})} secondary={t("Inactive order")}/>
-                    </ListItemButton>
-                    :
-                    <ListItem>
-                        <ListItemIcon><NumbersIcon/></ListItemIcon>
-                        <ListItemText primary={t("No active orders")} secondary={t("You do not have previous orders")}/>
-                    </ListItem>
-
-                }
-
-                <ListItem>
-                    <ListItemIcon>
-                        <PasswordIcon/>
-                    </ListItemIcon>
-                    <ListItemText secondary={t("Your token (will not remain here)")}>
-                    {getCookie("robot_token") ?
-                    <TextField
-                        disabled
-                        sx={{width:"100%", maxWidth:"450px"}}
-                        label={t("Back it up!")}
-                        value={getCookie("robot_token") }
-                        variant='filled'
-                        size='small'
-                        InputProps={{
-                            endAdornment:
-                            <Tooltip disableHoverListener enterTouchDelay={0} title={t("Copied!")}>
-                                <IconButton onClick= {()=> (navigator.clipboard.writeText(getCookie("robot_token")) & this.props.setAppState({copiedToken:true}))}>
-                                    <ContentCopy color={this.props.copiedToken ? "inherit" : "primary"}/>
-                                </IconButton>
-                            </Tooltip>,
-                            }}
-                        />
-                    :
-                    t("Cannot remember")}
-                </ListItemText>
-                </ListItem>
-
-                <Divider/>
-
-                <Grid item align="center">
-                    <FormControlLabel labelPlacement="start"control={
-                        <Switch
-                        checked={this.state.showRewards}
-                        onChange={()=> this.setState({showRewards: !this.state.showRewards})}/>}
-                        label={t("Rewards and compensations")}
-                        />
-                </Grid>
-
-                <div style={{ display: this.state.showRewards ? '':'none'}}>
-                    <ListItem>
-                        <ListItemIcon>
-                            <PersonAddAltIcon/>
-                        </ListItemIcon>
-                        <ListItemText secondary={t("Share to earn 100 Sats per trade")}>
-                        <TextField
-                            label={t("Your referral link")}
-                            value={this.getHost()+'/ref/'+this.state.referral_code}
-                            size='small'
-                            InputProps={{
-                                endAdornment:
-                                <Tooltip disableHoverListener enterTouchDelay={0} title={t("Copied!")}>
-                                    <IconButton onClick= {()=>navigator.clipboard.writeText('http://'+this.getHost()+'/ref/'+this.state.referral_code)}>
-                                        <ContentCopy />
-                                    </IconButton>
-                                </Tooltip>,
-                                }}
-                            />
-                    </ListItemText>
-                    </ListItem>
-
-                    <ListItem>
-                        <ListItemIcon>
-                            <EmojiEventsIcon/>
-                        </ListItemIcon>
-                        {!this.state.openClaimRewards ?
-                        <ListItemText secondary={t("Your earned rewards")}>
-                            <Grid container>
-                                <Grid item xs={9}>
-                                    <Typography>{this.state.earned_rewards+" Sats"}</Typography>
-                                </Grid>
-                                <Grid item xs={3}>
-                                    <Button disabled={this.state.earned_rewards==0? true : false} onClick={() => this.setState({openClaimRewards:true})} variant="contained" size="small">{t("Claim")}</Button>
-                                </Grid>
-                            </Grid>
-                        </ListItemText>
-                        :
-                        <form style={{maxWidth: 270}}>
-                            <Grid alignItems="stretch" style={{ display: "flex"}} align="center">
-                                <Grid item alignItems="stretch" style={{ display: "flex" }} align="center">
-                                <TextField
-                                    error={this.state.badInvoice}
-                                    helperText={this.state.badInvoice ? this.state.badInvoice : "" }
-                                    label={t("Invoice for {{amountSats}} Sats", {amountSats: this.state.earned_rewards})}
-                                    size="small"
-                                    value={this.state.rewardInvoice}
-                                    onChange={e => {
-                                    this.setState({ rewardInvoice: e.target.value });
-                                    }}
-                                />
-                                </Grid>
-                                <Grid item alignItems="stretch" style={{ display: "flex" }}>
-                                    <Button sx={{maxHeight:38}} onClick={this.handleSubmitInvoiceClicked} variant="contained" color="primary" size="small">{t("Submit")}</Button>
-                                </Grid>
-                            </Grid>
-                        </form>
-                        }
-                    </ListItem>
-
-                    {this.state.showRewardsSpinner?
-                    <div style={{display: 'flex', justifyContent: 'center'}}>
-                        <CircularProgress/>
-                    </div>
-                    :""}
-
-                    {this.state.withdrawn?
-                    <div style={{display: 'flex', justifyContent: 'center'}}>
-                        <Typography color="primary" variant="body2"><b>{t("There it goes, thank you!🥇")}</b></Typography>
-                    </div>
-                    :""}
-
-                </div>
-            </List>
-            </DialogContent>
-
-        </Dialog>
-    )
-    }
-
 bottomBarDesktop =()=>{
     const { t } = this.props;
     var hasRewards = this.state.earned_rewards > 0 ? true: false;
@@ -418,7 +241,6 @@ bottomBarDesktop =()=>{
     return(
         <Paper elevation={6} style={{height:40}}>
                 {this.StatsDialog()}
-                {this.dialogProfile()}
                 <Grid container>
 
                     <Grid item xs={1.9}>
@@ -582,7 +404,6 @@ bottomBarPhone =()=>{
     return(
         <Paper elevation={6} style={{height:40}}>
                 {this.StatsDialog()}
-                {this.dialogProfile()}
                 <Grid container>
 
                     <Grid item xs={1.6}>
@@ -696,6 +517,22 @@ bottomBarPhone =()=>{
                     takerFee={this.state.taker_fee}
                 />
 
+                <ProfileDialog
+                    isOpen={this.state.openProfile}
+                    handleClickCloseProfile={this.handleClickCloseProfile}
+                    nickname={this.props.nickname}
+                    activeOrderId={this.state.active_order_id}
+                    lastOrderId={this.state.last_order_id}
+                    referralCode={this.state.referral_code}
+                    handleSubmitInvoiceClicked={this.handleSubmitInvoiceClicked}
+                    host={this.getHost()}
+                    showRewardsSpinner={this.state.showRewardsSpinner}
+                    withdrawn={this.state.withdrawn}
+                    badInvoice={this.state.badInvoice}
+                    earnedRewards={this.state.earned_rewards}
+                    setAppState={this.props.setAppState}
+                />
+
                 <MediaQuery minWidth={1200}>
                     {this.bottomBarDesktop()}
                 </MediaQuery>
diff --git a/frontend/src/components/Dialogs/ProfileDialog.tsx b/frontend/src/components/Dialogs/ProfileDialog.tsx
new file mode 100644
index 00000000..c6f7b678
--- /dev/null
+++ b/frontend/src/components/Dialogs/ProfileDialog.tsx
@@ -0,0 +1,328 @@
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Link as LinkRouter } from "react-router-dom";
+
+import {
+  Avatar,
+  Badge,
+  Button,
+  CircularProgress,
+  Dialog,
+  DialogContent,
+  Divider,
+  FormControlLabel,
+  Grid,
+  IconButton,
+  List,
+  ListItemAvatar,
+  ListItemButton,
+  ListItemText,
+  ListItem,
+  ListItemIcon,
+  Switch,
+  TextField,
+  Tooltip,
+  Typography,
+} from "@mui/material";
+
+import BoltIcon from "@mui/icons-material/Bolt";
+import NumbersIcon from "@mui/icons-material/Numbers";
+import PasswordIcon from "@mui/icons-material/Password";
+import ContentCopy from "@mui/icons-material/ContentCopy";
+import PersonAddAltIcon from "@mui/icons-material/PersonAddAlt";
+import EmojiEventsIcon from "@mui/icons-material/EmojiEvents";
+
+import { getCookie } from "../../utils/cookies";
+
+type Props = {
+  isOpen: boolean;
+  handleClickCloseProfile: () => void;
+  nickname: string;
+  activeOrderId: string | number;
+  lastOrderId: string | number;
+  referralCode: string;
+  handleSubmitInvoiceClicked: (invoice: string) => void;
+  host: string;
+  showRewardsSpinner: boolean;
+  withdrawn: boolean;
+  badInvoice: boolean | string;
+  earnedRewards: number;
+  setAppState: (state: any) => void; // TODO: move to a ContextProvider
+}
+
+const ProfileDialog = ({
+  isOpen,
+  handleClickCloseProfile,
+  nickname,
+  activeOrderId,
+  lastOrderId,
+  referralCode,
+  handleSubmitInvoiceClicked,
+  host,
+  showRewardsSpinner,
+  withdrawn,
+  badInvoice,
+  earnedRewards,
+  setAppState,
+}: Props): JSX.Element => {
+  const { t } = useTranslation();
+
+  const [rewardInvoice, setRewardInvoice] = useState<string>("");
+  const [showRewards, setShowRewards] = useState<boolean>(false);
+  const [openClaimRewards, setOpenClaimRewards] = useState<boolean>(false);
+
+  const copyTokenHandler = () => {
+    const robotToken = getCookie("robot_token");
+
+    if (robotToken) {
+      navigator.clipboard.writeText(robotToken);
+      setAppState({copiedToken:true});
+    }
+  };
+
+  const copyReferralCodeHandler = () => {
+    navigator.clipboard.writeText(`http://${host}/ref/${referralCode}`);
+  };
+
+  return (
+    <Dialog
+      open={isOpen}
+      onClose={handleClickCloseProfile}
+      aria-labelledby="profile-title"
+      aria-describedby="profile-description"
+    >
+      <DialogContent>
+        <Typography component="h5" variant="h5">{t("Your Profile")}</Typography>
+
+        <List>
+          <Divider/>
+
+          <ListItem className="profileNickname">
+            <ListItemText secondary={t("Your robot")}>
+              <Typography component="h6" variant="h6">
+                {nickname ? (
+                  <div style={{position:"relative", left:"-7px"}}>
+                    <div style={{display:"flex", alignItems:"center", justifyContent:"left", flexWrap:"wrap", width:300}}>
+                      <BoltIcon sx={{ color: "#fcba03", height: "28px", width: "24px"}} />
+
+                      <a>{nickname}</a>
+
+                      <BoltIcon sx={{ color: "#fcba03", height: "28px", width: "24px"}} />
+                    </div>
+                  </div>
+                )
+                : null}
+              </Typography>
+            </ListItemText>
+
+            <ListItemAvatar>
+              <Avatar className="profileAvatar"
+                sx={{ width: 65, height:65 }}
+                alt={nickname}
+                src={nickname ? `${window.location.origin}/static/assets/avatars/${nickname}.png` : ""}
+              />
+            </ListItemAvatar>
+          </ListItem>
+
+          <Divider/>
+
+          {activeOrderId ? (
+            <ListItemButton
+              onClick={handleClickCloseProfile}
+              to={`/order/${activeOrderId}`}
+              component={LinkRouter}
+            >
+              <ListItemIcon>
+                <Badge badgeContent="" color="primary">
+                  <NumbersIcon color="primary" />
+                </Badge>
+              </ListItemIcon>
+              <ListItemText
+                primary={t("One active order #{{orderID}}", { orderID: activeOrderId })}
+                secondary={t("Your current order")}
+              />
+            </ListItemButton>
+          ) :
+            lastOrderId ? (
+              <ListItemButton
+                onClick={handleClickCloseProfile}
+                to={`/order/${lastOrderId}`}
+                component={LinkRouter}
+              >
+                <ListItemIcon>
+                  <NumbersIcon color="primary" />
+                </ListItemIcon>
+                <ListItemText
+                  primary={t("Your last order #{{orderID}}", { orderID: lastOrderId })}
+                  secondary={t("Inactive order")}
+                />
+              </ListItemButton>
+            ) : (
+              <ListItem>
+                <ListItemIcon>
+                  <NumbersIcon />
+                </ListItemIcon>
+                <ListItemText
+                  primary={t("No active orders")}
+                  secondary={t("You do not have previous orders")}
+                />
+              </ListItem>
+            )
+          }
+
+          <ListItem>
+            <ListItemIcon>
+              <PasswordIcon />
+            </ListItemIcon>
+
+            <ListItemText secondary={t("Your token (will not remain here)")}>
+              {getCookie("robot_token") ? (
+                <TextField
+                  disabled
+                  sx={{width:"100%", maxWidth:"450px"}}
+                  label={t("Back it up!")}
+                  value={getCookie("robot_token") }
+                  variant="filled"
+                  size="small"
+                  InputProps={{
+                    endAdornment:
+                    <Tooltip
+                      disableHoverListener
+                      enterTouchDelay={0}
+                      title={t("Copied!") || ""}
+                    >
+                      <IconButton onClick={copyTokenHandler}>
+                        <ContentCopy color="inherit" />
+                      </IconButton>
+                    </Tooltip>,
+                    }}
+                />
+              ) :
+                t("Cannot remember")
+              }
+            </ListItemText>
+          </ListItem>
+
+          <Divider/>
+
+          <Grid container>
+            <Grid item>
+              <FormControlLabel
+                labelPlacement="start"
+                label={`${t("Rewards and compensations")}`}
+                control={
+                  <Switch
+                    checked={showRewards}
+                    onChange={()=> setShowRewards(!showRewards)}
+                  />
+                }
+              />
+            </Grid>
+          </Grid>
+
+          {showRewards && (
+            <>
+              <ListItem>
+                <ListItemIcon>
+                  <PersonAddAltIcon />
+                </ListItemIcon>
+
+                <ListItemText secondary={t("Share to earn 100 Sats per trade")}>
+                  <TextField
+                    label={t("Your referral link")}
+                    value={host+'/ref/'+referralCode}
+                    size="small"
+                    InputProps={{
+                      endAdornment:
+                      <Tooltip
+                        disableHoverListener
+                        enterTouchDelay={0}
+                        title={t("Copied!") || ""}
+                      >
+                        <IconButton onClick={copyReferralCodeHandler}>
+                          <ContentCopy />
+                        </IconButton>
+                      </Tooltip>,
+                      }}
+                    />
+                </ListItemText>
+              </ListItem>
+
+              <ListItem>
+                <ListItemIcon>
+                  <EmojiEventsIcon />
+                </ListItemIcon>
+
+                {!openClaimRewards ? (
+                  <ListItemText secondary={t("Your earned rewards")}>
+                    <Grid container>
+                      <Grid item xs={9}>
+                        <Typography>{`${earnedRewards} Sats`}</Typography>
+                      </Grid>
+
+                      <Grid item xs={3}>
+                        <Button
+                          disabled={earnedRewards === 0 ? true : false}
+                          onClick={() => setOpenClaimRewards(true)}
+                          variant="contained"
+                          size="small"
+                        >
+                          {t("Claim")}
+                        </Button>
+                      </Grid>
+                    </Grid>
+                  </ListItemText>
+                ) : (
+                  <form style={{maxWidth: 270}}>
+                    <Grid container alignItems="stretch" style={{ display: "flex"}}>
+                      <Grid item style={{ display: "flex" }}>
+                        <TextField
+                          error={badInvoice ? true : false}
+                          helperText={badInvoice ? badInvoice : "" }
+                          label={t("Invoice for {{amountSats}} Sats", { amountSats: earnedRewards })}
+                          size="small"
+                          value={rewardInvoice}
+                          onChange={e => {
+                            setRewardInvoice(e.target.value);
+                          }}
+                        />
+                      </Grid>
+
+                      <Grid item alignItems="stretch" style={{ display: "flex" }}>
+                        <Button
+                          sx={{maxHeight:38}}
+                          onClick={() => handleSubmitInvoiceClicked(rewardInvoice)}
+                          variant="contained"
+                          color="primary"
+                          size="small"
+                        >
+                          {t("Submit")}
+                        </Button>
+                      </Grid>
+                    </Grid>
+                  </form>
+                )}
+              </ListItem>
+
+              {showRewardsSpinner && (
+                <div style={{display: "flex", justifyContent: "center"}}>
+                  <CircularProgress />
+                </div>
+              )}
+
+              {withdrawn && (
+                <div style={{display: "flex", justifyContent: "center"}}>
+                  <Typography color="primary" variant="body2">
+                    <b>{t("There it goes, thank you!🥇")}</b>
+                  </Typography>
+                </div>
+              )}
+            </>
+          )}
+        </List>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default ProfileDialog;
diff --git a/frontend/src/components/Dialogs/index.ts b/frontend/src/components/Dialogs/index.ts
index 96597467..3d6b0bdc 100644
--- a/frontend/src/components/Dialogs/index.ts
+++ b/frontend/src/components/Dialogs/index.ts
@@ -4,4 +4,5 @@ export { default as LearnDialog } from "./Learn";
 export { default as NoRobotDialog } from "./NoRobot";
 export { default as StoreTokenDialog } from "./StoreToken";
 export { default as ExchangeSummaryDialog } from "./ExchangeSummaryDialog";
+export { default as ProfileDialog } from "./ProfileDialog";
 

From bf35961efb840d3d78b044707c306fef48189662 Mon Sep 17 00:00:00 2001
From: Fernando Porazzi <fernandoporazzi@gmail.com>
Date: Thu, 19 May 2022 14:33:41 +0200
Subject: [PATCH 3/4] Migrate StatsDialog to Dialogs folder

Migrate StatsDialog component into its own file and convert its contents to Typescript.
---
 frontend/src/components/BottomBar.js          | 134 ++----------
 .../src/components/Dialogs/StatsDialog.tsx    | 196 ++++++++++++++++++
 frontend/src/components/Dialogs/index.ts      |   1 +
 3 files changed, 213 insertions(+), 118 deletions(-)
 create mode 100644 frontend/src/components/Dialogs/StatsDialog.tsx

diff --git a/frontend/src/components/BottomBar.js b/frontend/src/components/BottomBar.js
index 4a6f0bd5..af410532 100644
--- a/frontend/src/components/BottomBar.js
+++ b/frontend/src/components/BottomBar.js
@@ -1,8 +1,7 @@
 import React, { Component } from 'react'
 import { withTranslation } from "react-i18next";
-import {FormControlLabel, Link, Switch, CircularProgress, Badge, Tooltip, TextField, ListItemAvatar, Button, Avatar,Paper, Grid, IconButton, Typography, Select, MenuItem, List, ListItemText, ListItem, ListItemIcon, ListItemButton, Divider, Dialog, DialogContent} from "@mui/material";
+import { Badge, Tooltip, ListItemAvatar, Avatar,Paper, Grid, IconButton, Select, MenuItem, ListItemText, ListItem, ListItemIcon, ListItemButton } from "@mui/material";
 import MediaQuery from 'react-responsive'
-import { Link as LinkRouter } from 'react-router-dom'
 
 // Icons
 import SettingsIcon from '@mui/icons-material/Settings';
@@ -12,29 +11,15 @@ import SellIcon from '@mui/icons-material/Sell';
 import SmartToyIcon from '@mui/icons-material/SmartToy';
 import PercentIcon from '@mui/icons-material/Percent';
 import PriceChangeIcon from '@mui/icons-material/PriceChange';
-import BoltIcon from '@mui/icons-material/Bolt';
-import GitHubIcon from '@mui/icons-material/GitHub';
-import EqualizerIcon from '@mui/icons-material/Equalizer';
-
-import PublicIcon from '@mui/icons-material/Public';
-import NumbersIcon from '@mui/icons-material/Numbers';
-import PasswordIcon from '@mui/icons-material/Password';
-import ContentCopy from "@mui/icons-material/ContentCopy";
-import DnsIcon from '@mui/icons-material/Dns';
-import WebIcon from '@mui/icons-material/Web';
-import PersonAddAltIcon from '@mui/icons-material/PersonAddAlt';
-import EmojiEventsIcon from '@mui/icons-material/EmojiEvents';
-import FavoriteIcon from '@mui/icons-material/Favorite';
-import { AmbossIcon , BitcoinSignIcon} from "./Icons";
 
 import {
     CommunityDialog,
     ExchangeSummaryDialog,
     ProfileDialog,
+    StatsDialog,
 } from './Dialogs';
 
 import { getCookie } from "../utils/cookies";
-import { pn } from "../utils/prettyNumbers";
 
 class BottomBar extends Component {
     constructor(props) {
@@ -90,105 +75,6 @@ class BottomBar extends Component {
         this.setState({openStatsForNerds: false});
     };
 
-    StatsDialog =() =>{
-        const { t } = this.props;
-    return(
-        <Dialog
-        open={this.state.openStatsForNerds}
-        onClose={this.handleClickCloseStatsForNerds}
-        aria-labelledby="stats-for-nerds-dialog-title"
-        aria-describedby="stats-for-nerds-description"
-        >
-        <DialogContent>
-            <Typography component="h5" variant="h5">{t("Stats For Nerds")}</Typography>
-            <List dense>
-                <Divider/>
-                <ListItem>
-                    <ListItemIcon><BoltIcon/></ListItemIcon>
-                    <ListItemText primary={this.state.lnd_version} secondary={t("LND version")}/>
-                </ListItem>
-
-                <Divider/>
-                {this.state.network == 'testnet'?
-                <ListItem>
-                    <ListItemIcon><DnsIcon/></ListItemIcon>
-                    <ListItemText secondary={this.state.node_alias}>
-                         <Link target="_blank" href={"https://1ml.com/testnet/node/"
-                        + this.state.node_id}>{this.state.node_id.slice(0, 12)+"... (1ML)"}
-                        </Link>
-                    </ListItemText>
-                </ListItem>
-                :
-                <ListItem>
-                    <ListItemIcon><AmbossIcon/></ListItemIcon>
-                    <ListItemText secondary={this.state.node_alias}>
-                            <Link target="_blank" href={"https://amboss.space/node/"
-                        + this.state.node_id}>{this.state.node_id.slice(0, 12)+"... (AMBOSS)"}
-                        </Link>
-                    </ListItemText>
-                </ListItem>
-                }
-
-                <Divider/>
-                <ListItem>
-                    <ListItemIcon><WebIcon/></ListItemIcon>
-                    <ListItemText secondary={this.state.alternative_name}>
-                        <Link target="_blank" href={"http://"+this.state.alternative_site}>{this.state.alternative_site.slice(0, 12)+"...onion"}
-                        </Link>
-                    </ListItemText>
-                </ListItem>
-
-                <Divider/>
-                <ListItem>
-                    <ListItemIcon><GitHubIcon/></ListItemIcon>
-                    <ListItemText secondary={t("Currently running commit hash")}>
-                        <Link target="_blank" href={"https://github.com/Reckless-Satoshi/robosats/tree/"
-                        + this.state.robosats_running_commit_hash}>{this.state.robosats_running_commit_hash.slice(0, 12)+"..."}
-                        </Link>
-                    </ListItemText>
-                </ListItem>
-
-                <Divider/>
-                <ListItem>
-                    <ListItemIcon><EqualizerIcon/></ListItemIcon>
-                    <ListItemText secondary={t("24h contracted volume")}>
-                        <div style={{ cursor: "pointer", display:'flex',alignItems:'center', flexWrap:'wrap'}}>
-                            {pn(this.state.last_day_volume)}
-                            <BitcoinSignIcon sx={{width:14,height:14}} color={"text.secondary"}/>
-                        </div>
-                    </ListItemText>
-                </ListItem>
-
-                <Divider/>
-                <ListItem>
-                    <ListItemIcon><EqualizerIcon/></ListItemIcon>
-                    <ListItemText secondary={t("Lifetime contracted volume")}>
-                        <div style={{ cursor: "pointer", display:'flex',alignItems:'center', flexWrap:'wrap'}}>
-                            {pn(this.state.lifetime_volume)}
-                            <BitcoinSignIcon sx={{width:14,height:14}} color={"text.secondary"}/>
-                        </div>
-                    </ListItemText>
-                </ListItem>
-
-                <Divider/>
-                <ListItem>
-                    <ListItemIcon><PublicIcon/></ListItemIcon>
-                    <ListItemText primary={
-                        <div style={{display:'flex', alignItems:'center', justifyContent:'left', flexWrap:'wrap'}}>
-                            <span>{t("Made with")+" "}</span>
-                            <FavoriteIcon sx={{ color: "#FF0000", height: '22px',width: '22px'}}/>
-                            <span>{" "+t("and")+" "}</span>
-                            <BoltIcon sx={{ color: "#fcba03", height: '23px',width: '23px'}}/>
-                        </div>}
-                        secondary={t("... somewhere on Earth!")}/>
-                </ListItem>
-            </List>
-
-            </DialogContent>
-        </Dialog>
-    )
-    }
-
     handleClickOpenCommunity = () => {
         this.setState({openCommuniy: true});
     };
@@ -240,7 +126,6 @@ bottomBarDesktop =()=>{
 
     return(
         <Paper elevation={6} style={{height:40}}>
-                {this.StatsDialog()}
                 <Grid container>
 
                     <Grid item xs={1.9}>
@@ -403,7 +288,6 @@ bottomBarPhone =()=>{
     var hasOrder = this.state.active_order_id > 0 & !this.state.profileShown & this.props.avatarLoaded ? true : false;
     return(
         <Paper elevation={6} style={{height:40}}>
-                {this.StatsDialog()}
                 <Grid container>
 
                     <Grid item xs={1.6}>
@@ -533,6 +417,20 @@ bottomBarPhone =()=>{
                     setAppState={this.props.setAppState}
                 />
 
+                <StatsDialog
+                    isOpen={this.state.openStatsForNerds}
+                    handleClickCloseStatsForNerds={this.handleClickCloseStatsForNerds}
+                    lndVersion={this.state.lnd_version}
+                    network={this.state.network}
+                    nodeAlias={this.state.node_alias}
+                    nodeId={this.state.node_id}
+                    alternativeName={this.state.alternativeName}
+                    alternativeSite={this.state.alternative_site}
+                    robosatsRunningCommitHash={this.state.robosats_running_commit_hash}
+                    lastDayVolume={this.state.last_day_volume}
+                    lifetimeVolume={this.state.lifetime_volume}
+                />
+
                 <MediaQuery minWidth={1200}>
                     {this.bottomBarDesktop()}
                 </MediaQuery>
diff --git a/frontend/src/components/Dialogs/StatsDialog.tsx b/frontend/src/components/Dialogs/StatsDialog.tsx
new file mode 100644
index 00000000..9f77ddf9
--- /dev/null
+++ b/frontend/src/components/Dialogs/StatsDialog.tsx
@@ -0,0 +1,196 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+import {
+  Dialog,
+  DialogContent,
+  Divider,
+  Link,
+  List,
+  ListItemText,
+  ListItem,
+  ListItemIcon,
+  Typography,
+} from "@mui/material";
+
+import BoltIcon from "@mui/icons-material/Bolt";
+import PublicIcon from "@mui/icons-material/Public";
+import DnsIcon from "@mui/icons-material/Dns";
+import WebIcon from "@mui/icons-material/Web";
+import FavoriteIcon from "@mui/icons-material/Favorite";
+import GitHubIcon from "@mui/icons-material/GitHub";
+import EqualizerIcon from "@mui/icons-material/Equalizer";
+
+import { AmbossIcon, BitcoinSignIcon } from "../Icons";
+
+import { pn } from "../../utils/prettyNumbers";
+
+type Props = {
+  isOpen: boolean;
+  handleClickCloseStatsForNerds: () => void;
+  lndVersion: string;
+  network: string;
+  nodeAlias: string;
+  nodeId: string;
+  alternativeName: string;
+  alternativeSite: string;
+  robosatsRunningCommitHash: string;
+  lastDayVolume: number;
+  lifetimeVolume: number;
+}
+
+const StatsDialog = ({
+  isOpen,
+  handleClickCloseStatsForNerds,
+  lndVersion,
+  network,
+  nodeAlias,
+  nodeId,
+  alternativeName,
+  alternativeSite,
+  robosatsRunningCommitHash,
+  lastDayVolume,
+  lifetimeVolume,
+}: Props): JSX.Element => {
+  const { t } = useTranslation();
+
+  return (
+    <Dialog
+      open={isOpen}
+      onClose={handleClickCloseStatsForNerds}
+      aria-labelledby="stats-for-nerds-dialog-title"
+      aria-describedby="stats-for-nerds-description"
+    >
+      <DialogContent>
+        <Typography component="h5" variant="h5">{t("Stats For Nerds")}</Typography>
+
+        <List dense>
+          <Divider />
+
+          <ListItem>
+            <ListItemIcon>
+              <BoltIcon />
+            </ListItemIcon>
+            <ListItemText primary={lndVersion} secondary={t("LND version")} />
+          </ListItem>
+
+          <Divider />
+
+          {network === "testnet" ? (
+            <ListItem>
+              <ListItemIcon>
+                <DnsIcon />
+              </ListItemIcon>
+              <ListItemText secondary={nodeAlias}>
+                <Link
+                  target="_blank"
+                  href={`https://1ml.com/testnet/node/${nodeId}`}
+                  rel="noreferrer"
+                >
+                  {`${nodeId.slice(0, 12)}... (1ML)`}
+                </Link>
+              </ListItemText>
+            </ListItem>
+          ) : (
+            <ListItem>
+              <ListItemIcon>
+                <AmbossIcon />
+              </ListItemIcon>
+              <ListItemText secondary={nodeAlias}>
+                <Link
+                  target="_blank"
+                  href={`https://amboss.space/node/${nodeId}`}
+                  rel="noreferrer"
+                >
+                  {`${nodeId.slice(0, 12)}... (AMBOSS)`}
+                </Link>
+              </ListItemText>
+            </ListItem>
+          )}
+
+          <Divider />
+
+          <ListItem>
+            <ListItemIcon>
+              <WebIcon />
+            </ListItemIcon>
+            <ListItemText secondary={alternativeName}>
+              <Link
+                target="_blank"
+                href={`http://${alternativeSite}`}
+                rel="noreferrer"
+              >
+                {`${alternativeSite.slice(0, 12)}...onion`}
+              </Link>
+            </ListItemText>
+          </ListItem>
+
+          <Divider />
+
+          <ListItem>
+            <ListItemIcon>
+              <GitHubIcon />
+            </ListItemIcon>
+            <ListItemText secondary={t("Currently running commit hash")}>
+              <Link
+                target="_blank"
+                href={`https://github.com/Reckless-Satoshi/robosats/tree/${robosatsRunningCommitHash}`}
+                rel="noreferrer"
+              >
+                {`${robosatsRunningCommitHash.slice(0, 12)}...`}
+              </Link>
+            </ListItemText>
+          </ListItem>
+
+          <Divider />
+
+          <ListItem>
+            <ListItemIcon>
+              <EqualizerIcon />
+            </ListItemIcon>
+            <ListItemText secondary={t("24h contracted volume")}>
+              <div style={{ cursor: "pointer", display: "flex", alignItems: "center", flexWrap: "wrap" }}>
+                {pn(lastDayVolume)}
+                <BitcoinSignIcon sx={{ width: 14,height: 14 }} color={"text.secondary"} />
+              </div>
+            </ListItemText>
+          </ListItem>
+
+          <Divider />
+
+          <ListItem>
+            <ListItemIcon>
+              <EqualizerIcon />
+            </ListItemIcon>
+            <ListItemText secondary={t("Lifetime contracted volume")}>
+              <div style={{ cursor: "pointer", display: "flex",alignItems: "center", flexWrap: "wrap" }}>
+                {pn(lifetimeVolume)}
+                <BitcoinSignIcon sx={{ width: 14, height: 14 }} color={"text.secondary"} />
+              </div>
+            </ListItemText>
+          </ListItem>
+
+          <Divider />
+          <ListItem>
+            <ListItemIcon>
+              <PublicIcon />
+            </ListItemIcon>
+            <ListItemText
+              primary={
+                <div style={{ display: "flex", alignItems: "center", justifyContent: "left", flexWrap: "wrap" }}>
+                  <span>{`${t("Made with")} `}</span>
+                  <FavoriteIcon sx={{ color: "#ff0000", height: "22px", width: "22px" }} />
+                  <span>{` ${t("and")} `}</span>
+                  <BoltIcon sx={{ color: "#fcba03", height: "23px",width: "23px" }} />
+                </div>
+              }
+              secondary={t("... somewhere on Earth!")}
+            />
+          </ListItem>
+        </List>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default StatsDialog;
diff --git a/frontend/src/components/Dialogs/index.ts b/frontend/src/components/Dialogs/index.ts
index 3d6b0bdc..4c020d48 100644
--- a/frontend/src/components/Dialogs/index.ts
+++ b/frontend/src/components/Dialogs/index.ts
@@ -5,4 +5,5 @@ export { default as NoRobotDialog } from "./NoRobot";
 export { default as StoreTokenDialog } from "./StoreToken";
 export { default as ExchangeSummaryDialog } from "./ExchangeSummaryDialog";
 export { default as ProfileDialog } from "./ProfileDialog";
+export { default as StatsDialog } from "./StatsDialog";
 

From 4bbb885ec6c795b74b7b575f9f59022639d9f9c7 Mon Sep 17 00:00:00 2001
From: Reckless_Satoshi <reckless.satoshi@protonmail.com>
Date: Sun, 22 May 2022 13:56:07 -0700
Subject: [PATCH 4/4] Fix claim rewards refresh bug

---
 frontend/src/components/BottomBar.js                |  3 ++-
 ...xchangeSummaryDialog.tsx => ExchangeSummary.tsx} |  0
 .../Dialogs/{ProfileDialog.tsx => Profile.tsx}      | 13 +++++++------
 .../Dialogs/{StatsDialog.tsx => Stats.tsx}          |  0
 frontend/src/components/Dialogs/index.ts            |  6 +++---
 5 files changed, 12 insertions(+), 10 deletions(-)
 rename frontend/src/components/Dialogs/{ExchangeSummaryDialog.tsx => ExchangeSummary.tsx} (100%)
 rename frontend/src/components/Dialogs/{ProfileDialog.tsx => Profile.tsx} (95%)
 rename frontend/src/components/Dialogs/{StatsDialog.tsx => Stats.tsx} (100%)

diff --git a/frontend/src/components/BottomBar.js b/frontend/src/components/BottomBar.js
index af410532..8220411d 100644
--- a/frontend/src/components/BottomBar.js
+++ b/frontend/src/components/BottomBar.js
@@ -90,7 +90,7 @@ class BottomBar extends Component {
         this.setState({openProfile: false});
     };
 
-    handleSubmitInvoiceClicked=(rewardInvoice)=>{
+    handleSubmitInvoiceClicked=(e, rewardInvoice)=>{
         this.setState({
             badInvoice:false,
             showRewardsSpinner: true,
@@ -112,6 +112,7 @@ class BottomBar extends Component {
             withdrawn: data.successful_withdrawal ? true : false,
             showRewardsSpinner: false,
         }));
+        e.preventDefault();
     }
 
     getHost(){
diff --git a/frontend/src/components/Dialogs/ExchangeSummaryDialog.tsx b/frontend/src/components/Dialogs/ExchangeSummary.tsx
similarity index 100%
rename from frontend/src/components/Dialogs/ExchangeSummaryDialog.tsx
rename to frontend/src/components/Dialogs/ExchangeSummary.tsx
diff --git a/frontend/src/components/Dialogs/ProfileDialog.tsx b/frontend/src/components/Dialogs/Profile.tsx
similarity index 95%
rename from frontend/src/components/Dialogs/ProfileDialog.tsx
rename to frontend/src/components/Dialogs/Profile.tsx
index c6f7b678..27815e91 100644
--- a/frontend/src/components/Dialogs/ProfileDialog.tsx
+++ b/frontend/src/components/Dialogs/Profile.tsx
@@ -41,7 +41,7 @@ type Props = {
   activeOrderId: string | number;
   lastOrderId: string | number;
   referralCode: string;
-  handleSubmitInvoiceClicked: (invoice: string) => void;
+  handleSubmitInvoiceClicked: (e:any, invoice: string) => void;
   host: string;
   showRewardsSpinner: boolean;
   withdrawn: boolean;
@@ -273,9 +273,9 @@ const ProfileDialog = ({
                     </Grid>
                   </ListItemText>
                 ) : (
-                  <form style={{maxWidth: 270}}>
-                    <Grid container alignItems="stretch" style={{ display: "flex"}}>
-                      <Grid item style={{ display: "flex" }}>
+                  <form noValidate style={{maxWidth: 270}}>
+                    <Grid container style={{ display: "flex", alignItems: "stretch"}}>
+                      <Grid item style={{ display: "flex", maxWidth:160}} >
                         <TextField
                           error={badInvoice ? true : false}
                           helperText={badInvoice ? badInvoice : "" }
@@ -288,13 +288,14 @@ const ProfileDialog = ({
                         />
                       </Grid>
 
-                      <Grid item alignItems="stretch" style={{ display: "flex" }}>
+                      <Grid item alignItems="stretch" style={{ display: "flex", maxWidth:80}}>
                         <Button
                           sx={{maxHeight:38}}
-                          onClick={() => handleSubmitInvoiceClicked(rewardInvoice)}
+                          onClick={(e) => handleSubmitInvoiceClicked(e, rewardInvoice)}
                           variant="contained"
                           color="primary"
                           size="small"
+                          type="submit"
                         >
                           {t("Submit")}
                         </Button>
diff --git a/frontend/src/components/Dialogs/StatsDialog.tsx b/frontend/src/components/Dialogs/Stats.tsx
similarity index 100%
rename from frontend/src/components/Dialogs/StatsDialog.tsx
rename to frontend/src/components/Dialogs/Stats.tsx
diff --git a/frontend/src/components/Dialogs/index.ts b/frontend/src/components/Dialogs/index.ts
index 4c020d48..b7177726 100644
--- a/frontend/src/components/Dialogs/index.ts
+++ b/frontend/src/components/Dialogs/index.ts
@@ -3,7 +3,7 @@ export { default as InfoDialog } from "./Info";
 export { default as LearnDialog } from "./Learn";
 export { default as NoRobotDialog } from "./NoRobot";
 export { default as StoreTokenDialog } from "./StoreToken";
-export { default as ExchangeSummaryDialog } from "./ExchangeSummaryDialog";
-export { default as ProfileDialog } from "./ProfileDialog";
-export { default as StatsDialog } from "./StatsDialog";
+export { default as ExchangeSummaryDialog } from "./ExchangeSummary";
+export { default as ProfileDialog } from "./Profile";
+export { default as StatsDialog } from "./Stats";