Skip to content

Commit

Permalink
Merge pull request #84 from Reckless-Satoshi/payment-methods-autocomp…
Browse files Browse the repository at this point in the history
…lete

Add payment methods: autocomplete, icons, book column and order icon set.
  • Loading branch information
Reckless-Satoshi authored Mar 30, 2022
2 parents 85ff238 + b85b78c commit 37844d5
Show file tree
Hide file tree
Showing 54 changed files with 762 additions and 62 deletions.
4 changes: 3 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -652,4 +652,6 @@ api/lightning/router*
api/lightning/googleapis*
frontend/static/admin*
frontend/static/rest_framework*
frontend/static/import_export*
frontend/static/import_export*
frontend/src/components/payment-method-images/code*
frontend/src/components/payment-method-images/webp*
4 changes: 3 additions & 1 deletion api/logics.py
Original file line number Diff line number Diff line change
Expand Up @@ -709,12 +709,14 @@ def collaborative_cancel(cls, order):
order.save()
return

def publish_order(order):
@classmethod
def publish_order(cls, order):
order.status = Order.Status.PUB
order.expires_at = order.created_at + timedelta(
seconds=order.t_to_expire(Order.Status.PUB))
if order.has_range:
order.amount = None
order.last_satoshis = cls.satoshis_now(order)
order.save()
# send_message.delay(order.id,'order_published') # too spammy
return
Expand Down
2 changes: 1 addition & 1 deletion api/models.py
Original file line number Diff line number Diff line change
Expand Up @@ -196,7 +196,7 @@ class Status(models.IntegerChoices):
has_range = models.BooleanField(default=False, null=False, blank=False)
min_amount = models.DecimalField(max_digits=18, decimal_places=8, null=True, blank=True)
max_amount = models.DecimalField(max_digits=18, decimal_places=8, null=True, blank=True)
payment_method = models.CharField(max_length=35,
payment_method = models.CharField(max_length=70,
null=False,
default="not specified",
blank=True)
Expand Down
1 change: 0 additions & 1 deletion control/admin.py
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@ class AccountingDayAdmin(ImportExportModelAdmin):
"outstanding_earned_rewards",
"outstanding_pending_disputes",
"lifetime_rewards_claimed",
"outstanding_earned_rewards",
"earned_rewards",
"disputes",
"rewards_claimed",
Expand Down
29 changes: 24 additions & 5 deletions frontend/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -31,16 +31,17 @@
"@mui/material": "^5.2.7",
"@mui/system": "^5.2.6",
"@mui/x-data-grid": "^5.2.2",
"country-flag-icons": "^1.4.25",
"date-fns": "^2.28.0",
"material-ui-image": "^3.3.2",
"react-countdown": "^2.3.2",
"react-flagkit": "^2.0.4",
"react-native": "^0.66.4",
"react-native-svg": "^12.1.1",
"react-qr-code": "^2.0.3",
"react-qr-reader": "^2.2.1",
"react-responsive": "^9.0.0-beta.6",
"react-router-dom": "^5.2.0",
"react-world-flags": "^1.4.0",
"reconnecting-websocket": "^4.4.0",
"websocket": "^1.0.34"
}
Expand Down
27 changes: 20 additions & 7 deletions frontend/src/components/BookPage.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { DataGrid } from '@mui/x-data-grid';
import MediaQuery from 'react-responsive'
import Image from 'material-ui-image'
import getFlags from './getFlags'
import PaymentText from './PaymentText'

export default class BookPage extends Component {
constructor(props) {
Expand Down Expand Up @@ -149,7 +150,11 @@ export default class BookPage extends Component {
renderCell: (params) => {return (
<div style={{ cursor: "pointer", display:'flex',alignItems:'center', flexWrap:'wrap'}}>{params.row.currency+" "}{getFlags(params.row.currency)}</div>)
}},
{ field: 'payment_method', headerName: 'Payment Method', width: 180 },
{ field: 'payment_method', headerName: 'Payment Method', width: 180, hide:'true'},
{ field: 'payment_icons', headerName: 'Payment', width: 180 ,
renderCell: (params) => {return (
<div style={{ cursor: "pointer", align:"center"}}><PaymentText size={20} text={params.row.payment_method}/></div>
)} },
{ field: 'price', headerName: 'Price', type: 'number', width: 140,
renderCell: (params) => {return (
<div style={{ cursor: "pointer" }}>{this.pn(params.row.price) + " " +params.row.currency+ "/BTC" }</div>
Expand Down Expand Up @@ -195,7 +200,7 @@ export default class BookPage extends Component {

columns={[
// { field: 'id', headerName: 'ID', width: 40 },
{ field: 'robot', headerName: 'Robot', width: 80,
{ field: 'robot', headerName: 'Robot', width: 64,
renderCell: (params) => {return (
<Tooltip placement="right" enterTouchDelay="0" title={params.row.robot+" ("+params.row.robot_status+")"}>
<Badge variant="dot" overlap="circular" badgeContent="" color={this.statusBadgeColor(params.row.robot_status)}>
Expand All @@ -213,19 +218,23 @@ export default class BookPage extends Component {
);
} },
{ field: 'type', headerName: 'Is', width: 60, hide:'true'},
{ field: 'amount', headerName: 'Amount', type: 'number', width: 90,
{ field: 'amount', headerName: 'Amount', type: 'number', width: 84,
renderCell: (params) => {return (
<Tooltip placement="right" enterTouchDelay="0" title={params.row.type}>
<div style={{ cursor: "pointer" }}>{this.amountToString(params.row.amount,params.row.has_range, params.row.min_amount, params.row.max_amount)}</div>
</Tooltip>
)} },
{ field: 'currency', headerName: 'Currency', width: 100,
{ field: 'currency', headerName: 'Currency', width: 85,
renderCell: (params) => {return (
<Tooltip placement="left" enterTouchDelay="0" title={params.row.payment_method}>
// <Tooltip placement="left" enterTouchDelay="0" title={params.row.payment_method}>
<div style={{ cursor: "pointer", display:'flex',alignItems:'center', flexWrap:'wrap'}}>{params.row.currency+" "}{getFlags(params.row.currency)}</div>
</Tooltip>
// </Tooltip>
)} },
{ field: 'payment_method', headerName: 'Payment Method', width: 180, hide:'true'},
{ field: 'payment_icons', headerName: 'Pay', width: 75 ,
renderCell: (params) => {return (
<div style={{position:'relative', left:'-8px', cursor: "pointer", align:"center"}}><PaymentText size={16} text={params.row.payment_method}/></div>
)} },
{ field: 'price', headerName: 'Price', type: 'number', width: 140, hide:'true',
renderCell: (params) => {return (
<div style={{ cursor: "pointer" }}>{this.pn(params.row.price) + " " +params.row.currency+ "/BTC" }</div>
Expand Down Expand Up @@ -261,6 +270,8 @@ export default class BookPage extends Component {
I want to
</FormHelperText>
<Select
sx={{width:90}}
autoWidth={true}
label="Select Order Type"
required="true"
value={this.state.type}
Expand All @@ -281,6 +292,8 @@ export default class BookPage extends Component {
and {this.state.type == 0 ? ' receive' : (this.state.type == 1 ? ' pay with' : ' use' )}
</FormHelperText>
<Select
//autoWidth={true}
sx={{width:110}}
label="Select Payment Currency"
required="true"
value={this.state.currency}
Expand Down Expand Up @@ -332,7 +345,7 @@ export default class BookPage extends Component {

{/* Smartphone Book */}
<MediaQuery maxWidth={929}>
<Paper elevation={0} style={{width: 380, maxHeight: 450, overflow: 'auto'}}>
<Paper elevation={0} style={{width: 395, maxHeight: 450, overflow: 'auto'}}>
<this.bookListTablePhone/>
</Paper>
</MediaQuery>
Expand Down
49 changes: 26 additions & 23 deletions frontend/src/components/MakerPage.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ import { LocalizationProvider, TimePicker} from '@mui/lab';
import DateFnsUtils from "@date-io/date-fns";
import { Link as LinkRouter } from 'react-router-dom'
import { styled } from '@mui/material/styles';
import getFlags from './getFlags'

import getFlags from './getFlags';
import AutocompletePayments from './autocompletePayments';
import LockIcon from '@mui/icons-material/Lock';
import HourglassTopIcon from '@mui/icons-material/HourglassTop';

Expand Down Expand Up @@ -159,12 +159,19 @@ export default class MakerPage extends Component {
});
}

handlePaymentMethodChange=(e)=>{
handlePaymentMethodChange=(value)=>{
if (value.length > 50){
this.setState({
badPaymentMethod: true,
});
}else{
this.setState({
payment_method: e.target.value,
badPaymentMethod: e.target.value.length > 35,
payment_method: value.substring(0,53),
badPaymentMethod: value.length > 50,
});
}
}

handlePremiumChange=(e)=>{
if(e.target.value > 999){
var bad_premium = "Must be less than 999%"
Expand Down Expand Up @@ -214,7 +221,7 @@ export default class MakerPage extends Component {
body: JSON.stringify({
type: this.state.type,
currency: this.state.currency,
amount: this.state.amount,
amount: this.state.has_range ? null : this.state.amount,
has_range: this.state.enableAmountRange,
min_amount: this.state.minAmount,
max_amount: this.state.maxAmount,
Expand Down Expand Up @@ -255,6 +262,7 @@ export default class MakerPage extends Component {
return(
<Paper elevation={12} style={{ padding: 8, width:'260px', align:'center'}}>
<Grid item xs={12} align="center" spacing={1}>
<div style={{position:'relative', left:'5px'}}>
<FormControl component="fieldset">
<FormHelperText>
Buy or Sell Bitcoin?
Expand All @@ -274,10 +282,11 @@ export default class MakerPage extends Component {
/>
</RadioGroup>
</FormControl>
</div>
</Grid>

<Grid containter xs={12} alignItems="stretch" style={{ display: "flex" }}>
<div style={{maxWidth:140}}>
<div style={{maxWidth:150}}>
<Tooltip placement="top" enterTouchDelay="500" enterDelay="700" enterNextDelay="2000" title="Amount of fiat to exchange for bitcoin">
<TextField
disabled = {this.state.enableAmountRange}
Expand All @@ -298,6 +307,7 @@ export default class MakerPage extends Component {
</div>
<div >
<Select
sx={{width:'120px'}}
required="true"
defaultValue={this.defaultCurrency}
inputProps={{
Expand All @@ -312,22 +322,15 @@ export default class MakerPage extends Component {
</div>

</Grid>
<br/>
<Grid item xs={12} align="center">
<Tooltip placement="top" enterTouchDelay="300" enterDelay="700" enterNextDelay="2000" title="Enter your preferred fiat payment methods. Instant recommended (e.g., Revolut, CashApp ...)">
<TextField
sx={{width:240}}
label={this.state.currency==1000 ? "Swap Destination (e.g. rBTC)":"Fiat Payment Method(s)"}
<Tooltip placement="top" enterTouchDelay="300" enterDelay="700" enterNextDelay="2000" title="Enter your preferred fiat payment methods. Fast methods are highly recommended.">
<AutocompletePayments
onAutocompleteChange={this.handlePaymentMethodChange}
optionsType={this.state.currency==1000 ? "swap":"fiat"}
error={this.state.badPaymentMethod}
helperText={this.state.badPaymentMethod ? "Must be shorter than 35 characters":""}
type="text"
require={true}
inputProps={{
style: {textAlign:"center"},
maxLength: 35
}}
onChange={this.handlePaymentMethodChange}
/>
helperText={this.state.badPaymentMethod ? "Must be shorter than 65 characters":""}
label={this.state.currency==1000 ? "Swap Destination(s)" : "Fiat Payment Method(s)"}
/>
</Tooltip>
</Grid>

Expand Down Expand Up @@ -492,7 +495,7 @@ export default class MakerPage extends Component {
size="small"
value={this.state.minAmount}
onChange={this.handleMinAmountChange}
error={this.state.minAmount < this.getMinAmount() || this.state.maxAmount < this.state.minAmount}
error={this.state.minAmount < this.getMinAmount() || this.state.maxAmount < this.state.minAmount || this.state.minAmount < this.state.maxAmount/(this.maxRangeAmountMultiple+0.15) || this.state.minAmount*(this.minRangeAmountMultiple-0.1) > this.state.maxAmount}
sx={{width: this.state.minAmount.toString().length * 9, maxWidth: 40}}
/>
<span style={{width: 20}}>to</span>
Expand All @@ -501,7 +504,7 @@ export default class MakerPage extends Component {
size="small"
type="number"
value={this.state.maxAmount}
error={this.state.maxAmount > this.getMaxAmount() || this.state.maxAmount < this.state.minAmount}
error={this.state.maxAmount > this.getMaxAmount() || this.state.maxAmount < this.state.minAmount || this.state.minAmount < this.state.maxAmount/(this.maxRangeAmountMultiple+0.15) || this.state.minAmount*(this.minRangeAmountMultiple-0.1) > this.state.maxAmount}
onChange={this.handleMaxAmountChange}
sx={{width: this.state.maxAmount.toString().length * 9, maxWidth: 50}}
/>
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/components/OrderPage.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import {TextField,Chip, Tooltip, Badge, Tab, Tabs, Alert, Paper, CircularProgres
import Countdown, { zeroPad, calcTimeDelta } from 'react-countdown';
import MediaQuery from 'react-responsive'

import PaymentText from './PaymentText'
import TradeBox from "./TradeBox";
import getFlags from './getFlags'

Expand Down Expand Up @@ -562,7 +563,7 @@ export default class OrderPage extends Component {
<ListItemIcon>
<PaymentsIcon/>
</ListItemIcon>
<ListItemText primary={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 ? "Swap destination":"Accepted payment methods"}/>
</ListItem>
<Divider />

Expand Down
Loading

0 comments on commit 37844d5

Please sign in to comment.