{header ? (
header
diff --git a/frontend/src/components/Widget/styles.js b/frontend/src/components/Widget/styles.js
index f2d64da1..bc8d5698 100644
--- a/frontend/src/components/Widget/styles.js
+++ b/frontend/src/components/Widget/styles.js
@@ -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),
diff --git a/frontend/src/pages/wallet/Wallet.js b/frontend/src/pages/wallet/Wallet.js
index 888dbcdb..451c1e12 100644
--- a/frontend/src/pages/wallet/Wallet.js
+++ b/frontend/src/pages/wallet/Wallet.js
@@ -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 (
- <>
-
-
-
-
-
-
+
)
}
@@ -211,219 +193,194 @@ export default function WalletPage() {
function BalanceGridItem() {
return (
-
-
-
- {walletBalance.getTotalBalance()} sats
-
-
-
-
-
- unconfirmed balance (sats)
-
- {walletBalance.getUnconfirmedBalance()}
-
-
-
-
-
- confirmed balance (sats):
-
- {walletBalance.getConfirmedBalance()}
-
-
-
-
-
- receive bitcoin:
-
- {ReceiveBitcoinButton()}
-
-
-
+
+
+
+
+ {walletBalance.getTotalBalance()} sats
+
+
+
+
+ Unconfirmed Balance (sats)
+
+
+ {walletBalance.getUnconfirmedBalance()}
+
+
+
+
+ Confirmed Balance (sats)
+
+
+ {walletBalance.getConfirmedBalance()}
+
+
+
+ {ReceiveBitcoinButton()}
+
)
}
function StatusGridItem() {
return (
-
-
-
-
-
- node pubkey
-
- {lndInfo.getIdentityPubkey()}
-
-
-
-
-
-
- synced to chain
-
- {lndInfo.getSyncedToChain().toString()}
-
-
-
-
-
- synced to graph
-
- {lndInfo.getSyncedToGraph().toString()}
-
-
-
-
-
- block height
-
- {lndInfo.getBlockHeight()}
-
-
-
-
+
+
+
+
+
+ Node Pubkey
+
+ {lndInfo.getIdentityPubkey()}
+
+
+
+ Synced to Chain
+
+ {lndInfo.getSyncedToChain().toString()}
+
+
+
+ Synced to Graph
+
+ {lndInfo.getSyncedToGraph().toString()}
+
+
+
+ Block Height
+
+ {lndInfo.getBlockHeight()}
+
+
+
+
)
}
function TransactionsGridItem() {
return (
-
-
-
-
- {transactions.map(transaction =>
-
- goToSqueakPage(transaction.getSqueakHash())}
- handleTransactionClick={() => console.log("clicked transaction")}
- transaction={transaction}>
-
-
- )}
-
-
-
-
-
+
+
+
+
+ {transactions.map(transaction =>
+
+ goToSqueakPage(transaction.getSqueakHash())}
+ handleTransactionClick={() => console.log("clicked transaction")}
+ transaction={transaction}>
+
+
+ )}
+
+
+
+
)
}
function PeersGridItem() {
return (
-
-
-
-
- {peers.map(peer =>
-
- goToSqueakPage(transaction.getSqueakHash())}
- handlePeerClick={() => console.log("clicked peer")}
- peer={peer}>
-
-
- )}
-
-
-
-
-
+
+
+
+
+ {peers.map(peer =>
+
+ goToSqueakPage(transaction.getSqueakHash())}
+ handlePeerClick={() => console.log("clicked peer")}
+ peer={peer}>
+
+
+ )}
+
+
+
+
)
}
function ChannelsGridItem() {
return (
-
-
-
-
- {pendingChannels.getPendingOpenChannelsList().map(pendingOpenChannel =>
-
-
-
-
- )}
- {channels.map(channel =>
-
-
-
-
- )}
-
-
-
-
+
+
+
+ {/**/}
+
+ {pendingChannels.getPendingOpenChannelsList().map(pendingOpenChannel =>
+
+
+
+ )}
+ {channels.map(channel =>
+
+
+
+ )}
+ {/*{pendingChannels.getPendingClosingChannelsList().map(pendingClosingChannel =>*/}
+ {/* */}
+ {/* */}
+ {/* */}
+ {/* */}
+ {/*)}*/}
+
+
+
+
)
}
diff --git a/frontend/src/pages/wallet/styles.js b/frontend/src/pages/wallet/styles.js
index 976accde..ed5ad274 100644
--- a/frontend/src/pages/wallet/styles.js
+++ b/frontend/src/pages/wallet/styles.js
@@ -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)',
+ },
+}));
\ No newline at end of file