mirror of
https://github.com/lightninglabs/lightning-terminal.git
synced 2026-08-13 12:33:36 +02:00
feat: add NodeStatus component
This commit is contained in:
jamaljsr
parent
e0eedba632
commit
6b77767bc4
7 changed files with 201 additions and 53 deletions
13
app/src/assets/icons/bitcoin.svg
Normal file
13
app/src/assets/icons/bitcoin.svg
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="9px" height="11px" viewBox="0 0 9 11" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: sketchtool 64 (101010) - https://sketch.com -->
|
||||
<title>F7E8F894-50E7-42D2-8583-B6C2B18F674E</title>
|
||||
<desc>Created with sketchtool.</desc>
|
||||
<g id="Phase1-Delivery" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.418503534">
|
||||
<g id="Icon-extract" transform="translate(-17.000000, -155.000000)" fill="#FFFFFF" fill-rule="nonzero">
|
||||
<g id="BTC" transform="translate(16.000000, 155.724591)">
|
||||
<path d="M9.05692128,4.03480421 C9.22036186,2.989345 8.38853398,2.42733088 7.25112097,2.05240927 L7.62008102,0.636202426 L6.7192335,0.421365223 L6.36002344,1.80025177 C6.12320137,1.74378028 5.87996484,1.69050065 5.63826779,1.63771208 L6.00004364,0.249740989 L5.09970927,0.0349037865 L4.73049264,1.45061957 C4.53446658,1.40789766 4.34203261,1.3656668 4.15524338,1.32122619 L4.15626969,1.31680668 L2.91391603,1.01996305 L2.6742716,1.94069392 C2.6742716,1.94069392 3.3426589,2.08727428 3.32854708,2.09635882 C3.69340187,2.18352134 3.75934257,2.41456341 3.74830969,2.59772747 L3.32803392,4.21109348 C3.35317862,4.21723169 3.38576411,4.2260707 3.42168511,4.23982028 C3.39166542,4.23269996 3.35959309,4.22484306 3.32649445,4.21723169 L2.73738994,6.47731906 C2.69274526,6.58338725 2.57959409,6.74248955 2.32455495,6.6820896 C2.3335352,6.69461154 1.66976632,6.52568812 1.66976632,6.52568812 L1.22254979,7.51246608 L2.39485749,7.79212274 C2.61294931,7.84442025 2.8266793,7.89917305 3.03707377,7.95073398 L2.66426504,9.38314568 L3.56408625,9.59798288 L3.93330288,8.18079393 C4.17910519,8.24463127 4.41772331,8.30355805 4.65120985,8.35904743 L4.28327611,9.76960712 L5.18412363,9.98444432 L5.55693236,8.55473343 C7.09306854,8.83291691 8.24818548,8.72071051 8.73440196,7.39117514 C9.1261975,6.32067205 8.71490198,5.70316854 7.90667934,5.30050224 C8.49527069,5.17061781 8.93863854,4.80011571 9.05692128,4.03480421 L9.05692128,4.03480421 Z M6.99864761,6.79675129 C6.72025981,7.86725438 4.83671619,7.28854434 4.22605908,7.14343715 L4.72074265,5.24574945 C5.33139976,5.39159322 7.28960776,5.68033442 6.99864761,6.79675129 Z M7.27729199,4.01933593 C7.02327916,4.9931009 5.45558381,4.49836151 4.94704499,4.37707056 L5.39554441,2.65591766 C5.90408323,2.77720861 7.54182455,3.00358564 7.27729199,4.01933593 L7.27729199,4.01933593 Z" id="Shape-Copy-2"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
22
app/src/assets/icons/bolt.svg
Normal file
22
app/src/assets/icons/bolt.svg
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="10px" height="10px" viewBox="0 0 10 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: sketchtool 64 (101010) - https://sketch.com -->
|
||||
<title>BF2E6425-3766-4AB7-B1A7-221A153A9A9C</title>
|
||||
<desc>Created with sketchtool.</desc>
|
||||
<defs>
|
||||
<path d="M9.39492236,4.12 C9.30916635,3.94833333 9.18053234,3.8625 9.00902032,3.8625 L5.62165804,3.8625 L6.00756007,0.90125 C6.05043808,0.729583333 5.92180406,0.515 5.75029205,0.472083333 C5.57878004,0.38625 5.36439002,0.429166667 5.23575601,0.600833333 L0.947955648,5.75083333 C0.862199641,5.87958333 0.819321637,6.05125 0.905077644,6.22291667 C0.990833651,6.35166667 1.11946766,6.4375 1.29097968,6.4375 L4.67834196,6.4375 L4.29243993,9.39875 C4.24956192,9.57041667 4.37819594,9.785 4.54970795,9.82791667 C4.59258595,9.87083333 4.67834196,9.87083333 4.72121996,9.87083333 C4.84985397,9.87083333 4.97848799,9.82791667 5.06424399,9.69916667 L9.35204435,4.54916667 C9.43780036,4.42041667 9.48067836,4.24875 9.39492236,4.12 Z" id="path-1"></path>
|
||||
</defs>
|
||||
<g id="Phase1-Delivery" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="Icon-extract" transform="translate(-16.000000, -123.000000)">
|
||||
<g id="Bolt-Alert" transform="translate(16.000000, 122.999582)">
|
||||
<mask id="mask-2" fill="white">
|
||||
<use xlink:href="#path-1"></use>
|
||||
</mask>
|
||||
<use id="Mask" fill="#000000" fill-rule="nonzero" xlink:href="#path-1"></use>
|
||||
<g id="Icon-🎨" mask="url(#mask-2)" fill="#F5406E">
|
||||
<rect id="Shape" x="0" y="0" width="10.3" height="10.3"></rect>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
58
app/src/components/NodeStatus.tsx
Normal file
58
app/src/components/NodeStatus.tsx
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
import React from 'react';
|
||||
import { observer } from 'mobx-react-lite';
|
||||
import { useStore } from 'store';
|
||||
import { SmallText, Title, XLargeText } from 'components/common/text';
|
||||
import { Bitcoin, Bolt } from './common/icons';
|
||||
import { styled } from './theme';
|
||||
|
||||
const Styled = {
|
||||
Wrapper: styled.div`
|
||||
line-height: 32px;
|
||||
`,
|
||||
Divider: styled.div`
|
||||
height: 2px;
|
||||
background-color: ${props => props.theme.colors.gray};
|
||||
margin: 20px 0;
|
||||
opacity: 0.5;
|
||||
`,
|
||||
StatusTitle: styled(Title)`
|
||||
margin-bottom: 10px;
|
||||
`,
|
||||
BoltIcon: styled(Bolt)`
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin-right: 5px;
|
||||
`,
|
||||
BitcoinIcon: styled(Bitcoin)`
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin-right: 5px;
|
||||
`,
|
||||
};
|
||||
|
||||
const NodeStatus: React.FC = () => {
|
||||
const { Wrapper, StatusTitle, BoltIcon, BitcoinIcon, Divider } = Styled;
|
||||
|
||||
const store = useStore();
|
||||
const { channelBalance, walletBalance } = store.balances || {
|
||||
channelBalance: 0,
|
||||
walletBalance: 0,
|
||||
};
|
||||
|
||||
return (
|
||||
<Wrapper>
|
||||
<StatusTitle>Node Status</StatusTitle>
|
||||
<XLargeText block>
|
||||
<BoltIcon />
|
||||
{channelBalance.toLocaleString()} SAT
|
||||
</XLargeText>
|
||||
<SmallText block>
|
||||
<BitcoinIcon />
|
||||
{walletBalance.toLocaleString()}
|
||||
</SmallText>
|
||||
<Divider />
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export default observer(NodeStatus);
|
||||
2
app/src/components/common/icons.tsx
Normal file
2
app/src/components/common/icons.tsx
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
export { ReactComponent as Bolt } from 'assets/icons/bolt.svg';
|
||||
export { ReactComponent as Bitcoin } from 'assets/icons/bitcoin.svg';
|
||||
32
app/src/components/common/text.tsx
Normal file
32
app/src/components/common/text.tsx
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
import { styled } from 'components/theme';
|
||||
|
||||
interface BlockProps {
|
||||
block?: boolean;
|
||||
}
|
||||
|
||||
export const Title = styled.div`
|
||||
font-size: ${props => props.theme.sizes.s};
|
||||
font-family: ${props => props.theme.fonts.semiBold};
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0;
|
||||
line-height: 19px;
|
||||
color: ${props => props.theme.colors.gray};
|
||||
`;
|
||||
|
||||
export const SmallText = styled.span<BlockProps>`
|
||||
${props => props.block && 'display: block;'}
|
||||
font-size: ${props => props.theme.sizes.s};
|
||||
letter-spacing: 0.22px;
|
||||
`;
|
||||
|
||||
export const LargeText = styled.span<BlockProps>`
|
||||
${props => props.block && 'display: block;'}
|
||||
font-size: ${props => props.theme.sizes.l};
|
||||
letter-spacing: 0.43px;
|
||||
`;
|
||||
|
||||
export const XLargeText = styled.span<BlockProps>`
|
||||
${props => props.block && 'display: block;'}
|
||||
font-size: ${props => props.theme.sizes.xl};
|
||||
letter-spacing: 0.43px;
|
||||
`;
|
||||
61
app/src/components/layout/NavMenu.tsx
Normal file
61
app/src/components/layout/NavMenu.tsx
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
import React from 'react';
|
||||
import { Title } from 'components/common/text';
|
||||
import { styled } from 'components/theme';
|
||||
|
||||
const Styled = {
|
||||
NavTitle: styled(Title)`
|
||||
padding: 8px 14px;
|
||||
`,
|
||||
Nav: styled.ul`
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
list-style: none;
|
||||
`,
|
||||
NavItem: styled.li`
|
||||
font-size: ${props => props.theme.sizes.s};
|
||||
|
||||
a {
|
||||
display: block;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
padding: 0 12px;
|
||||
border-left: 3px solid transparent;
|
||||
color: ${props => props.theme.colors.whitish};
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
border-left: 3px solid ${props => props.theme.colors.pink};
|
||||
}
|
||||
}
|
||||
|
||||
&.active a {
|
||||
border-left: 3px solid ${props => props.theme.colors.whitish};
|
||||
background-color: ${props => props.theme.colors.blue};
|
||||
margin-right: -17px;
|
||||
|
||||
&:hover {
|
||||
border-left: 3px solid ${props => props.theme.colors.pink};
|
||||
}
|
||||
}
|
||||
`,
|
||||
};
|
||||
|
||||
const NavMenu: React.FC = () => {
|
||||
const { NavTitle, Nav, NavItem } = Styled;
|
||||
|
||||
return (
|
||||
<>
|
||||
<NavTitle>Menu</NavTitle>
|
||||
<Nav>
|
||||
<NavItem className="active">
|
||||
<a href="#temp">Lightning Loop</a>
|
||||
</NavItem>
|
||||
<NavItem>
|
||||
<a href="#temp">Settings</a>
|
||||
</NavItem>
|
||||
</Nav>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default NavMenu;
|
||||
|
|
@ -1,62 +1,22 @@
|
|||
import React from 'react';
|
||||
import NodeStatus from 'components/NodeStatus';
|
||||
import { styled } from 'components/theme';
|
||||
import NavMenu from './NavMenu';
|
||||
|
||||
const Title = styled.div`
|
||||
font-size: ${props => props.theme.sizes.s};
|
||||
font-family: ${props => props.theme.fonts.semiBold};
|
||||
letter-spacing: 0;
|
||||
line-height: 19px;
|
||||
padding: 8px 14px;
|
||||
color: ${props => props.theme.colors.gray};
|
||||
`;
|
||||
|
||||
const Nav = styled.ul`
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
list-style: none;
|
||||
`;
|
||||
|
||||
const NavItem = styled.li`
|
||||
font-size: ${props => props.theme.sizes.s};
|
||||
|
||||
a {
|
||||
display: block;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
padding: 0 12px;
|
||||
border-left: 3px solid transparent;
|
||||
color: ${props => props.theme.colors.whitish};
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
border-left: 3px solid ${props => props.theme.colors.pink};
|
||||
}
|
||||
}
|
||||
|
||||
&.active a {
|
||||
border-left: 3px solid ${props => props.theme.colors.whitish};
|
||||
background-color: ${props => props.theme.colors.blue};
|
||||
margin-right: -17px;
|
||||
|
||||
&:hover {
|
||||
border-left: 3px solid ${props => props.theme.colors.pink};
|
||||
}
|
||||
}
|
||||
`;
|
||||
const Styled = {
|
||||
Wrapper: styled.div`
|
||||
padding-top: 75px;
|
||||
`,
|
||||
};
|
||||
|
||||
const Sidebar: React.FC = () => {
|
||||
const { Wrapper } = Styled;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Title>MENU</Title>
|
||||
<Nav>
|
||||
<NavItem className="active">
|
||||
<a href="#temp">Lightning Loop</a>
|
||||
</NavItem>
|
||||
<NavItem>
|
||||
<a href="#temp">Settings</a>
|
||||
</NavItem>
|
||||
</Nav>
|
||||
</>
|
||||
<Wrapper>
|
||||
<NodeStatus />
|
||||
<NavMenu />
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
export default Sidebar;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue