mirrors/thunderhub
1
0
Fork 0
mirror of https://github.com/apotdevin/thunderhub.git synced 2025-02-23 14:40:27 +01:00
Code Issues Projects Releases Wiki Activity

chore: channel queries cleanup

Browse source
This commit is contained in:
AP 2020-01-12 13:14:25 +01:00
parent 7a471abe67
commit 4727049372
9 changed files with 220 additions and 186 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

111
src/components/channels/channels/ChannelCard.tsx
View file

@ -18,8 +18,6 @@ import {
import { useSettings } from '../../../context/SettingsContext'; import { useSettings } from '../../../context/SettingsContext';
import { import {
getStatusDot, getStatusDot,
getPrivate,
getSymbol,
getTooltipType, getTooltipType,
getFormatDate, getFormatDate,
getDateDif, getDateDif,
@ -30,11 +28,25 @@ import Modal from '../../modal/ReactModal';
import { CloseChannel } from '../../closeChannel/CloseChannel'; import { CloseChannel } from '../../closeChannel/CloseChannel';
import styled from 'styled-components'; import styled from 'styled-components';
import { AdminSwitch } from '../../adminSwitch/AdminSwitch'; import { AdminSwitch } from '../../adminSwitch/AdminSwitch';
import { DownArrow, UpArrow, EyeOff } from '../../generic/Icons';
const CloseButton = styled(ColorButton)` const CloseButton = styled(ColorButton)`
margin-left: auto; margin-left: auto;
`; `;
const IconPadding = styled.div`
margin-left: 16px;
margin-right: 8px;
`;
const getSymbol = (status: boolean) => {
return status ? <UpArrow /> : <DownArrow />;
};
const getPrivate = (status: boolean) => {
return status && <EyeOff />;
};
interface ChannelCardProps { interface ChannelCardProps {
channelInfo: any; channelInfo: any;
index: number; index: number;
@ -63,41 +75,41 @@ export const ChannelCard = ({
const { const {
capacity, capacity,
commitTransactionFee, commit_transaction_fee,
commitTransactionWeight, commit_transaction_weight,
id, id,
isActive, is_active,
isClosing, is_closing,
isOpening, is_opening,
isPartnerInitiated, is_partner_initiated,
isPrivate, is_private,
isStaticRemoteKey, is_static_remote_key,
localBalance, local_balance,
localReserve, local_reserve,
partnerPublicKey, partner_public_key,
received, received,
remoteBalance, remote_balance,
remoteReserve, remote_reserve,
sent, sent,
timeOffline, time_offline,
timeOnline, time_online,
transactionId, transaction_id,
transactionVout, transaction_vout,
unsettledBalance, unsettled_balance,
partnerNodeInfo, partner_node_info,
} = channelInfo; } = channelInfo;
const { const {
alias, alias,
capacity: nodeCapacity, capacity: nodeCapacity,
channelCount, channel_count,
color: nodeColor, color: nodeColor,
lastUpdate, updated_at,
} = partnerNodeInfo; } = partner_node_info;
const formatBalance = getFormat(capacity); const formatBalance = getFormat(capacity);
const formatLocal = getFormat(localBalance); const formatLocal = getFormat(local_balance);
const formatRemote = getFormat(remoteBalance); const formatRemote = getFormat(remote_balance);
const formatreceived = getFormat(received); const formatreceived = getFormat(received);
const formatSent = getFormat(sent); const formatSent = getFormat(sent);
@ -113,31 +125,34 @@ export const ChannelCard = ({
return ( return (
<> <>
<Separation /> <Separation />
{renderLine('Node Public Key:', getNodeLink(partnerPublicKey))} {renderLine(
'Node Public Key:',
getNodeLink(partner_public_key),
)}
{renderLine( {renderLine(
'Transaction Id:', 'Transaction Id:',
getTransactionLink(transactionId), getTransactionLink(transaction_id),
)} )}
{renderLine('Channel Id:', id)} {renderLine('Channel Id:', id)}
{renderLine('Commit Fee:', getFormat(commitTransactionFee))} {renderLine('Commit Fee:', getFormat(commit_transaction_fee))}
{renderLine( {renderLine(
'Commit Weight:', 'Commit Weight:',
getFormat(commitTransactionWeight), getFormat(commit_transaction_weight),
)} )}
{renderLine('Is Static Remote Key:', isStaticRemoteKey)} {renderLine('Is Static Remote Key:', is_static_remote_key)}
{renderLine('Local Reserve:', getFormat(localReserve))} {renderLine('Local Reserve:', getFormat(local_reserve))}
{renderLine('Remote Reserve:', getFormat(remoteReserve))} {renderLine('Remote Reserve:', getFormat(remote_reserve))}
{renderLine('Time Offline:', timeOffline)} {renderLine('Time Offline:', time_offline)}
{renderLine('Time Online:', timeOnline)} {renderLine('Time Online:', time_online)}
{renderLine('Transaction Vout:', transactionVout)} {renderLine('Transaction Vout:', transaction_vout)}
{renderLine('Unsettled Balance:', unsettledBalance)} {renderLine('Unsettled Balance:', unsettled_balance)}
<Sub4Title>Partner Node Info</Sub4Title> <Sub4Title>Partner Node Info</Sub4Title>
{renderLine('Node Capacity:', getFormat(nodeCapacity))} {renderLine('Node Capacity:', getFormat(nodeCapacity))}
{renderLine('Channel Count:', channelCount)} {renderLine('Channel Count:', channel_count)}
{renderLine( {renderLine(
'Last Update:', 'Last Update:',
`${getDateDif(lastUpdate)} ago (${getFormatDate( `${getDateDif(updated_at)} ago (${getFormatDate(
lastUpdate, updated_at,
)})`, )})`,
)} )}
<AdminSwitch> <AdminSwitch>
@ -157,16 +172,18 @@ export const ChannelCard = ({
<SubCard color={nodeColor} key={index}> <SubCard color={nodeColor} key={index}>
<MainInfo onClick={() => handleClick()}> <MainInfo onClick={() => handleClick()}>
<StatusLine> <StatusLine>
{getStatusDot(isActive, 'active')} {getStatusDot(is_active, 'active')}
{getStatusDot(isOpening, 'opening')} {getStatusDot(is_opening, 'opening')}
{getStatusDot(isClosing, 'closing')} {getStatusDot(is_closing, 'closing')}
</StatusLine> </StatusLine>
<SingleLine> <SingleLine>
<NodeTitle>{alias ? alias : 'Unknown'}</NodeTitle> <NodeTitle>{alias ? alias : 'Unknown'}</NodeTitle>
<SingleLine> <SingleLine>
{formatBalance} {formatBalance}
{getPrivate(isPrivate)} <IconPadding>
{getSymbol(isPartnerInitiated)} {getPrivate(is_private)}
{getSymbol(is_partner_initiated)}
</IconPadding>
<div> <div>
<Progress <Progress
data-tip data-tip
@ -174,8 +191,8 @@ export const ChannelCard = ({
> >
<ProgressBar <ProgressBar
percent={getPercent( percent={getPercent(
localBalance, local_balance,
remoteBalance, remote_balance,
)} )}
/> />
</Progress> </Progress>

55
src/components/channels/pendingChannels/PendingCard.tsx
View file

@ -42,34 +42,31 @@ export const PendingCard = ({
}); });
const { const {
closeTransactionId, close_transaction_id,
isActive, is_active,
isClosing, is_closing,
isOpening, is_opening,
localBalance, local_balance,
// localReserve, // local_reserve,
partnerPublicKey, partner_public_key,
received, received,
remoteBalance, remote_balance,
// remoteReserve, // remote_reserve,
sent, sent,
transactionFee, transaction_fee,
transactionId, transaction_id,
// transactionVout, // transaction_vout,
partnerNodeInfo, partner_node_info,
} = channelInfo; } = channelInfo;
const { const {
alias, alias,
// capacity: nodeCapacity,
// channelCount,
color: nodeColor, color: nodeColor,
// lastUpdate } = partner_node_info;
} = partnerNodeInfo;
const formatBalance = getFormat(localBalance + remoteBalance); const formatBalance = getFormat(local_balance + remote_balance);
const formatLocal = getFormat(localBalance); const formatLocal = getFormat(local_balance);
const formatRemote = getFormat(remoteBalance); const formatRemote = getFormat(remote_balance);
const formatreceived = getFormat(received); const formatreceived = getFormat(received);
const formatSent = getFormat(sent); const formatSent = getFormat(sent);
@ -87,19 +84,19 @@ export const PendingCard = ({
<Separation /> <Separation />
<DetailLine> <DetailLine>
<div>Node Public Key:</div> <div>Node Public Key:</div>
{getNodeLink(partnerPublicKey)} {getNodeLink(partner_public_key)}
</DetailLine> </DetailLine>
<DetailLine> <DetailLine>
<div>Transaction Id:</div> <div>Transaction Id:</div>
{getTransactionLink(transactionId)} {getTransactionLink(transaction_id)}
</DetailLine> </DetailLine>
<DetailLine> <DetailLine>
<div>Transaction Fee:</div> <div>Transaction Fee:</div>
{getTransactionLink(transactionFee)} {getTransactionLink(transaction_fee)}
</DetailLine> </DetailLine>
<DetailLine> <DetailLine>
<div>Close Transaction Id:</div> <div>Close Transaction Id:</div>
{getTransactionLink(closeTransactionId)} {getTransactionLink(close_transaction_id)}
</DetailLine> </DetailLine>
{/* <DetailLine>{localReserve}</DetailLine> */} {/* <DetailLine>{localReserve}</DetailLine> */}
{/* <DetailLine>{remoteReserve}</DetailLine> */} {/* <DetailLine>{remoteReserve}</DetailLine> */}
@ -113,9 +110,9 @@ export const PendingCard = ({
return ( return (
<SubCard color={nodeColor} key={index} onClick={() => handleClick()}> <SubCard color={nodeColor} key={index} onClick={() => handleClick()}>
<StatusLine> <StatusLine>
{getStatusDot(isActive, 'active')} {getStatusDot(is_active, 'active')}
{getStatusDot(isOpening, 'opening')} {getStatusDot(is_opening, 'opening')}
{getStatusDot(isClosing, 'closing')} {getStatusDot(is_closing, 'closing')}
</StatusLine> </StatusLine>
<SingleLine> <SingleLine>
<NodeTitle>{alias ? alias : 'Unknown'}</NodeTitle> <NodeTitle>{alias ? alias : 'Unknown'}</NodeTitle>
@ -128,8 +125,8 @@ export const PendingCard = ({
> >
<ProgressBar <ProgressBar
percent={getPercent( percent={getPercent(
localBalance, local_balance,
remoteBalance, remote_balance,
)} )}
/> />
</Progress> </Progress>

9
src/components/generic/Helpers.tsx
View file

@ -1,7 +1,6 @@
import React from 'react'; import React from 'react';
import { SmallLink, DarkSubTitle } from './Styled'; import { SmallLink, DarkSubTitle } from './Styled';
import { StatusDot, DetailLine } from '../channels/Channels.style'; import { StatusDot, DetailLine } from '../channels/Channels.style';
import { DownArrow, UpArrow, EyeOff } from './Icons';
import { formatDistanceStrict, format } from 'date-fns'; import { formatDistanceStrict, format } from 'date-fns';
export const getTransactionLink = (transaction: string) => { export const getTransactionLink = (transaction: string) => {
@ -48,14 +47,6 @@ export const getStatusDot = (status: boolean, type: string) => {
} }
}; };
export const getSymbol = (status: boolean) => {
return status ? <DownArrow /> : <UpArrow />;
};
export const getPrivate = (status: boolean) => {
return status && <EyeOff />;
};
export const renderLine = (title: string, content: any) => { export const renderLine = (title: string, content: any) => {
if (!content) return null; if (!content) return null;
return ( return (

72
src/graphql/query.ts
View file

@ -58,33 +58,33 @@ export const GET_CHANNELS = gql`
query GetChannels($auth: String!) { query GetChannels($auth: String!) {
getChannels(auth: $auth) { getChannels(auth: $auth) {
capacity capacity
commitTransactionFee commit_transaction_fee
commitTransactionWeight commit_transaction_weight
id id
isActive is_active
isClosing is_closing
isOpening is_opening
isPartnerInitiated is_partner_initiated
isPrivate is_private
isStaticRemoteKey is_static_remote_key
localBalance local_balance
localReserve local_reserve
partnerPublicKey partner_public_key
received received
remoteBalance remote_balance
remoteReserve remote_reserve
sent sent
timeOffline time_offline
timeOnline time_online
transactionId transaction_id
transactionVout transaction_vout
unsettledBalance unsettled_balance
partnerNodeInfo { partner_node_info {
alias alias
capacity capacity
channelCount channel_count
color color
lastUpdate updated_at
} }
} }
} }
@ -93,26 +93,26 @@ export const GET_CHANNELS = gql`
export const GET_PENDING_CHANNELS = gql` export const GET_PENDING_CHANNELS = gql`
query GetPendingChannels($auth: String!) { query GetPendingChannels($auth: String!) {
getPendingChannels(auth: $auth) { getPendingChannels(auth: $auth) {
closeTransactionId close_transaction_id
isActive is_active
isClosing is_closing
isOpening is_opening
localBalance local_balance
localReserve local_reserve
partnerPublicKey partner_public_key
received received
remoteBalance remote_balance
remoteReserve remote_reserve
sent sent
transactionFee transaction_fee
transactionId transaction_id
transactionVout transaction_vout
partnerNodeInfo { partner_node_info {
alias alias
capacity capacity
channelCount channel_count
color color
lastUpdate updated_at
} }
} }
} }

1
src/images/MoshingDoodle.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 54 KiB

1
src/sections/footer/Footer.tsx
View file

@ -10,7 +10,6 @@ const FooterStyle = styled.div`
background-color: ${cardColor}; background-color: ${cardColor};
grid-area: footer; grid-area: footer;
height: 300px; height: 300px;
margin-top: 100px;
`; `;
const Wrapper = styled.div` const Wrapper = styled.div`

9
src/sections/header/Header.tsx
View file

@ -6,7 +6,7 @@ const HeaderStyle = styled.div`
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 10px 0; padding: 16px 0;
background-color: ${cardColor}; background-color: ${cardColor};
grid-area: header; grid-area: header;
margin-bottom: 10px; margin-bottom: 10px;
@ -15,9 +15,11 @@ const HeaderStyle = styled.div`
const Wrapper = styled.div` const Wrapper = styled.div`
max-width: 1000px; max-width: 1000px;
margin: 0 auto 0 auto; margin: 0 auto 0 auto;
padding: 0 0.5rem;
width: 100%; width: 100%;
height: 100%; height: 32px;
display: flex;
align-items: center;
justify-content: space-between;
`; `;
const HeaderTitle = styled.div` const HeaderTitle = styled.div`
@ -30,6 +32,7 @@ export const Header = () => {
<HeaderStyle> <HeaderStyle>
<Wrapper> <Wrapper>
<HeaderTitle>ThunderHub</HeaderTitle> <HeaderTitle>ThunderHub</HeaderTitle>
<button>Login</button>
</Wrapper> </Wrapper>
</HeaderStyle> </HeaderStyle>
); );

35
src/views/entry/Entry.tsx
View file

@ -4,13 +4,26 @@ import { LoginView } from '../login/Login';
import { SessionLogin } from '../login/SessionLogin'; import { SessionLogin } from '../login/SessionLogin';
import { useHistory } from 'react-router'; import { useHistory } from 'react-router';
import { HomePageView } from './HomePage'; import { HomePageView } from './HomePage';
import { ReactComponent as HeadlineImage } from '../../images/MoshingDoodle.svg';
const Login = styled.div` const Login = styled.div`
width: 100%;
max-width: 1000px;
margin: 0 auto 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
padding: 32px 0;
`;
const LeftHeadline = styled.div`
width: 50%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; `;
align-items: center;
margin: 20px 0; const StyledImage = styled(HeadlineImage)`
width: 500px;
`; `;
interface HomeProps { interface HomeProps {
@ -29,15 +42,23 @@ const EntryView = ({ session }: HomeProps) => {
return ( return (
<Login> <Login>
<h1>Welcome to ThunderHub</h1> <LeftHeadline>
<h2>This is the entry page</h2> <h1>Control The Power of Lighting</h1>
{session ? ( <h4>
Take full control of your lightning node. Think of something
else to place here. Think Think Think
</h4>
<h5>Available everywhere you can open a website.</h5>
<button>Login</button>
</LeftHeadline>
<StyledImage />
{/* {session ? (
<SessionLogin /> <SessionLogin />
) : login ? ( ) : login ? (
<LoginView /> <LoginView />
) : ( ) : (
<HomePageView setLogin={setLogin} /> <HomePageView setLogin={setLogin} />
)} )} */}
</Login> </Login>
); );
}; };

113
src/views/fees/Fees.tsx
View file

@ -22,6 +22,7 @@ import { UPDATE_FEES } from '../../graphql/mutation';
import { XSvg, ChevronRight } from '../../components/generic/Icons'; import { XSvg, ChevronRight } from '../../components/generic/Icons';
import styled from 'styled-components'; import styled from 'styled-components';
import { SecureButton } from '../../components/secureButton/SecureButton'; import { SecureButton } from '../../components/secureButton/SecureButton';
import { AdminSwitch } from '../../components/adminSwitch/AdminSwitch';
const SmallInput = styled(Input)` const SmallInput = styled(Input)`
max-width: 150px; max-width: 150px;
@ -58,60 +59,64 @@ export const FeesView = () => {
return ( return (
<> <>
<CardWithTitle> <AdminSwitch>
<SubTitle>Update Channel Fees</SubTitle> <CardWithTitle>
<Card> <SubTitle>Update Channel Fees</SubTitle>
<SingleLine> <Card>
<Sub4Title>Channel Fees</Sub4Title> <SingleLine>
<ColorButton <Sub4Title>Channel Fees</Sub4Title>
color={'white'} <ColorButton
onClick={() => setIsEdit(prev => !prev)} color={'white'}
> onClick={() => setIsEdit(prev => !prev)}
{isEdit ? <XSvg /> : 'Update'} >
</ColorButton> {isEdit ? <XSvg /> : 'Update'}
</SingleLine> </ColorButton>
{isEdit && ( </SingleLine>
<> {isEdit && (
<Separation /> <>
<SingleLine> <Separation />
<DarkSubTitle>{`Base Fee (Sats):`}</DarkSubTitle> <SingleLine>
<SmallInput <DarkSubTitle>{`Base Fee (Sats):`}</DarkSubTitle>
color={'white'} <SmallInput
type={'number'} color={'white'}
onChange={e => type={'number'}
setBaseFee(parseInt(e.target.value)) onChange={e =>
} setBaseFee(parseInt(e.target.value))
/> }
</SingleLine> />
<SingleLine> </SingleLine>
<DarkSubTitle>{`Fee Rate (Sats/Million):`}</DarkSubTitle> <SingleLine>
<SmallInput <DarkSubTitle>{`Fee Rate (Sats/Million):`}</DarkSubTitle>
color={'white'} <SmallInput
type={'number'} color={'white'}
onChange={e => type={'number'}
setFeeRate(parseInt(e.target.value)) onChange={e =>
} setFeeRate(parseInt(e.target.value))
/> }
</SingleLine> />
<SingleLine> </SingleLine>
<SecureButton <SingleLine>
callback={updateFees} <SecureButton
variables={{ callback={updateFees}
...(baseFee !== 0 && { baseFee }), variables={{
...(feeRate !== 0 && { feeRate }), ...(baseFee !== 0 && { baseFee }),
}} ...(feeRate !== 0 && { feeRate }),
color={'white'} }}
enabled={baseFee >= 0 || feeRate >= 0} color={'white'}
disabled={baseFee === 0 && feeRate === 0} enabled={baseFee >= 0 || feeRate >= 0}
> disabled={
Update Fees baseFee === 0 && feeRate === 0
<ChevronRight /> }
</SecureButton> >
</SingleLine> Update Fees
</> <ChevronRight />
)} </SecureButton>
</Card> </SingleLine>
</CardWithTitle> </>
)}
</Card>
</CardWithTitle>
</AdminSwitch>
<CardWithTitle> <CardWithTitle>
<SubTitle>Channel Fees</SubTitle> <SubTitle>Channel Fees</SubTitle>
<Card> <Card>