Fix serve summary when order partially finished. Trade summary as accordion

api/logics.py

@@ -1574,7 +1574,7 @@ class Logics:
         Summarizes a finished order. Returns a dict with
         amounts, fees, costs, etc, for buyer and seller.
         '''
-        if order.status != Order.Status.SUC:
+        if not order.status in [Order.Status.EXP, Order.Status.SUC, Order.Status.PAY,  Order.Status.FAI]:
             return False, {'bad_summary':'Order has not finished yet'}
         
         context = {}

frontend/src/components/TradeBox.js

@@ -24,6 +24,8 @@ import BoltIcon from '@mui/icons-material/Bolt';
 import LinkIcon from '@mui/icons-material/Link';
 import AccountBalanceWalletIcon from '@mui/icons-material/AccountBalanceWallet';
 import FavoriteIcon from '@mui/icons-material/Favorite';
+import RocketLaunchIcon from '@mui/icons-material/RocketLaunch';
+import RefreshIcon from '@mui/icons-material/Refresh';
 import { NewTabIcon } from "./Icons";
 
 import { getCookie } from "../utils/cookies";
@@ -1275,9 +1277,9 @@ handleRatingRobosatsChange=(e)=>{
           </Grid>
         : null}
 
-        <Grid container>
+        <Grid item container spacing={3}>
           <Grid item xs={show_renew? 6: 12} align="center">
-            <Button color='primary' onClick={() => {this.props.push('/')}}>{t("Start Again")}</Button>
+            <Button color='primary' variant="outlined" onClick={() => {this.props.push('/')}}><RocketLaunchIcon/>{t("Start Again")}</Button>
           </Grid>
 
           {show_renew ?
@@ -1285,7 +1287,7 @@ handleRatingRobosatsChange=(e)=>{
             {this.state.renewLoading ?
                 <CircularProgress/>
               :
-                <Button color='primary' onClick={this.handleRenewOrderButtonPressed}>{t("Renew Order")}</Button>
+                <Button color='primary' variant="outlined" onClick={this.handleRenewOrderButtonPressed}><RefreshIcon/>{t("Renew Order")}</Button>
             }
             </Grid>
           : null}
@@ -1299,6 +1301,7 @@ handleRatingRobosatsChange=(e)=>{
         makerSummary={this.props.data.maker_summary}
         takerSummary={this.props.data.taker_summary}
         platformSummary={this.props.data.platform_summary}
+        orderId={this.props.data.orderId}
       />
 
     </Grid>

frontend/src/components/TradeSummary.tsx

@@ -6,19 +6,24 @@ import {
     ToggleButton,
     ToggleButtonGroup,
     List,
-    Chip,
     ListItem,
     ListItemText,
     ListItemIcon,
     Grid,
-    Divider,
+    Tooltip,
+    IconButton,
+    Accordion,
+    AccordionSummary,
+    AccordionDetails,
     Typography,
 } from "@mui/material"
 import { pn } from "../utils/prettyNumbers";
+import { saveAsJson } from "../utils/saveFile";
 
 // Icons
 import FlagWithProps from "./FlagWithProps";
-import PercentIcon from '@mui/icons-material/Percent';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import DownloadIcon from '@mui/icons-material/Download';
 import AccountBalanceIcon from '@mui/icons-material/AccountBalance';
 import RouteIcon from '@mui/icons-material/Route';
 import AccountBoxIcon from '@mui/icons-material/AccountBox';
@@ -39,7 +44,7 @@ type Props = {
   makerSummary: Record<string, Item>;
   takerSummary: Record<string, Item>;
   platformSummary: Record<string, Item>;
-  bondPercent: number;
+  orderId: number;
 }
 
 const TradeSummary = ({
@@ -50,145 +55,158 @@ const TradeSummary = ({
   makerSummary,
   takerSummary,
   platformSummary,
-  bondPercent,
+  orderId,
 }: Props): JSX.Element => {
   const { t } = useTranslation();
   const [buttonValue, setButtonValue] = useState<number>(isMaker ? 0 : 2);
   var userSummary = buttonValue == 0 ? makerSummary : takerSummary;
-
+  
   return (
     <Grid item xs={12} align="center">
-      <List>
-        <Divider>
-          <Chip label={t("Trade Summary")}/>
-        </Divider>
-      </List>
-      <ToggleButtonGroup
-        size="small" 
-        value={buttonValue} 
-        exclusive>
-          <ToggleButton value={0} disableRipple={true} onClick={() => setButtonValue(0)}>
-            <Avatar 
-              className="flippedSmallAvatar"
-              sx={{height:24,width:24}}
-              alt={makerNick}
-              src={window.location.origin +'/static/assets/avatars/' + makerNick + '.png'}
-                />
-            &nbsp;
-            {t("Maker")}
-          </ToggleButton>
-          <ToggleButton value={1} disableRipple={true} onClick={() => setButtonValue(1)}>
-            <RoboSatsNoTextIcon/>
-          </ToggleButton>
-          <ToggleButton value={2} disableRipple={true} onClick={() => setButtonValue(2)}>
-            {t("Taker")}
-            &nbsp;
-            <Avatar 
-              className="smallAvatar"
-              sx={{height:24,width:24}}
-              alt={takerNick}
-              src={window.location.origin +'/static/assets/avatars/' + takerNick + '.png'}
-                />
-          </ToggleButton>
-      </ToggleButtonGroup>
-    
-    {/* Maker/Taker Summary */}
-      <div style={{display: [0,2].includes(buttonValue) ? '':'none'}}>
-        <List dense={true}>
-          <ListItem>
-            <ListItemIcon>
-              <Badge 
-                overlap="circular" 
-                anchorOrigin={{horizontal: 'right', vertical: 'bottom'}} 
-                badgeContent={<div 
-                                style={{position:"relative", left:"3px", top:"2px"}}> 
-                                {userSummary.is_buyer ? 
-                                  <SendReceiveIcon 
-                                    sx={{transform: "scaleX(-1)",height:"18px",width:"18px"}} 
-                                    color="secondary"/> 
-                                  : <SendReceiveIcon 
-                                    sx={{height:"18px",width:"18px"}} 
-                                    color="primary"/>
-                                }
-                              </div>}>
-                <AccountBoxIcon sx={{position:'relative',left:-2,width:28,height:28}}/>
-              </Badge>
-            </ListItemIcon>
-            <ListItemText 
-              primary={userSummary.is_buyer ? t("Buyer") : t("Seller")}
-              secondary={t("User role")}/>
+      <Accordion defaultExpanded={true} elevation={0} sx={{width:322, position:'relative', right:8}}>
+        <AccordionSummary expandIcon={<ExpandMoreIcon sx={{width:28}} color="primary"/>}>
+          <Typography sx={{flexGrow:1}} color="text.secondary">{t("Trade Summary")}</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+            <div style={{position:'relative',left:14, display:'flex',alignItems:'center', justifyContent:'center', flexWrap:'wrap'}}>
+            <ToggleButtonGroup
+                size="small" 
+                value={buttonValue} 
+                exclusive>
+                <ToggleButton value={0} disableRipple={true} onClick={() => setButtonValue(0)}>
+                    <Avatar 
+                    className="flippedSmallAvatar"
+                    sx={{height:24,width:24}}
+                    alt={makerNick}
+                    src={window.location.origin +'/static/assets/avatars/' + makerNick + '.png'}
+                        />
+                    &nbsp;
+                    {t("Maker")}
+                </ToggleButton>
+                <ToggleButton value={1} disableRipple={true} onClick={() => setButtonValue(1)}>
+                    <RoboSatsNoTextIcon/>
+                </ToggleButton>
+                <ToggleButton value={2} disableRipple={true} onClick={() => setButtonValue(2)}>
+                    {t("Taker")}
+                    &nbsp;
+                    <Avatar 
+                    className="smallAvatar"
+                    sx={{height:28,width:28}}
+                    alt={takerNick}
+                    src={window.location.origin +'/static/assets/avatars/' + takerNick + '.png'}
+                        />
+                </ToggleButton>
+            </ToggleButtonGroup>
+            <Tooltip enterTouchDelay={250} title={t("Save trade summary as file")}>
+                    <span>
+                    <IconButton  
+                        color="primary" 
+                        onClick={()=> saveAsJson(`order${orderId}-summary.json`, {'order_id':orderId,'currency':currencyCode,'maker':makerSummary,'taker':takerSummary,'platform':platformSummary})}
+                        >
+                        <DownloadIcon sx={{width:26, height:26}}/>
+                    </IconButton>
+                    </span>
+                </Tooltip>
+                </div>
+            {/* Maker/Taker Summary */}
+            <div style={{display: [0,2].includes(buttonValue) ? '':'none'}}>
+                <List dense={true}>
+                <ListItem>
+                    <ListItemIcon>
+                    <Badge 
+                        overlap="circular" 
+                        anchorOrigin={{horizontal: 'right', vertical: 'bottom'}} 
+                        badgeContent={<div 
+                                        style={{position:"relative", left:"3px", top:"2px"}}> 
+                                        {userSummary.is_buyer ? 
+                                        <SendReceiveIcon 
+                                            sx={{transform: "scaleX(-1)",height:"18px",width:"18px"}} 
+                                            color="secondary"/> 
+                                        : <SendReceiveIcon 
+                                            sx={{height:"18px",width:"18px"}} 
+                                            color="primary"/>
+                                        }
+                                    </div>}>
+                        <AccountBoxIcon sx={{position:'relative',left:-2,width:28,height:28}}/>
+                    </Badge>
+                    </ListItemIcon>
+                    <ListItemText 
+                    primary={userSummary.is_buyer ? t("Buyer") : t("Seller")}
+                    secondary={t("User role")}/>
 
-            <ListItemIcon>
-              <div style={{position:'relative',left:15,zoom:1.25,opacity: 0.7,msZoom:1.25,WebkitZoom:1.25,MozTransform:'scale(1.25,1.25)',MozTransformOrigin:'left center'}}>
-                <FlagWithProps code={currencyCode}/>
-              </div>
-            </ListItemIcon>
-            <ListItemText 
-              primary={(userSummary.is_buyer ? pn(userSummary.sent_fiat) : pn(userSummary.received_fiat))+" "+currencyCode}
-              secondary={userSummary.is_buyer ? t("Sent") : t("Received")}/>
-          </ListItem>
-        
-          <ListItem>
-            <ListItemIcon>
-              <BitcoinIcon/>
-            </ListItemIcon>
-            <ListItemText 
-              primary={pn(userSummary.is_buyer ? userSummary.received_sats : userSummary.sent_sats)+" Sats"}
-              secondary={userSummary.is_buyer ? "BTC received" : "BTC sent"}/>
+                    <ListItemIcon>
+                    <div style={{position:'relative',left:15,zoom:1.25,opacity: 0.7,msZoom:1.25,WebkitZoom:1.25,MozTransform:'scale(1.25,1.25)',MozTransformOrigin:'left center'}}>
+                        <FlagWithProps code={currencyCode}/>
+                    </div>
+                    </ListItemIcon>
+                    <ListItemText 
+                    primary={(userSummary.is_buyer ? pn(userSummary.sent_fiat) : pn(userSummary.received_fiat))+" "+currencyCode}
+                    secondary={userSummary.is_buyer ? t("Sent") : t("Received")}/>
+                </ListItem>
+                
+                <ListItem>
+                    <ListItemIcon>
+                    <BitcoinIcon/>
+                    </ListItemIcon>
+                    <ListItemText 
+                    primary={pn(userSummary.is_buyer ? userSummary.received_sats : userSummary.sent_sats)+" Sats"}
+                    secondary={userSummary.is_buyer ? "BTC received" : "BTC sent"}/>
 
-          <ListItemText 
-              primary={t("{{tradeFeeSats}} Sats ({{tradeFeePercent}}%)",{tradeFeeSats:userSummary.trade_fee_sats,tradeFeePercent:parseFloat((userSummary.trade_fee_percent*100).toPrecision(3))})}
-              secondary={"Trade fee"}/>
-          </ListItem>
-          
-          {userSummary.is_swap ? 
-          <ListItem>
-            <ListItemIcon>
-              <LinkIcon/>
-            </ListItemIcon>
-            <ListItemText 
-              primary={t("{{swapFeeSats}} Sats ({{swapFeePercent}}%)" , {swapFeeSats:pn(userSummary.swap_fee_sats), swapFeePercent:userSummary.swap_fee_percent})}
-              secondary={t("Onchain swap fee")}/>
-            <ListItemText 
-              primary={t("{{miningFeeSats}} Sats",{miningFeeSats:userSummary.mining_fee_sats})}
-              secondary={t("Mining fee")}/>
-          </ListItem>
-          : null}
+                <ListItemText 
+                    primary={t("{{tradeFeeSats}} Sats ({{tradeFeePercent}}%)",{tradeFeeSats:userSummary.trade_fee_sats,tradeFeePercent:parseFloat((userSummary.trade_fee_percent*100).toPrecision(3))})}
+                    secondary={"Trade fee"}/>
+                </ListItem>
+                
+                {userSummary.is_swap ? 
+                <ListItem>
+                    <ListItemIcon>
+                    <LinkIcon/>
+                    </ListItemIcon>
+                    <ListItemText 
+                    primary={t("{{swapFeeSats}} Sats ({{swapFeePercent}}%)" , {swapFeeSats:pn(userSummary.swap_fee_sats), swapFeePercent:userSummary.swap_fee_percent})}
+                    secondary={t("Onchain swap fee")}/>
+                    <ListItemText 
+                    primary={t("{{miningFeeSats}} Sats",{miningFeeSats:userSummary.mining_fee_sats})}
+                    secondary={t("Mining fee")}/>
+                </ListItem>
+                : null}
 
-          <ListItem>
-            <ListItemIcon>
-              <LockOpenIcon color="success"/>
-            </ListItemIcon>
-            <ListItemText 
-              primary={t("{{bondSats}} Sats ({{bondPercent}}%)" , {bondSats:pn(userSummary.bond_size_sats), bondPercent:userSummary.bond_size_percent})}
-              secondary={buttonValue === 0 ? t("Maker bond") : t("Taker bond") }/>
-            <ListItemText 
-              sx={{color:'#2e7d32'}}
-              primary={<b>{t("Unlocked")}</b>}/>
-          </ListItem>
-        </List>
-      </div>
-    {/* Platform Summary */}
-      <div style={{display: buttonValue == 1 ? '':'none'}}>
-        <List dense={true}>
-          <ListItem>
-            <ListItemIcon>
-              <AccountBalanceIcon/>
-            </ListItemIcon>
-            <ListItemText 
-              primary={t("{{revenueSats}} Sats",{revenueSats:platformSummary.trade_revenue_sats})}
-              secondary={t("Platform trade revenue")}/>
-          </ListItem>
-          <ListItem>
-            <ListItemIcon>
-              <RouteIcon/>
-            </ListItemIcon>
-            <ListItemText 
-              primary={t("{{routingFeeSats}} MiliSats",{routingFeeSats:platformSummary.routing_fee_sats})}
-              secondary={t("Platform covered routing fee")}/>
-          </ListItem>
-        </List>
-      </div>
+                <ListItem>
+                    <ListItemIcon>
+                    <LockOpenIcon color="success"/>
+                    </ListItemIcon>
+                    <ListItemText 
+                    primary={t("{{bondSats}} Sats ({{bondPercent}}%)" , {bondSats:pn(userSummary.bond_size_sats), bondPercent:userSummary.bond_size_percent})}
+                    secondary={buttonValue === 0 ? t("Maker bond") : t("Taker bond") }/>
+                    <ListItemText 
+                    sx={{color:'#2e7d32'}}
+                    primary={<b>{t("Unlocked")}</b>}/>
+                </ListItem>
+                </List>
+            </div>
+            {/* Platform Summary */}
+            <div style={{display: buttonValue == 1 ? '':'none'}}>
+                <List dense={true}>
+                <ListItem>
+                    <ListItemIcon>
+                    <AccountBalanceIcon/>
+                    </ListItemIcon>
+                    <ListItemText 
+                    primary={t("{{revenueSats}} Sats",{revenueSats:platformSummary.trade_revenue_sats})}
+                    secondary={t("Platform trade revenue")}/>
+                </ListItem>
+                <ListItem>
+                    <ListItemIcon>
+                    <RouteIcon/>
+                    </ListItemIcon>
+                    <ListItemText 
+                    primary={t("{{routingFeeSats}} MiliSats",{routingFeeSats:platformSummary.routing_fee_sats})}
+                    secondary={t("Platform covered routing fee")}/>
+                </ListItem>
+                </List>
+            </div>
+        </AccordionDetails>
+      </Accordion>
     </Grid>
   );
 };