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: cleanup

Browse source
This commit is contained in:
AP 2019-11-30 22:30:23 +01:00
parent 64d2e9b7b1
commit 514b8ebe11
5 changed files with 367 additions and 345 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/components/account/AccountInfo.tsx
View file

@ -17,7 +17,6 @@ import {
Send, Send,
MoreVertical, MoreVertical,
Zap, Zap,
ZapOff,
Anchor, Anchor,
Pocket, Pocket,
DownArrow, DownArrow,

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

@ -1,137 +1,151 @@
import React, { useContext, useState } from "react"; import React, { useContext } from 'react';
import { getPercent, getValue } from "../../../helpers/Helpers"; import { getPercent, getValue } from '../../../helpers/Helpers';
import { import {
Progress, Progress,
ProgressBar, ProgressBar,
NodeTitle, NodeTitle,
NodeBar, NodeBar,
NodeDetails, NodeDetails,
StatusLine, StatusLine,
DetailLine DetailLine,
} from "../Channels.style"; } from '../Channels.style';
import ReactTooltip from "react-tooltip"; import ReactTooltip from 'react-tooltip';
import { SubCard, Separation } from "../../generic/Styled"; import { SubCard, Separation } from '../../generic/Styled';
import { SettingsContext } from "../../../context/SettingsContext"; import { SettingsContext } from '../../../context/SettingsContext';
import { getStatusDot, getTooltipType } from "../../generic/Helpers"; import { getStatusDot, getTooltipType } from '../../generic/Helpers';
import { getNodeLink } from "../../generic/Helpers"; import { getNodeLink } from '../../generic/Helpers';
interface PendingCardProps { interface PendingCardProps {
channelInfo: any; channelInfo: any;
index: number; index: number;
setIndexOpen: (index: number) => void; setIndexOpen: (index: number) => void;
indexOpen: number; indexOpen: number;
} }
export const PendingCard = ({ export const PendingCard = ({
channelInfo, channelInfo,
index, index,
setIndexOpen, setIndexOpen,
indexOpen indexOpen,
}: PendingCardProps) => { }: PendingCardProps) => {
const { price, symbol, currency, theme } = useContext(SettingsContext); const { price, symbol, currency, theme } = useContext(SettingsContext);
const priceProps = { price, symbol, currency }; const priceProps = { price, symbol, currency };
const tooltipType = getTooltipType(theme); const tooltipType = getTooltipType(theme);
const getFormat = (amount: string) => const getFormat = (amount: string) =>
getValue({ getValue({
amount, amount,
...priceProps ...priceProps,
}); });
const { const {
isActive, isActive,
isClosing, isClosing,
isOpening, isOpening,
localBalance, localBalance,
// localReserve, // localReserve,
partnerPublicKey, partnerPublicKey,
received, received,
remoteBalance, remoteBalance,
// remoteReserve, // remoteReserve,
sent, sent,
partnerNodeInfo partnerNodeInfo,
} = channelInfo; } = channelInfo;
const { const {
alias, alias,
// capacity: nodeCapacity, // capacity: nodeCapacity,
// channelCount, // channelCount,
color: nodeColor color: nodeColor,
// lastUpdate // lastUpdate
} = partnerNodeInfo; } = partnerNodeInfo;
const formatBalance = getFormat(localBalance + remoteBalance); const formatBalance = getFormat(localBalance + remoteBalance);
const formatLocal = getFormat(localBalance); const formatLocal = getFormat(localBalance);
const formatRemote = getFormat(remoteBalance); const formatRemote = getFormat(remoteBalance);
const formatreceived = getFormat(received); const formatreceived = getFormat(received);
const formatSent = getFormat(sent); const formatSent = getFormat(sent);
const handleClick = () => { const handleClick = () => {
if (indexOpen === index) { if (indexOpen === index) {
setIndexOpen(0); setIndexOpen(0);
} else { } else {
setIndexOpen(index); setIndexOpen(index);
} }
}; };
const renderDetails = () => {
return (
<>
<Separation />
<DetailLine>
<div>Node Public Key:</div>
{getNodeLink(partnerPublicKey)}
</DetailLine>
{/* <DetailLine>{localReserve}</DetailLine> */}
{/* <DetailLine>{remoteReserve}</DetailLine> */}
{/* <DetailLine>{nodeCapacity}</DetailLine> */}
{/* <DetailLine>{channelCount}</DetailLine> */}
{/* <DetailLine>{lastUpdate}</DetailLine> */}
</>
);
};
const renderDetails = () => {
return ( return (
<> <SubCard color={nodeColor} key={index} onClick={() => handleClick()}>
<Separation /> <StatusLine>
<DetailLine> {getStatusDot(isActive, 'active')}
<div>Node Public Key:</div> {getStatusDot(isOpening, 'opening')}
{getNodeLink(partnerPublicKey)} {getStatusDot(isClosing, 'closing')}
</DetailLine> </StatusLine>
{/* <DetailLine>{localReserve}</DetailLine> */} <NodeBar>
{/* <DetailLine>{remoteReserve}</DetailLine> */} <NodeTitle>{alias ? alias : 'Unknown'}</NodeTitle>
{/* <DetailLine>{nodeCapacity}</DetailLine> */} <NodeDetails>
{/* <DetailLine>{channelCount}</DetailLine> */} {formatBalance}
{/* <DetailLine>{lastUpdate}</DetailLine> */} <div>
</> <Progress
data-tip
data-for={`node_balance_tip_${index}`}
>
<ProgressBar
percent={getPercent(
localBalance,
remoteBalance,
)}
/>
</Progress>
<Progress
data-tip
data-for={`node_activity_tip_${index}`}
>
<ProgressBar
order={2}
percent={getPercent(received, sent)}
/>
</Progress>
</div>
</NodeDetails>
</NodeBar>
{index === indexOpen && renderDetails()}
<ReactTooltip
id={`node_balance_tip_${index}`}
effect={'solid'}
place={'bottom'}
type={tooltipType}
>
<div>{`Local Balance: ${formatLocal}`}</div>
<div>{`Remote Balance: ${formatRemote}`}</div>
</ReactTooltip>
<ReactTooltip
id={`node_activity_tip_${index}`}
effect={'solid'}
place={'bottom'}
type={tooltipType}
>
<div>{`received: ${formatreceived}`}</div>
<div>{`Sent: ${formatSent}`}</div>
</ReactTooltip>
</SubCard>
); );
};
return (
<SubCard color={nodeColor} key={index} onClick={() => handleClick()}>
<StatusLine>
{getStatusDot(isActive, "active")}
{getStatusDot(isOpening, "opening")}
{getStatusDot(isClosing, "closing")}
</StatusLine>
<NodeBar>
<NodeTitle>{alias ? alias : "Unknown"}</NodeTitle>
<NodeDetails>
{formatBalance}
<div>
<Progress data-tip data-for={`node_balance_tip_${index}`}>
<ProgressBar percent={getPercent(localBalance, remoteBalance)} />
</Progress>
<Progress data-tip data-for={`node_activity_tip_${index}`}>
<ProgressBar order={2} percent={getPercent(received, sent)} />
</Progress>
</div>
</NodeDetails>
</NodeBar>
{index === indexOpen && renderDetails()}
<ReactTooltip
id={`node_balance_tip_${index}`}
effect={"solid"}
place={"bottom"}
type={tooltipType}
>
<div>{`Local Balance: ${formatLocal}`}</div>
<div>{`Remote Balance: ${formatRemote}`}</div>
</ReactTooltip>
<ReactTooltip
id={`node_activity_tip_${index}`}
effect={"solid"}
place={"bottom"}
type={tooltipType}
>
<div>{`received: ${formatreceived}`}</div>
<div>{`Sent: ${formatSent}`}</div>
</ReactTooltip>
</SubCard>
);
}; };

232
src/components/invoices/InvoiceCard.tsx
View file

@ -1,134 +1,142 @@
import React, { useContext, useState } from "react"; import React, { useContext } from 'react';
import { getValue } from "../../helpers/Helpers"; import { getValue } from '../../helpers/Helpers';
import { SettingsContext } from "../../context/SettingsContext"; import { SettingsContext } from '../../context/SettingsContext';
import { Separation, SubCard } from "../generic/Styled"; import { Separation, SubCard } from '../generic/Styled';
import { import {
DetailLine, DetailLine,
StatusLine, StatusLine,
NodeBar, NodeBar,
NodeTitle, NodeTitle,
NodeDetails NodeDetails,
} from "../channels/Channels.style"; } from '../channels/Channels.style';
import { getStatusDot, getDateDif, getFormatDate } from "../generic/Helpers"; import { getStatusDot, getDateDif, getFormatDate } from '../generic/Helpers';
import styled from "styled-components"; import styled from 'styled-components';
interface InvoiceCardProps { interface InvoiceCardProps {
invoice: any; invoice: any;
index: number; index: number;
setIndexOpen: (index: number) => void; setIndexOpen: (index: number) => void;
indexOpen: number; indexOpen: number;
} }
const DifLine = styled.div` const DifLine = styled.div`
font-size: 12px; font-size: 12px;
color: #bfbfbf; color: #bfbfbf;
`; `;
const formatDifference = ( const formatDifference = (
difference: string, difference: string,
numDif: number, numDif: number,
status: boolean status: boolean,
) => { ) => {
if (numDif > 0) { if (numDif > 0) {
return `+ ${difference}`; return `+ ${difference}`;
} else if (numDif < 0 && status) { } else if (numDif < 0 && status) {
return `- ${difference}`; return `- ${difference}`;
} else { } else {
return null; return null;
} }
}; };
export const InvoiceCard = ({ export const InvoiceCard = ({
invoice, invoice,
index, index,
setIndexOpen, setIndexOpen,
indexOpen indexOpen,
}: InvoiceCardProps) => { }: InvoiceCardProps) => {
const { price, symbol, currency } = useContext(SettingsContext); const { price, symbol, currency } = useContext(SettingsContext);
const priceProps = { price, symbol, currency }; const priceProps = { price, symbol, currency };
const getFormat = (amount: string) => const getFormat = (amount: string) =>
getValue({ getValue({
amount, amount,
...priceProps ...priceProps,
}); });
const { const {
confirmedAt, confirmedAt,
createdAt, createdAt,
description, description,
expiresAt, expiresAt,
isConfirmed, isConfirmed,
received, received,
tokens tokens,
// chainAddress, // chainAddress,
// descriptionHash, // descriptionHash,
// id, // id,
// isCanceled, // isCanceled,
// isHeld, // isHeld,
// isOutgoing, // isOutgoing,
// isPrivate, // isPrivate,
// payments, // payments,
// receivedMtokens, // receivedMtokens,
// request, // request,
// secret, // secret,
} = invoice; } = invoice;
const formatAmount = getFormat(tokens); const formatAmount = getFormat(tokens);
const dif = received - tokens; const dif = received - tokens;
const formatDif = getFormat(`${dif}`); const formatDif = getFormat(`${dif}`);
const handleClick = () => { const handleClick = () => {
if (indexOpen === index) { if (indexOpen === index) {
setIndexOpen(0); setIndexOpen(0);
} else { } else {
setIndexOpen(index); setIndexOpen(index);
} }
}; };
const renderDetails = () => {
return (
<>
<Separation />
{isConfirmed && (
<DetailLine>
<div>Confirmed</div>
{`${getDateDif(confirmedAt)} ago (${getFormatDate(
confirmedAt,
)})`}
</DetailLine>
)}
<DetailLine>
<div>Created:</div>
{`${getDateDif(createdAt)} ago (${getFormatDate(
createdAt,
)})`}
</DetailLine>
<DetailLine>
<div>Expires:</div>
{`${getDateDif(expiresAt)} ago (${getFormatDate(
expiresAt,
)})`}
</DetailLine>
{/* <DetailLine>{chainAddress}</DetailLine> */}
{/* <DetailLine>{descriptionHash}</DetailLine> */}
{/* <DetailLine>{isCanceled}</DetailLine> */}
{/* <DetailLine>{isHeld}</DetailLine> */}
{/* <DetailLine>{isOutgoing}</DetailLine> */}
{/* <DetailLine>{isPrivate}</DetailLine> */}
{/* <DetailLine>{payments}</DetailLine> */}
{/* <DetailLine>{receivedMtokens}</DetailLine> */}
{/* <DetailLine>{request}</DetailLine> */}
{/* <DetailLine>{secret}</DetailLine> */}
</>
);
};
const renderDetails = () => {
return ( return (
<> <SubCard key={index} onClick={() => handleClick()}>
<Separation /> <StatusLine>{getStatusDot(isConfirmed, 'active')}</StatusLine>
{isConfirmed && ( <NodeBar>
<DetailLine> <NodeTitle>
<div>Confirmed</div> {formatAmount}
{`${getDateDif(confirmedAt)} ago (${getFormatDate(confirmedAt)})`} <DifLine>
</DetailLine> {formatDifference(formatDif, dif, isConfirmed)}
)} </DifLine>
<DetailLine> </NodeTitle>
<div>Created:</div> <NodeDetails>{description}</NodeDetails>
{`${getDateDif(createdAt)} ago (${getFormatDate(createdAt)})`} </NodeBar>
</DetailLine> {index === indexOpen && renderDetails()}
<DetailLine> </SubCard>
<div>Expires:</div>
{`${getDateDif(expiresAt)} ago (${getFormatDate(expiresAt)})`}
</DetailLine>
{/* <DetailLine>{chainAddress}</DetailLine> */}
{/* <DetailLine>{descriptionHash}</DetailLine> */}
{/* <DetailLine>{isCanceled}</DetailLine> */}
{/* <DetailLine>{isHeld}</DetailLine> */}
{/* <DetailLine>{isOutgoing}</DetailLine> */}
{/* <DetailLine>{isPrivate}</DetailLine> */}
{/* <DetailLine>{payments}</DetailLine> */}
{/* <DetailLine>{receivedMtokens}</DetailLine> */}
{/* <DetailLine>{request}</DetailLine> */}
{/* <DetailLine>{secret}</DetailLine> */}
</>
); );
};
return (
<SubCard key={index} onClick={() => handleClick()}>
<StatusLine>{getStatusDot(isConfirmed, "active")}</StatusLine>
<NodeBar>
<NodeTitle>
{formatAmount}
<DifLine>{formatDifference(formatDif, dif, isConfirmed)}</DifLine>
</NodeTitle>
<NodeDetails>{description}</NodeDetails>
</NodeBar>
{index === indexOpen && renderDetails()}
</SubCard>
);
}; };

224
src/components/payments/PaymentsCards.tsx
View file

@ -1,124 +1,126 @@
import React, { useContext, useState } from "react"; import React, { useContext } from 'react';
import { getValue } from "../../helpers/Helpers"; import { getValue } from '../../helpers/Helpers';
import { SettingsContext } from "../../context/SettingsContext"; import { SettingsContext } from '../../context/SettingsContext';
import { Separation, SubCard } from "../generic/Styled"; import { Separation, SubCard } from '../generic/Styled';
import { import {
DetailLine, DetailLine,
StatusLine, StatusLine,
NodeBar, NodeBar,
NodeTitle, NodeTitle,
NodeDetails, NodeDetails,
MainInfo MainInfo,
} from "../channels/Channels.style"; } from '../channels/Channels.style';
import { import {
getStatusDot, getStatusDot,
getDateDif, getDateDif,
getFormatDate, getFormatDate,
getNodeLink getNodeLink,
} from "../generic/Helpers"; } from '../generic/Helpers';
interface PaymentsCardProps { interface PaymentsCardProps {
payment: any; payment: any;
index: number; index: number;
setIndexOpen: (index: number) => void; setIndexOpen: (index: number) => void;
indexOpen: number; indexOpen: number;
} }
export const PaymentsCard = ({ export const PaymentsCard = ({
payment, payment,
index, index,
setIndexOpen, setIndexOpen,
indexOpen indexOpen,
}: PaymentsCardProps) => { }: PaymentsCardProps) => {
const { price, symbol, currency } = useContext(SettingsContext); const { price, symbol, currency } = useContext(SettingsContext);
const priceProps = { price, symbol, currency }; const priceProps = { price, symbol, currency };
const getFormat = (amount: string) => const getFormat = (amount: string) =>
getValue({ getValue({
amount, amount,
...priceProps ...priceProps,
}); });
const { const {
createdAt, createdAt,
destination, destination,
fee, fee,
feeMtokens, feeMtokens,
hops, hops,
isConfirmed, isConfirmed,
tokens tokens,
// id, // id,
// isOutgoing, // isOutgoing,
// mtokens, // mtokens,
// request, // request,
// secret, // secret,
} = payment; } = payment;
const formatAmount = getFormat(tokens); const formatAmount = getFormat(tokens);
const handleClick = () => { const handleClick = () => {
if (indexOpen === index) { if (indexOpen === index) {
setIndexOpen(0); setIndexOpen(0);
} else { } else {
setIndexOpen(index); setIndexOpen(index);
} }
}; };
const renderDetails = () => {
return (
<>
<Separation />
<DetailLine>
<div>Created:</div>
{`${getDateDif(createdAt)} ago (${getFormatDate(
createdAt,
)})`}
</DetailLine>
<DetailLine>
<div>Destination Node:</div>
{getNodeLink(destination)}
</DetailLine>
<DetailLine>
<div>Fee:</div>
{getFormat(fee)}
</DetailLine>
<DetailLine>
<div>Fee msats:</div>
{`${feeMtokens} sats`}
</DetailLine>
<DetailLine data-tip data-for={`payment_hops_${index}`}>
<div>Hops:</div>
{hops.length}
</DetailLine>
{hops.map((hop: any, index: number) => (
<DetailLine>
<div>{`Hop ${index + 1}:`}</div>
<div style={{ textAlign: 'right' }} key={index}>
{hop}
</div>
</DetailLine>
))}
{/* <DetailLine>{id}</DetailLine> */}
{/* <DetailLine>{isOutgoing ? 'true': 'false'}</DetailLine> */}
{/* <DetailLine>{secret}</DetailLine> */}
{/* <DetailLine>{request}</DetailLine> */}
</>
);
};
const renderDetails = () => {
return ( return (
<> <SubCard key={index}>
<Separation /> <MainInfo onClick={() => handleClick()}>
<DetailLine> <StatusLine>{getStatusDot(isConfirmed, 'active')}</StatusLine>
<div>Created:</div> <NodeBar>
{`${getDateDif(createdAt)} ago (${getFormatDate(createdAt)})`} <NodeTitle>
</DetailLine> {formatAmount}
<DetailLine> {/* <DifLine>
<div>Destination Node:</div>
{getNodeLink(destination)}
</DetailLine>
<DetailLine>
<div>Fee:</div>
{getFormat(fee)}
</DetailLine>
<DetailLine>
<div>Fee msats:</div>
{`${feeMtokens} sats`}
</DetailLine>
<DetailLine data-tip data-for={`payment_hops_${index}`}>
<div>Hops:</div>
{hops.length}
</DetailLine>
{hops.map((hop: any, index: number) => (
<DetailLine>
<div>{`Hop ${index + 1}:`}</div>
<div style={{ textAlign: "right" }} key={index}>
{hop}
</div>
</DetailLine>
))}
{/* <DetailLine>{id}</DetailLine> */}
{/* <DetailLine>{isOutgoing ? 'true': 'false'}</DetailLine> */}
{/* <DetailLine>{secret}</DetailLine> */}
{/* <DetailLine>{request}</DetailLine> */}
</>
);
};
return (
<SubCard key={index}>
<MainInfo onClick={() => handleClick()}>
<StatusLine>{getStatusDot(isConfirmed, "active")}</StatusLine>
<NodeBar>
<NodeTitle>
{formatAmount}
{/* <DifLine>
{formatDifference(formatDif, dif, isConfirmed)} {formatDifference(formatDif, dif, isConfirmed)}
</DifLine> */} </DifLine> */}
</NodeTitle> </NodeTitle>
<NodeDetails> <NodeDetails>
{/* {description} */} {/* {description} */}
{/* {formatBalance} */} {/* {formatBalance} */}
{/* <div> {/* <div>
<Progress <Progress
data-tip data-tip
data-for={`node_balance_tip_${index}`} data-for={`node_balance_tip_${index}`}
@ -140,10 +142,10 @@ export const PaymentsCard = ({
/> />
</Progress> </Progress>
</div> */} </div> */}
</NodeDetails> </NodeDetails>
</NodeBar> </NodeBar>
</MainInfo> </MainInfo>
{index === indexOpen && renderDetails()} {index === indexOpen && renderDetails()}
</SubCard> </SubCard>
); );
}; };

1
src/sections/navigation/Navigation.tsx
View file

@ -1,6 +1,5 @@
import React from 'react'; import React from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import { Card } from '../../components/generic/Styled';
import { Link, useLocation } from 'react-router-dom'; import { Link, useLocation } from 'react-router-dom';
import { NodeInfo } from '../../components/nodeInfo/NodeInfo'; import { NodeInfo } from '../../components/nodeInfo/NodeInfo';
import { SideSettings } from '../../components/sideSettings/SideSettings'; import { SideSettings } from '../../components/sideSettings/SideSettings';