mirror of
https://github.com/RoboSats/robosats.git
synced 2024-12-14 19:36:24 +00:00
Add dark mode, text input for amount range, basic/advance tabs
This commit is contained in:
Reckless_Satoshi
parent
7a90c232a5
commit
5ee28f9564
@ -1,9 +1,13 @@
|
||||
import React, { Component } from "react";
|
||||
import { render } from "react-dom";
|
||||
import HomePage from "./HomePage";
|
||||
import { CssBaseline, IconButton} from "@mui/material";
|
||||
import { ThemeProvider, createTheme } from '@mui/material/styles';
|
||||
import UnsafeAlert from "./UnsafeAlert";
|
||||
|
||||
import DarkModeIcon from '@mui/icons-material/DarkMode';
|
||||
import LightModeIcon from '@mui/icons-material/LightMode';
|
||||
|
||||
export default class App extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
@ -25,7 +29,7 @@ export default class App extends Component {
|
||||
palette: {
|
||||
mode: 'dark',
|
||||
background: {
|
||||
default: "#222222"
|
||||
default: "#070707"
|
||||
},
|
||||
},
|
||||
});
|
||||
@ -33,6 +37,10 @@ export default class App extends Component {
|
||||
render() {
|
||||
return (
|
||||
<ThemeProvider theme={this.state.dark ? this.darkTheme : this.lightTheme}>
|
||||
<CssBaseline/>
|
||||
<IconButton sx={{position:'fixed',right:'0px'}} onClick={()=>this.setState({dark:!this.state.dark})}>
|
||||
{this.state.dark ? <LightModeIcon/>:<DarkModeIcon/>}
|
||||
</IconButton>
|
||||
<UnsafeAlert className="unsafeAlert"/>
|
||||
<HomePage setAppState={this.setAppState}/>
|
||||
</ThemeProvider>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React, { Component } from 'react'
|
||||
import {FormControlLabel, Switch, CircularProgress, Badge, Tooltip, TextField, ListItemAvatar, Button, Avatar,Paper, Grid, IconButton, Typography, Select, MenuItem, List, ListItemText, ListItem, ListItemIcon, ListItemButton, Divider, Dialog, DialogContent} from "@mui/material";
|
||||
import {FormControlLabel, Link, Switch, CircularProgress, Badge, Tooltip, TextField, ListItemAvatar, Button, Avatar,Paper, Grid, IconButton, Typography, Select, MenuItem, List, ListItemText, ListItem, ListItemIcon, ListItemButton, Divider, Dialog, DialogContent} from "@mui/material";
|
||||
import MediaQuery from 'react-responsive'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { Link as LinkRouter } from 'react-router-dom'
|
||||
|
||||
// Icons
|
||||
import SettingsIcon from '@mui/icons-material/Settings';
|
||||
@ -90,8 +90,8 @@ export default class BottomBar extends Component {
|
||||
this.setState(null)
|
||||
fetch('/api/info/')
|
||||
.then((response) => response.json())
|
||||
.then((data) => this.setState(data) &
|
||||
this.props.setAppState({nickname:data.nickname, loading:false}));
|
||||
.then((data) => this.setState(data) & this.setState({active_order_id: data.active_order_id ? data.active_order_id : null})
|
||||
& this.props.setAppState({nickname:data.nickname, loading:false}));
|
||||
}
|
||||
|
||||
handleClickOpenStatsForNerds = () => {
|
||||
@ -125,18 +125,18 @@ export default class BottomBar extends Component {
|
||||
<ListItem>
|
||||
<ListItemIcon><DnsIcon/></ListItemIcon>
|
||||
<ListItemText secondary={this.state.node_alias}>
|
||||
<a target="_blank" href={"https://1ml.com/testnet/node/"
|
||||
<Link target="_blank" href={"https://1ml.com/testnet/node/"
|
||||
+ this.state.node_id}>{this.state.node_id.slice(0, 12)+"... (1ML)"}
|
||||
</a>
|
||||
</Link>
|
||||
</ListItemText>
|
||||
</ListItem>
|
||||
:
|
||||
<ListItem>
|
||||
<ListItemIcon><AmbossIcon/></ListItemIcon>
|
||||
<ListItemText secondary={this.state.node_alias}>
|
||||
<a target="_blank" href={"https://amboss.space/node/"
|
||||
<Link target="_blank" href={"https://amboss.space/node/"
|
||||
+ this.state.node_id}>{this.state.node_id.slice(0, 12)+"... (AMBOSS)"}
|
||||
</a>
|
||||
</Link>
|
||||
</ListItemText>
|
||||
</ListItem>
|
||||
}
|
||||
@ -145,8 +145,8 @@ export default class BottomBar extends Component {
|
||||
<ListItem>
|
||||
<ListItemIcon><WebIcon/></ListItemIcon>
|
||||
<ListItemText secondary={this.state.alternative_name}>
|
||||
<a target="_blank" href={"http://"+this.state.alternative_site}>{this.state.alternative_site.slice(0, 12)+"...onion"}
|
||||
</a>
|
||||
<Link target="_blank" href={"http://"+this.state.alternative_site}>{this.state.alternative_site.slice(0, 12)+"...onion"}
|
||||
</Link>
|
||||
</ListItemText>
|
||||
</ListItem>
|
||||
|
||||
@ -154,9 +154,9 @@ export default class BottomBar extends Component {
|
||||
<ListItem>
|
||||
<ListItemIcon><GitHubIcon/></ListItemIcon>
|
||||
<ListItemText secondary="Currently running commit hash">
|
||||
<a target="_blank" href={"https://github.com/Reckless-Satoshi/robosats/tree/"
|
||||
<Link target="_blank" href={"https://github.com/Reckless-Satoshi/robosats/tree/"
|
||||
+ this.state.robosats_running_commit_hash}>{this.state.robosats_running_commit_hash.slice(0, 12)+"..."}
|
||||
</a>
|
||||
</Link>
|
||||
</ListItemText>
|
||||
</ListItem>
|
||||
|
||||
@ -305,8 +305,7 @@ export default class BottomBar extends Component {
|
||||
|
||||
<Divider/>
|
||||
{this.state.active_order_id ?
|
||||
// TODO Link to router and do this.props.history.push
|
||||
<ListItemButton onClick={this.handleClickCloseProfile} to={'/order/'+this.state.active_order_id} component={Link}>
|
||||
<ListItemButton onClick={this.handleClickCloseProfile} to={'/order/'+this.state.active_order_id} component={LinkRouter}>
|
||||
<ListItemIcon>
|
||||
<Badge badgeContent="" color="primary">
|
||||
<NumbersIcon color="primary"/>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React, { Component } from 'react';
|
||||
import {Button, Badge, TextField, Grid, Container, Card, CardHeader, Paper, Avatar, FormHelperText, Typography} from "@mui/material";
|
||||
import {Button, Link, Badge, TextField, Grid, Container, Card, CardHeader, Paper, Avatar, FormHelperText, Typography} from "@mui/material";
|
||||
import ReconnectingWebSocket from 'reconnecting-websocket';
|
||||
|
||||
export default class Chat extends Component {
|
||||
@ -160,7 +160,7 @@ export default class Chat extends Component {
|
||||
</Grid>
|
||||
</form>
|
||||
<FormHelperText>
|
||||
The chat has no memory: if you leave, messages are lost. <a target="_blank" href="https://github.com/Reckless-Satoshi/robosats/blob/main/docs/sensitive-data-PGP-guide.md/"> Learn easy PGP encryption.</a>
|
||||
The chat has no memory: if you leave, messages are lost. <Link target="_blank" href="https://github.com/Reckless-Satoshi/robosats/blob/main/docs/sensitive-data-PGP-guide.md/"> Learn easy PGP encryption.</Link>
|
||||
</FormHelperText>
|
||||
</Container>
|
||||
)
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
|
||||
import {Typography, DialogActions, DialogContent, Button, Grid} from "@mui/material"
|
||||
import {Typography, Link, DialogActions, DialogContent, Button, Grid} from "@mui/material"
|
||||
import React, { Component } from 'react'
|
||||
import Image from 'material-ui-image'
|
||||
import MediaQuery from 'react-responsive'
|
||||
@ -18,8 +18,8 @@ export default class InfoDialog extends Component {
|
||||
<p>It is a BTC/FIAT peer-to-peer exchange over lightning. <br/> It simplifies
|
||||
matchmaking and minimizes the need of trust. RoboSats focuses in privacy and speed.</p>
|
||||
|
||||
<p>RoboSats is an open source project <a
|
||||
href='https://github.com/reckless-satoshi/robosats'>(GitHub).</a>
|
||||
<p>RoboSats is an open source project <Link
|
||||
href='https://github.com/reckless-satoshi/robosats'>(GitHub).</Link>
|
||||
</p>
|
||||
</Typography>
|
||||
</Grid>
|
||||
@ -43,8 +43,8 @@ export default class InfoDialog extends Component {
|
||||
width='100%'
|
||||
src={window.location.origin +'/static/assets/images/robosats_0.1.0_banner.png'}
|
||||
/>
|
||||
<p>RoboSats is an open source project <a
|
||||
href='https://github.com/reckless-satoshi/robosats'>(GitHub).</a>
|
||||
<p>RoboSats is an open source project <Link
|
||||
href='https://github.com/reckless-satoshi/robosats'>(GitHub).</Link>
|
||||
</p>
|
||||
</Typography>
|
||||
</MediaQuery>
|
||||
@ -62,8 +62,8 @@ export default class InfoDialog extends Component {
|
||||
<p>At no point, AnonymousAlice01 and BafflingBob02 have to trust the
|
||||
bitcoin funds to each other. In case they have a conflict, <i>RoboSats</i> staff
|
||||
will help resolving the dispute. You can find a step-by-step
|
||||
description of the trade pipeline in <a href='https://github.com/Reckless-Satoshi/robosats/blob/main/README.md#how-it-works'>How it works</a>
|
||||
You can also check the full guide in <a href='https://github.com/Reckless-Satoshi/robosats/blob/main/docs/how-to-use.md'>How to use</a></p>
|
||||
description of the trade pipeline in <Link href='https://github.com/Reckless-Satoshi/robosats/blob/main/README.md#how-it-works'>How it works</Link>
|
||||
You can also check the full guide in <Link href='https://github.com/Reckless-Satoshi/robosats/blob/main/docs/how-to-use.md'>How to use</Link></p>
|
||||
</Typography>
|
||||
|
||||
<Typography component="h5" variant="h5">What payment methods are accepted?</Typography>
|
||||
@ -120,8 +120,8 @@ export default class InfoDialog extends Component {
|
||||
time. For large amounts use an onchain escrow service such as <i>Bisq</i>
|
||||
</p>
|
||||
|
||||
<p> You can build more trust on <i>RoboSats</i> by <a href='https://github.com/reckless-satoshi/robosats'>
|
||||
inspecting the source code. </a> </p>
|
||||
<p> You can build more trust on <i>RoboSats</i> by <Link href='https://github.com/reckless-satoshi/robosats'>
|
||||
inspecting the source code. </Link> </p>
|
||||
</Typography>
|
||||
|
||||
<Typography component="h5" variant="h5">What happens if <i>RoboSats</i> suddenly disappears?</Typography>
|
||||
@ -149,8 +149,8 @@ export default class InfoDialog extends Component {
|
||||
<Typography component="body2" variant="body2">
|
||||
<p> This lightning application is provided as is. It is in active
|
||||
development: trade with the utmost caution. There is no private
|
||||
support. Support is only offered via public channels <a href='https://t.me/robosats'>
|
||||
(Telegram)</a>. <i>RoboSats</i> will never contact you. <i>
|
||||
support. Support is only offered via public channels <Link href='https://t.me/robosats'>
|
||||
(Telegram)</Link>. <i>RoboSats</i> will never contact you. <i>
|
||||
RoboSats</i> will definitely never ask for your robot token.
|
||||
</p>
|
||||
</Typography>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import React, { Component } from 'react';
|
||||
import { LinearProgress, Checkbox, Slider, SliderThumb, Switch, Tooltip, Paper, Button , Grid, Typography, TextField, Select, FormHelperText, MenuItem, FormControl, Radio, FormControlLabel, RadioGroup} from "@mui/material"
|
||||
import { LinearProgress, Link, Checkbox, Slider, Box, Tab, Tabs, SliderThumb, Tooltip, Paper, Button , Grid, Typography, TextField, Select, FormHelperText, MenuItem, FormControl, Radio, FormControlLabel, RadioGroup} from "@mui/material"
|
||||
import { LocalizationProvider, TimePicker} from '@mui/lab';
|
||||
import DateFnsUtils from "@date-io/date-fns";
|
||||
import { Link } from 'react-router-dom'
|
||||
import { Link as LinkRouter } from 'react-router-dom'
|
||||
import { styled } from '@mui/material/styles';
|
||||
import getFlags from './getFlags'
|
||||
|
||||
@ -79,10 +79,17 @@ export default class MakerPage extends Component {
|
||||
limits:data,
|
||||
loadingLimits:false,
|
||||
minAmount: parseFloat(Number(data[this.state.currency]['max_amount']*0.25).toPrecision(2)),
|
||||
maxAmount: parseFloat(Number(data[this.state.currency]['max_amount']*0.75).toPrecision(2)),
|
||||
maxAmount: this.state.amount ? this.state.amount : parseFloat(Number(data[this.state.currency]['max_amount']*0.75).toPrecision(2)),
|
||||
}));
|
||||
}
|
||||
|
||||
a11yProps(index) {
|
||||
return {
|
||||
id: `simple-tab-${index}`,
|
||||
'aria-controls': `simple-tabpanel-${index}`,
|
||||
};
|
||||
}
|
||||
|
||||
handleTypeChange=(e)=>{
|
||||
this.setState({
|
||||
type: e.target.value,
|
||||
@ -105,6 +112,16 @@ export default class MakerPage extends Component {
|
||||
amount: e.target.value,
|
||||
});
|
||||
}
|
||||
handleMinAmountChange=(e)=>{
|
||||
this.setState({
|
||||
minAmount: parseFloat(Number(e.target.value).toPrecision(e.target.value < 100 ? 2 : 3)),
|
||||
});
|
||||
}
|
||||
handleMaxAmountChange=(e)=>{
|
||||
this.setState({
|
||||
maxAmount: parseFloat(Number(e.target.value).toPrecision(e.target.value < 100 ? 2 : 3)),
|
||||
});
|
||||
}
|
||||
|
||||
handleRangeAmountChange = (e, newValue, activeThumb) => {
|
||||
var maxAmount = this.getMaxAmount();
|
||||
@ -136,8 +153,8 @@ export default class MakerPage extends Component {
|
||||
}
|
||||
|
||||
this.setState({
|
||||
minAmount: parseFloat(Number(lowerValue).toPrecision(2)),
|
||||
maxAmount: parseFloat(Number(upperValue).toPrecision(2)),
|
||||
minAmount: parseFloat(Number(lowerValue).toPrecision(lowerValue < 100 ? 2 : 3)),
|
||||
maxAmount: parseFloat(Number(upperValue).toPrecision(upperValue < 100 ? 2 : 3)),
|
||||
});
|
||||
}
|
||||
|
||||
@ -235,7 +252,7 @@ export default class MakerPage extends Component {
|
||||
|
||||
StandardMakerOptions = () => {
|
||||
return(
|
||||
<Paper elevation={12} style={{ padding: 8, width:240, align:'center'}}>
|
||||
<Paper elevation={12} style={{ padding: 8, width:'260px', align:'center'}}>
|
||||
<Grid item xs={12} align="center" spacing={1}>
|
||||
<FormControl component="fieldset">
|
||||
<FormHelperText>
|
||||
@ -257,6 +274,7 @@ export default class MakerPage extends Component {
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
|
||||
<Grid containter xs={12} alignItems="stretch" style={{ display: "flex" }}>
|
||||
<div style={{maxWidth:140}}>
|
||||
<Tooltip placement="top" enterTouchDelay="500" enterDelay="700" enterNextDelay="2000" title="Amount of fiat to exchange for bitcoin">
|
||||
@ -461,9 +479,36 @@ export default class MakerPage extends Component {
|
||||
);
|
||||
}
|
||||
|
||||
rangeText =()=> {
|
||||
return (
|
||||
<div style={{display:'flex',alignItems:'center', flexWrap:'wrap'}}>
|
||||
<span style={{width: 40}}>From</span>
|
||||
<TextField
|
||||
variant="standard"
|
||||
size="small"
|
||||
value={this.state.minAmount}
|
||||
onChange={this.handleMinAmountChange}
|
||||
error={this.state.minAmount < this.getMinAmount()}
|
||||
sx={{width: this.state.minAmount.toString().length * 10, maxWidth: 40}}
|
||||
/>
|
||||
<span style={{width: 20}}>to</span>
|
||||
<TextField
|
||||
variant="standard"
|
||||
size="small"
|
||||
value={this.state.maxAmount}
|
||||
error={this.state.maxAmount > this.getMaxAmount()}
|
||||
onChange={this.handleMaxAmountChange}
|
||||
sx={{width: this.state.maxAmount.toString().length * 10, maxWidth: 50}}
|
||||
/>
|
||||
<span>{this.state.currencyCode}</span>
|
||||
</div>
|
||||
)
|
||||
|
||||
}
|
||||
|
||||
AdvancedMakerOptions = () => {
|
||||
return(
|
||||
<Paper elevation={12} style={{ padding: 8, width:250, align:'center'}}>
|
||||
<Paper elevation={12} style={{ padding: 8, width:'280px', align:'center'}}>
|
||||
|
||||
<Grid container xs={12} spacing={1}>
|
||||
|
||||
@ -473,8 +518,7 @@ export default class MakerPage extends Component {
|
||||
<Tooltip enterTouchDelay="0" placement="top" align="center"title={"Let the taker chose an amount within the range"}>
|
||||
<div align="center" style={{display:'flex',alignItems:'center', flexWrap:'wrap'}}>
|
||||
<Checkbox onChange={(e)=>this.setState({enableAmountRange:e.target.checked}) & (e.target.checked ? this.getLimits() : null)}/>
|
||||
{this.state.enableAmountRange & this.state.minAmount != null?
|
||||
"From "+this.state.minAmount+" to "+this.state.maxAmount +" "+this.state.currencyCode: "Enable Amount Range"}
|
||||
{this.state.enableAmountRange & this.state.minAmount != null? <this.rangeText/> : "Enable Amount Range"}
|
||||
</div>
|
||||
</Tooltip>
|
||||
</FormHelperText>
|
||||
@ -487,10 +531,10 @@ export default class MakerPage extends Component {
|
||||
sx={{width:200, align:"center"}}
|
||||
disabled={!this.state.enableAmountRange || this.state.loadingLimits}
|
||||
value={[this.state.minAmount, this.state.maxAmount]}
|
||||
step={(this.getMaxAmount()-this.getMinAmount())/100}
|
||||
step={(this.getMaxAmount()-this.getMinAmount())/5000}
|
||||
valueLabelDisplay="auto"
|
||||
components={{ Thumb: this.RangeThumbComponent }}
|
||||
valueLabelFormat={(x) => (parseFloat(Number(x).toPrecision(2))+" "+this.state.currencyCode)}
|
||||
valueLabelFormat={(x) => (parseFloat(Number(x).toPrecision(x < 100 ? 2 : 3))+" "+this.state.currencyCode)}
|
||||
marks={this.state.limits == null?
|
||||
null
|
||||
:
|
||||
@ -507,6 +551,7 @@ export default class MakerPage extends Component {
|
||||
<Grid item xs={12} align="center" spacing={1}>
|
||||
<LocalizationProvider dateAdapter={DateFnsUtils}>
|
||||
<TimePicker
|
||||
sx={{width:210, align:"center"}}
|
||||
ampm={false}
|
||||
openTo="hours"
|
||||
views={['hours', 'minutes']}
|
||||
@ -550,7 +595,7 @@ export default class MakerPage extends Component {
|
||||
<Grid item xs={12} align="center" spacing={1}>
|
||||
<Tooltip enterTouchDelay="0" title={"COMING SOON - High risk! Limited to "+ this.maxBondlessSats/1000 +"K Sats"}>
|
||||
<FormControlLabel
|
||||
label={<a>Allow bondless taker (<a href="https://git.robosats.com" target="_blank">info</a>)</a>}
|
||||
label={<a>Allow bondless taker (<Link href="https://git.robosats.com" target="_blank">info</Link>)</a>}
|
||||
control={
|
||||
<Checkbox
|
||||
disabled
|
||||
@ -567,30 +612,22 @@ export default class MakerPage extends Component {
|
||||
</Paper>
|
||||
)
|
||||
}
|
||||
render() {
|
||||
|
||||
makeOrderBox=()=>{
|
||||
const [value, setValue] = React.useState(this.state.showAdvanced);
|
||||
|
||||
const handleChange = (event, newValue) => {
|
||||
this.setState({showAdvanced:newValue})
|
||||
setValue(newValue);
|
||||
};
|
||||
return(
|
||||
<Grid container xs={12} align="center" spacing={1} sx={{minWidth:380}}>
|
||||
{/* <Grid item xs={12} align="center" sx={{minWidth:380}}>
|
||||
<Typography component="h4" variant="h4">
|
||||
ORDER MAKER
|
||||
</Typography>
|
||||
</Grid> */}
|
||||
<Grid item xs={12} align="center">
|
||||
<div className="advancedSwitch">
|
||||
{/* <Tooltip enterTouchDelay="0" title="Coming soon"> */}
|
||||
<FormControlLabel
|
||||
size="small"
|
||||
disableTypography={true}
|
||||
label={<Typography variant="body2">Advanced</Typography>}
|
||||
labelPlacement="start" control={
|
||||
<Switch
|
||||
size="small"
|
||||
checked={this.state.showAdvanced}
|
||||
onChange={()=> this.setState({showAdvanced: !this.state.showAdvanced})}/>}
|
||||
/>
|
||||
{/* </Tooltip> */}
|
||||
</div>
|
||||
</Grid>
|
||||
<Box sx={{ width: this.state.showAdvanced? '275px':'252px'}}>
|
||||
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
|
||||
<Tabs value={value? value:0} onChange={handleChange} variant="fullWidth" >
|
||||
<Tab label="Basic" {...this.a11yProps(0)} />
|
||||
<Tab label="Advanced" {...this.a11yProps(1)} />
|
||||
</Tabs>
|
||||
</Box>
|
||||
|
||||
<Grid item xs={12} align="center" spacing={1}>
|
||||
<div style={{ display: this.state.showAdvanced == false ? '':'none'}}>
|
||||
@ -600,10 +637,25 @@ export default class MakerPage extends Component {
|
||||
<this.AdvancedMakerOptions/>
|
||||
</div>
|
||||
</Grid>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
render() {
|
||||
|
||||
return (
|
||||
<Grid container xs={12} align="center" spacing={1} sx={{minWidth:380}}>
|
||||
{/* <Grid item xs={12} align="center" sx={{minWidth:380}}>
|
||||
<Typography component="h4" variant="h4">
|
||||
ORDER MAKER
|
||||
</Typography>
|
||||
</Grid> */}
|
||||
<Grid item xs={12} align="center">
|
||||
<this.makeOrderBox/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} align="center">
|
||||
{/* conditions to disable the make button */}
|
||||
{(this.state.amount == null & (this.state.enableAmountRange == false & this.state.minAmount != null) ||
|
||||
{(this.state.amount == null & (this.state.enableAmountRange == false & this.state.minAmount == null) ||
|
||||
this.state.amount <= 0 & !this.state.enableAmountRange ||
|
||||
(this.state.is_explicit & (this.state.badSatoshis != null || this.state.satoshis == null)) ||
|
||||
(!this.state.is_explicit & this.state.badPremium != null))
|
||||
@ -634,7 +686,7 @@ export default class MakerPage extends Component {
|
||||
</div>
|
||||
</Typography>
|
||||
<Grid item xs={12} align="center">
|
||||
<Button color="secondary" variant="contained" to="/" component={Link}>
|
||||
<Button color="secondary" variant="contained" to="/" component={LinkRouter}>
|
||||
Back
|
||||
</Button>
|
||||
</Grid>
|
||||
|
||||
@ -131,7 +131,7 @@ export default class OrderPage extends Component {
|
||||
return (<span> The order has expired</span>);
|
||||
|
||||
} else {
|
||||
var col = 'black'
|
||||
var col = 'inherit'
|
||||
var fraction_left = (total/1000) / this.state.total_secs_exp
|
||||
// Make orange at 25% of time left
|
||||
if (fraction_left < 0.25){col = 'orange'}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React, { Component } from "react";
|
||||
import { IconButton, Paper, Rating, Button, Tooltip, CircularProgress, Grid, Typography, TextField, List, ListItem, ListItemText, Divider, ListItemIcon, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle} from "@mui/material"
|
||||
import { IconButton, Link, Paper, Rating, Button, Tooltip, CircularProgress, Grid, Typography, TextField, List, ListItem, ListItemText, Divider, ListItemIcon, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle} from "@mui/material"
|
||||
import QRCode from "react-qr-code";
|
||||
import Countdown, { zeroPad} from 'react-countdown';
|
||||
import Chat from "./Chat"
|
||||
@ -910,7 +910,7 @@ handleRatingRobosatsChange=(e)=>{
|
||||
<Typography component="body2" variant="body2" align="center">
|
||||
<p><b>Thank you for using Robosats!</b></p>
|
||||
<p>Let us know how the platform could improve
|
||||
(<a href="https://t.me/robosats">Telegram</a> / <a href="https://github.com/Reckless-Satoshi/robosats/issues">Github</a>)</p>
|
||||
(<Link href="https://t.me/robosats">Telegram</Link> / <Link href="https://github.com/Reckless-Satoshi/robosats/issues">Github</Link>)</p>
|
||||
</Typography>
|
||||
</Grid>
|
||||
: null}
|
||||
@ -970,8 +970,8 @@ handleRatingRobosatsChange=(e)=>{
|
||||
<Grid item xs={12} align="center">
|
||||
<Typography component="body2" variant="body2" align="center">
|
||||
Your invoice has expired or more than 3 payment attempts have been made.
|
||||
Muun wallet is not recommended, <a href="https://github.com/Reckless-Satoshi/robosats/issues/44">check the list of
|
||||
compatible wallets</a>
|
||||
Muun wallet is not recommended, <Link href="https://github.com/Reckless-Satoshi/robosats/issues/44">check the list of
|
||||
compatible wallets</Link>
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={12} align="center">
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
|
||||
import {Paper, Alert, AlertTitle, Button, Grid, Typography} from "@mui/material"
|
||||
import {Paper, Alert, AlertTitle, Button, Link} from "@mui/material"
|
||||
import React, { Component } from 'react'
|
||||
import MediaQuery from 'react-responsive'
|
||||
|
||||
@ -28,22 +28,22 @@ export default class UnsafeAlert extends Component {
|
||||
<div>
|
||||
<MediaQuery minWidth={800}>
|
||||
<Paper elevation={6} className="alertUnsafe">
|
||||
<Alert severity="warning" sx={{maxHeight:100}}
|
||||
<Alert severity="warning" sx={{maxHeight:"100px"}}
|
||||
action={<Button onClick={() => this.setState({show:false})}>Hide</Button>}
|
||||
>
|
||||
<AlertTitle>You are not using RoboSats privately</AlertTitle>
|
||||
Some features are disabled for your protection (e.g. chat) and you will not be able to complete a
|
||||
trade without them. To protect your privacy and fully enable RoboSats, use <a href='https://www.torproject.org/download/' target="_blank">Tor Browser</a> and visit the <a href='http://robosats6tkf3eva7x2voqso3a5wcorsnw34jveyxfqi2fu7oyheasid.onion' target="_blank">Onion</a> site.
|
||||
trade without them. To protect your privacy and fully enable RoboSats, use <Link href='https://www.torproject.org/download/' target="_blank">Tor Browser</Link> and visit the <Link chref='http://robosats6tkf3eva7x2voqso3a5wcorsnw34jveyxfqi2fu7oyheasid.onion' target="_blank">Onion</Link> site.
|
||||
</Alert>
|
||||
</Paper>
|
||||
</MediaQuery>
|
||||
|
||||
<MediaQuery maxWidth={799}>
|
||||
<Paper elevation={6} className="alertUnsafe">
|
||||
<Alert severity="warning" sx={{maxHeight:100}}>
|
||||
<Alert severity="warning" sx={{maxHeight:"120px"}}>
|
||||
<AlertTitle>You are not using RoboSats privately</AlertTitle>
|
||||
You will not be able to complete a
|
||||
trade. Use <a href='https://www.torproject.org/download/' target="_blank">Tor Browser</a> and visit the <a href='http://robosats6tkf3eva7x2voqso3a5wcorsnw34jveyxfqi2fu7oyheasid.onion' target="_blank">Onion</a> site.
|
||||
trade. Use <Link href='https://www.torproject.org/download/' target="_blank">Tor Browser</Link> and visit the <Link chref='http://robosats6tkf3eva7x2voqso3a5wcorsnw34jveyxfqi2fu7oyheasid.onion' target="_blank">Onion</Link> site.
|
||||
<div style={{width: '100%'}}>
|
||||
</div>
|
||||
<div align="center">
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -242,6 +242,10 @@
|
||||
!*** ./node_modules/@mui/material/Grow/Grow.js ***!
|
||||
\*************************************************/
|
||||
|
||||
/*!*************************************************!*\
|
||||
!*** ./node_modules/@mui/material/Link/Link.js ***!
|
||||
\*************************************************/
|
||||
|
||||
/*!*************************************************!*\
|
||||
!*** ./node_modules/@mui/material/List/List.js ***!
|
||||
\*************************************************/
|
||||
@ -662,6 +666,10 @@
|
||||
!*** ./node_modules/webrtc-adapter/src/js/utils.js ***!
|
||||
\*****************************************************/
|
||||
|
||||
/*!******************************************************!*\
|
||||
!*** ./node_modules/@mui/icons-material/DarkMode.js ***!
|
||||
\******************************************************/
|
||||
|
||||
/*!******************************************************!*\
|
||||
!*** ./node_modules/@mui/icons-material/LockOpen.js ***!
|
||||
\******************************************************/
|
||||
@ -750,6 +758,10 @@
|
||||
!*** ./node_modules/@mui/icons-material/Inventory.js ***!
|
||||
\*******************************************************/
|
||||
|
||||
/*!*******************************************************!*\
|
||||
!*** ./node_modules/@mui/icons-material/LightMode.js ***!
|
||||
\*******************************************************/
|
||||
|
||||
/*!*******************************************************!*\
|
||||
!*** ./node_modules/@mui/icons-material/SwapCalls.js ***!
|
||||
\*******************************************************/
|
||||
@ -882,6 +894,10 @@
|
||||
!*** ./node_modules/@mui/material/Grid/gridClasses.js ***!
|
||||
\********************************************************/
|
||||
|
||||
/*!********************************************************!*\
|
||||
!*** ./node_modules/@mui/material/Link/linkClasses.js ***!
|
||||
\********************************************************/
|
||||
|
||||
/*!********************************************************!*\
|
||||
!*** ./node_modules/@mui/material/List/ListContext.js ***!
|
||||
\********************************************************/
|
||||
@ -1586,6 +1602,10 @@
|
||||
!*** ./node_modules/@mui/material/ButtonGroup/ButtonGroup.js ***!
|
||||
\***************************************************************/
|
||||
|
||||
/*!***************************************************************!*\
|
||||
!*** ./node_modules/@mui/material/CssBaseline/CssBaseline.js ***!
|
||||
\***************************************************************/
|
||||
|
||||
/*!***************************************************************!*\
|
||||
!*** ./node_modules/@mui/material/DialogTitle/DialogTitle.js ***!
|
||||
\***************************************************************/
|
||||
|
||||
Loading…
Reference in New Issue
Block a user