Mirror/robosats
1
0
Fork 0
mirror of https://github.com/RoboSats/robosats.git synced 2025-02-22 13:19:02 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Reckless_Satoshi 2022-07-17 11:11:10 -07:00
parent fe62a30a5c
commit 638d3b1d6c
No known key found for this signature in database
GPG Key ID: 9C4585B561315571
3 changed files with 159 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
api/logics.py
View File

@ -1574,7 +1574,7 @@ class Logics:
Summarizes a finished order. Returns a dict with Summarizes a finished order. Returns a dict with
amounts, fees, costs, etc, for buyer and seller. 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'} return False, {'bad_summary':'Order has not finished yet'}
context = {} context = {}

9
frontend/src/components/TradeBox.js
View File

@ -24,6 +24,8 @@ import BoltIcon from '@mui/icons-material/Bolt';
import LinkIcon from '@mui/icons-material/Link'; import LinkIcon from '@mui/icons-material/Link';
import AccountBalanceWalletIcon from '@mui/icons-material/AccountBalanceWallet'; import AccountBalanceWalletIcon from '@mui/icons-material/AccountBalanceWallet';
import FavoriteIcon from '@mui/icons-material/Favorite'; 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 { NewTabIcon } from "./Icons";
import { getCookie } from "../utils/cookies"; import { getCookie } from "../utils/cookies";
@ -1275,9 +1277,9 @@ handleRatingRobosatsChange=(e)=>{
</Grid> </Grid>
: null} : null}
<Grid container> <Grid item container spacing={3}>
<Grid item xs={show_renew? 6: 12} align="center"> <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> </Grid>
{show_renew ? {show_renew ?
@ -1285,7 +1287,7 @@ handleRatingRobosatsChange=(e)=>{
{this.state.renewLoading ? {this.state.renewLoading ?
<CircularProgress/> <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> </Grid>
: null} : null}
@ -1299,6 +1301,7 @@ handleRatingRobosatsChange=(e)=>{
makerSummary={this.props.data.maker_summary} makerSummary={this.props.data.maker_summary}
takerSummary={this.props.data.taker_summary} takerSummary={this.props.data.taker_summary}
platformSummary={this.props.data.platform_summary} platformSummary={this.props.data.platform_summary}
orderId={this.props.data.orderId}
/> />
</Grid> </Grid>

280
frontend/src/components/TradeSummary.tsx
View File

@ -6,19 +6,24 @@ import {
ToggleButton, ToggleButton,
ToggleButtonGroup, ToggleButtonGroup,
List, List,
Chip,
ListItem, ListItem,
ListItemText, ListItemText,
ListItemIcon, ListItemIcon,
Grid, Grid,
Divider, Tooltip,
IconButton,
Accordion,
AccordionSummary,
AccordionDetails,
Typography, Typography,
} from "@mui/material" } from "@mui/material"
import { pn } from "../utils/prettyNumbers"; import { pn } from "../utils/prettyNumbers";
import { saveAsJson } from "../utils/saveFile";
// Icons // Icons
import FlagWithProps from "./FlagWithProps"; 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 AccountBalanceIcon from '@mui/icons-material/AccountBalance';
import RouteIcon from '@mui/icons-material/Route'; import RouteIcon from '@mui/icons-material/Route';
import AccountBoxIcon from '@mui/icons-material/AccountBox'; import AccountBoxIcon from '@mui/icons-material/AccountBox';
@ -39,7 +44,7 @@ type Props = {
makerSummary: Record<string, Item>; makerSummary: Record<string, Item>;
takerSummary: Record<string, Item>; takerSummary: Record<string, Item>;
platformSummary: Record<string, Item>; platformSummary: Record<string, Item>;
bondPercent: number; orderId: number;
} }
const TradeSummary = ({ const TradeSummary = ({
@ -50,7 +55,7 @@ const TradeSummary = ({
makerSummary, makerSummary,
takerSummary, takerSummary,
platformSummary, platformSummary,
bondPercent, orderId,
}: Props): JSX.Element => { }: Props): JSX.Element => {
const { t } = useTranslation(); const { t } = useTranslation();
const [buttonValue, setButtonValue] = useState<number>(isMaker ? 0 : 2); const [buttonValue, setButtonValue] = useState<number>(isMaker ? 0 : 2);
@ -58,137 +63,150 @@ const TradeSummary = ({
return ( return (
<Grid item xs={12} align="center"> <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>
<ToggleButtonGroup <div style={{position:'relative',left:14, display:'flex',alignItems:'center', justifyContent:'center', flexWrap:'wrap'}}>
size="small" <ToggleButtonGroup
value={buttonValue} size="small"
exclusive> value={buttonValue}
<ToggleButton value={0} disableRipple={true} onClick={() => setButtonValue(0)}> exclusive>
<Avatar <ToggleButton value={0} disableRipple={true} onClick={() => setButtonValue(0)}>
className="flippedSmallAvatar" <Avatar
sx={{height:24,width:24}} className="flippedSmallAvatar"
alt={makerNick} sx={{height:24,width:24}}
src={window.location.origin +'/static/assets/avatars/' + makerNick + '.png'} alt={makerNick}
/> src={window.location.origin +'/static/assets/avatars/' + makerNick + '.png'}
&nbsp; />
{t("Maker")} &nbsp;
</ToggleButton> {t("Maker")}
<ToggleButton value={1} disableRipple={true} onClick={() => setButtonValue(1)}> </ToggleButton>
<RoboSatsNoTextIcon/> <ToggleButton value={1} disableRipple={true} onClick={() => setButtonValue(1)}>
</ToggleButton> <RoboSatsNoTextIcon/>
<ToggleButton value={2} disableRipple={true} onClick={() => setButtonValue(2)}> </ToggleButton>
{t("Taker")} <ToggleButton value={2} disableRipple={true} onClick={() => setButtonValue(2)}>
&nbsp; {t("Taker")}
<Avatar &nbsp;
className="smallAvatar" <Avatar
sx={{height:24,width:24}} className="smallAvatar"
alt={takerNick} sx={{height:28,width:28}}
src={window.location.origin +'/static/assets/avatars/' + takerNick + '.png'} alt={takerNick}
/> src={window.location.origin +'/static/assets/avatars/' + takerNick + '.png'}
</ToggleButton> />
</ToggleButtonGroup> </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")}/>
{/* Maker/Taker Summary */} <ListItemIcon>
<div style={{display: [0,2].includes(buttonValue) ? '':'none'}}> <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'}}>
<List dense={true}> <FlagWithProps code={currencyCode}/>
<ListItem> </div>
<ListItemIcon> </ListItemIcon>
<Badge <ListItemText
overlap="circular" primary={(userSummary.is_buyer ? pn(userSummary.sent_fiat) : pn(userSummary.received_fiat))+" "+currencyCode}
anchorOrigin={{horizontal: 'right', vertical: 'bottom'}} secondary={userSummary.is_buyer ? t("Sent") : t("Received")}/>
badgeContent={<div </ListItem>
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> <ListItem>
<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'}}> <ListItemIcon>
<FlagWithProps code={currencyCode}/> <BitcoinIcon/>
</div> </ListItemIcon>
</ListItemIcon> <ListItemText
<ListItemText primary={pn(userSummary.is_buyer ? userSummary.received_sats : userSummary.sent_sats)+" Sats"}
primary={(userSummary.is_buyer ? pn(userSummary.sent_fiat) : pn(userSummary.received_fiat))+" "+currencyCode} secondary={userSummary.is_buyer ? "BTC received" : "BTC sent"}/>
secondary={userSummary.is_buyer ? t("Sent") : t("Received")}/>
</ListItem>
<ListItem> <ListItemText
<ListItemIcon> primary={t("{{tradeFeeSats}} Sats ({{tradeFeePercent}}%)",{tradeFeeSats:userSummary.trade_fee_sats,tradeFeePercent:parseFloat((userSummary.trade_fee_percent*100).toPrecision(3))})}
<BitcoinIcon/> secondary={"Trade fee"}/>
</ListItemIcon> </ListItem>
<ListItemText
primary={pn(userSummary.is_buyer ? userSummary.received_sats : userSummary.sent_sats)+" Sats"}
secondary={userSummary.is_buyer ? "BTC received" : "BTC sent"}/>
<ListItemText {userSummary.is_swap ?
primary={t("{{tradeFeeSats}} Sats ({{tradeFeePercent}}%)",{tradeFeeSats:userSummary.trade_fee_sats,tradeFeePercent:parseFloat((userSummary.trade_fee_percent*100).toPrecision(3))})} <ListItem>
secondary={"Trade fee"}/> <ListItemIcon>
</ListItem> <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}
{userSummary.is_swap ? <ListItem>
<ListItem> <ListItemIcon>
<ListItemIcon> <LockOpenIcon color="success"/>
<LinkIcon/> </ListItemIcon>
</ListItemIcon> <ListItemText
<ListItemText primary={t("{{bondSats}} Sats ({{bondPercent}}%)" , {bondSats:pn(userSummary.bond_size_sats), bondPercent:userSummary.bond_size_percent})}
primary={t("{{swapFeeSats}} Sats ({{swapFeePercent}}%)" , {swapFeeSats:pn(userSummary.swap_fee_sats), swapFeePercent:userSummary.swap_fee_percent})} secondary={buttonValue === 0 ? t("Maker bond") : t("Taker bond") }/>
secondary={t("Onchain swap fee")}/> <ListItemText
<ListItemText sx={{color:'#2e7d32'}}
primary={t("{{miningFeeSats}} Sats",{miningFeeSats:userSummary.mining_fee_sats})} primary={<b>{t("Unlocked")}</b>}/>
secondary={t("Mining fee")}/> </ListItem>
</ListItem> </List>
: null} </div>
{/* Platform Summary */}
<ListItem> <div style={{display: buttonValue == 1 ? '':'none'}}>
<ListItemIcon> <List dense={true}>
<LockOpenIcon color="success"/> <ListItem>
</ListItemIcon> <ListItemIcon>
<ListItemText <AccountBalanceIcon/>
primary={t("{{bondSats}} Sats ({{bondPercent}}%)" , {bondSats:pn(userSummary.bond_size_sats), bondPercent:userSummary.bond_size_percent})} </ListItemIcon>
secondary={buttonValue === 0 ? t("Maker bond") : t("Taker bond") }/> <ListItemText
<ListItemText primary={t("{{revenueSats}} Sats",{revenueSats:platformSummary.trade_revenue_sats})}
sx={{color:'#2e7d32'}} secondary={t("Platform trade revenue")}/>
primary={<b>{t("Unlocked")}</b>}/> </ListItem>
</ListItem> <ListItem>
</List> <ListItemIcon>
</div> <RouteIcon/>
{/* Platform Summary */} </ListItemIcon>
<div style={{display: buttonValue == 1 ? '':'none'}}> <ListItemText
<List dense={true}> primary={t("{{routingFeeSats}} MiliSats",{routingFeeSats:platformSummary.routing_fee_sats})}
<ListItem> secondary={t("Platform covered routing fee")}/>
<ListItemIcon> </ListItem>
<AccountBalanceIcon/> </List>
</ListItemIcon> </div>
<ListItemText </AccordionDetails>
primary={t("{{revenueSats}} Sats",{revenueSats:platformSummary.trade_revenue_sats})} </Accordion>
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>
</Grid> </Grid>
); );
}; };