mirror of
https://github.com/apotdevin/thunderhub.git
synced 2025-02-22 22:25:21 +01:00
chore: channel queries cleanup
This commit is contained in:
AP
parent
7a471abe67
commit
4727049372
9 changed files with 220 additions and 186 deletions
|
|
@ -18,8 +18,6 @@ import {
|
|||
import { useSettings } from '../../../context/SettingsContext';
|
||||
import {
|
||||
getStatusDot,
|
||||
getPrivate,
|
||||
getSymbol,
|
||||
getTooltipType,
|
||||
getFormatDate,
|
||||
getDateDif,
|
||||
|
|
@ -30,11 +28,25 @@ import Modal from '../../modal/ReactModal';
|
|||
import { CloseChannel } from '../../closeChannel/CloseChannel';
|
||||
import styled from 'styled-components';
|
||||
import { AdminSwitch } from '../../adminSwitch/AdminSwitch';
|
||||
import { DownArrow, UpArrow, EyeOff } from '../../generic/Icons';
|
||||
|
||||
const CloseButton = styled(ColorButton)`
|
||||
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 {
|
||||
channelInfo: any;
|
||||
index: number;
|
||||
|
|
@ -63,41 +75,41 @@ export const ChannelCard = ({
|
|||
|
||||
const {
|
||||
capacity,
|
||||
commitTransactionFee,
|
||||
commitTransactionWeight,
|
||||
commit_transaction_fee,
|
||||
commit_transaction_weight,
|
||||
id,
|
||||
isActive,
|
||||
isClosing,
|
||||
isOpening,
|
||||
isPartnerInitiated,
|
||||
isPrivate,
|
||||
isStaticRemoteKey,
|
||||
localBalance,
|
||||
localReserve,
|
||||
partnerPublicKey,
|
||||
is_active,
|
||||
is_closing,
|
||||
is_opening,
|
||||
is_partner_initiated,
|
||||
is_private,
|
||||
is_static_remote_key,
|
||||
local_balance,
|
||||
local_reserve,
|
||||
partner_public_key,
|
||||
received,
|
||||
remoteBalance,
|
||||
remoteReserve,
|
||||
remote_balance,
|
||||
remote_reserve,
|
||||
sent,
|
||||
timeOffline,
|
||||
timeOnline,
|
||||
transactionId,
|
||||
transactionVout,
|
||||
unsettledBalance,
|
||||
partnerNodeInfo,
|
||||
time_offline,
|
||||
time_online,
|
||||
transaction_id,
|
||||
transaction_vout,
|
||||
unsettled_balance,
|
||||
partner_node_info,
|
||||
} = channelInfo;
|
||||
|
||||
const {
|
||||
alias,
|
||||
capacity: nodeCapacity,
|
||||
channelCount,
|
||||
channel_count,
|
||||
color: nodeColor,
|
||||
lastUpdate,
|
||||
} = partnerNodeInfo;
|
||||
updated_at,
|
||||
} = partner_node_info;
|
||||
|
||||
const formatBalance = getFormat(capacity);
|
||||
const formatLocal = getFormat(localBalance);
|
||||
const formatRemote = getFormat(remoteBalance);
|
||||
const formatLocal = getFormat(local_balance);
|
||||
const formatRemote = getFormat(remote_balance);
|
||||
const formatreceived = getFormat(received);
|
||||
const formatSent = getFormat(sent);
|
||||
|
||||
|
|
@ -113,31 +125,34 @@ export const ChannelCard = ({
|
|||
return (
|
||||
<>
|
||||
<Separation />
|
||||
{renderLine('Node Public Key:', getNodeLink(partnerPublicKey))}
|
||||
{renderLine(
|
||||
'Node Public Key:',
|
||||
getNodeLink(partner_public_key),
|
||||
)}
|
||||
{renderLine(
|
||||
'Transaction Id:',
|
||||
getTransactionLink(transactionId),
|
||||
getTransactionLink(transaction_id),
|
||||
)}
|
||||
{renderLine('Channel Id:', id)}
|
||||
{renderLine('Commit Fee:', getFormat(commitTransactionFee))}
|
||||
{renderLine('Commit Fee:', getFormat(commit_transaction_fee))}
|
||||
{renderLine(
|
||||
'Commit Weight:',
|
||||
getFormat(commitTransactionWeight),
|
||||
getFormat(commit_transaction_weight),
|
||||
)}
|
||||
{renderLine('Is Static Remote Key:', isStaticRemoteKey)}
|
||||
{renderLine('Local Reserve:', getFormat(localReserve))}
|
||||
{renderLine('Remote Reserve:', getFormat(remoteReserve))}
|
||||
{renderLine('Time Offline:', timeOffline)}
|
||||
{renderLine('Time Online:', timeOnline)}
|
||||
{renderLine('Transaction Vout:', transactionVout)}
|
||||
{renderLine('Unsettled Balance:', unsettledBalance)}
|
||||
{renderLine('Is Static Remote Key:', is_static_remote_key)}
|
||||
{renderLine('Local Reserve:', getFormat(local_reserve))}
|
||||
{renderLine('Remote Reserve:', getFormat(remote_reserve))}
|
||||
{renderLine('Time Offline:', time_offline)}
|
||||
{renderLine('Time Online:', time_online)}
|
||||
{renderLine('Transaction Vout:', transaction_vout)}
|
||||
{renderLine('Unsettled Balance:', unsettled_balance)}
|
||||
<Sub4Title>Partner Node Info</Sub4Title>
|
||||
{renderLine('Node Capacity:', getFormat(nodeCapacity))}
|
||||
{renderLine('Channel Count:', channelCount)}
|
||||
{renderLine('Channel Count:', channel_count)}
|
||||
{renderLine(
|
||||
'Last Update:',
|
||||
`${getDateDif(lastUpdate)} ago (${getFormatDate(
|
||||
lastUpdate,
|
||||
`${getDateDif(updated_at)} ago (${getFormatDate(
|
||||
updated_at,
|
||||
)})`,
|
||||
)}
|
||||
<AdminSwitch>
|
||||
|
|
@ -157,16 +172,18 @@ export const ChannelCard = ({
|
|||
<SubCard color={nodeColor} key={index}>
|
||||
<MainInfo onClick={() => handleClick()}>
|
||||
<StatusLine>
|
||||
{getStatusDot(isActive, 'active')}
|
||||
{getStatusDot(isOpening, 'opening')}
|
||||
{getStatusDot(isClosing, 'closing')}
|
||||
{getStatusDot(is_active, 'active')}
|
||||
{getStatusDot(is_opening, 'opening')}
|
||||
{getStatusDot(is_closing, 'closing')}
|
||||
</StatusLine>
|
||||
<SingleLine>
|
||||
<NodeTitle>{alias ? alias : 'Unknown'}</NodeTitle>
|
||||
<SingleLine>
|
||||
{formatBalance}
|
||||
{getPrivate(isPrivate)}
|
||||
{getSymbol(isPartnerInitiated)}
|
||||
<IconPadding>
|
||||
{getPrivate(is_private)}
|
||||
{getSymbol(is_partner_initiated)}
|
||||
</IconPadding>
|
||||
<div>
|
||||
<Progress
|
||||
data-tip
|
||||
|
|
@ -174,8 +191,8 @@ export const ChannelCard = ({
|
|||
>
|
||||
<ProgressBar
|
||||
percent={getPercent(
|
||||
localBalance,
|
||||
remoteBalance,
|
||||
local_balance,
|
||||
remote_balance,
|
||||
)}
|
||||
/>
|
||||
</Progress>
|
||||
|
|
|
|||
|
|
@ -42,34 +42,31 @@ export const PendingCard = ({
|
|||
});
|
||||
|
||||
const {
|
||||
closeTransactionId,
|
||||
isActive,
|
||||
isClosing,
|
||||
isOpening,
|
||||
localBalance,
|
||||
// localReserve,
|
||||
partnerPublicKey,
|
||||
close_transaction_id,
|
||||
is_active,
|
||||
is_closing,
|
||||
is_opening,
|
||||
local_balance,
|
||||
// local_reserve,
|
||||
partner_public_key,
|
||||
received,
|
||||
remoteBalance,
|
||||
// remoteReserve,
|
||||
remote_balance,
|
||||
// remote_reserve,
|
||||
sent,
|
||||
transactionFee,
|
||||
transactionId,
|
||||
// transactionVout,
|
||||
partnerNodeInfo,
|
||||
transaction_fee,
|
||||
transaction_id,
|
||||
// transaction_vout,
|
||||
partner_node_info,
|
||||
} = channelInfo;
|
||||
|
||||
const {
|
||||
alias,
|
||||
// capacity: nodeCapacity,
|
||||
// channelCount,
|
||||
color: nodeColor,
|
||||
// lastUpdate
|
||||
} = partnerNodeInfo;
|
||||
} = partner_node_info;
|
||||
|
||||
const formatBalance = getFormat(localBalance + remoteBalance);
|
||||
const formatLocal = getFormat(localBalance);
|
||||
const formatRemote = getFormat(remoteBalance);
|
||||
const formatBalance = getFormat(local_balance + remote_balance);
|
||||
const formatLocal = getFormat(local_balance);
|
||||
const formatRemote = getFormat(remote_balance);
|
||||
const formatreceived = getFormat(received);
|
||||
const formatSent = getFormat(sent);
|
||||
|
||||
|
|
@ -87,19 +84,19 @@ export const PendingCard = ({
|
|||
<Separation />
|
||||
<DetailLine>
|
||||
<div>Node Public Key:</div>
|
||||
{getNodeLink(partnerPublicKey)}
|
||||
{getNodeLink(partner_public_key)}
|
||||
</DetailLine>
|
||||
<DetailLine>
|
||||
<div>Transaction Id:</div>
|
||||
{getTransactionLink(transactionId)}
|
||||
{getTransactionLink(transaction_id)}
|
||||
</DetailLine>
|
||||
<DetailLine>
|
||||
<div>Transaction Fee:</div>
|
||||
{getTransactionLink(transactionFee)}
|
||||
{getTransactionLink(transaction_fee)}
|
||||
</DetailLine>
|
||||
<DetailLine>
|
||||
<div>Close Transaction Id:</div>
|
||||
{getTransactionLink(closeTransactionId)}
|
||||
{getTransactionLink(close_transaction_id)}
|
||||
</DetailLine>
|
||||
{/* <DetailLine>{localReserve}</DetailLine> */}
|
||||
{/* <DetailLine>{remoteReserve}</DetailLine> */}
|
||||
|
|
@ -113,9 +110,9 @@ export const PendingCard = ({
|
|||
return (
|
||||
<SubCard color={nodeColor} key={index} onClick={() => handleClick()}>
|
||||
<StatusLine>
|
||||
{getStatusDot(isActive, 'active')}
|
||||
{getStatusDot(isOpening, 'opening')}
|
||||
{getStatusDot(isClosing, 'closing')}
|
||||
{getStatusDot(is_active, 'active')}
|
||||
{getStatusDot(is_opening, 'opening')}
|
||||
{getStatusDot(is_closing, 'closing')}
|
||||
</StatusLine>
|
||||
<SingleLine>
|
||||
<NodeTitle>{alias ? alias : 'Unknown'}</NodeTitle>
|
||||
|
|
@ -128,8 +125,8 @@ export const PendingCard = ({
|
|||
>
|
||||
<ProgressBar
|
||||
percent={getPercent(
|
||||
localBalance,
|
||||
remoteBalance,
|
||||
local_balance,
|
||||
remote_balance,
|
||||
)}
|
||||
/>
|
||||
</Progress>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
import React from 'react';
|
||||
import { SmallLink, DarkSubTitle } from './Styled';
|
||||
import { StatusDot, DetailLine } from '../channels/Channels.style';
|
||||
import { DownArrow, UpArrow, EyeOff } from './Icons';
|
||||
import { formatDistanceStrict, format } from 'date-fns';
|
||||
|
||||
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) => {
|
||||
if (!content) return null;
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -58,33 +58,33 @@ export const GET_CHANNELS = gql`
|
|||
query GetChannels($auth: String!) {
|
||||
getChannels(auth: $auth) {
|
||||
capacity
|
||||
commitTransactionFee
|
||||
commitTransactionWeight
|
||||
commit_transaction_fee
|
||||
commit_transaction_weight
|
||||
id
|
||||
isActive
|
||||
isClosing
|
||||
isOpening
|
||||
isPartnerInitiated
|
||||
isPrivate
|
||||
isStaticRemoteKey
|
||||
localBalance
|
||||
localReserve
|
||||
partnerPublicKey
|
||||
is_active
|
||||
is_closing
|
||||
is_opening
|
||||
is_partner_initiated
|
||||
is_private
|
||||
is_static_remote_key
|
||||
local_balance
|
||||
local_reserve
|
||||
partner_public_key
|
||||
received
|
||||
remoteBalance
|
||||
remoteReserve
|
||||
remote_balance
|
||||
remote_reserve
|
||||
sent
|
||||
timeOffline
|
||||
timeOnline
|
||||
transactionId
|
||||
transactionVout
|
||||
unsettledBalance
|
||||
partnerNodeInfo {
|
||||
time_offline
|
||||
time_online
|
||||
transaction_id
|
||||
transaction_vout
|
||||
unsettled_balance
|
||||
partner_node_info {
|
||||
alias
|
||||
capacity
|
||||
channelCount
|
||||
channel_count
|
||||
color
|
||||
lastUpdate
|
||||
updated_at
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -93,26 +93,26 @@ export const GET_CHANNELS = gql`
|
|||
export const GET_PENDING_CHANNELS = gql`
|
||||
query GetPendingChannels($auth: String!) {
|
||||
getPendingChannels(auth: $auth) {
|
||||
closeTransactionId
|
||||
isActive
|
||||
isClosing
|
||||
isOpening
|
||||
localBalance
|
||||
localReserve
|
||||
partnerPublicKey
|
||||
close_transaction_id
|
||||
is_active
|
||||
is_closing
|
||||
is_opening
|
||||
local_balance
|
||||
local_reserve
|
||||
partner_public_key
|
||||
received
|
||||
remoteBalance
|
||||
remoteReserve
|
||||
remote_balance
|
||||
remote_reserve
|
||||
sent
|
||||
transactionFee
|
||||
transactionId
|
||||
transactionVout
|
||||
partnerNodeInfo {
|
||||
transaction_fee
|
||||
transaction_id
|
||||
transaction_vout
|
||||
partner_node_info {
|
||||
alias
|
||||
capacity
|
||||
channelCount
|
||||
channel_count
|
||||
color
|
||||
lastUpdate
|
||||
updated_at
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
1
src/images/MoshingDoodle.svg
Normal file
1
src/images/MoshingDoodle.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 54 KiB |
|
|
@ -10,7 +10,6 @@ const FooterStyle = styled.div`
|
|||
background-color: ${cardColor};
|
||||
grid-area: footer;
|
||||
height: 300px;
|
||||
margin-top: 100px;
|
||||
`;
|
||||
|
||||
const Wrapper = styled.div`
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ const HeaderStyle = styled.div`
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 10px 0;
|
||||
padding: 16px 0;
|
||||
background-color: ${cardColor};
|
||||
grid-area: header;
|
||||
margin-bottom: 10px;
|
||||
|
|
@ -15,9 +15,11 @@ const HeaderStyle = styled.div`
|
|||
const Wrapper = styled.div`
|
||||
max-width: 1000px;
|
||||
margin: 0 auto 0 auto;
|
||||
padding: 0 0.5rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
`;
|
||||
|
||||
const HeaderTitle = styled.div`
|
||||
|
|
@ -30,6 +32,7 @@ export const Header = () => {
|
|||
<HeaderStyle>
|
||||
<Wrapper>
|
||||
<HeaderTitle>ThunderHub</HeaderTitle>
|
||||
<button>Login</button>
|
||||
</Wrapper>
|
||||
</HeaderStyle>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -4,13 +4,26 @@ import { LoginView } from '../login/Login';
|
|||
import { SessionLogin } from '../login/SessionLogin';
|
||||
import { useHistory } from 'react-router';
|
||||
import { HomePageView } from './HomePage';
|
||||
import { ReactComponent as HeadlineImage } from '../../images/MoshingDoodle.svg';
|
||||
|
||||
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;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 20px 0;
|
||||
`;
|
||||
|
||||
const StyledImage = styled(HeadlineImage)`
|
||||
width: 500px;
|
||||
`;
|
||||
|
||||
interface HomeProps {
|
||||
|
|
@ -29,15 +42,23 @@ const EntryView = ({ session }: HomeProps) => {
|
|||
|
||||
return (
|
||||
<Login>
|
||||
<h1>Welcome to ThunderHub</h1>
|
||||
<h2>This is the entry page</h2>
|
||||
{session ? (
|
||||
<LeftHeadline>
|
||||
<h1>Control The Power of Lighting</h1>
|
||||
<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 />
|
||||
) : login ? (
|
||||
<LoginView />
|
||||
) : (
|
||||
<HomePageView setLogin={setLogin} />
|
||||
)}
|
||||
)} */}
|
||||
</Login>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@ import { UPDATE_FEES } from '../../graphql/mutation';
|
|||
import { XSvg, ChevronRight } from '../../components/generic/Icons';
|
||||
import styled from 'styled-components';
|
||||
import { SecureButton } from '../../components/secureButton/SecureButton';
|
||||
import { AdminSwitch } from '../../components/adminSwitch/AdminSwitch';
|
||||
|
||||
const SmallInput = styled(Input)`
|
||||
max-width: 150px;
|
||||
|
|
@ -58,60 +59,64 @@ export const FeesView = () => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<CardWithTitle>
|
||||
<SubTitle>Update Channel Fees</SubTitle>
|
||||
<Card>
|
||||
<SingleLine>
|
||||
<Sub4Title>Channel Fees</Sub4Title>
|
||||
<ColorButton
|
||||
color={'white'}
|
||||
onClick={() => setIsEdit(prev => !prev)}
|
||||
>
|
||||
{isEdit ? <XSvg /> : 'Update'}
|
||||
</ColorButton>
|
||||
</SingleLine>
|
||||
{isEdit && (
|
||||
<>
|
||||
<Separation />
|
||||
<SingleLine>
|
||||
<DarkSubTitle>{`Base Fee (Sats):`}</DarkSubTitle>
|
||||
<SmallInput
|
||||
color={'white'}
|
||||
type={'number'}
|
||||
onChange={e =>
|
||||
setBaseFee(parseInt(e.target.value))
|
||||
}
|
||||
/>
|
||||
</SingleLine>
|
||||
<SingleLine>
|
||||
<DarkSubTitle>{`Fee Rate (Sats/Million):`}</DarkSubTitle>
|
||||
<SmallInput
|
||||
color={'white'}
|
||||
type={'number'}
|
||||
onChange={e =>
|
||||
setFeeRate(parseInt(e.target.value))
|
||||
}
|
||||
/>
|
||||
</SingleLine>
|
||||
<SingleLine>
|
||||
<SecureButton
|
||||
callback={updateFees}
|
||||
variables={{
|
||||
...(baseFee !== 0 && { baseFee }),
|
||||
...(feeRate !== 0 && { feeRate }),
|
||||
}}
|
||||
color={'white'}
|
||||
enabled={baseFee >= 0 || feeRate >= 0}
|
||||
disabled={baseFee === 0 && feeRate === 0}
|
||||
>
|
||||
Update Fees
|
||||
<ChevronRight />
|
||||
</SecureButton>
|
||||
</SingleLine>
|
||||
</>
|
||||
)}
|
||||
</Card>
|
||||
</CardWithTitle>
|
||||
<AdminSwitch>
|
||||
<CardWithTitle>
|
||||
<SubTitle>Update Channel Fees</SubTitle>
|
||||
<Card>
|
||||
<SingleLine>
|
||||
<Sub4Title>Channel Fees</Sub4Title>
|
||||
<ColorButton
|
||||
color={'white'}
|
||||
onClick={() => setIsEdit(prev => !prev)}
|
||||
>
|
||||
{isEdit ? <XSvg /> : 'Update'}
|
||||
</ColorButton>
|
||||
</SingleLine>
|
||||
{isEdit && (
|
||||
<>
|
||||
<Separation />
|
||||
<SingleLine>
|
||||
<DarkSubTitle>{`Base Fee (Sats):`}</DarkSubTitle>
|
||||
<SmallInput
|
||||
color={'white'}
|
||||
type={'number'}
|
||||
onChange={e =>
|
||||
setBaseFee(parseInt(e.target.value))
|
||||
}
|
||||
/>
|
||||
</SingleLine>
|
||||
<SingleLine>
|
||||
<DarkSubTitle>{`Fee Rate (Sats/Million):`}</DarkSubTitle>
|
||||
<SmallInput
|
||||
color={'white'}
|
||||
type={'number'}
|
||||
onChange={e =>
|
||||
setFeeRate(parseInt(e.target.value))
|
||||
}
|
||||
/>
|
||||
</SingleLine>
|
||||
<SingleLine>
|
||||
<SecureButton
|
||||
callback={updateFees}
|
||||
variables={{
|
||||
...(baseFee !== 0 && { baseFee }),
|
||||
...(feeRate !== 0 && { feeRate }),
|
||||
}}
|
||||
color={'white'}
|
||||
enabled={baseFee >= 0 || feeRate >= 0}
|
||||
disabled={
|
||||
baseFee === 0 && feeRate === 0
|
||||
}
|
||||
>
|
||||
Update Fees
|
||||
<ChevronRight />
|
||||
</SecureButton>
|
||||
</SingleLine>
|
||||
</>
|
||||
)}
|
||||
</Card>
|
||||
</CardWithTitle>
|
||||
</AdminSwitch>
|
||||
<CardWithTitle>
|
||||
<SubTitle>Channel Fees</SubTitle>
|
||||
<Card>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue