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

Implement i18n 4/9 MakerPage.

Browse Source
This commit is contained in:
Reckless_Satoshi 2022-04-04 08:41:56 -07:00
parent 95e4f0811a
commit b95d21c8bc
No known key found for this signature in database
GPG Key ID: 9C4585B561315571
3 changed files with 112 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

113
frontend/src/components/MakerPage.js
View File

@ -176,11 +176,14 @@ class MakerPage extends Component {
} }
handlePremiumChange=(e)=>{ handlePremiumChange=(e)=>{
const { t } = this.props;
var max = 999;
var min = -100;
if(e.target.value > 999){ if(e.target.value > 999){
var bad_premium = "Must be less than 999%" var bad_premium = t("Must be less than {{max}}%", {max:max})
} }
if(e.target.value < -100){ if(e.target.value <= -100){
var bad_premium = "Must be more than -100%" var bad_premium = t("Must be more than {{min}}%", {min:min})
} }
this.setState({ this.setState({
@ -190,11 +193,12 @@ class MakerPage extends Component {
} }
handleSatoshisChange=(e)=>{ handleSatoshisChange=(e)=>{
const { t } = this.props;
if(e.target.value > this.maxTradeSats){ if(e.target.value > this.maxTradeSats){
var bad_sats = "Must be less than " + pn(this.maxTradeSats) var bad_sats = t("Must be less than {{maxSats}",{maxSats: pn(this.maxTradeSats)})
} }
if(e.target.value < this.minTradeSats){ if(e.target.value < this.minTradeSats){
var bad_sats = "Must be more than "+pn(this.minTradeSats) var bad_sats = t("Must be more than {{minSats}}",{minSats: pn(this.minTradeSats)})
} }
this.setState({ this.setState({
@ -254,25 +258,26 @@ class MakerPage extends Component {
}; };
StandardMakerOptions = () => { StandardMakerOptions = () => {
const { t } = this.props;
return( return(
<Paper elevation={12} style={{ padding: 8, width:'260px', align:'center'}}> <Paper elevation={12} style={{ padding: 8, width:'260px', align:'center'}}>
<Grid item xs={12} align="center" spacing={1}> <Grid item xs={12} align="center" spacing={1}>
<div style={{position:'relative', left:'5px'}}> <div style={{position:'relative', left:'5px'}}>
<FormControl component="fieldset"> <FormControl component="fieldset">
<FormHelperText> <FormHelperText>
Buy or Sell Bitcoin? {t("Buy or Sell Bitcoin?")}
</FormHelperText> </FormHelperText>
<RadioGroup row defaultValue="0" onChange={this.handleTypeChange}> <RadioGroup row defaultValue="0" onChange={this.handleTypeChange}>
<FormControlLabel <FormControlLabel
value="0" value="0"
control={<Radio color="primary"/>} control={<Radio color="primary"/>}
label="Buy" label={t("Buy")}
labelPlacement="Top" labelPlacement="Top"
/> />
<FormControlLabel <FormControlLabel
value="1" value="1"
control={<Radio color="secondary"/>} control={<Radio color="secondary"/>}
label="Sell" label={t("Sell")}
labelPlacement="Top" labelPlacement="Top"
/> />
</RadioGroup> </RadioGroup>
@ -282,13 +287,13 @@ class MakerPage extends Component {
<Grid containter xs={12} alignItems="stretch" style={{ display: "flex" }}> <Grid containter xs={12} alignItems="stretch" style={{ display: "flex" }}>
<div style={{maxWidth:150}}> <div style={{maxWidth:150}}>
<Tooltip placement="top" enterTouchDelay="500" enterDelay="700" enterNextDelay="2000" title="Amount of fiat to exchange for bitcoin"> <Tooltip placement="top" enterTouchDelay="500" enterDelay="700" enterNextDelay="2000" title={t("Amount of fiat to exchange for bitcoin")}>
<TextField <TextField
disabled = {this.state.enableAmountRange} disabled = {this.state.enableAmountRange}
variant = {this.state.enableAmountRange ? 'filled' : 'outlined'} variant = {this.state.enableAmountRange ? 'filled' : 'outlined'}
error={this.state.amount <= 0 & this.state.amount != "" } error={this.state.amount <= 0 & this.state.amount != "" }
helperText={this.state.amount <= 0 & this.state.amount != "" ? 'Invalid' : null} helperText={this.state.amount <= 0 & this.state.amount != "" ? t("Invalid") : null}
label="Amount" label={t("Amount")}
type="number" type="number"
required="true" required="true"
value={this.state.amount} value={this.state.amount}
@ -318,15 +323,15 @@ class MakerPage extends Component {
</Grid> </Grid>
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
<Tooltip placement="top" enterTouchDelay="300" enterDelay="700" enterNextDelay="2000" title="Enter your preferred fiat payment methods. Fast methods are highly recommended."> <Tooltip placement="top" enterTouchDelay="300" enterDelay="700" enterNextDelay="2000" title={t("Enter your preferred fiat payment methods. Fast methods are highly recommended.")}>
<AutocompletePayments <AutocompletePayments
onAutocompleteChange={this.handlePaymentMethodChange} onAutocompleteChange={this.handlePaymentMethodChange}
optionsType={this.state.currency==1000 ? "swap":"fiat"} optionsType={this.state.currency==1000 ? "swap":"fiat"}
error={this.state.badPaymentMethod} error={this.state.badPaymentMethod}
helperText={this.state.badPaymentMethod ? "Must be shorter than 65 characters":""} helperText={this.state.badPaymentMethod ? t("Must be shorter than 65 characters"):""}
label={this.state.currency==1000 ? "Swap Destination(s)" : "Fiat Payment Method(s)"} label={this.state.currency==1000 ? t("Swap Destination(s)") : t("Fiat Payment Method(s)")}
listHeaderText={"You can add any method"} listHeaderText={t("You can add any method")}
addNewButtonText={"Add New"} addNewButtonText={t("Add New")}
/> />
</Tooltip> </Tooltip>
</Grid> </Grid>
@ -335,25 +340,25 @@ class MakerPage extends Component {
<FormControl component="fieldset"> <FormControl component="fieldset">
<FormHelperText > <FormHelperText >
<div align='center'> <div align='center'>
Choose a Pricing Method {t("Choose a Pricing Method")}
</div> </div>
</FormHelperText> </FormHelperText>
<RadioGroup row defaultValue="relative"> <RadioGroup row defaultValue="relative">
<Tooltip placement="top" enterTouchDelay="0" enterDelay="1000" enterNextDelay="2000" title="Let the price move with the market"> <Tooltip placement="top" enterTouchDelay="0" enterDelay="1000" enterNextDelay="2000" title={t("Let the price move with the market")}>
<FormControlLabel <FormControlLabel
value="relative" value="relative"
control={<Radio color="primary"/>} control={<Radio color="primary"/>}
label="Relative" label={t("Relative")}
labelPlacement="Top" labelPlacement="Top"
onClick={this.handleClickRelative} onClick={this.handleClickRelative}
/> />
</Tooltip> </Tooltip>
<Tooltip placement="top" enterTouchDelay="0" enterDelay="1000" enterNextDelay="2000" title="Set a fix amount of satoshis"> <Tooltip placement="top" enterTouchDelay="0" enterDelay="1000" enterNextDelay="2000" title={t("Set a fix amount of satoshis")}>
<FormControlLabel <FormControlLabel
disabled={this.state.enableAmountRange} disabled={this.state.enableAmountRange}
value="explicit" value="explicit"
control={<Radio color="secondary"/>} control={<Radio color="secondary"/>}
label="Explicit" label={t("Explicit")}
labelPlacement="Top" labelPlacement="Top"
onClick={this.handleClickExplicit} onClick={this.handleClickExplicit}
/> />
@ -366,20 +371,18 @@ class MakerPage extends Component {
<div style={{display: this.state.is_explicit ? '':'none'}}> <div style={{display: this.state.is_explicit ? '':'none'}}>
<TextField <TextField
sx={{width:240}} sx={{width:240}}
label="Satoshis" label={t("Satoshis")}
error={this.state.badSatoshis} error={this.state.badSatoshis}
helperText={this.state.badSatoshis} helperText={this.state.badSatoshis}
type="number" type="number"
required="true" required="true"
value={this.state.satoshis} value={this.state.satoshis}
inputProps={{ inputProps={{
// TODO read these from .env file
min:this.minTradeSats , min:this.minTradeSats ,
max:this.maxTradeSats , max:this.maxTradeSats ,
style: {textAlign:"center"} style: {textAlign:"center"}
}} }}
onChange={this.handleSatoshisChange} onChange={this.handleSatoshisChange}
// defaultValue={this.defaultSatoshis}
/> />
</div> </div>
<div style={{display: this.state.is_explicit ? 'none':''}}> <div style={{display: this.state.is_explicit ? 'none':''}}>
@ -387,9 +390,8 @@ class MakerPage extends Component {
sx={{width:240}} sx={{width:240}}
error={this.state.badPremium} error={this.state.badPremium}
helperText={this.state.badPremium} helperText={this.state.badPremium}
label="Premium over Market (%)" label={t("Premium over Market (%)")}
type="number" type="number"
// defaultValue={this.defaultPremium}
inputProps={{ inputProps={{
min: -100, min: -100,
max: 999, max: 999,
@ -489,10 +491,10 @@ class MakerPage extends Component {
} }
rangeText =()=> { rangeText =()=> {
const { t } = this.props;
return ( return (
<div style={{display:'flex',alignItems:'center', flexWrap:'wrap'}}> <div style={{display:'flex',alignItems:'center', flexWrap:'wrap'}}>
<span style={{width: 40}}>From</span> <span style={{width: 40}}>{t("From")}</span>
<TextField <TextField
variant="standard" variant="standard"
type="number" type="number"
@ -502,7 +504,7 @@ class MakerPage extends Component {
error={this.minAmountError()} error={this.minAmountError()}
sx={{width: this.state.minAmount.toString().length * 9, maxWidth: 40}} sx={{width: this.state.minAmount.toString().length * 9, maxWidth: 40}}
/> />
<span style={{width: 20}}>to</span> <span style={{width: 20}}>{t("to")}</span>
<TextField <TextField
variant="standard" variant="standard"
size="small" size="small"
@ -519,6 +521,7 @@ class MakerPage extends Component {
} }
AdvancedMakerOptions = () => { AdvancedMakerOptions = () => {
const { t } = this.props;
return( return(
<Paper elevation={12} style={{ padding: 8, width:'280px', align:'center'}}> <Paper elevation={12} style={{ padding: 8, width:'280px', align:'center'}}>
@ -527,10 +530,10 @@ class MakerPage extends Component {
<Grid item xs={12} align="center" spacing={1}> <Grid item xs={12} align="center" spacing={1}>
<FormControl align="center"> <FormControl align="center">
<FormHelperText> <FormHelperText>
<Tooltip enterTouchDelay="0" placement="top" align="center"title={"Let the taker chose an amount within the range"}> <Tooltip enterTouchDelay="0" placement="top" align="center" title={t("Let the taker chose an amount within the range")}>
<div align="center" style={{display:'flex',alignItems:'center', flexWrap:'wrap'}}> <div align="center" style={{display:'flex',alignItems:'center', flexWrap:'wrap'}}>
<Checkbox onChange={(e)=>this.setState({enableAmountRange:e.target.checked, is_explicit: false}) & (e.target.checked ? this.getLimits() : null)}/> <Checkbox onChange={(e)=>this.setState({enableAmountRange:e.target.checked, is_explicit: false}) & (e.target.checked ? this.getLimits() : null)}/>
{this.state.enableAmountRange & this.state.minAmount != null? <this.rangeText/> : "Enable Amount Range"} {this.state.enableAmountRange & this.state.minAmount != null? <this.rangeText/> : t("Enable Amount Range")}
</div> </div>
</Tooltip> </Tooltip>
</FormHelperText> </FormHelperText>
@ -580,7 +583,7 @@ class MakerPage extends Component {
</InputAdornment>) </InputAdornment>)
}} }}
renderInput={(props) => <TextField {...props} />} renderInput={(props) => <TextField {...props} />}
label="Public Duration (HH:mm)" label={t("Public Duration (HH:mm)")}
value={this.state.publicExpiryTime} value={this.state.publicExpiryTime}
onChange={this.handleChangePublicDuration} onChange={this.handleChangePublicDuration}
minTime={new Date(0, 0, 0, 0, 10)} minTime={new Date(0, 0, 0, 0, 10)}
@ -591,10 +594,10 @@ class MakerPage extends Component {
<Grid item xs={12} align="center" spacing={1}> <Grid item xs={12} align="center" spacing={1}>
<FormControl align="center"> <FormControl align="center">
<Tooltip enterDelay="800" enterTouchDelay="0" placement="top" title={"Set the skin-in-the-game, increase for higher safety assurance"}> <Tooltip enterDelay="800" enterTouchDelay="0" placement="top" title={t("Set the skin-in-the-game, increase for higher safety assurance")}>
<FormHelperText> <FormHelperText>
<div align="center" style={{display:'flex',flexWrap:'wrap', transform: 'translate(20%, 0)'}}> <div align="center" style={{display:'flex',flexWrap:'wrap', transform: 'translate(20%, 0)'}}>
Fidelity Bond Size <LockIcon sx={{height:20,width:20}}/> {t("Fidelity Bond Size")} <LockIcon sx={{height:20,width:20}}/>
</div> </div>
</FormHelperText> </FormHelperText>
</Tooltip> </Tooltip>
@ -615,9 +618,9 @@ class MakerPage extends Component {
</Grid> </Grid>
<Grid item xs={12} align="center" spacing={1}> <Grid item xs={12} align="center" spacing={1}>
<Tooltip enterTouchDelay="0" title={"COMING SOON - High risk! Limited to "+ this.maxBondlessSats/1000 +"K Sats"}> <Tooltip enterTouchDelay="0" title={t("COMING SOON - High risk! Limited to {{limitSats}}K Sats",{ limitSats: this.maxBondlessSats/1000})}>
<FormControlLabel <FormControlLabel
label={<a>Allow bondless taker (<Link href="https://git.robosats.com" target="_blank">info</Link>)</a>} label={t("Allow bondless takers")}
control={ control={
<Checkbox <Checkbox
disabled disabled
@ -637,7 +640,7 @@ class MakerPage extends Component {
makeOrderBox=()=>{ makeOrderBox=()=>{
const [value, setValue] = React.useState(this.state.showAdvanced); const [value, setValue] = React.useState(this.state.showAdvanced);
const { t } = this.props;
const handleChange = (event, newValue) => { const handleChange = (event, newValue) => {
this.setState({showAdvanced:newValue}) this.setState({showAdvanced:newValue})
setValue(newValue); setValue(newValue);
@ -646,8 +649,8 @@ class MakerPage extends Component {
<Box sx={{width: this.state.showAdvanced? '270px':'252px'}}> <Box sx={{width: this.state.showAdvanced? '270px':'252px'}}>
<Box sx={{ borderBottom: 1, borderColor: 'divider', position:'relative',left:'5px'}}> <Box sx={{ borderBottom: 1, borderColor: 'divider', position:'relative',left:'5px'}}>
<Tabs value={value? value:0} onChange={handleChange} variant="fullWidth" > <Tabs value={value? value:0} onChange={handleChange} variant="fullWidth" >
<Tab label="Order" {...this.a11yProps(0)} /> <Tab label={t("Order")} {...this.a11yProps(0)} />
<Tab label="Customize" {...this.a11yProps(1)} /> <Tab label={t("Customize")} {...this.a11yProps(1)} />
</Tabs> </Tabs>
</Box> </Box>
@ -663,6 +666,7 @@ class MakerPage extends Component {
) )
} }
render() { render() {
const { t } = this.props;
return ( return (
<Grid container xs={12} align="center" spacing={1} sx={{minWidth:380}}> <Grid container xs={12} align="center" spacing={1} sx={{minWidth:380}}>
{/* <Grid item xs={12} align="center" sx={{minWidth:380}}> {/* <Grid item xs={12} align="center" sx={{minWidth:380}}>
@ -682,11 +686,11 @@ class MakerPage extends Component {
(this.state.is_explicit & (this.state.badSatoshis != null || this.state.satoshis == null)) || (this.state.is_explicit & (this.state.badSatoshis != null || this.state.satoshis == null)) ||
(!this.state.is_explicit & this.state.badPremium != null)) (!this.state.is_explicit & this.state.badPremium != null))
? ?
<Tooltip enterTouchDelay="0" title="You must fill the form correctly"> <Tooltip enterTouchDelay="0" title={t("You must fill the order correctly")}>
<div><Button disabled color="primary" variant="contained" onClick={this.handleCreateOfferButtonPressed} >Create Order</Button></div> <div><Button disabled color="primary" variant="contained" onClick={this.handleCreateOfferButtonPressed}>{t("Create Order")}</Button></div>
</Tooltip> </Tooltip>
: :
<Button color="primary" variant="contained" onClick={this.handleCreateOfferButtonPressed} >Create Order</Button> <Button color="primary" variant="contained" onClick={this.handleCreateOfferButtonPressed}>{t("Create Order")}</Button>
} }
</Grid> </Grid>
@ -698,18 +702,31 @@ class MakerPage extends Component {
: ""} : ""}
<Typography component="subtitle2" variant="subtitle2"> <Typography component="subtitle2" variant="subtitle2">
<div align='center'> <div align='center'>
Create a BTC {this.state.type==0 ? "buy":"sell"} order for {this.state.enableAmountRange & this.state.minAmount != null? {this.state.type==0 ?
" "+this.state.minAmount+"-"+this.state.maxAmount : pn(this.state.amount)} {this.state.currencyCode} t("Create a BTC buy order for ")
{this.state.is_explicit ? " of " + pn(this.state.satoshis) + " Satoshis" : :
(this.state.premium == 0 ? " at market price" : t("Create a BTC sell order for ")
(this.state.premium > 0 ? " at a " + this.state.premium + "% premium":" at a " + -this.state.premium + "% discount") }
{this.state.enableAmountRange & this.state.minAmount != null?
this.state.minAmount+"-"+this.state.maxAmount
:
pn(this.state.amount)}
{" " + this.state.currencyCode}
{this.state.is_explicit ?
t(" of {{satoshis}} Satoshis",{satoshis: pn(this.state.satoshis)})
:
(this.state.premium == 0 ? t(" at market price") :
(this.state.premium > 0 ?
t(" at a {{premium}}% premium", {premium: this.state.premium})
:
t(" at a {{discount}}% discount", {discount: -this.state.premium}))
) )
} }
</div> </div>
</Typography> </Typography>
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
<Button color="secondary" variant="contained" to="/" component={LinkRouter}> <Button color="secondary" variant="contained" to="/" component={LinkRouter}>
Back {t("Back")}
</Button> </Button>
</Grid> </Grid>
</Grid> </Grid>

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

@ -18,6 +18,52 @@
"Info":"Info", "Info":"Info",
"View Book":"View Book", "View Book":"View Book",
"MAKER PAGE - MakerPage.js": "This is the page where users can create new orders",
"Order":"Order",
"Customize":"Customize",
"Buy or Sell Bitcoin?":"Buy or Sell Bitcoin?",
"Buy":"Buy",
"Sell":"Sell",
"Amount":"Amount",
"Amount of fiat to exchange for bitcoin":"Amount of fiat to exchange for bitcoin",
"Invalid":"Invalid",
"Enter your preferred fiat payment methods. Fast methods are highly recommended.":"Enter your preferred fiat payment methods. Fast methods are highly recommended.",
"Must be shorter than 65 characters":"Must be shorter than 65 characters",
"Swap Destination(s)":"Swap Destination(s)",
"Fiat Payment Method(s)":"Fiat Payment Method(s)",
"You can add any method":"You can add any method",
"Add New":"Add New",
"Choose a Pricing Method":"Choose a Pricing Method",
"Relative":"Relative",
"Let the price move with the market":"Let the price move with the market",
"Premium over Market (%)":"Premium over Market (%)",
"Explicit":"Explicit",
"Set a fix amount of satoshis":"Set a fix amount of satoshis",
"Satoshis":"Satoshis",
"Let the taker chose an amount within the range":"Let the taker chose an amount within the range",
"Enable Amount Range":"Enable Amount Range",
"From": "From",
"to":"to",
"Public Duration (HH:mm)":"Public Duration (HH:mm)",
"Set the skin-in-the-game, increase for higher safety assurance":"Set the skin-in-the-game, increase for higher safety assurance",
"Fidelity Bond Size":"Fidelity Bond Size",
"Allow bondless takers":"Allow bondless takers",
"COMING SOON - High risk! Limited to {{limitSats}}K Sats":"COMING SOON - High risk! Limited to {{limitSats}}K Sats",
"You must fill the order correctly":"You must fill the order correctly",
"Create Order":"Create Order",
"Back":"Back",
"Create a BTC buy order for ":"Create a BTC buy order for ",
"Create a BTC sell order for ":"Create a BTC sell order for ",
" of {{satoshis}} Satoshis":" of {{satoshis}} Satoshis",
" at market price":" at market price",
" at a {{premium}}% premium":" at a {{premium}}% premium",
" at a {{discount}}% discount":" at a {{discount}}% discount",
"Must be less than {{max}}%":"Must be less than {{max}}%",
"Must be more than {{min}}%":"Must be more than {{min}}%",
"Must be less than {{maxSats}": "Must be less than {{maxSats}}",
"Must be more than {{minSats}}": "Must be more than {{minSats}}",
"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",

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

File diff suppressed because one or more lines are too long