robosats/frontend/src/components/TradeSummary.tsx

import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import {
    Avatar,
    Badge,
    ToggleButton,
    ToggleButtonGroup,
    List,
    ListItem,
    ListItemText,
    ListItemIcon,
    Grid,
    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 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';
import LockOpenIcon from '@mui/icons-material/LockOpen';
import LinkIcon from '@mui/icons-material/Link';
import { RoboSatsNoTextIcon , SendReceiveIcon , BitcoinIcon} from "./Icons";

interface Item {
  id: string;
  name: string;
}

type Props = {
  isMaker: boolean;
  makerNick: string;
  takerNick: string;
  currencyCode: string;
  makerSummary: Record<string, Item>;
  takerSummary: Record<string, Item>;
  platformSummary: Record<string, Item>;
  orderId: number;
}

const TradeSummary = ({
  isMaker,
  makerNick,
  takerNick,
  currencyCode,
  makerSummary,
  takerSummary,
  platformSummary,
  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">
      <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"}/>

                <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>
        </AccordionDetails>
      </Accordion>
    </Grid>
  );
};
  
export default TradeSummary;