mirror of
https://github.com/yzernik/squeaknode.git
synced 2026-08-20 13:28:20 +02:00
redid styles code for wallet page (#473)
* added transaction details to TransactionItem display * frontend wallet page changes * fixed horizontal width bug fixed ChannelItem.js click bug * fixed pending channel bug * fixed expand channel details
This commit is contained in:
azernik
GitHub
parent
9de9c80549
commit
6231832cbe
13 changed files with 1735 additions and 1799 deletions
2303
frontend/package-lock.json
generated
2303
frontend/package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -11,25 +11,25 @@
|
|||
"@material-ui/core": "^4.3.0",
|
||||
"@material-ui/icons": "^4.2.1",
|
||||
"@material-ui/styles": "^4.3.0",
|
||||
"apexcharts": "^3.8.3",
|
||||
"apexcharts": "^3.22.2",
|
||||
"async": "~1.5.2",
|
||||
"classnames": "^2.2.6",
|
||||
"font-awesome": "^4.7.0",
|
||||
"google-protobuf": "~3.12.0",
|
||||
"grpc-web": "~1.2.0",
|
||||
"moment": "^2.27.0",
|
||||
"google-protobuf": "^3.12.4",
|
||||
"grpc-web": "^1.2.1",
|
||||
"moment": "^2.29.1",
|
||||
"mui-datatables": "^2.6.4",
|
||||
"protobufjs": "^6.10.1",
|
||||
"react": "^16.8.6",
|
||||
"protobufjs": "^6.10.2",
|
||||
"react": "^16.14.0",
|
||||
"react-apexcharts": "^1.3.3",
|
||||
"react-dom": "^16.8.6",
|
||||
"react-dom": "^16.14.0",
|
||||
"react-google-maps": "^9.4.5",
|
||||
"react-router-dom": "^5.0.1",
|
||||
"react-scripts": "^3.4.1",
|
||||
"react-scripts": "^3.4.4",
|
||||
"react-syntax-highlighter": "^11.0.2",
|
||||
"react-toastify": "^5.3.2",
|
||||
"recharts": "^1.6.2",
|
||||
"tinycolor2": "^1.4.1"
|
||||
"tinycolor2": "^1.4.2"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
|
|
@ -54,6 +54,6 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"prettier": "^1.19.1",
|
||||
"terser": "^3.14.1"
|
||||
"terser": "^3.17.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,110 +1,126 @@
|
|||
import React, { useState } from "react";
|
||||
import React, {useState} from "react";
|
||||
import {
|
||||
Paper,
|
||||
IconButton,
|
||||
Menu,
|
||||
MenuItem,
|
||||
Typography,
|
||||
Grid,
|
||||
Box,
|
||||
Link,
|
||||
} from "@material-ui/core";
|
||||
import { MoreVert as MoreIcon } from "@material-ui/icons";
|
||||
import {useHistory} from "react-router-dom";
|
||||
import classnames from "classnames";
|
||||
|
||||
import LockIcon from '@material-ui/icons/Lock';
|
||||
// icons
|
||||
import ImportExportIcon from '@material-ui/icons/ImportExport';
|
||||
import SwapHorizontalCircleIcon from '@material-ui/icons/SwapHorizontalCircle';
|
||||
|
||||
// styles
|
||||
import useStyles from "./styles";
|
||||
import useStyles from "../../pages/wallet/styles";
|
||||
|
||||
import Widget from "../../components/Widget";
|
||||
|
||||
import moment from 'moment';
|
||||
import Card from "@material-ui/core/Card";
|
||||
import CardContent from "@material-ui/core/CardContent";
|
||||
import CardHeader from "@material-ui/core/CardHeader";
|
||||
import moment from "moment";
|
||||
import CallReceivedIcon from "@material-ui/icons/CallReceived";
|
||||
import CallMadeIcon from "@material-ui/icons/CallMade";
|
||||
import IconButton from "@material-ui/core/IconButton";
|
||||
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
|
||||
import Collapse from "@material-ui/core/Collapse";
|
||||
|
||||
export default function ChannelItem({
|
||||
channel,
|
||||
...props
|
||||
}) {
|
||||
var classes = useStyles();
|
||||
const classes = useStyles({
|
||||
channelStatus: 'open',
|
||||
clickable: true,
|
||||
})
|
||||
|
||||
const history = useHistory();
|
||||
const history = useHistory();
|
||||
|
||||
const getTxId = (channel) => {
|
||||
var channelPoint = channel.getChannelPoint();
|
||||
if (channelPoint == null) {
|
||||
return null;
|
||||
}
|
||||
var pieces = channelPoint.split(":");
|
||||
return pieces[0];
|
||||
}
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
|
||||
const getOutputIndex = (channel) => {
|
||||
var channelPoint = channel.getChannelPoint();
|
||||
if (channelPoint == null) {
|
||||
return null;
|
||||
}
|
||||
var pieces = channelPoint.split(":");
|
||||
if (pieces.length < 2) {
|
||||
return null;
|
||||
}
|
||||
return pieces[1];
|
||||
}
|
||||
const handleExpandClick = (evt) => {
|
||||
evt.stopPropagation()
|
||||
setExpanded(!expanded);
|
||||
};
|
||||
|
||||
const goToChannelPage = (txId, outputIndex) => {
|
||||
history.push("/app/channel/" + txId + "/" + outputIndex);
|
||||
};
|
||||
const getTxId = (channel) => {
|
||||
var channelPoint = channel.getChannelPoint();
|
||||
if (channelPoint == null) {
|
||||
return null;
|
||||
}
|
||||
var pieces = channelPoint.split(":");
|
||||
return pieces[0];
|
||||
}
|
||||
|
||||
const onChannelClick = (event) => {
|
||||
event.preventDefault();
|
||||
console.log("Handling channel click...");
|
||||
var txId = getTxId(channel);
|
||||
var outputIndex = getOutputIndex(channel);
|
||||
goToChannelPage(txId, outputIndex);
|
||||
}
|
||||
const getOutputIndex = (channel) => {
|
||||
var channelPoint = channel.getChannelPoint();
|
||||
if (channelPoint == null) {
|
||||
return null;
|
||||
}
|
||||
var pieces = channelPoint.split(":");
|
||||
if (pieces.length < 2) {
|
||||
return null;
|
||||
}
|
||||
return pieces[1];
|
||||
}
|
||||
|
||||
function ChannelContent() {
|
||||
return (
|
||||
<Typography component="div">
|
||||
<Box fontSize="h3.fontSize" m={1}>
|
||||
Open Channel
|
||||
</Box>
|
||||
<Box m={1}>
|
||||
Capacity: {channel.getCapacity()}
|
||||
</Box>
|
||||
<Box m={1}>
|
||||
Local Balance: {channel.getLocalBalance()}
|
||||
</Box>
|
||||
<Box m={1}>
|
||||
Remote Balance: {channel.getRemoteBalance()}
|
||||
</Box>
|
||||
<Box m={1}>
|
||||
Pubkey: {channel.getRemotePubkey()}
|
||||
</Box>
|
||||
<Box m={1}>
|
||||
Channel Point: {channel.getChannelPoint()}
|
||||
</Box>
|
||||
</Typography>
|
||||
)
|
||||
}
|
||||
const goToChannelPage = (txId, outputIndex) => {
|
||||
history.push("/app/channel/" + txId + "/" + outputIndex);
|
||||
};
|
||||
|
||||
const onChannelClick = (event) => {
|
||||
event.preventDefault();
|
||||
console.log("Handling channel click...");
|
||||
var txId = getTxId(channel);
|
||||
var outputIndex = getOutputIndex(channel);
|
||||
goToChannelPage(txId, outputIndex);
|
||||
}
|
||||
|
||||
function ChannelDetailItem(label, value) {
|
||||
return <Box display='flex'>
|
||||
<Typography className={classes.detailItemLabel}>
|
||||
{label}
|
||||
</Typography>
|
||||
<Typography className={classes.detailItemValue}>
|
||||
{value}
|
||||
</Typography>
|
||||
</Box>
|
||||
}
|
||||
function ChannelContent() {
|
||||
return (
|
||||
<CardContent className={classes.transactionMoreDetails}>
|
||||
{ChannelDetailItem("Capacity", `${channel.getCapacity()} sats`)}
|
||||
{ChannelDetailItem("Local Balance", `${channel.getLocalBalance()} sats`)}
|
||||
{ChannelDetailItem("Remote Balance", `${channel.getRemoteBalance()} sats`)}
|
||||
{ChannelDetailItem("Pubkey", channel.getRemotePubkey())}
|
||||
{ChannelDetailItem("Channel Point", channel.getChannelPoint())}
|
||||
</CardContent>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Box
|
||||
p={1}
|
||||
m={0}
|
||||
style={{backgroundColor: '#e0e0e0'}}
|
||||
onClick={onChannelClick}
|
||||
>
|
||||
<Grid
|
||||
container
|
||||
direction="row"
|
||||
justify="flex-start"
|
||||
alignItems="flex-start"
|
||||
>
|
||||
<Grid item>
|
||||
<Card
|
||||
className={classes.root}
|
||||
onClick={onChannelClick}
|
||||
>
|
||||
<CardHeader
|
||||
className={classes.transactionItemHeader}
|
||||
title={'Open'}
|
||||
subheader={props.status === 'open' ? channel.getRemotePubkey(): null}
|
||||
avatar={<SwapHorizontalCircleIcon className={classes.channelIcon}/>}
|
||||
action={
|
||||
<IconButton
|
||||
className={expanded ? classes.collapseBtn : classes.expandBtn}
|
||||
onClick={handleExpandClick}
|
||||
aria-expanded={expanded}
|
||||
aria-label="show more"
|
||||
>
|
||||
<ExpandMoreIcon />
|
||||
</IconButton>
|
||||
}
|
||||
/>
|
||||
<Collapse in={expanded} timeout="auto" unmountOnExit>
|
||||
{ChannelContent()}
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
</Collapse>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,43 +0,0 @@
|
|||
import { makeStyles } from "@material-ui/styles";
|
||||
|
||||
export default makeStyles(theme => ({
|
||||
widgetWrapper: {
|
||||
display: "flex",
|
||||
minHeight: "100%",
|
||||
},
|
||||
widgetHeader: {
|
||||
padding: theme.spacing(3),
|
||||
paddingBottom: theme.spacing(1),
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
},
|
||||
widgetRoot: {
|
||||
boxShadow: theme.customShadows.widget,
|
||||
},
|
||||
widgetBody: {
|
||||
paddingBottom: theme.spacing(3),
|
||||
paddingRight: theme.spacing(3),
|
||||
paddingLeft: theme.spacing(3),
|
||||
},
|
||||
noPadding: {
|
||||
padding: 0,
|
||||
},
|
||||
paper: {
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
flexGrow: 1,
|
||||
overflow: "hidden",
|
||||
},
|
||||
moreButton: {
|
||||
margin: -theme.spacing(1),
|
||||
padding: 0,
|
||||
width: 40,
|
||||
height: 40,
|
||||
color: theme.palette.text.hint,
|
||||
"&:hover": {
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
color: "rgba(255, 255, 255, 0.35)",
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
|
@ -1,32 +1,23 @@
|
|||
import React, { useState } from "react";
|
||||
import {
|
||||
Paper,
|
||||
IconButton,
|
||||
Menu,
|
||||
MenuItem,
|
||||
Typography,
|
||||
Grid,
|
||||
Box,
|
||||
Link,
|
||||
} from "@material-ui/core";
|
||||
import { MoreVert as MoreIcon } from "@material-ui/icons";
|
||||
import React from "react";
|
||||
import {useHistory} from "react-router-dom";
|
||||
import classnames from "classnames";
|
||||
|
||||
import LockIcon from '@material-ui/icons/Lock';
|
||||
import Card from '@material-ui/core/Card';
|
||||
import Button from '@material-ui/core/Button';
|
||||
import CardHeader from "@material-ui/core/CardHeader";
|
||||
|
||||
// styles
|
||||
import useStyles from "./styles";
|
||||
// icons
|
||||
import RecordVoiceOverIcon from '@material-ui/icons/RecordVoiceOver';
|
||||
|
||||
import Widget from "../../components/Widget";
|
||||
import useStyles from "../../pages/wallet/styles";
|
||||
|
||||
import moment from 'moment';
|
||||
|
||||
export default function LightningPeerListItem({
|
||||
peer,
|
||||
...props
|
||||
}) {
|
||||
var classes = useStyles();
|
||||
const classes = useStyles({
|
||||
clickable: true,
|
||||
});
|
||||
|
||||
const history = useHistory();
|
||||
|
||||
|
|
@ -37,75 +28,44 @@ export default function LightningPeerListItem({
|
|||
}
|
||||
|
||||
const goToLightningNodePage = () => {
|
||||
var pubkey = peer.getPubKey();
|
||||
var host = getPeerHost();
|
||||
var port = getPeerPort();
|
||||
const pubkey = peer.getPubKey();
|
||||
const host = getPeerHost();
|
||||
const port = getPeerPort();
|
||||
history.push("/app/lightningnode/" + pubkey + "/" + host + "/" + port);
|
||||
};
|
||||
|
||||
const getPeerHost = () => {
|
||||
var address = peer.getAddress();
|
||||
const address = peer.getAddress();
|
||||
if (address == null) {
|
||||
return null;
|
||||
}
|
||||
var pieces = address.split(":");
|
||||
const pieces = address.split(":");
|
||||
return pieces[0];
|
||||
}
|
||||
|
||||
const getPeerPort = () => {
|
||||
var address = peer.getAddress();
|
||||
const address = peer.getAddress();
|
||||
if (address == null) {
|
||||
return null;
|
||||
}
|
||||
var pieces = address.split(":");
|
||||
const pieces = address.split(":");
|
||||
if (pieces.length < 2) {
|
||||
return null;
|
||||
}
|
||||
return pieces[1];
|
||||
}
|
||||
|
||||
function PeerContent() {
|
||||
return (
|
||||
<Typography
|
||||
size="md"
|
||||
>{peer.getPubKey()}
|
||||
</Typography>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Box
|
||||
p={1}
|
||||
m={0}
|
||||
style={{backgroundColor: 'lightgray'}}
|
||||
onClick={onPeerClick}
|
||||
>
|
||||
<Grid
|
||||
container
|
||||
direction="row"
|
||||
justify="flex-start"
|
||||
alignItems="flex-start"
|
||||
>
|
||||
<Grid item>
|
||||
<Typography
|
||||
size="md"
|
||||
>Pubkey: {peer.getPubKey()}
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid
|
||||
container
|
||||
direction="row"
|
||||
justify="flex-start"
|
||||
alignItems="flex-start"
|
||||
>
|
||||
<Grid item>
|
||||
<Typography
|
||||
size="md"
|
||||
>Address: {peer.getAddress()}
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
<Card
|
||||
className={classes.root}
|
||||
onClick={onPeerClick}
|
||||
>
|
||||
<CardHeader
|
||||
avatar={<RecordVoiceOverIcon/>}
|
||||
title={`Pubkey: ${peer.getPubKey()}`}
|
||||
subheader={`Address: ${peer.getAddress()}`}
|
||||
// action={<Button size="small">View Peer</Button>}
|
||||
/>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,43 +0,0 @@
|
|||
import { makeStyles } from "@material-ui/styles";
|
||||
|
||||
export default makeStyles(theme => ({
|
||||
widgetWrapper: {
|
||||
display: "flex",
|
||||
minHeight: "100%",
|
||||
},
|
||||
widgetHeader: {
|
||||
padding: theme.spacing(3),
|
||||
paddingBottom: theme.spacing(1),
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
},
|
||||
widgetRoot: {
|
||||
boxShadow: theme.customShadows.widget,
|
||||
},
|
||||
widgetBody: {
|
||||
paddingBottom: theme.spacing(3),
|
||||
paddingRight: theme.spacing(3),
|
||||
paddingLeft: theme.spacing(3),
|
||||
},
|
||||
noPadding: {
|
||||
padding: 0,
|
||||
},
|
||||
paper: {
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
flexGrow: 1,
|
||||
overflow: "hidden",
|
||||
},
|
||||
moreButton: {
|
||||
margin: -theme.spacing(1),
|
||||
padding: 0,
|
||||
width: 40,
|
||||
height: 40,
|
||||
color: theme.palette.text.hint,
|
||||
"&:hover": {
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
color: "rgba(255, 255, 255, 0.35)",
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
|
@ -16,20 +16,36 @@ import classnames from "classnames";
|
|||
import LockIcon from '@material-ui/icons/Lock';
|
||||
|
||||
// styles
|
||||
import useStyles from "./styles";
|
||||
import useStyles from "../../pages/wallet/styles";
|
||||
|
||||
import Widget from "../../components/Widget";
|
||||
|
||||
import moment from 'moment';
|
||||
import CardHeader from "@material-ui/core/CardHeader";
|
||||
import SwapHorizontalCircleIcon from "@material-ui/icons/SwapHorizontalCircle";
|
||||
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
|
||||
import Collapse from "@material-ui/core/Collapse";
|
||||
import Card from "@material-ui/core/Card";
|
||||
import CardContent from "@material-ui/core/CardContent";
|
||||
|
||||
export default function PendingOpenChannelItem({
|
||||
pendingOpenChannel,
|
||||
...props
|
||||
}) {
|
||||
var classes = useStyles();
|
||||
const classes = useStyles({
|
||||
channelStatus: 'pending-open',
|
||||
clickable: true,
|
||||
})
|
||||
|
||||
const history = useHistory();
|
||||
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
|
||||
const handleExpandClick = (evt) => {
|
||||
evt.stopPropagation()
|
||||
setExpanded(!expanded);
|
||||
};
|
||||
|
||||
const getTxId = (channel) => {
|
||||
var channelPoint = channel.getChannelPoint();
|
||||
if (channelPoint == null) {
|
||||
|
|
@ -64,49 +80,54 @@ export default function PendingOpenChannelItem({
|
|||
goToChannelPage(txId, outputIndex);
|
||||
}
|
||||
|
||||
function ChannelContent() {
|
||||
var channel = pendingOpenChannel.getChannel();
|
||||
return (
|
||||
<Typography component="div">
|
||||
<Box fontSize="h3.fontSize" m={1}>
|
||||
Pending Open Channel
|
||||
</Box>
|
||||
<Box m={1}>
|
||||
Capacity: {channel.getCapacity()}
|
||||
</Box>
|
||||
<Box m={1}>
|
||||
Local Balance: {channel.getLocalBalance()}
|
||||
</Box>
|
||||
<Box m={1}>
|
||||
Remote Balance: {channel.getRemoteBalance()}
|
||||
</Box>
|
||||
<Box m={1}>
|
||||
Pubkey: {channel.getRemoteNodePub()}
|
||||
</Box>
|
||||
<Box m={1}>
|
||||
Channel Point: {channel.getChannelPoint()}
|
||||
</Box>
|
||||
</Typography>
|
||||
)
|
||||
}
|
||||
function ChannelDetailItem(label, value) {
|
||||
return <Box display='flex'>
|
||||
<Typography className={classes.detailItemLabel}>
|
||||
{label}
|
||||
</Typography>
|
||||
<Typography className={classes.detailItemValue}>
|
||||
{value}
|
||||
</Typography>
|
||||
</Box>
|
||||
}
|
||||
|
||||
function ChannelContent() {
|
||||
const channel = pendingOpenChannel.getChannel();
|
||||
return (
|
||||
<CardContent className={classes.transactionMoreDetails}>
|
||||
{ChannelDetailItem("Capacity", `${channel.getCapacity()} sats`)}
|
||||
{ChannelDetailItem("Local Balance", `${channel.getLocalBalance()} sats`)}
|
||||
{ChannelDetailItem("Remote Balance", `${channel.getRemoteBalance()} sats`)}
|
||||
{ChannelDetailItem("Pubkey", channel.getRemoteNodePub())}
|
||||
{ChannelDetailItem("Channel Point", channel.getChannelPoint())}
|
||||
</CardContent>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Box
|
||||
p={1}
|
||||
m={0}
|
||||
style={{backgroundColor: '#e0e0e0'}}
|
||||
onClick={onChannelClick}
|
||||
>
|
||||
<Grid
|
||||
container
|
||||
direction="row"
|
||||
justify="flex-start"
|
||||
alignItems="flex-start"
|
||||
>
|
||||
<Grid item>
|
||||
{ChannelContent()}
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
)
|
||||
<Card
|
||||
className={classes.root}
|
||||
onClick={onChannelClick}
|
||||
>
|
||||
<CardHeader
|
||||
className={classes.transactionItemHeader}
|
||||
title={'Opening test'}
|
||||
// subheader={props.status === 'open' ? channel.getRemotePubkey(): null}
|
||||
avatar={<SwapHorizontalCircleIcon className={classes.channelIcon}/>}
|
||||
action={
|
||||
<IconButton
|
||||
className={expanded ? classes.collapseBtn : classes.expandBtn}
|
||||
onClick={handleExpandClick}
|
||||
aria-expanded={expanded}
|
||||
aria-label="show more"
|
||||
>
|
||||
<ExpandMoreIcon />
|
||||
</IconButton>
|
||||
}
|
||||
/>
|
||||
<Collapse in={expanded} timeout="auto" unmountOnExit>
|
||||
{ChannelContent()}
|
||||
</Collapse>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,35 +1,33 @@
|
|||
import React, { useState } from "react";
|
||||
import {
|
||||
Paper,
|
||||
IconButton,
|
||||
Menu,
|
||||
MenuItem,
|
||||
Typography,
|
||||
Grid,
|
||||
Box,
|
||||
Link,
|
||||
} from "@material-ui/core";
|
||||
import { MoreVert as MoreIcon } from "@material-ui/icons";
|
||||
import {useHistory} from "react-router-dom";
|
||||
import classnames from "classnames";
|
||||
|
||||
import LockIcon from '@material-ui/icons/Lock';
|
||||
// icons
|
||||
import CallMadeIcon from '@material-ui/icons/CallMade';
|
||||
import CallReceivedIcon from '@material-ui/icons/CallReceived';
|
||||
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
|
||||
|
||||
|
||||
// styles
|
||||
import useStyles from "./styles";
|
||||
|
||||
import Widget from "../../components/Widget";
|
||||
import useStyles from "../../pages/wallet/styles";
|
||||
|
||||
import moment from 'moment';
|
||||
import Card from "@material-ui/core/Card";
|
||||
import CardContent from "@material-ui/core/CardContent";
|
||||
import CardHeader from "@material-ui/core/CardHeader";
|
||||
import IconButton from "@material-ui/core/IconButton";
|
||||
import Collapse from "@material-ui/core/Collapse";
|
||||
import Box from "@material-ui/core/Box";
|
||||
import Typography from "@material-ui/core/Typography";
|
||||
|
||||
export default function TransactionItem({
|
||||
transaction,
|
||||
handleTransactionClick,
|
||||
...props
|
||||
}) {
|
||||
var classes = useStyles();
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
|
||||
const history = useHistory();
|
||||
const handleExpandClick = () => {
|
||||
setExpanded(!expanded);
|
||||
};
|
||||
|
||||
const onTransactionClick = (event) => {
|
||||
event.preventDefault();
|
||||
|
|
@ -39,68 +37,76 @@ export default function TransactionItem({
|
|||
}
|
||||
}
|
||||
|
||||
function TransactionContent() {
|
||||
return (
|
||||
<Typography
|
||||
size="md"
|
||||
style={{whiteSpace: 'pre-line', overflow: "hidden", textOverflow: "ellipsis", height: '6rem'}}
|
||||
>{transaction.getAmount()}
|
||||
</Typography>
|
||||
function TransactionDetailItem(label, value) {
|
||||
return <Box display='flex'>
|
||||
<Typography className={classes.detailItemLabel}>
|
||||
{label}
|
||||
</Typography>
|
||||
<Typography className={classes.detailItemValue}>
|
||||
{value}
|
||||
</Typography>
|
||||
</Box>
|
||||
}
|
||||
|
||||
function TransactionMoreDetails() {
|
||||
return (
|
||||
<CardContent className={classes.transactionMoreDetails}>
|
||||
{TransactionDetailItem("Timestamp", moment.unix(transaction.getTimeStamp()).format('lll'))}
|
||||
{TransactionDetailItem("Block Height", transaction.getBlockHeight())}
|
||||
{TransactionDetailItem("Total Fees", transaction.getTotalFees())}
|
||||
{/*{TransactionDetailItem("Dest Addresses", transaction.getDestAddressesList().length)}*/}
|
||||
{TransactionDetailItem("Confirmations", transaction.getNumConfirmations())}
|
||||
</CardContent>
|
||||
)
|
||||
}
|
||||
|
||||
function TransactionPositiveBackgroundColor() {
|
||||
return {backgroundColor: 'lightgreen'};
|
||||
}
|
||||
const classes = useStyles({
|
||||
amount: transaction.getAmount(),
|
||||
clickable: false,
|
||||
})
|
||||
|
||||
function TransactionNegativeBackgroundColor() {
|
||||
return {backgroundColor: 'lightred'};
|
||||
}
|
||||
const amountGtZero = transaction.getAmount() >= 0
|
||||
|
||||
function transactionBackgroundColor() {
|
||||
var amount = transaction.getAmount();
|
||||
if (amount == 0) {
|
||||
return 'white'
|
||||
} else if (amount < 0) {
|
||||
return '#ffcdd2';
|
||||
} else if (amount > 0) {
|
||||
return '#c8e6c9';
|
||||
}
|
||||
}
|
||||
function PlusMinusSymbol() {
|
||||
if (transaction.getAmount() > 0) {
|
||||
return '+'
|
||||
} else if (transaction.getAmount() < 0) {
|
||||
return '-'
|
||||
}
|
||||
}
|
||||
|
||||
function TransactionBackgroundColor() {
|
||||
return {backgroundColor: transactionBackgroundColor()};
|
||||
function TransactionIcon() {
|
||||
if (amountGtZero) {
|
||||
return <CallReceivedIcon className={classes.transactionIcon}/>
|
||||
} else {
|
||||
return <CallMadeIcon className={classes.transactionIcon}/>
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Box
|
||||
p={1}
|
||||
m={0}
|
||||
style={TransactionBackgroundColor()}
|
||||
onClick={onTransactionClick}
|
||||
<Card
|
||||
className={classes.root}
|
||||
onClick={onTransactionClick}
|
||||
>
|
||||
<Grid
|
||||
container
|
||||
direction="row"
|
||||
justify="flex-start"
|
||||
alignItems="flex-start"
|
||||
>
|
||||
<Grid item>
|
||||
{TransactionContent()}
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid
|
||||
container
|
||||
direction="row"
|
||||
justify="flex-start"
|
||||
alignItems="flex-start"
|
||||
>
|
||||
<Grid item>
|
||||
<Box color="secondary.main" fontWeight="fontWeightBold">
|
||||
{moment(transaction.getTimeStamp()*1000).fromNow()} (Block #{transaction.getBlockHeight()})
|
||||
</Box>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
)
|
||||
<CardHeader
|
||||
className={classes.transactionItemHeader}
|
||||
title={`${PlusMinusSymbol()}${Math.abs(transaction.getAmount())} sats`}
|
||||
subheader={moment.unix(transaction.getTimeStamp()).fromNow()}
|
||||
avatar={TransactionIcon()}
|
||||
action={
|
||||
<IconButton
|
||||
className={expanded ? classes.collapseBtn : classes.expandBtn}
|
||||
onClick={handleExpandClick}
|
||||
aria-expanded={expanded}
|
||||
aria-label="show more"
|
||||
>
|
||||
<ExpandMoreIcon />
|
||||
</IconButton>
|
||||
}
|
||||
/>
|
||||
<Collapse in={expanded} timeout="auto" unmountOnExit>
|
||||
{TransactionMoreDetails()}
|
||||
</Collapse>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,43 +0,0 @@
|
|||
import { makeStyles } from "@material-ui/styles";
|
||||
|
||||
export default makeStyles(theme => ({
|
||||
widgetWrapper: {
|
||||
display: "flex",
|
||||
minHeight: "100%",
|
||||
},
|
||||
widgetHeader: {
|
||||
padding: theme.spacing(3),
|
||||
paddingBottom: theme.spacing(1),
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
},
|
||||
widgetRoot: {
|
||||
boxShadow: theme.customShadows.widget,
|
||||
},
|
||||
widgetBody: {
|
||||
paddingBottom: theme.spacing(3),
|
||||
paddingRight: theme.spacing(3),
|
||||
paddingLeft: theme.spacing(3),
|
||||
},
|
||||
noPadding: {
|
||||
padding: 0,
|
||||
},
|
||||
paper: {
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
flexGrow: 1,
|
||||
overflow: "hidden",
|
||||
},
|
||||
moreButton: {
|
||||
margin: -theme.spacing(1),
|
||||
padding: 0,
|
||||
width: 40,
|
||||
height: 40,
|
||||
color: theme.palette.text.hint,
|
||||
"&:hover": {
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
color: "rgba(255, 255, 255, 0.35)",
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
|
@ -29,7 +29,7 @@ export default function Widget({
|
|||
|
||||
return (
|
||||
<div className={classes.widgetWrapper}>
|
||||
<Paper className={classes.paper} classes={{ root: classes.widgetRoot }}>
|
||||
<Paper className={classes.paper} classes={{ root: classes.widgetRoot }} elevation={3} square>
|
||||
<div className={classes.widgetHeader}>
|
||||
{header ? (
|
||||
header
|
||||
|
|
|
|||
|
|
@ -13,7 +13,8 @@ export default makeStyles(theme => ({
|
|||
alignItems: "center",
|
||||
},
|
||||
widgetRoot: {
|
||||
boxShadow: theme.customShadows.widget,
|
||||
// boxShadow: theme.customShadows.widget,
|
||||
backgroundColor: "#fafafa",
|
||||
},
|
||||
widgetBody: {
|
||||
paddingBottom: theme.spacing(3),
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import {useHistory} from "react-router-dom";
|
||||
// import { useParams } from 'react-router-dom';
|
||||
// import {useHistory} from "react-router-dom";
|
||||
import {
|
||||
Grid,
|
||||
Button,
|
||||
|
|
@ -9,20 +9,7 @@ import {
|
|||
Tab,
|
||||
Box,
|
||||
} from "@material-ui/core";
|
||||
import { useTheme } from "@material-ui/styles";
|
||||
import {
|
||||
ResponsiveContainer,
|
||||
ComposedChart,
|
||||
AreaChart,
|
||||
LineChart,
|
||||
Line,
|
||||
Area,
|
||||
PieChart,
|
||||
Pie,
|
||||
Cell,
|
||||
YAxis,
|
||||
XAxis,
|
||||
} from "recharts";
|
||||
// import { useTheme } from "@material-ui/styles";
|
||||
|
||||
// styles
|
||||
import useStyles from "./styles";
|
||||
|
|
@ -45,10 +32,10 @@ import {
|
|||
lndListChannelsRequest,
|
||||
lndPendingChannelsRequest,
|
||||
} from "../../squeakclient/requests"
|
||||
import FormLabel from "@material-ui/core/FormLabel";
|
||||
|
||||
export default function WalletPage() {
|
||||
var classes = useStyles();
|
||||
var theme = useTheme();
|
||||
const classes = useStyles();
|
||||
|
||||
const [lndInfo, setLndInfo] = useState(null);
|
||||
const [walletBalance, setWalletBalance] = useState(null);
|
||||
|
|
@ -128,18 +115,13 @@ export default function WalletPage() {
|
|||
|
||||
function ReceiveBitcoinButton() {
|
||||
return (
|
||||
<>
|
||||
<Grid item xs={12}>
|
||||
<div className={classes.root}>
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={() => {
|
||||
handleClickOpenReceiveBitcoinDialog();
|
||||
}}>Receive Bitcoin
|
||||
</Button>
|
||||
</div>
|
||||
</Grid>
|
||||
</>
|
||||
<Button
|
||||
variant="contained"
|
||||
className={classes.button}
|
||||
onClick={() => {
|
||||
handleClickOpenReceiveBitcoinDialog();
|
||||
}}>Receive Bitcoin
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
@ -211,219 +193,194 @@ export default function WalletPage() {
|
|||
function BalanceGridItem() {
|
||||
return (
|
||||
<Grid item xs={12}>
|
||||
<Widget disableWidgetMenu>
|
||||
<div>
|
||||
<Typography variant="h1" className={classes.text}>
|
||||
{walletBalance.getTotalBalance()} sats
|
||||
</Typography>
|
||||
</div>
|
||||
<Grid
|
||||
container
|
||||
direction="row"
|
||||
justify="flex-start"
|
||||
alignItems="center"
|
||||
>
|
||||
<Grid item>
|
||||
<Typography color="text" colorBrightness="secondary">
|
||||
unconfirmed balance (sats)
|
||||
</Typography>
|
||||
<Typography size="md">{walletBalance.getUnconfirmedBalance()}</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid
|
||||
container
|
||||
direction="row"
|
||||
justify="flex-start"
|
||||
alignItems="center"
|
||||
>
|
||||
<Grid item>
|
||||
<Typography color="text" colorBrightness="secondary">
|
||||
confirmed balance (sats):
|
||||
</Typography>
|
||||
<Typography size="md">{walletBalance.getConfirmedBalance()}</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid
|
||||
container
|
||||
direction="row"
|
||||
justify="flex-start"
|
||||
alignItems="center"
|
||||
>
|
||||
<Grid item>
|
||||
<Typography color="text" colorBrightness="secondary">
|
||||
receive bitcoin:
|
||||
</Typography>
|
||||
{ReceiveBitcoinButton()}
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Widget>
|
||||
<Widget disableWidgetMenu>
|
||||
<Grid
|
||||
container
|
||||
direction="column"
|
||||
justify="flex-start"
|
||||
spacing={2}
|
||||
>
|
||||
<Grid item>
|
||||
<Typography variant="h1">
|
||||
{walletBalance.getTotalBalance()} sats
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<FormLabel>
|
||||
Unconfirmed Balance (sats)
|
||||
</FormLabel>
|
||||
<Typography size="md">
|
||||
{walletBalance.getUnconfirmedBalance()}
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<FormLabel>
|
||||
Confirmed Balance (sats)
|
||||
</FormLabel>
|
||||
<Typography size="md">
|
||||
{walletBalance.getConfirmedBalance()}
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
{ReceiveBitcoinButton()}
|
||||
</Widget>
|
||||
</Grid>
|
||||
)
|
||||
}
|
||||
|
||||
function StatusGridItem() {
|
||||
return (
|
||||
<Grid item xs={12}>
|
||||
<Widget disableWidgetMenu>
|
||||
<Grid
|
||||
container
|
||||
direction="row"
|
||||
justify="flex-start"
|
||||
alignItems="center"
|
||||
>
|
||||
<Grid item>
|
||||
<Typography color="text" colorBrightness="secondary">
|
||||
node pubkey
|
||||
</Typography>
|
||||
<Typography size="md">{lndInfo.getIdentityPubkey()}</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Grid
|
||||
container
|
||||
direction="row"
|
||||
justify="flex-start"
|
||||
alignItems="center"
|
||||
>
|
||||
<Grid item>
|
||||
<Typography color="text" colorBrightness="secondary">
|
||||
synced to chain
|
||||
</Typography>
|
||||
<Typography size="md">{lndInfo.getSyncedToChain().toString()}</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid
|
||||
container
|
||||
direction="row"
|
||||
justify="flex-start"
|
||||
alignItems="center"
|
||||
>
|
||||
<Grid item>
|
||||
<Typography color="text" colorBrightness="secondary">
|
||||
synced to graph
|
||||
</Typography>
|
||||
<Typography size="md">{lndInfo.getSyncedToGraph().toString()}</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid
|
||||
container
|
||||
direction="row"
|
||||
justify="flex-start"
|
||||
alignItems="center"
|
||||
>
|
||||
<Grid item>
|
||||
<Typography color="text" colorBrightness="secondary">
|
||||
block height
|
||||
</Typography>
|
||||
<Typography size="md">{lndInfo.getBlockHeight()}</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Widget>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Widget disableWidgetMenu>
|
||||
<Grid
|
||||
container
|
||||
direction="column"
|
||||
justify="flex-start"
|
||||
spacing={2}
|
||||
>
|
||||
<Grid item>
|
||||
<FormLabel>
|
||||
Node Pubkey
|
||||
</FormLabel>
|
||||
<Typography size="md">{lndInfo.getIdentityPubkey()}</Typography>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<FormLabel>
|
||||
Synced to Chain
|
||||
</FormLabel>
|
||||
<Typography size="md">{lndInfo.getSyncedToChain().toString()}</Typography>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<FormLabel>
|
||||
Synced to Graph
|
||||
</FormLabel>
|
||||
<Typography size="md">{lndInfo.getSyncedToGraph().toString()}</Typography>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<FormLabel>
|
||||
Block Height
|
||||
</FormLabel>
|
||||
<Typography size="md">{lndInfo.getBlockHeight()}</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Widget>
|
||||
</Grid>
|
||||
)
|
||||
}
|
||||
|
||||
function TransactionsGridItem() {
|
||||
return (
|
||||
<Grid item xs={12}>
|
||||
<Widget disableWidgetMenu>
|
||||
<Grid
|
||||
container
|
||||
direction="row"
|
||||
justify="flex-start"
|
||||
alignItems="center"
|
||||
>
|
||||
<Grid item xs={12}>
|
||||
{transactions.map(transaction =>
|
||||
<Box
|
||||
p={1}
|
||||
key={transaction.getTxHash()}
|
||||
>
|
||||
<TransactionItem
|
||||
key={transaction.getTxHash()}
|
||||
// handleTransactionClick={() => goToSqueakPage(transaction.getSqueakHash())}
|
||||
handleTransactionClick={() => console.log("clicked transaction")}
|
||||
transaction={transaction}>
|
||||
</TransactionItem>
|
||||
</Box>
|
||||
)}
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Widget>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12}>
|
||||
<Widget disableWidgetMenu>
|
||||
<Grid
|
||||
container
|
||||
direction="row"
|
||||
justify="flex-start"
|
||||
alignItems="center"
|
||||
>
|
||||
<Grid item xs={12}>
|
||||
{transactions.map(transaction =>
|
||||
<Box
|
||||
p={1}
|
||||
key={transaction.getTxHash()}
|
||||
>
|
||||
<TransactionItem
|
||||
key={transaction.getTxHash()}
|
||||
// handleTransactionClick={() => goToSqueakPage(transaction.getSqueakHash())}
|
||||
handleTransactionClick={() => console.log("clicked transaction")}
|
||||
transaction={transaction}>
|
||||
</TransactionItem>
|
||||
</Box>
|
||||
)}
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Widget>
|
||||
</Grid>
|
||||
)
|
||||
}
|
||||
|
||||
function PeersGridItem() {
|
||||
return (
|
||||
<Grid item xs={12}>
|
||||
<Widget disableWidgetMenu>
|
||||
<Grid
|
||||
container
|
||||
direction="row"
|
||||
justify="flex-start"
|
||||
alignItems="center"
|
||||
>
|
||||
<Grid item xs={12}>
|
||||
{peers.map(peer =>
|
||||
<Box
|
||||
p={1}
|
||||
key={peer.getPubKey()}
|
||||
>
|
||||
<LightningPeerListItem
|
||||
key={peer.getPubKey()}
|
||||
// handleTransactionClick={() => goToSqueakPage(transaction.getSqueakHash())}
|
||||
handlePeerClick={() => console.log("clicked peer")}
|
||||
peer={peer}>
|
||||
</LightningPeerListItem>
|
||||
</Box>
|
||||
)}
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Widget>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12}>
|
||||
<Widget disableWidgetMenu>
|
||||
<Grid
|
||||
container
|
||||
direction="row"
|
||||
justify="flex-start"
|
||||
alignItems="center"
|
||||
>
|
||||
<Grid item xs={12}>
|
||||
{peers.map(peer =>
|
||||
<Box
|
||||
p={1}
|
||||
key={peer.getPubKey()}
|
||||
>
|
||||
<LightningPeerListItem
|
||||
key={peer.getPubKey()}
|
||||
// handleTransactionClick={() => goToSqueakPage(transaction.getSqueakHash())}
|
||||
handlePeerClick={() => console.log("clicked peer")}
|
||||
peer={peer}>
|
||||
</LightningPeerListItem>
|
||||
</Box>
|
||||
)}
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Widget>
|
||||
</Grid>
|
||||
)
|
||||
}
|
||||
|
||||
function ChannelsGridItem() {
|
||||
return (
|
||||
<Grid item xs={12}>
|
||||
<Widget disableWidgetMenu>
|
||||
<Grid
|
||||
container
|
||||
direction="row"
|
||||
justify="flex-start"
|
||||
alignItems="center"
|
||||
>
|
||||
<Grid item xs={12}>
|
||||
{pendingChannels.getPendingOpenChannelsList().map(pendingOpenChannel =>
|
||||
<Box
|
||||
p={1}
|
||||
key={pendingOpenChannel.getChannel().getChannelPoint()}
|
||||
>
|
||||
<PendingOpenChannelItem
|
||||
key={pendingOpenChannel.getChannel().getChannelPoint()}
|
||||
pendingOpenChannel={pendingOpenChannel}>
|
||||
</PendingOpenChannelItem>
|
||||
</Box>
|
||||
)}
|
||||
{channels.map(channel =>
|
||||
<Box
|
||||
p={1}
|
||||
key={channel.getChannelPoint()}
|
||||
>
|
||||
<ChannelItem
|
||||
key={channel.getChannelPoint()}
|
||||
channel={channel}>
|
||||
</ChannelItem>
|
||||
</Box>
|
||||
)}
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Widget>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Widget disableWidgetMenu>
|
||||
<Grid
|
||||
container
|
||||
direction="row"
|
||||
justify="flex-start"
|
||||
alignItems="center"
|
||||
>
|
||||
{/*<Grid item xs={6}>*/}
|
||||
<Grid item xs={12}>
|
||||
{pendingChannels.getPendingOpenChannelsList().map(pendingOpenChannel =>
|
||||
<Box
|
||||
p={1}
|
||||
key={pendingOpenChannel.getChannel().getChannelPoint()}
|
||||
>
|
||||
<PendingOpenChannelItem
|
||||
key={pendingOpenChannel.getChannel().getChannelPoint()}
|
||||
pendingOpenChannel={pendingOpenChannel}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
{channels.map(channel =>
|
||||
<Box
|
||||
p={1}
|
||||
key={channel.getChannelPoint()}
|
||||
>
|
||||
<ChannelItem
|
||||
key={channel.getChannelPoint()}
|
||||
channel={channel}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
{/*{pendingChannels.getPendingClosingChannelsList().map(pendingClosingChannel =>*/}
|
||||
{/* <Box*/}
|
||||
{/* p={1}*/}
|
||||
{/* key={pendingClosingChannel.getChannel().getChannelPoint()}*/}
|
||||
{/* >*/}
|
||||
{/* <ChannelItem*/}
|
||||
{/* key={pendingClosingChannel.getChannel().getChannelPoint()}*/}
|
||||
{/* pendingOpenChannel={pendingClosingChannel}*/}
|
||||
{/* status={'pending-closing'}*/}
|
||||
{/* >*/}
|
||||
{/* </ChannelItem>*/}
|
||||
{/* </Box>*/}
|
||||
{/*)}*/}
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Widget>
|
||||
</Grid>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,15 +1,130 @@
|
|||
import { makeStyles } from "@material-ui/styles";
|
||||
|
||||
export default makeStyles(theme => ({
|
||||
dashedBorder: {
|
||||
border: "1px dashed",
|
||||
borderColor: theme.palette.primary.main,
|
||||
padding: theme.spacing(2),
|
||||
paddingTop: theme.spacing(4),
|
||||
paddingBottom: theme.spacing(4),
|
||||
marginTop: theme.spacing(1),
|
||||
root: {
|
||||
paddingTop: '0.5rem',
|
||||
minWidth: 275,
|
||||
alignItems: 'center', // LightningPeerListItem.js
|
||||
'&:hover': {
|
||||
boxShadow: ({clickable}) => clickable ?
|
||||
'0px 4px 3px -1px rgba(0,0,0,0.2), 0 3px 3px -2px #B2B2B21A, 0 1px 8px 0 #9A9A9A1A' :
|
||||
null,
|
||||
cursor: ({clickable}) => clickable ? 'pointer' : 'default',
|
||||
}
|
||||
},
|
||||
text: {
|
||||
marginBottom: theme.spacing(2),
|
||||
balanceGridItemLabel: { // BalanceGridItem
|
||||
fontWeight: 'bolder',
|
||||
color: '#6e6e6e',
|
||||
},
|
||||
}));
|
||||
channelItemLabel: { // ChannelItem.js
|
||||
fontSize: '0.8rem',
|
||||
fontWeight: 'bolder',
|
||||
paddingBottom: '0'
|
||||
},
|
||||
channelItemDataField: { // ChannelItem.js
|
||||
fontSize: '0.9rem',
|
||||
marginBottom: '0.5rem',
|
||||
},
|
||||
button: { // ReceiveBitcoinButton
|
||||
marginTop: '1rem',
|
||||
},
|
||||
|
||||
// ChannelItem.js
|
||||
cardHeaderContainer: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
padding: '1.5rem 1rem 1rem 1rem',
|
||||
},
|
||||
channelIcon: {
|
||||
color: ({channelStatus}) => {
|
||||
if (channelStatus === 'open') {
|
||||
return 'green'
|
||||
} else if (channelStatus === 'pending-open') {
|
||||
return '#e2e200'
|
||||
} else if (channelStatus === 'pending-closed') {
|
||||
return 'red'
|
||||
}
|
||||
}
|
||||
},
|
||||
cardHeaderText: {
|
||||
paddingLeft: '0.2rem',
|
||||
},
|
||||
cardContentRoot: {
|
||||
paddingTop: '6px',
|
||||
paddingBottom: '12px',
|
||||
},
|
||||
title: { // ChannelItem.js, LightningPeerListItem.js
|
||||
fontSize: 14,
|
||||
},
|
||||
pos: { // ChannelItem.js, LightningPeerListItem.js
|
||||
marginBottom: 12,
|
||||
},
|
||||
|
||||
// TransactionItem.js
|
||||
transactionItemHeader: {
|
||||
paddingLeft: '0.75rem',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
color: ({amount}) => isNaN(amount) ? null :
|
||||
amount > 0 ? 'green' : 'red'
|
||||
},
|
||||
transactionIcon: {
|
||||
color: ({amount}) => amount > 0
|
||||
? "green"
|
||||
: "red"
|
||||
},
|
||||
transactionAmt: {
|
||||
marginLeft: '0.2rem',
|
||||
color: ({amount}) => amount > 0
|
||||
? "green"
|
||||
: "red"
|
||||
},
|
||||
inlineTimestamp: {
|
||||
marginLeft: '0.5rem',
|
||||
color: 'gray',
|
||||
},
|
||||
transactionMoreDetails: {
|
||||
whiteSpace: 'pre-line',
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
backgroundColor: '#f0f0f0',
|
||||
},
|
||||
detailItemLabel: {
|
||||
flex: 2,
|
||||
fontSize: '0.8rem',
|
||||
color: '#a0a0a0',
|
||||
paddingBottom: '0'
|
||||
},
|
||||
detailItemValue: {
|
||||
flex: 7,
|
||||
fontSize: '0.8rem',
|
||||
},
|
||||
expandBtn: {
|
||||
transform: 'rotate(0deg)',
|
||||
marginLeft: 'auto',
|
||||
transition: theme.transitions.create('transform', {
|
||||
duration: theme.transitions.duration.shortest,
|
||||
}),
|
||||
},
|
||||
collapseBtn: {
|
||||
transform: 'rotate(180deg)',
|
||||
marginLeft: 'auto',
|
||||
transition: theme.transitions.create('transform', {
|
||||
duration: theme.transitions.duration.shortest,
|
||||
}),
|
||||
},
|
||||
|
||||
|
||||
// Widget.js
|
||||
widgetRoot: {
|
||||
backgroundColor: "#fafafa",
|
||||
},
|
||||
|
||||
|
||||
// LightningPeerListItem.js
|
||||
bullet: {
|
||||
display: 'inline-block',
|
||||
margin: '0 2px',
|
||||
transform: 'scale(0.8)',
|
||||
},
|
||||
}));
|
||||
Loading…
Add table
Add a link
Reference in a new issue