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

Upgrade MUI to V5

Browse Source
This commit is contained in:
Reckless_Satoshi 2022-01-09 14:17:15 -08:00
parent a518daf8cc
commit bb9cafadd8
No known key found for this signature in database
GPG Key ID: 9C4585B561315571
8 changed files with 122 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
frontend/package-lock.json generated
View File

@ -1567,6 +1567,46 @@
"react-is": "^16.8.0 || ^17.0.0"
}
},
"@mui/base": {
"version": "5.0.0-alpha.63",
"resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.63.tgz",
"integrity": "sha512-/jURXlBAYqZaWw92XfJgc6aiHnDcNVuRxBskub57HXWCMK3OiVVdfUEWJEdCjOacCKiw3+Etc5alI9Omaqrg2g==",
"requires": {
"@babel/runtime": "^7.16.3",
"@emotion/is-prop-valid": "^1.1.1",
"@mui/utils": "^5.2.3",
"@popperjs/core": "^2.4.4",
"clsx": "^1.1.1",
"prop-types": "^15.7.2",
"react-is": "^17.0.2"
}
},
"@mui/material": {
"version": "5.2.7",
"resolved": "https://registry.npmjs.org/@mui/material/-/material-5.2.7.tgz",
"integrity": "sha512-JaDl9GJSV17QLf4OoDUZKvVjZ/7UvqOBAxwLwUTnKZEME4REaGTkaAeHrzLpcKCm0LlNGD2HOKAIeykI6WJiqg==",
"requires": {
"@babel/runtime": "^7.16.3",
"@mui/base": "5.0.0-alpha.63",
"@mui/system": "^5.2.6",
"@mui/types": "^7.1.0",
"@mui/utils": "^5.2.3",
"@types/react-transition-group": "^4.4.4",
"clsx": "^1.1.1",
"csstype": "^3.0.10",
"hoist-non-react-statics": "^3.3.2",
"prop-types": "^15.7.2",
"react-is": "^17.0.2",
"react-transition-group": "^4.4.2"
},
"dependencies": {
"csstype": {
"version": "3.0.10",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz",
"integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA=="
}
}
},
"@mui/private-theming": {
"version": "5.2.3",
"resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.2.3.tgz",
@ -1626,6 +1666,11 @@
"react-is": "^17.0.2"
}
},
"@popperjs/core": {
"version": "2.11.2",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.2.tgz",
"integrity": "sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA=="
},
"@react-native-community/cli-debugger-ui": {
"version": "6.0.0-rc.0",
"resolved": "https://registry.npmjs.org/@react-native-community/cli-debugger-ui/-/cli-debugger-ui-6.0.0-rc.0.tgz",

1
frontend/package.json
View File

@ -26,6 +26,7 @@
"@emotion/styled": "^11.6.0",
"@material-ui/core": "^4.12.3",
"@material-ui/icons": "^4.11.2",
"@mui/material": "^5.2.7",
"@mui/system": "^5.2.6",
"material-ui-image": "^3.3.2",
"react-native": "^0.66.4",

124
frontend/src/components/BookPage.js
View File

@ -1,5 +1,5 @@
import React, { Component } from "react";
import { Button , Divider, Card, CardActionArea, CardContent, Typography, Grid, Select, MenuItem, FormControl, FormHelperText, List, ListItem, ListItemText, Avatar, RouterLink, ListItemAvatar} from "@material-ui/core"
import { Button , Divider, ListItemButton, Typography, Grid, Select, MenuItem, FormControl, FormHelperText, List, ListItem, ListItemText, Avatar, RouterLink, ListItemAvatar} from "@mui/material";
import { Link } from 'react-router-dom'
export default class BookPage extends Component {
@ -63,63 +63,72 @@ export default class BookPage extends Component {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
bookCards=()=>{
bookListItems=()=>{
return (this.state.orders.map((order) =>
<Grid container item sm={4}>
<Card elevation={6} sx={{ width: 945 }}>
<CardActionArea value={order.id} onClick={() => this.handleCardClick(order.id)}>
<CardContent>
<List dense="true">
<ListItem >
<ListItemAvatar >
<Avatar
alt={order.maker_nick}
src={window.location.origin +'/static/assets/avatars/' + order.maker_nick + '.png'}
/>
</ListItemAvatar>
<ListItemText>
<Typography gutterBottom variant="h6">
{order.maker_nick}
</Typography>
</ListItemText>
</ListItem>
{/* CARD PARAGRAPH CONTENT */}
<ListItemText>
<Typography variant="subtitle1" color="text.secondary">
◑{order.type == 0 ? <b> Buys </b>: <b> Sells </b>}
<b>{parseFloat(parseFloat(order.amount).toFixed(4))}
{" " +this.getCurrencyCode(order.currency)}</b> <a> worth of bitcoin</a>
</Typography>
<Typography variant="subtitle1" color="text.secondary">
◑ Payment via <b>{order.payment_method}</b>
</Typography>
{/*
<Typography variant="subtitle1" color="text.secondary">
◑ Priced {order.is_explicit ?
" explicitly at " + this.pn(order.satoshis) + " Sats" : (
" at " +
parseFloat(parseFloat(order.premium).toFixed(4)) + "% over the market"
)}
</Typography> */}
<Typography variant="subtitle1" color="text.secondary">
◑ <b>{" 42,354 "}{this.getCurrencyCode(order.currency)}/BTC</b> (Binance API)
</Typography>
</ListItemText>
</List>
</CardContent>
</CardActionArea>
</Card>
</Grid>
<ListItemButton>
<ListItemAvatar >
<Avatar
alt={order.maker_nick}
src={window.location.origin +'/static/assets/avatars/' + order.maker_nick + '.png'}
/>
</ListItemAvatar>
</ListItemButton>
));
}
// <Grid container item sm={4}>
// <Card elevation={6} sx={{ width: 945 }}>
// <CardActionArea value={order.id} onClick={() => this.handleCardClick(order.id)}>
// <CardContent>
// <List dense="true">
// <ListItem >
// <ListItemAvatar >
// <Avatar
// alt={order.maker_nick}
// src={window.location.origin +'/static/assets/avatars/' + order.maker_nick + '.png'}
// />
// </ListItemAvatar>
// <ListItemText>
// <Typography gutterBottom variant="h6">
// {order.maker_nick}
// </Typography>
// </ListItemText>
// </ListItem>
// {/* CARD PARAGRAPH CONTENT */}
// <ListItemText>
// <Typography variant="subtitle1" color="text.secondary">
// ◑{order.type == 0 ? <b> Buys </b>: <b> Sells </b>}
// <b>{parseFloat(parseFloat(order.amount).toFixed(4))}
// {" " +this.getCurrencyCode(order.currency)}</b> <a> worth of bitcoin</a>
// </Typography>
// <Typography variant="subtitle1" color="text.secondary">
// ◑ Payment via <b>{order.payment_method}</b>
// </Typography>
// {/*
// <Typography variant="subtitle1" color="text.secondary">
// ◑ Priced {order.is_explicit ?
// " explicitly at " + this.pn(order.satoshis) + " Sats" : (
// " at " +
// parseFloat(parseFloat(order.premium).toFixed(4)) + "% over the market"
// )}
// </Typography> */}
// <Typography variant="subtitle1" color="text.secondary">
// ◑ <b>{" 42,354 "}{this.getCurrencyCode(order.currency)}/BTC</b> (Binance API)
// </Typography>
// </ListItemText>
// </List>
// </CardContent>
// </CardActionArea>
// </Card>
// </Grid>
render() {
return (
<Grid className='orderBook' container spacing={1}>
@ -192,7 +201,12 @@ export default class BookPage extends Component {
Be the first one to create an order
</Typography>
</Grid>)
: this.bookCards()
:
<Grid item>
<List>
{this.bookListItems()}
</List>
</Grid>
}
<Grid item xs={12} align="center">
<Button color="secondary" variant="contained" to="/" component={Link}>

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

@ -1,5 +1,5 @@
import React, { Component } from 'react';
import { Paper, Alert, AlertTitle, Button , Grid, Typography, TextField, Select, FormHelperText, MenuItem, FormControl, Radio, FormControlLabel, RadioGroup, Menu} from "@material-ui/core"
import { Paper, Alert, AlertTitle, Button , Grid, Typography, TextField, Select, FormHelperText, MenuItem, FormControl, Radio, FormControlLabel, RadioGroup, Menu} from "@mui/material"
import { Link } from 'react-router-dom'
function getCookie(name) {

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

@ -1,5 +1,5 @@
import React, { Component } from "react";
import { Paper, Button , Grid, Typography, List, ListItem, ListItemText, ListItemAvatar, Avatar, Divider, Box, LinearProgress} from "@material-ui/core"
import { Paper, Button , Grid, Typography, List, ListItem, ListItemText, ListItemAvatar, Avatar, Divider, Box, LinearProgress} from "@mui/material"
import TradeBox from "./TradeBox";
function msToTime(duration) {

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

@ -1,5 +1,5 @@
import React, { Component } from "react";
import { Paper, Button, Grid, Typography, TextField, List, ListItem, ListItemText, Divider} from "@material-ui/core"
import { Paper, Button, Grid, Typography, TextField, List, ListItem, ListItemText, Divider} from "@mui/material"
import QRCode from "react-qr-code";
function getCookie(name) {

4
frontend/src/components/UserGenPage.js
View File

@ -1,5 +1,5 @@
import React, { Component } from "react";
import { Button , Grid, Typography, TextField, ButtonGroup} from "@material-ui/core"
import { Button , Grid, Typography, TextField, ButtonGroup} from "@mui/material"
import { Link } from 'react-router-dom'
import Image from 'material-ui-image'
@ -137,7 +137,7 @@ export default class UserGenPage extends Component {
<Grid item xs={12} align="center">
<ButtonGroup variant="contained" aria-label="outlined primary button group">
<Button color='primary' to='/make/' component={Link}>Make Order</Button>
<Button to='/home' component={Link}>INFO</Button>
<Button color='inherit' to='/home' component={Link}>INFO</Button>
<Button color='secondary' to='/book/' component={Link}>View Book</Button>
</ButtonGroup>
</Grid>

2
setup.md
View File

@ -69,7 +69,9 @@ npm install @mui/system @emotion/react @emotion/styled
npm install react-native
npm install react-native-svg
npm install react-qr-code
npm install @mui/material
```
Note we are using mostly MaterialUI V5, but Image loading from V4 extentions (so both V4 and V5 are needed)
### Launch the React render
from frontend/ directory