Mirror/robosats
1
0
Fork 0
mirror of https://github.com/RoboSats/robosats.git synced 2024-12-14 19:36:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Implement i18n 5/9 OrderPage

Browse Source
This commit is contained in:
Reckless_Satoshi 2022-04-04 12:18:07 -07:00
parent b95d21c8bc
commit 433f538508
No known key found for this signature in database
GPG Key ID: 9C4585B561315571
4 changed files with 166 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
frontend/src/components/OrderPage.js
View File

@ -15,6 +15,7 @@ import NumbersIcon from '@mui/icons-material/Numbers';
import PriceChangeIcon from '@mui/icons-material/PriceChange'; import PriceChangeIcon from '@mui/icons-material/PriceChange';
import PaymentsIcon from '@mui/icons-material/Payments'; import PaymentsIcon from '@mui/icons-material/Payments';
import ArticleIcon from '@mui/icons-material/Article'; import ArticleIcon from '@mui/icons-material/Article';
import { t } from "i18next";
function getCookie(name) { function getCookie(name) {
let cookieValue = null; let cookieValue = null;
@ -127,9 +128,10 @@ class OrderPage extends Component {
// Countdown Renderer callback with condition // Countdown Renderer callback with condition
countdownRenderer = ({ total, hours, minutes, seconds, completed }) => { countdownRenderer = ({ total, hours, minutes, seconds, completed }) => {
const { t } = this.props;
if (completed) { if (completed) {
// Render a completed state // Render a completed state
return (<span> The order has expired</span>); return (<span> {t("The order has expired")}</span>);
} else { } else {
var col = 'inherit' var col = 'inherit'
@ -148,13 +150,14 @@ class OrderPage extends Component {
// Countdown Renderer callback with condition // Countdown Renderer callback with condition
countdownPenaltyRenderer = ({ minutes, seconds, completed }) => { countdownPenaltyRenderer = ({ minutes, seconds, completed }) => {
const { t } = this.props;
if (completed) { if (completed) {
// Render a completed state // Render a completed state
return (<span> Penalty lifted, good to go!</span>); return (<span> {t("Penalty lifted, good to go!")}</span>);
} else { } else {
return ( return (
<span> You cannot take an order yet! Wait {zeroPad(minutes)}m {zeroPad(seconds)}s </span> <span> {t("You cannot take an order yet! Wait {{timeMin}}m {{timeSec}}s",{timeMin: zeroPad(minutes), timeSec: zeroPad(seconds) })} </span>
); );
} }
}; };
@ -168,27 +171,29 @@ class OrderPage extends Component {
} }
amountHelperText=()=>{ amountHelperText=()=>{
const { t } = this.props;
if(this.state.takeAmount < this.state.min_amount & this.state.takeAmount != ""){ if(this.state.takeAmount < this.state.min_amount & this.state.takeAmount != ""){
return "Too low" return t("Too low")
}else if (this.state.takeAmount > this.state.max_amount & this.state.takeAmount != ""){ }else if (this.state.takeAmount > this.state.max_amount & this.state.takeAmount != ""){
return "Too high" return t("Too high")
}else{ }else{
return null return null
} }
} }
takeOrderButton = () => { takeOrderButton = () => {
const { t } = this.props;
if(this.state.has_range){ if(this.state.has_range){
return( return(
<Grid containter xs={12} align="center" alignItems="stretch" justifyContent="center" style={{ display: "flex"}}> <Grid containter xs={12} align="center" alignItems="stretch" justifyContent="center" style={{ display: "flex"}}>
<this.InactiveMakerDialog/> <this.InactiveMakerDialog/>
<div style={{maxWidth:120}}> <div style={{maxWidth:120}}>
<Tooltip placement="top" enterTouchDelay="500" enterDelay="700" enterNextDelay="2000" title="Enter amount of fiat to exchange for bitcoin"> <Tooltip placement="top" enterTouchDelay="500" enterDelay="700" enterNextDelay="2000" title={t("Enter amount of fiat to exchange for bitcoin")}>
<Paper elevation={5} sx={{maxHeight:40}}> <Paper elevation={5} sx={{maxHeight:40}}>
<TextField <TextField
error={(this.state.takeAmount < this.state.min_amount || this.state.takeAmount > this.state.max_amount) & this.state.takeAmount != "" } error={(this.state.takeAmount < this.state.min_amount || this.state.takeAmount > this.state.max_amount) & this.state.takeAmount != "" }
helperText={this.amountHelperText()} helperText={this.amountHelperText()}
label={"Amount "+this.state.currencyCode} label={t("Amount {{currencyCode}}", {currencyCode: this.state.currencyCode})}
size="small" size="small"
type="number" type="number"
required="true" required="true"
@ -204,11 +209,11 @@ class OrderPage extends Component {
</Tooltip> </Tooltip>
</div> </div>
<div style={{height:38, top:'1px', position:'relative', display: (this.state.takeAmount < this.state.min_amount || this.state.takeAmount > this.state.max_amount || this.state.takeAmount == "" || this.state.takeAmount == null) ? '':'none'}}> <div style={{height:38, top:'1px', position:'relative', display: (this.state.takeAmount < this.state.min_amount || this.state.takeAmount > this.state.max_amount || this.state.takeAmount == "" || this.state.takeAmount == null) ? '':'none'}}>
<Tooltip placement="top" enterTouchDelay="0" enterDelay="500" enterNextDelay="1200" title="You must specify an amount first"> <Tooltip placement="top" enterTouchDelay="0" enterDelay="500" enterNextDelay="1200" title={t("You must specify an amount first")}>
<Paper elevation={4}> <Paper elevation={4}>
<Button sx={{height:38}} variant='contained' color='primary' <Button sx={{height:38}} variant='contained' color='primary'
disabled={true}> disabled={true}>
Take Order {t("Take Order")}
</Button> </Button>
</Paper> </Paper>
</Tooltip> </Tooltip>
@ -217,7 +222,7 @@ class OrderPage extends Component {
<Paper elevation={4}> <Paper elevation={4}>
<Button sx={{height:38}} variant='contained' color='primary' <Button sx={{height:38}} variant='contained' color='primary'
onClick={this.state.maker_status=='Inactive' ? this.handleClickOpenInactiveMakerDialog : this.takeOrder}> onClick={this.state.maker_status=='Inactive' ? this.handleClickOpenInactiveMakerDialog : this.takeOrder}>
Take Order {t("Take Order")}
</Button> </Button>
</Paper> </Paper>
</div> </div>
@ -229,7 +234,7 @@ class OrderPage extends Component {
<this.InactiveMakerDialog/> <this.InactiveMakerDialog/>
<Button variant='contained' color='primary' <Button variant='contained' color='primary'
onClick={this.state.maker_status=='Inactive' ? this.handleClickOpenInactiveMakerDialog : this.takeOrder}> onClick={this.state.maker_status=='Inactive' ? this.handleClickOpenInactiveMakerDialog : this.takeOrder}>
Take Order {t("Take Order")}
</Button> </Button>
</> </>
) )
@ -243,8 +248,8 @@ class OrderPage extends Component {
return ( <this.takeOrderButton/>); return ( <this.takeOrderButton/>);
} else{ } else{
return( return(
<Tooltip enterTouchDelay="0" title="Wait until you can take an order"><div> <Tooltip enterTouchDelay="0" title={t("Wait until you can take an order")}><div>
<Button disabled={true} variant='contained' color='primary'>Take Order</Button> <Button disabled={true} variant='contained' color='primary'>{t("Take Order")}</Button>
</div></Tooltip>) </div></Tooltip>)
} }
}; };
@ -320,6 +325,7 @@ class OrderPage extends Component {
}; };
CancelDialog =() =>{ CancelDialog =() =>{
const { t } = this.props;
return( return(
<Dialog <Dialog
open={this.state.openCancel} open={this.state.openCancel}
@ -328,16 +334,16 @@ class OrderPage extends Component {
aria-describedby="cancel-dialog-description" aria-describedby="cancel-dialog-description"
> >
<DialogTitle id="cancel-dialog-title"> <DialogTitle id="cancel-dialog-title">
{"Cancel the order?"} {t("Cancel the order?")}
</DialogTitle> </DialogTitle>
<DialogContent> <DialogContent>
<DialogContentText id="cancel-dialog-description"> <DialogContentText id="cancel-dialog-description">
If the order is cancelled now you will lose your bond. {t("If the order is cancelled now you will lose your bond.")}
</DialogContentText> </DialogContentText>
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>
<Button onClick={this.handleClickCloseConfirmCancelDialog} autoFocus>Go back</Button> <Button onClick={this.handleClickCloseConfirmCancelDialog} autoFocus>{t("Go back")}</Button>
<Button onClick={this.handleClickConfirmCancelButton}> Confirm Cancel </Button> <Button onClick={this.handleClickConfirmCancelButton}>{t("Confirm Cancel")}</Button>
</DialogActions> </DialogActions>
</Dialog> </Dialog>
) )
@ -351,6 +357,7 @@ class OrderPage extends Component {
}; };
InactiveMakerDialog =() =>{ InactiveMakerDialog =() =>{
const { t } = this.props;
return( return(
<Dialog <Dialog
open={this.state.openInactiveMaker} open={this.state.openInactiveMaker}
@ -359,17 +366,16 @@ class OrderPage extends Component {
aria-describedby="inactive-maker-description" aria-describedby="inactive-maker-description"
> >
<DialogTitle id="inactive-maker-dialog-title"> <DialogTitle id="inactive-maker-dialog-title">
{"The maker is away"} {t("The maker is away")}
</DialogTitle> </DialogTitle>
<DialogContent> <DialogContent>
<DialogContentText id="cancel-dialog-description"> <DialogContentText id="cancel-dialog-description">
By taking this order you risk wasting your time. {t("By taking this order you risk wasting your time. If the maker does not proceed in time, you will be compensated in satoshis for 50% of the maker bond.")}
If the maker does not proceed in time, you will be compensated in satoshis for 50% of the maker bond.
</DialogContentText> </DialogContentText>
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>
<Button onClick={this.handleClickCloseInactiveMakerDialog} autoFocus>Go back</Button> <Button onClick={this.handleClickCloseInactiveMakerDialog} autoFocus>{t("Go back")}</Button>
<Button onClick={this.takeOrder}> Take Order </Button> <Button onClick={this.takeOrder}>{t("Take Order")}</Button>
</DialogActions> </DialogActions>
</Dialog> </Dialog>
) )
@ -396,6 +402,7 @@ class OrderPage extends Component {
}; };
CollaborativeCancelDialog =() =>{ CollaborativeCancelDialog =() =>{
const { t } = this.props;
return( return(
<Dialog <Dialog
open={this.state.openCollaborativeCancel} open={this.state.openCollaborativeCancel}
@ -404,41 +411,41 @@ class OrderPage extends Component {
aria-describedby="collaborative-cancel-dialog-description" aria-describedby="collaborative-cancel-dialog-description"
> >
<DialogTitle id="cancel-dialog-title"> <DialogTitle id="cancel-dialog-title">
{"Collaborative cancel the order?"} {t("Collaborative cancel the order?")}
</DialogTitle> </DialogTitle>
<DialogContent> <DialogContent>
<DialogContentText id="cancel-dialog-description"> <DialogContentText id="cancel-dialog-description">
The trade escrow has been posted. The order can be cancelled only if both, maker and {t("The trade escrow has been posted. The order can be cancelled only if both, maker and taker, agree to cancel.")}
taker, agree to cancel.
</DialogContentText> </DialogContentText>
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>
<Button onClick={this.handleClickCloseCollaborativeCancelDialog} autoFocus>Go back</Button> <Button onClick={this.handleClickCloseCollaborativeCancelDialog} autoFocus>{t("Go back")}</Button>
<Button onClick={this.handleClickConfirmCollaborativeCancelButton}> Ask for Cancel </Button> <Button onClick={this.handleClickConfirmCollaborativeCancelButton}>{t("Ask for Cancel")}</Button>
</DialogActions> </DialogActions>
</Dialog> </Dialog>
) )
} }
BackButton = () => { BackButton = () => {
const { t } = this.props;
// If order has expired, show back button. // If order has expired, show back button.
if (this.state.status == 5){ if (this.state.status == 5){
return( return(
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
<Button variant='contained' color='secondary' onClick={this.props.history.goBack}>Back</Button> <Button variant='contained' color='secondary' onClick={this.props.history.goBack}>{t("Back")}</Button>
</Grid> </Grid>
)} )}
return(null) return(null)
} }
CancelButton = () => { CancelButton = () => {
const { t } = this.props;
// If maker and Waiting for Bond. Or if taker and Waiting for bond. // If maker and Waiting for Bond. Or if taker and Waiting for bond.
// Simply allow to cancel without showing the cancel dialog. // Simply allow to cancel without showing the cancel dialog.
if ((this.state.is_maker & [0,1].includes(this.state.status)) || this.state.is_taker & this.state.status == 3){ if ((this.state.is_maker & [0,1].includes(this.state.status)) || this.state.is_taker & this.state.status == 3){
return( return(
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
<Button variant='contained' color='secondary' onClick={this.handleClickConfirmCancelButton}>Cancel</Button> <Button variant='contained' color='secondary' onClick={this.handleClickConfirmCancelButton}>{t("Cancel")}</Button>
</Grid> </Grid>
)} )}
// If the order does not yet have an escrow deposited. Show dialog // If the order does not yet have an escrow deposited. Show dialog
@ -448,7 +455,7 @@ class OrderPage extends Component {
<div id="openDialogCancelButton"> <div id="openDialogCancelButton">
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
<this.CancelDialog/> <this.CancelDialog/>
<Button variant='contained' color='secondary' onClick={this.handleClickOpenConfirmCancelDialog}>Cancel</Button> <Button variant='contained' color='secondary' onClick={this.handleClickOpenConfirmCancelDialog}>{t("Cancel")}</Button>
</Grid> </Grid>
</div> </div>
)} )}
@ -459,7 +466,7 @@ class OrderPage extends Component {
return( return(
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
<this.CollaborativeCancelDialog/> <this.CollaborativeCancelDialog/>
<Button variant='contained' color='secondary' onClick={this.handleClickOpenCollaborativeCancelDialog}>Collaborative Cancel</Button> <Button variant='contained' color='secondary' onClick={this.handleClickOpenCollaborativeCancelDialog}>{t("Collaborative Cancel")}</Button>
</Grid> </Grid>
)} )}
@ -475,19 +482,20 @@ class OrderPage extends Component {
} }
orderBox=()=>{ orderBox=()=>{
const { t } = this.props;
return( return(
<Grid container spacing={1} > <Grid container spacing={1} >
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
<MediaQuery minWidth={920}> <MediaQuery minWidth={920}>
<Typography component="h5" variant="h5"> <Typography component="h5" variant="h5">
Order Box {t("Order Box")}
</Typography> </Typography>
</MediaQuery> </MediaQuery>
<Paper elevation={12} style={{ padding: 8,}}> <Paper elevation={12} style={{ padding: 8,}}>
<List dense="true"> <List dense="true">
<ListItem > <ListItem >
<ListItemAvatar sx={{ width: 56, height: 56 }}> <ListItemAvatar sx={{ width: 56, height: 56 }}>
<Tooltip placement="top" enterTouchDelay="0" title={this.state.maker_status} > <Tooltip placement="top" enterTouchDelay="0" title={t(this.state.maker_status)} >
<Badge variant="dot" overlap="circular" badgeContent="" color={this.statusBadgeColor(this.state.maker_status)}> <Badge variant="dot" overlap="circular" badgeContent="" color={this.statusBadgeColor(this.state.maker_status)}>
<Avatar className="flippedSmallAvatar" <Avatar className="flippedSmallAvatar"
alt={this.state.maker_nick} alt={this.state.maker_nick}
@ -496,7 +504,7 @@ class OrderPage extends Component {
</Badge> </Badge>
</Tooltip> </Tooltip>
</ListItemAvatar> </ListItemAvatar>
<ListItemText primary={this.state.maker_nick + (this.state.type ? " (Seller)" : " (Buyer)")} secondary="Order maker" align="right"/> <ListItemText primary={this.state.maker_nick + (this.state.type ? " "+t("(Seller)") : " "+t("(Buyer)") )} secondary={t("Order maker")} align="right"/>
</ListItem> </ListItem>
{this.state.is_participant ? {this.state.is_participant ?
@ -505,9 +513,9 @@ class OrderPage extends Component {
<> <>
<Divider /> <Divider />
<ListItem align="left"> <ListItem align="left">
<ListItemText primary={this.state.taker_nick + (this.state.type ? " (Buyer)" : " (Seller)")} secondary="Order taker"/> <ListItemText primary={this.state.taker_nick + (this.state.type ? " "+t("(Buyer)") : " "+t("(Seller)"))} secondary={t("Order taker")}/>
<ListItemAvatar > <ListItemAvatar >
<Tooltip enterTouchDelay="0" title={this.state.taker_status} > <Tooltip enterTouchDelay="0" title={t(this.state.taker_status)} >
<Badge variant="dot" overlap="circular" badgeContent="" color={this.statusBadgeColor(this.state.taker_status)}> <Badge variant="dot" overlap="circular" badgeContent="" color={this.statusBadgeColor(this.state.taker_status)}>
<Avatar className="smallAvatar" <Avatar className="smallAvatar"
alt={this.state.taker_nick} alt={this.state.taker_nick}
@ -520,16 +528,16 @@ class OrderPage extends Component {
</>: </>:
"" ""
} }
<Divider><Chip label='Order Details'/></Divider> <Divider><Chip label={t("Order Details")}/></Divider>
<ListItem> <ListItem>
<ListItemIcon> <ListItemIcon>
<ArticleIcon/> <ArticleIcon/>
</ListItemIcon> </ListItemIcon>
<ListItemText primary={this.state.status_message} secondary="Order status"/> <ListItemText primary={t(this.state.status_message)} secondary={t("Order status")}/>
</ListItem> </ListItem>
<Divider/> <Divider/>
</> </>
:<Divider><Chip label='Order Details'/></Divider> :<Divider><Chip label={t("Order Details")}/></Divider>
} }
<ListItem> <ListItem>
@ -540,10 +548,10 @@ class OrderPage extends Component {
</ListItemIcon> </ListItemIcon>
{this.state.has_range & this.state.amount == null ? {this.state.has_range & this.state.amount == null ?
<ListItemText primary={parseFloat(Number(this.state.min_amount).toPrecision(2)) <ListItemText primary={parseFloat(Number(this.state.min_amount).toPrecision(2))
+"-" + parseFloat(Number(this.state.max_amount).toPrecision(2)) +" "+this.state.currencyCode} secondary="Amount range"/> +"-" + parseFloat(Number(this.state.max_amount).toPrecision(2)) +" "+this.state.currencyCode} secondary={t("Amount range")}/>
: :
<ListItemText primary={parseFloat(parseFloat(this.state.amount).toFixed(4)) <ListItemText primary={parseFloat(parseFloat(this.state.amount).toFixed(4))
+" "+this.state.currencyCode} secondary="Amount"/> +" "+this.state.currencyCode} secondary={t("Amount")}/>
} }
</ListItem> </ListItem>
@ -553,7 +561,7 @@ class OrderPage extends Component {
<ListItemIcon> <ListItemIcon>
<PaymentsIcon/> <PaymentsIcon/>
</ListItemIcon> </ListItemIcon>
<ListItemText primary={<PaymentText size={20} verbose={true} text={this.state.payment_method}/>} secondary={this.state.currency==1000 ? "Swap destination":"Accepted payment methods"}/> <ListItemText primary={<PaymentText size={20} verbose={true} text={this.state.payment_method}/>} secondary={this.state.currency==1000 ? t("Swap destination"):t("Accepted payment methods")}/>
</ListItem> </ListItem>
<Divider /> <Divider />
@ -563,12 +571,12 @@ class OrderPage extends Component {
<PriceChangeIcon/> <PriceChangeIcon/>
</ListItemIcon> </ListItemIcon>
{this.state.price_now? {this.state.price_now?
<ListItemText primary={pn(this.state.price_now)+" "+this.state.currencyCode+"/BTC - Premium: "+this.state.premium_now+"%"} secondary="Price and Premium"/> <ListItemText primary={t("{{price}} {{currencyCode}}/BTC - Premium: {{premium}}%", {price: pn(this.state.price_now), currencyCode:this.state.currencyCode, premium: this.state.premium_now})} secondary={t("Price and Premium")}/>
: :
(this.state.is_explicit ? (this.state.is_explicit ?
<ListItemText primary={pn(this.state.satoshis)} secondary="Amount of Satoshis"/> <ListItemText primary={pn(this.state.satoshis)} secondary={t("Amount of Satoshis")}/>
: :
<ListItemText primary={parseFloat(parseFloat(this.state.premium).toFixed(2))+"%"} secondary="Premium over market price"/> <ListItemText primary={parseFloat(parseFloat(this.state.premium).toFixed(2))+"%"} secondary={t("Premium over market price")}/>
) )
} }
</ListItem> </ListItem>
@ -578,14 +586,14 @@ class OrderPage extends Component {
<ListItemIcon> <ListItemIcon>
<NumbersIcon/> <NumbersIcon/>
</ListItemIcon> </ListItemIcon>
<ListItemText primary={this.orderId} secondary="Order ID"/> <ListItemText primary={this.orderId} secondary={t("Order ID")}/>
</ListItem> </ListItem>
<Divider /> <Divider />
<ListItem> <ListItem>
<ListItemIcon> <ListItemIcon>
<AccessTimeIcon/> <AccessTimeIcon/>
</ListItemIcon> </ListItemIcon>
<ListItemText secondary="Expires in"> <ListItemText secondary={t("Expires in")}>
<Countdown date={new Date(this.state.expires_at)} renderer={this.countdownRenderer} /> <Countdown date={new Date(this.state.expires_at)} renderer={this.countdownRenderer} />
</ListItemText> </ListItemText>
</ListItem> </ListItem>
@ -610,7 +618,7 @@ class OrderPage extends Component {
<Divider /> <Divider />
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
<Alert severity="warning" sx={{maxWidth:360}}> <Alert severity="warning" sx={{maxWidth:360}}>
{this.state.is_maker ? this.state.taker_nick : this.state.maker_nick} is asking for a collaborative cancel {t("{{nickname}} is asking for a collaboratice cancel", {nickname: this.state.is_maker ? this.state.taker_nick : this.state.maker_nick})}
</Alert> </Alert>
</Grid> </Grid>
</> </>
@ -622,7 +630,7 @@ class OrderPage extends Component {
<Divider /> <Divider />
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
<Alert severity="warning" sx={{maxWidth:360}}> <Alert severity="warning" sx={{maxWidth:360}}>
You asked for a collaborative cancellation {t("You asked for a collaborative cancellation")}
</Alert> </Alert>
</Grid> </Grid>
</> </>
@ -644,7 +652,7 @@ class OrderPage extends Component {
<Countdown date={new Date(this.state.penalty)} renderer={this.countdownTakeOrderRenderer} /> <Countdown date={new Date(this.state.penalty)} renderer={this.countdownTakeOrderRenderer} />
</Grid> </Grid>
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
<Button variant='contained' color='secondary' onClick={this.props.history.goBack}>Back</Button> <Button variant='contained' color='secondary' onClick={this.props.history.goBack}>{t("Back")}</Button>
</Grid> </Grid>
</Grid> </Grid>
} }
@ -674,7 +682,7 @@ class OrderPage extends Component {
} }
doubleOrderPagePhone=()=>{ doubleOrderPagePhone=()=>{
const { t } = this.props;
const [value, setValue] = React.useState(this.state.showContractBox); const [value, setValue] = React.useState(this.state.showContractBox);
const handleChange = (event, newValue) => { const handleChange = (event, newValue) => {
@ -686,8 +694,8 @@ class OrderPage extends Component {
<Box sx={{ width: '100%'}}> <Box sx={{ width: '100%'}}>
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}> <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
<Tabs value={value} onChange={handleChange} variant="fullWidth" > <Tabs value={value} onChange={handleChange} variant="fullWidth" >
<Tab label="Order" {...this.a11yProps(0)} /> <Tab label={t("Order")} {...this.a11yProps(0)} />
<Tab label="Contract" {...this.a11yProps(1)} /> <Tab label={t("Contract")} {...this.a11yProps(1)} />
</Tabs> </Tabs>
</Box> </Box>
<Grid container spacing={2}> <Grid container spacing={2}>
@ -705,13 +713,15 @@ class OrderPage extends Component {
} }
orderDetailsPage (){ orderDetailsPage (){
const { t } = this.props;
return( return(
this.state.bad_request ? this.state.bad_request ?
<div align='center'> <div align='center'>
<Typography component="subtitle2" variant="subtitle2" color="secondary" > <Typography component="subtitle2" variant="subtitle2" color="secondary" >
{/* IMPLEMENT I18N for bad_request */}
{this.state.bad_request}<br/> {this.state.bad_request}<br/>
</Typography> </Typography>
<Button variant='contained' color='secondary' onClick={this.props.history.goBack}>Back</Button> <Button variant='contained' color='secondary' onClick={this.props.history.goBack}>{t("Back")}</Button>
</div> </div>
: :
(this.state.is_participant ? (this.state.is_participant ?

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

@ -178,13 +178,11 @@ class TradeBox extends Component {
aria-describedby="fiat-received-dialog-description" aria-describedby="fiat-received-dialog-description"
> >
<DialogTitle id="open-dispute-dialog-title"> <DialogTitle id="open-dispute-dialog-title">
<Trans i18n="confirm_fiat_received_title">Confirm you received {{currencyCode: this.props.data.currencyCode}}?</Trans> {t("Confirm you received {{currencyCode}}?", {currencyCode: this.props.data.currencyCode})}
</DialogTitle> </DialogTitle>
<DialogContent> <DialogContent>
<DialogContentText id="alert-dialog-description"> <DialogContentText id="alert-dialog-description">
<Trans i18n="confirm_fiat_received_dialog"> {t("Confirming that you received the fiat will finalize the trade. The satoshis in the escrow will be released to the buyer. Only confirm after the {{currencyCode}} has arrived to your account. In addition, if you have received {{currencyCode}} and do not confirm the receipt, you risk losing your bond.",{currencyCode: this.props.data.currencyCode})}
Confirming that you received the fiat will finalize the trade. The satoshis in the escrow will be released to the buyer. Only confirm after the {{currencyCode: this.props.data.currencyCode}} has arrived to your account. In addition, if you have received {{currencyCode: this.props.data.currencyCode}} and do not confirm the receipt, you risk losing your bond.
</Trans>
</DialogContentText> </DialogContentText>
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>
@ -207,16 +205,14 @@ class TradeBox extends Component {
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
{this.props.data.is_maker ? {this.props.data.is_maker ?
<Typography color="primary" component="subtitle1" variant="subtitle1"> <Typography color="primary" component="subtitle1" variant="subtitle1">
<b><Trans i18nKey="lock_to_publish"> <b>
Lock {{amountSats: pn(this.props.data.bond_satoshis)}} Sats to PUBLISH order {t("Lock {{amountSats}} Sats to PUBLISH order", {amountSats: pn(this.props.data.bond_satoshis)})}
</Trans>
</b> {" " + this.stepXofY()} </b> {" " + this.stepXofY()}
</Typography> </Typography>
: :
<Typography color="primary" component="subtitle1" variant="subtitle1"> <Typography color="primary" component="subtitle1" variant="subtitle1">
<b><Trans i18nKey="lock_to_take"> <b>
Lock {{amountSats: pn(this.props.data.bond_satoshis)}} Sats to TAKE the order {t("Lock {{amountSats}} Sats to TAKE order", {amountSats: pn(this.props.data.bond_satoshis)})}
</Trans>
</b> {" " + this.stepXofY()} </b> {" " + this.stepXofY()}
</Typography> </Typography>
} }
@ -291,10 +287,9 @@ class TradeBox extends Component {
<this.Sound soundFileName="locked-invoice"/> <this.Sound soundFileName="locked-invoice"/>
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
<Typography color="green" component="subtitle1" variant="subtitle1"> <Typography color="green" component="subtitle1" variant="subtitle1">
<b><Trans i18nKey="lock_escrow" > <b>
Lock {{amountSats:pn(this.props.data.escrow_satoshis)}} Sats as collateral {t("Lock {{amountSats}} Sats as collateral", {amountSats:pn(this.props.data.escrow_satoshis)})}
</Trans> </b>{" " + this.stepXofY()}
</b> {" " + this.stepXofY()}
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
@ -312,7 +307,7 @@ class TradeBox extends Component {
size="small" size="small"
defaultValue={this.props.data.escrow_invoice} defaultValue={this.props.data.escrow_invoice}
disabled="true" disabled="true"
helperText={<Trans i18nKey="hold_escrow_invoice_explanation">This is a hold invoice, it will freeze in your wallet. It will be released to the buyer once you confirm to have received the {{currencyCode: this.props.data.currencyCode}}.</Trans>} helperText={t("This is a hold invoice, it will freeze in your wallet. It will be released to the buyer once you confirm to have received the {{currencyCode}}.",{currencyCode: this.props.data.currencyCode})}
color = "secondary" color = "secondary"
/> />
</Grid> </Grid>
@ -416,7 +411,7 @@ class TradeBox extends Component {
<ListItemIcon> <ListItemIcon>
<BookIcon/> <BookIcon/>
</ListItemIcon> </ListItemIcon>
<ListItemText primary={this.props.data.num_similar_orders} secondary={<Trans i18n="public_order_num_subtitle">Public orders for {{currencyCode: this.props.data.currencyCode}} </Trans>}/> <ListItemText primary={this.props.data.num_similar_orders} secondary={t("Public orders for {{currencyCode}}",{currencyCode: this.props.data.currencyCode})}/>
</ListItem> </ListItem>
<Divider/> <Divider/>
@ -425,7 +420,7 @@ class TradeBox extends Component {
<PercentIcon/> <PercentIcon/>
</ListItemIcon> </ListItemIcon>
<ListItemText primary={t("Premium rank") +" "+this.props.data.premium_percentile*100+"%"} <ListItemText primary={t("Premium rank") +" "+this.props.data.premium_percentile*100+"%"}
secondary={<Trans i18n="among_public"> Among public {{ currencyCode: this.props.data.currencyCode }} orders (higher is cheaper)</Trans>} /> secondary={t("Among public {{currencyCode}} orders (higher is cheaper)",{ currencyCode: this.props.data.currencyCode })}/>
</ListItem> </ListItem>
<Divider/> <Divider/>
@ -508,18 +503,18 @@ class TradeBox extends Component {
{/* Make confirmation sound for HTLC received. */} {/* Make confirmation sound for HTLC received. */}
<this.Sound soundFileName="locked-invoice"/> <this.Sound soundFileName="locked-invoice"/>
<Typography color="primary" component="subtitle1" variant="subtitle1"> <Typography color="primary" component="subtitle1" variant="subtitle1">
<b> <Trans i18n="submit_invoice"> <b> {t("Submit an invoice for {{amountSats}} Sats",{amountSats: pn(this.props.data.invoice_amount)})}
Submit an invoice for {{amountSats: pn(this.props.data.invoice_amount)}} Sats
</Trans>
</b> {" " + this.stepXofY()} </b> {" " + this.stepXofY()}
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={12} align="left"> <Grid item xs={12} align="left">
<Typography component="body2" variant="body2"> <Typography component="body2" variant="body2">
<Trans i18n='submit_invoice_body'> {t("The taker is committed! Before letting you send {{amountFiat}} {{currencyCode}}, we want to make sure you are able to receive the BTC. Please provide a valid invoice for {{amountSats}} Satoshis.",
The taker is committed! Before letting you send {{amountFiat: parseFloat(parseFloat(this.props.data.amount).toFixed(4))}} {{currencyCode: this.props.data.currencyCode}}, we want to make sure you are able to receive the BTC. {amountFiat: parseFloat(parseFloat(this.props.data.amount).toFixed(4)),
Please provide a valid invoice for {{amountSats: pn(this.props.data.invoice_amount)}} Satoshis. currencyCode: this.props.data.currencyCode,
</Trans> amountSats: pn(this.props.data.invoice_amount)}
)
}
</Typography> </Typography>
</Grid> </Grid>
@ -766,19 +761,21 @@ handleRatingRobosatsChange=(e)=>{
} }
showFiatSentButton(){ showFiatSentButton(){
const { t } = this.props;
return( return(
<Grid container spacing={1}> <Grid container spacing={1}>
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
<Button defaultValue="confirm" variant='contained' color='secondary' onClick={this.handleClickConfirmButton}><Trans i18n="confirm_fiat_sent">Confirm {{currencyCode: this.props.data.currencyCode}} sent</Trans></Button> <Button defaultValue="confirm" variant='contained' color='secondary' onClick={this.handleClickConfirmButton}>{t("Confirm {{currencyCode}} sent",{currencyCode: this.props.data.currencyCode})}</Button>
</Grid> </Grid>
</Grid> </Grid>
) )
} }
showFiatReceivedButton(){ showFiatReceivedButton(){
const { t } = this.props;
return( return(
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
<Button defaultValue="confirm" variant='contained' color='secondary' onClick={this.handleClickOpenConfirmFiatReceived}><Trans i18n="confirm_fiat_received">Confirm {{currencyCode: this.props.data.currencyCode}} received</Trans></Button> <Button defaultValue="confirm" variant='contained' color='secondary' onClick={this.handleClickOpenConfirmFiatReceived}>{t("Confirm {{currencyCode}} received",{currencyCode: this.props.data.currencyCode})}</Button>
</Grid> </Grid>
) )
} }
@ -844,7 +841,7 @@ handleRatingRobosatsChange=(e)=>{
{this.props.data.is_seller ? {this.props.data.is_seller ?
<Typography component="body2" variant="body2" align="center"> <Typography component="body2" variant="body2" align="center">
{this.props.data.status == 9? {this.props.data.status == 9?
<Trans i18n="say_hi_seller">Say hi! Be helpful and concise. Let them know how to send you {{currencyCode: this.props.data.currencyCode}}.</Trans> t("Say hi! Be helpful and concise. Let them know how to send you {{currencyCode}}.",{currencyCode: this.props.data.currencyCode})
: :
t("The buyer has sent the fiat. Click 'Confirm Received' once you receive it.") t("The buyer has sent the fiat. Click 'Confirm Received' once you receive it.")
} }
@ -976,9 +973,7 @@ handleRatingRobosatsChange=(e)=>{
</Grid> </Grid>
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
<Typography color="primary" component="subtitle1" variant="subtitle1"> <Typography color="primary" component="subtitle1" variant="subtitle1">
<b> <Trans i18n="submit_invoice"> <b> {t("Submit an invoice for {{amountSats}} Sats",{amountSats: pn(this.props.data.invoice_amount)})}</b>
Submit an invoice for {{amountSats: pn(this.props.data.invoice_amount)}} Sats
</Trans></b>
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">

88
frontend/src/components/locales/en/translation.json
View File

@ -63,16 +63,78 @@
"Must be less than {{maxSats}": "Must be less than {{maxSats}}", "Must be less than {{maxSats}": "Must be less than {{maxSats}}",
"Must be more than {{minSats}}": "Must be more than {{minSats}}", "Must be more than {{minSats}}": "Must be more than {{minSats}}",
"ORDER PAGE - OrderPage.js": "Order details page",
"Order Box":"Order Box",
"Contract":"Contract",
"Active":"Active",
"Seen recently":"Seen recently",
"Inactive":"Inactive",
"(Seller)":"(Seller)",
"(Buyer)":"(Buyer)",
"Order maker":"Order maker",
"Order taker":"Order taker",
"Order Details":"Order Details",
"Order status":"Order status",
"Waiting for maker bond":"Waiting for maker bond",
"Public":"Public",
"Waiting for taker bond":"Waiting for taker bond",
"Cancelled":"Cancelled",
"Expired":"Expired",
"Waiting for trade collateral and buyer invoice":"Waiting for trade collateral and buyer invoice",
"Waiting only for seller trade collateral":"Waiting only for seller trade collateral",
"Waiting only for buyer invoice":"Waiting only for buyer invoice",
"Sending fiat - In chatroom":"Sending fiat - In chatroom",
"Fiat sent - In chatroom":"Fiat sent - In chatroom",
"In dispute":"In dispute",
"Collaboratively cancelled":"Collaboratively cancelled",
"Sending satoshis to buyer":"Sending satoshis to buyer",
"Sucessful trade":"Sucessful trade",
"Failed lightning network routing":"Failed lightning network routing",
"Wait for dispute resolution":"Wait for dispute resolution",
"Maker lost dispute":"Maker lost dispute",
"Taker lost dispute":"Taker lost dispute",
"Amount range":"Amount range",
"Swap destination":"Swap destination",
"Accepted payment methods":"Accepted payment methods",
"{{price}} {{currencyCode}}/BTC - Premium: {{premium}}%":"{{price}} {{currencyCode}}/BTC - Premium: {{premium}}%",
"Price and Premium":"Price and Premium",
"Amount of Satoshis":"Amount of Satoshis",
"Premium over market price":"Premium over market price",
"Order ID":"Order ID",
"Expires in":"Expires in",
"{{nickname}} is asking for a collaboratice cancel":"{{nickname}} is asking for a collaboratice cancel",
"You asked for a collaborative cancellation":"You asked for a collaborative cancellation",
"Invoice expired. You did not confirm publishing the order in time. Make a new order.":"Invoice expired. You did not confirm publishing the order in time. Make a new order.",
"Penalty lifted, good to go!":"Penalty lifted, good to go!",
"You cannot take an order yet! Wait {{timeMin}}m {{timeSec}}s":"You cannot take an order yet! Wait {{timeMin}}m {{timeSec}}s",
"Too low":"Too low",
"Too high":"Too high",
"Enter amount of fiat to exchange for bitcoin":"Enter amount of fiat to exchange for bitcoin",
"Amount {{currencyCode}}":"Amount {{currencyCode}}",
"You must specify an amount first":"You must specify an amount first",
"Take Order":"Take Order",
"Wait until you can take an order":"Wait until you can take an order",
"Cancel the order?":"Cancel the order?",
"If the order is cancelled now you will lose your bond.":"If the order is cancelled now you will lose your bond.",
"Confirm Cancel":"Confirm Cancel",
"The maker is away":"The maker is away",
"By taking this order you risk wasting your time. If the maker does not proceed in time, you will be compensated in satoshis for 50% of the maker bond.":"By taking this order you risk wasting your time. If the maker does not proceed in time, you will be compensated in satoshis for 50% of the maker bond.",
"Collaborative cancel the order?":"Collaborative cancel the order?",
"The trade escrow has been posted. The order can be cancelled only if both, maker and taker, agree to cancel.":"The trade escrow has been posted. The order can be cancelled only if both, maker and taker, agree to cancel.",
"Ask for Cancel":"Ask for Cancel",
"Cancel":"Cancel",
"Collaborative Cancel":"Collaborative Cancel",
"CONTRACT BOX - TradeBox.js": "The Contract Box that guides users trough the whole trade pipeline", "CONTRACT BOX - TradeBox.js": "The Contract Box that guides users trough the whole trade pipeline",
"Contract Box":"Contract Box", "Contract Box":"Contract Box",
"Robots show commitment to their peers": "Robots show commitment to their peers", "Robots show commitment to their peers": "Robots show commitment to their peers",
"lock_to_publish": "Lock {{amountSats}} Sats to PUBLISH order ", "Lock {{amountSats}} Sats to PUBLISH order": "Lock {{amountSats}} Sats to PUBLISH order",
"lock_to_take": "Lock {{amountSats}} Sats to TAKE the order ", "Lock {{amountSats}} Sats to TAKE order": "Lock {{amountSats}} Sats to TAKE order",
"lock_escrow": "Lock {{amountSats}} Sats as collateral", "Lock {{amountSats}} Sats as collateral": "Lock {{amountSats}} Sats as collateral",
"Copy to clipboard":"Copy to clipboard", "Copy to clipboard":"Copy to clipboard",
"This is a hold invoice, it will freeze in your wallet. It will be charged only if you cancel or lose a dispute.":"This is a hold invoice, it will freeze in your wallet. It will be charged only if you cancel or lose a dispute.", "This is a hold invoice, it will freeze in your wallet. It will be charged only if you cancel or lose a dispute.":"This is a hold invoice, it will freeze in your wallet. It will be charged only if you cancel or lose a dispute.",
"hold_escrow_invoice_explanation":"This is a hold invoice, it will freeze in your wallet. It will be released to the buyer once you confirm to have received the {{currencyCode}}.", "This is a hold invoice, it will freeze in your wallet. It will be released to the buyer once you confirm to have received the {{currencyCode}}.":"This is a hold invoice, it will freeze in your wallet. It will be released to the buyer once you confirm to have received the {{currencyCode}}.",
"Your maker bond is locked":"Your maker bond is locked", "Your maker bond is locked":"Your maker bond is locked",
"Your taker bond is locked":"Your taker bond is locked", "Your taker bond is locked":"Your taker bond is locked",
"Your maker bond was settled":"Your maker bond was settled", "Your maker bond was settled":"Your maker bond was settled",
@ -88,13 +150,13 @@
"Go back":"Go back", "Go back":"Go back",
"Enable":"Enable", "Enable":"Enable",
"Telegram enabled":"Telegram enabled", "Telegram enabled":"Telegram enabled",
"public_order_num_subtitle": "Public orders for {{currencyCode}}", "Public orders for {{currencyCode}}":"Public orders for {{currencyCode}}",
"Premium rank": "Premium rank", "Premium rank": "Premium rank",
"among_public": "Among public {{currencyCode}} orders (higher is cheaper)", "Among public {{currencyCode}} orders (higher is cheaper)": "Among public {{currencyCode}} orders (higher is cheaper)",
"A taker has been found!":"A taker has been found!", "A taker has been found!":"A taker has been found!",
"Please wait for the taker to lock a bond. If the taker does not lock a bond in time, the order will be made public again.":"Please wait for the taker to lock a bond. If the taker does not lock a bond in time, the order will be made public again.", "Please wait for the taker to lock a bond. If the taker does not lock a bond in time, the order will be made public again.":"Please wait for the taker to lock a bond. If the taker does not lock a bond in time, the order will be made public again.",
"submit_invoice":"Submit an invoice for {{amountSats}} Sats", "Submit an invoice for {{amountSats}} Sats":"Submit an invoice for {{amountSats}} Sats",
"submit_invoice_body":"The taker is committed! Before letting you send {{amountFiat}} {{currencyCode}}, we want to make sure you are able to receive the BTC. Please provide a valid invoice for {{amountSats}} Satoshis.", "The taker is committed! Before letting you send {{amountFiat}} {{currencyCode}}, we want to make sure you are able to receive the BTC. Please provide a valid invoice for {{amountSats}} Satoshis.":"The taker is committed! Before letting you send {{amountFiat}} {{currencyCode}}, we want to make sure you are able to receive the BTC. Please provide a valid invoice for {{amountSats}} Satoshis.",
"Payout Lightning Invoice":"Payout Lightning Invoice", "Payout Lightning Invoice":"Payout Lightning Invoice",
"Your invoice looks good!":"Your invoice looks good!", "Your invoice looks good!":"Your invoice looks good!",
"We are waiting for the seller lock the trade amount.":"We are waiting for the seller lock the trade amount.", "We are waiting for the seller lock the trade amount.":"We are waiting for the seller lock the trade amount.",
@ -102,18 +164,18 @@
"The trade collateral is locked!":"The trade collateral is locked!", "The trade collateral is locked!":"The trade collateral is locked!",
"We are waiting for the buyer to post a lightning invoice. Once he does, you will be able to directly communicate the fiat payment details.":"We are waiting for the buyer to post a lightning invoice. Once he does, you will be able to directly communicate the fiat payment details.", "We are waiting for the buyer to post a lightning invoice. Once he does, you will be able to directly communicate the fiat payment details.":"We are waiting for the buyer to post a lightning invoice. Once he does, you will be able to directly communicate the fiat payment details.",
"Just hang on for a moment. If the buyer does not cooperate, you will get back the trade collateral and your bond automatically. In addition, you will receive a compensation (check the rewards in your profile).":"Just hang on for a moment. If the buyer does not cooperate, you will get back the trade collateral and your bond automatically. In addition, you will receive a compensation (check the rewards in your profile).", "Just hang on for a moment. If the buyer does not cooperate, you will get back the trade collateral and your bond automatically. In addition, you will receive a compensation (check the rewards in your profile).":"Just hang on for a moment. If the buyer does not cooperate, you will get back the trade collateral and your bond automatically. In addition, you will receive a compensation (check the rewards in your profile).",
"confirm_fiat_sent":"Confirm {{currencyCode}} sent", "Confirm {{currencyCode}} sent":"Confirm {{currencyCode}} sent",
"confirm_fiat_received":"Confirm {{currencyCode}} received", "Confirm {{currencyCode}} received":"Confirm {{currencyCode}} received",
"Open Dispute":"Open Dispute", "Open Dispute":"Open Dispute",
"The order has expired":"The order has expired", "The order has expired":"The order has expired",
"Chat with the buyer":"Chat with the buyer", "Chat with the buyer":"Chat with the buyer",
"Chat with the seller":"Chat with the seller", "Chat with the seller":"Chat with the seller",
"say_hi_seller":"Say hi! Be helpful and concise. Let them know how to send you {{currencyCode}}.", "Say hi! Be helpful and concise. Let them know how to send you {{currencyCode}}.":"Say hi! Be helpful and concise. Let them know how to send you {{currencyCode}}.",
"The buyer has sent the fiat. Click 'Confirm Received' once you receive it.":"The buyer has sent the fiat. Click 'Confirm Received' once you receive it.", "The buyer has sent the fiat. Click 'Confirm Received' once you receive it.":"The buyer has sent the fiat. Click 'Confirm Received' once you receive it.",
"Say hi! Ask for payment details and click 'Confirm Sent' as soon as the payment is sent.":"Say hi! Ask for payment details and click 'Confirm Sent' as soon as the payment is sent.", "Say hi! Ask for payment details and click 'Confirm Sent' as soon as the payment is sent.":"Say hi! Ask for payment details and click 'Confirm Sent' as soon as the payment is sent.",
"Wait for the seller to confirm he has received the payment.":"Wait for the seller to confirm he has received the payment.", "Wait for the seller to confirm he has received the payment.":"Wait for the seller to confirm he has received the payment.",
"confirm_fiat_received_title":"Confirm you received {{currencyCode}}?", "Confirm you received {{currencyCode}}?":"Confirm you received {{currencyCode}}?",
"confirm_fiat_received_dialog":"Confirming that you received the fiat will finalize the trade. The satoshis in the escrow will be released to the buyer. Only confirm after the {{currencyCode}} has arrived to your account. In addition, if you have received {{currencyCode}} and do not confirm the receipt, you risk losing your bond.", "Confirming that you received the fiat will finalize the trade. The satoshis in the escrow will be released to the buyer. Only confirm after the {{currencyCode}} has arrived to your account. In addition, if you have received {{currencyCode}} and do not confirm the receipt, you risk losing your bond.":"Confirming that you received the fiat will finalize the trade. The satoshis in the escrow will be released to the buyer. Only confirm after the {{currencyCode}} has arrived to your account. In addition, if you have received {{currencyCode}} and do not confirm the receipt, you risk losing your bond.",
"Confirm":"Confirm", "Confirm":"Confirm",
"🎉Trade finished!🥳":"🎉Trade finished!🥳", "🎉Trade finished!🥳":"🎉Trade finished!🥳",
"rate_robosats":"What do you think of 🤖<1>RoboSats</1>⚡?", "rate_robosats":"What do you think of 🤖<1>RoboSats</1>⚡?",

2
frontend/static/frontend/main.js
View File

File diff suppressed because one or more lines are too long