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

@@ -295,14 +295,16 @@ bottomBarDesktop =()=>{
 
     LangSelect = () => {
         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,7 +55,7 @@ const TradeSummary = ({
   makerSummary,
   takerSummary,
   platformSummary,
-  bondPercent,
+  orderId,
 }: Props): JSX.Element => {
   const { t } = useTranslation();
   const [buttonValue, setButtonValue] = useState<number>(isMaker ? 0 : 2);
@@ -58,11 +63,12 @@ const TradeSummary = ({
   
   return (
     <Grid item xs={12} align="center">
-      <List>
+      <Accordion defaultExpanded={true} elevation={0} sx={{width:322, position:'relative', right:8}}>
-        <Divider>
+        <AccordionSummary expandIcon={<ExpandMoreIcon sx={{width:28}} color="primary"/>}>
-          <Chip label={t("Trade Summary")}/>
+          <Typography sx={{flexGrow:1}} color="text.secondary">{t("Trade Summary")}</Typography>
-        </Divider>
+        </AccordionSummary>
-      </List>
+        <AccordionDetails>
+            <div style={{position:'relative',left:14, display:'flex',alignItems:'center', justifyContent:'center', flexWrap:'wrap'}}>
             <ToggleButtonGroup
                 size="small" 
                 value={buttonValue} 
@@ -85,13 +91,23 @@ const TradeSummary = ({
                     &nbsp;
                     <Avatar 
                     className="smallAvatar"
-              sx={{height:24,width:24}}
+                    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}>
@@ -189,6 +205,8 @@ const TradeSummary = ({
                 </ListItem>
                 </List>
             </div>
+        </AccordionDetails>
+      </Accordion>
     </Grid>
   );
 };

frontend/src/components/i18n.js

@@ -3,37 +3,119 @@ import LanguageDetector from "i18next-browser-languagedetector";
 import { initReactI18next } from "react-i18next";
 import HttpApi from 'i18next-http-backend';
 
-import translationEN from "../locales/en.json";
+// import translationEN from "../../static/locales/en.json";
-import translationES from "../locales/es.json";
+// import translationES from "../../static/locales/es.json";
-import translationDE from "../locales/de.json";
+// import translationDE from "../../static/locales/de.json";
-import translationRU from "../locales/ru.json";
+// import translationRU from "../../static/locales/ru.json";
-// import translationZH from "../locales/zh.json";
+// // import translationZH from "../../static/locales/zh.json";
-import translationPL from "../locales/pl.json";
+// import translationPL from "../../static/locales/pl.json";
-import translationFR from "../locales/fr.json";
+// import translationFR from "../../static/locales/fr.json";
-import translationCA from "../locales/ca.json";
+// import translationCA from "../../static/locales/ca.json";
-import translationIT from "../locales/it.json";
+// import translationIT from "../../static/locales/it.json";
-import translationPT from "../locales/pt.json";
+// import translationPT from "../../static/locales/pt.json";
-import translationEU from "../locales/eu.json";
+// import translationEU from "../../static/locales/eu.json";
-import translationSV from "../locales/sv.json";
+// import translationSV from "../locales/sv.json";
 
 i18n
   .use(HttpApi)
   .use(LanguageDetector)
   .use(initReactI18next)
   .init({
-  resources: {
+  // resources: {
-    en: {translations: translationEN},
+  //   en: {translations: translationEN},
-    es: {translations: translationES},
+  //   es: {translations: translationES},
-    ru: {translations: translationRU},
+  //   ru: {translations: translationRU},
-    de: {translations: translationDE},
+  //   de: {translations: translationDE},
-    // zh: {translations: translationZH},
+  //   // zh: {translations: translationZH},
-    pl: {translations: translationPL},
+  //   pl: {translations: translationPL},
-    fr: {translations: translationFR},
+  //   fr: {translations: translationFR},
-    ca: {translations: translationCA},
+  //   ca: {translations: translationCA},
-    it: {translations: translationIT},
+  //   it: {translations: translationIT},
-    pt: {translations: translationPT},
+  //   pt: {translations: translationPT},
-    eu: {translations: translationEU},
+  //   eu: {translations: translationEU},
-    sv: {translations: translationSV},
+  //   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",