Merge branch 'main' into 2022-07-15-add-swedish-translation

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/App.js

@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React, { Component , Suspense } from "react";
 import ReactDOM from 'react-dom/client';
 import HomePage from "./HomePage";
 import { CssBaseline, IconButton , Link} from "@mui/material";
@@ -36,6 +36,7 @@ export default class App extends Component {
 
   render() {
     return (
+      <Suspense fallback="loading language">
       <I18nextProvider i18n={i18n}>
         <ThemeProvider theme={this.state.dark ? this.darkTheme : this.lightTheme}>
           <CssBaseline/>
@@ -48,6 +49,7 @@ export default class App extends Component {
           <HomePage/>
         </ThemeProvider>
       </I18nextProvider>
+      </Suspense>
     );
   }
 }

frontend/src/components/BottomBar.js

@@ -294,15 +294,17 @@ bottomBarDesktop =()=>{
     }
 
     LangSelect = () => {
-        const { i18n} = this.props;
+        const { i18n } = this.props;
+        const lang = i18n.resolvedLanguage == null ? 'en' : i18n.resolvedLanguage.substring(0,2);
         const flagProps = {
             width: 20,
             height: 20,
           };
+
         return(
             <Select
                 size = 'small'
-                value = {i18n.resolvedLanguage.substring(0,2)}
+                value = {lang}
                 inputProps={{
                     style: {textAlign:"center"}
                 }}

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>
   );
 };

frontend/src/components/i18n.js

@@ -3,39 +3,121 @@ import LanguageDetector from "i18next-browser-languagedetector";
 import { initReactI18next } from "react-i18next";
 import HttpApi from 'i18next-http-backend';
 
-import translationEN from "../locales/en.json";
-import translationES from "../locales/es.json";
-import translationDE from "../locales/de.json";
-import translationRU from "../locales/ru.json";
-// import translationZH from "../locales/zh.json";
-import translationPL from "../locales/pl.json";
-import translationFR from "../locales/fr.json";
-import translationCA from "../locales/ca.json";
-import translationIT from "../locales/it.json";
-import translationPT from "../locales/pt.json";
-import translationEU from "../locales/eu.json";
-import translationSV from "../locales/sv.json";
+// import translationEN from "../../static/locales/en.json";
+// import translationES from "../../static/locales/es.json";
+// import translationDE from "../../static/locales/de.json";
+// import translationRU from "../../static/locales/ru.json";
+// // import translationZH from "../../static/locales/zh.json";
+// import translationPL from "../../static/locales/pl.json";
+// import translationFR from "../../static/locales/fr.json";
+// import translationCA from "../../static/locales/ca.json";
+// import translationIT from "../../static/locales/it.json";
+// import translationPT from "../../static/locales/pt.json";
+// import translationEU from "../../static/locales/eu.json";
+// import translationSV from "../locales/sv.json";
 
 i18n
   .use(HttpApi)
   .use(LanguageDetector)
   .use(initReactI18next)
   .init({
-  resources: {
-    en: {translations: translationEN},
-    es: {translations: translationES},
-    ru: {translations: translationRU},
-    de: {translations: translationDE},
-    // zh: {translations: translationZH},
-    pl: {translations: translationPL},
-    fr: {translations: translationFR},
-    ca: {translations: translationCA},
-    it: {translations: translationIT},
-    pt: {translations: translationPT},
-    eu: {translations: translationEU},
-    sv: {translations: translationSV},
-  },
+  // resources: {
+  //   en: {translations: translationEN},
+  //   es: {translations: translationES},
+  //   ru: {translations: translationRU},
+  //   de: {translations: translationDE},
+  //   // zh: {translations: translationZH},
+  //   pl: {translations: translationPL},
+  //   fr: {translations: translationFR},
+  //   ca: {translations: translationCA},
+  //   it: {translations: translationIT},
+  //   pt: {translations: translationPT},
+  //   eu: {translations: translationEU},
+  //   sv: {translations: translationSV},
+  // },
   
+  backend:{
+    // path where resources get loaded from, or a function
+    // returning a path:
+    // function(lngs, namespaces) { return customPath; }
+    // the returned path will interpolate lng, ns if provided like giving a static path
+    // the function might return a promise
+    // returning falsy will abort the download
+    //
+    // If allowMultiLoading is false, lngs and namespaces will have only one element each,
+    // If allowMultiLoading is true, lngs and namespaces can have multiple elements
+    loadPath: '/static/locales/{{lng}}.json',
+  
+    // path to post missing resources, or a function
+    // function(lng, namespace) { return customPath; }
+    // the returned path will interpolate lng, ns if provided like giving a static path
+    addPath: '/static/locales/add/{{lng}}/{{ns}}',
+  
+    // your backend server supports multiloading
+    // /locales/resources.json?lng=de+en&ns=ns1+ns2
+    // Adapter is needed to enable MultiLoading https://github.com/i18next/i18next-multiload-backend-adapter
+    // Returned JSON structure in this case is
+    // {
+    //  lang : {
+    //   namespaceA: {},
+    //   namespaceB: {},
+    //   ...etc
+    //  }
+    // }
+    allowMultiLoading: false, // set loadPath: '/locales/resources.json?lng={{lng}}&ns={{ns}}' to adapt to multiLoading
+  
+    // parse data after it has been fetched
+    // in example use https://www.npmjs.com/package/json5
+    // here it removes the letter a from the json (bad idea)
+    //parse: function(data) { return data.replace(/a/g, ''); },
+  
+    //parse data before it has been sent by addPath
+    //parsePayload: function(namespace, key, fallbackValue) { return { key } },
+  
+    // allow cross domain requests
+    crossDomain: false,
+  
+    // allow credentials on cross domain requests
+    withCredentials: false,
+  
+    // overrideMimeType sets request.overrideMimeType("application/json")
+    overrideMimeType: false,
+  
+    // custom request headers sets request.setRequestHeader(key, value)
+    // customHeaders: {
+    //   authorization: 'foo',
+    //   // ...
+    // },
+    // can also be a function, that returns the headers
+    // customHeaders: () => ({
+    //   authorization: 'foo',
+    //   // ...
+    // }),
+  
+    // requestOptions: { // used for fetch, can also be a function (payload) => ({ method: 'GET' })
+    //   mode: 'cors',
+    //   credentials: 'same-origin',
+    //   cache: 'default'
+    // },
+  
+    // define a custom request function
+    // can be used to support XDomainRequest in IE 8 and 9
+    //
+    // 'options' will be this entire options object
+    // 'url' will be passed the value of 'loadPath'
+    // 'payload' will be a key:value object used when saving missing translations
+    // 'callback' is a function that takes two parameters, 'err' and 'res'.
+    //            'err' should be an error
+    //            'res' should be an object with a 'status' property and a 'data' property containing a stringified object instance beeing the key:value translation pairs for the
+    //            requested language and namespace, or null in case of an error.
+    //request: function (options, url, payload, callback) {},
+  
+    // adds parameters to resource URL. 'example.com' -> 'example.com?v=1.3.5'
+    // queryStringParams: { v: '1.3.5' },
+  
+    reloadInterval: false // can be used to reload resources in a specific interval (useful in server environments)
+  },
+
   fallbackLng: "en",
   debug: false,